用途:该模式用于构建对话式 AI 聊天界面,把提示输入、流式输出、历史记录和后续操作组合进统一的对话工作流,最适用于助手侧边栏与 Copilot 场景。
适用场景:助手侧边栏与 Copilot、客服与帮助体验、对话优先的 AI 产品。避免场景:标准非 AI 工作流更清晰可靠时不要加 AI 专属 UI;用户无法受益时不要暴露高级控件;不要仅靠精致视觉掩盖模型不确定性。
实现流程:先确认模式与问题、约束匹配,再参考 references/pattern.md 的解剖与示例,选择最小可行变体;先落实无障碍、性能与交互护栏,再做视觉打磨;用测试指南验证键盘、屏幕阅读器、响应式与失败场景。
无障碍护栏:键盘方面需可仅用键盘完成,焦点顺序合理,保持可见焦点状态且高倍缩放下仍可读。屏幕阅读器方面优先用语义元素,语义不足时才加 ARIA;在正确位置以恰当礼貌级别播报错误、加载、完成等状态变化;可用 aria-describedby 或结构性标题关联标签、提示与状态文本。视觉方面不要仅用颜色传达严重程度、完成或选中状态。
性能护栏:把网络延迟、token 消耗与长响应客户端渲染一起预算;在提升首次价值时间时流式或分块输出,但稳定布局避免阅读抖动;追踪长提示、模型切换与重试等昂贵状态,用证据调优。
常见错误:隐藏系统状态——用户不知道模型在等待、流式输出、重试还是已完成,应暴露清晰的请求生命周期状态并靠近相关内容显示;把失败当作普通表单错误——AI 失败包括安全拦截、上下文限制、模型不可用与部分输出,应区分失败模式并给出对应恢复操作;忽略 token 与延迟预算——响应变慢、变短或变贵且无解释会让体验不可预测,应从设计之初就把 token、延迟与供应商约束纳入界面。
限制:完整实现细节、示例与测试说明见 references/pattern.md,本资料未提供具体代码或安装命令。