perf: cache marked.lexer output for detail tokens

Author: Algorithm5838

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

@@ -1,12 +1,28 @@
-<script lang="ts">
+<script context="module" lang="ts">
+	import { marked, type Token } from 'marked';
 	import { decode } from 'html-entities';
+
+	const _detailTokensCache = new Map<string, Token[]>();
+	const DETAIL_CACHE_MAX = 500;
+
+	function getCachedDetailTokens(text: string): Token[] {
+		if (_detailTokensCache.has(text)) return _detailTokensCache.get(text)!;
+		const tokens = marked.lexer(decode(text));
+		if (_detailTokensCache.size >= DETAIL_CACHE_MAX) {
+			_detailTokensCache.delete(_detailTokensCache.keys().next().value!);
+		}
+		_detailTokensCache.set(text, tokens);
+		return tokens;
+	}
+</script>
+
+<script lang="ts">
 	import { onMount, getContext } from 'svelte';
 	const i18n = getContext('i18n');
 
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
-	import { marked, type Token } from 'marked';
 	import { copyToClipboard, unescapeHtml } from '$lib/utils';
 
 	import { WEBUI_BASE_URL } from '$lib/constants';
@@ -398,7 +414,7 @@
 							<div class="mb-1.5" slot="content">
 								<svelte:self
 									id={`${id}-${tokenIdx}-${detailIdx}-d`}
-									tokens={marked.lexer(decode(detailToken.text))}
+									tokens={getCachedDetailTokens(detailToken.text)}
 									attributes={detailToken?.attributes}
 									{done}
 									{editCodeBlock}
@@ -445,7 +461,7 @@
 				<div class=" mb-1.5" slot="content">
 					<svelte:self
 						id={`${id}-${tokenIdx}-d`}
-						tokens={marked.lexer(decode(token.text))}
+						tokens={getCachedDetailTokens(token.text)}
 						attributes={token?.attributes}
 						{done}
 						{editCodeBlock}