lcbp3/specs/200-fullstacks/226-document-chat-ui-pattern/tasks.md

// File: specs/200-fullstacks/226-document-chat-ui-pattern/tasks.md // Change Log: // - 2026-05-19: Initial task list for Document Chat UI Pattern

Tasks: Document Chat UI Pattern

Input: Design documents from /specs/200-fullstacks/226-document-chat-ui-pattern/ Prerequisites: plan.md (required), spec.md (required)

---

Phase 1: Setup (การเตรียมโครงสร้างและ Proxy API)

Purpose: ตั้งค่าโครงสร้างโปรเจกต์และสร้าง API endpoint proxy เบื้องต้น

• T001 สร้างโครงสร้างโฟลเดอร์สำหรับเอกสารวิศวกรรมใน specs/200-fullstacks/226-document-chat-ui-pattern/
• T002 ตั้งค่า API Route Proxy สำหรับ Chat ใน frontend/app/api/ai/chat/route.ts เพื่อรับส่งงานไปยัง AI Gateway

---

Phase 2: Foundational (โครงสร้างข้อมูลแชทและ React State Hook)

Purpose: สร้างระบบพื้นฐานและ Hook สำหรับจัดการแชท ซึ่งเป็นรากฐานของหน้าจอย่อยทั้งหมด

⚠️ CRITICAL: ต้องทำส่วนนี้ให้เสร็จสิ้นก่อนเริ่มทำ User Story อื่นๆ

• T003 [P] สร้างอินเตอร์เฟซ TypeScript สำหรับ Chat Messages และ API payload ใน frontend/types/ai-chat.ts
• T004 พัฒนา custom React Hook useAiChat ใน frontend/hooks/use-ai-chat.ts เพื่อจัดการ Session Storage และการเรียกใช้ API ของ AI Chat

Checkpoint: โครงสร้างพื้นฐานเสร็จสมบูรณ์ - พร้อมสำหรับการเริ่มพัฒนา User Story ในขั้นตอนถัดไป

---

Phase 3: User Story 1 - ดูเอกสารและคุยกับ AI พร้อมกันบน Desktop (Priority: P1) 🎯 MVP

Goal: พัฒนาหน้าจอแชทแบบ Slide-in panel ด้านขวาในหน้าดูรายละเอียดเอกสารหลัก โดยไม่บดบังเนื้อหา (Desktop)

Independent Test: ผู้ใช้งานบน Desktop สามารถเปิด/ปิด Chat Panel ได้ผ่านปุ่ม Toggle และพิมพ์สนทนากับ AI ได้อย่างลื่นไหลโดยเอกสารหลักย่อขนาดหลบด้านข้าง

Implementation for User Story 1

• T005 [P] [US1] พัฒนาคอมโพเนนต์ AiChatToggle ใน frontend/components/ai/ai-chat-toggle.tsx สำหรับเป็นปุ่มควบคุม
• T006 [P] [US1] พัฒนาคอมโพเนนต์ AiChatInput ใน frontend/components/ai/ai-chat-input.tsx สำหรับพิมพ์คำสั่งและส่งข้อความ
• T007 [US1] พัฒนาคอมโพเนนต์หลัก AiChatPanel ใน frontend/components/ai/ai-chat-panel.tsx เพื่อเรนเดอร์แผงกว้าง 400px (Desktop) แบบ Slide-in (ขึ้นกับ T005, T006)
• T008 [US1] ติดตั้ง AiChatPanel และ AiChatToggle ในหน้าดูข้อมูล Drawing ใน frontend/app/drawings/[publicId]/page.tsx
• T009 [US1] ติดตั้ง AiChatPanel และ AiChatToggle ในหน้าดูข้อมูล RFA ใน frontend/app/rfas/[publicId]/page.tsx

Checkpoint: สิ้นสุดขั้นตอนนี้ ระบบจะสามารถใช้งาน AI Chat เคียงคู่กับเอกสารบน Desktop ได้อย่างสมบูรณ์แบบอิสระ

---

Phase 4: User Story 2 - การสนทนากับ AI โดยใช้เอกสารเป็นบริบท (Context Injection) (Priority: P1)

Goal: ระบบแนบบริบทของเอกสาร (type และ publicId) ไปพร้อมคำถามทุกครั้งเพื่อให้ AI ให้ Insight ได้ตรงจุด

Independent Test: เมื่อพิมพ์คำถาม "สรุปเอกสารนี้" ระบบสามารถเรียก endpoint ด้วย context payload ที่ถูกต้อง โดยที่ไม่มี integer id รั่วไหล

Implementation for User Story 2

• T010 [US2] เพิ่มตรรกะตรวจจับบริบท (Context Injection) ใน frontend/hooks/use-ai-chat.ts เพื่อแนบประเภทและ publicId อัตโนมัติ
• T011 [US2] พัฒนาคอมโพเนนต์แสดงผลรายการประวัติข้อความ AiChatMessages ใน frontend/components/ai/ai-chat-messages.tsx ให้แยกความแตกต่างระหว่างกล่องข้อความผู้ใช้, AI, ระบบ, หรือข้อผิดพลาด

Checkpoint: ระบบเข้าใจบริบทของเอกสารที่ผู้ใช้เปิดอ่านอยู่ได้สำเร็จและแสดงผลการตอบสนองได้ตรงประเด็น

---

Phase 5: User Story 3 - ปรับเปลี่ยนการแสดงผลตามขนาดหน้าจอ (Priority: P2)

Goal: รองรับ Responsive layout (Tablet กว้าง 30%, Mobile แสดงผลเป็น Bottom sheet เด้งลอยสูง 60%)

Independent Test: ย่อบราวเซอร์หรือทดสอบบนแท็บเล็ตและอุปกรณ์พกพา ยืนยันว่าลักษณะของ Chat Panel ปรับตาม Breakpoint ได้ถูกต้อง

Implementation for User Story 3

• T012 [US3] ปรับปรุง AiChatPanel ใน frontend/components/ai/ai-chat-panel.tsx โดยใช้ CSS Media query หรือ Radix UI primitives ให้ปรับเปลี่ยนเลย์เอาต์ตาม Responsive breakpoint

---

Phase 6: User Story 4 - การนำเสนอ Suggested Actions แนะนำการสั่งงาน (Priority: P2)

Goal: แสดงปุ่ม Chip แนะนำการทำงาน และเมื่อคลิกจะส่งคำถามไปยัง AI อัตโนมัติ

Independent Test: กล่องข้อความ AI เรนเดอร์ปุ่ม Chip สั่งงานใต้คำตอบ และเมื่อคลิกจะส่งข้อความนั้นเข้ากล่องแชททันที

Implementation for User Story 4

• T013 [P] [US4] สร้างคอมโพเนนต์แนะนำคำสั่ง AiSuggestedActions ใน frontend/components/ai/ai-suggested-actions.tsx สำหรับแสดงปุ่ม Chip
• T014 [US4] ผนวกรหัสสั่งงานเข้ากับ AiChatPanel ใน frontend/components/ai/ai-chat-panel.tsx เพื่อให้การกด Chip ส่งคำสั่งทันที

---

Phase 7: Polish & Cross-Cutting Concerns (ความสมบูรณ์ขั้นสุดท้ายและเค้าโครงระบบทดสอบ)

Purpose: ปรับแต่งจุดข้ามผ่าน ความเป็นระเบียบ และการติดตั้งระบบตรวจสอบอัตโนมัติ

• T015 ติดตั้งคีย์บอร์ดชอร์ตคัต Ctrl/Cmd + . ใน frontend/components/ai/ai-chat-panel.tsx
• T016 เพิ่ม Unit Test สำหรับ useAiChat ใน frontend/hooks/use-ai-chat.spec.ts ด้วย Vitest
• T017 เพิ่ม Unit Test สำหรับ AiChatPanel ใน frontend/components/ai/ai-chat-panel.spec.tsx
• T018 ตรวจทานความสอดคล้องกับมาตรการความปลอดภัยและ UUIDv7 (ADR-019) ในทุกไฟล์ที่พัฒนาขึ้นใหม่

---

Dependencies & Execution Order (ลำดับและการพึ่งพากันในการรันงาน)

Phase Dependencies

graph TD
    P1[Phase 1: Setup] --> P2[Phase 2: Foundational]
    P2 --> P3[Phase 3: User Story 1 - Desktop MVP]
    P2 --> P4[Phase 4: User Story 2 - Context Injection]
    P3 --> P5[Phase 5: User Story 3 - Responsive]
    P4 --> P6[Phase 6: User Story 4 - Suggested Actions]
    P5 --> P7[Phase 7: Polish & Verification]
    P6 --> P7

Parallel Opportunities (โอกาสทำงานคู่ขนาน)

• Foundational (Phase 2): สามารถพัฒนาอินเตอร์เฟซและโมเดลข้อมูล T003 คู่ขนานไปกับการออกแบบ custom hook T004 ได้
• User Story 1 (Phase 3): สามารถแยกสร้างคอมโพเนนต์ย่อย T005 (Toggle) และ T006 (Input) ในเวลาเดียวกันได้
• User Story 4 (Phase 6): สามารถพัฒนาปุ่มแนะนำ T013 คู่ขนานไปกับส่วนประกอบอื่นได้