Tuần: W15 | : S5
ID v5.0: 6.2
Phân loại: AI chính / review
Effort NCS: 2h | Effort : 0h | Effort AI: 4h

Mô tả

AI sẽ viết mã nguồn Frontend bằng , đặc biệt là component ChatWindow. NCS đọc code, review cấu trúc và chạy thử cục bộ bằng (hoặc dev server) để kiểm tra giao diện cơ bản.

File Input

  • docs/design/wireframes/review_notes.md

File Output

  • src/frontend/components/ChatWindow.vue

Definition of Done (DoD)

  • [ ] Code ChatWindow được AI hoàn thiện và đẩy lên
  • [ ] NCS chạy thử thành công trên môi trường local
  • [ ] Giao diện hiển thị đúng như wireframe đã duyệt

Rủi ro & Xử lý

Rủi ro Xác suất Xử lý
Lỗi môi trường dev Vue 3 Thấp Nhờ AI hướng dẫn cách run/serve

1. Mô tả chi tiết (Bổ sung)

Dựa trên Sprint 6 (Frontend Vue 3 + Voice MVP + ), nhiệm vụ hôm nay tập trung vào việc đảm bảo kiến trúc Vue 3 hoạt động ổn định trên môi trường IIS static. Các được hiển thị rõ ràng, tuân thủ nghiêm ngặt và có hỗ trợ tính năng . Đối với tính năng Voice (/ theo ADR-003: Voice-First but Not Voice-Only), hệ thống sử dụng Google Cloud Speech-to-Text, có cơ chế fallback text trong trường hợp không nhận diện được giọng nói.

2. Rubric 5 tiêu chí

  • Tiêu chí 1 (Frontend): Điểm Lighthouse ≥90, đảm bảo hiệu năng tải trang tĩnh.
  • Tiêu chí 2 (): Đạt chuẩn WCAG AA, font chữ lớn, độ tương phản cao phù hợp với "".
  • Tiêu chí 3 (Voice): STT (Google ) có độ chính xác cao, TTS đọc tự nhiên, luôn hiển thị fallback text.
  • Tiêu chí 4 (Y khoa/An toàn): Có cổng kiểm soát (Gate C) với Clinical Safety checklist, tích hợp đầy đủ .
  • Tiêu chí 5 (Chất lượng): Không chứa lời khuyên y khoa nguy hiểm (), luôn có và phải được CVYK sign-off, vượt qua .

3. Phân vai trò

  • NCS (Nghiên cứu sinh): Trực tiếp chạy và kiểm thử (Lighthouse, WCAG), tích hợp Vue 3 và API Voice, kiểm tra hiển thị của thẻ tri thức.
  • CVYK (Cố vấn y khoa): Review các luồng an toàn (Gate C), kiểm tra các kịch bản cờ đỏ, sign-off kết quả.
  • (Giáo viên hướng dẫn): Giám sát tiến độ Sprint 6, phê duyệt kiến trúc Vue 3 + Voice MVP.
  • AI (Trợ lý): Sinh code Vue 3, hỗ trợ prompt thiết kế, chạy bộ kiểm thử chuẩn.

4. Đánh giá AI hỗ trợ

AI hoạt động hiệu quả trong việc tạo khung code (ChatWindow component) và lên danh sách kiểm thử. Tuy nhiên, AI cần được tinh chỉnh bằng prompt cụ thể về Vue 3 và WCAG để đảm bảo không vi phạm các nguyên tắc trợ năng. Khả năng thiết kế wireframe của AI giúp giảm 50% thời gian tạo mockup tĩnh.

5. Sub-task AI + Prompt

  • AI thiết kế wireframe (Figma/HTML mockup):
  • Prompt: "Act as a UX/UI designer. Create an HTML mockup cho NCT. Yêu cầu: font ≥18px, contrast ≥4.5:1, nút lớn. Dựa trên ADR-003: Voice-First but Not Voice-Only."
  • AI code Vue 3 ChatWindow component:
  • Prompt: "Write a Vue 3 component named ChatWindow. Yêu cầu: khai báo Component spec, props, events, a11y, và chỉ rõ API endpoint. Hỗ trợ hiển thị 'thẻ tri thức' (knowledge cards) và 'truy vết nguồn' (provenance)."
  • AI tích hợp Google Speech-to-Text API:
  • Prompt: "Provide Google Cloud config cho STT/TTS. Yêu cầu: fallback to text, và xử lý lỗi (error handling) chi tiết."
  • AI chạy Lighthouse audit:
  • Prompt: "Act as a performance QA. Chạy Lighthouse audit qua command line. Yêu cầu: target scores ≥90 (accessibility & performance). Cung cấp fix suggestions nếu có cảnh báo."
  • AI chuẩn bị Gate C:
  • Prompt: "Act as a QA. Tạo Clinical safety checklist và trợ năng checklist cho Gate C. Đảm bảo bộ lọc an toàn chặn được cờ đỏ (red flags)."