ThoughtChain

Pass items to list the steps, each with a title and a description, numbered in order.

Set status on an item to show whether the step is running, done, failed or stopped.

Set collapsible and content on an item to fold its details, with defaultExpandedKeys choosing which start open.

Pass expandedKeys with onExpand to decide which steps are open from outside, like a button that opens the check step.

Set destroyOnHidden to false on an item to keep its folded content in the page, so its state survives a collapse.

Set line to dashed or dotted to change the line joining the steps, or false to hide it.

Set icon to false on an item to drop its glyph, and pass classNames.itemContent to frame the folded steps in a panel.

Give an item its own icon and a footer under its content, like a button that edits the plan the agent wrote.

Put a ThoughtChain in an item's content to break a step into smaller steps of its own, one level down.

Use ThoughtChain.Item for one step on its own, with variant set to solid, outlined or text.

Set status on ThoughtChain.Item to show a running, finished, failed or stopped step, in each of the three variants.

Pass icon to ThoughtChain.Item to show what the step does, like a search, an edit or a page being opened.

Pass onClick to ThoughtChain.Item to make the step a button, for example to open the file or page it worked on.

Set blink on ThoughtChain.Item to run a shimmer across its text while the agent is still working on it.

Set disabled on ThoughtChain.Item to gray the step out and stop it from responding to clicks.

An assistant reply in a Bubble that lists the steps it took before the answer.

A production deploy that runs install, test, build and release one step at a time, with a redeploy button once it is live.

A sales analyst that reads the schema, runs a query and shows the result table as folding steps before its answer.

A trip planner that searches and holds flights, then waits for the traveler to approve or decline the booking.