Skip to content

GitLab

Commit 1597e33a authored by Timothy J. Baek's avatar Timothy J. Baek
Browse files

refac: mermaid chart rendering

parent 0b218bbb
Hide whitespace changes
Inline Side-by-side
Showing with 52 additions and 48 deletions
src/lib/components/chat/Messages/CodeBlock.svelte
View file @ 1597e33a
...@@ -222,55 +222,59 @@ __builtins__.input = input`); ...@@ -222,55 +222,59 @@ __builtins__.input = input`);
</script> </script>
<div class="my-2" dir="ltr"> <div class="my-2" dir="ltr">
<div {#if lang === 'mermaid'}
class="flex justify-between bg-[#202123] text-white text-xs px-4 pt-1 pb-0.5 rounded-t-lg overflow-x-auto" <pre class="mermaid">{code}</pre>
> {:else}
<div class="p-1">{@html lang}</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"
<div class="flex items-center"> >
{#if lang.toLowerCase() === 'python' || lang.toLowerCase() === 'py' || (lang === '' && checkPythonCode(code))} <div class="p-1">{@html lang}</div>
{#if executing}
<div class="copy-code-button bg-none border-none p-1 cursor-not-allowed">Running</div> <div class="flex items-center">
{:else} {#if lang.toLowerCase() === 'python' || lang.toLowerCase() === 'py' || (lang === '' && checkPythonCode(code))}
<button {#if executing}
class="copy-code-button bg-none border-none p-1" <div class="copy-code-button bg-none border-none p-1 cursor-not-allowed">Running</div>
on:click={() => { {:else}
executePython(code); <button
}}>{$i18n.t('Run')}</button class="copy-code-button bg-none border-none p-1"
> on:click={() => {
executePython(code);
}}>{$i18n.t('Run')}</button
>
{/if}
{/if} {/if}
{/if} <button class="copy-code-button bg-none border-none p-1" on:click={copyCode}
<button class="copy-code-button bg-none border-none p-1" on:click={copyCode} >{copied ? $i18n.t('Copied') : $i18n.t('Copy Code')}</button
>{copied ? $i18n.t('Copied') : $i18n.t('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"
>{#if highlightedCode}{@html highlightedCode}{:else}{code}{/if}</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> </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"
>{#if highlightedCode}{@html highlightedCode}{:else}{code}{/if}</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}
{/if} {/if}
</div> </div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment