This commit is contained in:
Timothy Jaeryang Baek 2025-11-01 05:56:44 -04:00
parent 7fc4c56ea3
commit fdc0f04a36
3 changed files with 25 additions and 26 deletions

View file

@ -129,8 +129,8 @@ li p {
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
height: 0.4rem; height: 0.45rem;
width: 0.4rem; width: 0.45rem;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {

View file

@ -2632,7 +2632,7 @@
<style> <style>
::-webkit-scrollbar { ::-webkit-scrollbar {
height: 0.6rem; height: 0.5rem;
width: 0.6rem; width: 0.5rem;
} }
</style> </style>

View file

@ -59,8 +59,8 @@
let _token = null; let _token = null;
let mermaidHtml = null; let renderHTML = null;
let vegaHtml = null; let renderError = null;
let highlightedCode = null; let highlightedCode = null;
let executing = false; let executing = false;
@ -340,24 +340,24 @@
onUpdate(token); onUpdate(token);
if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) { if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
try { try {
mermaidHtml = await renderMermaid(code); renderHTML = await renderMermaid(code);
} catch (error) { } catch (error) {
console.error('Failed to render mermaid diagram:', error); console.error('Failed to render mermaid diagram:', error);
const errorMsg = error instanceof Error ? error.message : String(error); const errorMsg = error instanceof Error ? error.message : String(error);
toast.error($i18n.t('Failed to render diagram') + `: ${errorMsg}`); renderError = $i18n.t('Failed to render diagram') + `: ${errorMsg}`;
mermaidHtml = null; renderHTML = null;
} }
} else if ( } else if (
(lang === 'vega' || lang === 'vega-lite') && (lang === 'vega' || lang === 'vega-lite') &&
(token?.raw ?? '').slice(-4).includes('```') (token?.raw ?? '').slice(-4).includes('```')
) { ) {
try { try {
vegaHtml = await renderVegaVisualization(code); renderHTML = await renderVegaVisualization(code);
} catch (error) { } catch (error) {
console.error('Failed to render Vega visualization:', error); console.error('Failed to render Vega visualization:', error);
const errorMsg = error instanceof Error ? error.message : String(error); const errorMsg = error instanceof Error ? error.message : String(error);
toast.error($i18n.t('Failed to render diagram') + `: ${errorMsg}`); renderError = $i18n.t('Failed to render visualization') + `: ${errorMsg}`;
vegaHtml = null; renderHTML = null;
} }
} }
}; };
@ -420,25 +420,24 @@
class="relative {className} flex flex-col rounded-3xl border border-gray-100 dark:border-gray-850 my-0.5" class="relative {className} flex flex-col rounded-3xl border border-gray-100 dark:border-gray-850 my-0.5"
dir="ltr" dir="ltr"
> >
{#if lang === 'mermaid'} {#if ['mermaid', 'vega', 'vega-lite'].includes(lang)}
{#if mermaidHtml} {#if renderHTML}
<SvgPanZoom <SvgPanZoom
className=" rounded-3xl max-h-fit overflow-hidden" className=" rounded-3xl max-h-fit overflow-hidden"
svg={mermaidHtml} svg={renderHTML}
content={_token.text} content={_token.text}
/> />
{:else} {:else}
<pre class="mermaid">{code}</pre> <div class="p-3">
{/if} {#if renderError}
{:else if lang === 'vega' || lang === 'vega-lite'} <div
{#if vegaHtml} class="flex gap-2.5 border px-4 py-3 border-red-600/10 bg-red-600/10 rounded-2xl mb-2"
<SvgPanZoom >
className="rounded-3xl max-h-fit overflow-hidden" {renderError}
svg={vegaHtml} </div>
content={_token.text} {/if}
/> <pre>{code}</pre>
{:else} </div>
<pre class="vega">{code}</pre>
{/if} {/if}
{:else} {:else}
<div <div