Add PDF preview support

Author: beNative

components/PromptEditor.tsx

@@ -355,7 +355,7 @@ const DocumentEditor: React.FC<DocumentEditorProps> = ({ documentNode, onSave, o
 
   const language = documentNode.language_hint || 'plaintext';
   const supportsAiTools = ['markdown', 'plaintext'].includes(language);
-  const supportsPreview = ['markdown', 'html'].includes(language);
+  const supportsPreview = ['markdown', 'html', 'pdf'].includes(language);
   const supportsFormatting = ['javascript', 'typescript', 'json', 'html', 'css', 'xml', 'yaml'].includes(language);
   const isPythonDocument = typeof window !== 'undefined' && !!window.electronAPI && (language === 'python');
   const pythonDefaults = useMemo(() => ({

services/languageService.ts

@@ -21,6 +21,7 @@ export const SUPPORTED_LANGUAGES = [
     { id: 'yaml', label: 'YAML' },
     { id: 'pascal', label: 'Pascal' },
     { id: 'ini', label: 'INI' },
+    { id: 'pdf', label: 'PDF' },
 ];
 
 export const mapExtensionToLanguageId = (extension: string | null): string => {
@@ -75,6 +76,8 @@ export const mapExtensionToLanguageId = (extension: string | null): string => {
         case 'fmx':
         case 'ini':
              return 'ini';
+        case 'pdf':
+            return 'pdf';
         default:
             // Try to find a direct match in supported languages by id
             const match = SUPPORTED_LANGUAGES.find(l => l.id === extension.toLowerCase());

services/preview/pdfRenderer.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useMemo } from 'react';
+import type { IRenderer } from './IRenderer';
+
+interface PdfPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
+  content: string;
+}
+
+const PdfPreview = React.forwardRef<HTMLDivElement, PdfPreviewProps>(({ content, className, ...rest }, ref) => {
+  const { url, error, isBlobUrl } = useMemo(() => {
+    const trimmed = content.trim();
+    if (!trimmed) {
+      return { url: null as string | null, error: 'This document does not contain any PDF data.', isBlobUrl: false };
+    }
+
+    if (trimmed.startsWith('data:application/pdf')) {
+      return { url: trimmed, error: null, isBlobUrl: false };
+    }
+
+    const cleanBase64 = trimmed.replace(/\s+/g, '');
+
+    const decodeBase64 = () => {
+      try {
+        const markerIndex = cleanBase64.toLowerCase().indexOf('base64,');
+        const payload = markerIndex !== -1
+          ? cleanBase64.slice(markerIndex + 'base64,'.length)
+          : cleanBase64;
+        const byteCharacters = atob(payload);
+        const byteLength = byteCharacters.length;
+        const byteNumbers = new Uint8Array(byteLength);
+        for (let i = 0; i < byteLength; i += 1) {
+          byteNumbers[i] = byteCharacters.charCodeAt(i);
+        }
+        const blob = new Blob([byteNumbers], { type: 'application/pdf' });
+        return URL.createObjectURL(blob);
+      } catch {
+        return null;
+      }
+    };
+
+    const blobUrlFromBase64 = decodeBase64();
+    if (blobUrlFromBase64) {
+      return { url: blobUrlFromBase64, error: null, isBlobUrl: true };
+    }
+
+    if (trimmed.startsWith('%PDF')) {
+      const blob = new Blob([trimmed], { type: 'application/pdf' });
+      return { url: URL.createObjectURL(blob), error: null, isBlobUrl: true };
+    }
+
+    return { url: null, error: 'Stored PDF data is not in a recognized format.', isBlobUrl: false };
+  }, [content]);
+
+  useEffect(() => {
+    return () => {
+      if (isBlobUrl && url) {
+        URL.revokeObjectURL(url);
+      }
+    };
+  }, [isBlobUrl, url]);
+
+  if (error) {
+    return (
+      <div
+        ref={ref}
+        className={`w-full h-full flex items-center justify-center text-text-secondary text-sm ${className ?? ''}`}
+        {...rest}
+      >
+        {error}
+      </div>
+    );
+  }
+
+  if (!url) {
+    return (
+      <div
+        ref={ref}
+        className={`w-full h-full flex items-center justify-center text-text-secondary text-sm ${className ?? ''}`}
+        {...rest}
+      >
+        Unable to display the stored PDF document.
+      </div>
+    );
+  }
+
+  return (
+    <div ref={ref} className={`w-full h-full overflow-auto bg-secondary ${className ?? ''}`} {...rest}>
+      <iframe
+        title="PDF Preview"
+        src={url}
+        className="w-full h-full border-0 bg-white"
+      />
+    </div>
+  );
+});
+
+PdfPreview.displayName = 'PdfPreview';
+
+export class PdfRenderer implements IRenderer {
+  canRender(languageId: string): boolean {
+    return languageId === 'pdf' || languageId === 'application/pdf';
+  }
+
+  async render(content: string) {
+    return { output: <PdfPreview content={content} /> };
+  }
+}

services/previewService.ts

@@ -2,6 +2,7 @@ import type { IRenderer } from './preview/IRenderer';
 import { HtmlRenderer } from './preview/htmlRenderer';
 import { MarkdownRenderer } from './preview/markdownRenderer';
 import { PlaintextRenderer } from './preview/plaintextRenderer';
+import { PdfRenderer } from './preview/pdfRenderer';
 
 class PreviewService {
   private renderers: IRenderer[];
@@ -11,6 +12,7 @@ class PreviewService {
     this.renderers = [
       new MarkdownRenderer(),
       new HtmlRenderer(),
+      new PdfRenderer(),
       new PlaintextRenderer(), // Fallback renderer should be last
     ];
   }