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

enh: svg zoom pan

Browse Source
This commit is contained in:
Timothy J. Baek
2024-10-06 12:51:29 -07:00
parent 913620ff0c
commit babfc97c90
6 changed files with 130 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/lib/components/chat/Artifacts.svelte
View File

@@ -9,12 +9,13 @@
import { copyToClipboard, createMessagesList } from '$lib/utils';
import ArrowsPointingOut from '../icons/ArrowsPointingOut.svelte';
import Tooltip from '../common/Tooltip.svelte';
import SvgPanZoom from '../common/SVGPanZoom.svelte';
export let overlay = false;
export let history;
let messages = [];
let contents: Array<{ content: string }> = [];
let contents: Array<{ type: string; content: string }> = [];
let selectedContentIdx = 0;
let copied = false;
@@ -32,24 +33,32 @@
contents = [];
messages.forEach((message) => {
if (message.content) {
const codeBlockContents = message.content.match(/```[\s\S]*?```/g);
let codeBlocks = [];
if (codeBlockContents) {
codeBlockContents.forEach((block) => {
const lang = block.split('\n')[0].replace('```', '').trim().toLowerCase();
const code = block.replace(/```[\s\S]*?\n/, '').replace(/```$/, '');
codeBlocks.push({ lang, code });
});
}
let htmlContent = '';
let cssContent = '';
let jsContent = '';
const codeBlocks = message.content.match(/```[\s\S]*?```/g);
if (codeBlocks) {
codeBlocks.forEach((block) => {
const lang = block.split('\n')[0].replace('```', '').trim().toLowerCase();
const code = block.replace(/```[\s\S]*?\n/, '').replace(/```$/, '');
if (lang === 'html') {
htmlContent += code + '\n';
} else if (lang === 'css') {
cssContent += code + '\n';
} else if (lang === 'javascript' || lang === 'js') {
jsContent += code + '\n';
}
});
}
codeBlocks.forEach((block) => {
const { lang, code } = block;
if (lang === 'html') {
htmlContent += code + '\n';
} else if (lang === 'css') {
cssContent += code + '\n';
} else if (lang === 'javascript' || lang === 'js') {
jsContent += code + '\n';
}
});
const inlineHtml = message.content.match(/<html>[\s\S]*?<\/html>/gi);
const inlineCss = message.content.match(/<style>[\s\S]*?<\/style>/gi);
@@ -98,7 +107,14 @@
</body>
</html>
`;
contents = [...contents, { content: renderedContent }];
contents = [...contents, { type: 'iframe', content: renderedContent }];
} else {
// Check for SVG content
for (const block of codeBlocks) {
if (block.lang === 'svg' || (block.lang === 'xml' && block.code.includes('<svg'))) {
contents = [...contents, { type: 'svg', content: block.code }];
}
}
}
}
});
@@ -184,14 +200,21 @@
<div class=" h-full flex flex-col">
{#if contents.length > 0}
<div class="max-w-full w-full h-full">
<iframe
bind:this={iframeElement}
title="Content"
srcdoc={contents[selectedContentIdx].content}
class="w-full border-0 h-full rounded-none"
sandbox="allow-scripts allow-forms allow-same-origin"
on:load={iframeLoadHandler}
></iframe>
{#if contents[selectedContentIdx].type === 'iframe'}
<iframe
bind:this={iframeElement}
title="Content"
srcdoc={contents[selectedContentIdx].content}
class="w-full border-0 h-full rounded-none"
sandbox="allow-scripts allow-forms allow-same-origin"
on:load={iframeLoadHandler}
></iframe>
{:else if contents[selectedContentIdx].type === 'svg'}
<SvgPanZoom
className=" w-full h-full max-h-full overflow-hidden"
svg={contents[selectedContentIdx].content}
/>
{/if}
</div>
{:else}
<div class="m-auto font-medium text-xs text-gray-900 dark:text-white">

14
src/lib/components/chat/Messages/CodeBlock.svelte
View File

@@ -12,6 +12,7 @@
import PyodideWorker from '$lib/workers/pyodide.worker?worker';
import CodeEditor from '$lib/components/common/CodeEditor.svelte';
import SvgPanZoom from '$lib/components/common/SVGPanZoom.svelte';
const i18n = getContext('i18n');
const dispatch = createEventDispatcher();
@@ -271,14 +272,18 @@ __builtins__.input = input`);
}
$: if (lang) {
dispatch('code', { lang });
dispatchCode();
}
const dispatchCode = () => {
dispatch('code', { lang, code });
};
onMount(async () => {
console.log('codeblock', lang, code);
if (lang) {
dispatch('code', { lang });
dispatchCode();
}
if (document.documentElement.classList.contains('dark')) {
mermaid.initialize({
@@ -300,7 +305,10 @@ __builtins__.input = input`);
<div class="relative my-2 flex flex-col rounded-lg" dir="ltr">
{#if lang === 'mermaid'}
{#if mermaidHtml}
{@html `${mermaidHtml}`}
<SvgPanZoom
className=" border border-gray-50 dark:border-gray-850 rounded-lg max-h-fit overflow-hidden"
svg={mermaidHtml}
/>
{:else}
<pre class="mermaid">{code}</pre>
{/if}

11
src/lib/components/chat/Messages/ContentRenderer.svelte
View File

@@ -71,9 +71,14 @@
dispatch('update', e.detail);
}}
on:code={(e) => {
const { lang } = e.detail;
console.log('code', lang);
if (['html', 'svg'].includes(lang) && !$mobile) {
const { lang, code } = e.detail;
console.log('lang', lang);
console.log('code', code);
if (
(['html', 'svg'].includes(lang) || (lang === 'xml' && code.includes('svg'))) &&
!$mobile
) {
showArtifacts.set(true);
showControls.set(true);
}

29
src/lib/components/common/SVGPanZoom.svelte Normal file
View File

@@ -0,0 +1,29 @@
<script lang="ts">
import { onMount } from 'svelte';
import panzoom from 'panzoom';
import DOMPurify from 'dompurify';
export let className = '';
export let svg = '';
let instance;
let sceneParentElement: HTMLElement;
let sceneElement: HTMLElement;
$: if (sceneElement) {
instance = panzoom(sceneElement, {
bounds: true,
boundsPadding: 0.1,
zoomSpeed: 0.065
});
}
</script>
<div bind:this={sceneParentElement} class={className}>
<div bind:this={sceneElement} class="flex h-full max-h-full justify-center items-center">
{@html svg}
</div>
</div>