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

add text input animation
SciSharp · May 9, 2024 · de030e2 · de030e2
2 parents be08fa2 + 9b080b5
commit de030e2
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 2 deletions.
diff --git a/src/lib/scss/app.scss b/src/lib/scss/app.scss
@@ -89,6 +89,9 @@ File: Main Css File
 @import "custom/pages/conversation";
 @import "custom/pages/agent";
 
+// Common
+@import "custom/common/animation";
+
 //RTL
 // @import "custom/rtl/bootstrap-rtl";
 // @import "custom/rtl/components-rtl";

diff --git a/src/lib/scss/custom/common/_animation.scss b/src/lib/scss/custom/common/_animation.scss
@@ -0,0 +1,17 @@
+.css-animation {
+    animation-duration: 0.8s;
+    animation-fill-mode: both;
+}
+
+.fade-in-from-none {
+    animation-name: fadeInFromNone;
+}
+
+@keyframes fadeInFromNone {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
@@ -287,7 +287,6 @@
 }
 
 .chat-input-section {
-    border-top: 1px solid var(--#{$prefix}border-color);
     padding: 2vmin 2%;
     height: 8%;
 }

diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -1040,7 +1040,7 @@
 						</div>
 					</div>
 
-					<div class={`chat-input-section ${!loadEditor ? 'chat-input-hide' : ''}`}>
+					<div class={`chat-input-section css-animation ${!loadEditor ? 'chat-input-hide' : 'fade-in-from-none'}`}>
 						<div class="row">
 							{#if loadTextEditor}
 								<div class="col-auto">