4f: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T1fa1,'use client'; /** * @file prompt-input-attachments.tsx * @description Attachment surface for the composer. Adds image/file attachments * via file picker, paste, and drag-and-drop; renders preview thumbnails with * per-item removal, a hovercard preview, media-category auto-detection, and * upload-state chips. Produced attachments match `@localmode/react`'s image * content model and reuse its `readFileAsDataUrl` helper. * * Pairs with `PromptInput`/`PromptInputProvider`: it reports attachments via * `onChange` (or writes through the provider when present). */ import * as React from 'react'; import { readFileAsDataUrl } from '@/lib/browser-utils'; import { File as FileIcon, Film, Music, Paperclip, X } from 'lucide-react'; import { cn } from '@/registry/localmode/lib/utils'; import { Button } from '@/registry/localmode/ui/button'; import { HoverCard, HoverCardContent, HoverCardTrigger, } from '@/registry/localmode/ui/hover-card'; import { usePromptInputContext, type PromptAttachment, } from '@/components/prompt-input'; /** Coarse media category derived from a MIME type. */ export type MediaCategory = 'image' | 'video' | 'audio' | 'document'; /** Classify a MIME type into a coarse media category. */ export function mediaCategory(mimeType: string): MediaCategory { if (mimeType.startsWith('image/')) return 'image'; if (mimeType.startsWith('video/')) return 'video'; if (mimeType.startsWith('audio/')) return 'audio'; return 'document'; } /** Strip the `data:;base64,` prefix to match `@localmode/core`'s model. */ function stripDataUrl(dataUrl: string) { const comma = dataUrl.indexOf(','); return comma === -1 ? dataUrl : dataUrl.slice(comma + 1); } async function fileToAttachment(file: File): Promise { const dataUrl = await readFileAsDataUrl(file); return { id: crypto.randomUUID(), data: stripDataUrl(dataUrl), mimeType: file.type || 'application/octet-stream', name: file.name, size: file.size, }; } /** Props for {@link PromptInputAttachments}. */ export interface PromptInputAttachmentsProps extends Omit, 'onChange'> { /** Current attachments (controlled). Falls back to the provider when omitted. */ value?: PromptAttachment[]; /** Reports the new attachment list after add/remove (controlled). */ onChange?: (attachments: PromptAttachment[]) => void; /** Accept filter for the picker / drop. @default "image/*" */ accept?: string; /** Allow multiple files. @default true */ multiple?: boolean; } /** * The attachment dropzone + preview strip. * * @example * ```tsx * * … * * * ``` */ export function PromptInputAttachments({ value, onChange, accept = 'image/*', multiple = true, className, children, ...props }: PromptInputAttachmentsProps) { const provider = usePromptInputContext(); const inputRef = React.useRef(null); const [dragging, setDragging] = React.useState(false); const attachments = value ?? provider?.attachments ?? []; const setAttachments = (next: PromptAttachment[]) => { onChange?.(next); provider?.setAttachments(next); }; const addFiles = async (files: FileList | File[]) => { const list = Array.from(files); if (list.length === 0) return; const next = await Promise.all(list.map(fileToAttachment)); setAttachments([...attachments, ...next]); }; const remove = (id: string) => setAttachments(attachments.filter((a) => a.id !== id)); // Paste handler (image clipboard items anywhere within the dropzone). const onPaste = (e: React.ClipboardEvent) => { const files = Array.from(e.clipboardData.files); if (files.length) { e.preventDefault(); void addFiles(files); } }; return (

{ e.preventDefault(); setDragging(true); }} onDragLeave={() => setDragging(false)} onDrop={(e) => { e.preventDefault(); setDragging(false); void addFiles(e.dataTransfer.files); }} className={cn( 'rounded-lg border border-dashed border-border p-2 transition-colors', dragging && 'border-ring bg-accent/40', className, )} {...props} > { if (e.target.files) void addFiles(e.target.files); e.target.value = ''; }} />

{attachments.length === 0 && !children && ( {dragging ? 'Drop to attach' : 'Drop images here'} )} {attachments.map((att) => ( remove(att.id)} /> ))} {children}

); } /** Props for {@link AttachmentChip}. */ interface AttachmentChipProps { attachment: PromptAttachment; onRemove: () => void; } /** A single attachment preview chip with hovercard + remove control. */ function AttachmentChip({ attachment, onRemove }: AttachmentChipProps) { const category = mediaCategory(attachment.mimeType); const url = `data:${attachment.mimeType};base64,${attachment.data}`; const CategoryIcon = category === 'video' ? Film : category === 'audio' ? Music : FileIcon; return (

{category === 'image' ? ( // eslint-disable-next-line @next/next/no-img-element

) : (

{attachment.name} · {attachment.mimeType}

)}

); } export default PromptInputAttachments; 4e:["$","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@localmode","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json","https://localmode.ai/r/ui/conversation/prompt-input.json","button","hover-card","https://localmode.ai/r/ui/lib/browser-utils.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/localmode/conversation/prompt-input-attachments/prompt-input-attachments.tsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]