logoAnt Design X

DesignDevelopmentComponentsPlayground
  • Overview
  • Common
    • Actions
    • Bubble
    • Conversations
  • Wake
    • Welcome
    • Prompts
  • Express
    • Attachments
    • Sender
    • Suggestion
  • Confirm
    • ThoughtChain
  • Tools
    • useXAgent
    • useXChat
    • XStream
    • XRequest
    • XProvider

ThoughtChain

The ThoughtChain component is used to visualize and track the call chain of Actions and Tools invoked by an Agent.
Importimport { ThoughtChain } from "@ant-design/x";
Sourcecomponents/thought-chain
Docs
Edit this pageChangelog

Resources

Ant Design
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

  • Debug and trace complex call chains in the Agent System.
  • Similar chain-like scenarios.

Examples

API

Common props ref：Common props

ThoughtChainProps

PropertyDescriptionTypeDefaultVersion
collapsibleWhether collapsibleboolean | CollapsibleOptionsNone-
classNamesClass names for semantic structureRecord<'item' | 'itemHeader' | 'itemContent' | 'itemFooter', string>None-
itemsChain itemsThoughtChainItem[]None-
prefixClsCustom prefixstringNone-
rootClassNameCustom root class namestringNone-
sizeSize'large' | 'middle' | 'small''middle'-
stylesStyles for semantic structureRecord<'item' | 'itemHeader' | 'itemContent' | 'itemFooter', React.CSSProperties>None-

ThoughtChainItem

PropertyDescriptionTypeDefaultVersion
contentThought chain item contentReact.ReactNodeNone-
descriptionThought chain item descriptionReact.ReactNodeNone-
extraThought chain item extra contentReact.ReactNodeNone-
footerThought chain item footerReact.ReactNodeNone-
iconThought chain item iconReact.ReactNodeNone-
keyUnique identifierstringNone-
statusThought chain item status'pending' | 'success' | 'error'None-
titleThought chain item titleReact.ReactNodeNone-

CollapsibleOptions

PropertyDescriptionTypeDefaultVersion
expandedKeysCurrent expanded keysstring[]None-
onExpandCallback function when expanded keys change(expandedKeys: string[]) => voidNone-

Semantic DOM

Design Token

Basic

Basic usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Size

The ThoughtChain supports three sizes of small, middle and large. Default size is middle.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Item Status

The thought chain nodes support configuring the status property to clearly indicate the current execution status of the node.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Collapsible

Configure collapsible to enable the expand for the content area of thought chain nodes.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Item Customization

The items property supports flexible customization. For more details, refer to the ThoughtChainItem definition.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Nested use

The ThoughtChain component supports nested usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
1
Thought Chain Item Titledescription
2
Thought Chain Item Titledescription
3
Thought Chain Item Titledescription
4
Thought Chain Item Titledescription
1
Thought Chain Item Titledescription
2
Thought Chain Item Titledescription
3
Thought Chain Item Titledescription
4
Thought Chain Item Titledescription
Thought Chain Item - 1status: success
Thought Chain Item - 2status: error
1
Click me to expand the contentCollapsible
2
Click me to expand the contentCollapsible
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
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
1
1 - Thought Chain Itemdescription
2
2 - Thought Chain Itemdescription
Thought Chain Item Titledescription
Thought Chain Item Content
  • item
    Item
  • itemHeader
    Item Header
  • itemContent
    Item Content
  • itemFooter
    Item Footer