UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-01-19 09:16:44 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Timothy J. Baek 2024-08-19 17:44:14 +02:00
parent b31de299e4
commit 68d8fd69c0
1 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,8 @@
import { loadPyodide } from 'pyodide'; import { loadPyodide } from 'pyodide';
import mermaid from 'mermaid'; import mermaid from 'mermaid';
import { v4 as uuidv4 } from 'uuid';
import { getContext, getAllContexts, onMount } from 'svelte'; import { getContext, getAllContexts, onMount } from 'svelte';
import { copyToClipboard } from '$lib/utils'; import { copyToClipboard } from '$lib/utils';
@ -214,20 +216,19 @@ __builtins__.input = input`);
let debounceTimeout; let debounceTimeout;
const drawMermaidDiagram = async () => { const drawMermaidDiagram = async () => {
console.log('drawMermaidDiagram');
try { try {
const { svg } = await mermaid.render(`mermaid-${id}`, code); const { svg } = await mermaid.render(`mermaid-${uuidv4()}`, code);
mermaidHtml = svg; mermaidHtml = svg;
} catch (error) { } catch (error) {
console.error('Error:', error); console.log('Error:', error);
} }
}; };
$: if (code) { $: if (token.raw) {
if (lang === 'mermaid' && (token?.raw ?? '').endsWith('```')) { if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
(async () => { (async () => {
if (!mermaidHtml) { await drawMermaidDiagram();
await drawMermaidDiagram();
}
})(); })();
} else { } else {
// Function to perform the code highlighting // Function to perform the code highlighting
@ -241,12 +242,18 @@ __builtins__.input = input`);
debounceTimeout = setTimeout(highlightCode, 10); debounceTimeout = setTimeout(highlightCode, 10);
} }
} }
onMount(async () => {
if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
await drawMermaidDiagram();
}
});
</script> </script>
<div class="my-2" dir="ltr"> <div class="my-2" dir="ltr">
{#if lang === 'mermaid'} {#if lang === 'mermaid'}
{#if mermaidHtml} {#if mermaidHtml}
{@html mermaidHtml} {@html `${mermaidHtml}`}
{:else} {:else}
<pre class="mermaid">{code}</pre> <pre class="mermaid">{code}</pre>
{/if} {/if}