ThoughtChain
ThoughtChain
The ThoughtChain component is used to visualize and track the call chain of an Agent to Actions and Tools.
Importimport { ThoughtChain } from "@ant-design/x"; |
Sourcecomponents/thought-chain |
Ant Design XImportimport { ThoughtChain } from "@ant-design/x"; |
Sourcecomponents/thought-chain |
Reference: Common API
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| items | Collection of thought nodes | ThoughtChainItem[] | - | - |
| defaultExpandedKeys | Initially expanded nodes | string[] | - | - |
| expandedKeys | Currently expanded nodes | string[] | - | - |
| onExpand | Callback for when expanded nodes change | (expandedKeys: string[]) => void; | - | - |
| line | Line style, no line is shown when false | boolean | 'solid' | 'dashed' | 'dotted' | 'solid' | - |
| classNames | Class names for semantic structure | Record<'root'|'item' | 'itemIcon'|'itemHeader' | 'itemContent' | 'itemFooter', string> | - | - |
| prefixCls | Custom prefix | string | - | - |
| styles | Styles for semantic structure | Record<'root'|'item' |'itemIcon'| 'itemHeader' | 'itemContent' | 'itemFooter', React.CSSProperties> | - | - |
| rootClassName | Root element class name | string | - | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| content | Content of the thought node | React.ReactNode | - | - |
| description | Description of the thought node | React.ReactNode | - | - |
| footer | Footer of the thought node | React.ReactNode | - | - |
| icon | Icon of the thought node, not displayed when false | false | React.ReactNode | DefaultIcon | - |
| key | Unique identifier for the thought node | string | - | - |
| status | Status of the thought node | 'loading' | 'success' | 'error'| 'abort' | - | - |
| title | Title of the thought node | React.ReactNode | - | - |
| collapsible | Whether the thought node is collapsible | boolean | false | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| prefixCls | Custom prefix | string | - | - |
| icon | Icon of the thought chain | React.ReactNode | - | - |
| title | Title of the thought chain | React.ReactNode | - | - |
| description | Description of the thought chain | React.ReactNode | - | - |
| status | Status of the thought chain | 'loading' | 'success' | 'error'| 'abort' | - | - |
| variant | Variant configuration | 'solid' | 'outlined' | 'text' | - | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| iconSize | ThoughtChain.Item `outlined`'s hover background color | string | 14px |
| itemBorderRadius | ThoughtChain.Item's border radius | number | 6 |
| itemOutlinedBg | ThoughtChain.Item `outlined`'s background color | string | #ffffff |
| itemOutlinedHoverBg | ThoughtChain.Item `outlined`'s hover background color | string | rgba(0,0,0,0.15) |
| itemSolidBg | ThoughtChain.Item `solid`'s background color | string | rgba(0,0,0,0.04) |
| itemSolidHoverBg | ThoughtChain.Item `solid`'s hover background color | string | rgba(0,0,0,0.15) |
Basic usage.
The thought chain nodes support configuring the status property to clearly indicate the current execution status of the node.
A concise thought chain component, providing multiple visual types for different statuses and scenarios.
Configure collapsible to enable the expand for the content area of thought chain nodes.
Controlled collapsible function for thought chain node content area.
The items property supports flexible customization. For more details, refer to the ThoughtChainItem definition.
The ThoughtChain component supports nested usage.
A concise thought chain component, providing multiple visual types for different statuses and scenarios.
