AI Thinking Indicator

A brand AI avatar leads a working-state cue: pulsing dots, a live activity line, or a reasoning disclosure that expands inline — filling the gap before the reply lands.

Loading demo: ai-thinking-indicator-real-world

Installation

npx sdaia-ui@latest add ai-thinking-indicator

Usage

import { AiThinkingIndicator } from "sdaia-ui"

1<AiThinkingIndicator
2  state="reasoning"
3  style="neutral"
4  collapsedLabel="Show reasoning"
5  defaultOpen
6>
7  The user asks about Vision 2030. I should outline its purpose — economic diversification — and the three pillars, then keep the answer concise and sourced.
8</AiThinkingIndicator>

States

Dots

A pulsing typing animation for short waits — no copy yet.

Loading demo: ai-thinking-indicator-dots

Activity

A live activity line — a sparkle plus a short status label.

Loading demo: ai-thinking-indicator-activity

Reasoning

A collapsed reasoning preview — a “Show reasoning” toggle that expands.

Loading demo: ai-thinking-indicator-reasoning

Reasoning-Open

The expanded reasoning preview — header, divider and the reasoning body.

Loading demo: ai-thinking-indicator-reasoning-open

API Reference

Prop	Type	Default	Required
style	'neutral' \| 'brand' \| 'outline'	'neutral'	optional
state	'dots' \| 'activity' \| 'reasoning'	'dots'	optional
dir	'ltr' \| 'rtl'	'ltr'	optional
icon	string	sparklesStroke	optional
showAvatar	boolean	true	optional
animated	boolean	true	optional
label	ReactNode	'Searching the web…'	optional
collapsedLabel	ReactNode	'Show reasoning'	optional
title	ReactNode	'Reasoning'	optional
children	ReactNode	—	optional
open	boolean	—	optional
defaultOpen	boolean	false	optional
onOpenChange	(open: boolean) => void	—	optional
thinkingLabel	string	'Thinking'	optional
as	ElementType	'div'	optional