logoAnt Design X

DesignDevelopmentComponentsX MarkdownX SDKPlayground
  • Introduction
  • Overview
  • Common
    • Bubble
    • Conversations
    • Notification
  • Confirmation
    • Sources
    • Think
    • ThoughtChain
  • Wake
    • Welcome
    • Prompts
  • Express
    • Attachments
    • Sender
    • Suggestion
  • Feedback
    • Actions
    • FileCard
  • Others
    • XProvider

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
Docs
Edit this page...
Changelog
loading

When to use

  • To debug and trace the call chain in a complex Agent System.
  • For use in similar chain-like scenarios.

Code Demos

API

Reference: Common API

ThoughtChainProps

PropertyDescriptionTypeDefaultVersion
itemsCollection of thought nodesThoughtChainItemType[]--
defaultExpandedKeysInitially expanded nodesstring[]--
expandedKeysCurrently expanded nodesstring[]--
onExpandCallback for when expanded nodes change(expandedKeys: string[]) => void;--
lineLine style, no line is shown when falseboolean | 'solid' | 'dashed' | 'dotted‌''solid'-
classNamesClass names for semantic structureRecord<'root'|'item' | 'itemIcon'|'itemHeader' | 'itemContent' | 'itemFooter', string>--
prefixClsCustom prefixstring--
stylesStyles for semantic structureRecord<'root'|'item' |'itemIcon'| 'itemHeader' | 'itemContent' | 'itemFooter', React.CSSProperties>--
rootClassNameRoot element class namestring--

ThoughtChainItemType

PropertyDescriptionTypeDefaultVersion
contentContent of the thought nodeReact.ReactNode--
descriptionDescription of the thought nodeReact.ReactNode--
footerFooter of the thought nodeReact.ReactNode--
iconIcon of the thought node, not displayed when falsefalse | React.ReactNodeDefaultIcon-
keyUnique identifier for the thought nodestring--
statusStatus of the thought node'loading' | 'success' | 'error'| 'abort'--
titleTitle of the thought nodeReact.ReactNode--
collapsibleWhether the thought node is collapsiblebooleanfalse-

ThoughtChain.Item

PropertyDescriptionTypeDefaultVersion
prefixClsCustom prefixstring--
iconIcon of the thought chainReact.ReactNode--
titleTitle of the thought chainReact.ReactNode--
descriptionDescription of the thought chainReact.ReactNode--
statusStatus of the thought chain'loading' | 'success' | 'error'| 'abort'--
variantVariant configuration'solid' | 'outlined' | 'text'--

Semantic DOM

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
iconSizeThoughtChain.Item `outlined`'s hover background colornumber14
itemBorderRadiusThoughtChain.Item's border radiusnumber6
itemOutlinedBgThoughtChain.Item `outlined`'s background colorstring#ffffff
itemOutlinedHoverBgThoughtChain.Item `outlined`'s hover background colorstringrgba(0,0,0,0.06)
itemSolidBgThoughtChain.Item `solid`'s background colorstringrgba(0,0,0,0.04)
itemSolidHoverBgThoughtChain.Item `solid`'s hover background colorstringrgba(0,0,0,0.06)
Global TokenHow to use?
Basic Usage

Basic usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Node 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
Simple ThoughtChain

A concise thought chain component, providing multiple visual types for different statuses and scenarios.

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
Controlled Collapsible

Controlled collapsible function for thought chain node content area.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Customization

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

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

The ThoughtChain component supports nested usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Single Row

A concise thought chain component, providing multiple visual types for different statuses and scenarios.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
1
Knowledge Query
Query knowledge base
2
Web Search Tool Invoked
Tool invocation
3
Model Invocation Complete
Invoke model for response
4
Response Complete
Task completed
Thought Chain Item - 1
status: success
Thought Chain Item - 2
status: error
loading status:
Tool Calling
Tool Calling
Tool Calling
success status:
Tool Call Finished
Tool Call Finished
Tool Call Finished
error status:
Tool Call Error
Tool Call Error
Tool Call Error
abort status
Agent Response Aborted
Agent Response Aborted
Agent Response Aborted
custom icon:
Task Completed
Task Completed
Task Completed
description & click:
Opening Webpage
https://x.ant.design/docs/playground/copilot
Creating
todo.md
Searching
Route Information
Create Task: Write New Component
Execute files needed for creating new component
Creating folder for new component
Executing command
mkdir -p component
Creating files needed for new component
Creating file
component/index.tsx
Creating Chinese description file for new component
Creating file
component/index.zh-CN.md
Creating English description file for new component
Creating file
component/index.en-US.md
Checking Task Execution Steps
Verify overall task execution logic and feasibility
Folder created
component
File created
component/index.tsx
File created
component/index.zh-CN.md
File created
component/index.en-US.md
Create Task: Develop New Component
Execute files needed for new component creation
Creating folder for new component
Executing command
mkdir -p component
Creating files needed for new component
Creating file
component/index.tsx
Creating Chinese documentation fileCreating English description file for new component
Continue creating file
component/index.en-US.md
Check Task Execution Steps Completion
Verify the overall task execution logic and feasibility
Using the New Component
Using the generated component to complete the task
File created
component
Create Task
description
Thinking Process
1. Analyze task, understand task workflow 2. Task creation, files needed for task 3. Task execution, using new component
Creating folder for new component
Executing command
mkdir -p component
Creating files needed for new component
Creating file
component/index.tsx
Creating Chinese documentation file for new component
Continue creating file
component/index.zh-CN.md
Creating English description file for new component
Continue creating file
component/index.en-US.md
Check Task Execution Steps Completion
Verify the overall task execution logic and feasibility
Checking Task Execution Steps
Verify the overall task execution logic and feasibility
Folder creation completed
component
File creation completed
component/index.tsx
File creation completed
component/index.zh-CN.md
File creation completed
component/index.en-US.md
1
1 - Thought Chain Item
description
1
1-1 Thought Chain Item
description
2
1-2 Thought Chain Item
description
2
2 - Thought Chain Item
description
1
2-1 Thought Chain Item
description
2
2-2 Thought Chain Item
description
3
2-3 Thought Chain Item
description
Create Task: Write New Component
Creating folder for new component
Executing command
mkdir -p component
Creating files needed for new component
Creating file
component/index.tsx
Creating Chinese description file for new component
Creating file
component/index.zh-CN.md
Creating English description file for new component
Creating file
component/index.en-US.md
Thought Chain Item Title
description
Thought Chain Item Content
  • root
    Root
  • item
    Item
  • itemIcon
    Item Icon
  • itemHeader
    Item Header
  • itemContent
    Item Content
  • itemFooter
    Item Footer