AI对话界面设计模式

为什么 Agent 聊天界面容易做糟

写 AI 聊天界面看起来简单：一个消息列表加一个输入框。但当 agent 真的开始调用工具、流式吐字、并行跑多个步骤时，朴素的聊天 UI 会迅速失控。

常见问题包括：

• 工具调用静默执行，用户以为界面卡死
• 流式输出没有光标，长文本停顿时无法区分「在思考」还是「崩了」
• 工具结果直接甩 JSON，非技术用户看不懂
• 整个对话历史全塞在前端 state 里，刷新就丢

这个技能怎么解决

Agent-UI-Design 是一套面向 agent 产品的设计模式集合，基于 21st.dev Agents SDK 和获奖 agent 产品的经验总结。核心能力包括：

三栏布局：左侧 Thread Sidebar 放历史会话，中间 Chat Panel 承载消息流与输入，右侧 Context Panel 放结果、预览和表单。复杂输出有独立空间，不挤在聊天流里。

消息类型区分：用户消息右对齐加强调色，助手消息左对齐可展开，系统消息居中弱化，工具调用带状态指示。角色不靠文字区分，靠视觉层次。

流式渲染：逐字符或逐词显示，配可见光标；生成过程中保持可滚动，停止按钮始终可见。

工具调用可视化：工具名做 badge，参数折叠展开，结果按类型格式化（文本、表格、代码、图片），状态从 spinner 到 checkmark 到 error icon 完整闭环。

沙箱状态呈现：Created、Active、Executing、Terminated 四种状态各有视觉表达，文件树交互式展开。

适用边界与注意点

这套模式针对的是「agent 聊天产品」，不是通用聊天室。如果做的是传统客服对话，部分规则（如工具可视化）用不上。

容易踩的坑：

• 不要把所有消息样式做得一模一样，角色区分是强制的
• 不要把工具结果塞 modal 打断对话流
• 不要在默认视图里展示沙箱细节，遵循渐进式披露
• 工具报错必须给重试入口

移动端适配：聊天面板全屏，侧边栏变抽屉。键盘快捷键：Enter 发送，Shift+Enter 换行。

这个技能是设计参考，不是代码库，不自动安装依赖或修改系统权限，具体实现需要结合你选择的前端框架落地。