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:Tf7d,"use client"; import { CircleAlert, X } from "lucide-react"; import type { ComponentProps, CSSProperties, ReactNode } from "react"; import { cn } from "./lib/cn"; import "./attachment.css"; // Same units as the file dropzone, kept here so installing an attachment does not bring the dropzone. const fileSize = (bytes: number) => bytes < 1024 ? `${bytes} B` : bytes < 1024 * 1024 ? `${Math.round(bytes / 1024)} KB` : `${(bytes / (1024 * 1024)).toFixed(1)} MB`; /** The list a row of attachments belongs in, so assistive technology counts them. */ export function AttachmentList({ className, ...props }: ComponentProps<"ul">) { return

, "children"> & { name: string; /** Bytes. Shown after the name once the file is done. */ size?: number; state?: "done" | "uploading" | "error"; /** 0 to 100 while uploading. The fill grows with it and the text says it too. */ progress?: number; /** What went wrong, with the limit if there is one: "Over 10 MB". */ error?: string; /** A pill is one line; a card shows `preview` above the name, for images. */ variant?: "pill" | "card"; /** The image or icon for a card. */ preview?: ReactNode; onRemove?: () => void; onRetry?: () => void; }; /** * A file or image chip for chat inputs and forms. It is the file pill from the prompt input, * with the states it needs on its own: uploading (the fill and the percentage), failed (an * error and Retry) and an image card. Progress is always text as well as a fill. Removing a * chip moves focus to its neighbour, so keyboard users keep their place. */ export function Attachment({ name, size, state = "done", progress = 0, error, variant = "pill", preview, onRemove, onRetry, className, style, ...props }: AttachmentProps) { const percent = Math.max(0, Math.min(100, Math.round(progress))); const detail = state === "uploading" ? ( `Uploading ${percent}%` ) : state === "error" ? ( <> {error ?? "Upload failed"} {onRetry && ( <> {" · "} )} ) : size !== undefined ? ( fileSize(size) ) : null; const remove = ( ); return (

{variant === "card" ? ( <>

{name} {detail && {detail}}

{onRemove && remove} ) : ( <> {state === "error" &&

); } 53:Tc41,/* attachment.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { /* Attachment: the prompt input's file pill, with upload and error states and an image card. */ [data-slot="attachment-list"] { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } [data-slot="attachment"] { position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 28px; overflow: hidden; padding-block: 0; padding-inline: 10px 4px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; animation: caliper-chip-in var(--duration-normal) var(--ease-out); } [data-slot="attachment"][data-state="uploading"] { background: linear-gradient(to right, var(--muted) var(--p, 0%), transparent var(--p, 0%)); } [data-slot="attachment"][data-state="uploading"]:dir(rtl) { background: linear-gradient(to left, var(--muted) var(--p, 0%), transparent var(--p, 0%)); } [data-slot="attachment"][data-state="error"] { border-color: var(--danger); } [data-slot="attachment-name"] { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-slot="attachment-size"] { color: var(--muted-foreground); white-space: nowrap; } [data-slot="attachment"][data-state="error"] [data-slot="attachment-size"] { color: var(--danger); } [data-slot="attachment-lead"] { flex: none; width: 12px; height: 12px; color: var(--danger); } [data-slot="attachment-remove"] { display: grid; flex: none; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); outline: none; } [data-slot="attachment-remove"]:hover { background: var(--muted); color: var(--foreground); } [data-slot="attachment-remove"]:focus-visible { outline: 2px solid var(--ring); } [data-slot="attachment-remove"] svg { width: 12px; height: 12px; } @media (pointer: coarse) { [data-slot="attachment-remove"] { width: 28px; height: 28px; } } [data-slot="attachment-retry"] { padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--foreground); font: inherit; text-decoration: underline; text-underline-offset: 2px; } [data-slot="attachment-retry"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } [data-slot="attachment"][data-variant="card"] { flex-direction: column; align-items: stretch; gap: 0; width: 168px; height: auto; padding: 0; border-radius: var(--radius-surface); background: var(--elevated); } [data-slot="attachment-preview"] { display: grid; place-items: center; height: 96px; background: var(--muted); color: var(--muted-foreground); } [data-slot="attachment-card-body"] { display: grid; padding: 8px 12px 10px; line-height: 18px; } [data-slot="attachment-card-body"] [data-slot="attachment-name"] { max-width: 100%; } [data-slot="attachment"][data-variant="card"] [data-slot="attachment-remove"] { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; background: var(--elevated-glass); box-shadow: 0 0 0 1px var(--border); } } 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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/attachment.tsx","content":"$52","type":"registry:ui","target":"components/ui/attachment.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/attachment.css","content":"$53","type":"registry:file","target":"components/ui/attachment.css"}],"className":"h-[70svh] min-h-80"}]]}]