Reasoning

1"use client";
2 
3import * as React from "react";
4import { AiBrain01Icon, ArrowDown01Icon } from "@hugeicons/core-free-icons";
5import { HugeiconsIcon } from "@hugeicons/react";
6import { Streamdown } from "streamdown";
7 
8import {
9  Collapsible,
10  CollapsibleContent,
11  CollapsibleTrigger,
12} from "@/components/ui/collapsible";
13import { TextShimmer } from "@/components/nexus-ui/text-shimmer";
14import { useOnChange } from "@/lib/use-on-change";
15import { cn } from "@/lib/utils";
16 
17type ReasoningContextValue = {
18  isStreaming: boolean;
19  label: string;
20};
21 
22const ReasoningContext = React.createContext<ReasoningContextValue | null>(
23  null,
24);
25 
26function useReasoningContext(component: string): ReasoningContextValue {
27  const ctx = React.useContext(ReasoningContext);
28  if (!ctx) {
29    throw new Error(`${component} must be used within <Reasoning>`);
30  }
31  return ctx;
32}
33 
34type ReasoningProps = Omit<
35  React.ComponentProps<typeof Collapsible>,
36  "open" | "defaultOpen" | "onOpenChange"
37> & {
38  isStreaming?: boolean;
39  open?: boolean;
40  defaultOpen?: boolean;
41  onOpenChange?: (open: boolean) => void;
42};
43 
44function Reasoning({
45  className,
46  isStreaming = false,
47  open: openProp,
48  defaultOpen = false,
49  onOpenChange,
50  children,
51  ...props
52}: ReasoningProps) {
53  const isControlled = openProp !== undefined;
54  const [internalOpen, setInternalOpen] = React.useState(
55    defaultOpen || isStreaming,
56  );
57  const open = isControlled ? openProp : internalOpen;
58  const [durationLabel, setDurationLabel] = React.useState<string | null>(null);
59  const [hasStreamed, setHasStreamed] = React.useState(isStreaming);
60  const startedAtRef = React.useRef<number | null>(null);
61 
62  React.useEffect(() => {
63    if (isStreaming) {
64      startedAtRef.current = Date.now();
65      onOpenChange?.(true);
66    }
67  }, [isStreaming, onOpenChange]);
68 
69  useOnChange(isStreaming, (current, previous) => {
70    if (!previous && current) {
71      setHasStreamed(true);
72      startedAtRef.current = Date.now();
73      setDurationLabel(null);
74      if (!isControlled) {
75        setInternalOpen(true);
76      }
77      onOpenChange?.(true);
78    }
79 
80    if (previous && !current) {
81      const startedAt = startedAtRef.current;
82      const elapsedSeconds =
83        startedAt != null
84          ? Math.max(1, Math.round((Date.now() - startedAt) / 1000))
85          : null;
86      setDurationLabel(
87        elapsedSeconds != null ? String(elapsedSeconds) : "a few",
88      );
89      startedAtRef.current = null;
90      if (!isControlled) {
91// … truncated