2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T7d72,"use client"; import { IconArrowUp, IconClock, IconPlayerStopFilled, IconPlus, IconX } from "@tabler/icons-react"; import { cva, type VariantProps } from "class-variance-authority"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore, type ComponentProps, type CSSProperties, type DragEvent, type FormEvent, type KeyboardEvent, type ReactNode, } from "react"; import { createPortal } from "react-dom"; import { VoiceBeam } from "voice-glow"; import { Button } from "@/components/ui/button"; import { Kbd, KbdGroup } from "@/components/ui/kbd"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Spinner } from "@/components/ui/spinner"; import { Toggle } from "@/components/ui/toggle"; import { cn } from "@/lib/utils"; import { ChatAttachmentGroup, type ChatAttachmentFile, type ChatAttachmentKind } from "../chat-attachment/chat-attachment"; import { segmentPrompt, tokenAtCaret, type PromptTokenItem, type PromptTokenSet } from "./tokens"; import { useControllable } from "./use-controllable"; export type PromptInputStatus = "ready" | "submitted" | "streaming" | "error"; export type PromptInputVariant = "default" | "secondary" | "inline" | "compact"; export type PromptAttachment = ChatAttachmentFile & { id: string; /** The picked file, when it came from this browser. */ file?: File; }; export type PromptSubmit = { text: string; attachments: PromptAttachment[] }; type PromptInputContext = { variant: PromptInputVariant; status: PromptInputStatus; busy: boolean; disabled: boolean; value: string; setValue: (next: string) => void; attachments: PromptAttachment[]; removeAttachment: (id: string) => void; addFiles: (files: File[]) => void; queue: string[]; removeQueued: (index: number) => void; canSend: boolean; submit: () => void; stop: () => void; openPicker: () => void; maxHeight: number; tokens: PromptTokenSet[]; errorMessage?: string; errorId: string; /** The form element: menus portal into it so Voice Glow's overflow clip does not cut them. */ rootEl: HTMLFormElement | null; }; const Ctx = createContext(null); /** Read the composer's state from any part (or from a sibling inside the root). */ export function usePromptInput() { const ctx = useContext(Ctx); if (!ctx) throw new Error("usePromptInput must be used inside "); return ctx; } const rootVariants = cva( "group/prompt-input relative w-full min-w-0 text-foreground transition-[box-shadow,border-color] duration-200 ease-out has-[textarea:focus-visible]:ring-3 has-[textarea:focus-visible]:ring-ring/50 data-dragging:ring-2 data-dragging:ring-ring/60 motion-reduce:transition-none", { variants: { variant: { default: "rounded-[24px] border border-border bg-muted dark:border-transparent", secondary: "rounded-[24px] border border-border bg-background shadow-sm", inline: "rounded-[26px] border border-border bg-muted dark:border-transparent", compact: "rounded-[16px] border border-border bg-muted dark:border-transparent", }, }, defaultVariants: { variant: "default" }, }, ); const GLOW_RADIUS: Record = { default: 23, secondary: 23, inline: 25, compact: 15, }; function subscribeTheme(notify: () => void) { const observer = new MutationObserver(notify); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); return () => observer.disconnect(); } function useDarkTheme() { return useSyncExternalStore( subscribeTheme, () => document.documentElement.classList.contains("dark"), () => false, ); } function kindOf(file: File): ChatAttachmentKind { const ext = file.name.split(".").pop()?.toLowerCase() ?? ""; if (file.type.startsWith("image/")) return "image"; if (ext === "pdf") return "pdf"; if (["xls", "xlsx", "csv", "numbers"].includes(ext)) return "sheet"; if (["doc", "docx", "pages", "rtf"].includes(ext)) return "doc"; return "text"; } const hasFiles = (event: DragEvent) => [...(event.dataTransfer?.types ?? [])].includes("Files"); export type PromptInputProps = Omit, "onSubmit" | "defaultValue" | "children"> & VariantProps & { /** Where the request is: only `ready` and `error` accept a send; the others queue Enter presses. */ status?: PromptInputStatus; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; attachments?: PromptAttachment[]; defaultAttachments?: PromptAttachment[]; onAttachmentsChange?: (attachments: PromptAttachment[]) => void; /** Prompts waiting for the current reply to finish. Sent one by one when status returns to `ready`. */ queue?: string[]; defaultQueue?: string[]; onQueueChange?: (queue: string[]) => void; /** Enter while busy adds to the queue (default) instead of being ignored. */ queueWhileBusy?: boolean; onSubmit?: (submit: PromptSubmit) => void; /** Called by the stop button while streaming. */ onStop?: () => void; disabled?: boolean; /** Largest height of the text area in px before it scrolls. */ maxHeight?: number; /** Most files that can be attached. */ maxFiles?: number; /** `@mention` and `/command` sets: drawn as pills, with a menu while typing. */ tokens?: PromptTokenSet[]; /** Words shown by PromptInputError while status is `error`. */ errorMessage?: string; /** Draw the Voice Glow beam while the request runs. */ glow?: boolean; children: ReactNode; }; /** * A chat composer. Built from parts: `PromptInputQueue`, `PromptInputAttachments`, `PromptInputBody` * (with `PromptInputField` and `PromptInputToolbar`), and the buttons. The root owns the state: * text, attachments, queue, drag and drop, and the send / stop rules. */ export function PromptInput({ variant = "default", status = "ready", value: valueProp, defaultValue = "", onValueChange, attachments: attachmentsProp, defaultAttachments, onAttachmentsChange, queue: queueProp, defaultQueue, onQueueChange, queueWhileBusy = true, onSubmit, onStop, disabled = false, maxHeight = 200, maxFiles = 8, tokens = [], errorMessage, glow = true, children, className, ...props }: PromptInputProps) { const v = variant ?? "default"; const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange); const [attachments, setAttachments] = useControllable(attachmentsProp, defaultAttachments ?? [], onAttachmentsChange); const [queue, setQueue] = useControllable(queueProp, defaultQueue ?? [], onQueueChange); const [dragging, setDragging] = useState(false); const depth = useRef(0); const picker = useRef(null); const [rootEl, setRootEl] = useState(null); const errorId = useId(); const reduce = useReducedMotion(); const dark = useDarkTheme(); const busy = status === "submitted" || status === "streaming"; const canSend = !disabled && (value.trim().length > 0 || attachments.length > 0); const blobs = useRef(new Set()); useEffect(() => { const urls = blobs.current; return () => { for (const url of urls) URL.revokeObjectURL(url); }; }, []); const addFiles = useCallback( (files: File[]) => { if (disabled || files.length === 0) return; setAttachments((held) => { const room = Math.max(0, maxFiles - held.length); const added = files.slice(0, room).map((file) => { const kind = kindOf(file); const src = kind === "image" ? URL.createObjectURL(file) : undefined; if (src) blobs.current.add(src); return { id: crypto.randomUUID(), name: file.name, kind, size: file.size, src, file, }; }); return [...held, ...added]; }); }, [disabled, maxFiles, setAttachments], ); const removeAttachment = useCallback( (id: string) => { setAttachments((held) => { const gone = held.find((a) => a.id === id); if (gone?.src && blobs.current.delete(gone.src)) URL.revokeObjectURL(gone.src); return held.filter((a) => a.id !== id); }); }, [setAttachments], ); const submit = useCallback(() => { const text = value.trim(); if (disabled || (!text && attachments.length === 0)) return; if (busy) { if (queueWhileBusy && text) { setQueue((q) => [...q, text]); setValue(""); } return; } onSubmit?.({ text, attachments }); setValue(""); setAttachments([]); }, [attachments, busy, disabled, onSubmit, queueWhileBusy, setAttachments, setQueue, setValue, value]); // Send queued prompts one at a time once the reply is done. useEffect(() => { if (status !== "ready" || queue.length === 0 || disabled) return; const timer = setTimeout(() => { const [next, ...rest] = queue; setQueue(rest); onSubmit?.({ text: next, attachments: [] }); }, 0); return () => clearTimeout(timer); }, [status, queue, disabled, onSubmit, setQueue]); const ctx = useMemo( () => ({ variant: v, status, busy, disabled, value, setValue, attachments, removeAttachment, addFiles, queue, removeQueued: (i) => setQueue((q) => q.filter((_, at) => at !== i)), canSend, submit, stop: () => onStop?.(), openPicker: () => picker.current?.click(), maxHeight, tokens, errorMessage, errorId, rootEl, }), [ rootEl, v, status, busy, disabled, value, setValue, attachments, removeAttachment, addFiles, queue, setQueue, canSend, submit, onStop, maxHeight, tokens, errorMessage, errorId, ], ); const onSubmitForm = (event: FormEvent) => { event.preventDefault(); submit(); }; const onDragEnter = (event: DragEvent) => { if (disabled || !hasFiles(event)) return; depth.current += 1; setDragging(true); }; const onDragOver = (event: DragEvent) => { if (disabled || !hasFiles(event)) return; event.preventDefault(); event.dataTransfer.dropEffect = "copy"; }; const onDragLeave = (event: DragEvent) => { if (!hasFiles(event)) return; depth.current = Math.max(0, depth.current - 1); if (depth.current === 0) setDragging(false); }; const onDrop = (event: DragEvent) => { if (!hasFiles(event)) return; event.preventDefault(); depth.current = 0; setDragging(false); addFiles([...event.dataTransfer.files]); }; return ( ); } /** Prompts waiting behind the running reply, as removable chips. Renders nothing when the queue is empty. */ export function PromptInputQueue({ className, ...props }: ComponentProps<"ul">) { const { queue, removeQueued } = usePromptInput(); if (queue.length === 0) return null; return (

{queue.map((text, i) => ( {text} ))}

); } /** Attached files with a remove button each. Renders nothing when there are none. */ export function PromptInputAttachments({ layout = "rows", className, }: { /** "rows" are compact file chips; "tiles" are thumbnails. */ layout?: "rows" | "tiles"; className?: string; }) { const { attachments, removeAttachment } = usePromptInput(); if (attachments.length === 0) return null; return (

removeAttachment(file.id!)} className="gap-2 py-0.5" />

); } /** Holds the field and the toolbar. In the `inline` variant they sit on one row. */ export function PromptInputBody({ className, ...props }: ComponentProps<"div">) { const { variant } = usePromptInput(); return (

); } const pillTone = { "@": "bg-info/15 text-info shadow-[0_0_0_2px_color-mix(in_oklab,var(--info)_15%,transparent)]", "/": "bg-foreground/10 text-foreground shadow-[0_0_0_2px_color-mix(in_oklab,var(--foreground)_10%,transparent)]", } as const; const fieldType = "px-2.5 py-1.5 text-base leading-6 [overflow-wrap:break-word] whitespace-pre-wrap"; export type PromptInputFieldProps = Omit, "value" | "defaultValue" | "onChange" | "rows">; /** * The text area. Grows to `maxHeight`, then scrolls. Enter sends (or queues while busy), Shift+Enter * adds a line. With `tokens` set on the root, typing `@` or `/` opens a menu and finished tokens are * drawn as pills. */ export function PromptInputField({ placeholder = "Ask anything", className, onKeyDown, onPaste, onSelect, "aria-label": ariaLabel = "Message", ...props }: PromptInputFieldProps) { const { variant, value, setValue, submit, addFiles, disabled, status, maxHeight, tokens, errorId, errorMessage, rootEl } = usePromptInput(); const ref = useRef(null); const mirror = useRef(null); const menuId = useId(); const [caret, setCaret] = useState(0); const [dismissed, setDismissed] = useState(null); const [cursor, setCursor] = useState(0); const segments = useMemo(() => segmentPrompt(value, tokens), [value, tokens]); const query = tokens.length ? tokenAtCaret(value, caret, tokens) : null; const options = useMemo(() => { if (!query) return [] as PromptTokenItem[]; const set = tokens.find((s) => s.trigger === query.trigger); const q = query.query.toLowerCase(); return (set?.items ?? []).filter((i) => i.label.toLowerCase().includes(q)); }, [query, tokens]); const open = !!query && options.length > 0 && dismissed !== query.start && !disabled; const active = Math.min(cursor, Math.max(0, options.length - 1)); /** Escape hides the menu for the token being typed; moving to another token (or none) brings it back. */ const track = (text: string, at: number) => { setCaret(at); const q = tokens.length ? tokenAtCaret(text, at, tokens) : null; setDismissed((d) => (q && d === q.start ? d : null)); }; const choose = (item: PromptTokenItem) => { if (!query) return; const el = ref.current; const end = el?.selectionStart ?? caret; const insert = `${query.trigger}${item.label} `; const next = value.slice(0, query.start) + insert + value.slice(end); const pos = query.start + insert.length; setValue(next); track(next, pos); setCursor(0); requestAnimationFrame(() => { ref.current?.focus(); ref.current?.setSelectionRange(pos, pos); }); }; const handleKeyDown = (event: KeyboardEvent) => { onKeyDown?.(event); if (event.defaultPrevented || event.nativeEvent.isComposing) return; if (open) { if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault(); setCursor((c) => (event.key === "ArrowDown" ? (c + 1) % options.length : (c - 1 + options.length) % options.length)); return; } if (event.key === "Enter" || event.key === "Tab") { event.preventDefault(); choose(options[active]); return; } if (event.key === "Escape") { event.preventDefault(); if (query) setDismissed(query.start); return; } } if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); submit(); } }; const tokenized = tokens.length > 0; const invalid = status === "error"; return (

{tokenized ? (

{segments.map((seg, i) => seg.token ? ( {seg.text} ) : ( {seg.text} ), )} {""}

) : null}

{
          setValue(event.target.value);
          track(event.target.value, event.target.selectionStart);
          setCursor(0);
        }}
        onSelect={(event) => {
          onSelect?.(event);
          track(event.currentTarget.value, event.currentTarget.selectionStart);
        }}
        onScroll={(event) => {
          if (mirror.current) mirror.current.style.transform = `translateY(${-event.currentTarget.scrollTop}px)`;
        }}
        onKeyDown={handleKeyDown}
        onPaste={(event) => {
          onPaste?.(event);
          const files = [...event.clipboardData.files];
          if (files.length === 0 || event.defaultPrevented) return;
          event.preventDefault();
          addFiles(files);
        }}
        className={cn(
          fieldType,
          "relative block max-h-(--pi-max) min-h-9 w-full field-sizing-content resize-none overflow-y-auto bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
          variant === "compact" && "min-h-8 py-1 text-sm",
          tokenized && "scrollbar-none text-transparent caret-foreground selection:bg-primary/25 selection:text-foreground",
          className,
        )}
        {...props}
      />
      {open && rootEl
        ? createPortal(
            <ul
              id={menuId}
              role="listbox"
              aria-label={tokens.find((s) => s.trigger === query!.trigger)?.title ?? "Suggestions"}
              data-slot="prompt-input-menu"
              className="absolute start-3 bottom-full z-40 mb-2 max-h-56 w-72 max-w-[calc(100%-1.5rem)] overflow-y-auto rounded-[12px] bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 animate-in fade-in-0 zoom-in-95 duration-150 motion-reduce:animate-none"
            >
              {options.map((item, i) => (
                <li
                  key={item.id}
                  id={`${menuId}-${i}`}
                  role="option"
                  aria-selected={i === active}
                  onMouseDown={(event) => {
                    event.preventDefault();
                    choose(item);
                  }}
                  onMouseEnter={() => setCursor(i)}
                  className="flex cursor-default items-baseline gap-2 rounded-[8px] px-2 py-1.5 text-sm aria-selected:bg-accent aria-selected:text-accent-foreground"
                >
                  <span className="font-medium">
                    {query!.trigger}
                    {item.label}
                  </span>
                  {item.description ? <span className="min-w-0 truncate text-xs text-muted-foreground">{item.description}</span> : null}
                </li>
              ))}
            </ul>,
            rootEl,
          )
        : null}
    </div>
  );
}

/** Row under the field: tools on the start side, actions on the end. In `inline` it dissolves into the body row. */
export function PromptInputToolbar({ className, ...props }: ComponentProps<"div">) {
  const { variant } = usePromptInput();
  return (
    <div
      data-slot="prompt-input-toolbar"
      className={cn(variant === "inline" ? "contents" : "flex items-center justify-between gap-1 pt-0.5", className)}
      {...props}
    />
  );
}

export function PromptInputTools({ className, ...props }: ComponentProps<"div">) {
  const { variant } = usePromptInput();
  return (
    <div
      data-slot="prompt-input-tools"
      className={cn("relative z-10 flex min-w-0 items-center gap-0.5", variant === "inline" && "order-1", className)}
      {...props}
    />
  );
}

export function PromptInputActions({ className, ...props }: ComponentProps<"div">) {
  const { variant } = usePromptInput();
  return (
    <div
      data-slot="prompt-input-actions"
      className={cn("relative z-10 flex shrink-0 items-center gap-1", variant === "inline" && "order-3", className)}
      {...props}
    />
  );
}

/** Footer row for text actions (review composer). */
export function PromptInputFooter({ className, ...props }: ComponentProps<"div">) {
  return (
    <div data-slot="prompt-input-footer" className={cn("flex flex-wrap items-center justify-end gap-2 px-1.5 pt-1.5 pb-0.5", className)} {...props} />
  );
}

const iconSize = (variant: PromptInputVariant) => (variant === "compact" ? "icon-sm" : "icon-lg");

/** Opens the file picker. */
export function PromptInputAttachButton({
  label = "Add files",
  children,
  className,
  ...props
}: Omit<ComponentProps<typeof Button>, "size" | "onClick"> & {
  label?: string;
}) {
  const { variant, disabled, openPicker } = usePromptInput();
  return (
    <Button
      data-slot="prompt-input-attach"
      type="button"
      variant="ghost"
      rounded
      size={iconSize(variant)}
      disabled={disabled || props.disabled}
      aria-label={label}
      onClick={openPicker}
      className={cn("text-muted-foreground hover:text-foreground", className)}
      {...props}
    >
      {children ?? <IconPlus />}
    </Button>
  );
}

/** A toggle for a tool (search, reasoning). Controlled with `pressed` / `onPressedChange`. */
export function PromptInputToolToggle({ children, icon, className, ...props }: ComponentProps<typeof Toggle> & { icon?: ReactNode }) {
  const { variant, disabled } = usePromptInput();
  return (
    <Toggle
      data-slot="prompt-input-tool"
      size={variant === "compact" ? "sm" : "default"}
      disabled={disabled || props.disabled}
      className={cn(
        "h-9 gap-1.5 rounded-full px-2.5 text-muted-foreground data-pressed:text-foreground sm:px-3",
        variant === "compact" && "h-7 px-2.5",
        className,
      )}
      {...props}
    >
      {icon}
      {/* Icon-only on narrow screens; the words stay as the accessible name. */}
      <span className={icon ? "max-sm:sr-only" : undefined}>{children}</span>
    </Toggle>
  );
}

export type PromptInputModel = { value: string; label: string };

/** Model picker on Kobra's Select. Opens upward by default so it clears the bottom of the screen. */
export function PromptInputModelSelect({
  models,
  value,
  defaultValue,
  onValueChange,
  side = "top",
  className,
  "aria-label": ariaLabel = "Model",
}: {
  models: PromptInputModel[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  side?: "top" | "bottom";
  className?: string;
  "aria-label"?: string;
}) {
  const { variant, disabled } = usePromptInput();
  const [current, setCurrent] = useControllable(value, defaultValue ?? models[0]?.value ?? "", onValueChange);
  return (
    <Select items={models} value={current} onValueChange={(next) => next && setCurrent(next as string)} disabled={disabled}>
      <SelectTrigger
        size="sm"
        aria-label={ariaLabel}
        className={cn(
          "rounded-full border-transparent bg-transparent text-muted-foreground transition-[color,background-color,box-shadow] duration-150 ease-out hover:bg-foreground/6 hover:text-foreground data-popup-open:bg-foreground/6 data-popup-open:text-foreground dark:bg-transparent dark:hover:bg-foreground/10 dark:data-popup-open:bg-foreground/10",
          variant === "compact" ? "h-7 text-xs" : "h-9 ps-3 pe-2",
          className,
        )}
      >
        <SelectValue />
      </SelectTrigger>
      <SelectContent side={side} align="start" alignItemWithTrigger={false} className="w-auto min-w-44">
        {models.map((m) => (
          <SelectItem key={m.value} value={m.value}>
            {m.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

/**
 * Send, and while a reply runs, stop. The visible control never changes its words: it is an icon
 * that turns from arrow to spinner to stop. `submitted` is aria-busy and drops presses.
 */
export function PromptInputSubmit({ className, ...props }: Omit<ComponentProps<typeof Button>, "size" | "type" | "children" | "variant">) {
  const { variant, status, canSend, stop, disabled } = usePromptInput();
  const reduce = useReducedMotion();
  const streaming = status === "streaming";
  const submitted = status === "submitted";
  const icon = streaming ? "stop" : submitted ? "busy" : "send";
  return (
    <Button
      data-slot="prompt-input-submit"
      data-status={status}
      type={streaming || submitted ? "button" : "submit"}
      variant="default"
      rounded
      size={iconSize(variant)}
      aria-label={streaming ? "Stop generating" : "Send message"}
      aria-busy={submitted || undefined}
      disabled={disabled || (!streaming && !submitted && !canSend)}
      onClick={streaming ? stop : undefined}
      className={cn(className)}
      {...props}
    >
      <AnimatePresence initial={false} mode="popLayout">
        <motion.span
          key={icon}
          initial={reduce ? false : { opacity: 0, scale: 0.6 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.6 }}
          transition={reduce ? { duration: 0 } : { duration: 0.18, ease: [0.16, 1, 0.3, 1] }}
          className="flex items-center justify-center"
        >
          {icon === "stop" ? (
            <IconPlayerStopFilled className="size-4" />
          ) : icon === "busy" ? (
            <Spinner aria-hidden role="presentation" variant={reduce ? "bars" : "gradient"} className="size-[18px]" />
          ) : (
            <IconArrowUp className="size-[18px]" />
          )}
        </motion.span>
      </AnimatePresence>
    </Button>
  );
}

/** The words that go with `status="error"`, announced and tied to the field with aria-describedby. */
export function PromptInputError({ children, className, ...props }: ComponentProps<"p">) {
  const { status, errorMessage, errorId } = usePromptInput();
  if (status !== "error") return null;
  const text = children ?? errorMessage;
  if (!text) return null;
  return (
    <p id={errorId} role="alert" data-slot="prompt-input-error" className={cn("px-2.5 pt-1 text-[13px] text-destructive", className)} {...props}>
      {text}
    </p>
  );
}

/** Keyboard hint. Hidden on touch screens, where there is no Shift+Enter. */
export function PromptInputHint({ className, ...props }: ComponentProps<"p">) {
  return (
    <p
      data-slot="prompt-input-hint"
      className={cn("hidden items-center gap-1.5 text-xs text-muted-foreground [@media(hover:hover)]:flex", className)}
      {...props}
    >
      <KbdGroup>
        <Kbd>Enter</Kbd>
      </KbdGroup>
      <span>to send</span>
      <KbdGroup>
        <Kbd>Shift</Kbd>
        <Kbd>Enter</Kbd>
      </KbdGroup>
      <span>for a new line</span>
    </p>
  );
}
31:T771,/** Inline token helpers: `@mention` and `/command` words that the composer draws as pills. */

export type PromptTokenItem = {
  id: string;
  /** Text after the trigger, no spaces: "maya" renders as @maya. */
  label: string;
  description?: string;
};

export type PromptTokenSet = {
  trigger: "@" | "/";
  title?: string;
  items: PromptTokenItem[];
};

export type PromptSegment = {
  text: string;
  token?: { trigger: "@" | "/"; item: PromptTokenItem };
};

const WORD = /(^|\s)([@/])([\w-]+(?:\.[\w-]+)*)/g;

/** Split text into plain runs and known tokens. A token is a trigger plus a label from the sets. */
export function segmentPrompt(value: string, sets: PromptTokenSet[]): PromptSegment[] {
  if (sets.length === 0 || !value) return [{ text: value }];
  const out: PromptSegment[] = [];
  let last = 0;
  for (const m of value.matchAll(WORD)) {
    const trigger = m[2] as "@" | "/";
    const item = sets.find((s) => s.trigger === trigger)?.items.find((i) => i.label.toLowerCase() === m[3].toLowerCase());
    if (!item) continue;
    const start = (m.index ?? 0) + m[1].length;
    if (start > last) out.push({ text: value.slice(last, start) });
    out.push({ text: value.slice(start, start + 1 + m[3].length), token: { trigger, item } });
    last = start + 1 + m[3].length;
  }
  if (last < value.length) out.push({ text: value.slice(last) });
  return out;
}

export type TokenQuery = { trigger: "@" | "/"; query: string; start: number };

/** The open token being typed at the caret, if any: "@ma|" gives { "@", "ma" }. */
export function tokenAtCaret(value: string, caret: number, sets: PromptTokenSet[]): TokenQuery | null {
  const m = /(^|\s)([@/])([\w-]*)$/.exec(value.slice(0, caret));
  if (!m) return null;
  const trigger = m[2] as "@" | "/";
  if (!sets.some((s) => s.trigger === trigger)) return null;
  return { trigger, query: m[3], start: caret - 1 - m[3].length };
}
32:T18e9,"use client";

import { IconFileSpreadsheet, IconFileText, IconFileTypePdf, IconPhoto, IconX } from "@tabler/icons-react";
import type { ComponentProps, ReactNode } from "react";
import {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentGroup,
  AttachmentMedia,
  AttachmentTitle,
  AttachmentTrigger,
} from "@/components/ui/attachment";
import { Spinner } from "@/components/ui/spinner";
import { cn } from "@/lib/utils";

export type ChatAttachmentKind = "image" | "pdf" | "sheet" | "doc" | "text";

/** What the block needs to draw an attachment. `src` is for images only. */
export type ChatAttachmentFile = {
  id?: string;
  name: string;
  kind: ChatAttachmentKind;
  /** Bytes. */
  size?: number;
  src?: string;
};

export function formatBytes(bytes: number) {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
}

const KIND_LABEL: Record<ChatAttachmentKind, string> = { image: "Image", pdf: "PDF", sheet: "Sheet", doc: "Document", text: "Text" };

function KindIcon({ kind }: { kind: ChatAttachmentKind }) {
  const Icon = kind === "pdf" ? IconFileTypePdf : kind === "sheet" ? IconFileSpreadsheet : kind === "image" ? IconPhoto : IconFileText;
  return <Icon stroke={1.5} aria-hidden />;
}

type AttachmentState = NonNullable<ComponentProps<typeof Attachment>["state"]>;

export type ChatAttachmentProps = Omit<ComponentProps<typeof Attachment>, "children" | "state" | "onClick"> & {
  file: ChatAttachmentFile;
  /** "message" is read-only (optionally openable); "composer" adds the remove button. */
  variant?: "message" | "composer";
  state?: AttachmentState;
  /** Shown instead of the size line while state is "error". */
  errorText?: string;
  onRemove?: () => void;
  /** Makes the whole card a button (for example to open a preview). */
  onOpen?: () => void;
};

/**
 * One attachment: an image thumbnail or a file card, on Kobra's Attachment. `orientation="vertical"`
 * makes a tile, the default is a row.
 */
export function ChatAttachment({
  file,
  variant = "message",
  state = "done",
  errorText = "Upload failed",
  orientation = "horizontal",
  size,
  onRemove,
  onOpen,
  className,
  ...props
}: ChatAttachmentProps) {
  const isImage = file.kind === "image";
  const busy = state === "uploading" || state === "processing";
  const meta = state === "error" ? errorText : [KIND_LABEL[file.kind], file.size != null ? formatBytes(file.size) : null].filter(Boolean).join(" · ");
  const tile = orientation === "vertical";
  return (
    <Attachment
      data-variant={variant}
      aria-busy={busy || undefined}
      state={state}
      orientation={orientation}
      size={size}
      className={cn(variant === "composer" && (size === "xs" ? "rounded-[10px]" : "rounded-[12px]"), className)}
      {...props}
    >
      <AttachmentMedia variant={isImage && file.src ? "image" : "icon"} className={variant === "composer" ? "rounded-[8px]" : undefined}>
        {isImage && file.src ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={file.src} alt="" className="aspect-square size-full object-cover" />
        ) : (
          <KindIcon kind={file.kind} />
        )}
        {busy ? (
          <span className="absolute inset-0 flex items-center justify-center bg-background/50">
            <Spinner aria-hidden role="presentation" className="size-4" />
          </span>
        ) : null}
      </AttachmentMedia>
      <AttachmentContent>
        <AttachmentTitle title={file.name}>{file.name}</AttachmentTitle>
        {!tile || variant === "message" ? <AttachmentDescription>{meta}</AttachmentDescription> : null}
      </AttachmentContent>
      {onOpen ? <AttachmentTrigger onClick={onOpen} aria-label={`Open ${file.name}`} /> : null}
      {variant === "composer" && onRemove ? (
        <AttachmentActions>
          <AttachmentAction
            type="button"
            rounded
            aria-label={`Remove ${file.name}`}
            onClick={onRemove}
            className={tile ? "bg-background/80 backdrop-blur-sm" : undefined}
          >
            <IconX />
          </AttachmentAction>
        </AttachmentActions>
      ) : null}
    </Attachment>
  );
}

export type ChatAttachmentGroupProps = Omit<ComponentProps<typeof AttachmentGroup>, "children"> & {
  files: ChatAttachmentFile[];
  variant?: "message" | "composer";
  orientation?: "horizontal" | "vertical";
  /** Show at most this many, then a "+N" tile. */
  max?: number;
  size?: ComponentProps<typeof Attachment>["size"];
  onRemove?: (file: ChatAttachmentFile, index: number) => void;
  /** Rendered when `files` is empty. */
  empty?: ReactNode;
};

/** Several attachments in a scrolling strip (default) or a grid, with a "+N" overflow tile. */
export function ChatAttachmentGroup({
  files,
  variant = "message",
  orientation = "vertical",
  max,
  size,
  onRemove,
  empty,
  layout = "scroll",
  className,
  ...props
}: ChatAttachmentGroupProps) {
  if (files.length === 0) return empty ? <>{empty}</> : null;
  const shown = max != null ? files.slice(0, max) : files;
  const hidden = files.length - shown.length;
  return (
    <AttachmentGroup
      data-slot="chat-attachment-group"
      role="list"
      aria-label={`${files.length} attachment${files.length === 1 ? "" : "s"}`}
      layout={layout}
      className={cn(className)}
      {...props}
    >
      {shown.map((file, i) => (
        <div key={file.id ?? `${file.name}-${i}`} role="listitem" className="contents">
          <ChatAttachment
            file={file}
            variant={variant}
            orientation={orientation}
            size={size}
            onRemove={onRemove ? () => onRemove(file, i) : undefined}
          />
        </div>
      ))}
      {hidden > 0 ? (
        <Attachment
          role="listitem"
          orientation={orientation}
          size={size}
          state="done"
          className={cn("items-center justify-center bg-muted/50 text-sm font-medium tabular-nums text-muted-foreground", orientation === "vertical" ? "min-h-24 w-24" : "px-3 py-2")}
        >
          +{hidden}
          <span className="sr-only"> more attachments</span>
        </Attachment>
      ) : null}
    </AttachmentGroup>
  );
}
33:T2df1,"use client";

import { IconBrain, IconWorld } from "@tabler/icons-react";
import { useEffect, useRef, useState, type ReactNode } from "react";
import { Button } from "@/components/ui/button";
import { PromptSuggestions } from "../prompt-suggestion/prompt-suggestion";
import { aiAttachments, aiModels, aiQueuedPrompts, aiSuggestions, aiTokenSets } from "../_fixtures";
import { DemoPage, DemoSection } from "../../_shared/variant-frame";
import {
  PromptInput,
  PromptInputActions,
  PromptInputAttachButton,
  PromptInputAttachments,
  PromptInputBody,
  PromptInputError,
  PromptInputField,
  PromptInputFooter,
  PromptInputHint,
  PromptInputModelSelect,
  PromptInputQueue,
  PromptInputSubmit,
  PromptInputToolbar,
  PromptInputToolToggle,
  PromptInputTools,
  usePromptInput,
  type PromptAttachment,
  type PromptInputStatus,
  type PromptInputVariant,
} from "./prompt-input";
import { segmentPrompt } from "./tokens";

function Stage({ children, className }: { children: ReactNode; className?: string }) {
  return <div className={`grid w-full max-w-2xl gap-3 ${className ?? ""}`}>{children}</div>;
}

/** A pretend backend: submitted for 700ms, streaming until 3.2s, then ready. Stop ends it early. */
function useSimulatedReply(initial: PromptInputStatus = "ready") {
  const [status, setStatus] = useState<PromptInputStatus>(initial);
  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
  const clear = () => {
    timers.current.forEach(clearTimeout);
    timers.current = [];
  };
  const send = () => {
    clear();
    setStatus("submitted");
    timers.current = [setTimeout(() => setStatus("streaming"), 700), setTimeout(() => setStatus("ready"), 3200)];
  };
  const stop = () => {
    clear();
    setStatus("ready");
  };
  useEffect(() => clear, []);
  return { status, setStatus, send, stop };
}

function Hint({ children }: { children: ReactNode }) {
  return (
    <p data-demo-chrome className="text-[13px] text-ink-muted">
      {children}
    </p>
  );
}

function SuggestionsDemo() {
  const [value, setValue] = useState("");
  return (
    <Stage>
      <PromptSuggestions items={aiSuggestions} onValueChange={setValue} />
      <PromptInput value={value} onValueChange={setValue} onSubmit={() => setValue("")}>
        <PromptInputBody>
          <PromptInputField />
          <PromptInputToolbar>
            <PromptInputTools>
              <PromptInputAttachButton />
              <PromptInputModelSelect models={aiModels} />
            </PromptInputTools>
            <PromptInputActions>
              <PromptInputSubmit />
            </PromptInputActions>
          </PromptInputToolbar>
        </PromptInputBody>
      </PromptInput>
      <Hint>Pick a chip and the prompt lands in the field.</Hint>
    </Stage>
  );
}

const STATUSES: PromptInputStatus[] = ["ready", "submitted", "streaming", "error"];

function RunStateDemo() {
  const [status, setStatus] = useState<PromptInputStatus>("streaming");
  return (
    <Stage>
      <div data-demo-chrome className="flex flex-wrap gap-1.5" role="group" aria-label="Status">
        {STATUSES.map((s) => (
          <Button key={s} variant={s === status ? "secondary" : "outline"} size="sm" aria-pressed={s === status} onClick={() => setStatus(s)}>
            {s}
          </Button>
        ))}
      </div>
      <PromptInput
        status={status}
        defaultValue="Draft a restock note for the sold-out color"
        onStop={() => setStatus("ready")}
        onSubmit={() => setStatus("submitted")}
        errorMessage="Couldn't reach the model. Check your connection and try again."
      >
        <PromptInputBody>
          <PromptInputField />
          <PromptInputToolbar>
            <PromptInputTools>
              <PromptInputAttachButton />
              <PromptInputModelSelect models={aiModels} />
            </PromptInputTools>
            <PromptInputActions>
              <PromptInputSubmit />
            </PromptInputActions>
          </PromptInputToolbar>
        </PromptInputBody>
        <PromptInputError />
      </PromptInput>
      <Hint>While streaming the arrow is a stop button and the glow runs. Submitted shows a spinner and ignores presses.</Hint>
    </Stage>
  );
}

/** A text send button, for composers that review before sending. */
function PromptInputSend() {
  const { canSend } = usePromptInput();
  return (
    <Button type="submit" rounded disabled={!canSend}>
      Send for review
    </Button>
  );
}

export function PromptInputDemo() {
  return (
    <DemoPage width="max-w-3xl">
      <DemoSection label="default: toolbar slot with model select, attach, tools">
        <Stage>
          <Composer variant="default" />
          <Hint>Enter sends, Shift+Enter adds a line. Press Enter on text to see submitted, streaming and stop.</Hint>
        </Stage>
      </DemoSection>
      <DemoSection label="secondary">
        <Stage>
          <Composer variant="secondary" placeholder="Reply to the assistant" />
        </Stage>
      </DemoSection>
      <DemoSection label="inline">
        <Stage>
          <Composer variant="inline" placeholder="Message" />
        </Stage>
      </DemoSection>
      <DemoSection label="compact">
        <Stage className="max-w-md">
          <Composer variant="compact" placeholder="Quick question" />
        </Stage>
      </DemoSection>
      <DemoSection label="with suggestions">
        <SuggestionsDemo />
      </DemoSection>
      <DemoSection label="run state: submitted, streaming (stop), error">
        <RunStateDemo />
      </DemoSection>
      <DemoSection label="queue">
        <QueueDemo />
      </DemoSection>
      <DemoSection label="token input: @mention and /command">
        <Stage>
          <Composer variant="default" tokens={aiTokenSets} defaultValue="Ask @maya to shoot the collar detail, then /summarize " tools={false} />
          <Hint>Type @ or / for the menu. Arrow keys move, Enter or Tab picks, Escape closes.</Hint>
        </Stage>
      </DemoSection>
      <DemoSection label="with attachments, paste and drag and drop">
        <Stage>
          <Composer variant="default" defaultAttachments={aiAttachments.slice(0, 4) as PromptAttachment[]} defaultValue="Compare these two mockups and the plan" />
          <Hint>Drag files from your desktop onto the composer, or paste an image. Each file has a remove button.</Hint>
        </Stage>
      </DemoSection>
      <DemoSection label="review composer">
        <ReviewDemo />
      </DemoSection>
      <DemoSection label="auto-grow to maxHeight (120px)">
        <Stage>
          <Composer
            variant="default"
            maxHeight={120}
            tools={false}
            defaultValue={"Line one of a long note.\nLine two keeps going.\nLine three.\nLine four.\nLine five.\nLine six, now it scrolls."}
          />
        </Stage>
      </DemoSection>
    </DemoPage>
  );
}
34:Tbb2,import type { BlockMeta } from "../../../lib/block-meta";

export const promptInputMeta: BlockMeta = {
  slug: "prompt-input",
  title: "Prompt input",
  description:
    "The chat composer, drawn in the look of Kobra's chat-input (a rebuild, not a wrapper: chat-input has no slots or status) with a quiet Voice Glow beam: four variants, a toolbar with model select, attach and tool toggles, send / stop states, queued prompts, @mention and /command pills, attachments, drag and drop, auto-grow, and a review composer.",
  group: "ai",
  kobraDeps: ["button", "select", "toggle", "kbd", "spinner", "attachment"],
  files: [
    "blocks/ai/prompt-input/prompt-input.tsx",
    "blocks/ai/prompt-input/tokens.ts",
    "blocks/ai/prompt-input/use-controllable.ts",
    "blocks/ai/chat-attachment/chat-attachment.tsx",
  ],
  props: [
    { name: "variant", type: "'default' | 'secondary' | 'inline' | 'compact'", default: "'default'", description: "Muted card, raised card, one-row pill, or small." },
    { name: "status", type: "'ready' | 'submitted' | 'streaming' | 'error'", default: "'ready'", description: "Request state. Submitted shows a spinner (aria-busy), streaming turns send into stop, error marks the field aria-invalid." },
    { name: "value / defaultValue / onValueChange", type: "string", description: "The text." },
    { name: "onSubmit", type: "({ text, attachments }) => void", description: "Enter or the send button while ready." },
    { name: "onStop", type: "() => void", description: "The stop button while streaming." },
    { name: "queue / defaultQueue / onQueueChange", type: "string[]", description: "Prompts waiting behind a running reply; sent one by one when status returns to ready." },
    { name: "queueWhileBusy", type: "boolean", default: "true", description: "Enter while busy queues the text." },
    { name: "attachments / defaultAttachments / onAttachmentsChange", type: "PromptAttachment[]", description: "Files in the composer. Pick, paste or drop to add." },
    { name: "tokens", type: "PromptTokenSet[]", description: "@mention and /command sets: pills in the text and a menu while typing." },
    { name: "maxHeight", type: "number", default: "200", description: "Text area height in px before it scrolls." },
    { name: "maxFiles", type: "number", default: "8", description: "Most attachments." },
    { name: "errorMessage", type: "string", description: "Words shown by PromptInputError in the error status." },
    { name: "glow", type: "boolean", default: "true", description: "Voice Glow beam while submitted or streaming." },
    { name: "disabled", type: "boolean", default: "false", description: "Inert composer." },
    { name: "Parts", type: "Queue, Attachments, Body, Field, Toolbar, Tools, Actions, Footer, AttachButton, ToolToggle, ModelSelect, Submit, Error, Hint", description: "Compose the toolbar slot freely; usePromptInput() reads the state." },
  ],
  tags: ["ai", "chat", "composer", "input", "prompt"],
  status: "ready",
};
23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#ai","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"AI"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Prompt input"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Prompt input"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"The chat composer, drawn in the look of Kobra's chat-input (a rebuild, not a wrapper: chat-input has no slots or status) with a quiet Voice Glow beam: four variants, a toolbar with model select, attach and tool toggles, send / stop states, queued prompts, @mention and /command pills, attachments, drag and drop, auto-grow, and a review composer."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"prompt-input","group":"ai","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/ai/prompt-input/prompt-input.tsx","code":"$30"},{"path":"blocks/ai/prompt-input/tokens.ts","code":"$31"},{"path":"blocks/ai/prompt-input/use-controllable.ts","code":"import { useCallback, useEffect, useRef, useState } from \"react\";\n\n/** Controlled-or-not state with the Base UI `value` / `defaultValue` / `onValueChange` shape. */\nexport function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void) {\n  const [own, setOwn] = useState<T>(defaultValue);\n  const controlled = value !== undefined;\n  const current = controlled ? value : own;\n  const latest = useRef(current);\n  useEffect(() => {\n    latest.current = current;\n  });\n  const set = useCallback(\n    (next: T | ((prev: T) => T)) => {\n      const resolved = typeof next === \"function\" ? (next as (prev: T) => T)(latest.current) : next;\n      latest.current = resolved;\n      if (!controlled) setOwn(resolved);\n      onChange?.(resolved);\n    },\n    [controlled, onChange],\n  );\n  return [current, set] as const;\n}\n"},{"path":"blocks/ai/chat-attachment/chat-attachment.tsx","code":"$32"},{"path":"blocks/ai/prompt-input/demo.tsx","code":"$33"},{"path":"blocks/ai/prompt-input/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]
</article></body></html>