From dadfa5f04308d76e33b889c3aa664e4e4fa7ffac Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 1 May 2025 00:32:29 +0400
Subject: [PATCH] refac: HTML_FILE_ID handling

---
 src/lib/apis/channels/index.ts                |  1 -
 .../chat/Messages/Markdown/HTMLToken.svelte   | 21 +++++++++++++++++--
 src/lib/utils/index.ts                        |  3 +--
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/lib/apis/channels/index.ts b/src/lib/apis/channels/index.ts
index f16b43505..cd46410c7 100644
--- a/src/lib/apis/channels/index.ts
+++ b/src/lib/apis/channels/index.ts
@@ -1,5 +1,4 @@
 import { WEBUI_API_BASE_URL } from '$lib/constants';
-import { t } from 'i18next';
 
 type ChannelForm = {
 	name: string;
diff --git a/src/lib/components/chat/Messages/Markdown/HTMLToken.svelte b/src/lib/components/chat/Messages/Markdown/HTMLToken.svelte
index 3b81c225e..20a9039ff 100644
--- a/src/lib/components/chat/Messages/Markdown/HTMLToken.svelte
+++ b/src/lib/components/chat/Messages/Markdown/HTMLToken.svelte
@@ -4,6 +4,7 @@
 
 	import { WEBUI_BASE_URL } from '$lib/constants';
 	import Source from './Source.svelte';
+	import { settings } from '$lib/stores';
 
 	export let id: string;
 	export let token: Token;
@@ -39,8 +40,24 @@
 			>
 			</iframe>
 		{/if}
-	{:else if token.text.includes(`<iframe src="${WEBUI_BASE_URL}/api/v1/files/`)}
-		{@html `${token.text}`}
+	{:else if token.text.includes(`<file type="html"`)}
+		{@const match = token.text.match(/<file type="html" id="([^"]+)"/)}
+		{@const fileId = match && match[1]}
+		{#if fileId}
+			<iframe
+				class="w-full my-2"
+				src={`${WEBUI_BASE_URL}/api/v1/files/${fileId}/content/html`}
+				title="Content"
+				frameborder="0"
+				sandbox="allow-scripts{($settings?.iframeSandboxAllowForms ?? false)
+					? ' allow-forms'
+					: ''}{($settings?.iframeSandboxAllowSameOrigin ?? false) ? ' allow-same-origin' : ''}"
+				referrerpolicy="strict-origin-when-cross-origin"
+				allowfullscreen
+				width="100%"
+				onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"
+			></iframe>
+		{/if}
 	{:else if token.text.includes(`<source_id`)}
 		<Source {id} {token} onClick={onSourceClick} />
 	{:else}
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 2dbca7759..25aea433b 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -41,8 +41,7 @@ export const replaceTokens = (content, sourceIds, char, user) => {
 		},
 		{
 			regex: /{{HTML_FILE_ID_([a-f0-9-]+)}}/gi,
-			replacement: (_, fileId) =>
-				`<iframe src="${WEBUI_BASE_URL}/api/v1/files/${fileId}/content/html" width="100%" frameborder="0" onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"></iframe>`
+			replacement: (_, fileId) => `<file type="html" id="${fileId}" />`
 		}
 	];