ThoughtChain
The ThoughtChain component is used to visualize and track the call chain of Actions and Tools invoked by an Agent.
Import |
Sourcecomponents/thought-chain |
When To Use
- Debug and trace complex call chains in the Agent System.
- Similar chain-like scenarios.
Examples
Thought Chain Item Titledescription
Thought Chain Item Titledescription
Thought Chain Item Titledescription
Thought Chain Item Titledescription
Basic usage.
Thought Chain Item Titledescription
Thought Chain Item Titledescription
Thought Chain Item Titledescription
Thought Chain Item Titledescription
The ThoughtChain supports three sizes of small, middle and large. Default size is middle.
Thought Chain Item - 1status: success
Thought Chain Item - 2status: error
The thought chain nodes support configuring the status property to clearly indicate the current execution status of the node.
Click me to expand the contentCollapsible
Click me to expand the contentCollapsible
Configure collapsible to enable the expand for the content area of thought chain nodes.
Thought Chain Item Titledescription
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development
Thought Chain Item Titledescription
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development
Thought Chain Item Titledescription
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development
The items property supports flexible customization. For more details, refer to the ThoughtChainItem definition.
1 - Thought Chain Itemdescription
2 - Thought Chain Itemdescription
The ThoughtChain component supports nested usage.
API
Common props ref：Common props
ThoughtChainProps
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| collapsible | Whether collapsible | boolean | CollapsibleOptions | None | - |
| classNames | Class names for semantic structure | Record<'item' | 'itemHeader' | 'itemContent' | 'itemFooter', string> | None | - |
| items | Chain items | ThoughtChainItem[] | None | - |
| prefixCls | Custom prefix | string | None | - |
| rootClassName | Custom root class name | string | None | - |
| size | Size | 'large' | 'middle' | 'small' | 'middle' | - |
| styles | Styles for semantic structure | Record<'item' | 'itemHeader' | 'itemContent' | 'itemFooter', React.CSSProperties> | None | - |
ThoughtChainItem
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| content | Thought chain item content | React.ReactNode | None | - |
| description | Thought chain item description | React.ReactNode | None | - |
| extra | Thought chain item extra content | React.ReactNode | None | - |
| footer | Thought chain item footer | React.ReactNode | None | - |
| icon | Thought chain item icon | React.ReactNode | None | - |
| key | Unique identifier | string | None | - |
| status | Thought chain item status | 'pending' | 'success' | 'error' | None | - |
| title | Thought chain item title | React.ReactNode | None | - |
CollapsibleOptions
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| expandedKeys | Current expanded keys | string[] | None | - |
| onExpand | Callback function when expanded keys change | (expandedKeys: string[]) => void | None | - |
Semantic DOM
Thought Chain Item Titledescription
Thought Chain Item Content
item
ItemitemHeader
Item HeaderitemContent
Item ContentitemFooter
Item Footer