ChainOfThought

Collapsible list of reasoning steps with a status rail.

Import

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

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

Usage

<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
• Thinking
• Collapsed
• Narrow
• Preset Brutal

Source

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