# Implementation Plan: 对话抽屉 (Chat Drawer)

**Branch**: `001-chat-drawer` | **Date**: 2025-12-03 | **Spec**: [spec.md](./spec.md)
**Input**: Feature specification from `/specs/001-chat-drawer/spec.md`

## Summary

实现一个可展开/收起的对话抽屉组件，位于画板右侧，支持：
- 与AI进行流式连续对话
- 对话历史持久化存储（IndexedDB via localforage）
- 多会话管理（创建、切换、删除）
- 附件上传（图片、文档、文件）
- 响应式布局（桌面端自适应宽度，移动端全屏覆盖）

技术方案基于现有的 Drawnix 架构，复用 Dialog、Task Queue、Settings 等组件模式。

## Technical Context

**Language/Version**: TypeScript 5.x, React 18.x
**Primary Dependencies**: TDesign React (UI), Floating UI (定位), localforage (存储), RxJS (状态管理)
**Storage**: IndexedDB via localforage (chat-sessions, chat-messages stores)
**Testing**: Vitest + React Testing Library
**Target Platform**: Web (Chrome, Firefox, Safari, Edge), 响应式支持移动端
**Project Type**: Web Monorepo (Nx)
**Performance Goals**: 抽屉动画60fps, 首字节响应<3秒, 历史恢复<500ms
**Constraints**: 单文件<500行, TDesign light主题, BEM命名
**Scale/Scope**: 50+会话, 每会话100+消息, 附件支持

## Constitution Check

*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*

| Principle | Status | Notes |
|-----------|--------|-------|
| I. 插件优先架构 | ✅ Pass | Chat功能作为独立组件实现，不需要扩展Plait核心 |
| II. 文件大小约束 (<500行) | ✅ Pass | 将拆分为多个小组件：ChatDrawer, MessageList, MessageInput, SessionList等 |
| III. 类型安全优先 | ✅ Pass | 定义完整的TypeScript接口 |
| IV. 设计系统一致性 | ✅ Pass | 使用TDesign组件，light主题，BEM命名 |
| V. 性能与优化 | ✅ Pass | 使用React.memo, useCallback, 虚拟滚动 |
| VI. 安全与验证 | ✅ Pass | 验证用户输入，不存储敏感信息明文 |
| VII. Monorepo 结构 | ✅ Pass | 组件放置在 packages/drawnix/src/components/chat-drawer/ |

## Project Structure

### Documentation (this feature)

```text
specs/001-chat-drawer/
├── plan.md              # This file
├── research.md          # Phase 0 output
├── data-model.md        # Phase 1 output
├── quickstart.md        # Phase 1 output
├── contracts/           # Phase 1 output
│   └── chat-api.ts      # TypeScript interfaces
└── tasks.md             # Phase 2 output
```

### Source Code (repository root)

```text
packages/drawnix/src/
├── components/
│   └── chat-drawer/                    # 新增：对话抽屉组件
│       ├── ChatDrawer.tsx              # 主抽屉组件
│       ├── ChatDrawerTrigger.tsx       # 触发按钮
│       ├── MessageList.tsx             # 消息列表
│       ├── MessageItem.tsx             # 单条消息
│       ├── MessageInput.tsx            # 输入框组件
│       ├── SessionList.tsx             # 会话列表
│       ├── SessionItem.tsx             # 单个会话
│       ├── AttachmentPreview.tsx       # 附件预览
│       ├── StreamingText.tsx           # 流式文本显示
│       └── chat-drawer.scss            # 样式文件
├── hooks/
│   ├── useChatSessions.ts              # 会话管理hook
│   ├── useChatMessages.ts              # 消息管理hook
│   ├── useChatStream.ts                # 流式响应hook
│   └── useChatStorage.ts               # 存储hook
├── services/
│   └── chat-service.ts                 # 聊天服务(API调用)
├── types/
│   └── chat.types.ts                   # 聊天类型定义
└── constants/
    └── CHAT_CONSTANTS.ts               # 聊天相关常量
```

**Structure Decision**: 遵循现有的组件组织模式，参考 task-queue/ 和 ttd-dialog/ 的结构。新增 chat-drawer/ 目录存放所有聊天相关组件。

## Complexity Tracking

> 无违规需要记录

| Violation | Why Needed | Simpler Alternative Rejected Because |
|-----------|------------|-------------------------------------|
| - | - | - |