perf: throttle markdown lexing during streaming and reduce redundant re-renders

- Throttle marked.lexer() calls to ~100ms during streaming (done=false),
  flush immediately when streaming completes, preventing hundreds of full
  re-lexes per response especially after tool calls inflate content size
- Memoize sourceIds computation in ContentRenderer as a reactive variable
  instead of recomputing inline on every render, preventing unnecessary
  child tree re-renders during streaming
- Pre-compute marked.lexer() for details block content using @const instead
  of calling it inline in the template, eliminating redundant lexing on
  every parent re-render

Author: Algorithm5838

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

@@ -40,6 +40,39 @@
 	export let onTaskClick = (e) => {};
 	export let onAddMessages = (e) => {};
 
+	// Memoize sourceIds to avoid creating a new array reference on every render,
+	// which would cause the entire Markdown/MarkdownTokens tree to re-render
+	$: computedSourceIds = (sources ?? []).reduce((acc, source) => {
+		let ids = [];
+		source.document.forEach((document, index) => {
+			if (model?.info?.meta?.capabilities?.citations == false) {
+				ids.push('N/A');
+				return ids;
+			}
+
+			const metadata = source.metadata?.[index];
+			const id = metadata?.source ?? 'N/A';
+
+			if (metadata?.name) {
+				ids.push(metadata.name);
+				return ids;
+			}
+
+			if (id.startsWith('http://') || id.startsWith('https://')) {
+				ids.push(id);
+			} else {
+				ids.push(source?.source?.name ?? id);
+			}
+
+			return ids;
+		});
+
+		acc = [...acc, ...ids];
+
+		// remove duplicates
+		return acc.filter((item, index) => acc.indexOf(item) === index);
+	}, []);
+
 	let contentContainerElement;
 	let floatingButtonsElement;
 
@@ -143,36 +176,7 @@
 		{done}
 		{editCodeBlock}
 		{topPadding}
-		sourceIds={(sources ?? []).reduce((acc, source) => {
-			let ids = [];
-			source.document.forEach((document, index) => {
-				if (model?.info?.meta?.capabilities?.citations == false) {
-					ids.push('N/A');
-					return ids;
-				}
-
-				const metadata = source.metadata?.[index];
-				const id = metadata?.source ?? 'N/A';
-
-				if (metadata?.name) {
-					ids.push(metadata.name);
-					return ids;
-				}
-
-				if (id.startsWith('http://') || id.startsWith('https://')) {
-					ids.push(id);
-				} else {
-					ids.push(source?.source?.name ?? id);
-				}
-
-				return ids;
-			});
-
-			acc = [...acc, ...ids];
-
-			// remove duplicates
-			return acc.filter((item, index) => acc.indexOf(item) === index);
-		}, [])}
+		sourceIds={computedSourceIds}
 		{onSourceClick}
 		{onTaskClick}
 		{onSave}

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

@@ -24,6 +24,7 @@
 </script>
 
 <script>
+	import { onDestroy } from 'svelte';
 	import { replaceTokens, processResponseContent } from '$lib/utils';
 	import { user } from '$lib/stores';
 
@@ -52,11 +53,40 @@
 
 	let tokens = [];
 
-	$: if (content) {
+	const THROTTLE_MS = 100;
+	let throttleTimer = null;
+	let lastLexTime = 0;
+
+	function lexContent(content) {
 		tokens = marked.lexer(
 			replaceTokens(processResponseContent(content), model?.name, $user?.name)
 		);
+		lastLexTime = Date.now();
 	}
+
+	$: if (content) {
+		if (done) {
+			// When streaming is complete, always lex immediately
+			clearTimeout(throttleTimer);
+			throttleTimer = null;
+			lexContent(content);
+		} else {
+			// During streaming, throttle to reduce processing
+			const elapsed = Date.now() - lastLexTime;
+			if (elapsed >= THROTTLE_MS) {
+				lexContent(content);
+			} else if (!throttleTimer) {
+				throttleTimer = setTimeout(() => {
+					throttleTimer = null;
+					lexContent(content);
+				}, THROTTLE_MS - elapsed);
+			}
+		}
+	}
+
+	onDestroy(() => {
+		clearTimeout(throttleTimer);
+	});
 </script>
 
 {#key id}

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

@@ -325,6 +325,7 @@
 		{@const textContent = decode(token.text || '')
 			.replace(/<summary>.*?<\/summary>/gi, '')
 			.trim()}
+		{@const detailsTokens = textContent.length > 0 ? marked.lexer(decode(token.text)) : []}
 
 		{#if token?.attributes?.type === 'tool_calls'}
 			<!-- Tool calls have dedicated handling with ToolCallDisplay component -->
@@ -345,7 +346,7 @@
 				<div class=" mb-1.5" slot="content">
 					<svelte:self
 						id={`${id}-${tokenIdx}-d`}
-						tokens={marked.lexer(decode(token.text))}
+						tokens={detailsTokens}
 						attributes={token?.attributes}
 						{done}
 						{editCodeBlock}