ToolCall 系列

工具调用可视化组件，展示 AI 调用工具的过程和结果。包含 6 个子组件：

• ToolCall — 可折叠容器（<details>/<summary>）
• ToolCallHeader — 六态状态徽章 + 工具名 + 耗时
• ToolCallContent — 展开内容
• ToolCallInput — 格式化参数 JSON
• ToolCallOutput — 结果或错误
• ToolConfirmation — 人工审批卡片（见 ToolConfirmation 文档）

代码演示

六态切换

点击按钮切换状态，展开卡片查看参数与结果随状态的变化：

✓search_docs已完成1.2s

参数

{
  "query": "流式渲染",
  "topK": 5
}

结果

{
  "hits": 3,
  "sources": [
    "17-03 记忆系统",
    "10-02 core 层"
  ]
}

pending

排队或参数流式组装中，无耗时信息——适合让用户知道「请求已受理」：

⏳search_docs准备中

参数

{
  "query": "流式渲染",
  "topK": 5
}

calling

执行中，warning 色 + 脉冲动画给「正在跑」的感知，duration 实时跳动：

⚡get_weather运行中800ms

参数

{
  "city": "Beijing",
  "unit": "celsius"
}

awaiting-approval

等待人工审批，配合 ToolConfirmation 放进 default 插槽提供允许/拒绝按钮：

⛨delete_file等待确认

参数

{
  "path": "/tmp/lock.db",
  "force": true
}

completed

正常完成，参数与结果并排可审计——最常见形态：

✓search_docs已完成1.2s

参数

{
  "query": "流式渲染",
  "topK": 5
}

结果

{
  "hits": 3,
  "sources": [
    "17-03 记忆系统",
    "10-02 core 层"
  ]
}

denied

用户拒绝后的只读回溯，工具名与参数保留可查：

⊘send_email已拒绝2.1s

参数

{
  "to": "team@example.com",
  "subject": "周报"
}

error

失败态，error 字段的错误信息帮助排查：

✗search_docs失败5.0s

参数

{
  "query": "流式渲染",
  "topK": 5
}

错误

上游文档服务超时（504）

状态样式（六态徽章）

对齐 AI SDK 工具生命周期的六态状态机；旧三值（calling/completed/error）语义不变：

状态	图标	颜色	i18n key	说明
pending	⏳	muted	toolCall.statusPending	排队/参数流式组装中
calling	⚡（脉冲动画）	warning	toolCall.statusCalling	执行中
awaiting-approval	⛨	warning	toolCall.statusAwaitingApproval	等待人工审批（标签走 warning 描边）
completed	✓	success	toolCall.statusCompleted	完成
denied	⊘	warning 系	toolCall.statusDenied	用户拒绝
error	✗	error	toolCall.statusError	失败

状态标签随 aiChatI18n 语言切换；calling 的脉冲动画在 prefers-reduced-motion: reduce 下关闭。

ToolCallInfo 类型

interface ToolCallInfo {
  id: string
  name: string
  arguments: Record<string, unknown>
  result?: unknown
  error?: string
  status: ToolCallStatus // 六态枚举，见上表
  duration?: number
}

API

ToolCall

属性名	类型	默认值	说明
data	ToolCallInfo	—	工具调用数据（必填）

插槽名	作用域	说明
header	{ data, open }	自定义头部
default	{ data }	自定义内容

其他子组件（Header/Content/Input/Output）通过 inject 从 ToolCall 获取数据。