From e09e85c653f79bbb329e53b20e0cba5fe349691f Mon Sep 17 00:00:00 2001 From: Arslan Saleem Date: Thu, 17 Oct 2024 23:36:47 +0200 Subject: [PATCH] fix[PdfHighlight]: broken ui issues in safari (#28) * fix: broken ui issues in safari * fix[pdfHighlight]: build and pdf highlight issues resolved * fix: build issues on github * fix: build issues * fix: build issues --- backend/app/processing/process_queue.py | 2 +- frontend/next.config.mjs | 2 +- .../src/components/ChatReferenceDrawer.tsx | 15 ++++++---- frontend/src/components/ui/ChatBubble.tsx | 6 +--- .../components/ui/MessageWithReferences.tsx | 3 -- .../src/ee/components/HighlightPdfViewer.tsx | 28 +++++++++++++++---- 6 files changed, 35 insertions(+), 21 deletions(-) diff --git a/backend/app/processing/process_queue.py b/backend/app/processing/process_queue.py index 53d9924..3723f78 100644 --- a/backend/app/processing/process_queue.py +++ b/backend/app/processing/process_queue.py @@ -136,7 +136,7 @@ def process_task(process_id: int): process.started_at = datetime.utcnow() db.commit() - process_steps = process_repository.get_process_steps_with_asset_content(db, process.id, [ProcessStepStatus.PENDING.name, ProcessStepStatus.IN_PROGRESS.name]) + process_steps = process_repository.get_process_steps_with_asset_content(db, process.id, [ProcessStepStatus.PENDING.name, ProcessStepStatus.FAILED.name, ProcessStepStatus.IN_PROGRESS.name]) if not process_steps: raise Exception("No process found!") diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs index 2e21b9d..085ea7e 100644 --- a/frontend/next.config.mjs +++ b/frontend/next.config.mjs @@ -1,5 +1,5 @@ -/** @type {import('next').NextConfig} */ const nextConfig = { + swcMinify: false, // TODO - track and remove this later: https://github.com/wojtekmaj/react-pdf/issues/1822 async rewrites() { return [ { diff --git a/frontend/src/components/ChatReferenceDrawer.tsx b/frontend/src/components/ChatReferenceDrawer.tsx index b7f48d3..935eb74 100644 --- a/frontend/src/components/ChatReferenceDrawer.tsx +++ b/frontend/src/components/ChatReferenceDrawer.tsx @@ -20,12 +20,15 @@ const ChatReferenceDrawer = ({ filename, onCancel, }: IProps) => { - const file_url = - project_id && filename - ? `${BASE_STORAGE_URL}/${project_id}/${filename}` - : null; - if (!filename) { - console.error("Filename is required to display the reference"); + let file_url = null; + if (isOpen) { + file_url = + project_id && filename + ? `${BASE_STORAGE_URL}/${project_id}/${filename}` + : null; + if (!filename) { + console.error("Filename is required to display the reference"); + } } return ( diff --git a/frontend/src/components/ui/ChatBubble.tsx b/frontend/src/components/ui/ChatBubble.tsx index ef16fec..04ce908 100644 --- a/frontend/src/components/ui/ChatBubble.tsx +++ b/frontend/src/components/ui/ChatBubble.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState, useCallback } from "react"; import ReactMarkdown from "react-markdown"; -import remarkGfm from "remark-gfm"; import rehypeSanitize from "rehype-sanitize"; import { markify_text } from "@/lib/utils"; import { ChatReference, ChatReferences } from "@/interfaces/chat"; @@ -132,10 +131,7 @@ const ChatBubble: React.FC = ({ onReferenceClick={handleReferenceClick} /> ) : ( - + {markify_text(message)} )} diff --git a/frontend/src/components/ui/MessageWithReferences.tsx b/frontend/src/components/ui/MessageWithReferences.tsx index 85af4ed..9067bc9 100644 --- a/frontend/src/components/ui/MessageWithReferences.tsx +++ b/frontend/src/components/ui/MessageWithReferences.tsx @@ -1,6 +1,5 @@ import React from "react"; import ReactMarkdown from "react-markdown"; -import remarkGfm from "remark-gfm"; import rehypeSanitize from "rehype-sanitize"; import { ChatReference, ChatReferences } from "@/interfaces/chat"; import TooltipWrapper from "./Tooltip"; @@ -27,7 +26,6 @@ const MessageWithReferences: React.FC = ({ parts.push( {children}, @@ -62,7 +60,6 @@ const MessageWithReferences: React.FC = ({ parts.push( {children}, diff --git a/frontend/src/ee/components/HighlightPdfViewer.tsx b/frontend/src/ee/components/HighlightPdfViewer.tsx index 5b4738e..c2b7197 100644 --- a/frontend/src/ee/components/HighlightPdfViewer.tsx +++ b/frontend/src/ee/components/HighlightPdfViewer.tsx @@ -38,7 +38,23 @@ const HighlightPdfViewer: React.FC = ({ useEffect(() => { if (typeof window !== "undefined") { - pdfjs.GlobalWorkerOptions.workerSrc = `/pdf.worker.mjs`; + // Polyfill for Promise.withResolvers + if (typeof Promise.withResolvers === "undefined") { + // @ts-expect-error This does not exist outside of polyfill which this is doing + window.Promise.withResolvers = function () { + let resolve, reject; + const promise = new Promise((res, rej) => { + resolve = res; + reject = rej; + }); + return { promise, resolve, reject }; + }; + } + + pdfjs.GlobalWorkerOptions.workerSrc = new URL( + "pdfjs-dist/legacy/build/pdf.worker.min.mjs", + import.meta.url + ).toString(); } }, []); @@ -84,15 +100,17 @@ const HighlightPdfViewer: React.FC = ({ highlightLayer.className = styles.highlightLayer; pageContainer.appendChild(highlightLayer); + const pixelRatio = window.devicePixelRatio || 1; + sources.forEach((source) => { const highlightDiv = document.createElement("div"); // Set the position and size of the highlight highlightDiv.style.position = "absolute"; - highlightDiv.style.left = `${source.x / 2}px`; - highlightDiv.style.top = `${source.y / 2}px`; - highlightDiv.style.width = `${source.width / 2}px`; - highlightDiv.style.height = `${source.height / 2}px`; + highlightDiv.style.left = `${source.x / pixelRatio}px`; + highlightDiv.style.top = `${source.y / pixelRatio}px`; + highlightDiv.style.width = `${source.width / pixelRatio}px`; + highlightDiv.style.height = `${source.height / pixelRatio}px`; highlightDiv.style.backgroundColor = "rgba(255, 255, 0, 0.3)"; // Yellow highlight highlightDiv.style.pointerEvents = "none"; // Allow interactions with underlying text highlightDiv.classList.add(styles.highlightDiv);