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

Features/refine chat window

Author: iceljc

src/lib/common/LiveChatEntry.svelte

@@ -28,31 +28,23 @@
     }
 </script>
 
-<div class="fixed-bottom float-bottom-right">
-    {#if $chatBotStore.showChatBox}
-        <div transition:fade={{ delay: 250, duration: 300 }}>
-            <iframe
-                src={chatUrl}
-                width="380px" 
-                height="650px" 
-                class={`border border-2 rounded-3 m-3 float-end chat-iframe`}
-                title="live chat"
-                id={CHAT_FRAME_ID}
-            />
-        </div>
-    {/if}
+<div class="chatbot-container fixed-bottom float-bottom-right">
+    <iframe
+        src={chatUrl}
+        width={`${$chatBotStore.showChatBox ? '380px' : '0px'}`} 
+        height={`${$chatBotStore.showChatBox ? '650px' : '0px'}`}
+        class={`border border-2 rounded-3 m-3 float-end ${$chatBotStore.showChatBox ? 'chat-iframe' : ''}`}
+        title="live chat"
+        id={CHAT_FRAME_ID}
+    />
 
     {#if !$chatBotStore.showChatBox}
-        <div class="mb-3 float-end wave-effect" transition:fade={{ delay: 100, duration: 500 }}>
+        <div
+            class="chatbot-icon mb-3 float-end wave-effect"
+            transition:fade={{ delay: 50, duration: 200 }}
+        >
             <button class="btn btn-transparent" on:click={() => openChatBox()}>
                 <img alt="live chat" class="avatar-md rounded-circle" src={PUBLIC_LIVECHAT_ENTRY_ICON} />
-                <iframe
-                    src={chatUrl}
-                    width="0px" 
-                    height="0px" 
-                    title="live chat"
-                    id={CHAT_FRAME_ID}
-                />
             </button>
         </div>
     {/if}
@@ -89,4 +81,14 @@
         margin-right: 0px;
         margin-left: auto;
     }
+
+    .chatbot-container {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .chatbot-icon {
+        display: flex;
+        justify-content: flex-end;
+    }
 </style>

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

@@ -221,13 +221,12 @@
 				isCreatingNewConv = false;
 				if (conv && !!e.data.text) {
 					isLoading = true;
+					openFrame();
 					sendChatMessage(e.data.text, e.data.data || null, conv.id).then(() => {
 						isLoading = false;
-						openFrame();
 						redirectToNewConversation(conv);
 					}).catch(() => {
 						isLoading = false;
-						openFrame();
 					});
 				} else {
 					openFrame();
@@ -241,11 +240,8 @@
 	/** @param {any} e */
 	function handleChatAction(e) {
 		if (!!e.data.text && !isThinking && !isSendingMsg) {
-			sendChatMessage(e.data.text, e.data.data || null).then(() => {
-				openFrame();
-			}).catch(() => {
-				openFrame();
-			});
+			openFrame();
+			sendChatMessage(e.data.text, e.data.data || null);
 		}
 	}