ChatShimmer

GitHub
Geef een animatie-effect met tekstglans weer.

Gebruik

De ChatShimmer-component geeft een element weer met een geanimeerd glansverloop over tekst, dat vaak wordt gebruikt om streaming- of laadtoestanden in chatinterfaces aan te geven.

Dit onderdeel wordt automatisch gebruikt door de ChatTool en ChatReasoning componenten tijdens het streamen.
De animatie wordt automatisch uitgeschakeld wanneer de gebruiker de voorkeur geeft aan verminderde beweging, de tekst wordt weergegeven als statische gedempte tekst.

Tekst

Gebruik de text prop om de shimmer tekst in te stellen.

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

Duur

Gebruik de duration prop om de animatiesnelheid in seconden te regelen.

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

Verspreiden

Gebruik de spread prop om de breedte van de shimmer highlight te bepalen. De werkelijke spreiding wordt berekend als text.length * spread in pixels.

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

Voorbeelden

Kijk op de Chat overzichtspagina voor installatie instructies, server setup en gebruiksvoorbeelden.

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

Thema

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'
        }
      }
    })
  ]
})

Wijzigingsgelog

No recent changes

ChatReasoning

Display a collapsible AI reasoning or thinking process.

ChatTool

Display a collapsible AI tool invocation status.