Inline states stack to narrate each phase of an AI turn — thinking, researching, running tools and streaming the answer.
Loading demo: ai-states-real-world
npx sdaia-ui@latest add ai-states
import { AiReasoningState, AiToolState, AiGenerationState } from "sdaia-ui"1<AiToolState state="tool-running" />2<AiResearchState state="searching-sources" />3<AiGenerationState state="streaming" />
Loading demo: ai-reasoning-state-deep-thinking
Loading demo: ai-reasoning-state-reasoning-hidden
Loading demo: ai-reasoning-state-reasoning-available
Loading demo: ai-reasoning-state-reasoning-unavailable
Loading demo: ai-tool-state-tool-waiting
Loading demo: ai-tool-state-tool-running
Loading demo: ai-tool-state-permission-needed
Loading demo: ai-tool-state-tool-failed
Loading demo: ai-tool-state-tool-timed-out
Loading demo: ai-context-state-context-full
Loading demo: ai-context-state-context-truncated
Loading demo: ai-context-state-context-lost
Loading demo: ai-context-state-context-imported
Loading demo: ai-context-state-context-invalid
Loading demo: ai-memory-state-memory-used
Loading demo: ai-memory-state-memory-updated
Loading demo: ai-memory-state-memory-conflict
Loading demo: ai-memory-state-memory-permission-required
Loading demo: ai-model-state-model-switching
Loading demo: ai-model-state-model-fallback
Loading demo: ai-model-state-model-overloaded
Loading demo: ai-model-state-model-unavailable
Loading demo: ai-generation-state-streaming
Loading demo: ai-generation-state-paused
Loading demo: ai-generation-state-interrupted
Loading demo: ai-generation-state-continued
Loading demo: ai-generation-state-regenerating
Loading demo: ai-generation-state-comparing-versions
Loading demo: ai-research-state-searching-sources
Loading demo: ai-research-state-reading-sources
Loading demo: ai-research-state-ranking-sources
Loading demo: ai-research-state-source-failed
Loading demo: ai-research-state-no-sources-found
Loading demo: ai-multi-agent-state-agent-started
Loading demo: ai-multi-agent-state-agent-waiting
Loading demo: ai-multi-agent-state-agent-handoff
Loading demo: ai-multi-agent-state-agent-conflict
Loading demo: ai-multi-agent-state-agent-complete
Loading demo: ai-artifact-state-generating-artifact
Loading demo: ai-artifact-state-artifact-ready
Loading demo: ai-artifact-state-artifact-failed
Loading demo: ai-artifact-state-artifact-updated
Prop | Type | Default | Required |
|---|---|---|---|
state | string | — | required |
label | ReactNode | — | optional |
hint | ReactNode | — | optional |
icon | string | — | optional |
onHintClick | () => void | — | optional |
dir | 'ltr' | 'rtl' | — | optional |