Chateado

GitHub también
Mostrar un efecto de animación de brillo de texto.

xph0000xUso

El componente ChatShimmer representa un elemento con un gradiente de brillo animado sobre el texto, comúnmente utilizado para indicar los estados de transmisión o carga en las interfaces de chat.

Este componente es utilizado automáticamente por los componentes ChatTool y ChatReasoning durante la transmisión.
La animación se deshabilita automáticamente cuando el usuario prefiere el movimiento reducido, el texto se muestra como texto estático silenciado en su lugar.

Text (Edición española)

Utilice el prop text para establecer el texto de brillo.

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

Duracion

Utilice el prop duration para controlar la velocidad de la animación en segundos.

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

Difusión

Utilice el prop spread para controlar el ancho de la luz de brillo. La propagación real se calcula como text.length * spread en píxeles.

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

Ejemplos

Consulte la página de descripción general de Chat para obtener instrucciones de instalación, configuración del servidor y ejemplos de uso.

API (Edición española)

Props (Edición española)

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

Temas

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 (Edición española)

No recent changes

ChatReasoning

Display a collapsible AI reasoning or thinking process.

ChatTool

Display a collapsible AI tool invocation status.