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

add text input animation

Author: Oceania2018

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";

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;
+    }
+}

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%;
 }

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">