第 2.10.1 节：把 AI 工作台信息拆成用户能复核的界面结构
先从整体看 AI 工作台信息，梳理组成模块和各自职责。完成本节后，你应该能够写出 AI 工作台信息的验收样例、通过/不通过标准、判断阈值和风险说明。
本章要解决什么问题
很多人第一次做 AI（人工智能）应用前端时，会把它想成一个 Chat UI（聊天用户界面）：左边是用户消息，右边是模型回答，底部有一个输入框。这个界面可以做 Demo（演示），但离真实客服 Agent（智能体） 工作台还很远。
读图重点：先看上层：对话把引用、工具和人工协作带到用户面前；再看下层：日志、质检和配置把一次会话变成可追责、可改进的闭环。
企业客服知识库与工单 Agent 工作台不只是“让用户和模型聊天”。它要让用户、客服、主管和管理员都能看懂系统正在做什么、为什么这么做、哪里需要人接手、哪里因为权限不能继续、哪里发生了错误、最终答案依据什么资料。也就是说，前端不是后端能力的装饰层，而是 AI 系统的可控性、可解释性和人工协作界面。
在客服场景里，一个合格前端至少要回答这些问题：
- 用户正在问什么，对话属于哪个客户、哪个工单、哪个会话？
- Agent 的回答依据哪些知识库资料、订单记录或历史工单？
- 系统有没有调用工具？调用了什么工具？工具执行成功、失败还是等待审批？
- 高风险动作是否需要用户确认、客服确认或主管审批？
- 当前任务处在“处理中、等待用户补充、等待人工、失败、已完成”中的哪一种状态？
- 如果系统无法回答，用户看到的是不是能理解、能继续操作的 fallback（降级方案）提示？
- 管理员能不能通过 trace_id（追踪编号）复盘一次回答、一次工具调用和一次失败？
- 质检人员能不能看到用户反馈、模型摘要、引用来源和客服接管记录？
本章聚焦 AI Agent 项目的前端信息设计：展示哪些业务事实、承接哪些状态、暴露哪些权限提示、隐藏哪些内部细节，以及如何把“模型黑箱”变成“可理解的工作流”。
本章继续使用贯穿项目：企业客服知识库与工单 Agent 工作台。前面章节讲了 RAG（检索增强生成）、Tool Calling（工具调用）、状态图、MCP（模型上下文协议）和可观测性；本章要把这些后端能力呈现在一个用户能操作、客服能接管、管理员能配置、面试官能看懂的产品界面里。
学习目标
读完本章后，你应该能够：
- 说明为什么 AI 应用前端不是一个聊天框。
- 为客服 Agent 工作台设计对话区、引用来源、工具调用卡片、审批卡片、状态进度、转人工入口、错误提示、权限提示、日志摘要、质检反馈和管理配置。
- 区分用户可见信息、客服可见信息、管理员可见信息和审计日志信息。
- 用字段契约描述前端和后端之间传递的对话、消息、引用、工具、审批、状态、错误和反馈信息。
- 设计可理解的 fallback（降级方案）状态，避免模型失败时只显示“出错了”。
- 说明前端如何服务可控性、可解释性和人工协作。
- 面试时把 AI 前端讲成“企业 Agent 落地的工作台设计”，而不是“做了一个聊天页面”。
贯穿业务场景
本章的业务场景是一个企业客服知识库与工单 Agent 工作台。它服务 4 类人：
| 角色 | 主要目标 | 需要看到什么 |
|---|---|---|
| 终端用户 | 提问、查订单、申请售后、转人工 | 对话回答、引用来源、进度、可操作按钮、兜底提示。 |
| 客服人员 | 接管复杂问题、处理工单、补充资料 | 对话摘要、用户诉求、Agent 已做动作、工具结果、转人工原因。 |
| 主管或质检 | 复盘服务质量、审批高风险动作 | 引用是否可靠、工具是否合规、审批记录、反馈评分、错误和转人工统计。 |
| 管理员 | 配置知识库、工具、权限和页面策略 | 资料状态、工具开关、权限提示、日志摘要、异常告警。 |
一个典型流程是这样的：
- 用户问：“我上周买的耳机坏了，可以退吗？”
- 前端展示用户消息，并给这轮对话生成 conversation_id（对话编号）和 trace_id（追踪编号）。
- Agent 先检索售后政策，前端展示“正在检索知识库”的状态。
- 系统发现需要订单信息，前端展示“请选择关联订单”或“正在查询订单”的工具调用卡片。
- 工具返回订单状态和政策引用，前端展示回答、引用来源和下一步建议。
- 如果用户要退款，前端不应该直接显示“退款成功”，而是展示审批卡片：申请理由、证据、风险提示、审批状态。
- 如果系统无法判断，前端要展示转人工状态，让用户知道问题已经进入人工队列，而不是停在一个空白加载动画里。
- 质检人员之后可以打开日志摘要，看到这次对话的引用、工具调用、审批、错误和反馈评分。
这就是本章要训练的思维：前端不是“把模型结果打印出来”，而是把 Agent 系统里的关键事实组织成可理解、可接管、可复盘的界面。
新手为什么会卡住
新手做 AI 前端时，常见卡点不是不会画页面，而是不知道页面应该承载哪些工程信息。
| 常见误解 | 问题在哪里 | 正确理解 |
|---|---|---|
| AI 前端就是聊天框 | 只展示文本，隐藏了检索、工具、审批和状态 | Chat UI（聊天用户界面）只是入口，工作台才是完整产品。 |
| 模型回答越顺滑越好 | 顺滑但无依据会让用户误信错误答案 | 回答必须展示引用、状态和不确定性。 |
| 工具调用过程不用给用户看 | 用户不知道系统是否真的查了订单或创建了工单 | 前端要展示工具调用卡片和真实执行状态。 |
| 错误统一显示“请稍后重试” | 用户不知道是缺权限、缺资料、工具超时还是需要人工 | 错误要可理解、可操作、可复盘。 |
| 权限是后端的事 | 前端如果没有权限提示，用户会误以为系统坏了 | 前端要解释能做什么、不能做什么、下一步是什么。 |
| 日志只给开发看 | 客服、主管和质检也需要业务化日志摘要 | 日志要分层：用户提示、客服摘要、管理员审计。 |
| 只做用户端页面就够了 | 企业项目还要管理配置、质检反馈和人工协作 | 客服工作台必须覆盖运营和管理闭环。 |
这些误解会导致一个常见结果：Demo（演示）看起来像 AI，真实使用时却无法维护、无法解释、无法验收。