50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T19f7,"use client"; import { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; import { useShape } from "@/lib/shape-context"; // ─── Lazy pdfjs loader ──────────────────────────────────────────────────── // Imports pdfjs-dist on first PDF, caches the module, and points the worker // at the matching CDN build. Consumers don't need bundler-side worker config. type PdfjsModule = typeof import("pdfjs-dist"); let pdfjsPromise: Promise | null = null; async function loadPdfjs(): Promise { if (!pdfjsPromise) { pdfjsPromise = import("pdfjs-dist").then((mod) => { if (!mod.GlobalWorkerOptions.workerSrc) { mod.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${mod.version}/build/pdf.worker.min.mjs`; } return mod; }); } return pdfjsPromise; } async function renderPdfFirstPage(file: File, targetWidth: number): Promise { const pdfjs = await loadPdfjs(); const buffer = await file.arrayBuffer(); const pdf = await pdfjs.getDocument({ data: buffer }).promise; const page = await pdf.getPage(1); const baseViewport = page.getViewport({ scale: 1 }); const scale = (targetWidth * 2) / baseViewport.width; // 2× for retina const viewport = page.getViewport({ scale }); const canvas = document.createElement("canvas"); canvas.width = viewport.width; canvas.height = viewport.height; await page.render({ canvas, viewport }).promise; return canvas.toDataURL("image/png"); } // ─── File thumbnail ─────────────────────────────────────────────────────── // Read-only square preview of a File. Images use object-cover via // `URL.createObjectURL`; PDFs render the first page via pdfjs; while either is // resolving a spinner is shown. Self-contained (border + surface + sizing) so // it can be reused both inside the composer's preview row and to render // already-sent attachments in a chat transcript. interface FileThumbnailProps { file: File; /** Side length of the square thumbnail in pixels. */ size: number; className?: string; } function FileThumbnail({ file, size, className }: FileThumbnailProps) { const shape = useShape(); const isImage = file.type.startsWith("image/"); const isPdf = file.type === "application/pdf"; // Create blob URL inside an effect (NOT useMemo) so the cleanup-revoke // and the URL-creation stay in sync. In React 18 StrictMode dev, a // useMemo-created URL gets revoked by the simulated effect-cleanup but // useMemo doesn't re-run on the simulated re-mount (no re-render happens), // leaving the DOM with a stale, revoked `blob:` URL — broken image. // Putting both in the same effect means the simulated re-mount creates a // fresh URL and updates state. The one-frame "before URL" state is // covered by the bg-accent (no fallback icon shown for images), so the // transition is visually clean. const [imageUrl, setImageUrl] = useState(null); useEffect(() => { if (!isImage) { // Clear stale state if the `file` prop swaps type on the same mount — // otherwise a revoked blob URL would keep winning over the new preview. setImageUrl(null); return; } const url = URL.createObjectURL(file); setImageUrl(url); return () => URL.revokeObjectURL(url); }, [isImage, file]); // PDFs need async rendering — loading flash is unavoidable for the first // ~100–300ms while pdfjs loads. Falls back to the generic icon on error // (corrupt/password-protected file, CDN worker blocked). const [pdfUrl, setPdfUrl] = useState(null); const [pdfError, setPdfError] = useState(false); useEffect(() => { setPdfError(false); if (!isPdf) { setPdfUrl(null); return; } let cancelled = false; renderPdfFirstPage(file, size) .then((url) => { if (!cancelled) setPdfUrl(url); }) .catch(() => { if (!cancelled) setPdfError(true); }); return () => { cancelled = true; }; }, [file, isPdf, size]); const previewUrl = imageUrl ?? pdfUrl; // Spinner only while a preview is genuinely pending; anything that can't // produce one (failed PDF, unsupported type) gets the generic icon instead. const isPending = (isImage && !imageUrl) || (isPdf && !pdfUrl && !pdfError); return (

{previewUrl ? ( // eslint-disable-next-line @next/next/no-img-element {file.name}

) : isPending ? ( // Circular spinner while we wait for the preview to be ready. // Used for both images (brief URL-creation gap) and PDFs (longer // pdfjs render). The thin ring is mostly subtle (border-border) // with one quadrant accented (border-t-muted-foreground) so the // `animate-spin` rotation reads as a moving arc.

) : ( // Generic document glyph for files with no renderable preview. // Inline SVG (not the icon system) so the thumbnail stays // self-contained for registry consumers.

)}

); } export { FileThumbnail, loadPdfjs, renderPdfFirstPage }; export type { FileThumbnailProps }; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","pdfjs-dist",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/pdfjs-dist","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"pdfjs-dist"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["utils","https://www.fluidfunctionalism.com/r/shape-context.json"]}]]}],["$","$L51",null,{"sourceUrl":"https://www.fluidfunctionalism.com/r/file-thumbnail.json","proxyUrl":"https://shadcnregistry.com/r/fluid/file-thumbnail","itemId":"@fluid/file-thumbnail"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/default/file-thumbnail.tsx","content":"$53","type":"registry:ui"}]}]]}],"$L54"]}]

File Thumbnail

Installation

Files

components

Styles