ToolCall
ToolCall
Display an Agent tool call's arguments, execution status, result, and error.
Importimport { ToolCall } from "@ant-design/x"; |
Sourcex/components/tool-call |
Docs |
Versionsupported since 2.9.0 |
Ant Design XImportimport { ToolCall } from "@ant-design/x"; |
Sourcex/components/tool-call |
Docs |
Versionsupported since 2.9.0 |
Common props ref: Common props
| Property | Description | Type | Default |
|---|---|---|---|
| item | Tool call view model | ToolCallItem | - |
| statusIcons | Override icons by execution status; approval represents awaiting approval; null hides the icon | ToolCallStatusIcons | - |
| expanded | Whether details are expanded in controlled mode | boolean | - |
| defaultExpanded | Initial expansion; derived from status when omitted | boolean | See below |
| onExpandedChange | Called when expansion changes | (expanded: boolean) => void | - |
| retrying | Disables retry and displays its loading state | boolean | false |
| onRetry | Emits retry intent | (item: ToolCallItem) => void | - |
| approval | Approval configuration with controlled and uncontrolled modes | ToolCallApprovalConfig | - |
| approvalRender | Custom renderer for the complete approval region | (approval, item, actions) => ReactNode | - |
| duration | Duration display configuration; false hides it | boolean | ToolCallDurationConfig | true |
| cancelling | Controlled cancellation loading state | boolean | - |
| onCancel | Emits cancellation intent while running | (item: ToolCallItem) => void | Promise<void> | - |
| cancelButtonProps | Cancel button props | ButtonProps | - |
| argumentsRender | Custom arguments renderer | (item: ToolCallItem) => ReactNode | - |
| resultRender | Custom result renderer | (value: unknown, item: ToolCallItem) => ReactNode | - |
| errorRender | Custom error renderer | (error: ToolCallError, item: ToolCallItem) => ReactNode | - |
| actions | Custom actions | ReactNode | (item: ToolCallItem) => ReactNode | - |
| classNames | Semantic class names | Record<SemanticDOM, string> | - |
| styles | Semantic styles | Record<SemanticDOM, CSSProperties> | - |
| prefixCls | Style class prefix | string | - |
| rootClassName | Root class name | string | - |
type ToolCallStatus =| 'pending'| 'streaming'| 'running'| 'completed'| 'failed'| 'cancelled';type ToolCallStatusIconType = ToolCallStatus | 'approval';type ToolCallStatusIcons = Partial<Record<ToolCallStatusIconType, React.ReactNode | ((item: ToolCallItem) => React.ReactNode)>>;interface ToolCallItem {id: React.Key;name: string;icon?: React.ReactNode;description?: React.ReactNode;argumentsText?: string;arguments?: unknown;result?: unknown;status: ToolCallStatus;error?: ToolCallError;attempt?: number;startedAt?: number;completedAt?: number;}interface ToolCallError {code?: string;message: string;retryable?: boolean;details?: unknown;}
When item.icon is provided, a completed call prefers the tool's own icon, which can be an image or any ReactNode. Pending, streaming, running, failed, cancelled, and approval states continue to use status icons. statusIcons takes precedence over tool and built-in icons; override individual states or pass null to hide an icon.
| Property | Description | Type | Default |
|---|---|---|---|
| status | Controlled approval state | pending | approved | rejected | - |
| defaultStatus | Initial uncontrolled approval state | pending | approved | rejected | pending |
| title | Approval title | ReactNode | Approval required |
| description | Risk or impact description | ReactNode | - |
| risk | Risk level | low | medium | high | - |
| approveText | Approve action label | ReactNode | Approve and run |
| rejectText | Reject action label | ReactNode | Reject |
| approveButtonProps | Approve button props | ButtonProps | - |
| rejectButtonProps | Reject button props | ButtonProps | - |
| loading | Externally controlled action loading state | boolean | approve | reject | - |
| onStatusChange | Called after a successful approval action | (status, item) => void | - |
| onApprove | Approve callback; status is committed after its Promise resolves | (item) => void | Promise<void> | - |
| onReject | Reject callback; status is committed after its Promise resolves | (item) => void | Promise<void> | - |
Without status, the component updates its internal approval state after the action succeeds. With status, update it from onStatusChange. A rejected callback Promise leaves the approval pending so the user can retry. Real authorization must still be enforced on the server.
approvalRender receives the approval config, current item, and { status, loading, approve, reject }. Use it for edit-before-run, approval reasons, always-allow, or multi-party workflows.
| Property | Description | Type | Default |
|---|---|---|---|
| value | Controlled elapsed time in milliseconds | number | - |
| refreshInterval | Running refresh interval, at least 250ms | number | 1000 |
| formatter | Custom duration renderer | (milliseconds, item) => ReactNode | - |
By default, elapsed time updates from startedAt while running and freezes when completedAt is present. Providing value fully controls the displayed duration.
pending, streaming, running, and failed expand by default. completed and cancelled collapse by default. Supplying expanded makes the component fully controlled.
The default retry action is only visible when status is failed, error.retryable is true, and onRetry is supplied. Running calls show cancellation when onCancel is supplied. The component does not execute tools directly; update item in response to emitted events.
Completed calls display a safely serialized result summary and copy action by default. Expand the call to inspect the complete displayable result.
Complete JSON in argumentsText is formatted while incomplete streaming JSON is preserved. Object results use safe serialization; circular, binary, and oversized values receive concise type summaries. Default rendering never injects HTML or exposes raw stack traces.
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| actionGap | number | 4 | |
| approvalColor | string | #faad14 | |
| contentMaxHeight | number | 320 | |
| detailBg | string | #ffffff | |
| errorColor | string | #ff4d4f | |
| headerBg | string | rgba(0,0,0,0.02) | |
| runningColor | string | #1677ff | |
| statusSize | number | 24 | |
| successColor | string | #52c41a |
Display a complete tool call in a conversation. The demo simulates argument streaming, execution, and completion, then restores the tool's own icon.
Controlled approval and execution timing.
The component covers pending, argument streaming, running, completed, failed, and cancelled states, including tool icons and status icon overrides. Retry is shown only for retryable failures with an onRetry handler.
Use expanded and onExpandedChange to fully control the details area and synchronize it with an inspection mode or global preference.
Use argument, result, and error renderers plus the actions slot to turn a tool call into a domain-specific observability surface.
{
"service": "checkout-api",
"version": "v2.18.0",
"strategy": "canary",
"traffic": "10% → 50% → 100%",
"rollbackOnError": true
}{
"period": {
"from": "2026-04-01",
"to": "2026-06-30"
},
"dimensions": [
"productLine",
"region"
]
}{
"rows": 128,
"currency": "CNY",
"generatedAt": "2026-08-04T10:20:00Z"
}{
"orderId": "20260803001"
}