Reasoning

1"use client"
2 
3import { cn } from "@/lib/utils"
4import { ChevronDownIcon } from "lucide-react"
5import React, {
6  createContext,
7  useContext,
8  useEffect,
9  useRef,
10  useState,
11} from "react"
12import { Markdown } from "./markdown"
13 
14type ReasoningContextType = {
15  isOpen: boolean
16  onOpenChange: (open: boolean) => void
17}
18 
19const ReasoningContext = createContext<ReasoningContextType | undefined>(
20  undefined
21)
22 
23function useReasoningContext() {
24  const context = useContext(ReasoningContext)
25  if (!context) {
26    throw new Error(
27      "useReasoningContext must be used within a Reasoning provider"
28    )
29  }
30  return context
31}
32 
33export type ReasoningProps = {
34  children: React.ReactNode
35  className?: string
36  open?: boolean
37  onOpenChange?: (open: boolean) => void
38  isStreaming?: boolean
39}
40function Reasoning({
41  children,
42  className,
43  open,
44  onOpenChange,
45  isStreaming,
46}: ReasoningProps) {
47  const [internalOpen, setInternalOpen] = useState(false)
48  const [wasAutoOpened, setWasAutoOpened] = useState(false)
49 
50  const isControlled = open !== undefined
51  const isOpen = isControlled ? open : internalOpen
52 
53  const handleOpenChange = (newOpen: boolean) => {
54    if (!isControlled) {
55      setInternalOpen(newOpen)
56    }
57    onOpenChange?.(newOpen)
58  }
59 
60  useEffect(() => {
61    if (isStreaming && !wasAutoOpened) {
62      if (!isControlled) setInternalOpen(true)
63      setWasAutoOpened(true)
64    }
65 
66    if (!isStreaming && wasAutoOpened) {
67      if (!isControlled) setInternalOpen(false)
68      setWasAutoOpened(false)
69    }
70  }, [isStreaming, wasAutoOpened, isControlled])
71 
72  return (
73    <ReasoningContext.Provider
74      value={{
75        isOpen,
76        onOpenChange: handleOpenChange,
77      }}
78    >
79      <div className={className}>{children}</div>
80    </ReasoningContext.Provider>
81  )
82}
83 
84export type ReasoningTriggerProps = {
85  children: React.ReactNode
86  className?: string
87} & React.HTMLAttributes<HTMLButtonElement>
88 
89function ReasoningTrigger({
90  children,
91  className,
92  ...props
93}: ReasoningTriggerProps) {
94  const { isOpen, onOpenChange } = useReasoningContext()
95 
96  return (
97    <button
98      className={cn("flex cursor-pointer items-center gap-2", className)}
99      onClick={() => onOpenChange(!isOpen)}
100      {...props}
101    >
102      <span className="text-primary">{children}</span>
103      <div
104        className={cn(
105          "transform transition-transform",
106          isOpen ? "rotate-180" : ""
107        )}
108      >
109        <ChevronDownIcon className="size-4" />
110      </div>
111// … truncated