Chatschimmer

GitHub
Zeigt einen Text Shimmer Animationseffekt an.

Bearbeiten

Die ChatShimmer-Komponente rendert ein Element mit einem animierten Schimmerverlauf über Text, der häufig verwendet wird, um Streaming-oder Ladezustände in Chat-Schnittstellen anzuzeigen.

Diese Komponente wird automatisch von den Komponenten ChatTool und ChatReasoning beim Streaming verwendet.
Die Animation wird automatisch deaktiviert, wenn der Benutzer eine reduzierte Bewegung bevorzugt, der Text wird stattdessen als statischer stummgeschalteter Text angezeigt.

Text Übersetzung

Verwenden Sie die text-Prop, um den Schimmertext festzulegen.

Thinking...
<template>
  <UChatShimmer text="Thinking..." />
</template>

Duration Übersetzung

Verwenden Sie die duration-Prop, um die Animationsgeschwindigkeit in Sekunden zu steuern.

Thinking...
<template>
  <UChatShimmer text="Thinking..." :duration="4" />
</template>

Spread (nicht)

Verwenden Sie die spread prop, um die Breite des Schimmer-Highlights zu steuern. Die tatsächliche Ausbreitung wird als text.length * spread in Pixel berechnet.

Thinking...
<template>
  <UChatShimmer text="Thinking..." :spread="5" />
</template>

Examples (Beispiele)

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

API (englisch)

Props Bearbeiten

Prop Default Type
as
'span'
any

The element or component this component should render as.

text
string

The text to display with the shimmer effect.

duration
2
number

The duration of the shimmer animation in seconds.

spread
2
number

The spread multiplier for the shimmer highlight. The actual spread is computed as text.length * spread in pixels.

ui
{}

Theme Bearbeiten

app.config.ts
export default defineAppConfig({
  ui: {
    chatShimmer: {
      base: 'text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-text-highlighted),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-text-muted),var(--ui-text-muted))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted'
    }
  }
})
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: {
        chatShimmer: {
          base: 'text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-text-highlighted),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-text-muted),var(--ui-text-muted))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted'
        }
      }
    })
  ]
})

Changelog (englisch)

No recent changes

ChatReasoning

Display a collapsible AI reasoning or thinking process.

ChatTool

Display a collapsible AI tool invocation status.