fix: throttle markdown lexer during streaming to prevent render backlog

Author: Algorithm5838

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

@@ -1,4 +1,5 @@
 <script>
+	import { onDestroy } from 'svelte';
 	import { marked } from 'marked';
 	import { replaceTokens, processResponseContent } from '$lib/utils';
 	import { user } from '$lib/stores';
@@ -34,6 +35,7 @@
 	export let onTaskClick = () => {};
 
 	let tokens = [];
+	let rafId = null;
 
 	const options = {
 		throwOnError: false,
@@ -53,13 +55,36 @@
 		]
 	});
 
-	$: (async () => {
-		if (content) {
-			tokens = marked.lexer(
-				replaceTokens(processResponseContent(content), model?.name, $user?.name)
-			);
+	const lexContent = () => {
+		tokens = marked.lexer(
+			replaceTokens(processResponseContent(content), model?.name, $user?.name)
+		);
+	};
+
+	$: if (content) {
+		if (done) {
+			// When done, lex immediately to ensure final render is accurate
+			if (rafId) {
+				cancelAnimationFrame(rafId);
+				rafId = null;
+			}
+			lexContent();
+		} else {
+			// While streaming, throttle to once per animation frame
+			if (!rafId) {
+				rafId = requestAnimationFrame(() => {
+					rafId = null;
+					lexContent();
+				});
+			}
 		}
-	})();
+	}
+
+	onDestroy(() => {
+		if (rafId) {
+			cancelAnimationFrame(rafId);
+		}
+	});
 </script>
 
 {#key id}