v2.5.3

ChatReasoning Soon

An expandable panel that shows the AI's internal reasoning steps.
GitHub
Demo
Nuxt UI
Collapsible avatarCollapsible

Usage

The ChatReasoning component renders a collapsible block that displays AI reasoning or thinking content. It auto-opens during streaming and auto-closes after.

<script setup lang="ts">
const streaming = ref(false)
const text = ref('')

async function simulateStreaming() {
  streaming.value = true
  text.value = ''

  const content =
    'The user is asking about Vue components. I should explain the Composition API pattern and how it relates to their question about reactive state management. Let me think about the best way to structure this response.\n\nFirst, I need to consider the key differences between the Options API and Composition API. The Composition API was introduced in Vue 3 to address limitations of the Options API when building large-scale applications.\n\nFor reactive state management specifically, the Composition API offers ref() for primitive values and reactive() for objects.'

  for (const char of content) {
    text.value += char
    await new Promise((resolve) => setTimeout(resolve, 10))
  }

  streaming.value = false
}

onMounted(simulateStreaming)
</script>

<template>
  <B24ChatReasoning :text="text" :streaming="streaming" class="w-60" />
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

const streaming = ref(false)
const text = ref('')

async function simulateStreaming() {
  streaming.value = true
  text.value = ''

  const content =
    'The user is asking about Vue components. I should explain the Composition API pattern and how it relates to their question about reactive state management. Let me think about the best way to structure this response.\n\nFirst, I need to consider the key differences between the Options API and Composition API. The Composition API was introduced in Vue 3 to address limitations of the Options API when building large-scale applications.\n\nFor reactive state management specifically, the Composition API offers ref() for primitive values and reactive() for objects.'

  for (const char of content) {
    text.value += char
    await new Promise((resolve) => setTimeout(resolve, 10))
  }

  streaming.value = false
}

onMounted(simulateStreaming)
</script>

<template>
  <B24ChatReasoning :text="text" :streaming="streaming" class="w-60" />
</template>
The body content uses the useScrollShadow composable to apply fade shadows when overflowing.

Text

Use the text prop to set the reasoning content. The text is displayed inside the collapsible body.

<template>
  <B24ChatReasoning text="The user is asking about Vue components..." />
</template>

Streaming

Use the streaming prop to indicate active reasoning. The component auto-opens when streaming starts and auto-closes when it ends.

The user is asking about Vue components...
<template>
  <B24ChatReasoning streaming text="The user is asking about Vue components..." />
</template>
Use the isPartStreaming utility from @bitrix24/b24ui-nuxt/utils/ai to determine if a reasoning part is currently being streamed.

Shimmer

When streaming, the trigger label uses the ChatShimmer component. Use the shimmer prop to customize its duration and spread.

The user is asking about Vue components...
<template>
  <B24ChatReasoning
    streaming
    text="The user is asking about Vue components..."
    :shimmer="{
      duration: 2,
      spread: 2
    }"
  />
</template>

Icon

Use the icon prop to display an Icon component next to the trigger.

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24ChatReasoning :icon="RocketIcon" text="The user is asking about Vue components..." />
</template>

Chevron

Use the chevron prop to change the position of the chevron icon.

When chevron is set to leading with an icon, the icon swaps with the chevron on hover and when open.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24ChatReasoning
    chevron="leading"
    :icon="RocketIcon"
    text="The user is asking about Vue components..."
  />
</template>

Chevron Icon

Use the chevron-icon prop to customize the chevron Icon.

<template>
  <B24ChatReasoning chevron-icon="function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    "aria-hidden": "true",
    "data-slot": "icon"
  }, [
    _createElementVNode("path", {
      fill: "currentColor",
      "fill-rule": "evenodd",
      d: "M8.292 16.885c.99.828 2.158 1.267 3.415 1.153.22.572.598 1.51 1.124 2.643 2.4-1.448 2.743-3.471 2.697-4.683q.354-.353.707-.771c2.881-3.423 3.28-10.079 2.492-10.738-.788-.66-7.295.888-10.176 4.311q-.357.425-.646.837c-1.207.17-3.134.863-4.144 3.459 1.207.318 2.195.526 2.799.643.107 1.25.743 2.32 1.732 3.146m1.718-2.041a2.056 2.056 0 0 0 2.89-.252 2.04 2.04 0 0 0-.252-2.882 2.056 2.056 0 0 0-2.89.252 2.04 2.04 0 0 0 .252 2.882m5.07-4.315a1.104 1.104 0 0 1-1.552.136 1.096 1.096 0 0 1-.136-1.548 1.104 1.104 0 0 1 1.552-.135c.466.39.527 1.083.136 1.547m-5.701 7.974a5.1 5.1 0 0 1-1.75-.933 4.9 4.9 0 0 1-1.267-1.484c-.874 2.119-1.251 3.831-.984 4.045s1.968-.438 4.001-1.628",
      "clip-rule": "evenodd"
    })
  ]))
}" text="The user is asking about Vue components..." />
</template>

Examples

Check the Chat overview page for installation instructions, server setup and usage examples.

API

Props

Prop Default Type
text string

The reasoning text content to display.

streamingfalseboolean

Whether the reasoning content is currently streaming.

duration number

The duration in seconds that the AI spent reasoning. If not provided, it will be calculated automatically based on streaming time.

iconIconComponent

The icon displayed next to the trigger.

chevron'trailing' "trailing" | "leading"

The position of the chevron icon.

chevronIconicons.chevronDownIconComponent

The icon displayed as the chevron.

autoCloseDelay500 number

The delay in milliseconds before auto-closing when streaming ends. Set to 0 to disable auto-close.

shimmer Partial<Omit<ChatShimmerProps, "text">>

Customize the ChatShimmer component when streaming.

disabledboolean

When true, prevents the user from interacting with the collapsible.

openundefinedboolean

The controlled open state of the collapsible. Can be binded with v-model.

defaultOpenboolean

The open state of the collapsible when it is initially rendered.
Use when you do not need to control its open state.

unmountOnHidefalseboolean

When true, the element will be unmounted on closed state.

b24ui { root?: ClassNameValue; trigger?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; chevronIcon?: ClassNameValue; label?: ClassNameValue; trailingIcon?: ClassNameValue; content?: ClassNameValue; body?: ClassNameValue; }

Slots

Slot Type
default{ open: boolean; }

Emits

Event Type
update:open[value: boolean]

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/chat-reasoning.ts
export default {
  slots: {
    root: '',
    trigger: 'group w-full min-w-0 flex items-center gap-1.5 text-muted text-sm disabled:cursor-default disabled:hover:text-muted hover:text-default focus-visible:outline-offset-2 focus-visible:outline-primary transition-colors',
    leading: 'relative size-5 shrink-0',
    leadingIcon: 'size-5 shrink-0',
    chevronIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
    label: 'truncate',
    trailingIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
    content: 'motion-safe:data-[state=open]:animate-[collapsible-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden',
    body: 'max-h-[200px] pt-2 overflow-y-auto text-sm text-dimmed whitespace-pre-wrap'
  },
  variants: {
    chevron: {
      leading: {
        leadingIcon: 'group-hover:opacity-0'
      },
      trailing: ''
    },
    alone: {
      false: {
        leadingIcon: 'absolute inset-0 group-data-[state=open]:opacity-0 transition-opacity duration-200',
        chevronIcon: 'absolute inset-0 opacity-0 group-hover:opacity-100 group-data-[state=open]:opacity-100 transition-[rotate,opacity] duration-200'
      }
    }
  }
}

ChatPromptSubmit

A chat prompt submission button with automatic status handling.

ChatShimmer

Apply a shimmer loading effect to text.