From 0ef0eab24867ef87cb4a63445deb90094059733f Mon Sep 17 00:00:00 2001
From: Junaid Pinjari <junaidpinjari2002@gmail.com>
Date: Sun, 30 Mar 2025 21:55:14 +0530
Subject: [PATCH] Feat: Add YouTube embed support using VIDEO_YOUTUBE_ID token

---
 .../chat/Messages/Markdown/MarkdownInlineTokens.svelte    | 2 ++
 .../chat/Messages/Markdown/MarkdownTokens.svelte          | 2 ++
 src/lib/utils/index.ts                                    | 8 ++++++++
 3 files changed, 12 insertions(+)

diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte
index dc24b6dee..2a473c0e5 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte
@@ -28,6 +28,8 @@
 			{@html html}
 		{:else if token.text.includes(`<iframe src="${WEBUI_BASE_URL}/api/v1/files/`)}
 			{@html `${token.text}`}
+		{:else if token.text.includes(`<iframe ytEmbed`)}
+			{@html `${token.text.replace(`<iframe ytEmbed`, `<iframe`)}`}
 		{:else if token.text.includes(`<source_id`)}
 			<Source {id} {token} onClick={onSourceClick} />
 		{:else}
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
index 2d5e7a30e..277ab1b5f 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
@@ -274,6 +274,8 @@
 			{@html `${token.text}`}
 		{:else if token.text.includes(`<source_id`)}
 			<Source {id} {token} onClick={onSourceClick} />
+		{:else if token.text.includes(`<iframe ytEmbed`)}
+			{@html `${token.text.replace(`<iframe ytEmbed`, `<iframe`)}`}
 		{:else}
 			{token.text}
 		{/if}
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 927f62ab3..6ab8e5eec 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -29,6 +29,14 @@ export const replaceTokens = (content, sourceIds, char, user) => {
 	const tokens = [
 		{ regex: /{{char}}/gi, replacement: char },
 		{ regex: /{{user}}/gi, replacement: user },
+		{
+			regex: /{{(VIDEO_YOUTUBE_ID_[^\s{}]+)}}/gi,
+			replacement: (_, fullMatch) => {
+				const ytId = fullMatch.replace("VIDEO_YOUTUBE_ID_", ""); // Extract only the ID
+				const videoUrl = `https://www.youtube.com/embed/${ytId}`;
+				return `<iframe ytEmbed src="${videoUrl}" width="100%" height="500" frameborder="0" allowfullscreen></iframe>`;
+			}
+		},
 		{
 			regex: /{{VIDEO_FILE_ID_([a-f0-9-]+)}}/gi,
 			replacement: (_, fileId) =>