Chain of Thought

Los pasos que recorrió un agente, con resultados de búsqueda e imágenes colgando de cada uno.

Understanding the requestThe user wants a dark mode toggle that does not flash on first paint.

Searching the documentationLooking for the theming and dark mode pages

docs/concepts/dark-modedocs/concepts/themingnach-themes

Writing the answer

Checking the snippet compiles

1'use client';
2
3import { ChainOfThought } from '@/components/ui/chain-of-thought';
4
5export function Default() {
6  return (
7    <div className="w-full max-w-md">
8      <ChainOfThought defaultOpen>
9        <ChainOfThought.Header />
10        <ChainOfThought.Content>
11          <ChainOfThought.Step label="Understanding the request" status="complete">
12            <span className="text-muted-foreground text-xs">
13              The user wants a dark mode toggle that does not flash on first paint.
14            </span>
15          </ChainOfThought.Step>
16          <ChainOfThought.Step
17            label="Searching the documentation"
18            description="Looking for the theming and dark mode pages"
19            status="complete"
20          >
21            <ChainOfThought.SearchResults>
22              <ChainOfThought.SearchResult>docs/concepts/dark-mode</ChainOfThought.SearchResult>
23              <ChainOfThought.SearchResult>docs/concepts/theming</ChainOfThought.SearchResult>
24              <ChainOfThought.SearchResult>nach-themes</ChainOfThought.SearchResult>
25            </ChainOfThought.SearchResults>
26          </ChainOfThought.Step>
27          <ChainOfThought.Step label="Writing the answer" status="active" />
28          <ChainOfThought.Step label="Checking the snippet compiles" status="pending" />
29        </ChainOfThought.Content>
30      </ChainOfThought>
31    </div>
32  );
33}

Instalación

pnpm dlx nachui add chain-of-thought

Anatomía

1import { ChainOfThought } from '@/components/ui/chain-of-thought';

1<ChainOfThought defaultOpen>
2  <ChainOfThought.Header />
3  <ChainOfThought.Content>
4    <ChainOfThought.Step label="Buscando en la documentación" status="complete">
5      <ChainOfThought.SearchResults>
6        <ChainOfThought.SearchResult>docs/concepts/theming</ChainOfThought.SearchResult>
7      </ChainOfThought.SearchResults>
8    </ChainOfThought.Step>
9    <ChainOfThought.Step label="Escribiendo la respuesta" status="active" />
10  </ChainOfThought.Content>
11</ChainOfThought>

Donde Reasoning muestra un bloque de pensamiento, Chain of Thought muestra una secuencia: pasos sobre un riel, cada uno con su estado y su evidencia.

Composición

Usa la siguiente composición para construir un ChainOfThought:

ChainOfThought
├── ChainOfThought.Header
└── ChainOfThought.Content
    └── ChainOfThought.Step
        ├── ChainOfThought.SearchResults
        │   └── ChainOfThought.SearchResult
        └── ChainOfThought.Image

Pasos

Un paso toma un label, una description opcional y un status de complete, active o pending. El activo late, el riel los conecta, y el último paso corta el conector para que la lista termine limpia.

icon cambia el punto por cualquier componente de icono, y así un paso de búsqueda se distingue de uno de escritura.

Evidencia

SearchResults guarda las fuentes que consultó un paso como chips chicos, e Image enmarca una captura o un gráfico con un pie opcional. Los dos viven dentro del paso al que pertenecen, así la evidencia queda pegada a su motivo.

Referencia de API

ChainOfThought

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Estado abierto cuando no se controla
`open`	`boolean`	-	Estado abierto controlado
`onOpenChange`	`(open: boolean) => void`	-	Se llama al cambiar el estado
`className`	`string`	-	Clases CSS adicionales

ChainOfThought.Header

Prop	Type	Default	Description
`children`	`ReactNode`	`'Chain of Thought'`	Etiqueta del trigger
`className`	`string`	-	Clases CSS adicionales

ChainOfThought.Step

Prop	Type	Default	Description
`label`	`ReactNode`	-	Título del paso
`description`	`ReactNode`	-	Línea de apoyo bajo el título
`status`	`'complete' \| 'active' \| 'pending'`	`'complete'`	Define el tono y el latido
`icon`	`ComponentType`	punto	Icono del indicador en el riel
`className`	`string`	-	Clases CSS adicionales

ChainOfThought.Image

Prop	Type	Default	Description
`caption`	`ReactNode`	-	Pie debajo del marco
`className`	`string`	-	Clases CSS adicionales

ChainOfThought.SearchResults / ChainOfThought.SearchResult

Prop	Type	Default	Description
`className`	`string`	-	Clases CSS adicionales

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorAttachments

SiguienteContext