refine log auto scroll

Author: Jicheng Lu

src/routes/chat/[agentId]/[conversationId]/chat-box.svelte

@@ -121,6 +121,7 @@
 	let loadEditor = false;
 	let loadTextEditor = false;
 	let loadFileEditor = false;
+	let autoScrollLog = false;
 
 	$: {
 		const editor = lastBotMsg?.rich_content?.editor || '';
@@ -134,10 +135,11 @@
 	});
 	
 	onMount(async () => {
+		autoScrollLog = true;
 		dialogs = await GetDialogs(params.conversationId);
 		initUserSentMessages(dialogs);
 		initChatView();
-
+		
 		signalr.onMessageReceivedFromClient = onMessageReceivedFromClient;
 		signalr.onMessageReceivedFromCsr = onMessageReceivedFromCsr;
 		signalr.onMessageReceivedFromAssistant = onMessageReceivedFromAssistant;
@@ -153,6 +155,7 @@
 			document.querySelector('.chat-scrollbar')
 		].filter(Boolean);
 		refresh();
+		autoScrollLog = false;
 	});
 
 	function resizeChatWindow() {
@@ -401,6 +404,7 @@
 	 */
     function sendChatMessage(msgText, data = null) {
 		isSendingMsg = true;
+		autoScrollLog = true;
 		clearEventLogs();
 		renewUserSentMessages(msgText);
 		const postback = buildPostbackMessage(dialogs, data?.payload || msgText, data?.truncateMsgId);
@@ -420,9 +424,11 @@
 		return new Promise((resolve, reject) => {
 			sendMessageToHub(params.agentId, params.conversationId, msgText, messageData, files).then(res => {
 				isSendingMsg = false;
+				autoScrollLog = false;
 				resolve(res);
 			}).catch(err => {
 				isSendingMsg = false;
+				autoScrollLog = false;
 				reject(err);
 			});
 		});
@@ -855,6 +861,7 @@
 			<StateLog
 				bind:convStateLogs={convStateLogs}
 				bind:msgStateLogs={msgStateLogs}
+				autoScroll={autoScrollLog}
 				closeWindow={toggleStateLog}
 				cleanScreen={cleanStateLogScreen}
 			/>
@@ -1085,6 +1092,7 @@
 			<ContentLog
 				bind:contentLogs={contentLogs}
 				bind:agentQueueLogs={agentQueueLogs}
+				autoScroll={autoScrollLog}
 				closeWindow={toggleContentLog}
 				cleanScreen={cleanContentLogScreen}
 			/>

src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log.svelte

@@ -1,7 +1,7 @@
 <script>
     import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
-	import { afterUpdate, beforeUpdate, onDestroy, onMount } from 'svelte';
+	import { afterUpdate, onDestroy, onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { GetContentLogs } from '$lib/services/logging-service';
     import NavBar from '$lib/common/nav-bar/NavBar.svelte';
@@ -18,6 +18,9 @@
     /** @type {import('$types').AgentQueueLogModel[]} */
     export let agentQueueLogs = [];
 
+    /** @type {boolean} */
+    export let autoScroll = false;
+
     /** @type {() => void} */
     export let closeWindow;
 
@@ -55,10 +58,6 @@
 		refresh();
 	});
 
-    beforeUpdate(() => {
-        // console.log('before update: ', tabs);
-    });
-
     afterUpdate(() => {
         refresh();
     });
@@ -68,7 +67,9 @@
     });
 
     function refresh() {
-        scrollToBottom();
+        if (autoScroll) {
+            scrollToBottom();
+        }
     }
 
     function scrollToBottom() {

src/routes/chat/[agentId]/[conversationId]/stateLogs/state-log.svelte

@@ -18,6 +18,9 @@
     /** @type {any[]} */
     export let msgStateLogs = [];
 
+    /** @type {boolean} */
+    export let autoScroll = false;
+
     /** @type {() => void} */
     export let closeWindow;
 
@@ -63,7 +66,9 @@
     });
 
     function refresh() {
-        scrollToBottom();
+        if (autoScroll) {
+            scrollToBottom();
+        }
     }
 
     function scrollToBottom() {