add agent queue changed event

Author: iceljc

src/lib/helpers/types.js

@@ -309,6 +309,13 @@ IRichContent.prototype.text;
  * @property {Date} created_at - The log sent time.
  */
 
+/**
+ * @typedef {Object} AgentQueueChangedModel
+ * @property {string} conversation_id - The conversation id.
+ * @property {string} log - The log content.
+ * @property {Date} created_at - The log sent time.
+ */
+
 /** 
  * Conversation states added by user
  * 
@@ -406,6 +413,13 @@ IRichContent.prototype.text;
  * @param {StateChangeModel} log
  */
 
+/** 
+ * Agent queue changed log
+ * 
+ * @callback OnAgentQueueChanged
+ * @param {AgentQueueChangedModel} log
+ */
+
 /** 
  * Conversation sender action
  * 

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

@@ -386,6 +386,11 @@
         .state-log-list {
             height: 65vh;
         }
+
+        .queue-change-log-list {
+            width: 100%;
+            height: 70px;
+        }
 
         .log-list {
             .log-element {
@@ -456,6 +461,18 @@
                 }
             }
 
+            .queue-change-container {
+                margin-top: 0px;
+                margin-bottom: 0px;
+
+                .log-content {
+                    text-align: center;
+                    font-size: 17px;
+                    margin-top: 2px;
+                    margin-bottom: 2px;
+                }
+            }
+
             .state-log-item {
                 margin-top: 5px;
                 margin-bottom: 10px;

src/lib/services/signalr-service.js

@@ -30,6 +30,9 @@ export const signalr = {
   /** @type {import('$types').OnStateChangeGenerated} */
   onStateChangeGenerated: () => {},
 
+  /** @type {import('$types').OnAgentQueueChanged} */
+  onAgentQueueChanged: () => {},
+
   /** @type {import('$types').OnSenderActionGenerated} */
   onSenderActionGenerated: () => {},
 
@@ -111,6 +114,13 @@ export const signalr = {
       }
     });
 
+    connection.on('OnAgentQueueChanged', (log) => {
+      const jsonData = JSON.parse(log);
+      if (conversationId === jsonData?.conversation_id) {
+        this.onAgentQueueChanged(jsonData);
+      }
+    });
+
     connection.on('OnSenderActionGenerated', (data) => {
       if (conversationId === data?.conversation_id) {
         this.onSenderActionGenerated(data);

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

@@ -84,9 +84,12 @@
 	/** @type {import('$types').ConversationStateLogModel[]} */
 	let stateLogs = [];
 
-	/** @type {import('$types').StateChangeLogModel[]} */
+	/** @type {import('$types').StateChangeModel[]} */
 	let stateChangeLogs = [];
 
+	/** @type {import('$types').AgentQueueChangedModel[]} */
+	let agentQueueChangeLogs = [];
+
 	/** @type {import('$types').UserStateDetailModel[]} */
 	let userAddStates = [];
 
@@ -113,6 +116,7 @@
 		signalr.onConversationContentLogGenerated = onConversationContentLogGenerated;
 		signalr.onConversationStateLogGenerated = onConversationStateLogGenerated;
 		signalr.onStateChangeGenerated = onStateChangeGenerated;
+		signalr.onAgentQueueChanged = onAgentQueueChanged;
 		signalr.onSenderActionGenerated = onSenderActionGenerated;
 		signalr.onConversationMessageDeleted = onConversationMessageDeleted;
 		await signalr.start(params.conversationId);
@@ -271,6 +275,14 @@
 		stateChangeLogs = stateChangeLogs.map(x => { return { ...x }; });
 	}
 
+	/** @param {import('$types').AgentQueueChangedModel} log */
+	function onAgentQueueChanged(log) {
+		if (!isLoadContentLog || log == null) return;
+
+		agentQueueChangeLogs.push({ ...log });
+		agentQueueChangeLogs = agentQueueChangeLogs.map(x => { return { ...x }; });
+	}
+
 	/** @param {import('$types').ConversationSenderActionModel} data */
 	function onSenderActionGenerated(data) {
 		if (data?.sender_action == SenderAction.TypingOn) {
@@ -300,7 +312,7 @@
 	 */
     function sendChatMessage(msgText, data = null) {
 		isSendingMsg = true;
-		stateChangeLogs = [];
+		clearEventLogs();
 		renewUserSentMessages(msgText);
 
 		const postback = buildPostbackMessage(dialogs, data?.payload || msgText, data?.truncateMsgId);
@@ -558,7 +570,7 @@
 
 	/** @param {string} messageId */
 	async function handleDeleteMessage(messageId) {
-		stateChangeLogs = [];
+		clearEventLogs();
 		await deleteConversationMessage(params.conversationId, messageId);
 	}
 
@@ -687,6 +699,11 @@
 	function openFullScreen() {
 		window.open($page.url.pathname);
 	}
+
+	function clearEventLogs() {
+		stateChangeLogs = [];
+		agentQueueChangeLogs = [];
+	}
 </script>
 
 
@@ -933,6 +950,7 @@
 		<Pane size={30} minSize={20} maxSize={50}>
 			<ContentLog
 				bind:contentLogs={contentLogs}
+				bind:agentQueueChangeLogs={agentQueueChangeLogs}
 				closeWindow={toggleContentLog}
 				cleanScreen={cleanContentLogScreen}
 			/>

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

@@ -0,0 +1,12 @@
+<script>
+
+    /** @type {any} */
+    export let data;
+
+</script>
+
+<div class="log-element queue-change-container">
+    <div class="log-content queue-change-content">
+        <span class="text-warning">{data?.log}</span>
+    </div>
+</div>

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

@@ -5,18 +5,22 @@
 	import ContentLogElement from './content-log-element.svelte';
 	import { page } from '$app/stores';
 	import { GetContentLogs } from '$lib/services/logging-service';
+	import AgentQueueChangeElement from './agent-queue-change-element.svelte';
 
     /** @type {import('$types').ConversationContentLogModel[]} */
     export let contentLogs = [];
 
+    /** @type {import('$types').AgentQueueChangedModel[]} */
+    export let agentQueueChangeLogs = [];
+
     /** @type {() => void} */
     export let closeWindow;
 
     /** @type {() => void} */
     export let cleanScreen;
 
-    // @ts-ignore
-    let scrollbar;
+    /** @type {any[]} */
+    let scrollbars = [];
 
     const options = {
 		scrollbars: {
@@ -34,8 +38,14 @@
         const conversationId = $page.params.conversationId;
         contentLogs = await GetContentLogs(conversationId);
 
-		const scrollElement = document.querySelector('.content-log-scrollbar');
-		scrollbar = OverlayScrollbars(scrollElement, options);
+        const scrollbarElements = [
+            document.querySelector('.content-log-scrollbar'),
+            document.querySelector('.queue-change-log-scrollbar')
+        ].filter(Boolean);
+        scrollbarElements.forEach(elem => {
+            scrollbars = [ ...scrollbars, OverlayScrollbars(elem, options) ];
+        });
+
 		refresh();
 	});
 
@@ -48,10 +58,13 @@
     });
 
     async function refresh() {
-        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);
+        });
     }
     
     function cleanLogs() {
@@ -67,20 +80,33 @@
 <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={() => handleCleanScreen()}
-            >
-                <i class="bx bx-trash"></i>
-            </button>
-            <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>
+                <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 class="queue-change-log-scrollbar queue-change-log-list log-list">
+                <ul>
+                    {#each agentQueueChangeLogs as log}
+                        <AgentQueueChangeElement data={log} />
+                    {/each}
+                </ul>
+            </div>
+
+            <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>
         <div class="content-log-scrollbar content-log-list log-list padding-side">
             <ul>

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

@@ -27,8 +27,6 @@
             text = `(active rounds: ${activeRounds})`;
         } else if (activeRounds == 1) {
             text = `(active round: ${activeRounds})`;
-        } else {
-            text = `(active rounds: infinity)`;
         }
 
         return text;
@@ -44,17 +42,21 @@
             <div class="value">
                 {`${data?.before_value || 'unknown'}`}
             </div>
+            {#if !!beforeActiveRoundText}
             <div class="active-rounds">
                 {`${beforeActiveRoundText}`}
             </div>
+            {/if}
         </div>
         <div class="state-value text-warning">
             <div class="value">
                 {`${data?.after_value || 'unknown'}`}
             </div>
+            {#if !!afterActiveRoundText}
             <div class="active-rounds">
                 {`${afterActiveRoundText}`}
             </div>
+            {/if}
         </div>
     </div>
 </div>