8.2 KiB
Feature Specification: 对话抽屉 (Chat Drawer)
Feature Branch: 001-chat-drawer
Created: 2025-12-03
Status: Draft
Input: User description: "希望把UI改成上图所示,增加一个可展开收起的对话抽屉,支持使用对话模型实现连续对话。并能记录对话记录"
User Scenarios & Testing (mandatory)
User Story 1 - 基本对话交互 (Priority: P1)
用户希望在画板右侧看到一个可展开/收起的对话抽屉,能够与AI进行连续对话,获取创作帮助和建议。
Why this priority: 这是核心功能,提供了最基本的对话能力,是实现所有其他功能的基础。用户可以立即开始使用AI对话功能。
Independent Test: 可以通过点击抽屉开关按钮,输入消息并接收AI回复来完全测试。能独立提供AI对话辅助的价值,无需依赖其他功能。
Acceptance Scenarios:
- Given 用户在画板界面,When 用户点击右侧的抽屉展开按钮,Then 对话抽屉从右侧滑出显示
- Given 对话抽屉已展开,When 用户点击收起按钮,Then 抽屉滑回收起状态
- Given 对话抽屉已展开,When 用户在输入框输入消息并发送,Then 消息显示在对话区域,AI开始处理并返回回复
- Given AI正在处理消息,When 用户等待,Then 显示"正在理解需求并梳理您提供的材料"的加载状态
- Given 对话进行中,When 用户继续发送新消息,Then 保持上下文连续性,AI基于历史对话回复
User Story 2 - 对话历史持久化 (Priority: P2)
用户希望对话记录能够保存,刷新页面或关闭应用后重新打开仍能看到之前的对话历史。
Why this priority: 提升用户体验,避免重复沟通,让用户可以回顾之前的对话内容和AI建议。这是P1功能的重要增强。
Independent Test: 可以通过创建对话、刷新页面、验证对话历史是否保留来独立测试。提供数据持久化价值。
Acceptance Scenarios:
- Given 用户已进行多轮对话,When 用户刷新页面,Then 打开抽屉后能看到完整的历史对话记录
- Given 用户关闭浏览器,When 用户重新打开应用,Then 对话历史仍然保留
- Given 对话历史很长,When 用户滚动查看,Then 能流畅浏览所有历史消息
User Story 3 - 多会话管理 (Priority: P3)
用户希望能够创建多个独立的对话会话,在不同话题或项目之间切换,每个会话独立保存对话历史。
Why this priority: 让用户能够组织不同的对话主题,避免不同话题的对话混杂在一起。这是高级功能,P1和P2已经能提供基本价值。
Independent Test: 可以通过创建新会话、切换会话、验证各会话独立性来测试。提供对话组织管理价值。
Acceptance Scenarios:
- Given 用户在当前会话中,When 用户点击"新建会话",Then 创建一个空白会话,之前的会话保留
- Given 存在多个会话,When 用户切换到不同会话,Then 显示对应会话的历史记录
- Given 用户在会话列表,When 用户查看会话,Then 能看到会话的标题/预览和创建时间
- Given 用户选中某个会话,When 用户删除会话,Then 该会话及其历史记录被移除
User Story 4 - 消息操作功能 (Priority: P4)
用户希望能够对AI的回复进行操作,如复制内容、重新生成回复等。
Why this priority: 提升使用便利性,让用户能够更好地利用AI生成的内容。这是锦上添花的功能。
Independent Test: 可以通过对消息执行复制、重新生成等操作来测试。提供内容操作便利性价值。
Acceptance Scenarios:
- Given AI已回复消息,When 用户点击复制按钮,Then 消息内容复制到剪贴板
- Given AI已回复消息,When 用户点击重新生成,Then AI基于同样的用户输入生成新的回复
- Given 用户对某条回复不满意,When 用户点击"停止生成",Then AI停止当前回复的生成
Edge Cases
- 当网络断开时,用户发送消息会发生什么？（应显示错误提示,消息保留在输入框）
- 当对话历史非常长（如100+条消息）时,性能如何？（应实现虚拟滚动或分页加载）
- 当用户快速连续发送多条消息时,如何处理？（应排队处理,显示加载状态）
- 当抽屉展开时占用大量屏幕空间,画板区域过小怎么办？→ 抽屉宽度自适应（视口30%,最小320px,最大500px）
- 当localStorage存储空间不足时,历史记录如何处理？（应限制历史记录数量,或提供清理选项）
- 移动设备上抽屉如何显示？→ 全屏覆盖模式,抽屉打开时覆盖整个屏幕
Requirements (mandatory)
Functional Requirements
- FR-001: 系统必须在界面右侧提供一个可展开/收起的抽屉组件
- FR-002: 系统必须在抽屉中显示对话消息列表,区分用户消息和AI消息
- FR-003: 系统必须提供消息输入框,支持文本输入和发送
- FR-004: 系统必须支持连续对话,保持对话上下文
- FR-005: 系统必须支持流式响应,AI回复以逐字符/逐词方式实时显示,并在开始前显示加载状态（如"正在理解需求并梳理您提供的材料"）
- FR-006: 系统必须将对话历史持久化存储在浏览器本地
- FR-007: 系统必须在应用重新加载后恢复对话历史
- FR-008: 系统必须支持创建多个独立的对话会话
- FR-009: 系统必须提供会话列表,显示会话标题（从首条用户消息自动截取生成）和时间
- FR-010: 系统必须支持切换和删除会话
- FR-011: 系统必须集成对话模型API（使用现有的AI服务配置）
- FR-012: 抽屉展开/收起动画必须流畅自然
- FR-013: 消息列表必须自动滚动到最新消息
- FR-014: 系统必须在消息发送失败时显示错误提示
- FR-015: 系统必须提供附件上传功能（回形针图标）,支持上传图片、文档和文件,附件将发送给AI进行分析
- FR-016: 系统必须提供暂停生成按钮（如图中的暂停图标）
- FR-017: 系统必须在移动设备上以全屏覆盖模式显示对话抽屉
- FR-018: 桌面端抽屉宽度必须自适应（视口宽度的30%,最小320px,最大500px）
Key Entities
- ChatSession（对话会话）: 代表一个独立的对话,包含会话ID、标题（从首条用户消息自动生成,截取前30字符）、创建时间、最后更新时间
- ChatMessage（对话消息）: 代表单条消息,包含消息ID、所属会话ID、角色（用户/AI）、内容、时间戳、状态（发送中/成功/失败）、附件列表（可选,包含文件名、类型、大小、数据）
- DrawerState（抽屉状态）: 代表抽屉的UI状态,包含是否展开、宽度（默认为视口宽度的30%,最小320px,最大500px）、当前活跃会话ID
Clarifications
Session 2025-12-03
- Q: Should AI responses stream incrementally or appear all at once? → A: Stream responses token-by-token as AI generates them (progressive display)
- Q: How should session titles be generated? → A: Auto-generate title from first user message content (truncate if long)
- Q: What is the scope of attachment functionality? → A: Full attachment support - images, documents, and files sent to AI for analysis
- Q: How should the drawer behave on mobile devices? → A: Full-screen overlay - drawer covers entire screen when opened on mobile
- Q: What should be the default drawer width on desktop? → A: Adaptive - 30% of viewport width (min 320px, max 500px)
Success Criteria (mandatory)
Measurable Outcomes
- SC-001: 用户能够在1秒内展开/收起对话抽屉
- SC-002: 用户发送消息后,AI回复的首字节响应时间不超过3秒
- SC-003: 对话历史能够存储至少50个会话,每个会话至少100条消息
- SC-004: 抽屉展开/收起动画流畅,帧率保持在60fps
- SC-005: 90%的用户能够在首次使用时成功完成一次对话交互
- SC-006: 页面刷新后,对话历史恢复时间不超过500毫秒
- SC-007: 支持移动端和桌面端响应式布局,在不同屏幕尺寸下正常使用