refine nav

Jicheng Lu · Jicheng Lu · commit 4d03b9b54330 · 2024-05-10T23:10:37.000-05:00
diff --git a/src/lib/common/nav-bar/NavItem.svelte b/src/lib/common/nav-bar/NavItem.svelte
@@ -93,9 +93,10 @@
         border: none !important;
         color: white !important;
         font-weight: 500;
+        font-size: 1.2em;
     }
 
     .tab-btn.active {
-        color: var(--bs-primary) !important;
+        background-color: var(--bs-primary) !important;
     }
 </style>
diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js
@@ -302,7 +302,7 @@ IRichContent.prototype.text;
  */
 
 /**
- * @typedef {Object} StateChangeModel
+ * @typedef {Object} MessageStateLogModel
  * @property {string} conversation_id - The conversation id.
  * @property {string} message_id - The message id.
  * @property {string} before_value - The value before change.
@@ -315,7 +315,7 @@ IRichContent.prototype.text;
  */
 
 /**
- * @typedef {Object} AgentQueueChangedModel
+ * @typedef {Object} AgentQueueLogModel
  * @property {string} conversation_id - The conversation id.
  * @property {string} log - The log content.
  * @property {Date} created_at - The log sent time.
@@ -416,14 +416,14 @@ IRichContent.prototype.text;
  * Conversation state change log
  * 
  * @callback OnStateChangeGenerated
- * @param {StateChangeModel} log
+ * @param {MessageStateLogModel} log
  */
 
 /** 
  * Agent queue changed log
  * 
  * @callback OnAgentQueueChanged
- * @param {AgentQueueChangedModel} log
+ * @param {AgentQueueLogModel} log
  */
 
 /** 
diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
@@ -428,6 +428,7 @@
             .state-change-container {
                 margin-top: 0px;
                 margin-bottom: 5px;
+                padding-left: 10px;
 
                 .state-key {
                     color: var(--bs-primary);
@@ -459,7 +460,7 @@
 
                 .log-content {
                     text-align: center;
-                    font-size: 14px;
+                    font-size: 18px;
                     margin-top: 2px;
                     margin-bottom: 2px;
                 }
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -96,13 +96,13 @@
 	let contentLogs = [];
 
 	/** @type {import('$types').ConversationStateLogModel[]} */
-	let stateLogs = [];
+	let convStateLogs = [];
 
-	/** @type {import('$types').StateChangeModel[]} */
-	let stateChangeLogs = [];
+	/** @type {import('$types').MessageStateLogModel[]} */
+	let msgStateLogs = [];
 
-	/** @type {import('$types').AgentQueueChangedModel[]} */
-	let agentQueueChangeLogs = [];
+	/** @type {import('$types').AgentQueueLogModel[]} */
+	let agentQueueLogs = [];
 
 	/** @type {import('$types').UserStateDetailModel[]} */
 	let userAddStates = [];
@@ -349,24 +349,25 @@
 	/** @param {import('$types').ConversationStateLogModel} log */
 	function onConversationStateLogGenerated(log) {
 		if (!isLoadStateLog) return;
-		stateLogs.push({ ...log });
-		stateLogs = stateLogs.map(x => { return { ...x }; });
+
+		convStateLogs.push({ ...log });
+		convStateLogs = convStateLogs.map(x => { return { ...x }; });
 	}
 
-	/** @param {import('$types').StateChangeModel} log */
+	/** @param {import('$types').MessageStateLogModel} log */
 	function onStateChangeGenerated(log) {
 		if (!isLoadStateLog || log == null) return;
 
-		stateChangeLogs.push({ ...log });
-		stateChangeLogs = stateChangeLogs.map(x => { return { ...x }; });
+		msgStateLogs.push({ ...log });
+		msgStateLogs = msgStateLogs.map(x => { return { ...x }; });
 	}
 
-	/** @param {import('$types').AgentQueueChangedModel} log */
+	/** @param {import('$types').AgentQueueLogModel} log */
 	function onAgentQueueChanged(log) {
 		if (!isLoadContentLog || log == null) return;
 
-		agentQueueChangeLogs.push({ ...log });
-		agentQueueChangeLogs = agentQueueChangeLogs.map(x => { return { ...x }; });
+		agentQueueLogs.push({ ...log });
+		agentQueueLogs = agentQueueLogs.map(x => { return { ...x }; });
 	}
 
 	/** @param {import('$types').ConversationSenderActionModel} data */
@@ -552,7 +553,7 @@
 		isLoadContentLog = !isLoadContentLog;
 		if (!isLoadContentLog) {
 			contentLogs = [];
-			agentQueueChangeLogs = [];
+			agentQueueLogs = [];
 			isContentLogClosed = true;
 		} else {
 			isContentLogClosed = false;
@@ -566,16 +567,16 @@
 	function toggleStateLog() {
 		isLoadStateLog = !isLoadStateLog;
 		if (!isLoadStateLog) {
-			stateLogs = [];
-			stateChangeLogs = [];
+			convStateLogs = [];
+			msgStateLogs = [];
 			isStateLogClosed = true;
 		} else {
 			isStateLogClosed = false;
 		}
 	}
 
 	function cleanStateLogScreen() {
-		stateLogs = [];
+		convStateLogs = [];
 	}
 
 	function toggleUserAddStateModal() {
@@ -731,8 +732,8 @@
 		}
 		
 		if (isLoadStateLog) {
-			const targetIdx = stateLogs.findIndex(x => x.message_id === messageId);
-			stateLogs = stateLogs.filter((x, idx) => idx < targetIdx);
+			const targetIdx = convStateLogs.findIndex(x => x.message_id === messageId);
+			convStateLogs = convStateLogs.filter((x, idx) => idx < targetIdx);
 		}
 	}
 
@@ -813,8 +814,8 @@
 	}
 
 	function clearEventLogs() {
-		stateChangeLogs = [];
-		agentQueueChangeLogs = [];
+		msgStateLogs = [];
+		agentQueueLogs = [];
 	}
 
 	function resetStorage() {
@@ -852,8 +853,8 @@
 		{#if isLoadStateLog}
 		<Pane size={30} minSize={20} maxSize={50} >
 			<StateLog
-				bind:stateLogs={stateLogs}
-				bind:stateChangeLogs={stateChangeLogs}
+				bind:convStateLogs={convStateLogs}
+				bind:msgStateLogs={msgStateLogs}
 				closeWindow={toggleStateLog}
 				cleanScreen={cleanStateLogScreen}
 			/>
@@ -1083,7 +1084,7 @@
 		<Pane size={30} minSize={20} maxSize={50}>
 			<ContentLog
 				bind:contentLogs={contentLogs}
-				bind:agentQueueChangeLogs={agentQueueChangeLogs}
+				bind:agentQueueLogs={agentQueueLogs}
 				closeWindow={toggleContentLog}
 				cleanScreen={cleanContentLogScreen}
 			/>
diff --git a/src/routes/chat/[agentId]/[conversationId]/contentLogs/agent-queue-log-element.svelte b/src/routes/chat/[agentId]/[conversationId]/contentLogs/agent-queue-log-element.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div class="log-element queue-change-container">
-    <div class="log-content queue-change-content">
+    <div class="log-content">
         <span class="text-danger">{data?.log}</span>
     </div>
 </div>
diff --git a/src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log.svelte b/src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log.svelte
@@ -1,22 +1,22 @@
 <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 } from '$lib/services/logging-service';
     import NavBar from '$lib/common/nav-bar/NavBar.svelte';
     import NavItem from '$lib/common/nav-bar/NavItem.svelte';
     import ContentLogElement from './content-log-element.svelte';
-	import AgentQueueChangeElement from './agent-queue-change-element.svelte';
+	import AgentQueueLogElement from './agent-queue-log-element.svelte';
 
     const contentLogTab = 1;
     const agentQueueLogTab = 2;
 
     /** @type {import('$types').ConversationContentLogModel[]} */
     export let contentLogs = [];
 
-    /** @type {import('$types').AgentQueueChangedModel[]} */
-    export let agentQueueChangeLogs = [];
+    /** @type {import('$types').AgentQueueLogModel[]} */
+    export let agentQueueLogs = [];
 
     /** @type {() => void} */
     export let closeWindow;
@@ -26,6 +26,7 @@
 
     /** @type {any[]} */
     let scrollbars = [];
+    /** @type {number} */
     let selectedTab = contentLogTab;
 
     const options = {
@@ -54,6 +55,10 @@
 		refresh();
 	});
 
+    beforeUpdate(() => {
+        // console.log('before update: ', tabs);
+    });
+
     afterUpdate(() => {
         refresh();
     });
@@ -84,6 +89,12 @@
         cleanLogs();
         cleanScreen && cleanScreen();
     }
+
+    
+    /** @param {number} tab */
+    function handleTabClick(tab) {
+        selectedTab = tab;
+    }
 </script>
 
 <div class="chat-log">
@@ -109,18 +120,18 @@
             </div>
         </div>
 
-        <div class="content-log-scrollbar log-list padding-side log-content" class:hide={selectedTab != contentLogTab}>
+        <div class="content-log-scrollbar log-list padding-side log-content" class:hide={selectedTab !== contentLogTab}>
             <ul>
                 {#each contentLogs as log}
                     <ContentLogElement data={log} />
                 {/each}
             </ul>
         </div>
 
-        <div class="queue-change-log-scrollbar log-list log-content" class:hide={selectedTab != agentQueueLogTab}>
+        <div class="queue-change-log-scrollbar log-list log-content" class:hide={selectedTab !== agentQueueLogTab}>
             <ul>
-                {#each agentQueueChangeLogs as log}
-                    <AgentQueueChangeElement data={log} />
+                {#each agentQueueLogs as log}
+                    <AgentQueueLogElement data={log} />
                 {/each}
             </ul>
         </div>
@@ -131,17 +142,19 @@
                     navBtnId={'content-log-tab'}
                     dataBsTarget={'#content-log-tab-pane'}
                     ariaControls={'content-log-tab-pane'}
-                    active={selectedTab == contentLogTab}
                     navBtnText={'Content Log'}
-                    onClick={() => selectedTab = contentLogTab}
+                    disabled={selectedTab === contentLogTab}
+                    active={selectedTab === contentLogTab}
+                    onClick={() => handleTabClick(contentLogTab)}
                 />
                 <NavItem
                     navBtnId={'agent-queue-log-tab'}
                     dataBsTarget={'#agent-queue-log-tab-pane'}
                     ariaControls={'agent-queue-log-tab-pane'}
-                    active={selectedTab == agentQueueLogTab}
                     navBtnText={'Agent Queue'}
-                    onClick={() => selectedTab = agentQueueLogTab}
+                    disabled={selectedTab === agentQueueLogTab}
+                    active={selectedTab === agentQueueLogTab}
+                    onClick={() => handleTabClick(agentQueueLogTab)}
                 />
             </NavBar>
         </div>
diff --git a/src/routes/chat/[agentId]/[conversationId]/stateLogs/state-log.svelte b/src/routes/chat/[agentId]/[conversationId]/stateLogs/state-log.svelte
@@ -13,10 +13,10 @@
     const msgStateLogTab = 2;
 
     /** @type {any[]} */
-    export let stateLogs = [];
+    export let convStateLogs = [];
 
     /** @type {any[]} */
-    export let stateChangeLogs = [];
+    export let msgStateLogs = [];
 
     /** @type {() => void} */
     export let closeWindow;
@@ -42,7 +42,7 @@
 
     onMount(async () => {
         const conversationId = $page.params.conversationId;
-        stateLogs = await GetStateLogs(conversationId);
+        convStateLogs = await GetStateLogs(conversationId);
         
         const scrollbarElements = [
             document.querySelector('.conv-state-log-scrollbar'),
@@ -77,13 +77,18 @@
     }
 
     function cleanLogs() {
-        stateLogs = [];
+        convStateLogs = [];
     }
 
     function handleCleanScreen() {
         cleanLogs();
         cleanScreen && cleanScreen();
     }
+
+    /** @param {number} tab */
+    function handleTabClick(tab) {
+        selectedTab = tab;
+    }
 </script>
 
 <div class="chat-log">
@@ -108,17 +113,17 @@
                 </button>
             </div>
         </div>
-        <div class="conv-state-log-scrollbar log-list padding-side log-content" class:hide={selectedTab != convStateLogTab}>
+        <div class="conv-state-log-scrollbar log-list padding-side log-content" class:hide={selectedTab !== convStateLogTab}>
             <ul>
-                {#each stateLogs as log}
+                {#each convStateLogs as log}
                     <ConversationStateLogElement data={log} />
                 {/each}
             </ul>
         </div>
 
-        <div class="msg-state-log-scrollbar log-list padding-side log-content" class:hide={selectedTab != msgStateLogTab}>
+        <div class="msg-state-log-scrollbar log-list padding-side log-content" class:hide={selectedTab !== msgStateLogTab}>
             <ul>
-                {#each stateChangeLogs as log}
+                {#each msgStateLogs as log}
                     <MessageStateLogElement data={log} />
                 {/each}
             </ul>
@@ -130,17 +135,19 @@
                     navBtnId={'conv-state-log-tab'}
                     dataBsTarget={'#conv-state-log-tab-pane'}
                     ariaControls={'conv-state-log-tab-pane'}
-                    active={selectedTab == convStateLogTab}
                     navBtnText={'Conversation States'}
-                    onClick={() => selectedTab = convStateLogTab}
+                    disabled={selectedTab === convStateLogTab}
+                    active={selectedTab === convStateLogTab}
+                    onClick={() => handleTabClick(convStateLogTab)}
                 />
                 <NavItem
                     navBtnId={'msg-state-log-tab'}
                     dataBsTarget={'#msg-state-log-tab-pane'}
                     ariaControls={'msg-state-log-tab-pane'}
-                    active={selectedTab == msgStateLogTab}
                     navBtnText={'Message States'}
-                    onClick={() => selectedTab = msgStateLogTab}
+                    disabled={selectedTab === msgStateLogTab}
+                    active={selectedTab === msgStateLogTab}
+                    onClick={() => handleTabClick(msgStateLogTab)}
                 />
             </NavBar>
         </div>

Original file line number	Diff line number	Diff line change
`@@ -93,9 +93,10 @@`
`93`	`93`	`border: none !important;`
`94`	`94`	`color: white !important;`
`95`	`95`	`font-weight: 500;`
	`96`	`+ font-size: 1.2em;`
`96`	`97`	`}`
`97`	`98`
`98`	`99`	`.tab-btn.active {`
`99`		`- color: var(--bs-primary) !important;`
	`100`	`+ background-color: var(--bs-primary) !important;`
`100`	`101`	`}`
`101`	`102`	`</style>`