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

add chat indication

Author: Oceania2018

src/lib/helpers/types.js

@@ -343,6 +343,7 @@ IRichContent.prototype.text;
  * @typedef {Object} ConversationSenderActionModel
  * @property {string} conversation_id - The conversation id.
  * @property {number} sender_action - The sender action.
+ * @property {string} [indication] - The function indication.
  */
 
 /** 

src/lib/scss/custom/pages/_chat.scss

@@ -295,6 +295,10 @@
                 margin-top: 0px !important;
                 margin-bottom: 0px !important;
             }
+
+            .chat-indication {
+                font-size: 1em;
+            }
         }
 
         .image-wrap {

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

@@ -56,6 +56,7 @@
 	let text = "";
 	let editText = "";
 	let truncateMsgId = "";
+	let indication = "";
 
 	/** @type {string[]} */
 	let prevSentMsgs = [];
@@ -327,8 +328,10 @@
 	function onSenderActionGenerated(data) {
 		if (data?.sender_action == SenderAction.TypingOn) {
 			isThinking = true;
+			indication = data.indication || '';
 		} else if (data?.sender_action == SenderAction.TypingOff) {
 			isThinking = false;
+			indication = '';
 		}
 	}
 
@@ -946,9 +949,14 @@
 										<div class="cicon-wrap float-start">
 											<img src={PUBLIC_LIVECHAT_ENTRY_ICON} class="rounded-circle avatar-xs" alt="avatar">
 										</div>
-										<div class="ctext-wrap float-start" style="display: flex;">
-											<div class="flex-shrink-0 align-self-center">
-												<LoadingDots duration={'1s'} size={10} color={'var(--bs-primary)'} />
+										<div class="msg-container">
+											<div class="ctext-wrap float-start">
+												<span class="chat-indication">
+													{indication}
+												</span>
+												<div class="flex-shrink-0 align-self-center" style="display: inline-block;">
+													<LoadingDots duration={'1s'} size={10} color={'var(--bs-primary)'} />
+												</div>
 											</div>
 										</div>
 									</div>