From 5ee76781e314cb5423e5bf9f693d48d6380c9847 Mon Sep 17 00:00:00 2001 From: Jicheng Lu Date: Tue, 1 Oct 2024 18:45:48 -0500 Subject: [PATCH 1/3] prevent duplicate chat --- src/lib/common/LiveChatEntry.svelte | 5 +- src/lib/helpers/enums.js | 2 + src/lib/helpers/utils/chat.js | 12 ---- src/lib/services/setting-service.js | 2 +- .../[conversationId]/chat-box.svelte | 63 ++++++++++++------- 5 files changed, 47 insertions(+), 37 deletions(-) diff --git a/src/lib/common/LiveChatEntry.svelte b/src/lib/common/LiveChatEntry.svelte index 3f63249c..a925580f 100644 --- a/src/lib/common/LiveChatEntry.svelte +++ b/src/lib/common/LiveChatEntry.svelte @@ -5,6 +5,7 @@ import { getSettingDetail } from '$lib/services/setting-service'; import { chatBotStore } from '$lib/helpers/store'; import { CHAT_FRAME_ID } from '$lib/helpers/constants'; + import { ChatAction } from '$lib/helpers/enums'; let chatUrl = PUBLIC_LIVECHAT_HOST; @@ -15,9 +16,9 @@ // Handle event from iframe window.onmessage = async function(e) { - if (e.data.action == 'close') { + if (e.data.action == ChatAction.Close) { chatBotStore.set({ showChatBox: false }); - } else if (e.data.action == 'open') { + } else if (e.data.action == ChatAction.Open) { chatBotStore.set({ showChatBox: true }); } }; diff --git a/src/lib/helpers/enums.js b/src/lib/helpers/enums.js index 7db32d1a..339907b8 100644 --- a/src/lib/helpers/enums.js +++ b/src/lib/helpers/enums.js @@ -101,6 +101,8 @@ const knowledgeDocSource = { export const KnowledgeDocSource = Object.freeze(knowledgeDocSource); const chatAction = { + Open: 'open', + Close: 'close', Logout: 'logout', Chat: 'chat', NewChat: 'new-chat' diff --git a/src/lib/helpers/utils/chat.js b/src/lib/helpers/utils/chat.js index 434fe190..165548df 100644 --- a/src/lib/helpers/utils/chat.js +++ b/src/lib/helpers/utils/chat.js @@ -23,16 +23,4 @@ export function addChatBoxMountEventListener(func) { func(); } }); -} - -/** - * @param {string} chatFrameId - * @param {string} text - */ -export function loadChatFrame(chatFrameId, text) { - const chatFrame = document.getElementById(chatFrameId); - if (chatFrame) { - // @ts-ignore - chatFrame.contentWindow.postMessage({ action: "chat", text: text }, "*"); - } } \ No newline at end of file diff --git a/src/lib/services/setting-service.js b/src/lib/services/setting-service.js index a59b68df..8062a2f5 100644 --- a/src/lib/services/setting-service.js +++ b/src/lib/services/setting-service.js @@ -15,7 +15,7 @@ export async function getSettings() { /** * * @param {string} id - * @returns {Promise} + * @returns {Promise} */ export async function getSettingDetail(id) { let url = replaceUrl(endpoints.settingDetailUrl, {id: id}); diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte index 3f6ddec7..7da062ba 100644 --- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte +++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte @@ -157,7 +157,7 @@ let loadChatUtils = false; let disableSpeech = false; let isLoading = false; - + let isCreatingNewConv = false; $: { const editor = lastBotMsg?.rich_content?.editor || ''; @@ -200,35 +200,54 @@ window.addEventListener('message', async e => { if (e.data.action === ChatAction.Logout) { - resetLocalStorage(true); - return; + handleLogoutAction(); + } else if (e.data.action === ChatAction.NewChat) { + await handleNewChatAction(e); + } else if (e.data.action === ChatAction.Chat) { + handleChatAction(e); } + }); + }); - if (e.data.action === ChatAction.NewChat) { - const conv = await createNewConversation(); - if (!!e.data.text && !isThinking && !isSendingMsg) { - isLoading = true; - sendChatMessage(e.data.text, e.data.data || null, conv.id).then(() => { - redirectToNewConversation(conv); - isLoading = false; - openFrame(); - }); - } - return; - } + function handleLogoutAction() { + resetLocalStorage(true); + } - if (e.data.action === ChatAction.Chat && !!e.data.text && !isThinking && !isSendingMsg) { - sendChatMessage(e.data.text, e.data.data || null).then(() => { + /** @param {any} e */ + async function handleNewChatAction(e) { + if (!isCreatingNewConv && !isThinking && !isSendingMsg) { + isCreatingNewConv = true; + const conv = await createNewConversation(); + isCreatingNewConv = false; + + if (conv && !!e.data.text) { + isLoading = true; + sendChatMessage(e.data.text, e.data.data || null, conv.id).then(() => { + redirectToNewConversation(conv); + isLoading = false; + openFrame(); + }).catch(() => { + isLoading = false; openFrame(); }); - return; } - }); - }); + } + } + + /** @param {any} e */ + function handleChatAction(e) { + if (!!e.data.text && !isThinking && !isSendingMsg) { + sendChatMessage(e.data.text, e.data.data || null).then(() => { + openFrame(); + }).catch(() => { + openFrame(); + }); + } + } function openFrame() { if (window.location != window.parent.location) { - window.parent.postMessage({ action: "open" }, "*"); + window.parent.postMessage({ action: ChatAction.Open }, "*"); } } @@ -749,7 +768,7 @@ } }); } else { - window.parent.postMessage({ action: "close" }, "*"); + window.parent.postMessage({ action: ChatAction.Close }, "*"); } } From 0f51dacf57d9dba71b618762a673e77182a60fe3 Mon Sep 17 00:00:00 2001 From: Jicheng Lu Date: Tue, 1 Oct 2024 18:48:30 -0500 Subject: [PATCH 2/3] minor change --- .../chat/[agentId]/[conversationId]/chat-box.svelte | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte index 7da062ba..f8694fdb 100644 --- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte +++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte @@ -508,6 +508,8 @@ autoScrollLog = true; clearInstantLogs(); renewUserSentMessages(msgText); + const agentId = params.agentId; + const convId = conversationId || params.conversationId; let postback = data?.postback; if (!postback) { @@ -530,7 +532,7 @@ if (files?.length > 0 && !!!messageData.inputMessageId) { const filePayload = buildFilePayload(files); return new Promise((resolve, reject) => { - uploadConversationFiles(params.agentId, conversationId || params.conversationId, files).then(resMessageId => { + uploadConversationFiles(agentId, convId, files).then(resMessageId => { messageData = { ...messageData, inputMessageId: resMessageId }; if (!!filePayload) { messageData = { @@ -543,7 +545,7 @@ }; } - sendMessageToHub(params.agentId, conversationId || params.conversationId, msgText, messageData).then(res => { + sendMessageToHub(agentId, convId, msgText, messageData).then(res => { resolve(res); }).catch(err => { reject(err); @@ -556,7 +558,7 @@ } else { return new Promise((resolve, reject) => { if (!!messageData?.inputMessageId) { - getConversationFiles(params.conversationId, messageData.inputMessageId, FileSourceType.User).then(retFiles => { + getConversationFiles(convId, messageData.inputMessageId, FileSourceType.User).then(retFiles => { const filePayload = buildFilePayload(retFiles); if (!!filePayload) { messageData = { @@ -569,7 +571,7 @@ }; } - sendMessageToHub(params.agentId, conversationId || params.conversationId, msgText, messageData).then(res => { + sendMessageToHub(agentId, convId, msgText, messageData).then(res => { resolve(res); }).catch(err => { reject(err); @@ -579,7 +581,7 @@ }); }); } else { - sendMessageToHub(params.agentId, conversationId || params.conversationId, msgText, messageData).then(res => { + sendMessageToHub(agentId, convId, msgText, messageData).then(res => { resolve(res); }).catch(err => { reject(err); From e1503bf9b5b6428854beef6d2af153518dea4f16 Mon Sep 17 00:00:00 2001 From: Jicheng Lu Date: Tue, 1 Oct 2024 18:51:59 -0500 Subject: [PATCH 3/3] refine code --- .../[conversationId]/chat-box.svelte | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte index f8694fdb..24b771a5 100644 --- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte +++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte @@ -198,11 +198,11 @@ refresh(); autoScrollLog = false; - window.addEventListener('message', async e => { + window.addEventListener('message', e => { if (e.data.action === ChatAction.Logout) { handleLogoutAction(); } else if (e.data.action === ChatAction.NewChat) { - await handleNewChatAction(e); + handleNewChatAction(e); } else if (e.data.action === ChatAction.Chat) { handleChatAction(e); } @@ -214,23 +214,25 @@ } /** @param {any} e */ - async function handleNewChatAction(e) { + function handleNewChatAction(e) { if (!isCreatingNewConv && !isThinking && !isSendingMsg) { isCreatingNewConv = true; - const conv = await createNewConversation(); - isCreatingNewConv = false; - - if (conv && !!e.data.text) { - isLoading = true; - sendChatMessage(e.data.text, e.data.data || null, conv.id).then(() => { - redirectToNewConversation(conv); - isLoading = false; - openFrame(); - }).catch(() => { - isLoading = false; - openFrame(); - }); - } + createNewConversation().then(conv => { + isCreatingNewConv = false; + if (conv && !!e.data.text) { + isLoading = true; + sendChatMessage(e.data.text, e.data.data || null, conv.id).then(() => { + redirectToNewConversation(conv); + isLoading = false; + openFrame(); + }).catch(() => { + isLoading = false; + openFrame(); + }); + } + }).catch(() => { + isCreatingNewConv = false; + }); } }