[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]

👌🏻

[ATRAVELERHABA]

你好我有个问题，我现在写了一个中间层用于处理每一帧后端返回的流式数据；中间层处理Think的逻辑是当返回类型为“deepThink”帧数据时，我渲染<Think>${帧数据内容} ，后续类型为“deepThink”帧数据正常继续渲染，直到type从‘deepThink’转化为正文内容时，加上结束标签，但是渲染的情况是第一帧type为“deepThink”的数据内容正常渲染，后续流就算接收到了也处理了，也不会立马呈现打字机效果的渲染，而是突然一堆一堆的渲染出来，这种扎堆渲染情况会在deepThink流结束后渲染正文部分结束，正文部分依旧正常以打字机效果渲染。请问为什么会出现这种情况，是我这种写法有问题吗？

[netSharks]

为什么思考过程里带有md语法内容的时候，整体对话流程就会乱掉，把回答也放到思考过程中，或者是把带有md格式的思考过程放到回答里