Chat & AI

Chain Of Thought

A collapsible trail of model reasoning steps.

Import

tsx

import { ChainOfThought } from "@cronus-ui/ui";

bash

npx cronus-ui add chain-of-thought

Examples

Reasoning trail

A collapsible list of steps the model took.

Parse the question

Retrieve the docs

Draft the answer

tsx

<ChainOfThought defaultOpen>
  <ChainOfThoughtHeader />
  <ChainOfThoughtContent>
    <ChainOfThoughtStep label="Parse the question" />
    <ChainOfThoughtStep label="Retrieve the docs" />
    <ChainOfThoughtStep label="Draft the answer" />
  </ChainOfThoughtContent>
</ChainOfThought>

.cronus

No audit fixture declares this family in .cronus yet.

React onlyParity: Not portedParity scoreboard

API Reference

Generated from the component's exported types.

ChainOfThoughtLabels

Prop	Type	Default	Description
`header`*	`string`	—	—

ChainOfThoughtProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	`false`	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`labels`	`Partial<ChainOfThoughtLabels>`	—	Override default English strings.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

ChainOfThoughtHeaderProps

Extends ComponentProps<typeof CollapsibleTrigger>

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

ChainOfThoughtStepProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`icon`	`LucideIcon`	—	—
`label`*	`string`	—	—
`description`	`string`	—	—
`status`	`"complete" \| "active" \| "pending"`	`"complete"`	—
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

ChainOfThoughtSearchResultsProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

ChainOfThoughtSearchResultProps

Extends ComponentProps<typeof Badge>

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

ChainOfThoughtContentProps

Extends ComponentProps<typeof CollapsibleContent>

Prop	Type	Default	Description
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

ChainOfThoughtImageProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`caption`	`string`	—	—
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.