UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-04-05 05:10:46 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix: codeblock rendering issue

Browse Source
This commit is contained in:
Timothy J. Baek 2024-05-25 02:47:09 -07:00
parent 42dcf1b08c
commit a6af20e1eb
2 changed files with 55 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@
import hljs from 'highlight.js'; import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark.min.css'; import 'highlight.js/styles/github-dark.min.css';
import { loadPyodide } from 'pyodide'; import { loadPyodide } from 'pyodide';
import { tick } from 'svelte'; import { onMount, tick } from 'svelte';
import PyodideWorker from '$lib/workers/pyodide.worker?worker'; import PyodideWorker from '$lib/workers/pyodide.worker?worker';
export let id = ''; export let id = '';
@ -12,6 +12,7 @@
export let lang = ''; export let lang = '';
export let code = ''; export let code = '';
let highlightedCode = null;
let executing = false; let executing = false;
let stdout = null; let stdout = null;
@ -202,60 +203,60 @@ __builtins__.input = input`);
}; };
}; };
$: highlightedCode = code ? hljs.highlightAuto(code, hljs.getLanguage(lang)?.aliases).value : ''; $: if (code) {
highlightedCode = hljs.highlightAuto(code, hljs.getLanguage(lang)?.aliases).value || code;
}
</script> </script>
{#if code} <div class="mb-4" dir="ltr">
<div class="mb-4" dir="ltr"> <div
<div class="flex justify-between bg-[#202123] text-white text-xs px-4 pt-1 pb-0.5 rounded-t-lg overflow-x-auto"
class="flex justify-between bg-[#202123] text-white text-xs px-4 pt-1 pb-0.5 rounded-t-lg overflow-x-auto" >
> <div class="p-1">{@html lang}</div>
<div class="p-1">{@html lang}</div>
<div class="flex items-center"> <div class="flex items-center">
{#if lang === 'python' || (lang === '' && checkPythonCode(code))} {#if lang === 'python' || (lang === '' && checkPythonCode(code))}
{#if executing} {#if executing}
<div class="copy-code-button bg-none border-none p-1 cursor-not-allowed">Running</div> <div class="copy-code-button bg-none border-none p-1 cursor-not-allowed">Running</div>
{:else} {:else}
<button <button
class="copy-code-button bg-none border-none p-1" class="copy-code-button bg-none border-none p-1"
on:click={() => { on:click={() => {
executePython(code); executePython(code);
}}>Run</button }}>Run</button
> >
{/if}
{/if} {/if}
<button class="copy-code-button bg-none border-none p-1" on:click={copyCode} {/if}
>{copied ? 'Copied' : 'Copy Code'}</button <button class="copy-code-button bg-none border-none p-1" on:click={copyCode}
> >{copied ? 'Copied' : 'Copy Code'}</button
</div> >
</div> </div>
<pre
class=" hljs p-4 px-5 overflow-x-auto"
style="border-top-left-radius: 0px; border-top-right-radius: 0px; {(executing ||
stdout ||
stderr ||
result) &&
'border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;'}"><code
class="language-{lang} rounded-t-none whitespace-pre">{@html highlightedCode || code}</code
></pre>
<div
id="plt-canvas-{id}"
class="bg-[#202123] text-white max-w-full overflow-x-auto scrollbar-hidden"
/>
{#if executing}
<div class="bg-[#202123] text-white px-4 py-4 rounded-b-lg">
<div class=" text-gray-500 text-xs mb-1">STDOUT/STDERR</div>
<div class="text-sm">Running...</div>
</div>
{:else if stdout || stderr || result}
<div class="bg-[#202123] text-white px-4 py-4 rounded-b-lg">
<div class=" text-gray-500 text-xs mb-1">STDOUT/STDERR</div>
<div class="text-sm">{stdout || stderr || result}</div>
</div>
{/if}
</div> </div>
{/if}
<pre
class=" hljs p-4 px-5 overflow-x-auto"
style="border-top-left-radius: 0px; border-top-right-radius: 0px; {(executing ||
stdout ||
stderr ||
result) &&
'border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;'}"><code
class="language-{lang} rounded-t-none whitespace-pre">{@html highlightedCode || code}</code
></pre>
<div
id="plt-canvas-{id}"
class="bg-[#202123] text-white max-w-full overflow-x-auto scrollbar-hidden"
/>
{#if executing}
<div class="bg-[#202123] text-white px-4 py-4 rounded-b-lg">
<div class=" text-gray-500 text-xs mb-1">STDOUT/STDERR</div>
<div class="text-sm">Running...</div>
</div>
{:else if stdout || stderr || result}
<div class="bg-[#202123] text-white px-4 py-4 rounded-b-lg">
<div class=" text-gray-500 text-xs mb-1">STDOUT/STDERR</div>
<div class="text-sm">{stdout || stderr || result}</div>
</div>
{/if}
</div>

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

@ -440,8 +440,8 @@
{#if token.type === 'code'} {#if token.type === 'code'}
<CodeBlock <CodeBlock
id={`${message.id}-${tokenIdx}`} id={`${message.id}-${tokenIdx}`}
lang={token.lang} lang={token?.lang ?? ''}
code={revertSanitizedResponseContent(token.text)} code={revertSanitizedResponseContent(token?.text ?? '')}
/> />
{:else} {:else}
{@html marked.parse(token.raw, { {@html marked.parse(token.raw, {