perf: memoize marked.lexer for details blocks

Author: Algorithm5838

src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte

@@ -1,3 +1,18 @@
+<script lang="ts" context="module">
+	import { marked, type Token } from 'marked';
+	import { decode } from 'html-entities';
+
+	const _detailsLexCache = new Map<string, Token[]>();
+	const cachedLex = (text: string): Token[] => {
+		const cached = _detailsLexCache.get(text);
+		if (cached) return cached;
+		const result = marked.lexer(decode(text));
+		if (_detailsLexCache.size > 50) _detailsLexCache.clear();
+		_detailsLexCache.set(text, result);
+		return result;
+	};
+</script>
+
 <script lang="ts">
 	import { decode } from 'html-entities';
 	import { onMount, getContext } from 'svelte';
@@ -6,7 +21,7 @@
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
-	import { marked, type Token } from 'marked';
+	import { type Token } from 'marked';
 	import { copyToClipboard, unescapeHtml } from '$lib/utils';
 
 	import { WEBUI_BASE_URL } from '$lib/constants';
@@ -393,7 +408,7 @@
 							<div class="mb-1.5" slot="content">
 								<svelte:self
 									id={`${id}-${tokenIdx}-${detailIdx}-d`}
-									tokens={marked.lexer(decode(detailToken.text))}
+									tokens={cachedLex(detailToken.text)}
 									attributes={detailToken?.attributes}
 									{done}
 									{editCodeBlock}
@@ -440,7 +455,7 @@
 				<div class=" mb-1.5" slot="content">
 					<svelte:self
 						id={`${id}-${tokenIdx}-d`}
-						tokens={marked.lexer(decode(token.text))}
+						tokens={cachedLex(token.text)}
 						attributes={token?.attributes}
 						{done}
 						{editCodeBlock}