File Thumbnail

1"use client";
2 
3import { useEffect, useState } from "react";
4import { cn } from "@/lib/utils";
5import { useShape } from "@/lib/shape-context";
6 
7// ─── Lazy pdfjs loader ────────────────────────────────────────────────────
8// Imports pdfjs-dist on first PDF, caches the module, and points the worker
9// at the matching CDN build. Consumers don't need bundler-side worker config.
10type PdfjsModule = typeof import("pdfjs-dist");
11let pdfjsPromise: Promise<PdfjsModule> | null = null;
12 
13async function loadPdfjs(): Promise<PdfjsModule> {
14  if (!pdfjsPromise) {
15    pdfjsPromise = import("pdfjs-dist").then((mod) => {
16      if (!mod.GlobalWorkerOptions.workerSrc) {
17        mod.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${mod.version}/build/pdf.worker.min.mjs`;
18      }
19      return mod;
20    });
21  }
22  return pdfjsPromise;
23}
24 
25async function renderPdfFirstPage(file: File, targetWidth: number): Promise<string> {
26  const pdfjs = await loadPdfjs();
27  const buffer = await file.arrayBuffer();
28  const pdf = await pdfjs.getDocument({ data: buffer }).promise;
29  const page = await pdf.getPage(1);
30  const baseViewport = page.getViewport({ scale: 1 });
31  const scale = (targetWidth * 2) / baseViewport.width; // 2× for retina
32  const viewport = page.getViewport({ scale });
33  const canvas = document.createElement("canvas");
34  canvas.width = viewport.width;
35  canvas.height = viewport.height;
36  await page.render({ canvas, viewport }).promise;
37  return canvas.toDataURL("image/png");
38}
39 
40// ─── File thumbnail ───────────────────────────────────────────────────────
41// Read-only square preview of a File. Images use object-cover via
42// `URL.createObjectURL`; PDFs render the first page via pdfjs; while either is
43// resolving a spinner is shown. Self-contained (border + surface + sizing) so
44// it can be reused both inside the composer's preview row and to render
45// already-sent attachments in a chat transcript.
46interface FileThumbnailProps {
47  file: File;
48  /** Side length of the square thumbnail in pixels. */
49  size: number;
50  className?: string;
51}
52 
53function FileThumbnail({ file, size, className }: FileThumbnailProps) {
54  const shape = useShape();
55  const isImage = file.type.startsWith("image/");
56  const isPdf = file.type === "application/pdf";
57 
58// … truncated