ThoughtChain 思维链

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

何时使用

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

代码演示

基本

基础用法。

Thought Chain Item Titledescription

Thought Chain Item Titledescription

Thought Chain Item Titledescription

Thought Chain Item Titledescription

<script setup lang="ts">
import type { ThoughtChainProps } from '@artmate/chat'
import { ThoughtChain } from '@artmate/chat'
import { AddLocation } from '@element-plus/icons-vue'
import { ElCard, ElIcon } from 'element-plus'

const items: ThoughtChainProps['items'] = [
  {
    title: 'Thought Chain Item Title',
    description: 'description',
  },
  {
    title: 'Thought Chain Item Title',
    description: 'description',
  },
  {
    title: 'Thought Chain Item Title',
    description: 'description',
  },

  {
    title: 'Thought Chain Item Title',
    description: 'description',
  },
]
</script>

<template>
  <ElCard>
    <ThoughtChain :items="items">
      <template #icon>
        <ElIcon><AddLocation /></ElIcon>
      </template>
    </ThoughtChain>
  </ElCard>
</template>

<style lang="scss" scoped></style>

查看源代码

尺寸

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

SmallMiddleLarge

1

Thought Chain Item Titledescription

2

Thought Chain Item Titledescription

3

Thought Chain Item Titledescription

4

Thought Chain Item Titledescription

<script setup lang="ts">
import type { SizeType, ThoughtChainProps } from '@artmate/chat'
import { ThoughtChain } from '@artmate/chat'
import { ElAvatar, ElCard, ElRadioButton, ElRadioGroup } from 'element-plus'
import { ref } from 'vue'

const items: ThoughtChainProps['items'] = [
  {
    key: '1',
    title: 'Thought Chain Item Title',
    description: 'description',
  },
  {
    key: '2',
    title: 'Thought Chain Item Title',
    description: 'description',
  },
  {
    key: '3',
    title: 'Thought Chain Item Title',
    description: 'description',
  },

  {
    key: '4',
    title: 'Thought Chain Item Title',
    description: 'description',
  },
]

const size = ref<SizeType>('middle')
</script>

<template>
  <ElCard>
    <ElRadioGroup v-model="size" style="margin-bottom: 16px">
      <ElRadioButton label="Small" value="small">Small</ElRadioButton>
      <ElRadioButton label="Middle" value="middle">Middle</ElRadioButton>
      <ElRadioButton label="Large" value="large">Large</ElRadioButton>
    </ElRadioGroup>
    <ThoughtChain :items="items" :size="size">
      <template #icon="{ info }">
        <ElAvatar style="width: 100%; height: 100%">
          {{ info.key }}
        </ElAvatar>
      </template>
    </ThoughtChain>
  </ElCard>
</template>

<style lang="scss" scoped></style>

查看源代码

节点状态

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

Thought Chain Item - 1status: success

Thought Chain Item - 2status: error

<script setup lang="ts">
import type { ThoughtChainItemProps } from '@artmate/chat'
import { ThoughtChain } from '@artmate/chat'
import { CircleCheck, Loading, Warning } from '@element-plus/icons-vue'
import { ElButton, ElCard, ElIcon } from 'element-plus'
import { ref, shallowRef } from 'vue'

function getStatusIcon(status: ThoughtChainItemProps['status']) {
  switch (status) {
    case 'success':
      return shallowRef(CircleCheck)
    case 'error':
      return shallowRef(Warning)
    case 'pending':
      return shallowRef(Loading)
    default:
      return undefined
  }
}

const mockServerResponseData: ThoughtChainItemProps[] = [
  {
    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'),
  },
]

function delay(ms: number) {
  return new Promise<void>((resolve) => {
    const timer: NodeJS.Timeout = setTimeout(() => {
      clearTimeout(timer)
      resolve()
    }, ms)
  })
}

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

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

const items = ref<ThoughtChainItemProps[]>(mockServerResponseData)
const loading = ref(false)

async function mockStatusChange() {
  await updateChainItem('error')
  items.value = [...mockServerResponseData]
  await updateChainItem('pending')
  items.value = [...mockServerResponseData]
  await updateChainItem('success')
  items.value = [...mockServerResponseData]
}

async function onClick() {
  loading.value = true
  addChainItem()
  items.value = [...mockServerResponseData]
  await mockStatusChange()
  loading.value = false
}
</script>

<template>
  <ElCard>
    <ElButton style="margin-bottom: 16px" :loading="loading" @click="onClick">
      {{ loading ? 'Running' : 'Run Next' }}
    </ElButton>
    <ThoughtChain :items="items">
      <template #icon="{ info }">
        <ElIcon v-if="info?.icon" size="20" color="white">
          <component :is="info.icon" />
        </ElIcon>
      </template>
    </ThoughtChain>
  </ElCard>
</template>

<style lang="scss" scoped></style>

查看源代码

可折叠的

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

1

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

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

<script setup lang="ts">
import type { ThoughtChainProps } from '@artmate/chat'
import { ThoughtChain } from '@artmate/chat'
import { ElAvatar, ElCard } from 'element-plus'

const items: ThoughtChainProps['items'] = [
  {
    key: '1',
    title: 'Click me to expand the content',
    description: 'Collapsible',
    content: [
      `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`,
    ],
  },
  {
    key: '2',
    title: 'Click me to expand the content',
    description: 'Collapsible',
    content: [
      `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`,
    ],
  },
]
</script>

<template>
  <ElCard>
    <ThoughtChain :items="items" collapsible>
      <template #icon="{ info }">
        <ElAvatar style="width: 100%; height: 100%">
          {{ info.key }}
        </ElAvatar>
      </template>
      <template #content="{ info }">
        <div v-for="(item, index) in info.content" :key="index">
          {{ item }}
        </div>
      </template>
    </ThoughtChain>
  </ElCard>
</template>

<style lang="scss" scoped></style>

查看源代码

客制化

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

<script setup lang="ts">
import type { ThoughtChainItemProps, ThoughtChainProps } from '@artmate/chat'
import { ThoughtChain } from '@artmate/chat'
import { CircleCheck, MoreFilled } from '@element-plus/icons-vue'
import { ElButton, ElCard, ElIcon } from 'element-plus'
import { isVNode, shallowRef } from 'vue'

const customizationProps: ThoughtChainItemProps = {
  title: 'Thought Chain Item Title',
  description: 'description',
  icon: CircleCheck,
  content: [
    ` 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`,
    ``,
  ],
}
function CustomizationPropsFn(op: ThoughtChainItemProps) {
  return Object.fromEntries(
    Object.entries(op).map(([k, v]) => {
      return [k, isVNode(v) ? shallowRef(v) : v]
    })
  )
}

const items: ThoughtChainProps['items'] = [
  {
    ...CustomizationPropsFn(customizationProps),
    status: 'success',
  },
  {
    ...CustomizationPropsFn(customizationProps),
    status: 'error',
  },
  {
    ...CustomizationPropsFn(customizationProps),
    status: 'pending',
  },
]
</script>

<template>
  <ElCard>
    <ThoughtChain :items="items">
      <template #icon="{ info }">
        <ElIcon size="20" color="white">
          <component :is="info.icon" />
        </ElIcon>
      </template>
      <template #content="{ info }">
        <div v-for="(item, index) in info.content" :key="index">
          {{ item }}
        </div>
      </template>
      <template #extra>
        <ElButton size="small">
          <template #icon>
            <ElIcon><MoreFilled /></ElIcon>
          </template>
        </ElButton>
      </template>
      <template #footer>
        <ElButton style="width: 100%">Thought Chain Item Footer</ElButton>
      </template>
    </ThoughtChain>
  </ElCard>
</template>

查看源代码

嵌套使用

ThoughtChain 组件支持嵌套使用

1

1 - Thought Chain Itemdescription

1

1 - Thought Chain Itemdescription

2

2 - Thought Chain Itemdescription

2

2 - Thought Chain Itemdescription

1

1 - Thought Chain Itemdescription

2

2 - Thought Chain Itemdescription

<script setup lang="ts">
import type { ThoughtChainProps } from '@artmate/chat'
import { ThoughtChain } from '@artmate/chat'
import { CircleCheck, MoreFilled } from '@element-plus/icons-vue'
import { ElAvatar, ElButton, ElCard, ElIcon } from 'element-plus'
import { shallowRef } from 'vue'

const items: ThoughtChainProps['items'] = [
  {
    key: '1',
    title: '1 - Thought Chain Item',
    description: 'description',
    icon: shallowRef(CircleCheck),
    content: [
      ` 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`,
    ],
  },
  {
    key: '2',
    title: '2 - Thought Chain Item',
    description: 'description',
    icon: shallowRef(CircleCheck),
    content: [
      ` 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`,
    ],
  },
]
</script>

<template>
  <ElCard>
    <ThoughtChain :items="items" collapsible>
      <template #icon="{ info }">
        <ElAvatar style="width: 100%; height: 100%">
          {{ info.key }}
        </ElAvatar>
      </template>
      <template #content>
        <ThoughtChain :items="items" collapsible>
          <template #icon="{ info }">
            <ElAvatar style="width: 100%; height: 100%">
              {{ info.key }}
            </ElAvatar>
          </template>
          <template #extra>
            <ElButton size="small">
              <template #icon>
                <ElIcon><MoreFilled /></ElIcon>
              </template>
            </ElButton>
          </template>
        </ThoughtChain>
      </template>
      <template #extra>
        <ElButton size="small">
          <template #icon>
            <ElIcon><MoreFilled /></ElIcon>
          </template>
        </ElButton>
      </template>
      <template #footer>
        <ElButton style="width: 100%">Thought Chain Item Footer</ElButton>
      </template>
    </ThoughtChain>
  </ElCard>
</template>

<style lang="scss" scoped></style>

查看源代码

ThoughtChainProps

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

ThoughtChainItem

属性	说明	类型	默认值	版本
description	思维节点描述	string	-	-
key	思维节点唯一标识符	string	-	-
status	思维节点状态	'pending' | 'success' | 'error'	-	-
title	思维节点标题	string	-	-

Slots

插槽名	说明
icon	自定义图标内容
content	自定义内容
extra	自定义额外操作区域内容
footer	自定义脚注内容

CollapsibleOptions

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