# antuikit / ThoughtChain

> ThoughtChain, the steps an agent took, with `ThoughtChain.Item` attached. Draws the status glyphs from the icon pack, and merges `className` through `cn()`.

Docs: https://antuikit.com/docs/components/thought-chain

## Install

npx antuikit@latest init
npx antuikit@latest add thought-chain

## Import

import { ThoughtChain } from "@/components/ui/thought-chain";

## Demos

- [Basic](https://ui.antuikit.com/embed/thought-chain/basic.md): Pass `items` to list the steps, each with a `title` and a `description`, numbered in order.
- [Status](https://ui.antuikit.com/embed/thought-chain/status.md): Set `status` on an item to show whether the step is running, done, failed or stopped.
- [Collapsible steps](https://ui.antuikit.com/embed/thought-chain/collapsible.md): Set `collapsible` and `content` on an item to fold its details, with `defaultExpandedKeys` choosing which start open.
- [Controlled](https://ui.antuikit.com/embed/thought-chain/controlled.md): Pass `expandedKeys` with `onExpand` to decide which steps are open from outside, like a button that opens the check step.
- [Keep content mounted](https://ui.antuikit.com/embed/thought-chain/destroy-on-hidden.md): Set `destroyOnHidden` to `false` on an item to keep its folded content in the page, so its state survives a collapse.
- [Line](https://ui.antuikit.com/embed/thought-chain/line.md): Set `line` to `dashed` or `dotted` to change the line joining the steps, or `false` to hide it.
- [Without icons](https://ui.antuikit.com/embed/thought-chain/without-icons.md): Set `icon` to `false` on an item to drop its glyph, and pass `classNames.itemContent` to frame the folded steps in a panel.
- [Icon and footer](https://ui.antuikit.com/embed/thought-chain/icon-and-footer.md): Give an item its own `icon` and a `footer` under its content, like a button that edits the plan the agent wrote.
- [Nested](https://ui.antuikit.com/embed/thought-chain/nested.md): Put a `ThoughtChain` in an item's `content` to break a step into smaller steps of its own, one level down.
- [Single item](https://ui.antuikit.com/embed/thought-chain/item.md): Use `ThoughtChain.Item` for one step on its own, with `variant` set to `solid`, `outlined` or `text`.
- [Item status](https://ui.antuikit.com/embed/thought-chain/item-status.md): Set `status` on `ThoughtChain.Item` to show a running, finished, failed or stopped step, in each of the three variants.
- [Item icon](https://ui.antuikit.com/embed/thought-chain/item-icon.md): Pass `icon` to `ThoughtChain.Item` to show what the step does, like a search, an edit or a page being opened.
- [Clickable item](https://ui.antuikit.com/embed/thought-chain/item-click.md): Pass `onClick` to `ThoughtChain.Item` to make the step a button, for example to open the file or page it worked on.
- [Blink](https://ui.antuikit.com/embed/thought-chain/blink.md): Set `blink` on `ThoughtChain.Item` to run a shimmer across its text while the agent is still working on it.
- [Disabled](https://ui.antuikit.com/embed/thought-chain/disabled.md): Set `disabled` on `ThoughtChain.Item` to gray the step out and stop it from responding to clicks.
- [Agent reply](https://ui.antuikit.com/embed/thought-chain/agent.md): An assistant reply in a `Bubble` that lists the steps it took before the answer.
- [Deploy pipeline](https://ui.antuikit.com/embed/thought-chain/deploy.md): A production deploy that runs install, test, build and release one step at a time, with a redeploy button once it is live.
- [Data analysis](https://ui.antuikit.com/embed/thought-chain/data-analysis.md): A sales analyst that reads the schema, runs a query and shows the result table as folding steps before its answer.
- [Travel booking](https://ui.antuikit.com/embed/thought-chain/travel-booking.md): A trip planner that searches and holds flights, then waits for the traveler to approve or decline the booking.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/thought-chain`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `ThoughtChain` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.