feat: dynamically load mermaid.js

src/lib/components/chat/Chat.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { v4 as uuidv4 } from 'uuid';
 	import { toast } from 'svelte-sonner';
-	import mermaid from 'mermaid';
 	import { PaneGroup, Pane, PaneResizer } from 'paneforge';
 
 	import { getContext, onDestroy, onMount, tick } from 'svelte';

src/lib/components/chat/Messages/CodeBlock.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
 	import hljs from 'highlight.js';
 
-	import mermaid from 'mermaid';
-
-	import { v4 as uuidv4 } from 'uuid';
-
 	import { getContext, onMount, tick, onDestroy } from 'svelte';
-	import { copyToClipboard } from '$lib/utils';
+	import { copyToClipboard, renderMermaidDiagram } from '$lib/utils';
 
 	import 'highlight.js/styles/github-dark.min.css';
 
@@ -325,27 +321,11 @@
 		};
 	};
 
-	let debounceTimeout;
-
-	const drawMermaidDiagram = async () => {
-		try {
-			if (await mermaid.parse(code)) {
-				const { svg } = await mermaid.render(`mermaid-${uuidv4()}`, code);
-				mermaidHtml = svg;
-			}
-		} catch (error) {
-			console.log('Error:', error);
-		}
-	};
-
 	const render = async () => {
-		if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
-			(async () => {
-				await drawMermaidDiagram();
-			})();
-		}
-
 		onUpdate(token);
+		if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
+			mermaidHtml = await renderMermaidDiagram(code);
+		}
 	};
 
 	$: if (token) {
@@ -392,20 +372,6 @@
 		if (token) {
 			onUpdate(token);
 		}
-
-		if (document.documentElement.classList.contains('dark')) {
-			mermaid.initialize({
-				startOnLoad: true,
-				theme: 'dark',
-				securityLevel: 'loose'
-			});
-		} else {
-			mermaid.initialize({
-				startOnLoad: true,
-				theme: 'default',
-				securityLevel: 'loose'
-			});
-		}
 	});
 
 	onDestroy(() => {

src/lib/utils/index.ts

@@ -1569,3 +1569,21 @@ export const decodeString = (str: string) => {
 		return str;
 	}
 };
+
+export const renderMermaidDiagram = async (code: string) => {
+	try {
+		const { default: mermaid } = await import('mermaid');
+		mermaid.initialize({
+			startOnLoad: true,
+			theme: document.documentElement.classList.contains('dark') ? 'dark' : 'default',
+			securityLevel: 'loose'
+		});
+		if (await mermaid.parse(code)) {
+			const { svg } = await mermaid.render(`mermaid-${uuidv4()}`, code);
+			return svg;
+		}
+	} catch (error) {
+		console.log('Failed to render mermaid diagram:', error);
+		return '';
+	}
+};

src/routes/(app)/+layout.svelte

@@ -4,7 +4,6 @@
 	import { openDB, deleteDB } from 'idb';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
-	import mermaid from 'mermaid';
 
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';