ChainOfThought

1"use client";
2 
3import { Collapsible } from "@base-ui/react/collapsible";
4import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
5import { HugeiconsIcon } from "@hugeicons/react";
6import type { ComponentProps, ReactNode } from "react";
7 
8import { Badge } from "@/components/ui/badge";
9import { cn } from "@/lib/utils";
10 
11export type ChainOfThoughtProps = Collapsible.Root.Props;
12 
13/* ─────────────────────────────────────────────────────
14 * Discrete, labeled reasoning steps — searches, tool
15 * calls, drafts — folded behind the house log-line rail.
16 * Reasoning is for one continuous thinking stream; this
17 * is for steps the reader can scan one by one.
18 * Inspired by Chain of Thought from Vercel's AI SDK
19 * Elements (elements.ai-sdk.dev), rebuilt on Base UI.
20 * ─────────────────────────────────────────────────── */
21export const ChainOfThought = ({
22  className,
23  ...props
24}: ChainOfThoughtProps) => (
25  <Collapsible.Root
26    className={cn(
27      "w-full min-w-0 border-border/60 border-l-2 pl-2.5",
28      className
29    )}
30    data-slot="chain-of-thought"
31    {...props}
32  />
33);
34 
35export type ChainOfThoughtHeaderProps = Collapsible.Trigger.Props;
36 
37/** The fold's handle. Defaults to "Chain of thought"; children replace it. */
38export const ChainOfThoughtHeader = ({
39  children,
40  className,
41  ...props
42}: ChainOfThoughtHeaderProps) => (
43  <Collapsible.Trigger
44    className={cn(
45      "group inline-flex items-center gap-1 py-0.5 text-muted-foreground text-xs transition-colors hover:text-foreground",
46      className
47    )}
48    data-slot="chain-of-thought-header"
49    {...props}
50  >
51    <HugeiconsIcon
52      aria-hidden
53      className="size-3 transition-transform duration-200 group-data-[panel-open]:rotate-90 motion-reduce:transition-none"
54      icon={ArrowRight01Icon}
55      strokeWidth={2}
56    />
57    {children ?? <span>Chain of thought</span>}
58  </Collapsible.Trigger>
59);
60 
61export type ChainOfThoughtContentProps = Collapsible.Panel.Props;
62 
63/** The unfolding step list. Children are `ChainOfThoughtStep` items. */
64export const ChainOfThoughtContent = ({
65  children,
66  className,
67  ...props
68}: ChainOfThoughtContentProps) => (
69  <Collapsible.Panel
70    className={cn(
71// … truncated