refine states loading

src/lib/helpers/types/conversationTypes.js

@@ -10,6 +10,7 @@
  * @property {string?} [channel] - The conversation channel.
  * @property {string?} [status] - The conversation status.
  * @property {string?} [taskId] - The task id.
+ * @property {boolean?} [isLoadLatestStates]
  * @property {import('$commonTypes').KeyValuePair[]} [states] - The conversation status.
  * @property {string[]} [tags] - The tags.
  */
@@ -24,7 +25,7 @@
  * @property {string} channel - The conversation status.
  * @property {string} [task_id] - Optional task id.
  * @property {string} status - The conversation status.
- * @property {Object[]} states - The conversation states.
+ * @property {Object} states - The conversation states.
  * @property {string[]} tags - The conversation tags.
  * @property {Date} updated_time - The conversation updated time.
  * @property {Date} created_time - The conversation created time.
@@ -145,6 +146,7 @@ IRichContent.prototype.quick_replies;
  * @property {RichContent} rich_content - Rich content.
  * @property {string} post_action_disclaimer - The message disclaimer.
  * @property {string} data - The message data.
+ * @property {Object} states
  * @property {Date} created_at - The message sent time.
  * @property {boolean} has_message_files
  * @property {boolean} is_chat_message
@@ -180,6 +182,7 @@ IRichContent.prototype.quick_replies;
 
 /**
  * @typedef {Object} MessageStateLogModel
+ * @property {string?} uid
  * @property {string} conversation_id - The conversation id.
  * @property {string} message_id - The message id.
  * @property {string} before_value - The value before change.
@@ -193,6 +196,7 @@ IRichContent.prototype.quick_replies;
 
 /**
  * @typedef {Object} AgentQueueLogModel
+ * @property {string?} uid
  * @property {string} conversation_id - The conversation id.
  * @property {string} log - The log content.
  * @property {Date} created_at - The log sent time.

src/lib/services/conversation-service.js

@@ -19,11 +19,16 @@ export async function newConversation(agentId, config) {
 /**
  * Get conversation detail
  * @param {string} id
+ * @param {boolean} isLoadStates
  * @returns {Promise<import('$conversationTypes').ConversationModel>}
  */
-export async function getConversation(id) {
+export async function getConversation(id, isLoadStates = false) {
     let url = replaceUrl(endpoints.conversationDetailUrl, {conversationId: id});
-    const response = await axios.get(url);
+    const response = await axios.get(url, {
+        params: {
+            isLoadStates: isLoadStates
+        }
+    });
     return response.data;
 }
 

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

@@ -157,7 +157,8 @@
 	/** @type {import('$conversationTypes').ConversationStateLogModel[]} */
 	let convStateLogs = [];
 
-	/** @type {import('$conversationTypes').ConversationStateLogModel?} */
+	// /** @type {import('$conversationTypes').ConversationStateLogModel?} */
+	/** @type {Object?} */
 	let latestStateLog;
 
 	/** @type {import('$conversationTypes').MessageStateLogModel[]} */
@@ -219,10 +220,11 @@
 
 	onMount(async () => {
 		disableSpeech = navigator.userAgent.includes('Firefox');
-		conversation = await getConversation(params.conversationId);
+		conversation = await getConversation(params.conversationId, true);
 		dialogs = await getDialogs(params.conversationId, dialogCount);
 		conversationUser = await getConversationUser(params.conversationId);
 		selectedTags = conversation?.tags || [];
+		latestStateLog = conversation?.states;
 		initUserSentMessages(dialogs);
 		initChatView();
 		handlePaneResize();
@@ -469,7 +471,6 @@
 	/** @param {import('$conversationTypes').ChatResponseModel} message */
 	function onMessageReceivedFromClient(message) {
 		autoScrollLog = true;
-		clearInstantLogs();
 		dialogs.push({
 			...message,
 			is_chat_message: true
@@ -484,6 +485,7 @@
 			...message,
 			is_chat_message: true
 		});
+		latestStateLog = message.states;
 		refresh();
     }
 
@@ -504,7 +506,6 @@
 	function onConversationStateLogGenerated(log) {
 		if (!isLoadPersistLog) return;
 
-		latestStateLog = log;
 		convStateLogs.push({ ...log, uid: uuidv4() });
 		convStateLogs = convStateLogs.map(x => { return { ...x }; });
 	}
@@ -514,15 +515,15 @@
 		if (!isLoadInstantLog || log == null) return;
 
 		msgStateLogs.push({ ...log });
-		msgStateLogs = msgStateLogs.map(x => { return { ...x }; });
+		msgStateLogs = msgStateLogs.map(x => { return { ...x, uid: uuidv4() }; });
 	}
 
 	/** @param {import('$conversationTypes').AgentQueueLogModel} log */
 	function onAgentQueueChanged(log) {
 		if (!isLoadInstantLog || log == null) return;
 
 		agentQueueLogs.push({ ...log });
-		agentQueueLogs = agentQueueLogs.map(x => { return { ...x }; });
+		agentQueueLogs = agentQueueLogs.map(x => { return { ...x, uid: uuidv4() }; });
 	}
 
 	/** @param {import('$conversationTypes').ConversationSenderActionModel} data */
@@ -1053,7 +1054,6 @@
 
 			targetIdx = convStateLogs.findIndex(x => x.message_id === messageId);
 			convStateLogs = convStateLogs.filter((x, idx) => idx < targetIdx);
-			latestStateLog = convStateLogs.slice(-1)[0];
 		}
 	}
 
@@ -1483,7 +1483,7 @@
 			<InstantLog
 				bind:msgStateLogs={msgStateLogs}
 				bind:agentQueueLogs={agentQueueLogs}
-				latestStateLog={latestStateLog?.message_id === lastMsg?.message_id ? latestStateLog : null}
+				latestStateLog={latestStateLog}
 				agent={agent}
 				closeWindow={() => closeInstantLog()}
 			/>
@@ -1917,7 +1917,6 @@
 			<PersistLog
 				bind:contentLogs={contentLogs}
 				bind:convStateLogs={convStateLogs}
-				bind:lastestStateLog={latestStateLog}
 				bind:autoScroll={autoScrollLog}
 				closeWindow={() => closePersistLog()}
 				cleanScreen={() => cleanPersistLogScreen()}

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

@@ -17,7 +17,7 @@
     /** @type {any[]} */
     export let agentQueueLogs = [];
 
-    /** @type {import('$conversationTypes').ConversationStateLogModel?} */
+    /** @type {Object?} */
     export let latestStateLog = null;
 
     /** @type {() => void} */
@@ -138,7 +138,7 @@
                 </div>
                 <div class="agent-queue-log-scrollbar padding-side">
                     <ul>
-                        {#each agentQueueLogs as log}
+                        {#each agentQueueLogs as log (log.uid)}
                             <AgentQueueLogElement data={log} />
                         {/each}
                     </ul>
@@ -165,14 +165,14 @@
                 </div>
                 <div class="msg-state-log-scrollbar padding-side" >
                     <ul>
-                        {#each msgStateLogs as log}
+                        {#each msgStateLogs as log (log.uid)}
                             <MessageStateLogElement data={log} />
                         {/each}
                     </ul>
                 </div>
             </div>
             {/if}
-            {#if latestStateLog}
+            {#if latestStateLog && Object.keys(latestStateLog)?.length > 0}
             <div
                 class="log-list instant-log-section instant-log-sec-md"
                 in:fade={{ duration: inDuration }}

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

@@ -2,14 +2,14 @@
 	import { formatObject } from '$lib/helpers/utils/common';
   import JSONTree from 'svelte-json-tree';
 
-  /** @type {import('$conversationTypes').ConversationStateLogModel?} */
+  /** @type {Object?} */
   export let data;
 </script>
 
 <div class="log-element state-log-item">
   <div class="log-content">
     <JSONTree
-      value={formatObject(data?.states)}
+      value={formatObject(data)}
       defaultExpandedLevel={1}
       --json-tree-property-color="white"
       --json-tree-label-color="white"

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

@@ -33,9 +33,6 @@
     /** @type {import('$conversationTypes').ConversationStateLogModel[]} */
     export let convStateLogs = [];
 
-    /** @type {import('$conversationTypes').ConversationStateLogModel?} */
-    export let lastestStateLog = null;
-
     /** @type {boolean} */
     export let autoScroll = false;
 
@@ -49,7 +46,8 @@
     let scrollbars = [];
     /** @type {number} */
     let selectedTab = contentLogTab;
-    let tabChanged = false;
+    /** @type {boolean} */
+    let pauseChange = false;
 
     /** @type {import('$conversationTypes').ConversationLogFilter} */
     let contentLogFilter = { size: 20, startTime: utcNow };
@@ -77,9 +75,9 @@
 	});
 
     beforeUpdate(() => {
-        if (tabChanged) {
+        if (pauseChange) {
             autoScroll = false;
-            tabChanged = false;
+            pauseChange = false;
         }
     });
 
@@ -117,7 +115,7 @@
             scrollbar.on("scroll", async (e) => {
                 const curScrollTop = e.elements().scrollOffsetElement.scrollTop;
                 if (curScrollTop <= 1) {
-                    tabChanged = true;
+                    pauseChange = true;
                     if (item.type === contentLogTab) {
                         await getChatContentLogs();
                     } else if (item.type === conversationStateLogTab) {
@@ -161,7 +159,6 @@
 
         if (newLogs.length > 0) {
             convStateLogs = [...newLogs, ...convStateLogs];
-            lastestStateLog = convStateLogs.slice(-1)[0];
         }
     }
 
@@ -180,7 +177,7 @@
         if (selectedTab === selected) {
             return;
         }
-        tabChanged = true;
+        pauseChange = true;
         selectedTab = selected;
     }
 </script>

src/routes/page/agent/reporting/+page.svelte → src/routes/page/agent/reporting/[reportType]/+page.svelte

@@ -1,29 +1,49 @@
 <script>
-    import { onMount, onDestroy } from 'svelte';
+    import { onMount, onDestroy, afterUpdate } from 'svelte';
+    import { derived } from 'svelte/store';
     import { page } from '$app/stores';
     import { _ } from 'svelte-i18n';
     import { Card, CardBody, Col, Row } from '@sveltestrap/sveltestrap';
 	import HeadTitle from "$lib/common/HeadTitle.svelte";
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import { globalMenuStore } from '$lib/helpers/store';
+
 
     /** @type {any} */
-    let unsubscriber;
+    let menuUnsubscribe;
+
+    /** @type {string?} */
+    let label = '';
+
+    /** @type {string} */
+    let curSlug = '';
+
+    const slug = derived(page, $page => $page.params.reportType);
+
+    const contentSubscribe = slug.subscribe(value => {
+        if (curSlug && curSlug !== value) {
+            location.reload();
+        }
+        curSlug = value;
+    });
 
     onMount(async () => {
-        unsubscriber = globalMenuStore.subscribe((/** @type {import('$pluginTypes').PluginMenuDefModel[]} */ menu) => {
+        menuUnsubscribe = globalMenuStore.subscribe((/** @type {import('$pluginTypes').PluginMenuDefModel[]} */ menu) => {
             const url = getPathUrl();
-            let data = menu.find(x => x.link === url)?.embeddingInfo || null;
-            if (!data) {
-                const found = menu.find(x => !!x.subMenu?.find(y => y.link === url));
-                data = found?.subMenu?.find(x => x.link === url)?.embeddingInfo || null;
+            let found = menu.find(x => x.link === url);
+            label = found?.label || null;
+            if (!found?.embeddingInfo) {
+                const subFound = menu.find(x => !!x.subMenu?.find(y => y.link === url));
+                found = subFound?.subMenu?.find(x => x.link === url);
+                label = found?.label || null;
             }
-            embed(data);
+            embed(found?.embeddingInfo || null);
         });
     });
 
     onDestroy(() => {
-        unsubscriber?.();
+        menuUnsubscribe?.();
+        contentSubscribe?.();
     });
 
 
@@ -64,8 +84,8 @@
 	};
 </script>
 
-<HeadTitle title="{$_('Reporting')}" />
-<Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Reporting')}" />
+<HeadTitle title="{$_(label || 'Reporting')}" />
+<Breadcrumb title="{$_('Agent')}" pagetitle="{$_(label || 'Reporting')}" />
 
 <Row>
 	<Col lg="12">

src/routes/page/conversation/[conversationId]/+page.svelte

@@ -17,7 +17,7 @@
     let conversation;
 
     onMount(async () => {
-        conversation = await getConversation(params.conversationId);
+        conversation = await getConversation(params.conversationId, true);
     });  
 
     function handleConversationDeletion() {
@@ -54,7 +54,12 @@
 </Row>
 <Row>
     <div class="mb-4">
-        <Button class="btn btn-danger btn-hover rounded" on:click={() => handleConversationDeletion()}><i class="mdi mdi-delete"></i>{$_('Delete Conversation')}</Button>
+        <Button
+            class="btn btn-danger btn-hover rounded"
+            on:click={() => handleConversationDeletion()}
+        >
+            <i class="mdi mdi-delete"></i>{$_('Delete Conversation')}
+        </Button>
     </div>
 </Row>
 {/if}

src/routes/page/conversation/[conversationId]/conv-dialogs.svelte

@@ -14,6 +14,7 @@
 
     const maxTextLength = 4096;
     const duration = 1500;
+    const dialogCount = 50;
 
     /** @type {import('$conversationTypes').ChatResponseModel[]} */
     let dialogs = [];
@@ -29,7 +30,7 @@
     export let conversation;
 
     onMount(async () => {
-        dialogs = await getDialogs(conversation.id);
+        dialogs = await getDialogs(conversation.id, dialogCount);
     });
 
     /** 

svelte.config.js

@@ -49,7 +49,7 @@ const config = {
 				"/page/agent",
 				"/page/agent/router",
 				"/page/agent/evaluator",
-				"/page/agent/reporting",
+				"/page/agent/reporting/[reportType]",
 				"/page/agent/[agentId]",
 				"/page/agent/[agentId]/build",
 				"/page/agent/[agentId]/train",