OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-23 02:16:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy J. Baek 2024-08-16 17:51:50 +02:00
parent 9025e9dbb1
commit 4f47053e93
5 changed files with 12 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/chat/Messages/MarkdownInlineTokens.svelte
View File

@ -18,6 +18,8 @@
{@const html = DOMPurify.sanitize(token.text)} {@const html = DOMPurify.sanitize(token.text)}
{#if html && html.includes('<video')} {#if html && html.includes('<video')}
{@html html} {@html html}
{:else if token.text.includes(`<iframe src="${WEBUI_BASE_URL}/api/v1/files/`)}
{@html `${token.text}`}
{:else} {:else}
{token.text} {token.text}
{/if} {/if}

4
src/lib/components/chat/Messages/MarkdownTokens.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import DOMPurify from 'dompurify'; import DOMPurify from 'dompurify';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import type { Token } from 'marked'; import { marked, type Token } from 'marked';
import { revertSanitizedResponseContent, unescapeHtml } from '$lib/utils'; import { revertSanitizedResponseContent, unescapeHtml } from '$lib/utils';
import CodeBlock from '$lib/components/chat/Messages/CodeBlock.svelte'; import CodeBlock from '$lib/components/chat/Messages/CodeBlock.svelte';
@ -96,6 +96,8 @@
{@const html = DOMPurify.sanitize(token.text)} {@const html = DOMPurify.sanitize(token.text)}
{#if html && html.includes('<video')} {#if html && html.includes('<video')}
{@html html} {@html html}
{:else if token.text.includes(`<iframe src="${WEBUI_BASE_URL}/api/v1/files/`)}
{@html `${token.text}`}
{:else} {:else}
{token.text} {token.text}
{/if} {/if}

3
src/lib/components/chat/Messages/ResponseMessage.svelte
View File

@ -75,16 +75,13 @@
let tokens; let tokens;
import 'katex/dist/katex.min.css'; import 'katex/dist/katex.min.css';
import markedKatex from '$lib/utils/marked/katex-extension'; import markedKatex from '$lib/utils/marked/katex-extension';
import markedToken from '$lib/utils/marked/token-extension';
const options = { const options = {
throwOnError: false throwOnError: false
}; };
marked.use(markedKatex(options)); marked.use(markedKatex(options));
marked.use(markedToken({ WEBUI_BASE_URL }));
$: (async () => { $: (async () => {
if (message?.content) { if (message?.content) {

7
src/lib/utils/index.ts
View File

@ -27,6 +27,7 @@ export const replaceTokens = (content, char, user) => {
const charToken = /{{char}}/gi; const charToken = /{{char}}/gi;
const userToken = /{{user}}/gi; const userToken = /{{user}}/gi;
const videoIdToken = /{{VIDEO_FILE_ID_([a-f0-9-]+)}}/gi; // Regex to capture the video ID 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 // Replace {{char}} if char is provided
if (char !== undefined && char !== null) { if (char !== undefined && char !== null) {
@ -44,6 +45,12 @@ export const replaceTokens = (content, char, user) => {
return `<video src="${videoUrl}" controls></video>`; 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; return content;
}; };

57
src/lib/utils/marked/token-extension.ts
View File

@ -1,57 +0,0 @@
export default function (options = {}) {
return {
extensions: [inlineIframeToken(options), blockIframeToken(options)]
};
}
const inlineIframeToken = (options = {}) => {
const WEBUI_BASE_URL = options.WEBUI_BASE_URL || '';
const htmlIdToken = /{{HTML_FILE_ID_([a-f0-9-]+)}}/gi; // Regex to capture the HTML ID
function tokenizer(src) {
const match = htmlIdToken.exec(src);
if (match) {
return {
type: 'iframe',
raw: match[0],
fileId: match[1]
};
}
}
function renderer(token) {
const htmlUrl = `${WEBUI_BASE_URL}/api/v1/files/${token.fileId}/content`;
const iframeElement = `<iframe src="${htmlUrl}" width="100%" frameborder="0" onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"></iframe>`;
return iframeElement;
}
return {
name: 'iframe',
level: 'inline',
tokenizer,
renderer
};
};
const blockIframeToken = (options = {}) => {
const WEBUI_BASE_URL = options.WEBUI_BASE_URL || '';
const htmlIdToken = /{{HTML_FILE_ID_([a-f0-9-]+)}}/gi; // Regex to capture the HTML ID
function tokenizer(src) {
const match = htmlIdToken.exec(src);
if (match) {
return {
type: 'iframe',
raw: match[0],
fileId: match[1]
};
}
}
function renderer(token) {
const htmlUrl = `${WEBUI_BASE_URL}/api/v1/files/${token.fileId}/content`;
const iframeElement = `<iframe src="${htmlUrl}" width="100%" frameborder="0" onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"></iframe>`;
return iframeElement;
}
return {
name: 'iframe',
level: 'block',
tokenizer,
renderer
};
};