StreamingText

Mostra uma resposta de IA que chega em pedaços, revelando o texto de forma contínua; no fim, troca pela versão formatada.

Playground

Rajadas do servidor

Versão formatada no fim

{text === "" && loading ? (
  <ThinkingText />
) : (
  <StreamingText
    text={text}
    streaming={loading}
    onProgress={rolarParaOFim}
    renderFinal={() => <RespostaFormatada texto={text} />}
  />
)}

Quando usar

✓Resposta de IA recebida por streaming (SSE, fetch com reader)
✓Qualquer texto que chega em rajadas e fica estranho aparecendo aos saltos

Evite quando

A resposta ainda não começou a chegar→ ThinkingText
Texto que já existe inteiro (mensagem antiga, conteúdo estático)→ um <p> comum — o StreamingText montado com streaming=false já mostra tudo, mas não precisa dele
Efeito de digitação decorativo, sem IA trabalhando→ nada — movimento só com significado

Variantes e props

streaming

truefalse

true enquanto chega. Quando vira false, o texto termina de aparecer e só então chama renderFinal.

renderFinal

Versão formatada (cards, listas). Evita trocar o layout no meio da leitura.

onProgress

Use para acompanhar o fim da conversa — só role se a pessoa já estava lá embaixo.

Estados

revelando (data-streaming)concluído (renderFinal ou texto inteiro)movimento reduzido (mostra tudo de uma vez)

Acessibilidade

Papel: texto (p)
Teclado: não interativo

Coloque a lista de mensagens num container com aria-live="polite" se o leitor de tela precisar anunciar a resposta
Respeita prefers-reduced-motion

Código

import

import { StreamingText } from "@/components/ui/streaming-text";

Fonte: src/components/ui/streaming-text.tsx · coisas.space (chat)

Relacionados: ThinkingText