123 lines
9.9 KiB
Markdown
123 lines
9.9 KiB
Markdown
// 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 เบื้องต้น
|
|
|
|
- [X] T001 สร้างโครงสร้างโฟลเดอร์สำหรับเอกสารวิศวกรรมใน `specs/200-fullstacks/226-document-chat-ui-pattern/`
|
|
- [X] 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 อื่นๆ
|
|
|
|
- [X] T003 [P] สร้างอินเตอร์เฟซ TypeScript สำหรับ Chat Messages และ API payload ใน `frontend/types/ai-chat.ts`
|
|
- [X] 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
|
|
|
|
- [X] T005 [P] [US1] พัฒนาคอมโพเนนต์ `AiChatToggle` ใน `frontend/components/ai/ai-chat-toggle.tsx` สำหรับเป็นปุ่มควบคุม
|
|
- [X] T006 [P] [US1] พัฒนาคอมโพเนนต์ `AiChatInput` ใน `frontend/components/ai/ai-chat-input.tsx` สำหรับพิมพ์คำสั่งและส่งข้อความ
|
|
- [X] T007 [US1] พัฒนาคอมโพเนนต์หลัก `AiChatPanel` ใน `frontend/components/ai/ai-chat-panel.tsx` เพื่อเรนเดอร์แผงกว้าง 400px (Desktop) แบบ Slide-in (ขึ้นกับ T005, T006)
|
|
- [X] T008 [US1] ติดตั้ง `AiChatPanel` และ `AiChatToggle` ในหน้าดูข้อมูล Drawing ใน `frontend/app/drawings/[publicId]/page.tsx`
|
|
- [X] 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
|
|
|
|
- [X] T010 [US2] เพิ่มตรรกะตรวจจับบริบท (Context Injection) ใน `frontend/hooks/use-ai-chat.ts` เพื่อแนบประเภทและ publicId อัตโนมัติ
|
|
- [X] 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
|
|
|
|
- [X] 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
|
|
|
|
- [X] T013 [P] [US4] สร้างคอมโพเนนต์แนะนำคำสั่ง `AiSuggestedActions` ใน `frontend/components/ai/ai-suggested-actions.tsx` สำหรับแสดงปุ่ม Chip
|
|
- [X] T014 [US4] ผนวกรหัสสั่งงานเข้ากับ `AiChatPanel` ใน `frontend/components/ai/ai-chat-panel.tsx` เพื่อให้การกด Chip ส่งคำสั่งทันที
|
|
|
|
---
|
|
|
|
## Phase 7: Polish & Cross-Cutting Concerns (ความสมบูรณ์ขั้นสุดท้ายและเค้าโครงระบบทดสอบ)
|
|
|
|
**Purpose**: ปรับแต่งจุดข้ามผ่าน ความเป็นระเบียบ และการติดตั้งระบบตรวจสอบอัตโนมัติ
|
|
|
|
- [X] T015 ติดตั้งคีย์บอร์ดชอร์ตคัต `Ctrl/Cmd + .` ใน `frontend/components/ai/ai-chat-panel.tsx`
|
|
- [X] T016 เพิ่ม Unit Test สำหรับ `useAiChat` ใน `frontend/hooks/use-ai-chat.spec.ts` ด้วย Vitest
|
|
- [X] T017 เพิ่ม Unit Test สำหรับ `AiChatPanel` ใน `frontend/components/ai/ai-chat-panel.spec.tsx`
|
|
- [X] T018 ตรวจทานความสอดคล้องกับมาตรการความปลอดภัยและ UUIDv7 (ADR-019) ในทุกไฟล์ที่พัฒนาขึ้นใหม่
|
|
|
|
---
|
|
|
|
## Dependencies & Execution Order (ลำดับและการพึ่งพากันในการรันงาน)
|
|
|
|
### Phase Dependencies
|
|
|
|
```mermaid
|
|
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` คู่ขนานไปกับส่วนประกอบอื่นได้
|