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

Features/refine chat window

Author: Oceania2018

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

@@ -364,15 +364,15 @@
         background-color: black;
 
         .log-close-btn {
-            margin-top: 1.5rem;
-            margin-bottom: 10px;
+            margin-top: 1.2rem;
             position: sticky;
             display: flex;
             justify-content: space-between;
+            height: 7vh;
         }
 
         .state-log-section {
-            height: 92vh;
+            height: 90vh;
         }
 
         .content-log-list {
@@ -390,7 +390,6 @@
 
         .queue-change-log-list {
             width: 100%;
-            height: 5vh;
         }
 
         .log-list {
@@ -470,7 +469,7 @@
 
                 .log-content {
                     text-align: center;
-                    font-size: 17px;
+                    font-size: 14px;
                     margin-top: 2px;
                     margin-bottom: 2px;
                 }

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

@@ -66,8 +66,8 @@
 	/** @type {import('$types').UserModel} */
 	export let currentUser;
 
-	// @ts-ignore
-    let scrollbar;
+	/** @type {any[]} */
+    let scrollbars = [];
 	let microphoneIcon = "microphone-off";
 
 	/** @type {import('$types').ChatResponseModel?} */
@@ -121,8 +121,12 @@
 		signalr.onConversationMessageDeleted = onConversationMessageDeleted;
 		await signalr.start(params.conversationId);
 
-		const scrollElement = document.querySelector('.chat-scrollbar');
-		scrollbar = OverlayScrollbars(scrollElement, options);
+		const scrollbarElements = [
+			document.querySelector('.chat-scrollbar')
+		].filter(Boolean);
+		scrollbarElements.forEach(elem => {
+            scrollbars = [ ...scrollbars, OverlayScrollbars(elem, options) ];
+        });
 		refresh();
 	});
 
@@ -210,10 +214,13 @@
 		groupedDialogs = groupDialogs(dialogs);
 		await tick();
 
-		setTimeout(() => {
-			const { viewport } = scrollbar.elements();
-			viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' }); // set scroll offset
-		}, 200);
+		// @ts-ignore
+        scrollbars.forEach(scrollbar => {
+            setTimeout(() => {
+                const { viewport } = scrollbar.elements();
+                viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' });
+            }, 200);
+        });
     }
 
 	/** @param {import('$types').ChatResponseModel[]} dialogs */
@@ -451,13 +458,14 @@
 			});
 		} else {
 			window.parent.postMessage({ action: "close" }, "*");
-		} 
+		}
 	}
 
 	function toggleContentLog() {
 		isLoadContentLog = !isLoadContentLog;
 		if (!isLoadContentLog) {
 			contentLogs = [];
+			agentQueueChangeLogs = [];
 			isContentLogClosed = true;
 		} else {
 			isContentLogClosed = false;
@@ -472,6 +480,7 @@
 		isLoadStateLog = !isLoadStateLog;
 		if (!isLoadStateLog) {
 			stateLogs = [];
+			stateChangeLogs = [];
 			isStateLogClosed = true;
 		} else {
 			isStateLogClosed = false;
@@ -518,7 +527,6 @@
 			title: 'Are you sure?',
 			text: "You won't be able to revert this!",
 			icon: 'warning',
-			customClass: 'custom-modal',
 			showCancelButton: true,
 			confirmButtonText: 'Yes, delete it!',
 			cancelButtonText: 'No'
@@ -533,15 +541,24 @@
 
 	/**
 	 * @param {any} e
-	 * @param {string} messageText
+	 * @param {import('$types').ChatResponseModel} message
 	 */
-	function copyMessage(e, messageText) {
+	function resendMessage(e, message) {
 		e.preventDefault();
-		if (!!!text) {
-			text += messageText;
-		} else {
-			text += ' ' + messageText;
-		}
+		// @ts-ignore
+		Swal.fire({
+			title: 'Are you sure?',
+			text: "Send this message again!",
+			icon: 'warning',
+			showCancelButton: true,
+			confirmButtonText: 'Yes, go ahead!',
+			cancelButtonText: 'No'
+		// @ts-ignore
+		}).then(async (result) => {
+			if (result.value) {
+				sendChatMessage(message?.text, { truncateMsgId: message?.message_id });
+			}
+		});
 	}
 
 	/**
@@ -850,12 +867,12 @@
 										</div>
 										{#if !isLite}
 										<Dropdown>
-											<DropdownToggle class="dropdown-toggle" tag="span" color="">
+											<DropdownToggle class="dropdown-toggle" tag="span" disabled={isSendingMsg || isThinking}>
 												<i class="bx bx-dots-vertical-rounded" />
 											</DropdownToggle>
 											<DropdownMenu class="dropdown-menu-end">
 												<DropdownItem on:click={(e) => editMessage(e, message)}>Edit</DropdownItem>
-												<DropdownItem on:click={(e) => copyMessage(e, message.text)}>Copy</DropdownItem>
+												<DropdownItem on:click={(e) => resendMessage(e, message)}>Resend</DropdownItem>
 												<DropdownItem on:click={(e) => deleteMessage(e, message.message_id)}>Delete</DropdownItem>
 											</DropdownMenu>
 										</Dropdown>

src/routes/chat/[agentId]/[conversationId]/contentLogs/agent-queue-change-element.svelte

@@ -7,6 +7,6 @@
 
 <div class="log-element queue-change-container">
     <div class="log-content queue-change-content">
-        <span class="text-warning">{data?.log}</span>
+        <span class="text-danger">{data?.log}</span>
     </div>
 </div>

src/routes/chat/[agentId]/[conversationId]/stateLogs/state-change-element.svelte

@@ -1,17 +1,26 @@
 <script>
-
     /** @type {any} */
     export let data;
 
     /** @type {string} */
     let beforeActiveRoundText = '';
     let afterActiveRoundText = '';
+    let beforeDataValue = '';
+    let afterDataValue = '';
+    const defaultValue = '-';
 
     $: {
+        beforeDataValue = buildDataValue(data?.before_value);
+        afterDataValue = buildDataValue(data?.after_value);
         beforeActiveRoundText = buildActiveRoundText(data?.before_value, data?.before_active_rounds);
         afterActiveRoundText = buildActiveRoundText(data?.after_value, data?.after_active_rounds);
     }
 
+    /** @param {any} value */
+    function buildDataValue(value) {
+        return value || defaultValue;
+    }
+
     /**
      * @param {any} value
 	 * @param {any} activeRounds
@@ -33,14 +42,15 @@
     }
 </script>
 
+{#if beforeDataValue != defaultValue || afterDataValue != defaultValue}
 <div class="log-element state-change-container">
     <div class="log-meta state-key">
         <div><b>{`${data?.name}`}</b></div>
     </div>
     <div class="log-content state-value-container">
         <div class="state-value">
             <div class="value">
-                {`${data?.before_value || 'unknown'}`}
+                {beforeDataValue}
             </div>
             {#if !!beforeActiveRoundText}
             <div class="active-rounds">
@@ -50,7 +60,7 @@
         </div>
         <div class="state-value text-warning">
             <div class="value">
-                {`${data?.after_value || 'unknown'}`}
+                {afterDataValue}
             </div>
             {#if !!afterActiveRoundText}
             <div class="active-rounds">
@@ -60,3 +70,4 @@
         </div>
     </div>
 </div>
+{/if}

src/routes/chat/[agentId]/[conversationId]/stateLogs/state-log.svelte

@@ -80,20 +80,24 @@
 <div class="chat-log">
     <div class="card mb-0 log-background" style="height: 100%;">
         <div class="log-close-btn padding-side">
-            <button
-                type="button"
-                class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
-                on:click={() => closeWindow()}
-            >
-                <i class="mdi mdi-window-close"></i>
-            </button>
-            <button
-                type="button"
-                class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
-                on:click={() => handleCleanScreen()}
-            >
-                <i class="bx bx-trash"></i>
-            </button>
+            <div>
+                <button
+                    type="button"
+                    class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
+                    on:click={() => closeWindow()}
+                >
+                    <i class="mdi mdi-window-close"></i>
+                </button>
+            </div>
+            <div>
+                <button
+                    type="button"
+                    class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
+                    on:click={() => handleCleanScreen()}
+                >
+                    <i class="bx bx-trash"></i>
+                </button>
+            </div>
         </div>
         <div class="state-log-section">
             <Splitpanes horizontal>