Thinking Component 🍓

Introduction

Thinking is a component used to display thinking states, supporting state management, content expand/collapse, and custom styling. Through visual feedback of different states (start/thinking/end/error), it helps users intuitively understand AI's thinking process. The component has built-in transition animations and provides flexible extension slots, suitable for use in intelligent conversations, data analysis, and other scenarios.

💌 Info

This component can be used together with components like BubbleList to achieve richer interactive experiences.

Code Examples

Basic Usage

Basic Usage

Most basic integration method

<template>
  <Thinking />
</template>

Content Expand/Collapse

Welcome to Element-Plus-X

Content Attribute

Content display can be set through the content attribute

<script setup lang="ts"></script>

<template>
  <div>
    <Thinking content="Welcome to Element-Plus-X" />
  </div>
</template>

<style scoped lang="less"></style>

State Management

Welcome to Element-Plus-X

v-model Attribute Controlled Component

Through the v-model attribute, we can set the default state.

<script setup lang="ts">
const senderValue = ref(true);
</script>

<template>
  <div>
    <Thinking v-model="senderValue" content="Welcome to Element-Plus-X" />
  </div>
</template>

<style scoped lang="less"></style>

State Styles

Welcome to Element-Plus-X

Welcome to Element-Plus-X

Welcome to Element-Plus-X

思考过程中出现错误

Status Attribute

Set the component state through the status attribute. There are four default states: start, thinking, end, error

<script setup lang="ts">
const senderValue = ref(false);
</script>

<template>
  <div
    style="
      display: flex;
      gap: 10px;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
    "
  >
    <div>
      <Thinking
        v-model="senderValue"
        content="Welcome to Element-Plus-X"
        status="start"
      />
    </div>

    <div>
      <Thinking
        v-model="senderValue"
        content="Welcome to Element-Plus-X"
        status="thinking"
      />
    </div>

    <div>
      <Thinking
        v-model="senderValue"
        content="Welcome to Element-Plus-X"
        status="end"
      />
    </div>

    <div>
      <Thinking
        v-model="senderValue"
        content="Welcome to Element-Plus-X"
        status="error"
      />
    </div>
  </div>
</template>

<style scoped lang="less"></style>

Auto Collapse

thinking end

Welcome to Element-Plus-X

AutoCollapse Attribute

Auto collapse attribute. When the component status state changes to end, it automatically collapses. This attribute defaults to false.

<script setup lang="ts">
import type { ThinkingStatus } from 'vue-element-plus-x/types/Thinking';

const statusValue = ref<ThinkingStatus>('thinking');
</script>

<template>
  <el-radio-group v-model="statusValue" style="margin-bottom: 12px">
    <el-radio-button value="thinking">
      thinking
    </el-radio-button>
    <el-radio-button value="end">
      end
    </el-radio-button>
  </el-radio-group>

  <Thinking
    :status="statusValue"
    auto-collapse
    content="Welcome to Element-Plus-X"
    button-width="250px"
    max-width="100%"
  />
</template>

Disabled State

Welcome to Element-Plus-X

Welcome to Element-Plus-X

Welcome to Element-Plus-X

思考过程中出现错误

Disabled Attribute

Disable operations

<script setup lang="ts">
const senderValue = ref(false);
</script>

<template>
  <div
    style="
      display: flex;
      gap: 10px;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
    "
  >
    <div>
      <Thinking
        v-model="senderValue"
        disabled
        content="Welcome to Element-Plus-X"
        status="start"
      />
    </div>

    <div>
      <Thinking
        v-model="senderValue"
        disabled
        content="Welcome to Element-Plus-X"
        status="thinking"
      />
    </div>

    <div>
      <Thinking
        v-model="senderValue"
        disabled
        content="Welcome to Element-Plus-X"
        status="end"
      />
    </div>

    <div>
      <Thinking
        v-model="senderValue"
        disabled
        content="Welcome to Element-Plus-X"
        status="error"
      />
    </div>
  </div>
</template>

Width Customization

Welcome to Element-Plus-X

ButtonWidth and MaxWidth

The buttonWidth and maxWidth attributes can set the maximum width of the expand/collapse button and expanded content. Both are string type, meaning you can use units like px, %, vw, vh, etc.

<template>
  <Thinking
    button-width="250px"
    max-width="100%"
    content="Welcome to Element-Plus-X"
  />
</template>

Content Color Style Customization

Welcome to Element-Plus-X 🍉🍉🍉

Color and BackgroundColor

Quickly set the background color and font color of the content area through color and backgroundColor. Type is string, meaning you can use CSS color values.

<template>
  <Thinking
    content="Welcome to Element-Plus-X 🍉🍉🍉"
    color="#fff"
    background-color="linear-gradient(to bottom right, rgba(190, 126, 246, 1), rgba(95, 13, 245, 1), rgba(186, 74, 227, 1))"
  />
</template>

Slot Customization

start thinking end error

: Welcome to Element-Plus-X

Slot Usage

The component provides multiple custom slots for developers to customize component styles

• #status-icon: Status icon slot
• #label: Status text slot
• #arrow: Arrow slot
• #content: Content slot
• #error: Error message slot

<script setup lang="ts">
const statusValue = ref('start');
</script>

<template>
  <el-radio-group v-model="statusValue" style="margin-bottom: 12px">
    <el-radio-button value="start">
      start
    </el-radio-button>
    <el-radio-button value="thinking">
      thinking
    </el-radio-button>
    <el-radio-button value="end">
      end
    </el-radio-button>
    <el-radio-button value="error">
      error
    </el-radio-button>
  </el-radio-group>

  <Thinking
    :status="statusValue"
    content="Welcome to Element-Plus-X"
    button-width="250px"
    max-width="100%"
  >
    <template #status-icon="{ status }">
      <span v-if="status === 'start'">😄</span>
      <span v-else-if="status === 'error'">😭</span>
      <span v-else-if="status === 'thinking'">🤔</span>
      <span v-else-if="status === 'end'">😊</span>
    </template>

    <template #label="{ status }">
      <span v-if="status === 'start'">Any instructions?</span>
      <span v-else-if="status === 'thinking'">Let me think</span>
      <span v-else-if="status === 'end'">Got it</span>
      <span v-else-if="status === 'error'">Can't figure it out</span>
    </template>

    <template #arrow>
      <span>👇</span>
    </template>

    <template #content="{ content, status }">
      <span>{{ status }}: {{ content }}</span>
    </template>

    <template #error>
      <span>Sorry, unable to solve your problem</span>
    </template>
  </Thinking>
</template>

Attributes

Attribute	Type	Required	Default	Description
content	String	No	''	Main content text to display, no typing effect, determined by interface response
modelValue	Boolean	No	true	Expand state bound through v-model, default is expanded
status	ThinkingStatus	No	'start'	Component state: start (start) / thinking (thinking) / end (complete) / error (error)
autoCollapse	Boolean	No	false	Whether to automatically collapse content area when component state changes to end
disabled	Boolean	No	false	Whether to disable component interaction
buttonWidth	String	No	'160px'	Trigger button width
duration	String	No	'0.2s'	Transition animation duration
maxWidth	String	No	'500px'	Maximum width of content area
backgroundColor	String	No	'#fcfcfc'	Background color of content area
color	String	No	'var(--el-color-info)'	Content text color

Events

Event Name	Parameters	Type	Description
@change	{value:boolean,status:ThinkingStatus}	Function	Triggered when expand state or status changes

Slots

Slot Name	Parameters	Type	Description
#status-icon	{ status }	Slot	Custom status icon
#label	{ status }	Slot	Custom button text
#arrow	-	Slot	Custom arrow icon
#content	{ content }	Slot	Custom content area (non-error state)
#error	-	Slot	Custom error message content display

Features

1. Multi-state Management

   • Supports four states: start/thinking/end/error, automatically switches corresponding icons and text
   • Forces display of fixed error prompt in error state

2. Interactive Feedback

   • Smooth sliding animation when expanding/collapsing content area
   • Button click feedback supports custom transition effects

3. Style Customization

   • Controls visual properties such as size and color through CSS variables
   • Provides complete slot extension capabilities, supports custom icons and content

4. Smart Behavior

   • Automatically adjusts expand state when status changes
   • Maintains visual feedback but blocks interaction in disabled state