50: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"] 51: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"] 52:T34bc,"use client"; import { ArrowUpIcon, CrossSmallIcon } from "blode-icons-react"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import TextareaAutosize from "react-textarea-autosize"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { FileThumbnail } from "@/components/ui/file-thumbnail"; const DEFAULT_ACCEPT = "image/png,image/jpeg,application/pdf"; interface InputMessageSlotContext { /** Opens the native file picker. Pass `acceptOverride` (e.g. `"image/*"`) to * scope the picker to a subset of the accept types for this invocation. */ openFilePicker: (acceptOverride?: string) => void; /** Currently-attached files (controlled). */ files: File[]; } type InputMessageSlot = React.ReactNode | ((ctx: InputMessageSlotContext) => React.ReactNode); interface InputMessageProps extends Omit, "onChange"> { /** Controlled textarea value. */ value: string; /** Called with the new value on every textarea change. */ onValueChange: (value: string) => void; /** Fired on submit (Enter or send button) with the trimmed value + files. */ onSend?: (value: string, files: File[]) => void; /** Placeholder shown when empty. Swaps to a drop hint while dragging files. */ placeholder?: string; /** Bottom-left action area. May be a render fn receiving `{ openFilePicker, files }`. */ leftSlot?: InputMessageSlot; /** Bottom-right action area, before the built-in send button. Same render-fn shape. */ rightSlot?: InputMessageSlot; /** Disables the textarea, send button, and drag-and-drop. */ disabled?: boolean; /** Minimum visible rows before the textarea grows. Defaults to 1. */ minRows?: number; /** Maximum visible rows before the textarea scrolls. Defaults to 8. */ maxRows?: number; /** When false, clicking the container won't refocus the textarea. */ clickToFocus?: boolean; /** Accessible label for the send button. */ sendLabel?: string; /** Controlled attached files. When undefined, attachment behavior is disabled. */ files?: File[]; /** Called when files are added (drag-drop or picker) or removed. */ onFilesChange?: (files: File[]) => void; /** Accepted MIME types as a comma-separated string. Defaults to PNG / JPEG / PDF. */ accept?: string; /** Maximum number of files. Extra files beyond the limit are dropped. */ maxFiles?: number; /** Side of each preview tile in pixels. Defaults to 80. */ filePreviewSize?: number; /** Extra props forwarded to the underlying textarea. */ textareaProps?: Omit< React.ComponentProps<"textarea">, "value" | "onChange" | "onKeyDown" | "disabled" | "placeholder" | "rows" | "style" >; } // ─── File preview tile ────────────────────────────────────────────────────── interface FilePreviewTileProps { file: File; onRemove: () => void; size: number; } const FilePreviewTile = ({ file, onRemove, size }: FilePreviewTileProps) => ( ); const renderSlot = (slot: InputMessageSlot, ctx: InputMessageSlotContext) => typeof slot === "function" ? slot(ctx) : slot; const allowsMultipleFiles = (maxFiles?: number) => maxFiles === undefined || maxFiles > 1; // ─── InputMessage ─────────────────────────────────────────────────────────── const InputMessage = ({ value, onValueChange, onSend, placeholder = "Ask me anything…", leftSlot, rightSlot, disabled, minRows = 1, maxRows = 8, clickToFocus = true, sendLabel = "Send", files, onFilesChange, accept = DEFAULT_ACCEPT, maxFiles, filePreviewSize = 80, textareaProps, className, ref, ...props }: InputMessageProps) => { const textareaRef = React.useRef(null); const fileInputId = React.useId(); const [dragOver, setDragOver] = React.useState(false); const filesArr = React.useMemo(() => files ?? [], [files]); const supportsFiles = onFilesChange !== undefined; const trimmed = value.trim(); const canSend = !disabled && (trimmed.length > 0 || filesArr.length > 0); const handleSend = React.useCallback(() => { if (!canSend) { return; } onSend?.(trimmed, filesArr); }, [canSend, onSend, trimmed, filesArr]); const handleKeyDown = React.useCallback( (e: React.KeyboardEvent) => { if (e.nativeEvent.isComposing) { return; } if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSend(); } }, [handleSend], ); const handleContainerMouseDown = React.useCallback( (e: React.MouseEvent) => { if (!clickToFocus || disabled) { return; } const target = e.target as HTMLElement; if (target === textareaRef.current) { return; } if ( target.closest('button, a, input, select, textarea, [contenteditable], [role="button"]') ) { return; } e.preventDefault(); textareaRef.current?.focus(); }, [clickToFocus, disabled], ); // ── File helpers ────────────────────────────────────────────────────────── const acceptTokens = React.useMemo( () => accept .split(",") .map((s) => s.trim()) .filter(Boolean), [accept], ); const matchesAccept = React.useCallback( (file: File) => acceptTokens.some((token) => { if (token.endsWith("/*")) { return file.type.startsWith(token.slice(0, -1)); } if (token.startsWith(".")) { return file.name.toLowerCase().endsWith(token.toLowerCase()); } return file.type === token; }), [acceptTokens], ); const addFiles = React.useCallback( (incoming: File[]) => { if (!onFilesChange) { return; } // name + size + lastModified is a unique-enough identity to dedupe // "dropped the same file twice" without colliding distinct files. const fingerprint = (f: File) => `${f.name}-${f.size}-${f.lastModified}`; const existing = new Set(filesArr.map(fingerprint)); const accepted: File[] = []; for (const f of incoming) { if (!matchesAccept(f)) { continue; } const fp = fingerprint(f); if (existing.has(fp)) { continue; } existing.add(fp); accepted.push(f); } if (accepted.length === 0) { return; } const next = [...filesArr, ...accepted]; onFilesChange(maxFiles === undefined ? next : next.slice(0, maxFiles)); }, [onFilesChange, filesArr, matchesAccept, maxFiles], ); const removeFile = React.useCallback( (idx: number) => { onFilesChange?.(filesArr.filter((_, i) => i !== idx)); }, [onFilesChange, filesArr], ); const openFilePicker = React.useCallback( (overrideAccept?: string) => { const selector = `#${CSS.escape(fileInputId)}`; const el = document.querySelector(selector); if (!el) { return; } if (overrideAccept) { el.accept = overrideAccept; el.click(); queueMicrotask(() => { const current = document.querySelector(selector); if (current) { current.accept = accept; } }); return; } el.click(); }, [accept, fileInputId], ); // ── Slot rendering ──────────────────────────────────────────────────────── const slotCtx = React.useMemo( () => ({ files: filesArr, openFilePicker }), [openFilePicker, filesArr], ); const leftContent = renderSlot(leftSlot, slotCtx); const rightContent = renderSlot(rightSlot, slotCtx); // ── Drag-and-drop ───────────────────────────────────────────────────────── const handleDragOver = React.useCallback( (e: React.DragEvent) => { if (!supportsFiles || disabled) { return; } if (![...e.dataTransfer.types].includes("Files")) { return; } e.preventDefault(); e.dataTransfer.dropEffect = "copy"; setDragOver(true); }, [supportsFiles, disabled], ); const handleDragLeave = React.useCallback((e: React.DragEvent) => { const wrapper = e.currentTarget; const next = e.relatedTarget as Node | null; if (next && wrapper.contains(next)) { return; } setDragOver(false); }, []); const handleDrop = React.useCallback( (e: React.DragEvent) => { e.preventDefault(); setDragOver(false); if (!supportsFiles || disabled) { return; } addFiles([...e.dataTransfer.files]); }, [supportsFiles, disabled, addFiles], ); const handleFileInputChange = React.useCallback( (e: React.ChangeEvent) => { if (!e.target.files) { return; } addFiles([...e.target.files]); e.target.value = ""; }, [addFiles], ); return (

{supportsFiles && ( )} {filesArr.length > 0 && (

{filesArr.map((file, i) => ( removeFile(i)} size={filePreviewSize} /> ))}

)} onValueChange(e.target.value)} onKeyDown={handleKeyDown} placeholder={dragOver && supportsFiles ? "Drop files here to add to chat" : placeholder} ref={textareaRef} value={value} {...textareaProps} />

{leftContent}

{rightContent}

); }; export { InputMessage }; export type { InputMessageProps, InputMessageSlotContext }; 4f:["$","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","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"}]]}]}],["$","li","react-textarea-autosize",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-textarea-autosize","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":"react-textarea-autosize"}]]}]}]]}],["$","$L50",null,{"namespace":"@blode","registryDependencies":["button","file-thumbnail"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/input-message.tsx","content":"$52","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]