Agent Orb
The agent's mark, a purple blob whose colors move while the agent works.
Agent suggests
Agent suggests
Installation
import { AgentOrb } from 'nooxit-design-system/components/ai/agent-orb';Usage
<AgentOrb />
<AgentOrb size={16} />
<AgentOrb size={20} state="streaming" />
<AgentOrb size={32} state="reasoning" speed={0.75} />The agent is never an icon. Processes keep their icons, and every process has the same agent inside it: wherever the agent itself speaks or acts, in an avatar, its card or a chat, it is this blob, a purple gradient with no highlight and no grain.
Colors
| Token | Light | Dark | Use |
|---|---|---|---|
agent | purple-400 | purple-600 | The top of the blob |
agent-mid | purple-200 | purple-800 | Its middle |
agent-end | purple-50 | purple-950 | Its bottom, which fades into the page |
Sizes
size | Where |
|---|---|
12 | In a tag, such as "By the agent". It never moves. |
16 | Beside 14px text. |
20 | Beside a reply in the chat. |
24 | As an avatar, and 8px before a text-base label. The default. |
32 | Large, such as the agent's card. |
64 | In an empty chat. |
States
Order confirmation agent
Resting
- idle
- listening
- thinking
- reasoning
- tool-call
- tool-result
- streaming
- waiting
- background
- retrying
At rest the blob is still. Given a state other than idle, its three colors
drift around inside it, each on a loop of its own, and settle once the agent
is done. States differ in pace; the ones that wait on someone also breathe.
state | One round of the colors | When |
|---|---|---|
idle | None: the still blob | Everything that is not live work |
listening | 6s, breathing | The person writes to the agent; rests again after 5s |
thinking | 2.4s | A question is sent, before the answer |
reasoning | 4s | It works something out, or holds a case in its hands |
tool-call | 2s | It reads a document or looks something up |
tool-result | 3s | It matches what it found |
streaming | 3s | It writes its answer |
waiting | 7s, breathing | It waits for the person's answer; rests again after 5s |
background | 10s | It works on something out of view |
retrying | 1.6s | It tries again after a failure |
speed multiplies the state's own pace. The agent's card shows reasoning at
0.75 while the case is in the agent's hands, so it reads as calm attention
rather than busy work.
Let it move in two places only: the chat, while the agent listens, thinks and writes, and the agent's card. Everywhere else it stays still.
agentOrbState() turns a chat's status, which the AI SDK's useChat reports
with the same four values, and the agent's latest activity into a state:
const state = agentOrbState({
status,
activity, // 'reasoning' | 'tool-call' | 'tool-result' | 'text' | 'question'
hasDraft: input.trim().length > 0,
});
<AgentOrb size={64} state={state} />;In a message
Message takes the blob as its avatar, beside
the reply's first line:
<Message
from="assistant"
avatar={<AgentOrb size={20} state={streaming ? 'streaming' : 'idle'} />}
>
<MessageContent>…</MessageContent>
</Message>Accessibility
Without a label the blob is hidden from assistive technology, for when text
beside it already names the agent. Give it a label when it stands alone.
Reduced motion keeps the blob still, so say what the agent is doing in text
as well, such as "Thinking…".
Source — src/components/ai/agent-orb.tsx