PDF preview with data URLs

Author: nikitakrh

smoosense-gui/src/lib/utils/cellRenderers/HuggingFaceMediaCellRenderer.tsx

@@ -6,6 +6,7 @@ import { getFileType, FileType } from '../fileTypes'
 import { toHuggingFaceDataUrl, getHuggingFaceMediaPath } from '../huggingFaceMediaUtils'
 import { AudioCellContent } from './AudioCellRenderer'
 import { ImageCellContent } from './ImageCellRenderer'
+import { PdfCellContent } from './PdfCellRenderer'
 import { useAppSelector } from '@/lib/hooks'
 
 interface HuggingFaceMediaCellRendererProps {
@@ -60,6 +61,10 @@ const HuggingFaceMediaCellRenderer = memo(function HuggingFaceMediaCellRenderer(
     )
   }
 
+  if (fileType === FileType.Pdf) {
+    return <PdfCellContent pdfUrl={dataUrl} copyValue={path} />
+  }
+
   if (fileType === FileType.Video) {
     const cellContent = (
       <div className="w-full h-full flex items-center justify-center p-1 text-xs text-muted-foreground">

smoosense-gui/src/lib/utils/cellRenderers/PdfCellRenderer.tsx

@@ -7,19 +7,25 @@ import { mayResolveUrl } from '@/lib/utils/mediaUrlUtils'
 import { pathBasename } from "@/lib/utils/pathUtils"
 import { useAppSelector } from '@/lib/hooks'
 
-interface PdfCellRendererProps {
-  value: unknown
+interface PdfCellContentProps {
+  /** URL that goes into the iframe — may be a regular URL or a data: URL. */
+  pdfUrl: string
+  /** User-friendly identifier shown in header and copied on click (e.g. original path or filename). */
+  copyValue: string
+  /** URL used for external open; defaults to copyValue when omitted. */
+  openUrl?: string
 }
 
-const PdfCellRenderer = memo(function PdfCellRenderer({ value }: PdfCellRendererProps) {
-  const tablePath = useAppSelector((state) => state.ui.tablePath)
-  const baseUrl = useAppSelector((state) => state.ui.baseUrl)
-  const originalUrl = String(value).trim()
-
-  const resolvedUrl = mayResolveUrl({ value, tablePath, baseUrl })
-
-  // Extract filename from URL
-  const filename = pathBasename(originalUrl)
+/**
+ * Shared PDF cell content that renders a FileText-icon cell and an iframe popover.
+ * Accepts both regular URLs and data: URLs (for inline BLOB bytes).
+ */
+export const PdfCellContent = memo(function PdfCellContent({
+  pdfUrl,
+  copyValue,
+  openUrl,
+}: PdfCellContentProps) {
+  const filename = pathBasename(copyValue)
 
   const cellContent = (
     <div className="flex items-center gap-2 px-2 py-1">
@@ -30,7 +36,7 @@ const PdfCellRenderer = memo(function PdfCellRenderer({ value }: PdfCellRenderer
 
   const popoverContent = (
     <iframe
-      src={resolvedUrl}
+      src={pdfUrl}
       className="w-full h-full border-0"
       title="PDF Preview"
     />
@@ -40,11 +46,24 @@ const PdfCellRenderer = memo(function PdfCellRenderer({ value }: PdfCellRenderer
     <CellPopover
       cellContent={cellContent}
       popoverContent={popoverContent}
-      url={resolvedUrl}
-      copyValue={originalUrl}
+      url={openUrl ?? copyValue}
+      copyValue={copyValue}
       popoverClassName="w-[600px] h-[500px]"
     />
   )
 })
 
+interface PdfCellRendererProps {
+  value: unknown
+}
+
+const PdfCellRenderer = memo(function PdfCellRenderer({ value }: PdfCellRendererProps) {
+  const tablePath = useAppSelector((state) => state.ui.tablePath)
+  const baseUrl = useAppSelector((state) => state.ui.baseUrl)
+  const originalUrl = String(value).trim()
+  const resolvedUrl = mayResolveUrl({ value, tablePath, baseUrl })
+
+  return <PdfCellContent pdfUrl={resolvedUrl} copyValue={originalUrl} openUrl={resolvedUrl} />
+})
+
 export default PdfCellRenderer