Merge pull request #557 from Ayushmaanagarwal1211/main

Animation on chatbot #551
HimanshuNarware · May 30, 2024 · c7a7046 · c7a7046
2 parents 481f52c + e3a337a
commit c7a7046
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/frontend/src/ChatAssistant/ChatAssistant.css b/frontend/src/ChatAssistant/ChatAssistant.css
@@ -5,7 +5,32 @@
   margin-right: 20px;
   margin-bottom: 12px;
 }
+.chatbot-close-animation{
+  animation: animate-close ease-in 0.3s forwards;
 
+}
+.chatbot-animation{
+
+  animation: animate ease-in 0.3s forwards;
+}
+@keyframes animate {
+  from{
+    height: 0px;
+    /* width: 250px; */
+  }to{
+    height: 450px;
+    width: 350px;
+  }
+}
+@keyframes animate-close {
+  from{
+    height: 450px;
+    width: 350px;
+  }to{
+    height: 0px;
+    width: 0px;
+  }
+}
 .react-chatbot-kit-chat-input {
   outline: none;
 }

diff --git a/frontend/src/ChatAssistant/ChatAssistant.jsx b/frontend/src/ChatAssistant/ChatAssistant.jsx
@@ -16,12 +16,17 @@ const ChatAssistant = () => {
     return (
       <div className="chatbot">
         <img className="Logo" src={chatbotLogo} alt="Logo" onClick={toggleChatbot} />
-      {isOpen && 
+        <div className={`${isOpen?"chatbot-animation":"chatbot-close-animation"}`}>
+
+       {isOpen && 
         <Chatbot
           config={config}
           messageParser={MessageParser}
           actionProvider={ActionProvider}
-        />}
+          />
+
+        }
+        </div>
       </div>
     );
   }