Merge pull request #271 from iceljc/features/refine-chat-window

refine auto scroll

Author: iceljc

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

@@ -211,7 +211,6 @@
 	
 	onMount(async () => {
 		disableSpeech = navigator.userAgent.includes('Firefox');
-		autoScrollLog = true;
 		conversation = await getConversation(params.conversationId);
 		dialogs = await getDialogs(params.conversationId);
 		conversationUser = await getConversationUser(params.conversationId);
@@ -220,7 +219,7 @@
 		initChatView();
 		
 		signalr.onMessageReceivedFromClient = onMessageReceivedFromClient;
-		signalr.onMessageReceivedFromCsr = onMessageReceivedFromCsr;
+		signalr.onMessageReceivedFromCsr = onMessageReceivedFromClient;
 		signalr.onMessageReceivedFromAssistant = onMessageReceivedFromAssistant;
 		signalr.onNotificationGenerated = onNotificationGenerated;
 		signalr.onConversationContentLogGenerated = onConversationContentLogGenerated;
@@ -235,7 +234,6 @@
 			document.querySelector('.chat-scrollbar')
 		].filter(Boolean);
 		refresh();
-		autoScrollLog = false;
 
 		window.addEventListener('message', async (e) => {
 			if (e.data.action === ChatAction.Logout) {
@@ -459,6 +457,8 @@
 
 	/** @param {import('$conversationTypes').ChatResponseModel} message */
 	function onMessageReceivedFromClient(message) {
+		autoScrollLog = true;
+		clearInstantLogs();
 		dialogs.push({
 			...message,
 			is_chat_message: true
@@ -467,15 +467,6 @@
 		text = "";
     }
 
-    /** @param {import('$conversationTypes').ChatResponseModel} message */
-    function onMessageReceivedFromCsr(message) {
-		dialogs.push({
-			...message,
-			is_chat_message: true
-		});
-		refresh();
-    }
-
     /** @param {import('$conversationTypes').ChatResponseModel} message */
     function onMessageReceivedFromAssistant(message) {
 		// webSpeech.utter(message.text);
@@ -572,7 +563,6 @@
 	 */
     function sendChatMessage(msgText, data = null, conversationId = null) {
 		isSendingMsg = true;
-		autoScrollLog = true;
 		clearInstantLogs();
 		renewUserSentMessages(msgText);
 		const agentId = params.agentId;
@@ -618,7 +608,6 @@
 						reject(err);
 					}).finally(() => {
 						isSendingMsg = false;
-						autoScrollLog = false;
 					});
 				});
 			});
@@ -644,7 +633,6 @@
 							reject(err);
 						}).finally(() => {
 							isSendingMsg = false;
-							autoScrollLog = false;
 						});
 					});
 				} else {
@@ -654,7 +642,6 @@
 						reject(err);
 					}).finally(() => {
 						isSendingMsg = false;
-						autoScrollLog = false;
 					});
 				}
 			});

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

@@ -1,7 +1,7 @@
 <script>
     import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
-	import { afterUpdate, onDestroy, onMount } from 'svelte';
+	import { afterUpdate, beforeUpdate, onDestroy, onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { GetContentLogs, GetStateLogs } from '$lib/services/logging-service';
     import NavBar from '$lib/common/nav-bar/NavBar.svelte';
@@ -34,6 +34,7 @@
     let scrollbars = [];
     /** @type {number} */
     let selectedTab = contentLogTab;
+    let tabChanged = false;
 
     const options = {
 		scrollbars: {
@@ -63,6 +64,13 @@
 		scrollToBottom();
 	});
 
+    beforeUpdate(() => {
+        if (tabChanged) {
+            autoScroll = false;
+            tabChanged = false;
+        }
+    });
+
     afterUpdate(() => {
         refresh();
     });
@@ -75,6 +83,7 @@
         if (autoScroll) {
             scrollToBottom();
         }
+        
     }
 
     function scrollToBottom() {
@@ -97,9 +106,13 @@
         cleanScreen && cleanScreen();
     }
     
-    /** @param {number} tab */
-    function handleTabClick(tab) {
-        selectedTab = tab;
+    /** @param {number} selected */
+    function handleTabClick(selected) {
+        if (selectedTab === selected) {
+            return;
+        }
+        tabChanged = true;
+        selectedTab = selected;
     }
 </script>