logoAnt Design X

设计研发组件演示
  • 总览
  • 通用
    • Bubble对话气泡
    • Conversations管理对话
  • 唤醒
    • Welcome欢迎
    • Prompts提示集
  • 表达
    • Attachments输入附件
    • Sender输入框
    • Suggestion快捷指令
  • 确认
    • ThoughtChain思维链
  • 工具
    • useXAgent模型调度
    • useXChat数据管理
    • XStream流
    • XRequest请求
    • XProvider全局化配置

ThoughtChain
思维链

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

相关资源

Ant Design
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

何时使用

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

代码演示

1
Thought Chain Item Titledescription
2
Thought Chain Item Titledescription
3
Thought Chain Item Titledescription
4
Thought Chain Item Titledescription
基本

基础用法。

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
尺寸

ThoughtChain 有大、中、小三种尺寸。默认尺寸为中 - middle。

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

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

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

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

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

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
1
1 - Thought Chain Itemdescription
2
2 - Thought Chain Itemdescription
嵌套使用

ThoughtChain 组件支持嵌套使用

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考：通用属性

ThoughtChainProps

属性说明类型默认值版本
collapsible是否可折叠boolean | CollapsibleOptions--
classNames语义化结构的类名Record<'item' | 'itemHeader' | 'itemContent' | 'itemFooter', string>--
items思维节点集合ThoughtChainItem[]--
prefixCls自定义前缀string--
rootClassName自定义根类名string--
size尺寸'large' | 'middle' | 'small''middle'-
styles语义化结构的样式Record<'item' | 'itemHeader' | 'itemContent' | 'itemFooter', React.CSSProperties>--

ThoughtChainItem

属性说明类型默认值版本
content思维节点内容React.ReactNode--
description思维节点描述React.ReactNode--
extra思维节点额外内容React.ReactNode--
footer思维节点脚注React.ReactNode--
icon思维节点图标React.ReactNode--
key思维节点唯一标识符string--
status思维节点状态'pending' | 'success' | 'error'--
title思维节点标题React.ReactNode--

CollapsibleOptions

属性说明类型默认值版本
expandedKeys当前展开的节点string[]--
onExpand展开节点变化的回调函数(expandedKeys: string[]) => void--

Semantic DOM

Thought Chain Item Titledescription
Thought Chain Item Content
  • item
    思维链节点
  • itemHeader
    思维链节点头部
  • itemContent
    思维链节点内容
  • itemFooter
    思维链节点页脚

主题变量（Design Token）