Jammy/TrueGrowth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3b6781d6956bd896c83ee12c3fe16527665ea911
TrueGrowth/specs/003-chat-drawer/tasks.md

12 KiB
Raw Blame History

Tasks: 对话抽屉 (Chat Drawer)

Input: Design documents from /specs/001-chat-drawer/ Prerequisites: plan.md, spec.md, research.md, data-model.md, contracts/

Tests: Tests are NOT explicitly requested - implementation only.

Organization: Tasks are grouped by user story to enable independent implementation and testing of each story.

Format: [ID] [P?] [Story] Description

  • [P]: Can run in parallel (different files, no dependencies)
  • [Story]: Which user story this task belongs to (e.g., US1, US2, US3, US4)
  • Include exact file paths in descriptions

Path Conventions

  • Monorepo structure: packages/drawnix/src/ for all source files
  • Components: packages/drawnix/src/components/chat-drawer/
  • Hooks: packages/drawnix/src/hooks/
  • Services: packages/drawnix/src/services/
  • Types: packages/drawnix/src/types/
  • Constants: packages/drawnix/src/constants/

Phase 1: Setup (Shared Infrastructure)

Purpose: Project initialization, types, and constants

  • T001 [P] Create type definitions in packages/drawnix/src/types/chat.types.ts (copy from contracts/chat-api.ts)
  • T002 [P] Create constants file in packages/drawnix/src/constants/CHAT_CONSTANTS.ts
  • T003 [P] Create chat-drawer component directory structure in packages/drawnix/src/components/chat-drawer/
  • T004 Create index.ts barrel export in packages/drawnix/src/components/chat-drawer/index.ts

Phase 2: Foundational (Blocking Prerequisites)

Purpose: Core infrastructure that MUST be complete before ANY user story can be implemented

⚠️ CRITICAL: No user story work can begin until this phase is complete

  • T005 Create chat storage service in packages/drawnix/src/services/chat-storage-service.ts with localforage configuration
  • T006 Create useChatStorage hook in packages/drawnix/src/hooks/useChatStorage.ts for IndexedDB operations
  • T007 Create chat API service in packages/drawnix/src/services/chat-service.ts with streaming support
  • T008 Create useChatStream hook in packages/drawnix/src/hooks/useChatStream.ts for handling SSE responses
  • T009 Create base styles in packages/drawnix/src/components/chat-drawer/chat-drawer.scss with BEM naming

Checkpoint: Foundation ready - user story implementation can now begin

Phase 3: User Story 1 - 基本对话交互 (Priority: P1) 🎯 MVP

Goal: 用户能够展开/收起对话抽屉，与AI进行基本的连续对话

Independent Test: 点击抽屉按钮展开，输入消息，接收流式AI回复，保持上下文

Implementation for User Story 1

  • T010 [P] [US1] Create StreamingText component in packages/drawnix/src/components/chat-drawer/StreamingText.tsx for token-by-token display
  • T011 [P] [US1] Create MessageItem component in packages/drawnix/src/components/chat-drawer/MessageItem.tsx for single message display
  • T012 [US1] Create MessageList component in packages/drawnix/src/components/chat-drawer/MessageList.tsx (depends on T011)
  • T013 [P] [US1] Create AttachmentPreview component in packages/drawnix/src/components/chat-drawer/AttachmentPreview.tsx for file preview
  • T014 [US1] Create MessageInput component in packages/drawnix/src/components/chat-drawer/MessageInput.tsx with attachment support (depends on T013)
  • T015 [US1] Create useChatMessages hook in packages/drawnix/src/hooks/useChatMessages.ts for message state management
  • T016 [US1] Create ChatDrawerTrigger component in packages/drawnix/src/components/chat-drawer/ChatDrawerTrigger.tsx
  • T017 [US1] Create ChatDrawer main component in packages/drawnix/src/components/chat-drawer/ChatDrawer.tsx (depends on T012, T014, T015, T016)
  • T018 [US1] Add drawer styles for expand/collapse animation in packages/drawnix/src/components/chat-drawer/chat-drawer.scss
  • T019 [US1] Integrate ChatDrawer into drawnix.tsx in packages/drawnix/src/drawnix.tsx
  • T020 [US1] Update DrawnixState in packages/drawnix/src/hooks/use-drawnix.tsx to include chat drawer state
  • T021 [US1] Import chat-drawer.scss in packages/drawnix/src/styles/index.scss

Checkpoint: User Story 1 complete - basic chat interaction works independently

Phase 4: User Story 2 - 对话历史持久化 (Priority: P2)

Goal: 对话历史能够保存到IndexedDB，页面刷新后自动恢复

Independent Test: 进行对话，刷新页面，验证历史记录完整恢复

Implementation for User Story 2

  • T022 [US2] Extend chat-storage-service.ts with message persistence methods in packages/drawnix/src/services/chat-storage-service.ts
  • T023 [US2] Add history restoration logic to useChatMessages hook in packages/drawnix/src/hooks/useChatMessages.ts
  • T024 [US2] Add auto-save on message send/receive in packages/drawnix/src/hooks/useChatMessages.ts
  • T025 [US2] Add storage cleanup and pruning logic in packages/drawnix/src/services/chat-storage-service.ts
  • T026 [US2] Add loading state for history restoration in packages/drawnix/src/components/chat-drawer/ChatDrawer.tsx

Checkpoint: User Story 2 complete - history persists across page reloads

Phase 5: User Story 3 - 多会话管理 (Priority: P3)

Goal: 用户能够创建、切换、删除多个独立的对话会话

Independent Test: 创建新会话，切换会话，验证各会话独立，删除会话

Implementation for User Story 3

  • T027 [P] [US3] Create SessionItem component in packages/drawnix/src/components/chat-drawer/SessionItem.tsx
  • T028 [US3] Create SessionList component in packages/drawnix/src/components/chat-drawer/SessionList.tsx (depends on T027)
  • T029 [US3] Create useChatSessions hook in packages/drawnix/src/hooks/useChatSessions.ts for session CRUD operations
  • T030 [US3] Add session management methods to chat-storage-service.ts in packages/drawnix/src/services/chat-storage-service.ts
  • T031 [US3] Add session title auto-generation logic (from first message) in packages/drawnix/src/hooks/useChatSessions.ts
  • T032 [US3] Integrate SessionList into ChatDrawer in packages/drawnix/src/components/chat-drawer/ChatDrawer.tsx
  • T033 [US3] Add session switching UI and logic in packages/drawnix/src/components/chat-drawer/ChatDrawer.tsx
  • T034 [US3] Add session deletion confirmation in packages/drawnix/src/components/chat-drawer/SessionList.tsx

Checkpoint: User Story 3 complete - multiple sessions work independently

Phase 6: User Story 4 - 消息操作功能 (Priority: P4)

Goal: 用户能够复制消息、重新生成回复、停止生成

Independent Test: 复制AI消息到剪贴板，点击重新生成获取新回复，点击停止中断生成

Implementation for User Story 4

  • T035 [US4] Add message action buttons (copy, regenerate) to MessageItem in packages/drawnix/src/components/chat-drawer/MessageItem.tsx
  • T036 [US4] Implement copy to clipboard functionality in packages/drawnix/src/components/chat-drawer/MessageItem.tsx
  • T037 [US4] Add stop generation button to MessageInput in packages/drawnix/src/components/chat-drawer/MessageInput.tsx
  • T038 [US4] Implement stop generation logic with AbortController in packages/drawnix/src/hooks/useChatStream.ts
  • T039 [US4] Implement regenerate response logic in packages/drawnix/src/hooks/useChatMessages.ts
  • T040 [US4] Add regenerate API method to chat-service.ts in packages/drawnix/src/services/chat-service.ts

Checkpoint: User Story 4 complete - all message operations work

Phase 7: Polish & Cross-Cutting Concerns

Purpose: Improvements that affect multiple user stories

  • T041 [P] Add responsive styles for mobile full-screen mode in packages/drawnix/src/components/chat-drawer/chat-drawer.scss
  • T042 [P] Add error boundary for chat drawer in packages/drawnix/src/components/chat-drawer/ChatDrawer.tsx
  • T043 Add error handling and retry logic for network failures in packages/drawnix/src/services/chat-service.ts
  • T044 Add virtual scrolling for long message lists in packages/drawnix/src/components/chat-drawer/MessageList.tsx
  • T045 [P] Add keyboard shortcuts (Enter to send, Escape to close) in packages/drawnix/src/components/chat-drawer/ChatDrawer.tsx
  • T046 [P] Add i18n strings for chat drawer UI in packages/drawnix/src/i18n.tsx
  • T047 Update barrel exports in packages/drawnix/src/components/chat-drawer/index.ts
  • T048 Run quickstart.md validation to verify all features work

Dependencies & Execution Order

Phase Dependencies

  • Setup (Phase 1): No dependencies - can start immediately
  • Foundational (Phase 2): Depends on Setup completion - BLOCKS all user stories
  • User Stories (Phase 3-6): All depend on Foundational phase completion
    • User stories can proceed in priority order (P1 → P2 → P3 → P4)
    • US2 depends on US1 (needs basic messaging to persist)
    • US3 depends on US2 (needs persistence for sessions)
    • US4 can partially overlap with US2/US3
  • Polish (Phase 7): Depends on all user stories being complete

User Story Dependencies

  • User Story 1 (P1): Can start after Foundational (Phase 2) - No dependencies on other stories
  • User Story 2 (P2): Depends on US1 (needs messages to persist)
  • User Story 3 (P3): Depends on US2 (needs persistence layer)
  • User Story 4 (P4): Depends on US1 (needs messages to operate on)

Within Each User Story

  • Components before integration
  • Hooks before components that use them
  • Services before hooks that call them
  • Base components before composite components

Parallel Opportunities

Phase 1 (Setup):

# All can run in parallel:
T001: Create type definitions
T002: Create constants
T003: Create directory structure

Phase 3 (User Story 1):

# Can run in parallel (different files):
T010: StreamingText component
T011: MessageItem component
T013: AttachmentPreview component
T016: ChatDrawerTrigger component

Phase 5 (User Story 3):

# Can run in parallel:
T027: SessionItem component (then T028 depends on it)

Phase 7 (Polish):

# Can run in parallel:
T041: Responsive styles
T042: Error boundary
T045: Keyboard shortcuts
T046: i18n strings

Implementation Strategy

MVP First (User Story 1 Only)

  1. Complete Phase 1: Setup (T001-T004)
  2. Complete Phase 2: Foundational (T005-T009)
  3. Complete Phase 3: User Story 1 (T010-T021)
  4. STOP and VALIDATE: Test basic chat interaction independently
  5. Deploy/demo if ready - users can already chat with AI!

Incremental Delivery

  1. Setup + Foundational → Foundation ready
  2. Add User Story 1 → Test independently → MVP Release (basic chat)
  3. Add User Story 2 → Test independently → Release (chat + persistence)
  4. Add User Story 3 → Test independently → Release (multi-session)
  5. Add User Story 4 → Test independently → Release (full features)
  6. Add Polish → Final release

Estimated Task Counts

Phase Tasks Parallel Tasks
Phase 1: Setup 4 3
Phase 2: Foundational 5 0
Phase 3: US1 (P1) 12 4
Phase 4: US2 (P2) 5 0
Phase 5: US3 (P3) 8 1
Phase 6: US4 (P4) 6 0
Phase 7: Polish 8 4
Total 48 12

Notes

  • [P] tasks = different files, no dependencies
  • [Story] label maps task to specific user story for traceability
  • Each user story should be independently testable after completion
  • Follow TDesign light theme and BEM naming conventions
  • Keep each file under 500 lines (split if necessary)
  • Commit after each task or logical group
  • Stop at any checkpoint to validate story independently
Reference in New Issue View Git Blame Copy Permalink