mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-25 00:36:31 +02:00
refactor: streamline PDF handling in viewer and resume components by replacing react-pdf with pdfjs-dist, enhancing loading states and error management
This commit is contained in:
Anish Sarkar
parent
6e7f832181
commit
df88fcd0fb
2 changed files with 260 additions and 119 deletions
|
|
@ -1,15 +1,14 @@
|
|||
"use client";
|
||||
|
||||
import { ChevronLeftIcon, ChevronRightIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import { Document, Page, pdfjs } from "react-pdf";
|
||||
import "react-pdf/dist/Page/AnnotationLayer.css";
|
||||
import "react-pdf/dist/Page/TextLayer.css";
|
||||
import { ZoomInIcon, ZoomOutIcon } from "lucide-react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import * as pdfjsLib from "pdfjs-dist";
|
||||
import type { PDFDocumentProxy, RenderTask } from "pdfjs-dist";
|
||||
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 [pageNumber, setPageNumber] = useState(1);
|
||||
const [numPages, setNumPages] = useState(0);
|
||||
const [scale, setScale] = useState(1);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const documentOptionsRef = useRef({ httpHeaders: getAuthHeaders() });
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
const onDocumentLoadSuccess = useCallback(({ numPages }: { numPages: number }) => {
|
||||
setNumPages(numPages);
|
||||
setPageNumber(1);
|
||||
setLoadError(null);
|
||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||
const pagesContainerRef = useRef<HTMLDivElement>(null);
|
||||
const pdfDocRef = useRef<PDFDocumentProxy | null>(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) => {
|
||||
setLoadError(error.message || "Failed to load PDF");
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
const goToPrevPage = useCallback(() => {
|
||||
setPageNumber((prev) => Math.max(1, prev - 1));
|
||||
}, []);
|
||||
const loadDocument = async () => {
|
||||
setLoading(true);
|
||||
setLoadError(null);
|
||||
setNumPages(0);
|
||||
setCurrentPage(1);
|
||||
|
||||
const goToNextPage = useCallback(() => {
|
||||
setPageNumber((prev) => Math.min(numPages, prev + 1));
|
||||
try {
|
||||
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 ref={containerRef} className="relative flex-1 overflow-auto flex justify-center bg-sidebar p-0">
|
||||
<Document
|
||||
file={pdfUrl}
|
||||
onLoadSuccess={onDocumentLoadSuccess}
|
||||
onLoadError={onDocumentLoadError}
|
||||
options={documentOptionsRef.current}
|
||||
loading={
|
||||
<div className="absolute inset-0 flex items-center justify-center text-sidebar-foreground">
|
||||
<Spinner size="md" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Page
|
||||
pageNumber={pageNumber}
|
||||
scale={scale}
|
||||
renderTextLayer
|
||||
renderAnnotationLayer
|
||||
className="shadow-lg"
|
||||
error={
|
||||
<div className="flex items-center justify-center h-64 text-sm text-muted-foreground">
|
||||
Failed to render page {pageNumber}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Document>
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
className="relative flex-1 overflow-auto bg-sidebar"
|
||||
>
|
||||
{loading ? (
|
||||
<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` }}
|
||||
>
|
||||
{Array.from({ length: numPages }, (_, i) => i + 1).map((pageNum) => (
|
||||
<canvas
|
||||
key={pageNum}
|
||||
ref={(el) => setCanvasRef(pageNum, el)}
|
||||
className="shadow-lg"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 { Document, Page, pdfjs } from "react-pdf";
|
||||
import "react-pdf/dist/Page/AnnotationLayer.css";
|
||||
import "react-pdf/dist/Page/TextLayer.css";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import * as pdfjsLib from "pdfjs-dist";
|
||||
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 ? (
|
||||
<div
|
||||
className="max-h-[7rem] overflow-hidden pointer-events-none mix-blend-multiply dark:mix-blend-screen"
|
||||
style={{
|
||||
maskImage: "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">
|
||||
<Document
|
||||
file={pdfUrl}
|
||||
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>
|
||||
{pdfUrl ? (
|
||||
<div
|
||||
className="max-h-[7rem] overflow-hidden pointer-events-none mix-blend-multiply dark:mix-blend-screen"
|
||||
style={{
|
||||
maskImage: "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">
|
||||
<PdfThumbnail pdfUrl={pdfUrl} />
|
||||
</div>
|
||||
</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" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue