[RFC] Think 思考过程

[hy993658052]

Summary

对话时展示大模型的思考过程。

Motivation

在deepseek兴起后，在对话中展示大模型思考过程成为一个高频场景，目前组件库没有覆盖到这一场景，所以需要增加Think组件，展示思考过程。

Detailed Design

API 设计

interface ThinkProps {
  prefixCls?: string;
  style?: React.CSSProperties;
  styles?: Record<string, React.CSSProperties>;
  className?: string;
  classNames?: Record<string, string>;
  children?: React.ReactNode; // 内容
  title?: React.ReactNode; // 状态文本
  icon?: React.ReactNode; // 状态图标
  loading?: boolean | React.ReactNode; // 加载中
  defaultExpanded?: boolean; // 默认是否展开
  expanded?: boolean; // 是否展开
  onExpand?: (expand: boolean) => void; // 展开事件
}

Example Usage

基础使用

import { Think } from '@ant-design/x';
import React from 'react';

const App = () => {
  return (
    <>
      <Think title={'deep thinking'}>This is deep thinking content.</Think>
    </>
  );
};

export default App;

控制状态

import { MutedOutlined, SyncOutlined } from '@ant-design/icons';
import { Think } from '@ant-design/x';
import { Button } from 'antd';
import React from 'react';

const App = () => {
  const [title, setTitle] = React.useState('Complete thinking');
  const [loading, setLoading] = React.useState(false);

  const handleClick = () => {
    setLoading(true);
    setTitle('deep thinking');

    setTimeout(() => {
      setLoading(false);
      setTitle('Complete thinking');
    }, 2000);
  };
  return (
    <>
      <Button onClick={handleClick}>Run</Button>
      <Think title={title} loading={loading}>
        This is deep thinking content.
      </Think>
      <Think
        title={title}
        loading={loading ? <SyncOutlined /> : false}
        icon={<MutedOutlined />}
      >
        Customize status icon.
      </Think>
    </>
  );
};

export default App;

控制折叠

import { Think } from '@ant-design/x';
import { Button } from 'antd';
import React, { useState } from 'react';

const App = () => {
  const [value, setValue] = useState(true);
  return (
    <>
      <Button onClick={() => setValue(!value)}>Change expand</Button>
      <Think
        title={'deep thinking'}
        expanded={value}
        onExpand={(value) => {
          setValue(value);
        }}
      >
        This is deep thinking content.
      </Think>
    </>
  );
};

export default App;

[afc163]

不要 rootClassName，用 classNames.root

[afc163]

expand => expanded
defaultExpanded => defaultExpanded
onExpandChange => onExpand

[afc163]

loadingIcon 合并到 loading 属性里去。

  loading?: boolean | { icon: ReactNode }; // 加载中

[afc163]

statusIcon 和 loadingIcon 是否是重复的？

[hy993658052]

考虑到有人可能只是想更换下常态下的 icon ，还是要支持下 loading 状态的 icon 。如果他想自己控制 icon 展示，那不使用 loading 就可以了

[kimteayon]

可以在title里配置icon

[afc163]

不用 content，用 children 比较优雅。

[afc163]

statusText 和 statusIcon 是哪个位置。

最好贴个截图说明一下。

[afc163]

statusText => title
statusIcon => icon

这样感觉更简洁？

[afc163]

计时要实现么？

[hy993658052]

看了几个产品，时间都是在标题内展示的，比如deepseek的

而且计时的逻辑放到组件里有点奇怪，感觉让用户需要的时候自己去计时好一点

[afc163]

👌🏻