From d5b76b5ed24747cd0dc2ba60243299da0aeb9cb3 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 19 Jun 2024 16:51:29 -0700
Subject: [PATCH] enh: iframe support

---
 src/app.html                                |  6 ++++++
 src/lib/components/chat/MessageInput.svelte |  9 ++++++---
 src/lib/utils/index.ts                      | 15 +++++++++++++++
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/app.html b/src/app.html
index a79343df5..da6af2cc4 100644
--- a/src/app.html
+++ b/src/app.html
@@ -13,6 +13,12 @@
 			href="/opensearch.xml"
 		/>
 
+		<script>
+			function resizeIframe(obj) {
+				obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
+			}
+		</script>
+
 		<script>
 			// On page load or when changing themes, best to add inline in `head` to avoid FOUC
 			(() => {
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 812d79e64..49821e248 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -138,7 +138,7 @@
 				processFileItem(fileItem);
 			} else {
 				toast.error(
-					$i18n.t(`Unknown File Type '{{file_type}}', but accepting and treating as plain text`, {
+					$i18n.t(`Unknown file type '{{file_type}}'. Proceeding with the file upload anyway.`, {
 						file_type: file['type']
 					})
 				);
@@ -158,8 +158,11 @@
 			}
 		} catch (e) {
 			// Remove the failed doc from the files array
-			files = files.filter((f) => f.id !== fileItem.id);
+			// files = files.filter((f) => f.id !== fileItem.id);
 			toast.error(e);
+
+			fileItem.status = 'processed';
+			files = files;
 		}
 	};
 
@@ -214,7 +217,7 @@
 			}
 		} catch (e) {
 			// Remove the failed doc from the files array
-			// files = files.filter((f) => f.name !== url);
+			files = files.filter((f) => f.name !== url);
 			toast.error(e);
 		}
 	};
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index bfff8e199..1950a2f2a 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -1,5 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
 import sha256 from 'js-sha256';
+import { WEBUI_BASE_URL } from '$lib/constants';
 
 //////////////////////////
 // Helper functions
@@ -36,6 +37,8 @@ export const sanitizeResponseContent = (content: string) => {
 export const replaceTokens = (content, char, user) => {
 	const charToken = /{{char}}/gi;
 	const userToken = /{{user}}/gi;
+	const videoIdToken = /{{VIDEO_FILE_ID_([a-f0-9-]+)}}/gi; // Regex to capture the video ID
+	const htmlIdToken = /{{HTML_FILE_ID_([a-f0-9-]+)}}/gi; // Regex to capture the HTML ID
 
 	// Replace {{char}} if char is provided
 	if (char !== undefined && char !== null) {
@@ -47,6 +50,18 @@ export const replaceTokens = (content, char, user) => {
 		content = content.replace(userToken, user);
 	}
 
+	// Replace video ID tags with corresponding <video> elements
+	content = content.replace(videoIdToken, (match, fileId) => {
+		const videoUrl = `${WEBUI_BASE_URL}/api/v1/files/${fileId}/content`;
+		return `<video src="${videoUrl}" controls></video>`;
+	});
+
+	// Replace HTML ID tags with corresponding HTML content
+	content = content.replace(htmlIdToken, (match, fileId) => {
+		const htmlUrl = `${WEBUI_BASE_URL}/api/v1/files/${fileId}/content`;
+		return `<iframe src="${htmlUrl}" width="100%" frameborder="0" onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"></iframe>`;
+	});
+
 	return content;
 };