51: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/2ntfcxrkfxczh.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"] 52: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/2ntfcxrkfxczh.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"] 53:Tb56d,"use client"; /** * @author: @kokonutui * @description: AI Input Search * @version: 4.0.0 * @date: 2026-10-18 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { Braces, Check, ChevronDown, CornerDownLeft, FileText, Globe, ImageIcon, Lightbulb, type LucideIcon, Plus, Settings2, Telescope, X, } from "lucide-react"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { type ReactNode, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Textarea } from "@/components/ui/textarea"; import { useAutoResizeTextarea } from "@/hooks/use-auto-resize-textarea"; import { cn } from "@/lib/utils"; const EASE_OUT = [0.23, 1, 0.32, 1] as const; const EASE_OUT_CSS = "ease-[cubic-bezier(0.23,1,0.32,1)]"; const WWW = /^www\./; export interface SearchTool { id: string; /** Shown in the menu and on the chip. */ label: string; icon: LucideIcon; /** What the trace says while this tool works, e.g. "Searching the web". */ activity: string; /** Placeholder while the tool is picked. */ placeholder?: string; /** True when the tool reads sources, so the trace stacks them up. */ readsSources?: boolean; /** Runs left today. The menu shows them as dots and locks the tool at zero. */ limit?: number; /** One quiet line under the label in the menu. */ hint?: string; /** Any CSS color. Tints the icon tile, the pill and the caret. */ color?: string; } export interface SearchSource { /** e.g. "developer.mozilla.org" */ domain: string; title: string; /** The site's mark, e.g. a favicon or logo. Wins over the letter avatar. */ icon?: ReactNode; /** Brand colour for the letter avatar; without it, one is derived. */ color?: string; } export interface AIInputSearchProps { placeholder?: string; tools?: SearchTool[]; /** Tool picked at first. Pass null to start with none. */ defaultTool?: string | null; models?: string[]; defaultModel?: string; /** * Runs the request. Call `onSource` for each source as it is read, and * resolve when the answer is ready; `signal` aborts on Stop. Without it, * the component plays a pretend run so the demo feels alive. */ onSearch?: ( query: string, options: { tool: SearchTool | null; model: string; files: File[]; signal: AbortSignal; onSource: (source: SearchSource) => void; } ) => Promise | void; className?: string; } type Phase = "idle" | "working" | "done" | "stopped"; const DEFAULT_TOOLS: SearchTool[] = [ { id: "browse", label: "Browse sources", hint: "Answers with links you can check", icon: Globe, color: "#0ea5e9", activity: "Searching the web", placeholder: "Look something up", readsSources: true, }, { id: "investigate", label: "Investigate", hint: "Reads widely, takes a few minutes", icon: Telescope, color: "#8b5cf6", activity: "Investigating", placeholder: "What should I dig into?", readsSources: true, limit: 3, }, { id: "visual", label: "Draft a visual", hint: "Diagrams, mockups and covers", icon: ImageIcon, color: "#f97316", activity: "Sketching the visual", placeholder: "Describe what to draw", }, { id: "code", label: "Run some code", hint: "Works the numbers in a sandbox", icon: Braces, color: "#10b981", activity: "Running the code", placeholder: "What should the code work out?", }, { id: "reason", label: "Reason it through", hint: "Slower, more careful answers", icon: Lightbulb, color: "#f43f5e", activity: "Thinking it over", placeholder: "Ask something hard", }, ]; const DEFAULT_MODELS = ["Opus 5.5", "Sonnet 5.5", "Haiku 5.5"]; const DEMO_SOURCES: SearchSource[] = [ { domain: "developer.mozilla.org", title: "429 Too Many Requests", color: "#18181b", }, { domain: "cloudflare.com", title: "What is rate limiting?", color: "#f38020", }, { domain: "github.com", title: "upstash/ratelimit: serverless rate limiting", color: "#24292f", }, { domain: "vercel.com", title: "Rate limiting at the edge", color: "#000" }, { domain: "stripe.com", title: "Scaling your API with rate limiters", color: "#635bff", }, { domain: "redis.io", title: "Rate limiting with sorted sets", color: "#dc382d", }, { domain: "ietf.org", title: "RateLimit header fields for HTTP", color: "#4b5563", }, { domain: "stackoverflow.com", title: "Token bucket vs sliding window", color: "#f48024", }, { domain: "aws.amazon.com", title: "Throttling requests in API Gateway", color: "#232f3e", }, { domain: "nginx.org", title: "Module ngx_http_limit_req_module", color: "#009639", }, { domain: "arxiv.org", title: "Fair queuing for multi-tenant APIs", color: "#b31b1b", }, { domain: "martinfowler.com", title: "Circuit breaker", color: "#2d7fb8" }, ]; const STACK_MAX = 5; const wait = (ms: number, signal: AbortSignal) => new Promise((resolve, reject) => { const id = setTimeout(resolve, ms); signal.addEventListener( "abort", () => { clearTimeout(id); reject(new DOMException("Stopped", "AbortError")); }, { once: true } ); }); async function demoRun( tool: SearchTool | null, signal: AbortSignal, onSource: (source: SearchSource) => void ) { await wait(500, signal); if (!tool?.readsSources) { await wait(1600, signal); return; } // Investigating reads more and faster than a quick browse. const deep = (tool.limit ?? 0) > 0; for (const source of DEMO_SOURCES.slice(0, deep ? 12 : 5)) { await wait(deep ? 200 : 260, signal); onSource(source); } await wait(700, signal); } const fileKey = (file: File) => `${file.name}-${file.size}-${file.lastModified}`; const seconds = (ms: number) => `${(ms / 1000).toFixed(1)}s`; /** A steady hue per domain, so an unbranded site still gets its own colour. */ const hueOf = (domain: string) => { let hash = 0; for (const char of domain) { hash = (hash * 31 + char.charCodeAt(0)) % 360; } return hash; }; /** * The site's avatar: its own icon when given, otherwise its first letter on * its brand colour, so the trace needs no favicon service. */ function SourceAvatar({ source, ring, size = "sm", }: { source: SearchSource; ring?: boolean; size?: "sm" | "md"; }) { const name = source.domain.replace(WWW, ""); return ( ); } function SourceStack({ sources }: { sources: SearchSource[] }) { const shown = sources.slice(-STACK_MAX); if (shown.length === 0) { return ( ); } // Sites stack up as they are read; the newest lands at the end. return ( {shown.map((source, i) => ( 0 && "-ml-1")} exit={{ opacity: 0, transition: { duration: 0.1 } }} initial={{ opacity: 0, x: -6, filter: "blur(2px)" }} key={source.domain} layout="position" transition={{ duration: 0.2, ease: EASE_OUT }} > ))} ); } /** * Small white key that sits on the grey frame: the frame's own buttons * (Change, Sources) share it so the bands read as one piece. */ const frameKey = cn( "flex h-6 shrink-0 items-center gap-1.5 rounded-md bg-white px-2 font-medium text-[11px] text-black shadow-[0_1px_1px_rgb(0_0_0/0.04)] outline-hidden ring-1 ring-black/[0.08]", "transition-[background-color,box-shadow] duration-150", EASE_OUT_CSS, "hover:bg-zinc-50 focus-visible:ring-2 focus-visible:ring-black/20", "dark:bg-zinc-800 dark:text-white dark:shadow-none dark:ring-white/10 dark:focus-visible:ring-white/30 dark:hover:bg-zinc-700" ); /** The sources open as a second card in the frame, under the first. */ function SourceList({ id, sources }: { id: string; sources: SearchSource[] }) { return (

{source.title} {source.domain} {i + 1}

); } const traceLabel = ( phase: Phase, tool: SearchTool | null, count: number ): string => { const noun = count === 1 ? "source" : "sources"; if (phase === "working") { if (count > 0) { return "Reading sources"; } return tool?.activity ?? "Writing the answer"; } if (phase === "stopped") { return count > 0 ? `Stopped after ${count} ${noun}` : "Stopped"; } return count > 0 ? `Read ${count} ${noun}` : "Done"; }; /** Under the box: what the run is doing now, then what it read. */ function Trace({ phase, tool, sources, elapsed, expanded, onToggle, listId, }: { phase: Phase; tool: SearchTool | null; sources: SearchSource[]; elapsed: number; expanded: boolean; onToggle: () => void; listId: string; }) { const finished = phase === "done" || phase === "stopped"; const canOpen = finished && sources.length > 0; const label = traceLabel(phase, tool, sources.length); const ToolIcon = tool?.icon; return (

{/* A band on the frame, the twin of the header above the card. */}

{tool?.readsSources || !ToolIcon ? ( ) : ( )} {label} {phase === "working" && sources.length > 0 && ( {" "} · {sources.length} )} {seconds(elapsed)} {canOpen && ( {expanded ? "Hide" : "Sources"} )}

{expanded && }

); } const ghostButton = cn( "flex h-8 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-black/70 text-xs outline-hidden dark:text-white/70", "transition-[background-color,color] duration-150", EASE_OUT_CSS, "hover:bg-black/[0.04] hover:text-black dark:hover:bg-white/[0.06] dark:hover:text-white", "data-[state=open]:bg-black/[0.05] data-[state=open]:text-black dark:data-[state=open]:bg-white/[0.08] dark:data-[state=open]:text-white", "focus-visible:ring-2 focus-visible:ring-black/15 dark:focus-visible:ring-white/20" ); const menuPanel = "origin-(--radix-dropdown-menu-content-transform-origin) rounded-xl border-black/10 p-1 shadow-[0_8px_24px_-8px_rgb(0_0_0/0.18)] dark:border-white/10 dark:bg-zinc-900"; /** * Width of what an element holds, so its wrapper can animate to it rather * than snap when a label changes. */ function useContentWidth() { const ref = useRef(null); const [width, setWidth] = useState("auto"); useLayoutEffect(() => { const node = ref.current; if (!node) { return; } const observer = new ResizeObserver(([entry]) => { setWidth(entry.borderBoxSize[0].inlineSize); }); observer.observe(node); return () => observer.disconnect(); }, []); return [ref, width] as const; } /** Runs left as dots, so a metered tool reads at a glance. */ function RunsLeft({ left, limit }: { left: number; limit: number }) { return ( 0 ? `${left} left today` : "None left today"} > {Array.from({ length: limit }, (_, i) => ( ))} ); } /** * Tools trigger and picked tool in one pill: picking a tool morphs the * pill into it (icon, name, tint and an x) instead of adding a second chip. */ function ToolPill({ tools, tool, remaining, open, onOpenChange, onSelect, onCloseAutoFocus, }: { tools: SearchTool[]; tool: SearchTool | null; remaining: Record; open: boolean; onOpenChange: (open: boolean) => void; onSelect: (id: string | null) => void; onCloseAutoFocus: (event: Event) => void; }) { const [innerRef, width] = useContentWidth(); const Icon = tool?.icon ?? Settings2; const label = tool?.label ?? "Tools"; // Number keys pick a tool while the menu is open. const onMenuKeyDown = (event: React.KeyboardEvent) => { const index = Number(event.key) - 1; const picked = tools[index]; if (!(Number.isInteger(index) && picked)) { return; } const left = remaining[picked.id]; if (left !== undefined && left <= 0) { return; } event.preventDefault(); onSelect(picked.id === tool?.id ? null : picked.id); onOpenChange(false); }; return (

Tools Press 1–{tools.length}

{tools.map((item, i) => { const ItemIcon = item.icon; const isSelected = item.id === tool?.id; const left = remaining[item.id]; const spent = left !== undefined && left <= 0; return ( span:first-child]:hidden", "focus:bg-black/[0.04] dark:focus:bg-white/[0.06]" )} disabled={spent} key={item.id} // Picking the active tool again clears it, like the pill's x. onCheckedChange={(checked) => onSelect(checked ? item.id : null) } style={ { "--tool": item.color ?? "currentColor", } as React.CSSProperties } > {item.label} {left !== undefined && item.limit !== undefined && ( )} {item.hint && ( {spent ? "None left today" : item.hint} )} {isSelected ? ( ); })} {tool && ( onSelect(null)} transition={{ duration: 0.18, ease: EASE_OUT }} type="button" > )} ); } function ModelMenu({ models, selected, onSelect, onCloseAutoFocus, }: { models: string[]; selected: string; onSelect: (model: string) => void; onCloseAutoFocus: (event: Event) => void; }) { return ( {models.map((model) => ( onSelect(model)} > {model} {model === selected && ( ))} ); } function FileChip({ file, onRemove }: { file: File; onRemove: () => void }) { return ( ); } /** * The band on the frame above the card, as in AI Input Selector: says what * the picked tool will do, and swaps with a short blur when the tool does. */ function ToolHeader({ tool, left, onOpenTools, }: { tool: SearchTool | null; left: number | undefined; onOpenTools: () => void; }) { const Icon = tool?.icon ?? Settings2; const text = tool ? (tool.hint ?? tool.label) : "No tool picked, the model answers on its own"; const swap = { animate: { opacity: 1, filter: "blur(0px)", y: 0 }, exit: { opacity: 0, filter: "blur(2px)", y: -6 }, initial: { opacity: 0, filter: "blur(2px)", y: 6 }, transition: { duration: 0.2, ease: EASE_OUT }, }; return (

); } function SendStopButton({ running, canSubmit, onSubmit, onStop, }: { running: boolean; canSubmit: boolean; onSubmit: () => void; onStop: () => void; }) { const [innerRef, width] = useContentWidth(); const live = running || canSubmit; // A worded key rather than an arrow: "Ask" with the return glyph, which // turns into "Stop" while a run is going. Only the face swaps; the key // eases to the new width. Phones get the glyph alone. const face = running ? "stop" : "ask"; return ( {face === "stop" ? ( <> Stop ) : ( <> Ask ); } export default function AI_Input_Search({ placeholder = "Ask anything, or type / for tools", tools = DEFAULT_TOOLS, defaultTool = "browse", models = DEFAULT_MODELS, defaultModel = "Sonnet 5.5", onSearch, className, }: AIInputSearchProps) { const [value, setValue] = useState(""); const [toolId, setToolId] = useState(defaultTool); const [menuOpen, setMenuOpen] = useState(false); const [model, setModel] = useState(defaultModel); const [files, setFiles] = useState([]); const [remaining, setRemaining] = useState>(() => Object.fromEntries( tools.flatMap((t) => (t.limit === undefined ? [] : [[t.id, t.limit]])) ) ); const [phase, setPhase] = useState("idle"); const [runTool, setRunTool] = useState(null); const [sources, setSources] = useState([]); const [elapsed, setElapsed] = useState(0); const [expanded, setExpanded] = useState(false); const abortRef = useRef(null); const fileInputRef = useRef(null); const listId = useId(); const { textareaRef, adjustHeight } = useAutoResizeTextarea({ minHeight: 56, maxHeight: 200, }); const tool = tools.find((t) => t.id === toolId) ?? null; const running = phase === "working"; useEffect(() => () => abortRef.current?.abort(), []); // The clock ticks only while a run is going, from zero each time. useEffect(() => { if (!running) { return; } const start = performance.now(); const timer = setInterval(() => setElapsed(performance.now() - start), 100); return () => clearInterval(timer); }, [running]); const pickTool = (id: string | null) => { setToolId(id); textareaRef.current?.focus(); }; // Menus hand focus back to the field, not their trigger, so typing carries on. const backToField = (event: Event) => { event.preventDefault(); textareaRef.current?.focus(); }; // A metered tool spends a run; at zero it drops off the box. const spendRun = (spent: SearchTool | null) => { const left = spent ? remaining[spent.id] : undefined; if (!spent || left === undefined) { return; } setRemaining((current) => ({ ...current, [spent.id]: left - 1 })); if (left - 1 <= 0) { setToolId(null); } }; const submit = async () => { const query = value.trim(); if (!query || running) { return; } const controller = new AbortController(); abortRef.current = controller; const attached = files; setValue(""); setFiles([]); adjustHeight(true); setSources([]); setElapsed(0); setExpanded(false); setRunTool(tool); setPhase("working"); spendRun(tool); const onSource = (source: SearchSource) => { if (controller.signal.aborted) { return; } setSources((current) => [ ...current.filter((s) => s.domain !== source.domain), source, ]); }; try { await (onSearch ? onSearch(query, { tool, model, files: attached, signal: controller.signal, onSource, }) : demoRun(tool, controller.signal, onSource)); if (!controller.signal.aborted) { setPhase("done"); } } catch { // Stopped: `stop` has already set the phase. Any other failure still // ends the run, so the clock and the Stop button don't hang. if (!controller.signal.aborted) { setPhase("stopped"); } } finally { if (abortRef.current === controller) { abortRef.current = null; } } }; const stop = () => { abortRef.current?.abort(); abortRef.current = null; setPhase("stopped"); textareaRef.current?.focus(); }; // Mouse convenience: clicking the box around the field focuses it. Clicks // on the controls keep their own behaviour. const handleContainerClick = (target: EventTarget) => { if (target instanceof Element && target.closest("button, [role=menu]")) { return; } textareaRef.current?.focus(); }; const canSubmit = value.trim().length > 0 && !running; return (

{/* biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/useKeyWithClickEvents lint/a11y/noNoninteractiveElementInteractions: pointer-only shortcut; the textarea and buttons inside are keyboard reachable */}

handleContainerClick(e.target)} > setMenuOpen(true)} tool={tool} /> {/* Card on a soft frame, as in AI Prompt; the trace opens in the frame. */}

{files.length > 0 && (

{files.map((file) => ( { setFiles((current) => current.filter((f) => f !== file) ); // The chip leaves with its button; typing carries // on in the field, as in AI Prompt. textareaRef.current?.focus(); }} /> ))}

)}

{
                setValue(e.target.value);
                adjustHeight();
              }}
              onKeyDown={(e) => {
                if (e.nativeEvent.isComposing) {
                  return;
                }
                if (e.key === "Enter" && !e.shiftKey) {
                  e.preventDefault();
                  submit();
                } else if (e.key === "Escape" && running) {
                  e.preventDefault();
                  stop();
                } else if (e.key === "/" && value === "") {
                  // "/" in an empty box opens the tools, keyboard first.
                  e.preventDefault();
                  setMenuOpen(true);
                } else if (e.key === "Backspace" && value === "" && toolId) {
                  // Backspace in an empty box takes the chip off, as in a
                  // tag field.
                  e.preventDefault();
                  setToolId(null);
                }
              }}
              placeholder={tool?.placeholder ?? placeholder}
              ref={textareaRef}
              style={tool?.color ? { caretColor: tool.color } : undefined}
              value={value}
            />

<div className="flex items-center gap-1 px-2.5 pt-1 pb-2.5">
              <button
                aria-label="Attach files"
                className={cn(
                  "flex size-8 shrink-0 items-center justify-center rounded-full text-black/60 outline-hidden ring-1 ring-black/10 dark:text-white/60 dark:ring-white/15",
                  "transition-[background-color,color] duration-150",
                  EASE_OUT_CSS,
                  "hover:bg-black/5 hover:text-black dark:hover:bg-white/10 dark:hover:text-white",
                  "focus-visible:ring-2 focus-visible:ring-black/20 dark:focus-visible:ring-white/25"
                )}
                onClick={() => fileInputRef.current?.click()}
                type="button"
              >
                <Plus aria-hidden="true" className="size-4" />
              </button>
              <input
                className="hidden"
                multiple
                onChange={(e) => {
                  const picked = Array.from(e.target.files ?? []);
                  // The same file picked twice would share a chip key.
                  setFiles((current) => [
                    ...current,
                    ...picked.filter(
                      (file) =>
                        !current.some((f) => fileKey(f) === fileKey(file))
                    ),
                  ]);
                  e.target.value = "";
                }}
                ref={fileInputRef}
                tabIndex={-1}
                type="file"
              />
              <ToolPill
                onCloseAutoFocus={backToField}
                onOpenChange={setMenuOpen}
                onSelect={pickTool}
                open={menuOpen}
                remaining={remaining}
                tool={tool}
                tools={tools}
              />
              <div className="min-w-0 flex-1" />
              <ModelMenu
                models={models}
                onCloseAutoFocus={backToField}
                onSelect={setModel}
                selected={model}
              />
              <SendStopButton
                canSubmit={canSubmit}
                onStop={stop}
                onSubmit={submit}
                running={running}
              />
            </div>
          </div>
          <AnimatePresence initial={false}>
            {phase !== "idle" && (
              <motion.div
                animate={{ height: "auto", opacity: 1 }}
                className="overflow-hidden"
                exit={{ height: 0, opacity: 0 }}
                initial={{ height: 0, opacity: 0 }}
                transition={{ duration: 0.2, ease: EASE_OUT }}
              >
                <div>
                  <Trace
                    elapsed={elapsed}
                    expanded={expanded}
                    listId={listId}
                    onToggle={() => setExpanded((open) => !open)}
                    phase={phase}
                    sources={sources}
                    tool={runTool}
                  />
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>

<output aria-live="polite" className="sr-only">
          {phase === "done" && "Done."}
          {phase === "stopped" && "Stopped."}
          {phase === "working" && (runTool?.activity ?? "Working.")}
        </output>
      </div>
    </MotionConfig>
  );
}
54:T56b,import { useCallback, useEffect, useRef } from "react";

interface UseAutoResizeTextareaProps {
  minHeight: number;
  maxHeight?: number;
}

export function useAutoResizeTextarea({
  minHeight,
  maxHeight,
}: UseAutoResizeTextareaProps) {
  const textareaRef = useRef<HTMLTextAreaElement>(null);

const adjustHeight = useCallback(
    (reset?: boolean) => {
      const textarea = textareaRef.current;
      if (!textarea) {
        return;
      }

if (reset) {
        textarea.style.height = `${minHeight}px`;
        return;
      }

// Temporarily shrink to get the right scrollHeight
      textarea.style.height = `${minHeight}px`;

// Calculate new height
      const newHeight = Math.max(
        minHeight,
        Math.min(textarea.scrollHeight, maxHeight ?? Number.POSITIVE_INFINITY)
      );

textarea.style.height = `${newHeight}px`;
    },
    [minHeight, maxHeight]
  );

useEffect(() => {
    // Set initial height
    const textarea = textareaRef.current;
    if (textarea) {
      textarea.style.height = `${minHeight}px`;
    }
  }, [minHeight]);

// Adjust height on window resize
  useEffect(() => {
    const handleResize = () => adjustHeight();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, [adjustHeight]);

return { textareaRef, adjustHeight };
}
50:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@catalogs","registryDependencies":["textarea","dropdown-menu"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"/components/kokonutui/ai-input-search.tsx","content":"$53","type":"registry:component","target":"components/kokonutui/ai-input-search.tsx"},{"path":"/hooks/use-auto-resize-textarea.ts","content":"$54","type":"registry:hook","target":"hooks/use-auto-resize-textarea.ts"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>