From 1a7368d2c77188576ca61c4637a1b6032f7ddd8b Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Wed, 2 Oct 2024 00:28:56 -0500
Subject: [PATCH 1/2] refine chat flow

---
 src/lib/common/LiveChatEntry.svelte           | 29 ++++++-------------
 .../[conversationId]/chat-box.svelte          | 10 ++-----
 2 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/src/lib/common/LiveChatEntry.svelte b/src/lib/common/LiveChatEntry.svelte
index a925580f..9a8a6d2e 100644
--- a/src/lib/common/LiveChatEntry.svelte
+++ b/src/lib/common/LiveChatEntry.svelte
@@ -29,30 +29,19 @@
 </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}
+    <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="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}
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 41bd2a8b..0e0e68c7 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/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);
 		}
 	}
 

From a9d4f958affe103153d34b74b788fb05dd4c1069 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Wed, 2 Oct 2024 00:38:18 -0500
Subject: [PATCH 2/2] refine style

---
 src/lib/common/LiveChatEntry.svelte | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/lib/common/LiveChatEntry.svelte b/src/lib/common/LiveChatEntry.svelte
index 9a8a6d2e..b780b454 100644
--- a/src/lib/common/LiveChatEntry.svelte
+++ b/src/lib/common/LiveChatEntry.svelte
@@ -28,7 +28,7 @@
     }
 </script>
 
-<div class="fixed-bottom float-bottom-right">
+<div class="chatbot-container fixed-bottom float-bottom-right">
     <iframe
         src={chatUrl}
         width={`${$chatBotStore.showChatBox ? '380px' : '0px'}`} 
@@ -39,7 +39,10 @@
     />
 
     {#if !$chatBotStore.showChatBox}
-        <div class="mb-3 float-end wave-effect" transition:fade={{ delay: 50, duration: 200 }}>
+        <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} />
             </button>
@@ -78,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>
\ No newline at end of file