ToolCall
tool-call工具调用卡 · dogfood Collapsible + Dot状态色 + Spinner(运行中) · pending/running/success/error 四态 + 参数/结果折叠面板 + 工具图标
用法
基础用法
工具名 + 状态点，展开看参数与结果。
参数
json
{ "query": "瑚琏 设计系统" }结果
找到 3 条相关结果，已综合。
tsx
<ToolCall
name="search_web"
status="success"
defaultOpen
input={<CodeBlock lang="json" code={'{ "query": "瑚琏 设计系统" }'} />}
output="找到 3 条相关结果，已综合。"
/>运行中
running 时状态处显示转圈 Spinner。
tsx
<ToolCall name="run_code" status="running" />失败态
error 状态点变红，展开看错误详情。
结果
超时：30s 无响应。
tsx
<ToolCall
name="fetch_url"
status="error"
defaultOpen
output="超时：30s 无响应。"
/>等待中
pending 表示已排队尚未执行。
tsx
<ToolCall name="send_email" status="pending" />何时用
可视化 agent 的单次工具调用（名称 + 状态 + 折叠的入参/结果）。多步任务编排用 AgentPlan，自由文本推理用 ThinkingBlock；这里聚焦一次 tool call 的输入输出。
导入
ts
import { ToolCall } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| status | "pending" ｜ "running" ｜ "success" ｜ "error" | "success" | pending 等待 / running 运行中(转圈) / success 完成 / error 失败 |
| defaultOpen | boolean | — | 非受控初始展开态 |
| open | boolean | — | 受控展开态 |
| className | string | — | 容器类名 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onOpenChange | (open: boolean) => void | 展开态变化回调 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| name * | ReactNode | 工具名（等宽呈现，如 search_web） |
| icon | ReactNode | 工具图标槽（默认扳手 Wrench） |
| input | ReactNode | 入参（建议传 <CodeBlock/> 或 JSON 文本） |
| output | ReactNode | 结果（建议传 <CodeBlock/> / <Prose/> 或文本） |
| children | ReactNode | 自定义面板内容（替代 input/output） |
禁忌 / 坑
- 受控/非受控二选一：传
open须配onOpenChange；只想给初值用defaultOpen。 children会替代input/output面板，二者择一传。
相关
ThinkingBlock · AgentPlan · Dossier · Artifact · ConfirmCard · ThreadList
Playground
参数
{ "q": 1 }
结果
ok
<ToolCall name="search_web" status="success" input={…} output={…} />