[RFC] ThoughtChain 思维链

[kimteayon]

Summary

思维链组件用于可视化和追踪 Agent 任务执行的步骤。

Motivation

推出两个模式简单模式和任务模式：
1、简单模式状态+文本

2、任务模式运行展示运行的流程(需要支持自身嵌套)

Detailed Design

ThoughtChain.Item/

interface ThoughtChainItemProps {
  title: React.ReactNode,
  icon: React.ReactNode,
  status: 'loading'|'aborted'|'success'|'error'
  variant: 'solid' | 'outlined' | 'text'
  onClick: ()=>void;
}

variant: 'text' & status: 'loading'

variant: 'text' & status: 'success'

variant: 'solid' & icon: '自定义'

variant: 'outlined' & icon: '自定义'

ThoughtChain

export interface ThoughtChainProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {

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

 contentRender: (item)=> React.ReactNode;

/**
   * @desc 是否可折叠
   * @descEN Whether collapsible
*/

collapsible:  Collapsible;

~~  size?: ConfigProviderProps['componentSize']; ~~

  /**
   * @desc 语义化结构 style
   * @descEN Semantic structure styles
   */
  styles?: {
       root?:  React.CSSProperties>,
       item?:  React.CSSProperties>
   };

  /**
   * @desc 语义化结构 className
   * @descEN Semantic structure class names
   */
  classNames?: {
       root?: string,
       item?:  string
   };

  /**
   * @desc 自定义前缀
   * @descEN Prefix
   */
  prefixCls?: string;
}

ThoughtChainItem

 /**
   * @desc 线条配置
   * @descEN line config
 */
line?: boolean | {
     width?: number;
     color?: string;
},
subItems:ThoughtChainItem[]

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

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

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

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

  /**
   * @desc 思维节点额外内容
   * @descEN Thought chain item extra content
   */
  extra?: React.ReactNode;

  /**
   * @desc 思维节点内容
   * @descEN Thought chain item content
   */
  content?: React.ReactNode;

  /**
   * @desc 思维节点脚注
   * @descEN Thought chain item footer
   */
  footer?: React.ReactNode;

  /**
   * @desc 思维节点状态
   * @descEN Thought chain item status
   */
  status?: `${THOUGHT_CHAIN_ITEM_STATUS}`;

Example Usage

<ThoughtChain.Item  status={'loading'}   title='全网搜工具调用中' icon={<>工具icon</>}  />

const items = [{
collapsible: true,
title: '创建计划'
}]

<ThoughtChain  items={items}/>

[afc163]

6666 👍🏻👍🏻👍🏻

终于有一版好的设计了。