logoAnt Design X

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

ThoughtChain思维链

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

相关资源

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
ahooks-React Hooks 库
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
基本

基础用法。

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。

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

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

codepen icon
External Link Icon
expand codeexpand code
1
Click me to expand the contentCollapsible
2
Click me to expand the contentCollapsible
可折叠的

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

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 定义

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

ThoughtChain 组件支持嵌套使用

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）