Merge pull request #1185 from MastanSayyad/main

Fixed and made Enhancements in Chatbot

Author: sanjay-kv

Website/index.html

@@ -192,7 +192,7 @@ <h3>Recommendation Models</h3>
     <!-- Chatbot Button -->
     <div class="chatbot-button" id="chatbot-button">
         <img src="assets/chatbot.png" height="50px" width="50px" id="chatbot-img" class="floating">
-        <!-- <svg fill="#444" width="163px" height="163px" viewBox="-0.96 -0.96 25.92 25.92" xmlns="http://www.w3.org/2000/svg" stroke="#444" stroke-width="0.00024000000000000003"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#fff" stroke-width="0.096"></g><g id="SVGRepo_iconCarrier"><path d="M21.928 11.607c-.202-.488-.635-.605-.928-.633V8c0-1.103-.897-2-2-2h-6V4.61c.305-.274.5-.668.5-1.11a1.5 1.5 0 0 0-3 0c0 .442.195.836.5 1.11V6H5c-1.103 0-2 .897-2 2v2.997l-.082.006A1 1 0 0 0 1.99 12v2a1 1 0 0 0 1 1H3v5c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5a1 1 0 0 0 1-1v-1.938a1.006 1.006 0 0 0-.072-.455zM5 20V8h14l.001 3.996L19 12v2l.001.005.001 5.995H5z"></path><ellipse cx="8.5" cy="12" rx="1.5" ry="2"></ellipse><ellipse cx="15.5" cy="12" rx="1.5" ry="2"></ellipse><path d="M8 16h8v2H8z"></path></g></svg> -->
+        <div class="tooltip">Welcome to RecodeHive - Machine Learning Repos, How can we help you?</div>
     </div>
 
      <!-- Chatbox -->

Website/styles.css

@@ -597,8 +597,57 @@ button#toggle-languages:hover {
     animation: fadeIn 1s ease-in-out;
 }
 
+.floating {
+    animation: floating 3s ease-in-out infinite;
+}
+
+@keyframes floating {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-7px);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
+.tooltip {
+    visibility: hidden;
+    background-color: #0D6EFD;
+    color: white;
+    text-align: center;
+    border-radius: 10px;
+    padding: 9px;
+    font-size: 15px;
+    position: absolute;
+    bottom: 70px;
+    right: -130px;
+    transform: translateX(-50%);
+    width: 270px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.chatbot-button:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+}
+
+/* Hided tooltip on touch devices */
+@media (hover: none) and (pointer: coarse), (max-width: 767px) {
+    .tooltip {
+        display: none;
+    }
+}
+
 .chatbot.active {
     display: flex;
+    margin-right: -18px;
+    margin-bottom: 50px;
 }
 
 .chatbot-header {