Thinking State

AI working panel with a live timer, searched sources and thinking steps that appear one by one.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/thinking-state.json · Import from @/components/ui/thinking-state

When to use

Showing what an AI assistant is doing while it works: searching, reading, drafting
Long-running tasks where a visible trail of steps builds trust and keeps people waiting patiently

When not to use

Short waits under a second – a simple spinner or shimmer is enough
Exact progress you can measure – use a progress bar with a percentage

Usage

import { ThinkingState } from "@/components/ui/thinking-state";

const steps = [
  { kind: "search", label: "Searched", sources: [{ label: "acme.com" }, { label: "+4 more" }] },
  { kind: "step", label: "Reading the sources" },
  { kind: "step", label: "Drafting your answer" },
];

export function AssistantMessage() {
  return <ThinkingState steps={steps} onDone={(seconds) => console.log(seconds)} />;
}

Props

Name	Type	Default	Description
`steps`	`ThinkingStep[]`		Searches and thinking steps, revealed in order. Sources can link out (href) and show a tooltip; moreSources hide behind a “+N more” chip
`doneLabel`	`string`	`"Finished thinking"`	Label of the final row
`stepMs`	`number`	`1300`	Pause between two steps, in ms
`loop`	`boolean`	`false`	Starts over a few seconds after finishing
`onDone`	`(seconds: number) => void`		Called once all steps are done
`className`	`string`		Extra class on the root

Keyboard

Enter / Space: Collapse or expand the steps (on the header), or show more sources
Tab: Move through the source links – each shows its tooltip on focus

Accessibility

The header is a button with aria-expanded, so the steps can be collapsed
New steps are announced politely through an aria-live list

Responsive

Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

React 19

Chat Composer – Prompt composer with model picker, voice input, app connections and approval request
Progress Tracker – Onboarding checklist with an animated progress bar, ticks that draw themselves and auto play

Guides

React components for AI chat interfaces – What an AI chat UI needs – composer, streaming answers, thinking states, tool calls, citations, message actions – and React components for each.
How to show tool calls in an AI agent UI – How to display an agent's tool calls – one readable line per call, arguments and results on demand, errors with retry – and when to switch to a trace or a graph.
Streaming AI responses in React without layout shift – How to render streamed LLM answers in React so the page doesn't jump – stable containers, a clear thinking state, smooth text, and actions that appear in place.