AI
StreamingText
Texto com caret pulsante enquanto novos tokens chegam.
StreamingText é o renderer mais simples para resposta em streaming. Recebe text + streaming, mostra o caret só enquanto streaming é true e o respeita prefers-reduced-motion. Combine com useStreamingText quando quiser simular o efeito a partir de um texto já completo (testes, demos, animações de boas-vindas).
'use client';
import { StreamingText, useStreamingText } from '@uranus-workspace/ai';
import { useEffect, useState } from 'react';
const FULL = 'Construindo resposta token a token… o caret pisca enquanto o stream chega.';
export default function StreamingTextDefault() {
const [target, setTarget] = useState('');
useEffect(() => {
const t = setTimeout(() => setTarget(FULL), 200);
return () => clearTimeout(t);
}, []);
const text = useStreamingText(target);
const streaming = text.length < target.length;
return (
<div className="mx-auto w-full max-w-md rounded-md border bg-muted/20 px-4 py-3 text-sm">
<StreamingText text={text} streaming={streaming} />
</div>
);
}
Uso
import { StreamingText, useStreamingText } from '@uranus-workspace/ai';
const text = useStreamingText(targetText, { charsPerTick: 6 });
const streaming = text.length < targetText.length;
<StreamingText text={text} streaming={streaming} />Quando usar
- Direto, quando você já tem mensagens parciais vindas do AI SDK (
message.textemessage.streamingdouseUranusChat). - Via
useStreamingText, quando o seu provider entrega o texto inteiro em uma só chamada e você quer manter a sensação de streaming.
Acessibilidade
O caret tem aria-hidden; quem usa leitor de tela percebe a mudança via o texto em si. Em prefers-reduced-motion: reduce, o caret estabiliza visível.