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.

## 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} />