Chatreasoning Bearbeiten

KollapsfähigGitHub
Zeigen Sie eine zusammenklappbare KI Argumentation oder Denkprozess.

Bearbeiten

Die ChatReasoning-Komponente rendert einen zusammenklappbaren Block, der KI-Argumentation oder Denkinhalte anzeigt. Es öffnet sich automatisch während des Streamings und schließt sich danach automatisch.

<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>
  <UChatReasoning :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>
  <UChatReasoning :text="text" :streaming="streaming" class="w-60" />
</template>
Der Body-Inhalt verwendet das useScrollShadow composable, um beim Überlaufen Fade-Schatten anzuwenden.

Text Übersetzung

Verwenden Sie die prop text, um den logischen Inhalt festzulegen. Der Text wird innerhalb des zusammenklappbaren Körpers angezeigt.

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

Streaming (englisch)

Verwenden Sie die prop streaming, um aktives Denken anzuzeigen. Die Komponente öffnet sich automatisch, wenn das Streaming beginnt, und schließt sich automatisch, wenn es endet.

The user is asking about Vue components...
<template>
  <UChatReasoning streaming text="The user is asking about Vue components..." />
</template>
Verwenden Sie das Dienstprogramm isPartStreaming von @nuxt/ui/utils/ai, um zu bestimmen, ob ein Teil gerade gestreamt wird.

Shimmer Bearbeiten

Beim Streamen verwendet das Trigger-Label die Komponente ChatShimmer. Verwenden Sie die shimmer-Prop, um die duration und spread anzupassen.

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

Icon (englisch)

Verwenden Sie die icon-Prop, um eine Icon-Komponente neben dem Auslöser anzuzeigen.

<template>
  <UChatReasoning icon="i-lucide-brain" text="The user is asking about Vue components..." />
</template>

Chevron Bearbeiten

Verwenden Sie die chevron-Prop, um die Position des Chevron-Symbols zu ändern.

Wenn chevron auf leading mit einem icon gesetzt ist, wechselt das Symbol mit dem Chevron auf Hover und wenn es geöffnet ist.
<template>
  <UChatReasoning
    chevron="leading"
    icon="i-lucide-brain"
    text="The user is asking about Vue components..."
  />
</template>

Chevron Icon (englisch)

Verwenden Sie die chevron-icon-Prop, um den chevron Icon. Defaults auf i-lucide-chevron-down.

<template>
  <UChatReasoning
    chevron-icon="i-lucide-arrow-down"
    text="The user is asking about Vue components..."
  />
</template>
Sie können dieses Symbol global in Ihrem app.config.ts unter ui.icons.chevronDown Schlüssel anpassen.
Sie können dieses Symbol global in Ihrem vite.config.ts unter ui.icons.chevronDown Schlüssel anpassen.

Examples Bearbeiten

Auf der Übersichtsseite Chat finden Sie Installationsanweisungen, Server-Setup und Anwendungsbeispiele.

API Bearbeiten

Props Bearbeiten

Prop Default Type
text
string

The reasoning text content to display.

streaming
false
boolean

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.

icon
any

The icon displayed next to the trigger.

chevron
'trailing'
"leading" | "trailing"

The position of the chevron icon.

chevronIcon
appConfig.ui.icons.chevronDown
any

The icon displayed as the chevron.

autoCloseDelay
500
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.

disabled
boolean

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

open
undefined
boolean

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

defaultOpen
boolean

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

unmountOnHide
false
boolean

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

ui
{ root?: SlotClass; trigger?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; chevronIcon?: SlotClass; label?: SlotClass; trailingIcon?: SlotClass; content?: SlotClass; body?: SlotClass; }

Slots Bearbeiten

Slot Type
default
{ open: boolean; }

Emits (nicht)

Event Type
update:open
[value: boolean]

Theme Bearbeiten

app.config.ts
export default defineAppConfig({
  ui: {
    chatReasoning: {
      slots: {
        root: '',
        trigger: [
          'group flex w-full items-center gap-1.5 text-muted text-sm disabled:cursor-default disabled:hover:text-muted hover:text-default rounded-sm outline-primary/25 focus-visible:outline-3 min-w-0',
          'transition-colors'
        ],
        leading: 'relative size-4 shrink-0',
        leadingIcon: 'size-4 shrink-0',
        chevronIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200 ease-out motion-reduce:transition-none',
        label: 'truncate',
        trailingIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200 ease-out motion-reduce:transition-none',
        content: 'data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden rounded-sm outline-primary/25 has-focus-visible:outline-3',
        body: 'max-h-[200px] pt-2 overflow-y-auto text-sm text-dimmed whitespace-pre-wrap focus:outline-none'
      },
      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 ease-out'
            ],
            chevronIcon: [
              'absolute inset-0 opacity-0 group-hover:opacity-100 group-data-[state=open]:opacity-100',
              'transition-[rotate,opacity] duration-200 ease-out motion-reduce:transition-none'
            ]
          }
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        chatReasoning: {
          slots: {
            root: '',
            trigger: [
              'group flex w-full items-center gap-1.5 text-muted text-sm disabled:cursor-default disabled:hover:text-muted hover:text-default rounded-sm outline-primary/25 focus-visible:outline-3 min-w-0',
              'transition-colors'
            ],
            leading: 'relative size-4 shrink-0',
            leadingIcon: 'size-4 shrink-0',
            chevronIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200 ease-out motion-reduce:transition-none',
            label: 'truncate',
            trailingIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200 ease-out motion-reduce:transition-none',
            content: 'data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden rounded-sm outline-primary/25 has-focus-visible:outline-3',
            body: 'max-h-[200px] pt-2 overflow-y-auto text-sm text-dimmed whitespace-pre-wrap focus:outline-none'
          },
          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 ease-out'
                ],
                chevronIcon: [
                  'absolute inset-0 opacity-0 group-hover:opacity-100 group-data-[state=open]:opacity-100',
                  'transition-[rotate,opacity] duration-200 ease-out motion-reduce:transition-none'
                ]
              }
            }
          }
        }
      }
    })
  ]
})

Changelog (englisch)

No recent changes

ChatPromptSubmit

A Button for submitting chat prompts with automatic status handling.

ChatShimmer

Display a text shimmer animation effect.