(null);
+ const [isInvalidJson, setIsInvalidJson] = useState(false);
+
+ useEffect(() => {
+ file.text().then(text => {
+ try {
+ const parsed = JSON.parse(text);
+ setContent(JSON.stringify(parsed, null, 2));
+ setIsInvalidJson(false);
+ } catch (_e) {
+ // Show raw content if JSON is invalid
+ setContent(text);
+ setIsInvalidJson(true);
+ }
+ });
+ }, [file]);
+
+ if (content === null) {
+ return {t('viewer.nonPdf.loading')};
+ }
+
+ return (
+
+ {isInvalidJson && (
+
+ {t('viewer.nonPdf.invalidJson')}
+
+ )}
+
+
+ {content}
+
+
+
+ );
+}
diff --git a/frontend/src/core/components/viewer/nonpdf/NonPdfBanner.tsx b/frontend/src/core/components/viewer/nonpdf/NonPdfBanner.tsx
new file mode 100644
index 0000000000..b890f889ac
--- /dev/null
+++ b/frontend/src/core/components/viewer/nonpdf/NonPdfBanner.tsx
@@ -0,0 +1,53 @@
+import { Badge, Box, Button, Group } from '@mantine/core';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import { useTranslation } from 'react-i18next';
+
+import type { FileTypeMeta } from '@app/components/viewer/nonpdf/types';
+
+interface NonPdfBannerProps {
+ meta: FileTypeMeta;
+ onConvertToPdf?: () => void;
+}
+
+export function NonPdfBanner({ meta, onConvertToPdf }: NonPdfBannerProps) {
+ const { t } = useTranslation();
+
+ return (
+
+
+ {meta.icon}
+
+ }
+ style={{ fontWeight: 600 }}
+ >
+ {t('viewer.nonPdf.fileTypeBadge', { type: meta.label })}
+
+ {onConvertToPdf && (
+ }
+ onClick={onConvertToPdf}
+ >
+ {t('viewer.nonPdf.convertToPdf')}
+
+ )}
+
+ );
+}
diff --git a/frontend/src/core/components/viewer/nonpdf/TextViewer.tsx b/frontend/src/core/components/viewer/nonpdf/TextViewer.tsx
new file mode 100644
index 0000000000..f25daa21c6
--- /dev/null
+++ b/frontend/src/core/components/viewer/nonpdf/TextViewer.tsx
@@ -0,0 +1,192 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Center, Checkbox, Group, Paper, ScrollArea, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+
+import { formatFileSize } from '@app/utils/fileUtils';
+
+// ─── Markdown renderer ────────────────────────────────────────────────────────
+
+function renderInline(text: string): React.ReactNode[] {
+ const parts: React.ReactNode[] = [];
+ // Patterns: **bold**, *italic*, `code`, [link](url)
+ const re = /(\*\*(.+?)\*\*|\*(.+?)\*|`([^`]+)`|\[([^\]]+)\]\(([^)]+)\))/g;
+ let last = 0;
+ let match;
+ let key = 0;
+ while ((match = re.exec(text)) !== null) {
+ if (match.index > last) parts.push(text.slice(last, match.index));
+ if (match[2]) parts.push({match[2]});
+ else if (match[3]) parts.push({match[3]});
+ else if (match[4]) parts.push({match[4]});
+ else if (match[5]) parts.push({match[5]});
+ last = match.index + match[0].length;
+ }
+ if (last < text.length) parts.push(text.slice(last));
+ return parts;
+}
+
+function renderMarkdown(text: string): React.ReactNode[] {
+ const lines = text.split('\n');
+ const elements: React.ReactNode[] = [];
+ let inCodeBlock = false;
+ let codeLines: string[] = [];
+ let i = 0;
+
+ while (i < lines.length) {
+ const line = lines[i];
+
+ if (line.startsWith('```')) {
+ if (inCodeBlock) {
+ elements.push(
+
+ {codeLines.join('\n')}
+
+ );
+ codeLines = [];
+ inCodeBlock = false;
+ } else {
+ inCodeBlock = true;
+ }
+ i++;
+ continue;
+ }
+
+ if (inCodeBlock) {
+ codeLines.push(line);
+ i++;
+ continue;
+ }
+
+ if (line.startsWith('### ')) {
+ elements.push({renderInline(line.slice(4))});
+ } else if (line.startsWith('## ')) {
+ elements.push({renderInline(line.slice(3))});
+ } else if (line.startsWith('# ')) {
+ elements.push({renderInline(line.slice(2))});
+ } else if (line.startsWith('- ') || line.startsWith('* ')) {
+ elements.push(
+
+ {'\u2022'}
+ {renderInline(line.slice(2))}
+
+ );
+ } else if (/^\d+\.\s/.test(line)) {
+ const num = line.match(/^(\d+)\.\s/)?.[1];
+ const rest = line.replace(/^\d+\.\s/, '');
+ elements.push(
+
+ {num}.
+ {renderInline(rest)}
+
+ );
+ } else if (line.trim() === '' || line === '---' || line === '***') {
+ elements.push();
+ } else {
+ elements.push({renderInline(line)});
+ }
+ i++;
+ }
+
+ return elements;
+}
+
+// ─── Text / Markdown viewer ───────────────────────────────────────────────────
+
+interface TextViewerProps {
+ file: File;
+ isMarkdown: boolean;
+}
+
+export function TextViewer({ file, isMarkdown }: TextViewerProps) {
+ const { t } = useTranslation();
+ const [content, setContent] = useState(null);
+ const [showLineNumbers, setShowLineNumbers] = useState(!isMarkdown);
+ const [renderMd, setRenderMd] = useState(isMarkdown);
+
+ useEffect(() => {
+ file.text().then(setContent);
+ }, [file]);
+
+ const lines = content?.split('\n') ?? [];
+
+ return (
+
+ {/* Toolbar */}
+
+
+ {t('viewer.nonPdf.textStats', { lines: lines.length.toLocaleString(), size: formatFileSize(file.size) })}
+ {!isMarkdown && (
+ {t('viewer.nonPdf.lineNumbers')}}
+ checked={showLineNumbers}
+ onChange={e => setShowLineNumbers(e.currentTarget.checked)}
+ size="xs"
+ />
+ )}
+ {isMarkdown && (
+ {t('viewer.nonPdf.renderMarkdown')}}
+ checked={renderMd}
+ onChange={e => setRenderMd(e.currentTarget.checked)}
+ size="xs"
+ />
+ )}
+
+
+
+ {/* Content */}
+
+ {content === null ? (
+ {t('viewer.nonPdf.loading')}
+ ) : isMarkdown && renderMd ? (
+
+ {renderMarkdown(content)}
+
+ ) : (
+
+ {lines.map((line, i) => (
+
+ {showLineNumbers && (
+
+ {i + 1}
+
+ )}
+
+ {line || '\u00A0'}
+
+
+ ))}
+
+ )}
+
+
+ );
+}
diff --git a/frontend/src/core/components/viewer/nonpdf/types.ts b/frontend/src/core/components/viewer/nonpdf/types.ts
new file mode 100644
index 0000000000..92c69fd88d
--- /dev/null
+++ b/frontend/src/core/components/viewer/nonpdf/types.ts
@@ -0,0 +1,51 @@
+import React from 'react';
+import ImageIcon from '@mui/icons-material/Image';
+import TableChartIcon from '@mui/icons-material/TableChart';
+import ArticleIcon from '@mui/icons-material/Article';
+import CodeIcon from '@mui/icons-material/Code';
+import DataObjectIcon from '@mui/icons-material/DataObject';
+import HtmlIcon from '@mui/icons-material/Html';
+
+import type { NonPdfFileType } from '@app/utils/fileUtils';
+
+export interface FileTypeMeta {
+ label: string;
+ icon: React.ReactNode;
+ color: string; // Mantine color name (e.g. 'teal', 'violet')
+ accentColor: string;
+ borderColor: string;
+ bgColor: string;
+ textColor: string;
+}
+
+// Shared neutral color scheme for all file type badges — consistent in light & dark mode
+const BADGE_COLORS = {
+ color: 'gray' as const,
+ accentColor: 'var(--mantine-color-gray-6)',
+ borderColor: 'var(--mantine-color-gray-3)',
+ bgColor: 'var(--mantine-color-gray-0)',
+ textColor: 'var(--mantine-color-gray-9)',
+};
+
+export function getFileTypeMeta(type: NonPdfFileType, fileName?: string): FileTypeMeta {
+ switch (type) {
+ case 'image':
+ return { label: 'Image', icon: React.createElement(ImageIcon, { fontSize: 'small' }), ...BADGE_COLORS };
+ case 'csv':
+ return { label: 'Spreadsheet', icon: React.createElement(TableChartIcon, { fontSize: 'small' }), ...BADGE_COLORS };
+ case 'json':
+ return { label: 'JSON', icon: React.createElement(DataObjectIcon, { fontSize: 'small' }), ...BADGE_COLORS };
+ case 'markdown':
+ return { label: 'Markdown', icon: React.createElement(CodeIcon, { fontSize: 'small' }), ...BADGE_COLORS };
+ case 'html':
+ return { label: 'HTML', icon: React.createElement(HtmlIcon, { fontSize: 'small' }), ...BADGE_COLORS };
+ case 'text':
+ return { label: 'Text', icon: React.createElement(ArticleIcon, { fontSize: 'small' }), ...BADGE_COLORS };
+ default: {
+ // For unknown types, derive label from the file extension (e.g. ".docx" → "DOCX")
+ const ext = fileName?.split('.').pop()?.toUpperCase();
+ const label = ext || 'File';
+ return { label, icon: React.createElement(ArticleIcon, { fontSize: 'small' }), ...BADGE_COLORS };
+ }
+ }
+}
diff --git a/frontend/src/core/utils/fileUtils.ts b/frontend/src/core/utils/fileUtils.ts
index 4061884b55..ed76f6060c 100644
--- a/frontend/src/core/utils/fileUtils.ts
+++ b/frontend/src/core/utils/fileUtils.ts
@@ -97,3 +97,45 @@ export function isPdfFile(file: { name?: string; type?: string } | File | Blob |
return false;
}
+
+export type NonPdfFileType = 'image' | 'csv' | 'json' | 'text' | 'markdown' | 'html' | 'unknown';
+
+const IMAGE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'tiff', 'tif', 'webp']);
+const CSV_EXTENSIONS = new Set(['csv', 'tsv']);
+const JSON_EXTENSIONS = new Set(['json']);
+const TEXT_EXTENSIONS = new Set(['txt']);
+const MARKDOWN_EXTENSIONS = new Set(['md', 'markdown']);
+const HTML_EXTENSIONS = new Set(['html', 'htm']);
+
+/**
+ * Detects the non-PDF file type category for viewer routing.
+ * Returns 'unknown' for PDFs or unrecognized formats.
+ */
+export function detectNonPdfFileType(file: { name?: string; type?: string } | File | null | undefined): NonPdfFileType {
+ if (!file) return 'unknown';
+
+ const name = 'name' in file ? file.name : undefined;
+ const mimeType = file.type ?? '';
+
+ // Check MIME type first
+ if (mimeType.startsWith('image/')) return 'image';
+ if (mimeType === 'text/csv') return 'csv';
+ if (mimeType === 'text/tab-separated-values') return 'csv';
+ if (mimeType === 'application/json') return 'json';
+ if (mimeType === 'text/html') return 'html';
+ if (mimeType === 'text/markdown') return 'markdown';
+
+ // Fall back to extension
+ if (name) {
+ const ext = detectFileExtension(name);
+ if (IMAGE_EXTENSIONS.has(ext)) return 'image';
+ if (CSV_EXTENSIONS.has(ext)) return 'csv';
+ if (JSON_EXTENSIONS.has(ext)) return 'json';
+ if (MARKDOWN_EXTENSIONS.has(ext)) return 'markdown';
+ if (TEXT_EXTENSIONS.has(ext)) return 'text';
+ if (HTML_EXTENSIONS.has(ext)) return 'html';
+ }
+
+ return 'unknown';
+}
+