聊天界面
Chat UI
初级通用聊天界面（Chat UI）是把用户与系统的往来按消息呈现，并提供输入、发送和反馈区域的交互界面。它让你看清谁说了什么、回复进行到哪一步，例如 AI 助手的对话页。
你可能会说：「我想做个像 AI 助手那样的页面，能连续提问、看到双方消息和回复状态。」
动手看看AI 助手对话页
MindSet 助手
在线
你好，把周报发我，我来帮你提炼重点。
帮我总结这份周报
发送
对话阶段
切换「对话阶段」看消息怎样接续；也可以用 Tab 聚焦输入区，或悬停、按住发送按钮，观察即时反馈。
待输入时，问题还留在输入区，没有出现在消息流里；发送按钮醒目，提示下一步可以提交。
要点聊天界面由哪几部分组成？
- 1
消息区交代对话的来龙去脉
用户消息和系统回复按先后顺序出现，你才能接着上一句提问。区分消息是谁发的、什么时候发的，也能帮你判断一条回复到底在回应什么。
- 2
输入区承接下一轮提问
输入区通常包含编辑内容和发送消息的入口。做 AI 工具时，如果允许用户附带文件或停止生成，这些操作也会放在对话附近，因为它们都作用于当前这一轮。
- 3
状态反馈说明回复的进展
发出消息后，回复可能还在生成，也可能发送失败。界面把等待、生成中和失败说清楚，你才知道该继续等、重试，还是修改问题；否则空白很容易被当成没点上。
容易混淆的地方
聊天界面是屏幕上的交互方式，不等于对话历史：历史是保存和取回的消息数据，界面也可以只显示当前会话。它也不等于普通表单：表单重在一次性收集字段，聊天界面重在呈现多轮往返；把表单排成消息气泡，不会让它自动变成对话。
什么时候用
适合用
- 做 AI 助手时，用户会根据上一条回答继续追问，需要在同一处查看往来消息。
- 做客服入口时，用户要补充问题背景，客服或机器人需要逐轮回应和澄清。
- 做团队协作工具时，成员需要围绕同一话题来回交流，并看到消息的先后顺序。
不适合用
- 用户只是填写地址、联系方式再提交订单，字段关系比对话顺序重要，用表单更合适。
- 页面只需展示一篇帮助文章，没有来回交流的任务，用正文页面而不是聊天界面。
- 管理员要批量比较、筛选许多条记录，用表格更合适，消息气泡反而不便于横向查看。
练一练选一个答案，看看解释
你在做一个报销助手。员工会先描述费用，再根据系统的追问补充凭证或用途。主操作区选哪种界面更合适？
让 AI 帮你做复制给 AI Agent 直接用
请为报销助手制作聊天界面：按顺序展示员工与助手的消息，区分发送方；提供输入和发送入口，并呈现等待、生成中及失败状态。员工能根据上一轮回复继续提问。先实现界面，不要假设已有对话历史存储。