# 页面名: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 对话)