logoAnt Design X

设计研发组件X MarkdownX SDK演示
  • 介绍
  • 总览
  • 通用
    • Bubble对话气泡
    • Conversations管理对话
    • Notification系统通知
  • 唤醒
    • Welcome欢迎
    • Prompts提示集
  • 表达
    • Attachments输入附件
    • Sender输入框
    • Suggestion快捷指令
  • 确认
    • Sources来源引用
    • Think思考过程
    • ThoughtChain思维链
  • 反馈
    • Actions操作列表
    • FileCard文件卡片
  • 其他
    • XProvider全局化配置

ThoughtChain
思维链

思维链组件用于可视化和追踪 Agent 对 Actions 和 Tools 的调用链。
使用import { ThoughtChain } from "@ant-design/x";
源码components/thought-chain
文档
编辑此页...
更新日志
loading

何时使用

  • 调试和跟踪复杂 Agent System 中的调用链
  • 类似的链式场景中使用

代码演示

API

通用属性参考：通用属性

ThoughtChainProps

属性说明类型默认值版本
items思维节点集合ThoughtChainItemType[]--
defaultExpandedKeys初始化展开的节点string[]--
expandedKeys当前展开的节点string[]--
onExpand展开节点变化回调(expandedKeys: string[]) => void;--
line线条样式，为false 时不展示线条boolean | 'solid' | 'dashed' | 'dotted‌''solid'-
classNames语义化结构的类名Record<'root'|'item' | 'itemIcon'|'itemHeader' | 'itemContent' | 'itemFooter', string>--
prefixCls自定义前缀string--
styles语义化结构的样式Record<'root'|'item' |'itemIcon'| 'itemHeader' | 'itemContent' | 'itemFooter', React.CSSProperties>--
rootClassName根元素样式类名string--

ThoughtChainItemType

属性说明类型默认值版本
content思维节点内容React.ReactNode--
description思维节点描述React.ReactNode--
footer思维节点脚注React.ReactNode--
icon思维节点图标,为false时不展示false|React.ReactNodeDefaultIcon-
key思维节点唯一标识符string--
status思维节点状态'loading' | 'success' | 'error'| 'abort'--
title思维节点标题React.ReactNode--
collapsible思维节点是否可折叠booleanfalse-
blink闪动效果boolean--

ThoughtChain.Item

属性说明类型默认值版本
prefixCls自定义前缀string--
icon思维链图标React.ReactNode--
title思维链标题React.ReactNode--
description思维链描述React.ReactNode--
status思维链状态'loading' | 'success' | 'error'| 'abort'--
variant变体配置'solid' | 'outlined' | 'text'--
blink闪动效果boolean--

Semantic DOM

ThoughtChain

ThoughtChain.Item

主题变量（Design Token）

组件 Token如何定制？
Token 名称描述类型默认值
iconSize图标容器尺寸number14
itemBorderRadiusThoughtChain.Item 圆角number6
itemMotionDescription思维链节点描述文字的动画颜色string#00000040
itemOutlinedBg边框模式的 ThoughtChain.Item 背景色string#ffffff
itemOutlinedHoverBg边框模式的 ThoughtChain.Item 悬浮态背景色stringrgba(0,0,0,0.06)
itemSolidBg实心的 ThoughtChain.Item 背景色stringrgba(0,0,0,0.04)
itemSolidHoverBg实心的 ThoughtChain.Item 悬浮态背景色stringrgba(0,0,0,0.06)
全局 Token如何定制？
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
基本

基础用法。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Thought Chain Item - 1
status: success
Thought Chain Item - 2
status: error
节点状态

思维链节点支持配置 status 属性来明显的表明当前节点的执行状态

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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
blink:
Task Completed
Task Completed
Task Completed
Route Information
简洁思维链

简洁思维链，提供不同的类型可供选择。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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
可折叠的

配置 collapsible 可开启对思维链节点内容区域的折叠功能

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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
受控的折叠

受控的思维链节点内容区域的折叠功能。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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
客制化

items 属性支持灵活的客制化配置，详情参考 ThoughtChainItemType 定义

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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
嵌套使用

ThoughtChain 组件支持嵌套使用

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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
单行折叠

单行折叠。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Thought Chain Item Title
description
Thought Chain Item Content
  • root
    根节点
  • item
    思维链节点
  • itemIcon
    思维链图标
  • itemHeader
    思维链节点头部
  • itemContent
    思维链节点内容
  • itemFooter
    思维链节点页脚
Opening Webpage
https://x.ant.design/docs/playground/copilot
  • root
    根节点
  • icon
    思维链图标
  • title
    思维链标题
  • description
    思维链节点描述