From 1597e33a74a8e3ec69030b72a1fac78214475978 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 14 Aug 2024 16:27:55 +0200
Subject: [PATCH] refac: mermaid chart rendering
---
.../components/chat/Messages/CodeBlock.svelte | 92 ++++++++++---------
1 file changed, 48 insertions(+), 44 deletions(-)
diff --git a/src/lib/components/chat/Messages/CodeBlock.svelte b/src/lib/components/chat/Messages/CodeBlock.svelte
index 5fa4299ea..33b0572f4 100644
--- a/src/lib/components/chat/Messages/CodeBlock.svelte
+++ b/src/lib/components/chat/Messages/CodeBlock.svelte
@@ -222,55 +222,59 @@ __builtins__.input = input`);
</script>
<div class="my-2" dir="ltr">
- <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="p-1">{@html lang}</div>
+ {#if lang === 'mermaid'}
+ <pre class="mermaid">{code}</pre>
+ {:else}
+ <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="p-1">{@html lang}</div>
- <div class="flex items-center">
- {#if lang.toLowerCase() === 'python' || lang.toLowerCase() === 'py' || (lang === '' && checkPythonCode(code))}
- {#if executing}
- <div class="copy-code-button bg-none border-none p-1 cursor-not-allowed">Running</div>
- {:else}
- <button
- class="copy-code-button bg-none border-none p-1"
- on:click={() => {
- executePython(code);
- }}>{$i18n.t('Run')}</button
- >
+ <div class="flex items-center">
+ {#if lang.toLowerCase() === 'python' || lang.toLowerCase() === 'py' || (lang === '' && checkPythonCode(code))}
+ {#if executing}
+ <div class="copy-code-button bg-none border-none p-1 cursor-not-allowed">Running</div>
+ {:else}
+ <button
+ class="copy-code-button bg-none border-none p-1"
+ on:click={() => {
+ executePython(code);
+ }}>{$i18n.t('Run')}</button
+ >
+ {/if}
{/if}
- {/if}
- <button class="copy-code-button bg-none border-none p-1" on:click={copyCode}
- >{copied ? $i18n.t('Copied') : $i18n.t('Copy Code')}</button
- >
+ <button class="copy-code-button bg-none border-none p-1" on:click={copyCode}
+ >{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>
+ <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"
- />
+ <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 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}
</div>