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

listen to message delete event

Author: Oceania2018

src/lib/common/Markdown.svelte

@@ -14,8 +14,6 @@
 		} else {
             displayText = markedText;
         }
-
-		console.log(displayText);
 	}
 </script>
 

src/lib/helpers/types.js

@@ -312,6 +312,14 @@ IRichContent.prototype.text;
  * @property {number} sender_action - The sender action.
  */
 
+/** 
+ * Conversation message deleted
+ * 
+ * @typedef {Object} ConversationMessageDeleteModel
+ * @property {string} conversation_id - The conversation id.
+ * @property {string} message_id - The message id.
+ */
+
 /**
  * Invoked when a new conersation is created.
  * This callback type is called `requestCallback` and is displayed as a global symbol.
@@ -350,12 +358,18 @@ IRichContent.prototype.text;
  */
 
 /** 
- * Conversation states
+ * Conversation sender action
  * 
  * @callback OnSenderActionGenerated
  * @param {ConversationSenderActionModel} data
  */
 
+/** 
+ * Conversation message deleted
+ * 
+ * @callback OnConversationMessageDeleted
+ * @param {ConversationMessageDeleteModel} data
+ */
 
 // having to export an empty object here is annoying, 
 // but required for vscode to pass on your types. 

src/lib/services/signalr-service.js

@@ -30,6 +30,9 @@ export const signalr = {
   /** @type {import('$types').OnSenderActionGenerated} */
   onSenderActionGenerated: () => {},
 
+  /** @type {import('$types').OnConversationMessageDeleted} */
+  onConversationMessageDeleted: () => {},
+
   // start the connection
   /** @param {string} conversationId */
   async start(conversationId) {
@@ -103,6 +106,12 @@ export const signalr = {
         this.onSenderActionGenerated(data);
       }
     });
+
+    connection.on('OnMessageDeleted', (data) => {
+      if (conversationId === data?.conversation_id) {
+        this.onConversationMessageDeleted(data);
+      }
+    });
   },
 
   // stop the connection

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

@@ -21,6 +21,7 @@
 	import DialogModal from '$lib/common/DialogModal.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
 	import LoadingDots from '$lib/common/LoadingDots.svelte';
+	import StateModal from '$lib/common/StateModal.svelte';
 	import { utcToLocal } from '$lib/helpers/datetime';
 	import { replaceNewLine } from '$lib/helpers/http';
 	import { SenderAction, UserRole } from '$lib/helpers/enums';
@@ -33,7 +34,7 @@
 	import Swal from 'sweetalert2/dist/sweetalert2.js';
 	import "sweetalert2/src/sweetalert2.scss";
 	import moment from 'moment';
-	import StateModal from '$lib/common/StateModal.svelte';
+	
 	
 	const options = {
 		scrollbars: {
@@ -107,6 +108,7 @@
 		signalr.onConversationContentLogGenerated = onConversationContentLogGenerated;
 		signalr.onConversationStateLogGenerated = onConversationStateLogGenerated;
 		signalr.onSenderActionGenerated = onSenderActionGenerated;
+		signalr.onConversationMessageDeleted = onConversationMessageDeleted;
 		await signalr.start(params.conversationId);
 
 		const scrollElement = document.querySelector('.chat-scrollbar');
@@ -257,7 +259,7 @@
 		stateLogs = stateLogs.map(x => { return { ...x }; });
 	}
 
-	/**  @param {import('$types').ConversationSenderActionModel} data */
+	/** @param {import('$types').ConversationSenderActionModel} data */
 	function onSenderActionGenerated(data) {
 		if (data?.sender_action == SenderAction.TypingOn) {
 			isThinking = true;
@@ -266,13 +268,16 @@
 		}
 	}
 
+	/** @param {import('$types').ConversationMessageDeleteModel} data */
+	function onConversationMessageDeleted(data) {
+		if (!!!data?.message_id) return;
+		truncateDialogs(data.message_id);
+	}
+
 	async function newConversationHandler() {
 		const conversation = await newConversation(params.agentId);
         conversationStore.set(conversation);
-		let url = `chat/${params.agentId}/${conversation.id}`;
-		if (isLite) {
-			url = `${url}?isLite=true`;
-		}
+		const url = `chat/${params.agentId}/${conversation.id}`;
 		window.location.href = url;
 	}
 
@@ -422,11 +427,11 @@
 	function toggleUserAddStateModal() {
 		isOpenUserAddStateModal = !isOpenUserAddStateModal;
 		if (isOpenUserAddStateModal) {
-			loadAddStates();
+			loadUserAddStates();
 		}
 	}
 
-	function loadAddStates() {
+	function loadUserAddStates() {
 		const conversationUserStates = conversationUserStateStore.get();
 		if (!!conversationUserStates && conversationUserStates.conversationId == params.conversationId && !!conversationUserStates.states) {
 			userAddStates = [...conversationUserStates.states];
@@ -446,7 +451,7 @@
 		toggleUserAddStateModal();
 	}
 
-	function clearAddedStates() {
+	function clearUserAddStates() {
 		// @ts-ignore
 		Swal.fire({
 			title: 'Are you sure?',
@@ -459,6 +464,7 @@
 		// @ts-ignore
 		}).then(async (result) => {
 			if (result.value) {
+				userAddStates = [];
 				conversationUserStateStore.reset();
 			}
 		});
@@ -503,8 +509,6 @@
 
 	/** @param {string} messageId */
 	async function handleDeleteMessage(messageId) {
-		const isDeleted = truncateDialogs(messageId);
-		if (!isDeleted) return;
 		await deleteConversationMessage(params.conversationId, messageId);
 	}
 
@@ -532,9 +536,6 @@
 	}
 
 	async function confirmEditMsg() {
-		const isDeleted = truncateDialogs(truncateMsgId);
-		if (!isDeleted) return;
-
 		isSendingMsg = true;
 		isOpenEditMsgModal = false;
 		renewUserSentMessages(editText);
@@ -642,6 +643,7 @@
 	}
 </script>
 
+
 <svelte:window on:resize={() => resizeChatWindow()}/>
 
 <DialogModal
@@ -721,7 +723,7 @@
 															{#if !isOpenUserAddStateModal}
 															<DropdownItem on:click={() => toggleUserAddStateModal()}>Add States</DropdownItem>
 															{/if}
-															<DropdownItem on:click={() => clearAddedStates()}>Clear States</DropdownItem>
+															<DropdownItem on:click={() => clearUserAddStates()}>Clear States</DropdownItem>
 														</DropdownMenu>
 													</Dropdown>
 												</li>