[RFC] New Component - ThoughtChain

[YumoImer]

Summary

新增名为 ThoughtChain - 思维链 的新组件。该组件旨在可视化和追踪 Agent 对服务的调用链，为 Ant Design X 的终端用户提供一个清晰直观的方式来跟踪 Agent 对 Actions 和 Tools 的调用过程。这个组件将成为调试、优化和理解 Agent System 行为的关键工具。

Motivation

背景

随着 Agent System 的复杂性增加，特别是涉及多步骤流程和多次调用的场景，终端用户需要调试和跟踪调用链中的数据和决策过程。

组件需求

目前，Ant Design X 中没有标准化的组件来可视化和追踪 Agent 的调用链。思维链组件旨在填补这一空白，使我们的开发者用户能够轻松集成该功能到 Agent Platform 中。

Detailed Design

组件名称

• 英文名称: ThoughtChain
• 中文名称: 思维链

组件概述

思维链组件用于可视化和追踪 Agent 对 Actions 和 Tools 的调用链。链中的每个步骤通常表示一个操作、决策或工具调用，并且可以包括有关输入、输出的详细信息。

API 设计

type ThoughtChainItemStatus = 'finish' | 'process';

interface ThoughtChainItem {
  /**
   * @desc 思维节点唯一标识符
   * @descEN Unique identifier
   */
  key: string;

  /**
   * @desc 思维节点标题
   * @descEN Thought chain item title
   */
  title?: React.ReactNode;

  /**
   * @desc 思维节点描述
   * @descEN Thought chain item description
   */
  description?: React.ReactNode;

  /**
   * @desc 思维节点状态
   * @descEN Thought chain item status
   */
  status?: ThoughtChainItemStatus;

  /**
   * @desc 思维节点图标
   * @descEN Thought chain item icon
   */
  icon?: React.ReactNode;

  /**
   * @desc 思维节点子元素
   * @descEN Thought chain item children
   */
  children?: React.ReactNode;
}


interface ThoughtChainProps {
  /**
   * @desc 思维节点集合
   * @descEN chain items
   */
  items?: ThoughtChainItem[];

  /**
   * @desc 思维链标题
   * @descEN Thought chain title
   */
  title?: React.ReactNode;

  /**
   * @desc 思维链标题扩展
   * @descEN Thought chain extra
   */
  extra?: React.ReactNode;

  /**
   * @desc 当前展开的节点
   * @descEN current expanded keys
   */
  expandedKeys?: string[];

  /**
   * @desc 展开节点变化回调
   * @descEN callback when expanded keys change
   */
  onExpand?: (expandedKeys: string[]) => void;
}

Example Usage

Basic Use

import { ThoughtChain } from '@ant-design/x';
import type { ThoughtChainProps } from '@ant-design/x';

const items: ThoughtChainProps['items'] = [
  {
    key: 'prompt_engineering',
    title: '提示语工程',
    description: '分析用户输入并生成模型可理解的提示语',
    icon: '🚀',
    children: (
      <pre>
        POST /process-prompt HTTP/1.1{'\n'}
        Host: llm-api.example.com{'\n'}
        Content-Type: application/json{'\n'}
        {'\n'}
        {'{'}{'\n'}
        {"  "}input: "查询今天的天气",{'\n'}
        {"  "}processedPrompt: "What is the weather like today?"{'\n'}
        {'}'}
      </pre>
    ),
  },
  {
    key: 'model_analysis',
    title: '模型分析',
    description: '模型处理提示语并准备进行下一步操作',
    icon: '🔍',
    children: (
      <pre>
        POST /analyze HTTP/1.1{'\n'}
        Host: llm-api.example.com{'\n'}
        Content-Type: application/json{'\n'}
        {'\n'}
        {'{'}{'\n'}
        {"  "}prompt: "What is the weather like today?",{'\n'}
        {"  "}nextStep: "third_party_api_call"{'\n'}
        {'}'}
      </pre>
    ),
  },
  {
    key: 'third_party_api_call',
    title: '第三方API调用',
    description: '调用外部天气API获取最新数据',
    icon: '🌦',
    children: (
      <pre>
        POST /weather HTTP/1.1{'\n'}
        Host: api.moji.com{'\n'}
        Content-Type: application/json{'\n'}
        {'\n'}
        {'{'}{'\n'}
        {"  "}location: "Beijing",{'\n'}
        {"  "}date: "2024-08-15"{'\n'}
        {'}'}
      </pre>
    ),
  },
  {
    key: 'model_response_processing',
    title: '模型响应处理',
    description: '处理API响应并整理为用户可读格式',
    icon: '📝',
    children: (
      <pre>
        HTTP/1.1 200 OK{'\n'}
        Content-Type: application/json{'\n'}
        {'\n'}
        {'{'}{'\n'}
        {"  "}temperature: "30°C",{'\n'}
        {"  "}condition: "Sunny",{'\n'}
        {"  "}humidity: "50%"{'\n'}
        {'}'}
      </pre>
    ),
  },
  {
    key: 'user_output',
    title: '用户输出',
    description: '将格式化的天气信息返回给用户',
    icon: '📤',
    children: (
      <pre>
        POST /send-response HTTP/1.1{'\n'}
        Host: llm-api.example.com{'\n'}
        Content-Type: application/json{'\n'}
        {'\n'}
        {'{'}{'\n'}
        {"  "}finalOutput: "北京的天气是30°C，晴朗。",{'\n'}
        {"  "}userId: "12345"{'\n'}
        {'}'}
      </pre>
    ),
  },
];

export default () => <ThoughtChain items={items} />;

Benefits

开发者用户

• 增强调试功能: 开发者可以轻松在本地调试和跟踪复杂 Agent System 中的调用链。
• 可扩展性: 思维链组件可以在类似的链式场景中使用。

终端用户

• 透明度: 终端用户可以更清晰地了解 AI 决策的过程，从而增加对系统的信任。
• 提高生产力: 通过提供模型调用链的清晰概览，终端开发者用户可以更快地识别和解决问题。

Future Considerations

• 与其他组件的集成: 未来版本的思维链组件可以与其他 Ant Design X 组件集成，例如 Chat、Bubble 组件，以供 Agent Platform 使用。

[afc163]

感觉类似 Steps 组件，给一个 current={number} + status="success" | "pending" 就够了。

[YumoImer]

所以我的意思不需要给每个节点单独维护 status 状态。

个人认为还是需要，如 Basic Use 中的查天气的例子，调用墨迹天气的三方API可能失败，但这不一定会阻塞链的执行。如：最终大模型给用户回复 “”我没有查询到北京的天气” 或在调墨迹天气失败后调用其他三方工具查询最终成功返回。

[afc163]

那这个节点状态也不应该是失败？而是内部 try catch 后跳过，进入下一个流程。

[YumoImer]

想了下，貌似也有道理，明天拉出来大家一起讨论下

[ONLY-yours]

这种复杂起来就会变成 Coze 那种 可视化的拖拽

[YumoImer]

已讨论完结，结论：由组件统一控制。

Progress 这里昨天有两种意见：

• item 各自控制
• 由组件统一控制

优势：

• 各自控制自由度更高，每个链节点都可以有状态
• 整体控制更符合这个组件的实际使用场景，链调用一定是一步一步的，最后一个节点一定是当前执行节点（前面的节点也就是执行完毕，无论失败 or 成功），另外和 Steps 组件在使用场景的区别是（Steps 更多是静态的流程、Chain 是动态的流程）

[ONLY-yours]

Children 直接 ReactNode 就好了

[ONLY-yours]

我觉得没必要把 children 的格式和交互定下来，没有的话不需要传都行

[YumoImer]

我觉得也是，所以这块还发了个投票😄

[zombieJ]

• 不用拓展 StepItem，这个定义可以自己写。免得到时候有很多无用的 API 出来。
• 换成 expandedKeys，antd 里过去 active 和 expanded 没有区分的特别清。
• onChange -> onExpand

[ONLY-yours]

这一列的 Step 我理解关键，children 的话就可以让用户拓宽

[zombieJ]

• status 看起来放 items 上比较好
• onChange 是不是不用了？

[afc163]

[afc163]

横向是主流用法，省空间。

[YumoImer]

这个每一步的详情的交互是啥样的呀，可以截图下嘛，我瞅瞅

[afc163]

mutable.ai 可以去试试

[afc163]

还有蚂小财的思维链效果，是个轮播动画。

[YumoImer]