From 6fd082d55ffaf6eb226efdeebc7155e3693d2d01 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 19 Apr 2025 23:38:08 -0700
Subject: [PATCH] enh: html token (allow yt embed)

---
 .../chat/Messages/Markdown/HTMLToken.svelte   | 49 +++++++++++++++++++
 .../Markdown/MarkdownInlineTokens.svelte      | 12 +----
 .../Messages/Markdown/MarkdownTokens.svelte   | 12 +----
 3 files changed, 53 insertions(+), 20 deletions(-)
 create mode 100644 src/lib/components/chat/Messages/Markdown/HTMLToken.svelte

diff --git a/src/lib/components/chat/Messages/Markdown/HTMLToken.svelte b/src/lib/components/chat/Messages/Markdown/HTMLToken.svelte
new file mode 100644
index 000000000..66ca2ea30
--- /dev/null
+++ b/src/lib/components/chat/Messages/Markdown/HTMLToken.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	import DOMPurify from 'dompurify';
+	import type { Token } from 'marked';
+
+	import { WEBUI_BASE_URL } from '$lib/constants';
+	import Source from './Source.svelte';
+
+	export let id: string;
+	export let token: Token;
+
+	export let onSourceClick: Function = () => {};
+
+	let html: string | null = null;
+
+	$: if (token.type === 'html' && token?.text) {
+		html = DOMPurify.sanitize(token.text);
+	} else {
+		html = null;
+	}
+</script>
+
+{#if token.type === 'html'}
+	{#if html && html.includes('<video')}
+		{@html html}
+	{:else if token.text && token.text.match(/<iframe\s+[^>]*src="https:\/\/www\.youtube\.com\/embed\/([a-zA-Z0-9_-]{11})"[^>]*><\/iframe>/)}
+		{@const match = token.text.match(
+			/<iframe\s+[^>]*src="https:\/\/www\.youtube\.com\/embed\/([a-zA-Z0-9_-]{11})"[^>]*><\/iframe>/
+		)}
+		{@const ytId = match && match[1]}
+		{#if ytId}
+			<iframe
+				class="w-full aspect-video my-2"
+				src={`https://www.youtube.com/embed/${ytId}`}
+				title="YouTube video player"
+				frameborder="0"
+				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+				referrerpolicy="strict-origin-when-cross-origin"
+				allowfullscreen
+			>
+			</iframe>
+		{/if}
+	{:else if token.text.includes(`<iframe src="${WEBUI_BASE_URL}/api/v1/files/`)}
+		{@html `${token.text}`}
+	{:else if token.text.includes(`<source_id`)}
+		<Source {id} {token} onClick={onSourceClick} />
+	{:else}
+		{token.text}
+	{/if}
+{/if}
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte
index 7693e4cb4..4ca972136 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte
@@ -13,6 +13,7 @@
 	import Image from '$lib/components/common/Image.svelte';
 	import KatexRenderer from './KatexRenderer.svelte';
 	import Source from './Source.svelte';
+	import HtmlToken from './HTMLToken.svelte';
 
 	export let id: string;
 	export let tokens: Token[];
@@ -23,16 +24,7 @@
 	{#if token.type === 'escape'}
 		{unescapeHtml(token.text)}
 	{:else if token.type === 'html'}
-		{@const html = DOMPurify.sanitize(token.text)}
-		{#if html && html.includes('<video')}
-			{@html html}
-		{:else if token.text.includes(`<iframe src="${WEBUI_BASE_URL}/api/v1/files/`)}
-			{@html `${token.text}`}
-		{:else if token.text.includes(`<source_id`)}
-			<Source {id} {token} onClick={onSourceClick} />
-		{:else}
-			{@html html}
-		{/if}
+		<HtmlToken {id} {token} {onSourceClick} />
 	{:else if token.type === 'link'}
 		{#if token.tokens}
 			<a href={token.href} target="_blank" rel="nofollow" title={token.title}>
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
index ac73fb119..9f80fbc77 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
@@ -21,6 +21,7 @@
 
 	import Source from './Source.svelte';
 	import { settings } from '$lib/stores';
+	import HtmlToken from './HTMLToken.svelte';
 
 	export let id: string;
 	export let tokens: Token[];
@@ -266,16 +267,7 @@
 			</div>
 		</Collapsible>
 	{:else if token.type === 'html'}
-		{@const html = DOMPurify.sanitize(token.text)}
-		{#if html && html.includes('<video')}
-			{@html html}
-		{:else if token.text.includes(`<iframe src="${WEBUI_BASE_URL}/api/v1/files/`)}
-			{@html `${token.text}`}
-		{:else if token.text.includes(`<source_id`)}
-			<Source {id} {token} onClick={onSourceClick} />
-		{:else}
-			{token.text}
-		{/if}
+		<HtmlToken {id} {token} {onSourceClick} />
 	{:else if token.type === 'iframe'}
 		<iframe
 			src="{WEBUI_BASE_URL}/api/v1/files/{token.fileId}/content"