#ChainOfThought

A read-only log of what Wally did while answering — searches, tool calls, its own reasoning — so the user can see how it got there without the steps crowding the answer. Each ChainOfThoughtStep is one line: a type icon, a label and an optional right-aligned metric, joined to the next step by a thin connector. A step with children becomes a collapsible trigger, and children can be another ChainOfThought, so runs nest as deep as the agent did. The app owns the mapping from step type to icon (see Type Icons); the DS only draws the row.

Source · Storybook

#Usage

import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';
import { Brain, Database, FileText, Search } from '@wallarm-org/design-system/icons';

#Examples

#Nested

Steps with children toggle open; a nested chain can hold its own collapsible steps.

#Simple rows

icon={null} gives the Figma "Simple" row: no icon cell, no connector, 16px apart.

#Simple result

metric adds a right-aligned mono value — the Figma "Simple-result" row.

#Working

status='running' shimmers the label while the step is in progress.

#Streaming

A step that mounts as running fades in and settles 4px; the previous step's connector grows toward it; on done the shimmer fades into the plain label. Steps that mount done (history) appear instantly. All of it is off under prefers-reduced-motion.

#Error step

status='error' tints the label and the type icon danger, for a step that failed. Word the label as a failure too (color alone is not enough); put the detail in the step's children. Not in Figma yet; pending design review.

#Worked summary

The whole run folded under one "Worked for …" step with the Activity icon.

#Rich text content

Nested content can be prose: paragraphs, bullets and inline code.

#Type icons

The recommended step-type → icon mapping. The app owns it; this is documentation only.

#Controlled

open + onOpenChange drive the step from outside.

#Analytics

data-analytics-* on a collapsible step lands on the row <button>, not the <li>.

#Props

#ChainOfThoughtStep

#Explorer