Reasoning
Mostra o raciocínio (pensamento) da IA de forma recolhível: aberto enquanto chega, depois resumido em "Pensou por Ns".
Playground
<Reasoning streaming={pensando}>
<ReasoningTrigger />
<ReasoningContent>{raciocinio}</ReasoningContent>
</Reasoning>Quando usar
- ✓O modelo devolve raciocínio ou chain-of-thought separado da resposta
- ✓Etapas de um agente que valem ser consultadas, mas não lidas sempre
Evite quando
- Só um aviso de que a IA está trabalhando, sem conteúdo→ ThinkingText
- A resposta em si→ StreamingText
- Conteúdo recolhível que não é de IA→ Collapsible ou Accordion
Variantes e props
streamingtruefalse
Abre sozinho ao começar e recolhe ~0,8s depois de terminar.
durationSegundos pensando. Sem ele, mede entre o início e o fim do streaming.
Estados
pensando (aberto, rótulo com shimmer de IA)concluído (recolhido, "Pensou por Ns")aberto pelo usuáriosem duração (rótulo "Raciocínio")
Acessibilidade
- Papel
- disclosure (botão com aria-expanded + painel)
- Teclado
- Enter ou Espaço abre e fecha
- O shimmer respeita prefers-reduced-motion
Código
Partes: Reasoning, ReasoningTrigger, ReasoningContent
import
import { Reasoning, ReasoningTrigger, ReasoningContent } from "@/components/ui/reasoning";Fonte: src/components/ui/reasoning.tsx · Resense (painel de raciocínio do canvas)
Relacionados: ThinkingText, StreamingText