Think 思考过程

展示大模型深度思考过程。

何时使用

• 用于在对话时展示大模型的深度思考过程。

代码演示

基本

基础用法。

deep thinking

This is deep thinking content.

<script setup lang="tsx">
import { Think } from 'ant-design-x-vue';

defineOptions({ name: 'AXThinkBasic' });

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

defineRender(() => {
  return <Demo />;
});
</script>

隐藏源代码

设置状态

通过 loading / blink 展示思考中状态。

Complete thinking

This is deep thinking content.

Complete thinking

Customize status icon.

<script setup lang="tsx">
import { BulbOutlined, SyncOutlined } from '@ant-design/icons-vue';
import { Button } from 'ant-design-vue';
import { Think } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXThinkStatus' });

const title = ref('Complete thinking');
const loading = ref(false);

const handleClick = () => {
  loading.value = true;
  title.value = 'deep thinking';

  setTimeout(() => {
    loading.value = false;
    title.value = 'Complete thinking';
  }, 2000);
};

const Demo = () => {
  return (
    <>
      <div>
        <Button onClick={handleClick}>Run</Button>
      </div>
      <br />
      <Think title={title.value} blink loading={loading.value}>
        This is deep thinking content.
      </Think>
      <br />
      <Think
        title={title.value}
        loading={
          loading.value ? (
            <SyncOutlined style={{ fontSize: '12px', animation: 'spin 1s linear infinite' }} />
          ) : (
            false
          )
        }
        icon={<BulbOutlined />}
      >
        Customize status icon.
      </Think>
      <style>
        {`
          @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
          }
        `}
      </style>
    </>
  );
};

defineRender(() => {
  return <Demo />;
});
</script>

隐藏源代码

是否展开

受控展开。

deep thinking

This is deep thinking content.

<script setup lang="tsx">
import { Button } from 'ant-design-vue';
import { Think } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXThinkExpand' });

const value = ref(true);

const Demo = () => {
  return (
    <>
      <div>
        <Button onClick={() => (value.value = !value.value)}>Change expand</Button>
      </div>
      <br />
      <Think
        title="deep thinking"
        expanded={value.value}
        onExpand={(next) => {
          value.value = next;
        }}
      >
        This is deep thinking content.
      </Think>
    </>
  );
};

defineRender(() => {
  return <Demo />;
});
</script>

隐藏源代码

API

ThinkProps

属性	说明	类型	默认值	版本
classNames	样式类名	Record<'root' | 'status' | 'content', string>	-	-
styles	样式 style	Record<'root' | 'status' | 'content', CSSProperties>	-	-
title	状态文本	VNode | string | (() => VNode | string)	-	-
icon	状态图标	VNode | (() => VNode)	-	-
loading	加载中	boolean | VNode | (() => VNode)	false	-
defaultExpanded	默认是否展开	boolean	true	-
expanded	是否展开	boolean	-	-
onExpand	展开事件	(expand: boolean) => void	-	-
blink	闪动模式	boolean	-	-
destroyOnHidden	隐藏时是否销毁内容节点	boolean	true	-

Think Slots

插槽名	说明
default	思考内容
title	状态文本
icon	状态图标
loading	加载中图标

贡献者

贡献者

正在加载贡献者信息...