From 088480813eef3bd9609010110020b48fa5f09fb2 Mon Sep 17 00:00:00 2001 From: Jicheng Lu <103353@smsassist.com> Date: Mon, 8 Jul 2024 17:35:36 -0500 Subject: [PATCH] refine message file loading --- src/lib/helpers/types.js | 2 + src/lib/services/agent-service.js | 8 ++- .../[conversationId]/chat-box.svelte | 35 +++++++---- src/routes/page/agent/+page.svelte | 2 +- .../page/agent/router/routing-flow.svelte | 6 +- src/routes/page/conversation/+page.svelte | 63 ++++++++++++------- .../[conversationId]/conv-dialogs.svelte | 29 ++------- 7 files changed, 81 insertions(+), 64 deletions(-) diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js index 0042fc50..fab78da0 100644 --- a/src/lib/helpers/types.js +++ b/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 */ /** diff --git a/src/lib/services/agent-service.js b/src/lib/services/agent-service.js index 591b8402..6264f966 100644 --- a/src/lib/services/agent-service.js +++ b/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>} */ -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, diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte index 28181e1e..eacfdb74 100644 --- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte +++ b/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} {/if} - getConversationFiles(params.conversationId, message.message_id, FileSourceType.User)} - /> + {#if !!message.is_chat_message || !!message.has_message_files} + getConversationFiles(params.conversationId, message.message_id, FileSourceType.User)} + /> + {/if} {#if !isLite} @@ -1024,10 +1035,12 @@
- getConversationFiles(params.conversationId, message.message_id, FileSourceType.Bot)} - /> + {#if !!message.is_chat_message || !!message.has_message_files} + getConversationFiles(params.conversationId, message.message_id, FileSourceType.Bot)} + /> + {/if}
{/if} diff --git a/src/routes/page/agent/+page.svelte b/src/routes/page/agent/+page.svelte index ac144be3..d1972e04 100644 --- a/src/routes/page/agent/+page.svelte +++ b/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 }; diff --git a/src/routes/page/agent/router/routing-flow.svelte b/src/routes/page/agent/router/routing-flow.svelte index 0ae11790..df0eff4a 100644 --- a/src/routes/page/agent/router/routing-flow.svelte +++ b/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(); } diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte index d5ac4a66..21452b1a 100644 --- a/src/routes/page/conversation/+page.svelte +++ b/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() { diff --git a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte index 45edb42c..d97823b2 100644 --- a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte +++ b/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 @@

- getConversationFiles(conversation.id, dialog.message_id, showInRight(dialog) ? FileSourceType.User : FileSourceType.Bot)} - /> + {#if !!dialog.has_message_files} + getConversationFiles(conversation.id, dialog.message_id, showInRight(dialog) ? FileSourceType.User : FileSourceType.Bot)} + /> + {/if} {#if dialog.message_id}