ThoughtChain

The Thought Chain component is used to visualize and track the call chain of an Agent to Actions and Tools.

When to use

• Debug and track call chains in complex Agent Systems
• Used in similar chain-like scenarios

Examples

Basic

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

Basic

Basic usage.

<script setup lang="tsx">
import type { ThoughtChainProps } from 'ant-design-x-vue';
import { ThoughtChain } from 'ant-design-x-vue';
import { Card } from 'ant-design-vue';

const items: ThoughtChainProps['items'] = [
  {
    title: 'Knowledge Query',
    description: 'Query knowledge base',
  },
  {
    title: 'Web Search Tool Invoked',
    description: 'Tool invocation',
  },
  {
    title: 'Model Invocation Complete',
    description: 'Invoke model for response',
  },
  {
    title: 'Response Complete',
    description: 'Task completed',
    blink: true,
  },
];

defineRender(() => (
  <Card style={{ width: '500px' }}>
    <ThoughtChain items={items} />
  </Card>
));
</script>

Hide source

ThoughtChain.Item

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

ThoughtChain.Item

ThoughtChain.Item is an independent compact component that supports three variants: solid, outlined, and text, as well as four states: loading, success, error, and abort.

<script setup lang="tsx">
import { EditOutlined, GlobalOutlined, SearchOutlined, ChromeOutlined } from '@ant-design/icons-vue';
import { ThoughtChain } from 'ant-design-x-vue';
import { Flex, Typography } from 'ant-design-vue';

const { Text } = Typography;

const onClick = () => {
  console.log('Item Click');
};

defineRender(() => (
  <Flex vertical gap="middle">
    <Flex gap="small" wrap="wrap" align="center">
      <Text style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>loading status:</Text>
      <ThoughtChain.Item variant="solid" status="loading" title="Tool Calling" />
      <ThoughtChain.Item variant="outlined" status="loading" title="Tool Calling" />
      <ThoughtChain.Item variant="text" status="loading" title="Tool Calling" />
    </Flex>

    <Flex gap="small" wrap="wrap" align="center">
      <Text style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>success status:</Text>
      <ThoughtChain.Item variant="solid" status="success" title="Tool Call Finished" />
      <ThoughtChain.Item variant="outlined" status="success" title="Tool Call Finished" />
      <ThoughtChain.Item variant="text" status="success" title="Tool Call Finished" />
    </Flex>

    <Flex gap="small" wrap="wrap" align="center">
      <Text style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>error status:</Text>
      <ThoughtChain.Item variant="solid" status="error" title="Tool Call Error" />
      <ThoughtChain.Item variant="outlined" status="error" title="Tool Call Error" />
      <ThoughtChain.Item variant="text" status="error" title="Tool Call Error" />
    </Flex>

    <Flex gap="small" wrap="wrap" align="center">
      <Text style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>abort status:</Text>
      <ThoughtChain.Item variant="solid" status="abort" title="Agent Response Aborted" />
      <ThoughtChain.Item variant="outlined" status="abort" title="Agent Response Aborted" />
      <ThoughtChain.Item variant="text" status="abort" title="Agent Response Aborted" />
    </Flex>

    <Flex gap="small" wrap="wrap" align="center">
      <Text style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>custom icon:</Text>
      <ThoughtChain.Item variant="solid" icon={<ChromeOutlined />} title="Task Completed" />
      <ThoughtChain.Item variant="outlined" icon={<ChromeOutlined />} title="Task Completed" />
      <ThoughtChain.Item variant="text" icon={<ChromeOutlined />} title="Task Completed" />
    </Flex>

    <Flex gap="small" wrap="wrap" align="center">
      <Text style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>description & click:</Text>
      <ThoughtChain.Item
        variant="solid"
        onClick={onClick}
        icon={<GlobalOutlined />}
        title="Opening Webpage"
        description="https://x.ant.design/docs/playground/copilot"
      />
      <ThoughtChain.Item
        variant="outlined"
        onClick={onClick}
        icon={<EditOutlined />}
        title="Creating"
        description="todo.md"
      />
      <ThoughtChain.Item
        variant="text"
        onClick={onClick}
        icon={<SearchOutlined />}
        title="Searching"
        description="Route Information"
      />
    </Flex>

    <Flex gap="small" wrap="wrap" align="center">
      <Text style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>blink:</Text>
      <ThoughtChain.Item blink variant="solid" icon={<ChromeOutlined />} title="Task Completed" />
      <ThoughtChain.Item blink variant="outlined" icon={<ChromeOutlined />} title="Task Completed" />
      <ThoughtChain.Item
        blink
        variant="text"
        icon={<ChromeOutlined />}
        title="Task Completed"
        description="Route Information"
      />
    </Flex>
  </Flex>
));
</script>

Hide source

Node status

Thought Chain Item - 1

status: success

Thought Chain Item - 2

status: error

Node status

Thought chain nodes support configuring the status property to clearly indicate the current execution status of the node.

<script setup lang="tsx">
import { CheckCircleOutlined, InfoCircleOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import type { ThoughtChainItemType } from 'ant-design-x-vue';
import { ThoughtChain } from 'ant-design-x-vue';
import { Button, Card } from 'ant-design-vue';
import { ref } from 'vue';

function getStatusIcon(status: ThoughtChainItemType['status']) {
  switch (status) {
    case 'success':
      return <CheckCircleOutlined />;
    case 'error':
      return <InfoCircleOutlined />;
    case 'loading':
      return <LoadingOutlined />;
    default:
      return undefined;
  }
}

const mockServerResponseData: ThoughtChainItemType[] = [
  {
    title: 'Thought Chain Item - 1',
    status: 'success',
    description: 'status: success',
    icon: getStatusIcon('success'),
  },
  {
    title: 'Thought Chain Item - 2',
    status: 'error',
    description: 'status: error',
    icon: getStatusIcon('error'),
  },
];

const delay = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

function addChainItem() {
  mockServerResponseData.push({
    title: `Thought Chain Item - ${mockServerResponseData.length + 1}`,
    status: 'loading',
    icon: getStatusIcon('loading'),
    description: 'status: loading',
  });
}

async function updateChainItem(status: ThoughtChainItemType['status']) {
  await delay(800);
  const last = mockServerResponseData[mockServerResponseData.length - 1];
  last.status = status;
  last.icon = getStatusIcon(status);
  last.description = `status: ${status}`;
}

const items = ref<ThoughtChainItemType[]>([...mockServerResponseData]);
const loading = ref(false);

const mockStatusChange = async () => {
  await updateChainItem('error');
  items.value = [...mockServerResponseData];
  await updateChainItem('loading');
  items.value = [...mockServerResponseData];
  await updateChainItem('success');
  items.value = [...mockServerResponseData];
};

const onClick = async () => {
  loading.value = true;
  addChainItem();
  items.value = [...mockServerResponseData];
  await mockStatusChange();
  loading.value = false;
};

defineRender(() => (
  <Card style={{ width: '500px' }}>
    <Button onClick={onClick} style={{ marginBottom: '16px' }} loading={loading.value}>
      {loading.value ? 'Running' : 'Run Next'}
    </Button>
    <ThoughtChain items={items.value} />
  </Card>
));
</script>

Hide source

Collapsible

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

Configuring the collapsible and defaultExpandedKeys of an item enables the folding functionality of the content area of a thought chain node.

<script setup lang="tsx">
import { CodeOutlined, EditOutlined } from '@ant-design/icons-vue';
import type { ThoughtChainProps } from 'ant-design-x-vue';
import { ThoughtChain } from 'ant-design-x-vue';
import { Card, Flex, Typography } from 'ant-design-vue';

const { Text } = Typography;

const items: ThoughtChainProps['items'] = [
  {
    key: 'create_task',
    title: 'Create Task: Write New Component',
    description: 'Execute files needed for creating new component',
    collapsible: true,
    content: (
      <Flex gap="small" vertical>
        <Text type="secondary">Creating folder for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<CodeOutlined />}
          title="Executing command"
          description="mkdir -p component"
        />
        <Text type="secondary">Creating files needed for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.tsx"
        />
        <Text type="secondary">Creating Chinese description file for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.zh-CN.md"
        />
        <Text type="secondary">Creating English description file for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.en-US.md"
        />
      </Flex>
    ),
    status: 'success',
  },
  {
    key: 'check_task',
    title: 'Checking Task Execution Steps',
    description: 'Verify overall task execution logic and feasibility',
    content: (
      <Flex gap="small" vertical>
        <ThoughtChain.Item variant="solid" status="success" title="Folder created" description="component" />
        <ThoughtChain.Item variant="solid" status="success" title="File created" description="component/index.tsx" />
        <ThoughtChain.Item variant="solid" status="success" title="File created" description="component/index.zh-CN.md" />
        <ThoughtChain.Item variant="solid" status="success" title="File created" description="component/index.en-US.md" />
      </Flex>
    ),
    status: 'loading',
  },
];

defineRender(() => (
  <Card style={{ width: '500px' }}>
    <ThoughtChain defaultExpandedKeys={['create_task']} items={items} />
  </Card>
));
</script>

Hide source

Controlled mode

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

Controlled mode

Controlled mode is achieved through expandedKeys and onExpand.

<script setup lang="tsx">
import { CodeOutlined, EditOutlined } from '@ant-design/icons-vue';
import type { ThoughtChainProps } from 'ant-design-x-vue';
import { ThoughtChain } from 'ant-design-x-vue';
import { Button, Card, Flex, Typography } from 'ant-design-vue';
import { ref } from 'vue';

const { Text } = Typography;

const items: ThoughtChainProps['items'] = [
  {
    key: 'create_task',
    title: 'Create Task: Develop New Component',
    description: 'Execute files needed for new component creation',
    collapsible: true,
    content: (
      <Flex gap="small" vertical>
        <Text type="secondary">Creating folder for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<CodeOutlined />}
          title="Executing command"
          description="mkdir -p component"
        />
        <Text type="secondary">Creating files needed for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.tsx"
        />
        <Text type="secondary">Creating Chinese documentation file</Text>
        <Text type="secondary">Creating English description file for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Continue creating file"
          description="component/index.en-US.md"
        />
      </Flex>
    ),
    status: 'success',
  },
  {
    key: 'check_task',
    title: 'Check Task Execution Steps Completion',
    collapsible: true,
    description: 'Verify the overall task execution logic and feasibility',
    content: (
      <Flex gap="small" vertical>
        <ThoughtChain.Item variant="solid" status="success" title="Folder created" description="component" />
        <ThoughtChain.Item variant="solid" status="success" title="File created" description="component/index.tsx" />
        <ThoughtChain.Item variant="solid" status="success" title="File created" description="component/index.zh-CN.md" />
        <ThoughtChain.Item variant="solid" status="success" title="File created" description="component/index.en-US.md" />
      </Flex>
    ),
    status: 'success',
  },
  {
    key: 'used_task',
    title: 'Using the New Component',
    description: 'Using the generated component to complete the task',
    content: (
      <Flex gap="small" vertical>
        <ThoughtChain.Item variant="solid" status="success" title="File created" description="component" />
      </Flex>
    ),
    status: 'loading',
  },
];

const expandedKeys = ref(['create_task']);

defineRender(() => (
  <Card style={{ width: '500px' }}>
    <Button
      style={{ marginBottom: '16px' }}
      onClick={() => {
        expandedKeys.value = ['check_task'];
      }}
    >
      Open "check_task" details
    </Button>
    <ThoughtChain
      items={items}
      expandedKeys={expandedKeys.value}
      onExpand={(keys) => { expandedKeys.value = keys; }}
    />
  </Card>
));
</script>

Hide source

Destroy on collapse

1

Collapsible Task

Content will be removed from DOM when collapsed

Task detail content.

2

Normal Task

Task2 content.

Destroy on collapse

Whether to destroy content when collapsed.

<script setup lang="tsx">
import type { ThoughtChainProps } from 'ant-design-x-vue';
import { ThoughtChain } from 'ant-design-x-vue';
import { Button, Card, Space, Switch } from 'ant-design-vue';
import { computed, ref } from 'vue';

const expandedKeys = ref<string[]>(['task1']);
const destroyOnHidden = ref(true);

const items = computed<ThoughtChainProps['items']>(() => [
  {
    key: 'task1',
    title: 'Collapsible Task',
    description: 'Content will be removed from DOM when collapsed',
    collapsible: true,
    destroyOnHidden: destroyOnHidden.value,
    content: 'Task detail content.',
  },
  {
    key: 'task2',
    title: 'Normal Task',
    content: 'Task2 content.',
  },
]);

defineRender(() => (
  <Card style={{ width: '500px' }}>
    <Space style={{ marginBottom: '16px' }}>
      <Button
        onClick={() => {
          expandedKeys.value = expandedKeys.value.includes('task1') ? [] : ['task1'];
        }}
      >
        {expandedKeys.value.includes('task1') ? 'Collapse' : 'Expand'}
      </Button>
      <Switch
        checked={destroyOnHidden.value}
        onChange={(checked: boolean) => {
          destroyOnHidden.value = checked;
        }}
        checkedChildren="destroyOnHidden"
        unCheckedChildren="keep"
      />
    </Space>
    <ThoughtChain
      items={items.value}
      expandedKeys={expandedKeys.value}
      onExpand={(keys: string[]) => {
        expandedKeys.value = keys;
      }}
    />
  </Card>
));
</script>

Hide source

Customization

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

Customization

The items property supports flexible customization, including custom icons, footnotes, nested Think components, etc. Supports line="dashed" for dashed line style.

<script setup lang="tsx">
import { CodeOutlined, EditOutlined, HeartTwoTone, SmileTwoTone } from '@ant-design/icons-vue';
import type { ThoughtChainItemType } from 'ant-design-x-vue';
import { Think, ThoughtChain } from 'ant-design-x-vue';
import { Button, Card, Flex, Typography } from 'ant-design-vue';

const { Text } = Typography;

const items: ThoughtChainItemType[] = [
  {
    title: 'Create Task',
    description: 'description',
    icon: <HeartTwoTone twoToneColor="#eb2f96" />,
    footer: <Button block>Thought Chain Item Footer</Button>,
    content: (
      <Flex gap="small" vertical>
        <Think title="Thinking Process">
          {`1. Analyze task, understand task workflow\n2. Task creation, files needed for task\n3. Task execution, using new component`}
        </Think>
        <Text type="secondary">Creating folder for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<CodeOutlined />}
          title="Executing command"
          description="mkdir -p component"
        />
        <Text type="secondary">Creating files needed for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.tsx"
        />
        <Text type="secondary">Creating Chinese documentation file for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Continue creating file"
          description="component/index.zh-CN.md"
        />
        <Text type="secondary">Creating English description file for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Continue creating file"
          description="component/index.en-US.md"
        />
      </Flex>
    ),
  },
  {
    key: 'check_task',
    title: 'Check Task Execution Steps Completion',
    icon: <SmileTwoTone />,
    collapsible: true,
    description: 'Verify the overall task execution logic and feasibility',
    content: (
      <Flex gap="small" vertical>
        <ThoughtChain.Item variant="solid" status="success" title="Folder creation completed" description="component" />
        <ThoughtChain.Item variant="solid" status="success" title="File creation completed" description="component/index.tsx" />
        <ThoughtChain.Item variant="solid" status="success" title="File creation completed" description="component/index.zh-CN.md" />
        <ThoughtChain.Item variant="solid" status="success" title="File creation completed" description="component/index.en-US.md" />
      </Flex>
    ),
  },
  {
    key: 'used_task',
    title: 'Checking Task Execution Steps',
    description: 'Verify the overall task execution logic and feasibility',
    content: (
      <Flex gap="small" vertical>
        <ThoughtChain.Item variant="solid" status="success" title="Folder creation completed" description="component" />
        <ThoughtChain.Item variant="solid" status="success" title="File creation completed" description="component/index.tsx" />
        <ThoughtChain.Item variant="solid" status="success" title="File creation completed" description="component/index.zh-CN.md" />
        <ThoughtChain.Item variant="solid" status="success" title="File creation completed" description="component/index.en-US.md" />
      </Flex>
    ),
    status: 'error',
  },
];

defineRender(() => (
  <Card style={{ width: '500px' }}>
    <ThoughtChain items={items} line="dashed" />
  </Card>
));
</script>

Hide source

Nested usage

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

Nested usage

ThoughtChain supports nesting.

<script setup lang="tsx">
import type { ThoughtChainProps } from 'ant-design-x-vue';
import { ThoughtChain } from 'ant-design-x-vue';
import { Button, Card } from 'ant-design-vue';

const items: ThoughtChainProps['items'] = [
  {
    title: '1 - Thought Chain Item',
    description: 'description',
    footer: <Button>1 - Thought Chain Item Footer</Button>,
    content: (
      <ThoughtChain
        items={[
          { title: '1-1 Thought Chain Item', description: 'description' },
          { title: '1-2 Thought Chain Item', description: 'description' },
        ]}
      />
    ),
  },
  {
    title: '2 - Thought Chain Item',
    description: 'description',
    footer: <Button>2 - Thought Chain Item Footer</Button>,
    content: (
      <ThoughtChain
        items={[
          { title: '2-1 Thought Chain Item', description: 'description' },
          { title: '2-2 Thought Chain Item', description: 'description' },
          { title: '2-3 Thought Chain Item', description: 'description' },
        ]}
      />
    ),
  },
];

defineRender(() => (
  <Card style={{ width: '500px' }}>
    <ThoughtChain items={items} />
  </Card>
));
</script>

Hide source

Single-line collapse

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

Single-line collapse

Hide icons with icon: false and use custom styles.itemContent to achieve a single-line folding effect.

<script setup lang="tsx">
import { CodeOutlined, EditOutlined } from '@ant-design/icons-vue';
import type { ThoughtChainProps } from 'ant-design-x-vue';
import { ThoughtChain } from 'ant-design-x-vue';
import { Card, Flex, Typography } from 'ant-design-vue';

const { Text } = Typography;

const contentStyles = {
  backgroundColor: 'rgba(0,0,0,.01)',
  borderRadius: '8px',
  padding: '10px',
  marginBlockStart: '10px',
  border: '1px solid rgba(0,0,0,.04)',
};

const items: ThoughtChainProps['items'] = [
  {
    key: 'create_task',
    title: 'Create Task: Write New Component',
    icon: false,
    collapsible: true,
    content: (
      <Flex gap="small" vertical>
        <Text type="secondary">Creating folder for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<CodeOutlined />}
          title="Executing command"
          description="mkdir -p component"
        />
        <Text type="secondary">Creating files needed for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.tsx"
        />
        <Text type="secondary">Creating Chinese description file for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.zh-CN.md"
        />
        <Text type="secondary">Creating English description file for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.en-US.md"
        />
      </Flex>
    ),
  },
];

defineRender(() => (
  <Card style={{ width: '500px' }}>
    <ThoughtChain
      styles={{ itemContent: contentStyles }}
      defaultExpandedKeys={['create_task']}
      items={items}
    />
  </Card>
));
</script>

Hide source

API

ThoughtChainProps

Prop	Description	Type	Default	Version
items	Collection of thought nodes	ThoughtChainItemType[]	-	-
defaultExpandedKeys	Initially expanded nodes	string[]	-	-
expandedKeys	Currently expanded nodes	string[]	-	-
onExpand	Callback for node expansion change	(expandedKeys: string[]) => void	-	-
line	Line style	boolean	'solid'	'dashed'
classNames	Class names for semantic structure	Record<SemanticType, string>	-	-
styles	Styles for semantic structure	Record<SemanticType, CSSProperties>	-	-
prefixCls	Custom prefix	string	-	-
rootClassName	Custom root class name	string	-	-

ThoughtChainItemType

Prop	Description	Type	Default	Version
key	Unique identifier for mind node	string	-	-
icon	Icon for mind node, set to false to hide	VNode	string	number
title	Mind node title	VNode	string	-
description	Mind node description	VNode	string	-
content	Mind node content	VNode	string	-
footer	Mind node footer note	VNode	string	-
status	Mind node status	'loading'	'success'	'error'
collapsible	Whether it is collapsible	boolean	-	-
blink	Blink animation	boolean	-	-
destroyOnHidden	Whether to destroy content node when hidden	boolean	true	-

ThoughtChain.Item Props

Prop	Description	Type	Default	Version
variant	Variant	'solid'	'outlined'	'text'
icon	Icon	VNode	string	-
title	Title	VNode	string	-
description	Description	VNode	string	-
status	Status	'loading'	'success'	'error'
blink	Blink animation	boolean	-	-
disabled	Whether disabled	boolean	false	-
onClick	Click event	() => void	-	-
classNames	Semantic structure class names	Record<'root'	'icon'	'title'
styles	Semantic structure styles	Record<'root'	'icon'	'title'

SemanticType

Name	Description
root	Root node
item	Node item
itemHeader	Node header
itemIcon	Node icon
itemContent	Node content
itemFooter	Node footer

Semantic DOM

The preview sequentially displays the semantic structure of ThoughtChain and ThoughtChain.Item.

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

  思维链节点描述

Design Token

Prop	Description	Type	Default
itemSolidBg	ThoughtChain.Item solid background color	string	colorFillTertiary
itemSolidHoverBg	ThoughtChain.Item solid hover background color	string	colorBgTextHover
itemOutlinedBg	ThoughtChain.Item outlined background color	string	colorBgContainer
itemOutlinedHoverBg	ThoughtChain.Item outlined hover background color	string	colorBgTextHover
itemBorderRadius	ThoughtChain.Item border radius	number	borderRadius
iconSize	Icon container size	number	fontSize
colorTextBlinkDefault	Default typing animation color	string	colorTextDescription
colorTextBlink	Typing animation color	string	colorTextBase
itemMotionDescription	Effect description text color (semi-transparent)	string	rgba(colorTextDescription, 0.25)