ThinkingText
Estado "a IA está trabalhando": frases em sequência com o gradiente de IA, no lugar de um spinner.
Playground
Buscando nos seus conteúdos…
Etapas
Tempo por etapa (ms)
<ThinkingText
steps={["Buscando nos seus conteúdos…", "Lendo o que você salvou…", "Montando a resposta…"]}
/>Quando usar
- ✓Entre o envio de uma pergunta e o primeiro pedaço da resposta
- ✓Processos de IA com etapas conhecidas (buscar, ler, montar)
Evite quando
- Carregamento que não é IA (salvar, buscar lista)→ Skeleton ou o estado de carregamento do próprio componente — o gradiente âmbar → roxo é só de IA
- A resposta já começou a chegar→ StreamingText
Variantes e props
stepsFrases na ordem do trabalho. A última fica até a resposta chegar. Padrão: ["Pensando…"].
intervalTempo em cada frase, em ms. Padrão 2400.
Estados
trabalhando (troca de frase)última etapa (fica parada)movimento reduzido (shimmer desligado)
Acessibilidade
- Papel
- status (aria-live polite)
- Teclado
- não interativo
- Cada troca de frase é anunciada; mantenha poucas etapas
- O shimmer respeita prefers-reduced-motion
Código
import
import { ThinkingText } from "@/components/ui/thinking-text";Fonte: src/components/ui/thinking-text.tsx · coisas.space (chat)
Relacionados: StreamingText