Add image preview support

Author: beNative

components/PreviewPane.tsx

@@ -28,7 +28,7 @@ const PreviewPane = React.forwardRef<HTMLDivElement, PreviewPaneProps>(({ conten
 
       setError(null);
       const renderer = previewService.getRendererForLanguage(language);
-      const result = await renderer.render(content, addLog);
+      const result = await renderer.render(content, addLog, language);
 
       clearTimeout(loadingTimer);
       if (!isCancelled) {

components/PromptEditor.tsx

@@ -26,6 +26,30 @@ interface DocumentEditorProps {
   formatTrigger: number;
 }
 
+const PREVIEWABLE_LANGUAGES = new Set<string>([
+  'markdown',
+  'html',
+  'pdf',
+  'application/pdf',
+  'image',
+  'png',
+  'jpg',
+  'jpeg',
+  'gif',
+  'bmp',
+  'webp',
+  'svg',
+  'svg+xml',
+  'image/png',
+  'image/jpg',
+  'image/jpeg',
+  'image/gif',
+  'image/webp',
+  'image/bmp',
+  'image/svg',
+  'image/svg+xml',
+]);
+
 const resolveDefaultViewMode = (mode: ViewMode | null | undefined, languageHint: string | null | undefined): ViewMode => {
   if (mode) return mode;
   const normalizedHint = languageHint?.toLowerCase();
@@ -357,7 +381,7 @@ const DocumentEditor: React.FC<DocumentEditorProps> = ({ documentNode, onSave, o
     }
     setRefinedContent(null);
   };
-  
+
   const handleCopy = async () => {
     if (!content.trim()) return;
     await navigator.clipboard.writeText(content);
@@ -367,10 +391,11 @@ const DocumentEditor: React.FC<DocumentEditorProps> = ({ documentNode, onSave, o
   };
 
   const language = documentNode.language_hint || 'plaintext';
-  const supportsAiTools = ['markdown', 'plaintext'].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 normalizedLanguage = language.toLowerCase();
+  const supportsAiTools = ['markdown', 'plaintext'].includes(normalizedLanguage);
+  const supportsPreview = PREVIEWABLE_LANGUAGES.has(normalizedLanguage);
+  const supportsFormatting = ['javascript', 'typescript', 'json', 'html', 'css', 'xml', 'yaml'].includes(normalizedLanguage);
+  const isPythonDocument = typeof window !== 'undefined' && !!window.electronAPI && (normalizedLanguage === 'python');
   const pythonDefaults = useMemo(() => ({
     ...settings.pythonDefaults,
     workingDirectory: settings.pythonWorkingDirectory ?? settings.pythonDefaults.workingDirectory ?? null,

services/languageService.ts

@@ -22,6 +22,7 @@ export const SUPPORTED_LANGUAGES = [
     { id: 'pascal', label: 'Pascal' },
     { id: 'ini', label: 'INI' },
     { id: 'pdf', label: 'PDF' },
+    { id: 'image', label: 'Image (PNG/JPEG/GIF/WebP/SVG/BMP)' },
 ];
 
 export const mapExtensionToLanguageId = (extension: string | null): string => {
@@ -80,6 +81,23 @@ export const mapExtensionToLanguageId = (extension: string | null): string => {
             return 'pdf';
         case 'pdf':
             return 'pdf';
+        case 'png':
+        case 'jpg':
+        case 'jpeg':
+        case 'gif':
+        case 'bmp':
+        case 'webp':
+        case 'svg':
+            return 'image';
+        case 'image/png':
+        case 'image/jpg':
+        case 'image/jpeg':
+        case 'image/gif':
+        case 'image/bmp':
+        case 'image/webp':
+        case 'image/svg':
+        case 'image/svg+xml':
+            return 'image';
         default:
             // Try to find a direct match in supported languages by id
             const match = SUPPORTED_LANGUAGES.find(l => l.id === extension.toLowerCase());

services/preview/IRenderer.ts

@@ -10,5 +10,9 @@ export interface IRenderer {
   /**
    * Takes a string of content and transforms it into a renderable React element or HTML string.
    */
-  render(content: string, addLog?: (level: LogLevel, message: string) => void): Promise<{ output: React.ReactElement | string; error?: string }>;
+  render(
+    content: string,
+    addLog?: (level: LogLevel, message: string) => void,
+    languageId?: string | null,
+  ): Promise<{ output: React.ReactElement | string; error?: string }>;
 }

services/preview/htmlRenderer.tsx

@@ -7,7 +7,11 @@ export class HtmlRenderer implements IRenderer {
     return languageId === 'html';
   }
 
-  async render(content: string, addLog?: (level: LogLevel, message: string) => void): Promise<{ output: React.ReactElement; error?: string }> {
+  async render(
+    content: string,
+    addLog?: (level: LogLevel, message: string) => void,
+    languageId?: string | null,
+  ): Promise<{ output: React.ReactElement; error?: string }> {
     // Using `color-scheme` allows the iframe content to respect the system's light/dark mode preference.
     const fullHtml = `<html><head><style>body { color-scheme: light dark; font-family: sans-serif; padding: 1rem; }</style></head><body>${content}</body></html>`;