Merge pull request #619 from MastanSayyad/tech

Chatbot "Enhancements" for Better UI/UX #609
Priyaaa1 · Jul 20, 2024 · 63d7dd3 · 63d7dd3
2 parents 9a4e719 + 41c0c22
commit 63d7dd3
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 32 deletions.
diff --git a/public/bot.gif b/public/bot.gif
diff --git a/public/botavtar.png b/public/botavtar.png
diff --git a/public/user.png b/public/user.png
diff --git a/src/Components/ChatAssistant/Avatar.jsx b/src/Components/ChatAssistant/Avatar.jsx
@@ -4,7 +4,7 @@ import "../ChatAssistant/ChatAssistant.css";
 export default function Avatar() {
   return (
     <div>
-      <img className="Avatar" src="chatbotLogo.jpeg"/>
+      <img className="Avatar" src="botavtar.png"/>
     </div>
   )
 }

diff --git a/src/Components/ChatAssistant/ChatAssistant.css b/src/Components/ChatAssistant/ChatAssistant.css
@@ -14,26 +14,32 @@
 .chatbot-scroll {
   ::-webkit-scrollbar {
     width: 8px;
-    /* Width of the scrollbar */
   }
 
   ::-webkit-scrollbar-track {
     background: #f1f1f1;
-    /* Color of the track */
   }
 
   ::-webkit-scrollbar-thumb {
     background: #007bff;
-    /* Color of the thumb */
     border-radius: 6px;
-    /* Roundness of the thumb */
   }
 }
 
 .react-chatbot-kit-chat-input {
   outline: none;
 }
 
+.react-chatbot-kit-chat-input {
+  width: 100% !important;
+  padding: 12.5px !important;
+  border: none !important;
+  font-size: 0.85rem !important;
+  border-top: 1px solid #d8d8d8 !important;
+  border-bottom-left-radius: 5px !important;
+  margin-bottom: 64px !important;
+  margin-left: 10px !important;}
+
 .react-chatbot-kit-chat-message-container {
   overflow-x: hidden;
   padding: 0.5px 5px 25px 5.5px;
@@ -42,6 +48,8 @@
 .react-chatbot-kit-user-chat-message {
   padding: 15px;
   margin-right: 9px;
+  border-radius: 10px;
+
 }
 
 .react-chatbot-kit-chat-input-form {
@@ -56,16 +64,21 @@
 }
 
 .react-chatbot-kit-chat-container {
-  width: 350px;
-  height: 450px;
+  width: 90vw;
+  max-width: 336px;
+  height: 97vh;
+  max-height: 475px;
   border: 2px solid blue;
-  border-radius: 5px;
+  border-radius: 22px;
+  overflow: hidden;
+  margin-bottom: 34px;
 }
 
 .react-chatbot-kit-chat-bot-message {
   margin-left: 10px;
   background-color: #2977f5;
   color: #f1f1f1;
+  border-radius: 13px;
 }
 
 .react-chatbot-kit-chat-bot-message-arrow {
@@ -82,27 +95,26 @@
   width: 90px;
   margin: 0px 10px;
 }
-.Logo:hover {
-
-  transition : 1s ;
-  box-shadow: 2px 2px 2px #76a0cc;
-  transform: scale(1.2);
 
+.Logo:hover {
+  transition: 1s;
+  transform: scale(1.1);
 }
 
 .Logo {
   cursor: pointer;
-  height: 50px;
-  width: 50px;
+  height: 70px;
+  width: 69px;
   border-radius: 50px;
   right: 12px;
+  margin-bottom: 4px;
 }
 
 .Avatar {
   height: 50px;
   width: 50px;
   border-radius: 50px;
-  margin-bottom: 30px;
+  margin-bottom: 10px;
 }
 
 .userAvatar {
@@ -123,14 +135,13 @@
 }
 
 .chatbot-container {
-  width: 350px;
+  width: 90vw;
+  max-width: 350px;
   overflow: hidden;
-  /* Hide overflow content */
   transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
   transform: translateY(100%);
   opacity: 0;
   pointer-events: none;
-  /* Prevent interaction when hidden */
 }
 
 .chatbot-container.open {
@@ -140,11 +151,45 @@
   pointer-events: auto;
 }
 
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.hidden .tooltiptext {
+  display: none;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 260px;
+  background-color: #007bff;
+  color: #fff;
+  text-align: center;
+  border-radius: 13px;
+  padding: 11px 10px;
+  position: absolute;
+  z-index: 50;
+  bottom: 105%;
+  left: -7%;
+  margin-left: -197px;
+  opacity: 0;
+  transition: opacity 0.3s;
+  font-size: 14px;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
 /* Responsive styles */
 @media (max-width: 768px) {
   .react-chatbot-kit-chat-container {
-    width: 300px;
-    height: 400px;
+    width: 80vw;
+    height: 80vh;
+    max-width: 300px;
+    max-height: 400px;
   }
 
   .chatbot {
@@ -173,7 +218,7 @@
 
   .react-chatbot-kit-chat-message-container {
     padding: 0.5px 3px 15px 3.5px;
-    max-height: 200px; /* Adjust height for medium screens */
+    max-height: 200px; 
   }
 
   .react-chatbot-kit-user-chat-message {
@@ -184,8 +229,10 @@
 
 @media (max-width: 480px) {
   .react-chatbot-kit-chat-container {
-    width: 250px;
-    height: 350px;
+    width: 70vw;
+    height: 70vh;
+    max-width: 250px;
+    max-height: 350px;
     border-width: 1px;
   }
 
@@ -201,7 +248,7 @@
 
   .react-chatbot-kit-chat-message-container {
     padding: 0.5px 3px 15px 3.5px;
-    max-height: 150px; /* Adjust height for small screens */
+    max-height: 150px; 
   }
 
   .react-chatbot-kit-chat-input-form {

diff --git a/src/Components/ChatAssistant/ChatAssistant.jsx b/src/Components/ChatAssistant/ChatAssistant.jsx
@@ -16,12 +16,15 @@ const ChatAssistant = () => {
 
   return (
     <div className="chatbot chatbot-scroll">
-      <img 
-        className="Logo" 
-        src={isOpen ? cancel_icon : "chatbotLogo.jpeg"} 
-        alt="Logo" 
-        onClick={toggleChatbot} 
-      />
+      <div className={`tooltip ${isOpen ? 'hidden' : ''}`}>
+        <img 
+          className="Logo" 
+          src={isOpen ? cancel_icon : "bot.gif"} 
+          alt="Logo" 
+          onClick={toggleChatbot} 
+        />
+        <span className="tooltiptext">Welcome to Start Connect-Hub. <br /> How can I help you?</span>
+      </div>
       {isOpen && 
         <Chatbot
           config={config}

diff --git a/src/Components/ChatAssistant/UserAvatar.jsx b/src/Components/ChatAssistant/UserAvatar.jsx
@@ -4,7 +4,7 @@ import "../ChatAssistant/ChatAssistant.css";
 export default function Avatar() {
   return (
     <div>
-      <img className="userAvatar" src="userAvatar.jpg"/>
+      <img className="userAvatar" src="user.png"/>
     </div>
   )
 }