Merge pull request #238 from iceljc/features/add-notification

add notification

Author: iceljc

src/lib/common/DialogModal.svelte

@@ -4,10 +4,13 @@
     /** @type {boolean} */
     export let isOpen;
 
+    /** @type {boolean} */
+    export let closeable = false;
+
     /** @type {string} */
     export let size = 'xl';
 
-    /** @type {string} */
+    /** @type {string | any} */
     export let title;
 
     /** @type {string} */
@@ -28,6 +31,9 @@
     /** @type {() => void} */
     export let cancel = () => {};
 
+    /** @type {() => void} */
+    export let close = () => {};
+
     /** @type {boolean} */
     export let disableConfirmBtn = false;
 
@@ -43,13 +49,44 @@
         cancel && cancel();
     }
 
+    /** @param {any} e */
+    function handleClose(e) {
+        e.preventDefault();
+        close && close();
+    }
 </script>
 
 
-<Modal class={className} fade size={size} isOpen={isOpen} toggle={() => toggleModal()}>
-    {#if !!title}
-    <ModalHeader>{title}</ModalHeader>
-    {/if}
+<Modal
+    class={`dialog-modal-container ${className}`}
+    fade
+    size={size}
+    isOpen={isOpen}
+    toggle={() => toggleModal()}
+    unmountOnClose
+>
+    <ModalHeader>
+        <div class="dialog-modal-header">
+            {#if !!title}
+                <div class="header-title">
+                    <slot name='title-icon'/>
+                    <div>{title}</div>
+                </div>
+            {/if}
+            {#if closeable}
+                <div class="header-close">
+                    <!-- svelte-ignore a11y-no-static-element-interactions -->
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <div
+                        class="clickable"
+                        on:click={e => handleClose(e)}
+                    >
+                        <i class="mdi mdi-close" />
+                    </div>
+                </div>
+            {/if}
+        </div>
+    </ModalHeader>
     <ModalBody>
         <slot />
     </ModalBody>

src/lib/common/LiveChatEntry.svelte

@@ -23,7 +23,7 @@
             showChatBox = false;
         } else if (e.data.action == ChatAction.Open) {
             // showChatBox = true;
-        } else if (e.data.action == ChatAction.ReceiveMsg && !showChatBox) {
+        } else if (e.data.action == ChatAction.ReceiveNotification && !showChatBox) {
             receivedMsg = e.data?.data?.rich_content?.message?.text || e.data?.data?.text || '';
             showBubbleMsg = true;
             wave();

src/lib/common/StateModal.svelte

@@ -158,7 +158,7 @@
     }
 </script>
 
-<Modal class={className} fade size={size} isOpen={isOpen} toggle={() => toggleModal && toggleModal()}>
+<Modal class={className} fade size={size} isOpen={isOpen} unmountOnClose toggle={() => toggleModal && toggleModal()}>
     <ModalHeader>{title}</ModalHeader>
     <ModalBody>
         <Form class="state-form">

src/lib/helpers/enums.js

@@ -38,7 +38,8 @@ const contentLogSource = {
     Prompt: "prompt",
     FunctionCall: "function call",
     AgentResponse: "agent response",
-    HardRule: "hard rule"
+    HardRule: "hard rule",
+    Notification: "notification"
 };
 export const ContentLogSource = Object.freeze(contentLogSource);
 
@@ -106,6 +107,6 @@ const chatAction = {
     Logout: 'logout',
     Chat: 'chat',
     NewChat: 'new-chat',
-    ReceiveMsg: 'receive-msg'
+    ReceiveNotification: 'receive-notification'
 };
 export const ChatAction = Object.freeze(chatAction);

src/lib/scss/custom/components/_chat.scss

@@ -1,5 +1,22 @@
 $bubble-chat-theme-color: rgba($primary, 80%);
 
+.dialog-modal-container {
+    .modal-title {
+        width: 100%;
+    }
+
+    .dialog-modal-header {
+        display: flex;
+        justify-content: space-between;
+
+        .header-title {
+            display: flex;
+            gap: 8px;
+        }
+    }
+}
+
+
 .chat-util-common {
     display: block;
     position: absolute;
@@ -45,7 +62,12 @@ $bubble-chat-theme-color: rgba($primary, 80%);
     font-size: 30px;
 }
 
-
+.chat-notification {
+    min-height: 20px;
+    max-height: 150px;
+    overflow-y: auto;
+    scrollbar-width: none;
+}
 
 .chat-bubble-container {
     display: flex;

src/lib/services/api-endpoints.js

@@ -39,6 +39,7 @@ export const endpoints = {
     // conversation
     conversationInitUrl: `${host}/conversation/{agentId}`,
     conversationMessageUrl: `${host}/conversation/{agentId}/{conversationId}`,
+    notificationUrl: `${host}/conversation/{conversationId}/notification`,
     conversationsUrl: `${host}/conversations`,
     conversationCountUrl: `${host}/conversations/count`,
     conversationDeletionUrl: `${host}/conversation/{conversationId}`,

src/lib/services/conversation-service.js

@@ -106,6 +106,24 @@ export async function sendMessageToHub(agentId, conversationId, text, data = nul
 }
 
 
+/**
+ * send a notification to conversation
+ * @param {string} conversationId - The conversation id
+ * @param {string} text - The text message sent to CSR
+ * @param {import('$conversationTypes').MessageData?} data - Additional data
+ */
+export async function sendNotification(conversationId, text, data = null) {
+    let url = replaceUrl(endpoints.notificationUrl, {
+        conversationId: conversationId
+    });
+    const response = await axios.post(url, {
+        text: text,
+        states: [],
+        postback: data?.postback
+    });
+    return response.data;
+}
+
 /**
  * @param {string} conversationId
  */

src/lib/services/signalr-service.js

@@ -21,6 +21,9 @@ export const signalr = {
   /** @type {import('$conversationTypes').OnMessageReceived} */
   onMessageReceivedFromAssistant: () => {},
 
+  /** @type {import('$conversationTypes').OnMessageReceived} */
+  onNotificationGenerated: () => {},
+
   /** @type {import('$conversationTypes').OnConversationContentLogReceived} */
   onConversationContentLogGenerated: () => {},
 
@@ -93,6 +96,13 @@ export const signalr = {
       }
     });
 
+    connection.on('OnNotificationGenerated', (json) => {
+      const message = JSON.parse(json);
+      if (conversationId === message?.conversation_id) {
+        this.onNotificationGenerated(message);
+      }
+    });
+
     connection.on('OnConversationContentLogGenerated', (log) => {
       const jsonLog = JSON.parse(log);
       if (conversationId === jsonLog?.conversation_id) {

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

@@ -92,6 +92,7 @@
 	let truncateMsgId = "";
 	let indication = "";
 	let mode = '';
+	let notificationText = '';
 
 	/** @type {number} */
 	let messageInputTimeout;
@@ -158,6 +159,7 @@
 	let disableSpeech = false;
 	let isLoading = false;
 	let isCreatingNewConv = false;
+	let isDisplayNotification = false;
 	
 	$: {
 		const editor = lastBotMsg?.rich_content?.editor || '';
@@ -184,6 +186,7 @@
 		signalr.onMessageReceivedFromClient = onMessageReceivedFromClient;
 		signalr.onMessageReceivedFromCsr = onMessageReceivedFromCsr;
 		signalr.onMessageReceivedFromAssistant = onMessageReceivedFromAssistant;
+		signalr.onNotificationGenerated = onNotificationGenerated;
 		signalr.onConversationContentLogGenerated = onConversationContentLogGenerated;
 		signalr.onConversationStateLogGenerated = onConversationStateLogGenerated;
 		signalr.onStateChangeGenerated = onStateChangeGenerated;
@@ -255,9 +258,9 @@
 	}
 
 	/** @param {import('$conversationTypes').ChatResponseModel} message */
-	function sendReceivedMessage(message) {
+	function sendReceivedNotification(message) {
 		if (isFrame) {
-			window.parent.postMessage({ action: ChatAction.ReceiveMsg, data: message }, "*");
+			window.parent.postMessage({ action: ChatAction.ReceiveNotification, data: message }, "*");
 		}
 	}
 
@@ -431,10 +434,21 @@
 			...message,
 			is_chat_message: true
 		});
-		sendReceivedMessage(message);
 		refresh();
     }
 
+	/** @param {import('$conversationTypes').ChatResponseModel} message */
+	function onNotificationGenerated(message) {
+		notificationText = message?.rich_content?.message?.text || message.text || '';
+		isDisplayNotification = true;
+		setTimeout(() => {
+			isDisplayNotification = false;
+			notificationText = '';
+		}, notificationText?.length > 200 ? 8000 : 3000);
+
+		sendReceivedNotification(message);
+	}
+
 	/** @param {import('$conversationTypes').ConversationContentLogModel} log */
 	function onConversationContentLogGenerated(log) {
 		if (!isLoadPersistLog) return;
@@ -1094,6 +1108,13 @@
 		};
 		sendChatMessage(text, data);
 	}
+
+	function toggleNotificationModal() {
+		isDisplayNotification = !isDisplayNotification;
+		if (!isDisplayNotification) {
+			notificationText = '';
+		}
+	}
 </script>
 
 
@@ -1103,6 +1124,25 @@
 	<Loader size={35} />
 {/if}
 
+<DialogModal
+	title={'Notification'}
+	size={'md'}
+	isOpen={isDisplayNotification}
+	closeable
+	toggleModal={() => toggleNotificationModal()}
+	confirmBtnText={''}
+	cancelBtnText={''}
+	close={() => toggleNotificationModal()}
+>
+	<div slot='title-icon' class="color: text-warning">
+		<i class="mdi mdi-bell-ring" />
+	</div>
+	<div class="chat-notification">
+		{notificationText}
+	</div>
+</DialogModal>
+
+
 <DialogModal
 	title={'Edit message'}
 	size={'md'}

src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte

@@ -16,11 +16,12 @@
     const includedSources = [
         ContentLogSource.Prompt,
         ContentLogSource.AgentResponse,
-        ContentLogSource.FunctionCall
+        ContentLogSource.FunctionCall,
+        ContentLogSource.Notification
     ];
 
     $: {
-        if (data.source === ContentLogSource.AgentResponse) {
+        if (data.source === ContentLogSource.AgentResponse || data.source === ContentLogSource.Notification) {
             logDisplayStyle = 'border border-secondary';
             logTextStyle = 'text-info';
         } else if (data.source === ContentLogSource.FunctionCall) {