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/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"] 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/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"] 53:T8104,"use client"; import * as React from "react"; import { createPortal } from "react-dom"; import { Slot } from "@radix-ui/react-slot"; import { cva, type VariantProps } from "class-variance-authority"; import { Cancel01Icon, Image02Icon, File02Icon, Video02Icon, MusicNote02Icon, Upload01Icon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { useOnChange } from "@/lib/use-on-change"; import { cn } from "@/lib/utils"; // ——— Metadata schema (single source) ——— /** Upload or message attachment metadata. */ export interface AttachmentMeta { type: "image" | "file" | "video" | "audio"; name?: string; url?: string; /** Raster preview URL (e.g. PDF first page). When unset, preview uses the icon for `type`. */ thumbnailUrl?: string; mimeType?: string; size?: number; width?: number; height?: number; /** Binary payload when not using `url` (browser-friendly; prefer `Blob`). */ data?: Blob | ArrayBuffer; /** * **`"paste"`** when created from clipboard (e.g. long text → **`File`**). Use with **`Attachment`** **`variant="pasted"`**. */ source?: "paste"; } /** Files not appended by the picker: oversized, over `maxFiles`, extra when `multiple` is false, or outside `accept`. */ export type AttachmentsRejectedFiles = { tooLarge: File[]; /** Within size but did not fit under `maxFiles`. */ overMaxFiles: File[]; /** Ignored because `multiple` is false. */ truncatedByMultiple: File[]; /** Did not match the root `accept` string (drop path or permissive pickers). */ notAccepted: File[]; }; export function toAttachmentMeta( file: File, options?: { objectUrl?: string; source?: AttachmentMeta["source"] }, ): AttachmentMeta { const mime = file.type?.toLowerCase() ?? ""; let kind: AttachmentMeta["type"] = "file"; if (mime.startsWith("image/")) kind = "image"; else if (mime.startsWith("video/")) kind = "video"; else if (mime.startsWith("audio/")) kind = "audio"; return { type: kind, name: file.name, url: options?.objectUrl, mimeType: file.type || undefined, size: file.size, ...(options?.source != null ? { source: options.source } : {}), }; } /** Optional second argument to **`appendFiles`** (from **`useAttachments`**). */ export type AppendFilesOptions = { /** Sets **`AttachmentMeta.source`** to **`"paste"`** for every appended item. */ paste?: boolean; }; /** * `File`s from a `DataTransfer` (paste **`clipboardData`** or drop **`dataTransfer`**). * Prefer **`items`** so pasted screenshots and copied images resolve reliably; falls back to **`files`**. */ export function filesFromDataTransfer(data: DataTransfer | null): File[] { if (!data) return []; const out: File[] = []; if (data.items?.length) { for (const item of data.items) { if (item.kind !== "file") continue; const f = item.getAsFile(); if (f) out.push(f); } } if (out.length > 0) return out; if (data.files?.length) return Array.from(data.files); return []; } /** Best-effort match for an HTML `accept` attribute (comma tokens: `.pdf`, `image/*`, exact MIME). */ function fileMatchesAccept(file: File, accept: string): boolean { const trimmed = accept.trim(); if (!trimmed || trimmed === "*/*") return true; const tokens = trimmed .split(",") .map((s) => s.trim()) .filter(Boolean); const type = (file.type ?? "").toLowerCase(); const name = file.name ?? ""; const extWithDot = name.lastIndexOf(".") > 0 ? name.slice(name.lastIndexOf(".")).toLowerCase() : ""; for (const token of tokens) { const t = token.toLowerCase(); if (t === "*/*") return true; if (t.startsWith(".")) { if (extWithDot === t) return true; continue; } if (t.endsWith("/*")) { const prefix = t.slice(0, -1); if (type.startsWith(prefix)) return true; continue; } if (type && type === t) return true; } return false; } function formatBytes(bytes?: number): string | undefined { if (bytes == null || !Number.isFinite(bytes)) return undefined; const units = ["B", "KB", "MB", "GB"] as const; let v = bytes; let i = 0; while (v >= 1024 && i < units.length - 1) { v /= 1024; i += 1; } const rounded = i === 0 ? Math.round(v) : Math.round(v * 10) / 10; return `${rounded} ${units[i]}`; } /** Uppercased file extension for the detailed subtitle (no leading dot); `undefined` if there is no usable extension. */ function kindLabel(item: AttachmentMeta): string | undefined { const name = item.name?.trim(); if (!name) return undefined; const dot = name.lastIndexOf("."); if (dot <= 0 || dot >= name.length - 1) return undefined; const ext = name.slice(dot + 1).toLowerCase(); if (!ext || ext.length > 16) return undefined; return ext.toUpperCase(); } function iconForAttachmentType(type: AttachmentMeta["type"]) { switch (type) { case "image": return Image02Icon; case "video": return Video02Icon; case "audio": return MusicNote02Icon; default: return File02Icon; } } function inferDetailedSubtitleMode( attachment: AttachmentMeta, ): "size" | "kind" { if ( attachment.size != null && Number.isFinite(attachment.size) && attachment.size > 0 ) { return "size"; } return "kind"; } const attachmentVariants = cva( "group relative cursor-default overflow-hidden rounded-sm border border-muted bg-secondary text-muted-foreground", { variants: { variant: { compact: "relative flex size-15 shrink-0 items-center justify-center", inline: "relative flex h-8 w-auto min-w-0 max-w-[200px] shrink-0 items-center justify-start p-1 pr-2", detailed: "relative flex h-15 w-auto min-w-[200px] max-w-[250px] shrink-0 items-center justify-start p-2 pr-3", pasted: "relative flex w-[156px] h-[144px] shrink-0 flex-col items-center justify-center overflow-hidden rounded-sm p-2 gap-2", }, }, defaultVariants: { variant: "compact", }, }, ); type AttachmentVariant = NonNullable< VariantProps["variant"] >; // ——— Context ——— /** Public context value from **`useAttachments()`** (also used internally by **`Attachments`**). */ export type AttachmentsContextValue = { inputRef: React.RefObject; /** Stable id on the hidden file input (labels, tests, or custom `aria-*`). */ inputId: string; openPicker: () => void; /** * Append files with the same limits and `onFilesRejected` behavior as the native picker. * For drag-and-drop or paste, call this from your handler. */ appendFiles: (files: File[], options?: AppendFilesOptions) => void; /** True while a file drag is active over the document (when `windowDrop` is enabled). */ isDraggingFile: boolean; attachments: AttachmentMeta[]; onAttachmentsChange: (next: AttachmentMeta[]) => void; accept?: string; multiple: boolean; maxFiles?: number; maxSize?: number; disabled: boolean; }; const AttachmentsContext = React.createContext( null, ); function useAttachmentsContext(component: string) { const ctx = React.useContext(AttachmentsContext); if (!ctx) { throw new Error(`${component} must be used within `); } return ctx; } type AttachmentItemContextValue = { variant: AttachmentVariant; attachment: AttachmentMeta; onRemove?: () => void; /** When true, remove controls are hidden (see `Attachment` `readOnly`). */ readOnly?: boolean; }; const AttachmentItemContext = React.createContext(null); function useAttachmentItemContext(component: string) { const ctx = React.useContext(AttachmentItemContext); if (!ctx) { throw new Error(`${component} must be used within `); } return ctx; } export type AttachmentsProps = { attachments: AttachmentMeta[]; onAttachmentsChange: (attachments: AttachmentMeta[]) => void; accept?: string; /** @default true */ multiple?: boolean; maxFiles?: number; /** Maximum file size per file in bytes */ maxSize?: number; disabled?: boolean; /** Fires after the internal file handler (same event; `target.files` still available). */ onFileInputChange?: React.ChangeEventHandler; /** * Called when some selected files are not appended (oversized, over `maxFiles`, or trimmed because `multiple` is false). */ onFilesRejected?: (detail: AttachmentsRejectedFiles) => void; /** * Register `dragover` / `drop` on `document` so files can be dropped anywhere. * Pair with **`AttachmentsDropOverlay`** or **`useAttachments().appendFiles`** if you build a custom drop target. * @default false */ windowDrop?: boolean; children?: React.ReactNode; }; function Attachments({ attachments, onAttachmentsChange, accept, multiple = true, maxFiles, maxSize, disabled = false, onFileInputChange, onFilesRejected, windowDrop = false, children, }: AttachmentsProps) { const inputRef = React.useRef(null); const inputId = React.useId(); const managedBlobUrlsRef = React.useRef>(new Set()); const [isDraggingFile, setIsDraggingFile] = React.useState(false); React.useLayoutEffect(() => { const inUse = new Set(); for (const a of attachments) { if (a.url) inUse.add(a.url); if (a.thumbnailUrl) inUse.add(a.thumbnailUrl); } for (const url of [...managedBlobUrlsRef.current]) { if (!inUse.has(url)) { URL.revokeObjectURL(url); managedBlobUrlsRef.current.delete(url); } } }, [attachments]); React.useEffect(() => { const managedBlobUrls = managedBlobUrlsRef.current; return () => { for (const url of managedBlobUrls) { URL.revokeObjectURL(url); } managedBlobUrls.clear(); }; }, []); const openPicker = React.useCallback(() => { if (disabled) return; inputRef.current?.click(); }, [disabled]); const appendFilesFromList = React.useCallback( (rawFiles: File[], appendOptions?: AppendFilesOptions) => { if (disabled || rawFiles.length === 0) return; let incoming = [...rawFiles]; const notAccepted = accept != null && accept !== "" && accept !== "*/*" ? incoming.filter((f) => !fileMatchesAccept(f, accept)) : []; if (accept != null && accept !== "" && accept !== "*/*") { incoming = incoming.filter((f) => fileMatchesAccept(f, accept)); } let truncatedByMultiple: File[] = []; if (!multiple && incoming.length > 1) { truncatedByMultiple = incoming.slice(1); incoming = incoming.slice(0, 1); } const tooLarge = maxSize != null ? incoming.filter((f) => f.size > maxSize) : []; const withinSize = maxSize != null ? incoming.filter((f) => f.size <= maxSize) : incoming; const room = maxFiles != null ? Math.max(0, maxFiles - attachments.length) : Number.POSITIVE_INFINITY; const take = room === Number.POSITIVE_INFINITY ? withinSize : withinSize.slice(0, room); const overMaxFiles = room === Number.POSITIVE_INFINITY ? [] : withinSize.slice(room); if ( notAccepted.length > 0 || tooLarge.length > 0 || overMaxFiles.length > 0 || truncatedByMultiple.length > 0 ) { onFilesRejected?.({ notAccepted, tooLarge, overMaxFiles, truncatedByMultiple, }); } const newMetas = take.map((file) => { const objectUrl = URL.createObjectURL(file); managedBlobUrlsRef.current.add(objectUrl); return toAttachmentMeta(file, { objectUrl, source: appendOptions?.paste ? "paste" : undefined, }); }); if (newMetas.length > 0) { onAttachmentsChange([...attachments, ...newMetas]); } }, [ disabled, accept, multiple, maxSize, maxFiles, attachments, onAttachmentsChange, onFilesRejected, ], ); const handleInputChange = React.useCallback( (e: React.ChangeEvent) => { const list = e.target.files; if (!list?.length || disabled) { onFileInputChange?.(e); e.target.value = ""; return; } appendFilesFromList(Array.from(list)); onFileInputChange?.(e); e.target.value = ""; }, [disabled, appendFilesFromList, onFileInputChange], ); const dragAndDropEnabled = !disabled && windowDrop; useOnChange(dragAndDropEnabled, (enabled) => { if (!enabled) setIsDraggingFile(false); }); React.useEffect(() => { if (!dragAndDropEnabled) return; const hasFiles = (e: DragEvent) => Boolean( e.dataTransfer?.types?.length && [...e.dataTransfer.types].includes("Files"), ); const onDragEnter = (e: DragEvent) => { if (!hasFiles(e)) return; setIsDraggingFile(true); }; const onDragLeave = (e: DragEvent) => { if (!hasFiles(e)) return; const next = e.relatedTarget as Node | null; if (next && document.contains(next)) return; setIsDraggingFile(false); }; const onDragOver = (e: DragEvent) => { if (!hasFiles(e)) return; e.preventDefault(); e.dataTransfer!.dropEffect = "copy"; }; const onDrop = (e: DragEvent) => { e.preventDefault(); setIsDraggingFile(false); const list = e.dataTransfer?.files; if (!list?.length) return; appendFilesFromList(Array.from(list)); }; document.addEventListener("dragenter", onDragEnter); document.addEventListener("dragleave", onDragLeave); document.addEventListener("dragover", onDragOver); document.addEventListener("drop", onDrop); return () => { document.removeEventListener("dragenter", onDragEnter); document.removeEventListener("dragleave", onDragLeave); document.removeEventListener("dragover", onDragOver); document.removeEventListener("drop", onDrop); }; }, [dragAndDropEnabled, appendFilesFromList]); const value = React.useMemo( () => ({ inputRef, inputId, openPicker, appendFiles: appendFilesFromList, isDraggingFile, attachments, onAttachmentsChange, accept, multiple, maxFiles, maxSize, disabled, }), [ inputId, appendFilesFromList, isDraggingFile, attachments, onAttachmentsChange, accept, multiple, maxFiles, maxSize, disabled, openPicker, ], ); return ( {children} ); } /** Access **`Attachments`** context: **`appendFiles`**, **`isDraggingFile`**, **`openPicker`**, controlled state, and limits. Must be used under **`Attachments`**. */ export function useAttachments(): AttachmentsContextValue { return useAttachmentsContext("useAttachments"); } export type AttachmentsDropOverlayProps = Omit< React.HTMLAttributes, "children" > & { /** * `fullscreen` portals to `document.body` and covers the viewport. * `contained` fills the nearest positioned ancestor — wrap a **`relative`** container (e.g. prompt shell). * @default "fullscreen" */ variant?: "fullscreen" | "contained"; children?: React.ReactNode; }; export function AttachmentsDropOverlay({ variant = "fullscreen", className, children, ...props }: AttachmentsDropOverlayProps) { const { isDraggingFile, disabled, maxSize } = useAttachmentsContext( "AttachmentsDropOverlay", ); const canUseDOM = typeof document !== "undefined"; const open = canUseDOM && !disabled && isDraggingFile; React.useEffect(() => { if (!open || variant !== "fullscreen") return; const previousOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = previousOverflow; }; }, [open, variant]); if (!open) return null; const maxSizeLabel = maxSize != null ? formatBytes(maxSize) : undefined; const inner = (

{children ?? (

Drop files here to add as attachment

{maxSizeLabel ? (

Maximum {maxSizeLabel} per file

) : null}

)}

); if (variant === "fullscreen") { return createPortal(inner, document.body); } return inner; } type AttachmentTriggerProps = React.ComponentProps<"button"> & { asChild?: boolean; }; function AttachmentTrigger({ asChild = false, className, children, onClick, disabled: disabledProp, ...props }: AttachmentTriggerProps) { const { openPicker, disabled: rootDisabled } = useAttachmentsContext("AttachmentTrigger"); const disabled = Boolean(rootDisabled || disabledProp); const handleClick = React.useCallback( (e: React.MouseEvent) => { if (disabled) return; onClick?.(e); openPicker(); }, [disabled, onClick, openPicker], ); const triggerClassName = cn( disabled && "cursor-not-allowed opacity-50", className, ); if (asChild) { return ( } > {children} ); } return ( ); } type AttachmentListProps = React.HTMLAttributes; function AttachmentList({ className, role, ...props }: AttachmentListProps) { return (

); } type AttachmentOverflowFadeLayerProps = React.HTMLAttributes & { variant: "inline" | "detailed"; }; function AttachmentOverflowFadeLayer({ className, variant, ...props }: AttachmentOverflowFadeLayerProps) { return (

); } type AttachmentProps = Omit< React.HTMLAttributes, "children" > & { variant?: AttachmentVariant; /** Attachment metadata; drives preview and properties. */ attachment: AttachmentMeta; /** Upload progress 0–100; shows a bottom bar when set */ progress?: number; onRemove?: () => void; /** * When true, hides remove controls and the progress bar (e.g. message history). * @default false */ readOnly?: boolean; /** Detailed layout: second line; inferred from `attachment.size` when omitted. */ detailedSubtitle?: "size" | "kind"; /** * When set, replaces the default layout. */ children?: React.ReactNode; /** * `pasted` only: maximum characters in the preview line (remainder as ellipsis). * @default 220 */ pastedExcerptMaxChars?: number; }; function Attachment({ className, variant = "compact", attachment, progress, onRemove, readOnly = false, detailedSubtitle: detailedSubtitleProp, pastedExcerptMaxChars = 220, children, ...props }: AttachmentProps) { const detailedSubtitle = variant === "detailed" ? (detailedSubtitleProp ?? inferDetailedSubtitleMode(attachment)) : undefined; const ctxValue = React.useMemo( () => ({ variant: variant ?? "compact", attachment, onRemove, readOnly, }), [variant, attachment, onRemove, readOnly], ); const showProgress = !readOnly && progress != null && Number.isFinite(progress); const defaultLayout = variant === "pasted" ? ( <> {!readOnly ? (

Pasted

) : null} ) : variant === "compact" ? ( <> ) : variant === "detailed" ? ( <>

) : ( <>

); return (

{variant === "inline" || variant === "detailed" ? ( ) : null} {children ?? defaultLayout} {showProgress && variant !== "pasted" ? ( ) : null}

); } const attachmentPreviewVariants = cva( "flex shrink-0 items-center justify-center overflow-hidden bg-card text-muted-foreground", { variants: { variant: { compact: "absolute inset-0 size-full rounded-[inherit] border-0 bg-transparent", inline: "size-6 rounded-xs border border-input", detailed: "size-11 rounded-sm border border-input", pasted: "min-h-0 w-full flex-1 shrink self-stretch items-start justify-start border-0 bg-transparent p-0", }, }, defaultVariants: { variant: "compact", }, }, ); type AttachmentPreviewProps = Omit< React.HTMLAttributes, "children" > & Partial> & { /** * `pasted` only: max characters before ellipsis (from **`Attachment`** **`pastedExcerptMaxChars`**). * @default 220 */ pastedExcerptMaxChars?: number; }; function AttachmentPreview({ className, variant: variantProp, pastedExcerptMaxChars = 220, ...props }: AttachmentPreviewProps) { const { variant, attachment } = useAttachmentItemContext("AttachmentPreview"); const v = variantProp ?? variant; const [pastedRawText, setPastedRawText] = React.useState(""); React.useEffect(() => { if (v !== "pasted") return; let cancelled = false; const run = async () => { if (attachment.data instanceof Blob) { const t = await attachment.data.text(); if (!cancelled) setPastedRawText(t); return; } if (attachment.data instanceof ArrayBuffer) { const t = new TextDecoder().decode(attachment.data); if (!cancelled) setPastedRawText(t); return; } const url = attachment.url; if (url?.startsWith("blob:") || url?.startsWith("data:")) { try { const res = await fetch(url); const t = await res.text(); if (!cancelled) setPastedRawText(t); } catch { if (!cancelled) setPastedRawText(""); } return; } if (!cancelled) setPastedRawText(""); }; void run(); return () => { cancelled = true; }; }, [v, attachment.data, attachment.url]); const pastedExcerpt = React.useMemo(() => { if (v !== "pasted") return ""; const normalized = pastedRawText.replace(/\s+/g, " ").trim(); const max = pastedExcerptMaxChars; if (normalized.length <= max) return normalized; return `${normalized.slice(0, max).trimEnd()}…`; }, [v, pastedRawText, pastedExcerptMaxChars]); const rasterSrc = attachment.thumbnailUrl ?? (attachment.type === "image" && attachment.url ? attachment.url : undefined); const videoSrc = !attachment.thumbnailUrl && attachment.type === "video" && attachment.url ? attachment.url : undefined; const showRaster = Boolean(rasterSrc); const showVideo = Boolean(videoSrc); const inlinePlainIcon = v === "inline" && !showRaster && !showVideo ? "border-0 bg-transparent dark:bg-transparent" : ""; const iconClass = v === "inline" ? "size-5" : "size-7"; const content = (() => { if (v === "pasted") { return (

{pastedExcerpt.length > 0 ? pastedExcerpt : "\u00a0"}

); } if (rasterSrc) { return ( <>

); } if (videoSrc) { return ( <>