82 lines
4.1 KiB
Markdown
82 lines
4.1 KiB
Markdown
# 页面名：chat（AI 对话）
|
||
|
||
> PRD 参考：P9 `docs/prd/specs/P9-miniapp-fe-details.md`；`apps/miniprogram/doc/prd.md` 第十节
|
||
> 已实现：否
|
||
|
||
## 页面说明
|
||
与 AI 助手进行对话。支持文本输入和语音输入，AI 回复流式展示（SSE）。从其他页面进入时携带上下文引用。
|
||
|
||
> 原型 HTML 为纯静态展示（对话内容硬编码），仅有顶部返回 `history.back()` 一个交互事件。以下交互逻辑基于 PRD 设计。
|
||
|
||
## 状态变量
|
||
| 变量名 | 类型 | 初始值 | 说明 |
|
||
|--------|------|--------|------|
|
||
| messages | array | [] | 对话消息列表 |
|
||
| inputText | string | "" | 输入框内容 |
|
||
| isRecording | boolean | false | 录音状态 |
|
||
| referenceContent | object | null | 引用内容（来源页面 title + 基本信息） |
|
||
| sessionId | string | "" | 会话 ID |
|
||
| isStreaming | boolean | false | AI 正在流式回复 |
|
||
| loading | boolean | false | 加载历史消息中 |
|
||
|
||
## 用户操作 → 响应
|
||
| 操作 | 触发条件 | 响应行为 | 目标状态 |
|
||
|------|----------|----------|----------|
|
||
| 页面加载（新对话） | 从其他页面进入 | 创建新会话，第一条消息为页面上下文 | sessionId 设置 |
|
||
| 页面加载（继续对话） | 从 chat-history 进入 | 加载历史消息 | messages 填充 |
|
||
| 输入文本 + 点击发送 | inputText 非空 | POST /api/chat/conversations/:id/messages（SSE） | isStreaming=true |
|
||
| 按住说话 | 无 | 开始录音 | isRecording=true |
|
||
| 松开说话 | isRecording=true | 语音转文字 → 填充输入框 | isRecording=false |
|
||
| AI 回复完成 | SSE 流结束 | 消息列表更新 | isStreaming=false |
|
||
| 上拉加载 | 有更早记录 | 加载更早消息 | loading=true→false |
|
||
| 距最后消息 >1 小时 | 时间判断 | 显示"新对话主题"和"继续对话"按钮 | — |
|
||
| 点击"新对话主题" | 提示条显示 | 创建新会话 | sessionId 更新 |
|
||
| 点击"继续对话" | 提示条显示 | 在当前会话继续 | — |
|
||
| 点击返回 | 顶部导航栏 | navigateBack / history.back() | — |
|
||
|
||
## 消息展示规则
|
||
- IM 风格：左侧 AI 气泡，右侧用户气泡
|
||
- AI 回复支持流式展示（逐字输出）
|
||
- 引用内容：灰底卡片，含来源类型、标题、摘要
|
||
- 发送后自动滚动到底部
|
||
|
||
## AI 对话来源展示规则（PRD 补充）
|
||
从不同入口进入 chat 页面时，引用卡片的来源 title 定义：
|
||
| 入口页面 | 来源 title | 携带上下文 |
|
||
|----------|-----------|-----------|
|
||
| task-list 长按菜单"问问AI助手" | 任务：{客户昵称} | 任务类型 + 客户基本信息 |
|
||
| task-detail "问问助手" | 任务详情：{客户昵称} | 任务详情 + 客户信息 + AI 分析 |
|
||
| customer-detail "问问助手" | 客户：{客户昵称} | 客户信息 + 消费记录 + 指数 |
|
||
| AI 悬浮按钮（任意页面） | 当前页面名称 | 当前页面上下文 |
|
||
| chat-history 继续对话 | 历史对话 | 历史消息 |
|
||
|
||
## 会话管理规则（PRD 补充）
|
||
- 距最后一条消息超过 1 小时：页面顶部显示提示条，含两个按钮：
|
||
- 「新对话主题」→ 创建新 sessionId，清空消息区
|
||
- 「继续对话」→ 保持当前 sessionId，在原会话追加
|
||
- 每个会话有独立 sessionId，用于后端关联上下文
|
||
|
||
## 页面状态枚举
|
||
| 状态名 | 视觉表现 | 触发条件 |
|
||
|--------|----------|----------|
|
||
| 空对话 | 引用卡片 + 空消息区 | 新对话，未发送 |
|
||
| 对话中 | 消息列表 + 输入区 | 有消息 |
|
||
| AI 回复中 | 最后一条消息逐字输出 | isStreaming=true |
|
||
| 录音中 | 输入区显示录音动画 | isRecording=true |
|
||
|
||
## 后端 API 依赖
|
||
| API | 方法 | 说明 |
|
||
|-----|------|------|
|
||
| `POST /api/chat/conversations` | POST | 创建对话 |
|
||
| `POST /api/chat/conversations/:id/messages` | POST | 发送消息（SSE 流式返回） |
|
||
| `GET /api/chat/conversations/:id/messages` | GET | 对话消息列表 |
|
||
|
||
## 页面导航
|
||
- 来源：任意业务页面（AI 悬浮按钮 / "问问助手"按钮）/ chat-history
|
||
- 去向：无（末端页面）
|
||
|
||
## 全局组件
|
||
- 自定义顶部导航栏（返回按钮 + "智能助手"）
|
||
- 无底部 TabBar
|
||
- 无 AI 悬浮按钮（本页即为 AI 对话）
|