# ChainOfThought

> Collapsible list of reasoning steps with a status rail.

Source: https://ui.jcsoftdev.com/docs/components/chain-of-thought

Collapsible list of reasoning steps with a status rail.

## Import

```ts
import { ChainOfThought } from "@jcsoftdev/ui/ai";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/ai/chain-of-thought`.

## Usage

```tsx
<ChainOfThought
  title="Razonamiento"
  duration="4 s"
  defaultOpen
  steps={[
      {
        id: "1",
        label: "Entender el pedido",
        detail: "El cliente quiere un turno el sábado por la mañana.",
        status: "done",
      },
      {
        id: "2",
        label: "Consultar la agenda de Diego",
        detail: "Tres huecos libres entre 10:00 y 12:00.",
        status: "done",
      },
      { id: "3", label: "Proponer el horario más cercano", status: "done" },
    ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` * | `ThoughtStep[]` |  |  |
| `title` | `string` | `"Razonamiento"` | Header text; while any step is `active` it shimmers. |
| `duration` | `string` |  | Pre-formatted total time shown in the header, e.g. `4 s`. |
| `open` | `boolean` |  |  |
| `defaultOpen` | `boolean` | `false` |  |
| `onOpenChange` | `((open: boolean) => void)` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/ai-chainofthought--default)
- [Thinking](/storybook/?path=/story/ai-chainofthought--thinking)
- [Collapsed](/storybook/?path=/story/ai-chainofthought--collapsed)
- [Narrow](/storybook/?path=/story/ai-chainofthought--narrow)
- [Preset Brutal](/storybook/?path=/story/ai-chainofthought--preset-brutal)

## Source

`packages/ui/src/ai/chain-of-thought/chain-of-thought.tsx`