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

refine message files

Author: Oceania2018

src/lib/helpers/types.js

@@ -408,7 +408,8 @@ IRichContent.prototype.quick_replies;
  * Conversation send message data
  * 
  * @typedef {Object} MessageData
- * @property {string?} [truncateMsgId] - The message id to truncate.
+ * @property {string?} [truncateMsgId] - The truncated message.
+ * @property {string?} [inputMessageId] - The input message.
  * @property {string[]?} [states] - The states input by user.
  * @property {Postback?} [postback] - The parent message id.
  * @property {string?} [payload] - The payload message.

src/lib/services/api-endpoints.js

@@ -46,6 +46,7 @@ export const endpoints = {
     conversationUserUrl: `${host}/conversation/{conversationId}/user`,
     dialogsUrl: `${host}/conversation/{conversationId}/dialogs`,
     conversationMessageDeletionUrl: `${host}/conversation/{conversationId}/message/{messageId}`,
+    fileUploadUrl: `${host}/agent/{agentId}/conversation/{conversationId}/upload`,
 
     // LLM provider
     llmProvidersUrl: `${host}/llm-providers`,

src/lib/services/conversation-service.js

@@ -87,9 +87,8 @@ export async function GetDialogs(conversationId) {
  * @param {string} conversationId - The conversation id
  * @param {string} message - The text message sent to CSR
  * @param {import('$types').MessageData?} data - Additional data
- * @param {any[]} files - The chat files
  */
-export async function sendMessageToHub(agentId, conversationId, message, data = null, files = []) {
+export async function sendMessageToHub(agentId, conversationId, message, data = null) {
     let url = replaceUrl(endpoints.conversationMessageUrl, {
         agentId: agentId,
         conversationId: conversationId
@@ -98,10 +97,9 @@ export async function sendMessageToHub(agentId, conversationId, message, data =
     const totalStates = !!data?.states && data?.states?.length > 0 ? [...data.states, ...userStates] : [...userStates];
     const response = await axios.post(url, {
         text: message,
-        truncateMessageId: data?.truncateMsgId,
         states: totalStates,
         postback: data?.postback,
-        files: files
+        input_message_id: data?.inputMessageId
     });
     return response.data;
 }
@@ -130,18 +128,48 @@ function buildConversationUserStates(conversationId) {
 /**
  * delete a message in conversation
  * @param {string} conversationId The conversation id
- * @param {string} messageId The text message sent to CSR
+ * @param {string} messageId The target message id to delete
+ * @param {boolean} isNewMessage If sending a new message while deleting a message
+ * @returns {Promise<string>}
  */
-export async function deleteConversationMessage(conversationId, messageId) {
+export async function deleteConversationMessage(conversationId, messageId, isNewMessage = false) {
     let url = replaceUrl(endpoints.conversationMessageDeletionUrl, {
         conversationId: conversationId,
         messageId: messageId
     });
-    const response = await axios.delete(url);
-    return response.data;
+
+    return new Promise((resolve, reject) => {
+        axios.delete(url, {
+            data: {
+                is_new_message: isNewMessage || false
+            }
+        }).then(response => {
+            resolve(response.data);
+        }).catch(err => {
+            reject(err)
+        });
+    });
 }
 
 
+/**
+ * upload conversation files
+ * @param {string} agentId The agent id
+ * @param {string} converationId The conversation id
+ * @param {any[]} files The conversation files
+ * @returns {Promise<string>}
+ */
+export async function uploadConversationFiles(agentId, converationId, files) {
+    let url = replaceUrl(endpoints.fileUploadUrl, {
+        agentId: agentId,
+        conversationId: converationId
+    });
+    const response = await axios.post(url, {
+        files: files
+    });
+    return response.data;
+}
+
 /**
  * delete a message in conversation
  * @param {string} text The user input

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

@@ -16,7 +16,8 @@
 		GetDialogs,
 		deleteConversationMessage,
 		getConversationFiles,
-		getConversationUser
+		getConversationUser,
+		uploadConversationFiles
 	} from '$lib/services/conversation-service.js';
 	import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
@@ -415,29 +416,44 @@
 		renewUserSentMessages(msgText);
 		const postback = buildPostbackMessage(dialogs, data?.payload || msgText, data?.truncateMsgId);
 		/** @type {import('$types').MessageData?} */
-		const messageData = {
+		let messageData = {
 			...data,
 			postback: postback
 		};
 
 		/** @type {any[]} */
 		let files = [];
-		if (!!!data?.truncateMsgId) {
+		if (!!!messageData?.inputMessageId) {
 			files = getChatFiles();
 		}
 		resetStorage();
 
-		return new Promise((resolve, reject) => {
-			sendMessageToHub(params.agentId, params.conversationId, msgText, messageData, files).then(res => {
-				isSendingMsg = false;
-				autoScrollLog = false;
-				resolve(res);
-			}).catch(err => {
-				isSendingMsg = false;
-				autoScrollLog = false;
-				reject(err);
+		if (files?.length > 0 && !!!messageData.inputMessageId) {
+			return new Promise((resolve, reject) => {
+				uploadConversationFiles(params.agentId, params.conversationId, files).then(resMessageId => {
+					messageData = { ...messageData, inputMessageId: resMessageId };
+					sendMessageToHub(params.agentId, params.conversationId, msgText, messageData).then(res => {
+						resolve(res);
+					}).catch(err => {
+						reject(err);
+					}).finally(() => {
+						isSendingMsg = false;
+						autoScrollLog = false;
+					});
+				});
 			});
-		});
+		} else {
+			return new Promise((resolve, reject) => {
+				sendMessageToHub(params.agentId, params.conversationId, msgText, messageData).then(res => {
+					resolve(res);
+				}).catch(err => {
+					reject(err);
+				}).finally(() => {
+					isSendingMsg = false;
+					autoScrollLog = false;
+				});
+			});
+		}
     }
 
     async function startListen() {
@@ -656,7 +672,9 @@
 		// @ts-ignore
 		}).then(async (result) => {
 			if (result.value) {
-				sendChatMessage(message?.text, { truncateMsgId: message?.message_id });
+				deleteConversationMessage(params.conversationId, message?.message_id, true).then(resMessageId => {
+					sendChatMessage(message?.text, { inputMessageId: resMessageId });
+				});
 			}
 		});
 	}
@@ -719,10 +737,12 @@
 
 	async function confirmEditMsg() {
 		isOpenEditMsgModal = false;
-		sendChatMessage(editText, { truncateMsgId: truncateMsgId }).then(() => {
-			resetEditMsg();
-		}).catch(() => {
-			resetEditMsg();
+		deleteConversationMessage(params.conversationId, truncateMsgId, true).then(resMessageId => {
+			sendChatMessage(editText, { inputMessageId: resMessageId }).then(() => {
+				resetEditMsg();
+			}).catch(() => {
+				resetEditMsg();
+			});
 		});
 	}