Chain of Thought

1"use client";
2 
3import * as React from "react";
4import { Alert02Icon, ArrowDown01Icon } from "@hugeicons/core-free-icons";
5import { HugeiconsIcon } from "@hugeicons/react";
6 
7import {
8  Collapsible,
9  CollapsibleContent,
10  CollapsibleTrigger,
11} from "@/components/ui/collapsible";
12import { TextShimmer } from "@/components/nexus-ui/text-shimmer";
13import { useOnChange } from "@/lib/use-on-change";
14import { cn } from "@/lib/utils";
15 
16type ChainOfThoughtRootContextValue = {
17  registerStep: (id: string, status: ChainOfThoughtStepStatus) => void;
18  allStepsComplete: boolean;
19  hasAnyError: boolean;
20};
21 
22const ChainOfThoughtRootContext =
23  React.createContext<ChainOfThoughtRootContextValue | null>(null);
24 
25function useChainOfThoughtRootContext(component: string) {
26  const ctx = React.useContext(ChainOfThoughtRootContext);
27  if (!ctx) {
28    throw new Error(`${component} must be used within <ChainOfThought>`);
29  }
30  return ctx;
31}
32 
33type ChainOfThoughtStepContextValue = {
34  status: ChainOfThoughtStepStatus;
35  hasContent: boolean;
36};
37 
38const ChainOfThoughtStepContext =
39  React.createContext<ChainOfThoughtStepContextValue | null>(null);
40 
41function useChainOfThoughtStepContext(component: string) {
42  const ctx = React.useContext(ChainOfThoughtStepContext);
43  if (!ctx) {
44    throw new Error(`${component} must be used within <ChainOfThoughtStep>`);
45  }
46  return ctx;
47}
48 
49type ChainOfThoughtStepStatus = "pending" | "active" | "completed" | "error";
50 
51type ChainOfThoughtProps = Omit<
52  React.ComponentProps<typeof Collapsible>,
53  "open" | "defaultOpen" | "onOpenChange"
54> & {
55  open?: boolean;
56  defaultOpen?: boolean;
57  onOpenChange?: (open: boolean) => void;
58  autoCloseOnAllComplete?: boolean;
59};
60 
61function ChainOfThought({
62  className,
63  open: openProp,
64  defaultOpen = true,
65  onOpenChange,
66  autoCloseOnAllComplete = true,
67  children,
68  ...props
69}: ChainOfThoughtProps) {
70  const isControlled = openProp !== undefined;
71  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
72  const [stepStatuses, setStepStatuses] = React.useState<
73    Record<string, ChainOfThoughtStepStatus>
74  >({});
75 
76  const { allStepsComplete, hasAnyError } = React.useMemo(() => {
77    const statuses = Object.values(stepStatuses);
78    return {
79      allStepsComplete:
80        statuses.length > 0 &&
81        statuses.every((status) => status === "completed"),
82      hasAnyError: statuses.some((status) => status === "error"),
83    };
84  }, [stepStatuses]);
85 
86  const open = isControlled ? openProp : internalOpen;
87 
88// … truncated