Feature front chatbot css (#95)

* New change * chatbot animation * removed copy files at Aditya's request --------- Co-authored-by: ShaneD <[email protected]>
DataBytes-Organisation · Nov 23, 2023 · e106220 · e106220
1 parent f2fae5c
commit e106220
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 49 deletions.
diff --git a/neo_dolfin/static/css/chatbot.css b/neo_dolfin/static/css/chatbot.css
@@ -151,16 +151,17 @@ body {
     border-radius: 20px;
     flex-grow: 1;
     margin: 0px;
+    order: 1;
 }
 
 .chatbox__button img {
     height: auto !important;
     width: 50px;
 }
 
-.chatbox__button button:hover {
+/* .chatbox__button button:hover {
     background: rgb(59, 117, 203, 0.6);
-}
+} */
 
 .chatbox__button button {
     padding: 15px;
@@ -170,7 +171,13 @@ body {
     outline: none;
     box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2); 
     cursor: pointer;
-    transition: background-color 0.3s ease;
+    /* transition: background-color 0.3s ease; */
+
+    transition-property: transform;
+    transition-duration: 0.3s;
+    transition-timing-function: ease;
+    transition-delay: 0s;
+
 }
 
 .text-cloud {
@@ -187,6 +194,12 @@ body {
     margin: 0px 0px;
     /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
     cursor: pointer;
+
+    opacity: 0;
+    transform: translateY(100%);
+    transition: transform 0.5s, opacity 0.5s;
+    order: 1; 
+
 }
 
 .text-cloud p {
@@ -205,6 +218,39 @@ body {
 #chatCloudID {
     display: flex;
     gap:1em;
+    flex-direction:row-reverse;
+
 }
 
+/* Animation and Transition */
+
+#hover-button:hover {
+    transform: translateY(-13px);
+
+}
+
+/* .text-cloud:hover {
+    opacity: 1;
+} */
+
+.chatbox__button:hover ~ .text-cloud {
+    transform: translateY(-13px);
+    opacity: 1;
+}
+
+
+/* loading page animation */
+.loading {
+    font-weight: bold;
+    display: inline-block;
+    font-family: monospace;
+    font-size: 30px;
+    clip-path: inset(0 3ch 0 0);
+    animation: loading 1s steps(4) infinite;
+}
 
+@keyframes loading {
+    to {
+        clip-path: inset(0 -1ch 0 0)
+    }
+}
diff --git a/neo_dolfin/static/js/chatbot_app.js b/neo_dolfin/static/js/chatbot_app.js
@@ -143,23 +143,36 @@ class Chatbox {
               });
         };
     }
-
+
+
 
     updateChatText(chatbox) {
         var html = '';
+        const l = '<div class="messages__item messages__item--visitor"><small class="loading">... </small></div>'
+        const chatmessage = chatbox.querySelector('.chatbox__messages');
+
         this.messages.slice().reverse().forEach(function(item, index) {
             if (item.name === "DolFine")
             {
                 html += '<div class="messages__item messages__item--visitor">' + item.message + '</div>'
+
+                setTimeout(() => {
+                    // chatmessage.;
+                   chatmessage.innerHTML = html;
+
+                }, 1300);
+                chatmessage.innerHTML = l;       
+
             }
             else
             {
                 html += '<div class="messages__item messages__item--operator">' + item.message + '</div>'
+                chatmessage.innerHTML = html;
             }
           });
 
-        const chatmessage = chatbox.querySelector('.chatbox__messages');
-        chatmessage.innerHTML = html;
+
+
     }
 }
 
@@ -170,42 +183,42 @@ chatbox.display();
 
 // chatbot cloud
 
-class chatbotCloudClass {
-    constructor() {
-    this.args = 
-    {
-         chatbotCloud : document.getElementById("chatbot-cloud"),
-         chatbotButton : document.getElementsByClassName("chatbox__button")[0]
-    }
-    }
-
-    removeOnClick() {
-        const {chatbotCloud, chatbotButton} = this.args;
-        document.addEventListener("DOMContentLoaded", function () {
-        chatbotButton.addEventListener("click", function () {
-            chatbotCloud.style.display = "none";
-        });
-    })
-    }
-
-    appearChatCloud() {
-        // const {chatbotCloud, chatbotButton} = this.args;
-        // chatbotCloud.style.visibility = "visible";
-
-        document.getElementById("chatbot-cloud").style.visibility = "visible";
-    }
-
-    diasppearChatCloud() {
-        // const {chatbotCloud, chatbotButton} = this.args;
-        // chatbotCloud.style.visibility = "hidden";
-
-        // above line throughs an error.
-        document.getElementById("chatbot-cloud").style.visibility = "hidden";
-    }
-}
-const chatbotcloud = new chatbotCloudClass();
-
-chatbotcloud.removeOnClick();
-
-setInterval(chatbotcloud.appearChatCloud, 10000) // appear after 10 seconds
-setInterval(chatbotcloud.diasppearChatCloud, 20000) //diasppear after another 10 seconds
+// class chatbotCloudClass {
+//     constructor() {
+//     this.args = 
+//     {
+//          chatbotCloud : document.getElementById("chatbot-cloud"),
+//          chatbotButton : document.getElementsByClassName("chatbox__button")[0]
+//     }
+//     }
+
+//     removeOnClick() {
+//         const {chatbotCloud, chatbotButton} = this.args;
+//         document.addEventListener("DOMContentLoaded", function () {
+//         chatbotButton.addEventListener("click", function () {
+//             chatbotCloud.style.display = "none";
+//         });
+//     })
+//     }
+
+//     appearChatCloud() {
+//         // const {chatbotCloud, chatbotButton} = this.args;
+//         // chatbotCloud.style.visibility = "visible";
+
+//         document.getElementById("chatbot-cloud").style.visibility = "visible";
+//     }
+
+//     diasppearChatCloud() {
+//         // const {chatbotCloud, chatbotButton} = this.args;
+//         // chatbotCloud.style.visibility = "hidden";
+
+//         // above line throughs an error.
+//         document.getElementById("chatbot-cloud").style.visibility = "hidden";
+//     }
+// }
+// const chatbotcloud = new chatbotCloudClass();
+
+// chatbotcloud.removeOnClick();
+
+// setInterval(chatbotcloud.appearChatCloud, 10000) // appear after 10 seconds
+// setInterval(chatbotcloud.diasppearChatCloud, 20000) //diasppear after another 10 seconds
diff --git a/neo_dolfin/templates/components/chatbotWidget.html b/neo_dolfin/templates/components/chatbotWidget.html
@@ -12,10 +12,12 @@ <h4 class="chatbox__heading--header">Chatbot</h4>
                 </div>
             </div>
             <div class="chatbox__messages">
-                <div></div>
+                <div>
+                </div>
             </div>
             <div class="chatbox__footer">
 
+
                 <input style="font-size: large; border-radius: 10px; border: none;" type="text"
                     placeholder="Write a message...">
                 <button class="chatbox__send--footer send__button"><svg xmlns="http://www.w3.org/2000/svg" width="25"
@@ -35,12 +37,14 @@ <h4 class="chatbox__heading--header">Chatbot</h4>
         </div>
 
         <div class="container" id="chatCloudID">
+
+            <div class="chatbox__button">
+                <button id="hover-button"><img src="{{url_for('static', filename='img/chat_724715.png')}}" /></button>
+            </div>
+
             <div class="text-cloud" id="chatbot-cloud">
                 <p class="h5">Hello, I'm the chatbot. <br> How can I help you today?</p>
             </div>
-            <div class="chatbox__button">
-                <button><img src="{{url_for('static', filename='img/chat_724715.png')}}" /></button>
-            </div>
 
         </div>
     </div>