AI Processing

Animated Avi thinking indicator with cycling thoughts and streaming response text

Demo

// Set the thoughts property directly from JavaScript const el = document.querySelector('#ai-demo'); el.thoughts = [ 'Reviewing your filings...', 'Checking for discrepancies...', 'Generating summary...', ];

API

Tag

Name	Description
`<s-ai-processing>`	Animated AI processing indicator with thinking, typing, and done phases

Attributes

Name	Value	Description
`phase`	string	Controls the current animation phase (`resting`, `thinking`, `typing`, `done`). Set from JavaScript to drive transitions.
`thoughts`	string	Thoughts that cycle during the thinking phase. Pass a JSON array string, e.g. `["Reviewing…","Checking…"]`.
`responsetext`	string	Full response text streamed word-by-word during the typing phase.
`thoughtduration`	number	Duration in milliseconds each thought is visible before transitioning to the next. Defaults to `2400`.
`i18n`	string	A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Properties

Name	Type	Default	Description
`phase`	`'resting' \| 'thinking' \| 'typing' \| 'done'`	`'resting'`	Controls the current animation phase. Set externally to drive transitions - thoughts cycle indefinitely while `'thinking'`, and word streaming begins when set to `'typing'`.
`thoughts`	`string[]`	`[]`	Thoughts that cycle during the thinking phase.
`responseText`	`string`	`""`	Full response text streamed word-by-word during the typing phase.
`thoughtDuration`	`number`	`2400`	Duration in milliseconds each thought is visible before transitioning to the next.
`i18n`	object		A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Events

Name	Detail	Description
`s-complete`	-	Fired when word streaming finishes and the component transitions to the done phase.

Demo

API

Tag

Name
`<SAiProcessing>`

Props

Name	Type	Default	Description
`phase`	`'resting' \| 'thinking' \| 'typing' \| 'done'`	`'resting'`	Controls the current animation phase. Thoughts cycle indefinitely while `'thinking'`; word streaming begins when set to `'typing'`.
`thoughts`	`string[]`	`[]`	Thoughts that cycle during the thinking phase.
`responseText`	`string`	`""`	Full response text streamed word-by-word during the typing phase.
`thoughtDuration`	`number`	`2400`	Duration in milliseconds each thought is visible.
`i18n`	object		A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.
`onSComplete`	`() => void`		Called when word streaming finishes and the component transitions to the done phase.

Skylab React links

General information about using our React package

i18n Strings

ID	Description	Default value
`"aiProcessing.ariaLabel.thinking"`	The `aria-label` on the thinking phase section.	Avi is thinking
`"aiProcessing.ariaLabel.typing"`	The `aria-label` on the typing phase section.	Avi is responding
`"aiProcessing.ariaLabel.done"`	The `aria-label` on the done phase section.	Avi response complete
`"aiProcessing.liveRegion.thinking"`	Live region announcement during the thinking phase.	Avi is thinking: {thought}
`"aiProcessing.liveRegion.typing"`	Live region announcement during the typing phase.	Avi is responding…
`"aiProcessing.liveRegion.done"`	Live region announcement once the response is complete.	Avi's response: {response}

Guidelines

Animation phases

The component is driven entirely by the phase prop, which you set from JavaScript at any time:

resting - Nothing is rendered. The initial state.
thinking - Animated dots appear alongside cycling thought strings. Thoughts loop indefinitely until phase is changed externally.
typing - Words from responseText stream in as chunks. The component automatically transitions to done once all words have been revealed.
done - The full response text is displayed statically. The s-complete event fires at this transition.

Set phase back to 'thinking' or 'resting' at any time to reset the component.

Accessibility

An off-screen role="status" live region provides screen reader users with the same state information as sighted users - announcing the current thought during thinking, a progress message during streaming, and the full response text once complete.

Animations respect prefers-reduced-motion: dot animation, shimmer effects, and phase transitions are disabled for users who prefer reduced motion.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com