refine log style

Author: Jicheng Lu

src/lib/scss/custom/pages/_chat.scss

@@ -364,15 +364,15 @@
         background-color: black;
 
         .log-close-btn {
-            margin-top: 1.5rem;
-            margin-bottom: 10px;
+            margin-top: 1.2rem;
             position: sticky;
             display: flex;
             justify-content: space-between;
+            height: 5vh;
         }
 
         .state-log-section {
-            height: 92vh;
+            height: 90vh;
         }
 
         .content-log-list {
@@ -390,7 +390,6 @@
 
         .queue-change-log-list {
             width: 100%;
-            height: 5vh;
         }
 
         .log-list {
@@ -470,7 +469,7 @@
 
                 .log-content {
                     text-align: center;
-                    font-size: 17px;
+                    font-size: 14px;
                     margin-top: 2px;
                     margin-bottom: 2px;
                 }

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

@@ -66,8 +66,8 @@
 	/** @type {import('$types').UserModel} */
 	export let currentUser;
 
-	// @ts-ignore
-    let scrollbar;
+	/** @type {any[]} */
+    let scrollbars = [];
 	let microphoneIcon = "microphone-off";
 
 	/** @type {import('$types').ChatResponseModel?} */
@@ -121,8 +121,12 @@
 		signalr.onConversationMessageDeleted = onConversationMessageDeleted;
 		await signalr.start(params.conversationId);
 
-		const scrollElement = document.querySelector('.chat-scrollbar');
-		scrollbar = OverlayScrollbars(scrollElement, options);
+		const scrollbarElements = [
+			document.querySelector('.chat-scrollbar')
+		].filter(Boolean);
+		scrollbarElements.forEach(elem => {
+            scrollbars = [ ...scrollbars, OverlayScrollbars(elem, options) ];
+        });
 		refresh();
 	});
 
@@ -210,10 +214,13 @@
 		groupedDialogs = groupDialogs(dialogs);
 		await tick();
 
-		setTimeout(() => {
-			const { viewport } = scrollbar.elements();
-			viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' }); // set scroll offset
-		}, 200);
+		// @ts-ignore
+        scrollbars.forEach(scrollbar => {
+            setTimeout(() => {
+                const { viewport } = scrollbar.elements();
+                viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' });
+            }, 200);
+        });
     }
 
 	/** @param {import('$types').ChatResponseModel[]} dialogs */
@@ -458,6 +465,7 @@
 		isLoadContentLog = !isLoadContentLog;
 		if (!isLoadContentLog) {
 			contentLogs = [];
+			agentQueueChangeLogs = [];
 			isContentLogClosed = true;
 		} else {
 			isContentLogClosed = false;
@@ -472,6 +480,7 @@
 		isLoadStateLog = !isLoadStateLog;
 		if (!isLoadStateLog) {
 			stateLogs = [];
+			stateChangeLogs = [];
 			isStateLogClosed = true;
 		} else {
 			isStateLogClosed = false;

src/routes/chat/[agentId]/[conversationId]/contentLogs/agent-queue-change-element.svelte

@@ -7,6 +7,6 @@
 
 <div class="log-element queue-change-container">
     <div class="log-content queue-change-content">
-        <span class="text-warning">{data?.log}</span>
+        <span class="text-danger">{data?.log}</span>
     </div>
 </div>

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

@@ -6,6 +6,7 @@
     /** @type {string} */
     let beforeActiveRoundText = '';
     let afterActiveRoundText = '';
+    const defaultKey = '-';
 
     $: {
         beforeActiveRoundText = buildActiveRoundText(data?.before_value, data?.before_active_rounds);
@@ -40,7 +41,7 @@
     <div class="log-content state-value-container">
         <div class="state-value">
             <div class="value">
-                {`${data?.before_value || 'unknown'}`}
+                {`${data?.before_value || defaultKey}`}
             </div>
             {#if !!beforeActiveRoundText}
             <div class="active-rounds">
@@ -50,7 +51,7 @@
         </div>
         <div class="state-value text-warning">
             <div class="value">
-                {`${data?.after_value || 'unknown'}`}
+                {`${data?.after_value || defaultKey}`}
             </div>
             {#if !!afterActiveRoundText}
             <div class="active-rounds">

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

@@ -80,20 +80,24 @@
 <div class="chat-log">
     <div class="card mb-0 log-background" style="height: 100%;">
         <div class="log-close-btn padding-side">
-            <button
-                type="button"
-                class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
-                on:click={() => closeWindow()}
-            >
-                <i class="mdi mdi-window-close"></i>
-            </button>
-            <button
-                type="button"
-                class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
-                on:click={() => handleCleanScreen()}
-            >
-                <i class="bx bx-trash"></i>
-            </button>
+            <div>
+                <button
+                    type="button"
+                    class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
+                    on:click={() => closeWindow()}
+                >
+                    <i class="mdi mdi-window-close"></i>
+                </button>
+            </div>
+            <div>
+                <button
+                    type="button"
+                    class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
+                    on:click={() => handleCleanScreen()}
+                >
+                    <i class="bx bx-trash"></i>
+                </button>
+            </div>
         </div>
         <div class="state-log-section">
             <Splitpanes horizontal>