---
title: ThoughtChain 思维链
group:
  title: 对话
  path: /ThoughtChain
  order: 2
---

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

## 示例

<code src="../../examples/ThoughtChain"></code>

## Props
| 属性        | 类型                                                       | 是否必传 | 默认值 | 说明             |
| ----------- | ---------------------------------------------------------- | -------- | ------ | ---------------- |
| items       | `ThoughtChainItemType[]`                                   | 是       | -      | 链条项内容数组   |
| collapsible | `boolean`                                                  | 否       | -      | 可折叠           |
| blink       | `boolean`                                                  | 否       | -      | 闪动效果         |
| style       | `React.CSSProperties & { [key: string]: any }`             | 否       | -      | 自定义样式       |
| className   | `string`                                                   | 否       | -      | 自定义类名       |
| onCollapse  | `(collapsed: boolean, item: ThoughtChainItemType) => void` | 否       | -      | 折叠状态变化回调 |

### ThoughtChainItemType

| 属性        | 类型                                           | 是否必传 | 默认值 | 说明                           |
| ----------- | ---------------------------------------------- | -------- | ------ | ------------------------------ |
| title       | `string`                                       | 否       | -      | 标题                           |
| children    | `React.ReactNode`                              | 否       | -      | 内容                           |
| status      | `'success' \| 'error' \| 'loading' \| 'abort'` | 否       | -      | 状态（成功/失败/加载中/中断）  |
| collapsible | `boolean`                                      | 否       | -      | 可折叠（优先级高于统一设置）   |
| blink       | `boolean`                                      | 否       | -      | 闪动效果（优先级高于统一设置） |
| style       | `React.CSSProperties & { [key: string]: any }` | 否       | -      | 自定义样式                     |
| className   | `string`                                       | 否       | -      | 自定义类名                     |
| onCollapse  | `(collapsed: boolean) => void`                 | 否       | -      | 折叠状态变化回调               |


### 自定义icon颜色

| 状态类型     | 对应 CSS 变量          | 默认颜色                  | 说明            |
| ------------ | ---------------------- | ------------------------- | --------------- |
| 成功 success | `--color-success-base` | `rgba(80, 94, 119, 0.32)` | 成功状态 icon色 |
| 失败 error   | `--color-error-base`   | `rgba(80, 94, 119, 0.32)` | 失败状态 icon色 |
| 加载 loading | `--color-loading-base` | `rgba(80, 94, 119, 0.32)` | 加载状态 icon色 |
| 中断 abort   | `--color-abort-base`   | `rgba(80, 94, 119, 0.32)` | 中断状态 icon色 |

可通过 style 属性传递对应 CSS 变量覆盖默认颜色：

```ts
<ThoughtChain
  items={items}
  style={{ '--color-error-base': '#FF4D4F', '--color-success-base': '#52c41a' }}
/>
```