ToolCall
tool-callShows an agent tool invocation, arguments, progress, result, and failure state.
Usage
Basic usage
Tool name + status point, expand to see parameters and results.
Input
{ "query": "Hulian Design System" }Output
<ToolCall
name="search_web"
status="success"
defaultOpen
input={<CodeBlock lang="json" code={'{ "query": "Hulian Design System" }'} />}
output="Found 3 related results, combined."
/>Running
running is displayed, the status will display Spinner.
<ToolCall name="run_code" status="running" />Failure status
error The status point turns red, expand it to see the error details.
Output
<ToolCall
name="fetch_url"
status="error"
defaultOpen
output="Timeout: 30s No response."
/>Waiting
pending means it has been queued but not yet executed.
<ToolCall name="send_email" status="pending" />When to Use
Use it to present one agent tool invocation with its name, status, and collapsible input and result. Use AgentPlan for multi-step orchestration and ThinkingBlock for free-form reasoning. ToolCall focuses on one tool's inputs and outputs.
Import
import { ToolCall } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| status | "pending" | "running" | "success" | "error" | "success" | Status label: "\u7b49\u5f85" (Waiting), "\u8fd0\u884c\u4e2d" (Running), "\u5b8c\u6210" (Complete), or "\u5931\u8d25" (Failed) |
| defaultOpen | boolean | — | Uncontrolled initial expansion state |
| open | boolean | — | Controlled expansion state |
| className | string | — | Container class name |
Events
| Event | Type | Description |
|---|---|---|
| onOpenChange | (open: boolean) => void | Expanded state change callback |
Slots
| Slot | Type | Description |
|---|---|---|
| name * | ReactNode | Tool name rendered in monospace, such as search_web |
| icon | ReactNode | Tool icon slot (default Wrench) |
| input | ReactNode | Input shown below the built-in Input heading; typically <CodeBlock/> or JSON text |
| output | ReactNode | Result shown below the built-in Output heading; typically <CodeBlock/>, <Prose/>, or text |
| children | ReactNode | Customize panel content (replace input/output) |
Status, Input, and Output labels follow the nearest ConfigProvider locale. They retain the Chinese defaults when no provider is present.
Usage Guidelines
- Choose controlled or uncontrolled expansion. Pair
openwithonOpenChange; usedefaultOpenonly for the initial uncontrolled state. childrenreplaces the standardinputandoutputpanel, so choose one composition mode.
Related
ThinkingBlock · AgentPlan · Dossier · Artifact · ConfirmCard · ThreadList
Playground
Input
Output
<ToolCall name="search_web" status="success" input={…} output={…} />