Neo-ZQYY/docs/h5_ui/interactions/chat.md

页面名：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 对话）