Merge pull request #159 from iceljc/features/refine-chat-window

refine message file loading

Author: Oceania2018

src/lib/helpers/types.js

@@ -318,6 +318,8 @@ IRichContent.prototype.quick_replies;
  * @property {string} post_action_disclaimer - The message disclaimer.
  * @property {string} data - The message data.
  * @property {Date} created_at - The message sent time.
+ * @property {boolean} has_message_files
+ * @property {boolean} is_chat_message
  */
 
 /**

src/lib/services/agent-service.js

@@ -14,12 +14,16 @@ export async function getSettings() {
 /**
  * Get agent list
  * @param {import('$types').AgentFilter} filter
+ * @param {boolean} useHook
  * @returns {Promise<import('$types').PagedItems<import('$types').AgentModel>>}
  */
-export async function getAgents(filter) {
+export async function getAgents(filter, useHook = false) {
     let url = endpoints.agentListUrl;
     const response = await axios.get(url, {
-        params: filter,
+        params: {
+            ...filter,
+            useHook: useHook || false
+        },
         paramsSerializer: {
             dots: true,
             indexes: null,

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

@@ -312,21 +312,30 @@
 
 	/** @param {import('$types').ChatResponseModel} message */
 	function onMessageReceivedFromClient(message) {
-		dialogs.push(message);
+		dialogs.push({
+			...message,
+			is_chat_message: true
+		});
 		refresh();
 		text = "";
     }
 
     /** @param {import('$types').ChatResponseModel} message */
     function onMessageReceivedFromCsr(message) {
-		dialogs.push(message);
+		dialogs.push({
+			...message,
+			is_chat_message: true
+		});
 		refresh();
     }
 
     /** @param {import('$types').ChatResponseModel} message */
     function onMessageReceivedFromAssistant(message) {
 		// webSpeech.utter(message.text);
-		dialogs.push(message);
+		dialogs.push({
+			...message,
+			is_chat_message: true
+		});
 		refresh();
     }
 
@@ -997,10 +1006,12 @@
 											{#if !!message.post_action_disclaimer}
 												<RcDisclaimer content={message.post_action_disclaimer} />
 											{/if}
-											<MessageImageGallery
-												galleryStyles={'justify-content: flex-end;'}
-												fetchFiles={() => getConversationFiles(params.conversationId, message.message_id, FileSourceType.User)}
-											/>
+											{#if !!message.is_chat_message || !!message.has_message_files}
+												<MessageImageGallery
+													galleryStyles={'justify-content: flex-end;'}
+													fetchFiles={() => getConversationFiles(params.conversationId, message.message_id, FileSourceType.User)}
+												/>
+											{/if}
 										</div>
 											{#if !isLite}
 												<Dropdown>
@@ -1024,10 +1035,12 @@
 										</div>
 										<div class="msg-container">
 											<RcMessage message={message} />
-											<MessageImageGallery
-												galleryStyles={'justify-content: flex-start;'}
-												fetchFiles={() => getConversationFiles(params.conversationId, message.message_id, FileSourceType.Bot)}
-											/>
+											{#if !!message.is_chat_message || !!message.has_message_files}
+												<MessageImageGallery
+													galleryStyles={'justify-content: flex-start;'}
+													fetchFiles={() => getConversationFiles(params.conversationId, message.message_id, FileSourceType.Bot)}
+												/>
+											{/if}
 										</div>
 										{/if}
 									</div>

src/routes/page/agent/+page.svelte

@@ -44,7 +44,7 @@
 
   	function getPagedAgents() {
 		isLoading = true;
-    	getAgents(filter).then(data => {
+    	getAgents(filter, true).then(data => {
 			agents = data;
 		}).catch(() => {
 			agents = { items: [], count: 0 };

src/routes/page/agent/router/routing-flow.svelte

@@ -30,7 +30,7 @@
     const dispatch = createEventDispatcher();
     
     onMount(async () => {
-        const response = await getAgents(filter);
+        const response = await getAgents(filter, true);
         agents = response?.items || [];
 
         const container = document.getElementById("drawflow");
@@ -185,7 +185,7 @@
         includeTaskAgent = !includeTaskAgent;
         filter.type = includeTaskAgent ? "task" : "none";
         filter.type += includeStaticAgent ? ",static" : ",none";
-        const response = await getAgents(filter);
+        const response = await getAgents(filter, true);
         agents = response?.items || [];
         renderRoutingFlow();
     }
@@ -194,7 +194,7 @@
         includeStaticAgent = !includeStaticAgent;
         filter.type = includeTaskAgent ? "task" : "none";
         filter.type += includeStaticAgent ? ",static" : ",none";
-        const response = await getAgents(filter);
+        const response = await getAgents(filter, true);
         agents = response?.items || [];
         renderRoutingFlow();
     }

src/routes/page/conversation/+page.svelte

@@ -70,18 +70,23 @@
 	};
 
     onMount(async () => {
-		await loadAgentOptions();
-		loadSearchOption();
-		loadConversations();
+		isLoading = true;
+		Promise.all([
+			loadAgentOptions(),
+			loadSearchOption(),
+			loadConversations()])
+		.finally(() => {
+			isLoading = false
+		});
     });
 
 	function loadConversations() {
-		isLoading = true;
-		getPagedConversations().then(res => {
-			isLoading = false;
-		}).catch(error => {
-			isLoading = false;
-			isError = true;
+		return new Promise((resolve, reject) => {
+			getPagedConversations().then(res => {
+				resolve(res);
+			}).catch((error) => {
+				reject(error);
+			});
 		});
 	}
 
@@ -90,14 +95,21 @@
 		refresh();
 	}
 
-	async function loadAgentOptions() {
-		const agents = await getAgents({ pager: { page: 1, size: 100, count: 0 } });
-		agentOptions = agents?.items?.map(x => {
-			return {
-				id: x.id,
-				name: x.name
-			};
-		})?.sort((a, b) => a.name.localeCompare(b.name)) || [];
+	function loadAgentOptions() {
+		return new Promise((resolve, reject) => {
+			getAgents({ pager: { page: 1, size: 100, count: 0 } }).then(res => {
+				agentOptions = res?.items?.map(x => {
+					return {
+						id: x.id,
+						name: x.name
+					};
+				})?.sort((a, b) => a.name.localeCompare(b.name)) || [];
+				resolve(agentOptions);
+			}).catch((error) => {
+				agentOptions = [];
+				reject(error);
+			});
+		});
 	}
 
 	function refresh() {
@@ -209,13 +221,16 @@
 	}
 
 	function loadSearchOption() {
-		const savedOption = conversationSearchOptionStore.get();
-		searchOption = {
-			...searchOption,
-			...savedOption
-		};
-		refreshFilter();
-		handleSearchStates();
+		return new Promise((resolve, reject) => {
+			const savedOption = conversationSearchOptionStore.get();
+			searchOption = {
+				...searchOption,
+				...savedOption
+			};
+			refreshFilter();
+			handleSearchStates();
+			resolve(searchOption);
+		});
 	}
 
 	function refreshFilter() {

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

@@ -19,27 +19,8 @@
 
     onMount(async () => {
         dialogs = await GetDialogs(conversation.id);
-        loadMessageImages(dialogs);
     });
 
-    /** @param {import('$types').ChatResponseModel[]} dialogs */
-    function loadMessageImages(dialogs) {
-        if (!!!dialogs) return;
-
-        for (let idx = 0; idx < dialogs.length; idx++) {
-            const curMsg = dialogs[idx];
-            if (!USER_SENDERS.includes(curMsg?.sender?.role || '')) {
-                continue;
-            }
-
-            const prevMsg = dialogs[idx-1];
-            if (!!!prevMsg || BOT_SENDERS.includes(prevMsg?.sender?.role || '')
-                && loadFileGallery(prevMsg)) {
-                curMsg.is_load_images = true;
-            }
-        }
-    }
-
     /** 
      * @param {import('$types').ChatResponseModel} dialog
      * @returns {boolean}
@@ -89,10 +70,12 @@
                                 <p class="fw-bold">
                                     <Markdown text={dialog?.rich_content?.message?.text || dialog?.text} />
                                 </p>
-                                <MessageImageGallery
-                                    galleryClasses={'dialog-file-display'}
-                                    fetchFiles={() => getConversationFiles(conversation.id, dialog.message_id, showInRight(dialog) ? FileSourceType.User : FileSourceType.Bot)}
-                                />
+                                {#if !!dialog.has_message_files}
+                                    <MessageImageGallery
+                                        galleryClasses={'dialog-file-display'}
+                                        fetchFiles={() => getConversationFiles(conversation.id, dialog.message_id, showInRight(dialog) ? FileSourceType.User : FileSourceType.Bot)}
+                                    />
+                                {/if}
                             </div>
                             {#if dialog.message_id}
                             <div>