ThoughtChain is installed into your project as a file you own. It takes the same props as Ant Design X's ThoughtChain, and draws the status glyphs and the folding chevron from your icon pack. The rows that changed are marked antuikit in the API table. ThoughtChain.Item comes attached.
Install
npx antuikit@latest init
npx antuikit@latest add thought-chain
The first command installs AntuikitProvider and the theme tokens, the second adds this component and the @ant-design/x package it builds on.
Import
From @/components/ui/thought-chain, never from @ant-design/x. The file lives in your project, so the import is a path, not a package.
import { ThoughtChain } from "@/components/ui/thought-chain"
Steps
A chain is one items array, one object per step, in the order they ran. Each step has a header and up to two blocks under it.
title and description make the header: the summary and a lighter second line.
content is the step's detail, like the query that ran or the rows it found. footer sits under it.
icon defaults to the step number. Pass a node to replace it, or false to hide it.
key names the step. Give every step one: the expand props refer to steps by it, and a step without one is matched by its position in the list.
1
<ThoughtChain
2
items={[
3
{ key: "search", title: "Searched the web", status: "success" },
status takes loading, success, error and abort. Each one draws its glyph from your icon pack in place of the step's icon: a spinner, a check, an error mark and a minus. error also tints the step. While status is set, an icon you pass is ignored, and icon: false still hides the glyph.
blink runs a shimmer over the title. Set it on the step that is running and clear it when the step ends: it animates until you do.
Collapsing a step
collapsible on a step turns its title into a toggle for content, with a chevron after it. A step without content shows no chevron.
defaultExpandedKeys opens steps on the first render and lets the chain manage the rest.
expandedKeys with onExpand makes it controlled, for opening the running step and closing the ones that finished.
destroyOnHidden is on by default, so a closed step's content unmounts. Set it to false on a step whose content holds state you want to keep.
line styles the rule that runs down from each icon to the next step. solid is the default and dashed draws dashes. In this version false and dotted both leave a solid line. The line hangs off the icon, so a step with icon: false has none.
ThoughtChain.Item
One step on its own, as a compact block, for a single tool call inside a message. It takes title, description, icon, status and blink like a step does, and has no content, footer or collapse. variant sets the surface: solid (the default), outlined or text.
<ThoughtChain.Item variant="outlined" status="success" title="Searched the novel" description="12 passages" />
Styling
The chain's classNames and styles take six keys. The item keys apply to every step at once. To style one step, put a class on the nodes you pass it.
1
<ThoughtChain
2
classNames={{
3
root: "…",
4
item: "…",
5
itemIcon: "…",
6
itemHeader: "…",
7
itemContent: "…",
8
itemFooter: "…",
9
}}
10
/>
ThoughtChain.Item takes its own four keys: root, icon, title and description.
Colors come from the theme. The Tokens tab lists the ThoughtChain tokens, like the item fills and the blink colors, which you set under components.ThoughtChain.
API Reference
ThoughtChain
ThoughtChain's props. Rows marked antuikit in the Version column are added by the kit.
ThoughtChainItemType
One entry of items. Rows marked antuikit in the Version column are changed by the kit.
ThoughtChain.Item
ThoughtChain.Item's props. Rows marked antuikit in the Version column are added by the kit.