refactor: streamline PDF handling in viewer and resume components by replacing react-pdf with pdfjs-dist, enhancing loading states and error management

surfsense_web/components/report-panel/pdf-viewer.tsx

@@ -1,15 +1,14 @@
 "use client";
 
-import { ChevronLeftIcon, ChevronRightIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
+import { ZoomInIcon, ZoomOutIcon } from "lucide-react";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
-import { Document, Page, pdfjs } from "react-pdf";
+import * as pdfjsLib from "pdfjs-dist";
-import "react-pdf/dist/Page/AnnotationLayer.css";
+import type { PDFDocumentProxy, RenderTask } from "pdfjs-dist";
-import "react-pdf/dist/Page/TextLayer.css";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 import { getAuthHeaders } from "@/lib/auth-utils";
 
-pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
 	"pdfjs-dist/build/pdf.worker.min.mjs",
 	import.meta.url
 ).toString();
@@ -21,39 +20,164 @@ interface PdfViewerProps {
 const ZOOM_STEP = 0.15;
 const MIN_ZOOM = 0.5;
 const MAX_ZOOM = 3;
+const PAGE_GAP = 12;
 
 export function PdfViewer({ pdfUrl }: PdfViewerProps) {
-	const [numPages, setNumPages] = useState<number>(0);
+	const [numPages, setNumPages] = useState(0);
-	const [pageNumber, setPageNumber] = useState(1);
 	const [scale, setScale] = useState(1);
+	const [loading, setLoading] = useState(true);
 	const [loadError, setLoadError] = useState<string | null>(null);
-	const containerRef = useRef<HTMLDivElement>(null);
+	const [currentPage, setCurrentPage] = useState(1);
-	const documentOptionsRef = useRef({ httpHeaders: getAuthHeaders() });
 
-	const onDocumentLoadSuccess = useCallback(({ numPages }: { numPages: number }) => {
+	const scrollContainerRef = useRef<HTMLDivElement>(null);
-		setNumPages(numPages);
+	const pagesContainerRef = useRef<HTMLDivElement>(null);
-		setPageNumber(1);
+	const pdfDocRef = useRef<PDFDocumentProxy | null>(null);
-		setLoadError(null);
+	const canvasRefs = useRef<Map<number, HTMLCanvasElement>>(new Map());
+	const renderTasksRef = useRef<Map<number, RenderTask>>(new Map());
+	const renderedScalesRef = useRef<Map<number, number>>(new Map());
+
+	const renderPage = useCallback(async (pageNum: number, currentScale: number) => {
+		const pdf = pdfDocRef.current;
+		const canvas = canvasRefs.current.get(pageNum);
+		if (!pdf || !canvas) return;
+
+		if (renderedScalesRef.current.get(pageNum) === currentScale) return;
+
+		const existing = renderTasksRef.current.get(pageNum);
+		if (existing) {
+			existing.cancel();
+			renderTasksRef.current.delete(pageNum);
+		}
+
+		try {
+			const page = await pdf.getPage(pageNum);
+			const viewport = page.getViewport({ scale: currentScale });
+			const dpr = window.devicePixelRatio || 1;
+
+			canvas.width = Math.floor(viewport.width * dpr);
+			canvas.height = Math.floor(viewport.height * dpr);
+			canvas.style.width = `${Math.floor(viewport.width)}px`;
+			canvas.style.height = `${Math.floor(viewport.height)}px`;
+
+			const renderTask = page.render({
+				canvas,
+				viewport,
+				transform: dpr !== 1 ? [dpr, 0, 0, dpr, 0, 0] : undefined,
+			});
+
+			renderTasksRef.current.set(pageNum, renderTask);
+
+			await renderTask.promise;
+			renderTasksRef.current.delete(pageNum);
+			renderedScalesRef.current.set(pageNum, currentScale);
+		} catch (err: unknown) {
+			if (err instanceof Error && err.message?.includes("cancelled")) return;
+			console.error(`Failed to render page ${pageNum}:`, err);
+		}
 	}, []);
 
-	const onDocumentLoadError = useCallback((error: Error) => {
+	useEffect(() => {
-		setLoadError(error.message || "Failed to load PDF");
+		let cancelled = false;
-	}, []);
 
-	const goToPrevPage = useCallback(() => {
+		const loadDocument = async () => {
-		setPageNumber((prev) => Math.max(1, prev - 1));
+			setLoading(true);
-	}, []);
+			setLoadError(null);
+			setNumPages(0);
+			setCurrentPage(1);
 
-	const goToNextPage = useCallback(() => {
+			try {
-		setPageNumber((prev) => Math.min(numPages, prev + 1));
+				const loadingTask = pdfjsLib.getDocument({
+					url: pdfUrl,
+					httpHeaders: getAuthHeaders(),
+				});
+
+				const pdf = await loadingTask.promise;
+				if (cancelled) {
+					pdf.destroy();
+					return;
+				}
+
+				pdfDocRef.current = pdf;
+				setNumPages(pdf.numPages);
+				setLoading(false);
+			} catch (err: unknown) {
+				if (cancelled) return;
+				const message = err instanceof Error ? err.message : "Failed to load PDF";
+				setLoadError(message);
+				setLoading(false);
+			}
+		};
+
+		loadDocument();
+
+		return () => {
+			cancelled = true;
+			for (const task of renderTasksRef.current.values()) {
+				task.cancel();
+			}
+			renderTasksRef.current.clear();
+			renderedScalesRef.current.clear();
+			pdfDocRef.current?.destroy();
+			pdfDocRef.current = null;
+		};
+	}, [pdfUrl]);
+
+	useEffect(() => {
+		if (!pdfDocRef.current || numPages === 0) return;
+
+		renderedScalesRef.current.clear();
+
+		for (let i = 1; i <= numPages; i++) {
+			renderPage(i, scale);
+		}
+	}, [scale, numPages, renderPage]);
+
+	useEffect(() => {
+		const container = scrollContainerRef.current;
+		if (!container || numPages <= 1) return;
+
+		const handleScroll = () => {
+			const canvases = canvasRefs.current;
+			const containerTop = container.scrollTop;
+			const containerMid = containerTop + container.clientHeight / 2;
+
+			let closest = 1;
+			let closestDist = Number.POSITIVE_INFINITY;
+
+			for (let i = 1; i <= numPages; i++) {
+				const canvas = canvases.get(i);
+				if (!canvas) continue;
+				const rect = canvas.getBoundingClientRect();
+				const containerRect = container.getBoundingClientRect();
+				const canvasMid = rect.top - containerRect.top + containerTop + rect.height / 2;
+				const dist = Math.abs(canvasMid - containerMid);
+				if (dist < closestDist) {
+					closestDist = dist;
+					closest = i;
+				}
+			}
+
+			setCurrentPage(closest);
+		};
+
+		container.addEventListener("scroll", handleScroll, { passive: true });
+		return () => container.removeEventListener("scroll", handleScroll);
 	}, [numPages]);
 
+	const setCanvasRef = useCallback((pageNum: number, el: HTMLCanvasElement | null) => {
+		if (el) {
+			canvasRefs.current.set(pageNum, el);
+		} else {
+			canvasRefs.current.delete(pageNum);
+		}
+	}, []);
+
 	const zoomIn = useCallback(() => {
-		setScale((prev) => Math.min(MAX_ZOOM, prev + ZOOM_STEP));
+		setScale((prev) => Math.min(MAX_ZOOM, +(prev + ZOOM_STEP).toFixed(2)));
 	}, []);
 
 	const zoomOut = useCallback(() => {
-		setScale((prev) => Math.max(MIN_ZOOM, prev - ZOOM_STEP));
+		setScale((prev) => Math.max(MIN_ZOOM, +(prev - ZOOM_STEP).toFixed(2)));
 	}, []);
 
 	if (loadError) {
@@ -67,32 +191,13 @@ export function PdfViewer({ pdfUrl }: PdfViewerProps) {
 
 	return (
 		<div className="flex flex-col h-full">
-			{/* Controls bar */}
 			{numPages > 0 && (
 				<div className="flex items-center justify-center gap-2 px-4 py-2 border-b bg-sidebar shrink-0">
 					{numPages > 1 && (
 						<>
-							<Button
-								variant="ghost"
-								size="icon"
-								onClick={goToPrevPage}
-								disabled={pageNumber <= 1}
-								className="size-7"
-							>
-								<ChevronLeftIcon className="size-4" />
-							</Button>
 							<span className="text-xs text-muted-foreground tabular-nums min-w-[60px] text-center">
-								{pageNumber} / {numPages}
+								{currentPage} / {numPages}
 							</span>
-							<Button
-								variant="ghost"
-								size="icon"
-								onClick={goToNextPage}
-								disabled={pageNumber >= numPages}
-								className="size-7"
-							>
-								<ChevronRightIcon className="size-4" />
-							</Button>
 							<div className="w-px h-4 bg-border mx-1" />
 						</>
 					)}
@@ -108,32 +213,29 @@ export function PdfViewer({ pdfUrl }: PdfViewerProps) {
 				</div>
 			)}
 
-			{/* PDF content */}
+			<div
-		<div ref={containerRef} className="relative flex-1 overflow-auto flex justify-center bg-sidebar p-0">
+				ref={scrollContainerRef}
-			<Document
+				className="relative flex-1 overflow-auto bg-sidebar"
-				file={pdfUrl}
+			>
-				onLoadSuccess={onDocumentLoadSuccess}
+				{loading ? (
-				onLoadError={onDocumentLoadError}
+					<div className="absolute inset-0 flex items-center justify-center text-sidebar-foreground">
-				options={documentOptionsRef.current}
+						<Spinner size="md" />
-			loading={
+					</div>
-			<div className="absolute inset-0 flex items-center justify-center text-sidebar-foreground">
+				) : (
-				<Spinner size="md" />
+					<div
-			</div>
+						ref={pagesContainerRef}
-			}
+						className="flex flex-col items-center py-4"
-				>
+						style={{ gap: `${PAGE_GAP}px` }}
-					<Page
+					>
-						pageNumber={pageNumber}
+						{Array.from({ length: numPages }, (_, i) => i + 1).map((pageNum) => (
-						scale={scale}
+							<canvas
-						renderTextLayer
+								key={pageNum}
-						renderAnnotationLayer
+								ref={(el) => setCanvasRef(pageNum, el)}
-						className="shadow-lg"
+								className="shadow-lg"
-						error={
+							/>
-							<div className="flex items-center justify-center h-64 text-sm text-muted-foreground">
+						))}
-								Failed to render page {pageNumber}
+					</div>
-							</div>
+				)}
-						}
-					/>
-				</Document>
 			</div>
 		</div>
 	);

surfsense_web/components/tool-ui/generate-resume.tsx

@@ -3,10 +3,8 @@
 import type { ToolCallMessagePartProps } from "@assistant-ui/react";
 import { useAtomValue, useSetAtom } from "jotai";
 import { useParams, usePathname } from "next/navigation";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
-import { Document, Page, pdfjs } from "react-pdf";
+import * as pdfjsLib from "pdfjs-dist";
-import "react-pdf/dist/Page/AnnotationLayer.css";
-import "react-pdf/dist/Page/TextLayer.css";
 import { z } from "zod";
 import { openReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel.atom";
 import { TextShimmerLoader } from "@/components/prompt-kit/loader";
@@ -14,7 +12,7 @@ import { Spinner } from "@/components/ui/spinner";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { getAuthHeaders } from "@/lib/auth-utils";
 
-pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
 	"pdfjs-dist/build/pdf.worker.min.mjs",
 	import.meta.url
 ).toString();
@@ -90,6 +88,80 @@ function ResumeCancelledState() {
 	);
 }
 
+function PdfThumbnail({ pdfUrl }: { pdfUrl: string }) {
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(false);
+
+	useEffect(() => {
+		let cancelled = false;
+
+		const renderThumbnail = async () => {
+			try {
+				const loadingTask = pdfjsLib.getDocument({
+					url: pdfUrl,
+					httpHeaders: getAuthHeaders(),
+				});
+
+				const pdf = await loadingTask.promise;
+				if (cancelled) { pdf.destroy(); return; }
+
+				const page = await pdf.getPage(1);
+				if (cancelled) { pdf.destroy(); return; }
+
+				const canvas = canvasRef.current;
+				if (!canvas) { pdf.destroy(); return; }
+
+				const containerWidth = canvas.parentElement?.clientWidth || 400;
+				const unscaledViewport = page.getViewport({ scale: 1 });
+				const fitScale = containerWidth / unscaledViewport.width;
+				const viewport = page.getViewport({ scale: fitScale });
+				const dpr = window.devicePixelRatio || 1;
+
+				canvas.width = Math.floor(viewport.width * dpr);
+				canvas.height = Math.floor(viewport.height * dpr);
+				canvas.style.width = `${Math.floor(viewport.width)}px`;
+				canvas.style.height = `${Math.floor(viewport.height)}px`;
+
+				await page.render({
+					canvas,
+					viewport,
+					transform: dpr !== 1 ? [dpr, 0, 0, dpr, 0, 0] : undefined,
+				}).promise;
+				if (!cancelled) setLoading(false);
+
+				pdf.destroy();
+			} catch {
+				if (!cancelled) {
+					setError(true);
+					setLoading(false);
+				}
+			}
+		};
+
+		renderThumbnail();
+		return () => { cancelled = true; };
+	}, [pdfUrl]);
+
+	if (error) {
+		return <p className="text-sm text-muted-foreground italic">Preview unavailable</p>;
+	}
+
+	return (
+		<>
+			{loading && (
+				<div className="flex items-center justify-center h-[7rem]">
+					<Spinner size="md" />
+				</div>
+			)}
+			<canvas
+				ref={canvasRef}
+				className={loading ? "hidden" : "w-full h-auto"}
+			/>
+		</>
+	);
+}
+
 function ResumeCard({
 	reportId,
 	title,
@@ -106,9 +178,6 @@ function ResumeCard({
 	const isDesktop = useMediaQuery("(min-width: 768px)");
 	const autoOpenedRef = useRef(false);
 	const [pdfUrl, setPdfUrl] = useState<string | null>(null);
-	const [pdfReady, setPdfReady] = useState(false);
-	const [pdfError, setPdfError] = useState(false);
-	const documentOptionsRef = useRef({ httpHeaders: getAuthHeaders() });
 
 	useEffect(() => {
 		setPdfUrl(
@@ -126,15 +195,6 @@ function ResumeCard({
 		}
 	}, [reportId, title, shareToken, autoOpen, isDesktop, openPanel]);
 
-	const onPdfLoadSuccess = useCallback(() => {
-		setPdfReady(true);
-	}, []);
-
-	const onPdfLoadError = useCallback(() => {
-		setPdfReady(true);
-		setPdfError(true);
-	}, []);
-
 	const isActive = panelState.isOpen && panelState.reportId === reportId;
 
 	const handleOpen = () => {
@@ -163,39 +223,18 @@ function ResumeCard({
 				<div className="mx-5 h-px bg-border/50" />
 
 				<div className="px-5 pt-3 pb-4">
-				{pdfUrl && !pdfError ? (
+					{pdfUrl ? (
-					<div
+						<div
-						className="max-h-[7rem] overflow-hidden pointer-events-none mix-blend-multiply dark:mix-blend-screen"
+							className="max-h-[7rem] overflow-hidden pointer-events-none mix-blend-multiply dark:mix-blend-screen"
-						style={{
+							style={{
-							maskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+								maskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
-							WebkitMaskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+								WebkitMaskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
-						}}
+							}}
-					>
+						>
-						<div className="dark:invert dark:hue-rotate-180">
+							<div className="dark:invert dark:hue-rotate-180">
-							<Document
+								<PdfThumbnail pdfUrl={pdfUrl} />
-								file={pdfUrl}
+							</div>
-								options={documentOptionsRef.current}
-								onLoadSuccess={onPdfLoadSuccess}
-								onLoadError={onPdfLoadError}
-								loading={
-									<div className="flex items-center justify-center h-[7rem]">
-										<Spinner size="md" />
-									</div>
-								}
-							>
-								{pdfReady && (
-									<Page
-										pageNumber={1}
-										renderTextLayer={false}
-										renderAnnotationLayer={false}
-										className="[&_canvas]:!w-full [&_canvas]:!h-auto"
-									/>
-								)}
-							</Document>
 						</div>
-					</div>
-					) : pdfError ? (
-						<p className="text-sm text-muted-foreground italic">Preview unavailable</p>
 					) : (
 						<div className="flex items-center justify-center h-[7rem]">
 							<Spinner size="md" />