enh: iframe support

This commit is contained in:
Timothy J. Baek 2024-06-19 16:51:29 -07:00
parent 7b64b40270
commit d5b76b5ed2
3 changed files with 27 additions and 3 deletions

View File

@ -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
(() => {

View File

@ -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);
}
};

View File

@ -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;
};