AI Components/AgentStatus
AgentStatus
Visual indicator for AI agent states — idle, thinking, working, done, error, and waiting. Supports an optional step-by-step progress list with per-step status dots.
import { AgentStatus } from "@animui/ui"Basic
Analyzing your request…
All states
Idle
Analyzing your request…
Running tool: search_web
Waiting for confirmation
Done! Found 12 results.
Connection timeout. Retrying…
With steps
Pass a steps array to show a live progress list beneath the badge.
Working on your request…
Fetch context120ms
Analyse codebase
Scanning 34 files…
Generate patch
AgentStatus props
| Prop | Type | Default | Description |
|---|---|---|---|
state | "idle" | "thinking" | "working" | "done" | "error" | "waiting" | "idle" | Current agent state — controls the icon, color, and pulse animation. |
label | string | — | Human-readable message shown inside the badge. Falls back to the state's built-in label when omitted. |
steps | AgentStep[] | [] | Optional ordered list of sub-steps shown beneath the badge. |
compact | boolean | false | Hides the steps list even when steps are provided. |
showSteps | boolean | true | Toggle step list visibility without clearing the steps array. |
className | string | — | Additional classes for the wrapper. |
AgentStep props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Unique step identifier. |
label | string | — | Step display text. |
status | "pending" | "running" | "done" | "error" | "skipped" | — | Step status controls the dot icon and color. |
detail | string | — | Secondary detail line shown only when status is 'running'. |
duration | number | — | Milliseconds shown as a badge when step is 'done'. |