Merge branch 'main' into new

HimanshuNarware · May 30, 2024 · 1638036 · 1638036
2 parents 4e7d41d + c7a7046
commit 1638036
Show file tree

Hide file tree

Showing 8 changed files with 330 additions and 132 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/ChatAssistant/ChatAssistant.css b/frontend/src/ChatAssistant/ChatAssistant.css
@@ -1,13 +1,38 @@
 .chatbot {
-    position: fixed;
-    bottom: 0;
-    right:0;
-    margin-right:20px;
-    margin-bottom: 12px;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  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;
+  outline: none;
 }
 
 .react-chatbot-kit-chat-inner-container {
@@ -37,25 +62,56 @@
 
 .react-chatbot-kit-chat-btn-send {
   background-color: #55a0ea;
-  height:45px;
+  height: 45px;
 }
 
 .Logo{
   cursor: pointer;
   height:50px;
   width:50px;
+
+.Logo {
+  height: 50px;
+  width: 50px;
+
   border-radius: 50px;
-  right:12px;
+  right: 12px;
 }
 
-.Avatar{
-  height:50px;
-  width:50px;
+.Avatar {
+  height: 50px;
+  width: 50px;
   border-radius: 50px;
 }
 
-.userAvatar{
-  height:50px;
-  width:50px;
-  border-radius:50px;
-}
+.userAvatar {
+  height: 50px;
+  width: 50px;
+  border-radius: 50px;
+}
+
+@media only screen and (max-width: 425px) {
+  .chatbot {
+    margin-right: 5px;
+    margin-bottom: 5px;
+  }
+
+  .react-chatbot-kit-chat-container {
+    width: 300px;
+    height: 400px;
+    padding-bottom: 30px;
+  }
+  .react-chatbot-kit-chat-message-container {
+    height: 350px;
+  }
+  .Avatar {
+    height: 36px;
+    width: 36px;
+    border-radius: 50px;
+  }
+  .userAvatar {
+    height: 36px;
+    width: 36px;
+    border-radius: 50px;
+  }
+}
diff --git a/frontend/src/ChatAssistant/ChatAssistant.jsx b/frontend/src/ChatAssistant/ChatAssistant.jsx
@@ -21,11 +21,19 @@ const ChatAssistant = () => {
         onMouseLeave={() => (document.querySelector(".Logo").src = chatbotLogo)}
         />
       {isOpen && 
+
+        <img className="Logo" src={chatbotLogo} alt="Logo" onClick={toggleChatbot} />
+        <div className={`${isOpen?"chatbot-animation":"chatbot-close-animation"}`}>
+
+       {isOpen && 
         <Chatbot
           config={config}
           messageParser={MessageParser}
           actionProvider={ActionProvider}
-        />}
+          />
+
+        }
+        </div>
       </div>
     );
   }