UI Design System
build dev

ToolCall

展示工具调用、参数、进度和结果。中文惯用名:工具调用。
稳定本期新增已接入

元信息

字段值
规范 IDcomponent.tool-call
名称ToolCall
二级分类AI 与会话(ai-chat)
用途展示工具调用、参数、进度和结果
描述中文惯用名:工具调用。

预览

静态结构:卡片 = 头部按钮(terminal 图标 + 名称 truncate + 状态图标(running 旋转)+ 耗时秒 + chevron)+ 可折叠体(参数 JSON 缩进 pre / 结果 pre);缺省 running 展开、done / error 折叠。

DSL 结构

DslNode
{
  "type": "ToolCall",
  "props": {
    "name": "querySalesData",
    "params": {
      "period": "2026-Q3",
      "region": "华东"
    },
    "status": "done",
    "result": "返回 128 条记录",
    "durationMs": 842
  }
}

何时用

何时使用

  • 展示工具调用、参数、进度和结果:Agent 执行轨迹。

何时不用

  • 推理过程:使用 Thinking。
  • 运行状态一句话:使用 AgentStatus。

变体

变体视觉形态适用场景
running旋转图标 + 默认展开调用进行中
done / error默认折叠可回看调用完成 / 失败

API 属性

属性类型默认值说明
namestring—工具名称
paramsunknown—调用参数(对象 JSON 缩进展示)
status`'running''done''error'`
resultstring—调用结果文本
durationMsnumber—耗时(毫秒,展示为秒)
defaultExpandedboolean按状态非受控初始展开
className / stylestring / CSSProperties—通用:根节点 class 合并 / 内联样式

使用规范

  • 参数中的敏感字段(令牌 / 密钥)下发前脱敏。

正例

  • ✓ Agent 轨迹:search_docs 调用 running 实时展开,完成折叠留痕。

反例

  • ✕ 把 ToolCall 当日志控制台(应收敛为关键调用)。

Design Token 映射

不适用:组件 tokenRefs 为空:样式 Token 数据尚未接入,三层映射(Primitive → Semantic → Component)待样式 Token 接入后回填。