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
Sinaptik-AI · Oct 20, 2024 · e09e85c · e09e85c
1 parent b82c6e3
commit e09e85c
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<ChatBubbleProps> = ({
             onReferenceClick={handleReferenceClick}
           />
         ) : (
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            rehypePlugins={[rehypeSanitize]}
-          >
+          <ReactMarkdown rehypePlugins={[rehypeSanitize]}>
             {markify_text(message)}
           </ReactMarkdown>
         )}

diff --git 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<MessageWithReferencesProps> = ({
       parts.push(
         <React.Fragment key={`text-${index}`}>
           <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
             rehypePlugins={[rehypeSanitize]}
             components={{
               p: ({ children }) => <span>{children}</span>,
@@ -62,7 +60,6 @@ const MessageWithReferences: React.FC<MessageWithReferencesProps> = ({
       parts.push(
         <React.Fragment key="text-final">
           <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
             rehypePlugins={[rehypeSanitize]}
             components={{
               p: ({ children }) => <span>{children}</span>,

diff --git a/frontend/src/ee/components/HighlightPdfViewer.tsx b/frontend/src/ee/components/HighlightPdfViewer.tsx
@@ -38,7 +38,23 @@ const HighlightPdfViewer: React.FC<PdfViewerProps> = ({
 
   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<PdfViewerProps> = ({
     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);