Skip to content

ThoughtChain 思维链

思维链组件用于可视化和追踪 Agent 对 Actions 和 Tools 的调用链。

何时使用

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

代码演示

基本

基础用法。

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

尺寸

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

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

节点状态

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

Thought Chain Item - 1status: success
Thought Chain Item - 2status: error

可折叠的

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

1
Click me to expand the contentCollapsible
2
Click me to expand the contentCollapsible

客制化

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

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

嵌套使用

ThoughtChain 组件支持嵌套使用

1
1 - Thought Chain Itemdescription
2
2 - Thought Chain Itemdescription

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', CSSProperties>--

ThoughtChainItem

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

CollapsibleOptions

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

Semantic DOM

主题变量(Design Token)