+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/file-renderers/code-renderer.tsx b/frontend/src/components/file-renderers/code-renderer.tsx
new file mode 100644
index 00000000..6badd049
--- /dev/null
+++ b/frontend/src/components/file-renderers/code-renderer.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import CodeMirror from "@uiw/react-codemirror";
+import { vscodeDark } from "@uiw/codemirror-theme-vscode";
+import { langs } from "@uiw/codemirror-extensions-langs";
+import { cn } from "@/lib/utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { xcodeLight } from "@uiw/codemirror-theme-xcode";
+import { useTheme } from "next-themes";
+import { EditorView } from "@codemirror/view";
+
+interface CodeRendererProps {
+ content: string;
+ language?: string;
+ className?: string;
+}
+
+// Map of language aliases to CodeMirror language support
+const languageMap: Record
+
+
+
+
+
+ {fileExtension.toUpperCase()}
+
+ {fileName}
++ This binary file cannot be previewed in the browser +
+ + +
+
+
+ {/* Controls */}
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/file-renderers/index.tsx b/frontend/src/components/file-renderers/index.tsx
new file mode 100644
index 00000000..e166a9e5
--- /dev/null
+++ b/frontend/src/components/file-renderers/index.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { MarkdownRenderer } from "./markdown-renderer";
+import { CodeRenderer } from "./code-renderer";
+import { PdfRenderer } from "./pdf-renderer";
+import { ImageRenderer } from "./image-renderer";
+import { BinaryRenderer } from "./binary-renderer";
+
+export type FileType =
+ | 'markdown'
+ | 'code'
+ | 'pdf'
+ | 'image'
+ | 'text'
+ | 'binary';
+
+interface FileRendererProps {
+ content: string | null;
+ binaryUrl: string | null;
+ fileName: string;
+ className?: string;
+}
+
+// Helper function to determine file type from extension
+export function getFileTypeFromExtension(fileName: string): FileType {
+ const extension = fileName.split('.').pop()?.toLowerCase() || '';
+
+ const markdownExtensions = ['md', 'markdown'];
+ const codeExtensions = [
+ 'js', 'jsx', 'ts', 'tsx', 'html', 'css', 'json', 'py', 'python',
+ 'java', 'c', 'cpp', 'h', 'cs', 'go', 'rs', 'php', 'rb', 'sh', 'bash',
+ 'xml', 'yml', 'yaml', 'toml', 'sql', 'graphql', 'swift', 'kotlin',
+ 'dart', 'r', 'lua', 'scala', 'perl', 'haskell', 'rust'
+ ];
+ const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp', 'ico'];
+ const pdfExtensions = ['pdf'];
+ const textExtensions = ['txt', 'csv', 'log', 'env', 'ini'];
+
+ if (markdownExtensions.includes(extension)) {
+ return 'markdown';
+ } else if (codeExtensions.includes(extension)) {
+ return 'code';
+ } else if (imageExtensions.includes(extension)) {
+ return 'image';
+ } else if (pdfExtensions.includes(extension)) {
+ return 'pdf';
+ } else if (textExtensions.includes(extension)) {
+ return 'text';
+ } else {
+ return 'binary';
+ }
+}
+
+// Helper function to get language from file extension for code highlighting
+export function getLanguageFromExtension(fileName: string): string {
+ const extension = fileName.split('.').pop()?.toLowerCase() || '';
+
+ const extensionToLanguage: Record
+
+
+ {/* Image info overlay */}
+ {showInfo && imgInfo && (
+
+
+ {Math.round(zoom * 100)}%
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Image container */}
+ Type: {imgInfo.type}
+Dimensions: {imgInfo.width} × {imgInfo.height}
+ 0.5 ? 'grab' : 'default'),
+ backgroundColor: '#f5f5f5',
+ backgroundImage: 'linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)',
+ backgroundSize: '20px 20px',
+ backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+ }}
+ >
+ {imgError ? (
+
+
+
+ ) : (
+ Failed to load image
+The image could not be displayed
+
+ {isSvg ? (
+ // Special handling for SVG - embed it as an object for better rendering
+
+ ) : (
+ 
+ )}
+
+ )}
+
+ {fileType === 'binary' ? (
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/file-renderers/markdown-renderer.tsx b/frontend/src/components/file-renderers/markdown-renderer.tsx
new file mode 100644
index 00000000..bb6f5a44
--- /dev/null
+++ b/frontend/src/components/file-renderers/markdown-renderer.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { CodeRenderer } from "./code-renderer";
+
+interface MarkdownRendererProps {
+ content: string;
+ className?: string;
+}
+
+export function MarkdownRenderer({ content, className }: MarkdownRendererProps) {
+ return (
+
+
+ )}
+
+ {content || ''}
+
+
+
+ {children}
+
+ );
+ }
+
+ return (
+ ![{props.alt]()
+ ),
+ pre: ({ node, ...props }) => ,
+ }}
+ >
+ {content}
+
+
+
+ {/* Controls */}
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/thread/file-viewer-modal.tsx b/frontend/src/components/thread/file-viewer-modal.tsx
index 14643f10..1d722333 100644
--- a/frontend/src/components/thread/file-viewer-modal.tsx
+++ b/frontend/src/components/thread/file-viewer-modal.tsx
@@ -20,6 +20,7 @@ import { toast } from "sonner";
import { createClient } from "@/lib/supabase/client";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
+import { FileRenderer } from "@/components/file-renderers";
// Define API_URL
const API_URL = process.env.NEXT_PUBLIC_BACKEND_URL || '';
@@ -367,103 +368,18 @@ export function FileViewerModal({
}
};
- // Render file content based on type
- const renderFileContent = () => {
- if (isLoadingContent) {
- return (
-
+
+
+ {/* PDF Viewer */}
+
+
+ {zoom}%
+
+
+
+
+
+
+
+
+
+
+
+
- {[1, 2, 3, 4, 5].map((i) => (
-
- );
- }
-
- if (!selectedFile) {
- return (
-
-
- );
- }
-
- if (fileType === 'text' && fileContent) {
- return (
- Select a file to view its contents
-Choose a file from the sidebar to preview or edit
-
-
- );
- }
-
- if (fileType === 'image' && binaryFileUrl) {
- return (
-
- {fileContent}
-
-
- 
-
- );
- }
-
- if (fileType === 'pdf' && binaryFileUrl) {
- return (
-
-
-
- );
- }
-
- if (binaryFileUrl) {
- return (
-
-
- );
- }
-
- return (
-
-
-
- Binary File
-- This file cannot be previewed in the browser -
-
-
- );
- };
-
return (
No preview available
-This file type cannot be previewed
-