refine states loading

Author: Jicheng Lu

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,7 +165,7 @@
                 </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>

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;
 
@@ -161,7 +158,6 @@
 
         if (newLogs.length > 0) {
             convStateLogs = [...newLogs, ...convStateLogs];
-            lastestStateLog = convStateLogs.slice(-1)[0];
         }
     }
     

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);
     });
 
     /**