From 3909b62ffcf49839fa57346ed8487ae759811503 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 2 Mar 2026 12:45:50 -0600
Subject: [PATCH] enh: file nav html rendering

---
 src/lib/components/chat/FileNav.svelte             |  4 +++-
 src/lib/components/chat/FileNav/FilePreview.svelte | 14 +++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/chat/FileNav.svelte b/src/lib/components/chat/FileNav.svelte
index 8f85f1e504..07728d1499 100644
--- a/src/lib/components/chat/FileNav.svelte
+++ b/src/lib/components/chat/FileNav.svelte
@@ -62,10 +62,12 @@
 
 	const MD_EXTS = new Set(['md', 'markdown', 'mdx']);
 	const CSV_EXTS = new Set(['csv', 'tsv']);
+	const HTML_EXTS = new Set(['html', 'htm']);
 	const getFileExt = (path: string | null) => path?.split('.').pop()?.toLowerCase() ?? '';
 
 	$: isMarkdown = MD_EXTS.has(getFileExt(selectedFile));
 	$: isCsv = CSV_EXTS.has(getFileExt(selectedFile));
+	$: isHtml = HTML_EXTS.has(getFileExt(selectedFile));
 	$: isTextFile = fileContent !== null && fileImageUrl === null && filePdfData === null;
 
 	// ── Upload / folder creation ─────────────────────────────────────────
@@ -513,7 +515,7 @@
 					</button>
 				</Tooltip>
 			{/if}
-			{#if (isMarkdown || isCsv) && fileContent !== null && !editing}
+			{#if (isMarkdown || isCsv || isHtml) && fileContent !== null && !editing}
 				<Tooltip content={showRaw ? $i18n.t('Preview') : $i18n.t('Source')}>
 					<button
 						class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
diff --git a/src/lib/components/chat/FileNav/FilePreview.svelte b/src/lib/components/chat/FileNav/FilePreview.svelte
index 8de75e238a..92be9e42d6 100644
--- a/src/lib/components/chat/FileNav/FilePreview.svelte
+++ b/src/lib/components/chat/FileNav/FilePreview.svelte
@@ -3,6 +3,7 @@
 	import panzoom, { type PanZoom } from 'panzoom';
 	import { marked } from 'marked';
 	import DOMPurify from 'dompurify';
+	import { settings } from '$lib/stores';
 	import Spinner from '../../common/Spinner.svelte';
 	import PDFViewer from '../../common/PDFViewer.svelte';
 
@@ -57,10 +58,12 @@
 
 	const MD_EXTS = new Set(['md', 'markdown', 'mdx']);
 	const CSV_EXTS = new Set(['csv', 'tsv']);
+	const HTML_EXTS = new Set(['html', 'htm']);
 	const getExt = (path: string | null) => path?.split('.').pop()?.toLowerCase() ?? '';
 
 	$: isMarkdown = MD_EXTS.has(getExt(selectedFile));
 	$: isCsv = CSV_EXTS.has(getExt(selectedFile));
+	$: isHtml = HTML_EXTS.has(getExt(selectedFile));
 	$: csvDelimiter = getExt(selectedFile) === 'tsv' ? '\t' : ',';
 	$: renderedHtml =
 		isMarkdown && fileContent
@@ -166,7 +169,16 @@
 	{:else if filePdfData !== null}
 		<PDFViewer bind:this={pdfViewerRef} data={filePdfData} className="w-full h-full" />
 	{:else if fileContent !== null}
-		{#if isMarkdown && !showRaw}
+		{#if isHtml && !showRaw}
+			<iframe
+				srcdoc={fileContent}
+				sandbox="allow-scripts allow-downloads{($settings?.iframeSandboxAllowForms ?? false)
+					? ' allow-forms'
+					: ''}{($settings?.iframeSandboxAllowSameOrigin ?? false) ? ' allow-same-origin' : ''}"
+				class="w-full h-full border-none bg-white"
+				title="HTML Preview"
+			/>
+		{:else if isMarkdown && !showRaw}
 			<div class="prose dark:prose-invert max-w-full text-sm p-3">
 				{@html renderedHtml}
 			</div>