FunctionCallVisualizer
v1.0.0Renders AI tool call execution: function name, input parameters (syntax-highlighted JSON with line numbers), status badge (pending/running/done/error), output preview, execution duration, and call ID. Collapsible detail panel.
import { FunctionCallVisualizer } from "@danagraph/design-system"Props
| Prop | Type | Default | Description |
|---|---|---|---|
namereq | string | — | Tool / function name. |
inputreq | Record<string, unknown> | — | Input parameters as a JSON-serializable object. |
statusreq | "pending" | "running" | "done" | "error" | — | Current execution status. |
output | unknown | — | Output value, available when status is done. |
error | string | — | Error message, available when status is error. |
durationMs | number | — | Execution duration in milliseconds. |
callId | string | — | Call ID for traceability (shown in header). |
defaultCollapsed | boolean | false | Start the detail panel collapsed. |
namerequiredstringDefault —Tool / function name.
inputrequiredRecord<string, unknown>Default —Input parameters as a JSON-serializable object.
statusrequired"pending" | "running" | "done" | "error"Default —Current execution status.
outputunknownDefault —Output value, available when status is done.
errorstringDefault —Error message, available when status is error.
durationMsnumberDefault —Execution duration in milliseconds.
callIdstringDefault —Call ID for traceability (shown in header).
defaultCollapsedbooleanDefault falseStart the detail panel collapsed.
This component was designed to express:
Explore Related
Renders streamed code, markdown, or text output with progressive disclosure, syntax highlighting via line-number table, diff view, and copy action. Integrates with useStream patterns via controlled content + state props.
Animated dot sequence for streaming/typing indicators
Binary approve/deny gate with ceremony-level friction