Thinking State

import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as ThinkingStateStories from './ThinkingState.stories';

<Meta of={ThinkingStateStories} name='Usage' />

<Title />

## Purpose

A small inline status that shows an agent is working: the agent icon, a label and the elapsed time.

## Usage

Use it while an agent is working, to show that something is happening, what it is doing and how long it has been at it.

- While `active`, the label shimmers and the icon pulses. When `completed`, the same text sits still. When `stopped` (the user cut the agent off), it sits still with the icon and label muted, so it reads as cut off, not finished.
- The default icon is `zappy`. Use `sparklesSolid` icon for other agents.
- Keep the label short ("Thinking...") and translated.
- Has an option to show elapsed time (`showTimer` with `time`). Use the time for the number and end the label before it: label "Thought for" with `time="17s"`, not the whole sentence in the label. The time is smaller and quieter than the label. While the agent is `active` the screen can update `time` each second, and the value is hidden from screen readers so it is not announced as it ticks; once `completed` or `stopped` it is the final value and is read. The label and the time are two translatable parts, so a language that puts the number first can reorder them in the screen.

## Implementation

See the table below for the available props. The other stories show every variant and state.

<hr />

<Canvas of={ThinkingStateStories.Default} />
<Controls of={ThinkingStateStories.Default} />