Think

Display the deep thinking process of the large model.

When to use

• Used to display the deep thinking process of the large model during conversations.

Examples

Basic usage

deep thinking

This is deep thinking content.

Basic usage

Basic usage.

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

defineRender(() => (
  <Think title="deep thinking">This is deep thinking content.</Think>
));
</script>

Hide source

Set status

Complete thinking

This is deep thinking content.

Complete thinking

Customize status icon.

Set status

Customize status text and icons.

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

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);
};

defineRender(() => (
  <>
    <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={<ChromeOutlined />}
    >
      Customize status icon.
    </Think>
    <style>{`
      @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
    `}</style>
  </>
));
</script>

Hide source

Expanded state

deep thinking

This is deep thinking content.

Expanded state

Control expand/collapse.

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

const value = ref(true);

defineRender(() => (
  <>
    <div>
      <Button onClick={() => (value.value = !value.value)}>Change expand</Button>
    </div>
    <br />
    <Think
      title="deep thinking"
      expanded={value.value}
      onExpand={(val: boolean) => {
        value.value = val;
      }}
    >
      This is deep thinking content.
    </Think>
  </>
));
</script>

Hide source

Destroy on collapse

Deep Thinking

This content will be removed from DOM when collapsed and destroyOnHidden is true.

Destroy on collapse

Whether to destroy content when collapsed.

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

const expanded = ref(true);
const destroyOnHidden = ref(true);

defineRender(() => (
  <Space direction="vertical" size={16}>
    <Space>
      <Button onClick={() => (expanded.value = !expanded.value)}>
        {expanded.value ? 'Collapse' : 'Expand'}
      </Button>
      <Switch
        checked={destroyOnHidden.value}
        onChange={(checked: boolean) => {
          destroyOnHidden.value = checked;
        }}
        checkedChildren="destroyOnHidden"
        unCheckedChildren="keep"
      />
    </Space>
    <Think
      title="Deep Thinking"
      expanded={expanded.value}
      onExpand={(val: boolean) => {
        expanded.value = val;
      }}
      destroyOnHidden={destroyOnHidden.value}
    >
      This content will be removed from DOM when collapsed and destroyOnHidden is true.
    </Think>
  </Space>
));
</script>

Hide source

API

ThinkProps

Prop	Description	Type	Default	Version
classNames	CSS class names	Record\<SemanticDOM, string\>	-	-
styles	Style	Record\<SemanticDOM, CSSProperties\>	-	-
title	Status Text	`VNode	string`	-
icon	Status Icon	VNode	-	-
loading	Loading	`boolean	VNode`	false
defaultExpanded	Default Expand	boolean	true	-
expanded	Whether Expanded	boolean	-	-
onExpand	Expand Event	(expand: boolean) => void	-	-
blink	Blink Mode	boolean	-	-
destroyOnHidden	Whether to Destroy Content Node When Hidden	boolean	true	-

Slots

Name	Description
default	Thinking Content
title	Custom Status Text
icon	Custom Status Icon

Semantic DOM

deep thinking

This is deep thinking content.

• root

  根节点

• status

  状态区

• content

  内容区

Design Token

Token	Description	Type	Default
colorTextBlinkDefault	Default Typing Animation Color	string	colorTextDescription
colorTextBlink	Typing animation color	string	colorTextBase