4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1b3c,"use client"; import { Collapsible } from "@base-ui/react/collapsible"; import { ArrowRight01Icon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react"; import { Streamdown } from "streamdown"; import { cn } from "@/lib/utils"; /** Milliseconds to hold the panel open after streaming ends. */ const AUTO_CLOSE_DELAY_MS = 1000; const MS_PER_SECOND = 1000; interface ReasoningContextValue { /** Elapsed thinking time in seconds; undefined while streaming. */ duration: number | undefined; isStreaming: boolean; open: boolean; setOpen: (open: boolean) => void; } const ReasoningContext = createContext(null); /** Read the surrounding Reasoning state from a child component. */ export const useReasoning = (): ReasoningContextValue => { const context = useContext(ReasoningContext); if (!context) { throw new Error("useReasoning must be used inside "); } return context; }; export type ReasoningProps = Omit< Collapsible.Root.Props, "defaultOpen" | "onOpenChange" | "open" > & { /** * The reasoning is streaming right now: the panel auto-opens, the * trigger shimmers "Thinking…", and the clock runs. When it flips * back off the panel folds to a "Thought for Ns" receipt — unless * the reader toggled it themselves, in which case their choice wins. */ isStreaming?: boolean; /** Controlled open state. */ open?: boolean; /** Initial open state when uncontrolled. */ defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** Thinking time in seconds; measured from `isStreaming` when omitted. */ duration?: number; }; /* ───────────────────────────────────────────────────── * The model's thinking, in the house log-line vocabulary: * a rail-indented fold that opens itself while the model * thinks and settles to a one-line receipt when it stops. * The reader's toggle always beats the automation. * Inspired by Reasoning from Vercel's AI SDK Elements * (elements.ai-sdk.dev), rebuilt on Base UI. * ─────────────────────────────────────────────────── */ export const Reasoning = ({ children, className, defaultOpen = false, duration: durationProp, isStreaming = false, onOpenChange, open: openProp, ...props }: ReasoningProps) => { const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen); const [trackedDuration, setTrackedDuration] = useState(); const startedAtRef = useRef(null); const hasStreamedRef = useRef(false); const userToggledRef = useRef(false); const open = openProp ?? uncontrolledOpen; const duration = isStreaming ? undefined : (durationProp ?? trackedDuration); const setOpen = useCallback( (next: boolean) => { setUncontrolledOpen(next); onOpenChange?.(next); }, [onOpenChange] ); useEffect(() => { if (isStreaming) { hasStreamedRef.current = true; startedAtRef.current ??= Date.now(); if (!userToggledRef.current) { setUncontrolledOpen(true); } return; } if (startedAtRef.current !== null) { const elapsed = Date.now() - startedAtRef.current; setTrackedDuration(Math.max(1, Math.round(elapsed / MS_PER_SECOND))); startedAtRef.current = null; } // Fold only streams we opened ourselves — a static, defaultOpen // reasoning block must not close itself out from under the reader. if (hasStreamedRef.current && !userToggledRef.current) { const timeout = setTimeout(() => { setUncontrolledOpen(false); }, AUTO_CLOSE_DELAY_MS); return () => clearTimeout(timeout); } }, [isStreaming]); const contextValue = useMemo( () => ({ duration, isStreaming, open, setOpen }), [duration, isStreaming, open, setOpen] ); return ( { userToggledRef.current = true; setOpen(next); }} open={open} {...props} > {children} ); }; export type ReasoningTriggerProps = Collapsible.Trigger.Props; /** * The fold's one-line handle: shimmering "Thinking…" while the model * streams, a quiet "Thought for Ns" receipt at rest. Pass children to * replace the label; the chevron stays. */ export const ReasoningTrigger = ({ children, className, ...props }: ReasoningTriggerProps) => { const { duration, isStreaming } = useReasoning(); const label = duration === undefined ? "Thought" : `Thought for ${duration}s`; return ( {children ?? (isStreaming ? ( Thinking… ) : ( {label} ))} ); }; export type ReasoningContentProps = Omit< Collapsible.Panel.Props, "children" > & { /** The reasoning text, rendered as markdown. */ children: string; }; /** The thinking itself: dimmed markdown that unfolds under the trigger. */ export const ReasoningContent = ({ children, className, ...props }: ReasoningContentProps) => (

{children}

); 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/core-free-icons"}]]}]}],["$","li","streamdown",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/streamdown","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"streamdown"}]]}]}]]}],["$","$L4e",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/neon-tokens.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/components/reasoning/reasoning.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]