Chain of Thought

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

import * as ChainOfThoughtStories from './ChainOfThought.stories';

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

<Title />

## Purpose

A collapsible list of the steps an agent took or plans to take. Use it to let people see an agent's work without putting it in their way. The summary line is always visible; the steps open on demand.

## The summary line

The summary is a Thinking State. For a finished run, set the `label` to the part before the number ("Thought for") and pass the duration as `time` (for example `17s`) with `showTimer`, so the number gets the quieter timer style and, once the run is done, is read by screen readers. While the agent works, use a label such as "Working..." and update `time` as it ticks, or leave the timer off.

## Chain of Thought or Timeline?

A Chain of Thought is built from a Timeline, so they share the same rows. The difference is what the component is for:

- **Timeline** is a list of events in time order. It is always open, can join the events with a rail, and has no summary. Use it where the history is the content: an event log, a deploy history.
- **Chain of Thought** is a collapsible group for an agent's reasoning. It has a summary line (a Thinking State with a chevron), no rail, and opens on demand. It can open on its own while the agent is working (`expandWhenActive`) and collapse when done. Use it inside a conversation, where the steps support the reply and should stay out of the way.

If the steps are the main content of the screen, use a Timeline. If they sit under a reply, use a Chain of Thought. A Chain of Thought can also sit inside a Timeline, as one entry in a log.

## Implementation

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

<hr />

<Canvas of={ChainOfThoughtStories.Steps} />
<Controls of={ChainOfThoughtStories.Steps} />