组件图鉴

把一个可执行动作呈现为明确的点击目标。

把用户录入的多个值变成可浏览、编辑和移除的独立项。

把有结构的用户输入与标签、校验和提交组织起来。

收集一条简短、连续的文本值。

让用户从互斥选项中选择一个值。

让用户输入需要换行的较长文本。

用单选、多选或自由回答补足 Agent 尚不明确的需求。

把少量互斥值或可切换工具并排展示。

在独立选项中选择零个、一个或多个。

在发送消息前指定工具或引用一个有身份的对象。

通过位置选择连续或离散范围中的数值。

用可点击的例子帮助用户开始，或接着当前结果继续探索。

控制一个立即生效的二元设置。

让用户选择本次任务使用的模型或推理强度。

把有限评分尺度呈现为可读、可选择的值。

把日期按月或日期范围排列，支持就地浏览与选择。

把日期输入与日历选择放在一个字段交互里。

选择文件，并清楚呈现传输进度和失败恢复。

让数值以可验证的格式输入，并可按步长增减。

把文本、附件和发送动作放在一个明确的输入区域。

从固定的选项集合中选择一个或多个值。

同时支持色彩空间选择和可表达的颜色值。

把可编辑文本和建议列表放在同一交互中。

在同一上下文中切换互斥的内容面板。

把相关命令收进一个可打开的操作列表。

组织页面层级、功能区域和当前选中位置。

把可定位的数据集合分成明确的页。

允许用户调节相邻工作区域的空间分配。

让用户找回过去的会话，并知道当前处在哪个上下文。

让用户知道对象处于哪一层级，并能返回上层。

通过搜索快速找到功能、对象或操作。

为某个对象显示就地相关的操作。

把可展开的相关内容组织成一列标题。

把文档、代码或图表作为可独立查看的成果。

const result = await agent.run({
  task: "让过程可以理解"
});

让代码与普通文本分离，便于阅读和复制。

在对象旁压缩表达状态、类别或未读数量。

在行列中进行排序、筛选、选择或编辑等密集操作。

让一组相关内容在有限空间中逐项浏览。

把一个可独立理解的对象和相关动作组织在一起。

按时间保留已经发生的事件和结果。

把结构化结果映射成已注册的卡片、图表或表单。

展示可展开的父子关系，并允许定位节点。

用行列关系比较结构化数据。

为用户或实体提供快速识别的视觉入口。

用统一笔触的矢量符号表达操作、对象与状态。

用可交互的图形比较数值、观察趋势，并随时核对原始数据。

只渲染可见条目，减少长列表的页面节点。

从屏幕边缘展开任务或对象详情。

说明哪一步失败、哪些结果保留，以及用户可以如何恢复。

在不打断当前任务的情况下提示异步结果。

在内容加载时预示将出现的结构。

解释为什么没有内容，以及用户可以做什么。

在触发控件附近打开一块补充内容。

在当前页面上完成聚焦任务或查看补充内容。

表达任务已完成多少，或说明正在推进。

把当前操作相关的重要状态放在用户能看见的位置。

为已有控件补充简短说明，不承担主要信息。

结果：找到 3 条示例记录

说明 Agent 调用了什么，以及实际返回了什么。

把多轮问答组织成可连续阅读的上下文。

把已知步骤和当前进展放在一起，帮助用户建立预期。

让回答的依据可追溯，并给用户验证原文的入口。

告诉用户系统是在等待、输出，还是已经停止。

说明工作分给了谁，哪些已完成，以及返回了什么。

在动作执行前，把决定和后果清晰交给用户。

展开可公开的推理摘要或执行步骤，解释任务正在如何推进。

在单条回答旁提供复制、反馈、重新生成等操作。

保留编辑或重新生成后的多个版本，并在分支间切换。

呈现用户输入，以及包含正文和动作的 Assistant 回答。

展示输入音量或音频随时间变化的形状。

捕获麦克风输入，形成音频附件或可编辑的文字草稿。

管理双向语音对话的连接、静音、打断与结束。

播放已生成或上传的语音，并控制时间与速度。

把语音内容变成可读文字，或将文字与播放时间对应。