fix: throttle scroll and reduce forced renders during streaming

Author: Algorithm5838

src/lib/components/chat/Chat.svelte

@@ -111,6 +111,8 @@
 	let autoScroll = true;
 	let processing = '';
 	let messagesContainerElement: HTMLDivElement;
+	let scrollRafId = null;
+	let lastTtsProcessTime = 0;
 
 	let navbarElement;
 
@@ -671,6 +673,9 @@
 
 	onDestroy(() => {
 		try {
+			if (scrollRafId) {
+				cancelAnimationFrame(scrollRafId);
+			}
 			pageSubscribe();
 			showControlsSubscribe();
 			selectedFolderSubscribe();
@@ -1175,14 +1180,20 @@
 		}
 	};
 
-	const scrollToBottom = async (behavior = 'auto') => {
-		await tick();
-		if (messagesContainerElement) {
-			messagesContainerElement.scrollTo({
-				top: messagesContainerElement.scrollHeight,
-				behavior
-			});
+	const scrollToBottom = (behavior = 'auto') => {
+		if (scrollRafId) {
+			return;
 		}
+		scrollRafId = requestAnimationFrame(async () => {
+			scrollRafId = null;
+			await tick();
+			if (messagesContainerElement) {
+				messagesContainerElement.scrollTo({
+					top: messagesContainerElement.scrollHeight,
+					behavior
+				});
+			}
+		});
 	};
 	const chatCompletedHandler = async (_chatId, modelId, responseMessageId, messages) => {
 		const res = await chatCompleted(localStorage.token, {
@@ -1471,35 +1482,39 @@
 				// Stream response
 				let value = choices[0]?.delta?.content ?? '';
 				if (message.content == '' && value == '\n') {
-					console.log('Empty response');
+					// Skip leading newlines
 				} else {
 					message.content += value;
 
 					if (navigator.vibrate && ($settings?.hapticFeedback ?? false)) {
 						navigator.vibrate(5);
 					}
 
-					// Emit chat event for TTS
-					const messageContentParts = getMessageContentParts(
-						removeAllDetails(message.content),
-						$config?.audio?.tts?.split_on ?? 'punctuation'
-					);
-					messageContentParts.pop();
+					// Throttle TTS processing to avoid re-parsing entire content on every token
+					const now = Date.now();
+					if (now - lastTtsProcessTime >= 150) {
+						lastTtsProcessTime = now;
 
-					// dispatch only last sentence and make sure it hasn't been dispatched before
-					if (
-						messageContentParts.length > 0 &&
-						messageContentParts[messageContentParts.length - 1] !== message.lastSentence
-					) {
-						message.lastSentence = messageContentParts[messageContentParts.length - 1];
-						eventTarget.dispatchEvent(
-							new CustomEvent('chat', {
-								detail: {
-									id: message.id,
-									content: messageContentParts[messageContentParts.length - 1]
-								}
-							})
+						const messageContentParts = getMessageContentParts(
+							removeAllDetails(message.content),
+							$config?.audio?.tts?.split_on ?? 'punctuation'
 						);
+						messageContentParts.pop();
+
+						if (
+							messageContentParts.length > 0 &&
+							messageContentParts[messageContentParts.length - 1] !== message.lastSentence
+						) {
+							message.lastSentence = messageContentParts[messageContentParts.length - 1];
+							eventTarget.dispatchEvent(
+								new CustomEvent('chat', {
+									detail: {
+										id: message.id,
+										content: messageContentParts[messageContentParts.length - 1]
+									}
+								})
+							);
+						}
 					}
 				}
 			}
@@ -1513,27 +1528,31 @@
 				navigator.vibrate(5);
 			}
 
-			// Emit chat event for TTS
-			const messageContentParts = getMessageContentParts(
-				removeAllDetails(message.content),
-				$config?.audio?.tts?.split_on ?? 'punctuation'
-			);
-			messageContentParts.pop();
+			// Throttle TTS processing
+			const now = Date.now();
+			if (now - lastTtsProcessTime >= 150) {
+				lastTtsProcessTime = now;
 
-			// dispatch only last sentence and make sure it hasn't been dispatched before
-			if (
-				messageContentParts.length > 0 &&
-				messageContentParts[messageContentParts.length - 1] !== message.lastSentence
-			) {
-				message.lastSentence = messageContentParts[messageContentParts.length - 1];
-				eventTarget.dispatchEvent(
-					new CustomEvent('chat', {
-						detail: {
-							id: message.id,
-							content: messageContentParts[messageContentParts.length - 1]
-						}
-					})
+				const messageContentParts = getMessageContentParts(
+					removeAllDetails(message.content),
+					$config?.audio?.tts?.split_on ?? 'punctuation'
 				);
+				messageContentParts.pop();
+
+				if (
+					messageContentParts.length > 0 &&
+					messageContentParts[messageContentParts.length - 1] !== message.lastSentence
+				) {
+					message.lastSentence = messageContentParts[messageContentParts.length - 1];
+					eventTarget.dispatchEvent(
+						new CustomEvent('chat', {
+							detail: {
+								id: message.id,
+								content: messageContentParts[messageContentParts.length - 1]
+							}
+						})
+					);
+				}
 			}
 		}
 
@@ -1597,11 +1616,10 @@
 			);
 		}
 
-		console.log(data);
-		await tick();
-
-		if (autoScroll) {
-			scrollToBottom();
+		if (!done) {
+			if (autoScroll) {
+				scrollToBottom();
+			}
 		}
 	};