Merge pull request #351 from YadlaMani/main

fixed the chat bot styling
Akshatchaube01 · Jul 2, 2024 · 0f111bf · 0f111bf
2 parents b2b385a + cdec1f8
commit 0f111bf
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 35 deletions.
diff --git a/src/components/Chatbot.jsx b/src/components/Chatbot.jsx
@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import { Chatbot } from "react-chatbot-kit";
 import "react-chatbot-kit/build/main.css";
-import { AiOutlineComment, AiOutlineClose } from "react-icons/ai"; // Import icons
+import { AiOutlineComment, AiOutlineClose } from "react-icons/ai";
 import config from "../utils/config";
 import MessageParser from "../utils/messageParser";
 import ActionProvider from "../utils/actionProvider";
-import "./chatbot.css"; // Import CSS for styling
+import "./chatbot.css";
 
 const ChatbotComponent = () => {
   const [showChatbot, setShowChatbot] = useState(false);
@@ -17,11 +17,19 @@ const ChatbotComponent = () => {
   return (
     <div className="chatbot-container">
       <button className="chatbot-toggle-button" onClick={toggleChatbot}>
-        {showChatbot ? <AiOutlineClose size={24} /> : <AiOutlineComment size={24} />}
+        {showChatbot ? (
+          <AiOutlineClose size={24} />
+        ) : (
+          <AiOutlineComment size={24} />
+        )}
       </button>
       {showChatbot && (
         <div className="chatbot">
-          <Chatbot config={config} messageParser={MessageParser} actionProvider={ActionProvider} />
+          <Chatbot
+            config={config}
+            messageParser={MessageParser}
+            actionProvider={ActionProvider}
+          />
         </div>
       )}
     </div>

diff --git a/src/components/chatbot.css b/src/components/chatbot.css
@@ -1,3 +1,5 @@
+/* chatbot.css */
+
 .chatbot-container {
   position: fixed;
   bottom: 20px;
@@ -6,57 +8,42 @@
 }
 
 .chatbot-toggle-button {
-  background-color: #2847c3;
-  color: white;
+  background-color: #007bff;
   border: none;
   border-radius: 50%;
+  color: white;
   padding: 10px;
   cursor: pointer;
-  font-size: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 50px;
-  height: 50px;
-  position: relative;
-  z-index: 1001;
 }
 
 .chatbot-toggle-button:hover {
-  background-color: #4953a3;
+  background-color: #0056b3;
 }
 
 .chatbot {
-  width: 400px;
-  max-width: 90%;
-  z-index: 1000;
+  width: 280px;
+  height: 500px;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
   border-radius: 10px;
-  position: fixed;
-  bottom: 80px;
-  right: 20px;
+  overflow: hidden;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
 }
 
-@media (max-width: 600px) {
-  .chatbot {
-    width: 100%;
-    bottom: 70px;
-    right: 0;
-    left: 45;
-  }
+.chatbot .react-chatbot-kit-chat-container {
+  height: 100%;
 }
 
-.chatbot-initial {
-  font-family: Arial, sans-serif;
-  font-size: 24px;
-  font-weight: bold;
+.chatbot .react-chatbot-kit-chat-message-container {
+  flex-grow: 1;
+  overflow-y: auto;
 }
 
 .chatbot .react-chatbot-kit-chat-input {
-  background-color: rgb(224, 221, 221);
-  color: black;
-}
-
-.chatbot .react-chatbot-kit-chat-input::placeholder {
-  color: #323131;
+  border-top: 1px solid #ddd;
+  padding: 10px;
 }