Add In-App PDF Preview for KA Citations

e2e-chatbot-app-next/client/package.json

@@ -38,8 +38,10 @@
     "framer-motion": "^11.3.19",
     "lucide-react": "^0.446.0",
     "next-themes": "^0.4.6",
+    "pdfjs-dist": "^5.4.296",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-pdf": "^10.2.0",
     "react-router-dom": "^6.22.0",
     "react-syntax-highlighter": "^15.6.6",
     "sonner": "^1.5.0",
@@ -63,6 +65,7 @@
     "tailwindcss": "^4.1.13",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.9.3",
-    "vite": "npm:rolldown-vite@latest"
+    "vite": "npm:rolldown-vite@latest",
+    "vite-plugin-static-copy": "^3.1.4"
   }
 }

e2e-chatbot-app-next/client/src/components/databricks-message-citation.tsx

@@ -6,6 +6,8 @@ import type {
 } from 'react';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
 import { cn } from '@/lib/utils';
+import { parseUnityCatalogPDFLink } from '@/lib/pdf-utils';
+import { PDFCitationLink } from './pdf-preview';
 
 /**
  * ReactMarkdown/Streamdown component that handles Databricks message citations.
@@ -50,11 +52,24 @@ const isDatabricksMessageCitationLink = (
   link?.endsWith('::databricks_citation') ?? false;
 
 // Renders the Databricks message citation.
+// UC PDF links open in a preview drawer, other links open in a new tab.
 const DatabricksMessageCitationRenderer = (
   props: PropsWithChildren<{
     href: string;
   }>,
 ) => {
+  // Check if this is a Unity Catalog PDF link
+  const pdfMetadata = parseUnityCatalogPDFLink(props.href);
+
+  if (pdfMetadata) {
+    return (
+      <PDFCitationLink pdfMetadata={pdfMetadata}>
+        {props.children}
+      </PDFCitationLink>
+    );
+  }
+
+  // Default behavior: open in new tab with tooltip
   return (
     <Tooltip>
       <TooltipTrigger asChild>

e2e-chatbot-app-next/client/src/components/pdf-preview/PDFCitationLink.tsx

@@ -0,0 +1,62 @@
+import { useState, useCallback, type ReactNode } from 'react';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { PDFPreviewSheet } from './PDFPreviewSheet';
+import type { UCPDFMetadata } from '@/lib/pdf-utils';
+
+export interface PDFCitationLinkProps {
+  children: ReactNode;
+  pdfMetadata: UCPDFMetadata;
+}
+
+export function PDFCitationLink({ children, pdfMetadata }: PDFCitationLinkProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsOpen(true);
+  }, []);
+
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            onClick={handleClick}
+            className="cursor-pointer rounded-md bg-muted-foreground px-2 py-0 font-medium text-zinc-200 underline"
+          >
+            {children}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent
+          style={{ maxWidth: '350px', padding: '8px', wordWrap: 'break-word' }}
+        >
+          <div className="space-y-1">
+            <div className="font-medium">{pdfMetadata.filename}</div>
+            {pdfMetadata.page && (
+              <div className="text-muted-foreground text-xs">
+                Page {pdfMetadata.page}
+              </div>
+            )}
+            {pdfMetadata.textFragment && (
+              <div className='border-muted-foreground/50 border-l-2 pl-2 text-xs italic'>
+                "{pdfMetadata.textFragment}"
+              </div>
+            )}
+          </div>
+        </TooltipContent>
+      </Tooltip>
+
+      <PDFPreviewSheet
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        filename={pdfMetadata.filename}
+        volumePath={pdfMetadata.volumePath}
+        filePath={pdfMetadata.filePath}
+        initialPage={pdfMetadata.page}
+        highlightText={pdfMetadata.textFragment}
+      />
+    </>
+  );
+}