ai-reasoning

1'use client';
2 
3import { useControllableState } from '@radix-ui/react-use-controllable-state';
4import {
5  Collapsible,
6  CollapsibleContent,
7  CollapsibleTrigger,
8} from '@repo/shadcn-ui/components/ui/collapsible';
9import { ChevronDownIcon } from 'lucide-react';
10import type { ComponentProps } from 'react';
11import { createContext, memo, useContext, useEffect, useState } from 'react';
12import { cn } from '@repo/shadcn-ui/lib/utils';
13import { AIResponse } from './response';
14 
15type AIReasoningContextValue = {
16  isStreaming: boolean;
17  isOpen: boolean;
18  setIsOpen: (open: boolean) => void;
19  duration: number;
20};
21 
22const AIReasoningContext = createContext<AIReasoningContextValue | null>(null);
23 
24const useAIReasoning = () => {
25  const context = useContext(AIReasoningContext);
26  if (!context) {
27    throw new Error('AIReasoning components must be used within AIReasoning');
28  }
29  return context;
30};
31 
32export type AIReasoningProps = ComponentProps<typeof Collapsible> & {
33  isStreaming?: boolean;
34  open?: boolean;
35  defaultOpen?: boolean;
36  onOpenChange?: (open: boolean) => void;
37  duration?: number;
38};
39 
40export const AIReasoning = memo(
41  ({
42    className,
43    isStreaming = false,
44    open,
45    defaultOpen = false,
46    onOpenChange,
47    duration: durationProp,
48    children,
49    ...props
50  }: AIReasoningProps) => {
51    const [isOpen, setIsOpen] = useControllableState({
52      prop: open,
53      defaultProp: defaultOpen,
54      onChange: onOpenChange,
55    });
56    const [duration, setDuration] = useControllableState({
57      prop: durationProp,
58      defaultProp: 0,
59    });
60 
61    const [hasAutoClosedRef, setHasAutoClosedRef] = useState(false);
62    const [startTime, setStartTime] = useState<number | null>(null);
63 
64    // Track duration when streaming starts and ends
65    useEffect(() => {
66      if (isStreaming) {
67        if (startTime === null) {
68          setStartTime(Date.now());
69        }
70      } else if (startTime !== null) {
71        setDuration(Math.round((Date.now() - startTime) / 1000));
72        setStartTime(null);
73      }
74    }, [isStreaming, startTime, setDuration]);
75 
76    // Auto-open when streaming starts, auto-close when streaming ends (once only)
77    useEffect(() => {
78      if (isStreaming && !isOpen) {
79        setIsOpen(true);
80      } else if (!isStreaming && isOpen && !defaultOpen && !hasAutoClosedRef) {
81        // Add a small delay before closing to allow user to see the content
82        const timer = setTimeout(() => {
83          setIsOpen(false);
84// … truncated