From b31de299e4854aa89541465059d817095e593d4b Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 19 Aug 2024 17:28:38 +0200
Subject: [PATCH] fix: mermaid rendering issue

---
 .../components/chat/Messages/CodeBlock.svelte | 31 +++++++------------
 src/routes/(app)/+layout.svelte               |  1 -
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/chat/Messages/CodeBlock.svelte b/src/lib/components/chat/Messages/CodeBlock.svelte
index f368c8459..d8cf40c7b 100644
--- a/src/lib/components/chat/Messages/CodeBlock.svelte
+++ b/src/lib/components/chat/Messages/CodeBlock.svelte
@@ -213,14 +213,20 @@ __builtins__.input = input`);
 
 	let debounceTimeout;
 
+	const drawMermaidDiagram = async () => {
+		try {
+			const { svg } = await mermaid.render(`mermaid-${id}`, code);
+			mermaidHtml = svg;
+		} catch (error) {
+			console.error('Error:', error);
+		}
+	};
+
 	$: if (code) {
 		if (lang === 'mermaid' && (token?.raw ?? '').endsWith('```')) {
 			(async () => {
-				try {
-					const { svg } = await mermaid.render(`mermaid-${id}`, code);
-					mermaidHtml = svg;
-				} catch (error) {
-					console.error('Error:', error);
+				if (!mermaidHtml) {
+					await drawMermaidDiagram();
 				}
 			})();
 		} else {
@@ -235,19 +241,6 @@ __builtins__.input = input`);
 			debounceTimeout = setTimeout(highlightCode, 10);
 		}
 	}
-
-	onMount(async () => {
-		await mermaid.initialize({ startOnLoad: true });
-
-		if (lang === 'mermaid' && (token?.raw ?? '').endsWith('```')) {
-			try {
-				const { svg } = await mermaid.render(`mermaid-${id}`, code);
-				mermaidHtml = svg;
-			} catch (error) {
-				console.error('Error:', error);
-			}
-		}
-	});
 </script>
 
 <div class="my-2" dir="ltr">
@@ -255,7 +248,7 @@ __builtins__.input = input`);
 		{#if mermaidHtml}
 			{@html mermaidHtml}
 		{:else}
-			<pre class=" mermaid-{id}">{code}</pre>
+			<pre class="mermaid">{code}</pre>
 		{/if}
 	{:else}
 		<div
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index b57b58675..b056f8f6e 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -180,7 +180,6 @@
 			await tick();
 		}
 
-		await mermaid.initialize({ startOnLoad: false });
 		loaded = true;
 	});
 </script>