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/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"] 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/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"] 51:T12fd,"use client"; import { useEffect, useRef } from "react"; import { useAttachments, type Attachment, type UploadFn } from "../_primitives/chat-core/chat-core"; import { Button } from "../button/button"; import { DemoFrame } from "../lib/demo-frame"; import { AttachmentList } from "./attachment-chip"; /** A small landscape as an SVG data URL, so the demo ships no image files. */ export function scene(sky: string, sun: string, far: string, near: string, sunX = 64) { const svg = ``; return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`; } /** * A pretend upload: progress in uneven steps over ~1.5–2.5s (like a real network), failing * when the name contains "fail". Respects the abort signal. */ export const fakeUpload: UploadFn = (file, { onProgress, signal }) => new Promise((resolve, reject) => { let p = 0; const id = window.setInterval(() => { p = Math.min(1, p + 0.06 + Math.random() * 0.14); onProgress(p); if (/fail/i.test(file.name) && p > 0.55) { clearInterval(id); reject(new Error("Connection lost")); } else if (p >= 1) { clearInterval(id); resolve({ url: URL.createObjectURL(file) }); } }, 220); signal.addEventListener("abort", () => clearInterval(id)); }); const SEED: Attachment[] = [ { id: "a1", name: "harbour-dawn.png", kind: "image", mediaType: "image/png", previewUrl: scene("#f6d6b8", "#f08a5d", "#7a8fb0", "#3e4f6e", 70), status: "done" }, { id: "a2", name: "Q3 board deck.pdf", kind: "file", mediaType: "application/pdf", size: 4_812_000, status: "done" }, { id: "a3", name: "dunes.jpg", kind: "image", mediaType: "image/jpeg", previewUrl: scene("#fbe7c6", "#e9a15a", "#d8a46c", "#a7683a", 40), status: "uploading", progress: 0.42 }, { id: "a4", name: "churn-by-cohort.csv", kind: "file", mediaType: "text/csv", size: 218_400, status: "error", error: "Connection lost" }, ]; /** Uploads in flight, a finished deck, a failed CSV with Retry; add your own files to watch the ring. */ export function AttachmentChipDemo() { const input = useRef(null); const { attachments, add, remove, retry, update } = useAttachments({ upload: fakeUpload, defaultValue: SEED, maxSize: 20_000_000 }); const timers = useRef([]); // Seeded chips have no File, so drive their "upload" here. const drive = (id: string, from: number) => { update(id, { status: "uploading", progress: from, error: undefined }); let p = from; const t = window.setInterval(() => { p = Math.min(1, p + 0.08 + Math.random() * 0.1); update(id, p >= 1 ? { status: "done", progress: 1 } : { progress: p }); if (p >= 1) clearInterval(t); }, 260); timers.current.push(t); }; useEffect(() => { const start = window.setTimeout(() => drive("a3", 0.42), 900); const list = timers.current; return () => { clearTimeout(start); list.forEach(clearInterval); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (

Finance team

(attachments.find((a) => a.id === id)?.file ? retry(id) : drive(id, 0.05))} />

Up to 20 MB per file

{ add(Array.from(e.target.files ?? [])); e.target.value = ""; }} />

); } 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":[null,["$","$L4f",null,{"namespace":"@eased","registryDependencies":["https://eased.dev/r/attachment.json","https://eased.dev/r/eased-demo-frame.json","https://eased.dev/r/button.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/eased/attachment/attachment-demo.tsx","content":"$51","type":"registry:example","target":"@components/eased/attachment/attachment-demo.tsx"}],"className":"h-[70svh] min-h-80"}]]}]