refac

Co-Authored-By: Algorithm5838 <108630393+Algorithm5838@users.noreply.github.com>

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 pendingUpdate = null;
 
 	const options = {
 		throwOnError: false,
@@ -53,13 +55,29 @@
 		]
 	});
 
-	$: (async () => {
-		if (content) {
-			tokens = marked.lexer(
-				replaceTokens(processResponseContent(content), model?.name, $user?.name)
-			);
+	const parseTokens = () => {
+		tokens = marked.lexer(
+			replaceTokens(processResponseContent(content), model?.name, $user?.name)
+		);
+	};
+
+	// Throttle parsing to once per animation frame while streaming
+	$: if (content) {
+		if (done) {
+			cancelAnimationFrame(pendingUpdate);
+			pendingUpdate = null;
+			parseTokens();
+		} else if (!pendingUpdate) {
+			pendingUpdate = requestAnimationFrame(() => {
+				pendingUpdate = null;
+				parseTokens();
+			});
 		}
-	})();
+	}
+
+	onDestroy(() => {
+		cancelAnimationFrame(pendingUpdate);
+	});
 </script>
 
 {#key id}