Chatière

GitHub à
Afficher un effet d'animation de miroitement de texte.

Utilisation

Le composant ChatShimmer rend un élément avec un gradient de miroitement animé sur le texte, couramment utilisé pour indiquer les états de streaming ou de chargement dans les interfaces de chat.

Ce composant est automatiquement utilisé par les composants ChatTool et ChatReasoning lors de la diffusion en streaming.
L'animation est automatiquement désactivée lorsque l'utilisateur préfère un mouvement réduit, le texte est affiché sous forme de texte statique en sourdine à la place.

Texte écrit

Utilisez le prop text pour définir le texte de miroitement.

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

Durée

Utilisez le prop duration pour contrôler la vitesse d'animation en quelques secondes.

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

Répartition

Utilisez la prop spread pour contrôler la largeur de la mise en lumière. La propagation réelle est calculée comme text.length * spread en pixels.

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

exemples

Consultez la page d'aperçu Chat pour les instructions d'installation, la configuration du serveur et les exemples d'utilisation.

api

Props

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
{}

thème

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

No recent changes

ChatReasoning

Display a collapsible AI reasoning or thinking process.

ChatTool

Display a collapsible AI tool invocation status.