Added AI supported chatbot

client/src/App.jsx

@@ -35,7 +35,7 @@ import { modeAtom } from "./atom/Atom";
 import ForgotPassword from "./component/ForgotPassword";
 import VerifyEmail from "./component/Verify";
 import NotFound from "./component/NotFound";
-import MiniChatbot from "./component/MiniChatbot";
+// import MiniChatbot from "./component/MiniChatbot";
 import ProgressBar from "./component/ProgressBar/ProgressBar";
 import ProtectedRoute from '../../client/src/component/ProtectedRoute'
 
@@ -52,25 +52,25 @@ const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => {
     <div className="h-full w-full">
       {/* Conditionally render the Navbar */}
       {/* {!hideNavbarRoutes.includes(location.pathname) && ( */}
-        <Navbar
-          title='BITBOX'
-          home='Home'
-          about='About Us'
-          community='Community'
-          BlogPage="Blogs"
-          discussion='Discussion'
-          showAlert={showAlert}
-          mode={mode}
-          toggleMode={toggleMode}
-        />
+      <Navbar
+        title='BITBOX'
+        home='Home'
+        about='About Us'
+        community='Community'
+        BlogPage="Blogs"
+        discussion='Discussion'
+        showAlert={showAlert}
+        mode={mode}
+        toggleMode={toggleMode}
+      />
       {/* )} */}
 
       {/* Main content */}
       {children}
 
       {/* Conditionally render the Footer */}
       {/* {!hideFooterRoutes.includes(location.pathname) && ( */}
-        <Footer mode={mode} setProgress={setProgress} setAlert={showAlert} />
+      <Footer mode={mode} setProgress={setProgress} setAlert={showAlert} />
       {/* )} */}
     </div>
   );
@@ -87,7 +87,7 @@ function App() {
   };
 
   const [progress, setProgress] = useState(0);
-  const [islogged,setloggedin]=useState(false)
+  const [islogged, setloggedin] = useState(false)
   useEffect(() => {
     const savedMode = localStorage.getItem("mode");
     if (savedMode) {
@@ -140,7 +140,7 @@ function App() {
             </div>
             <ProgressBar mode={mode} />
             <ScrollTop />
-            <MiniChatbot />
+            {/* <MiniChatbot /> */}
 
             {/* Wrap everything inside the Layout component */}
             <Layout
@@ -161,9 +161,9 @@ function App() {
                     />
                   }
                 />
-          <Route exact path="/discussion" element={<ProtectedRoute loggedin={islogged}><Discussion mode={mode} setProgress={setProgress} showAlert={showAlert} /></ProtectedRoute>} />
+                <Route exact path="/discussion" element={<ProtectedRoute loggedin={islogged}><Discussion mode={mode} setProgress={setProgress} showAlert={showAlert} /></ProtectedRoute>} />
                 <Route exact path="/community" element={<ProtectedRoute loggedin={islogged}><Community mode={mode} setProgress={setProgress} showAlert={showAlert} /></ProtectedRoute>} />
-               <Route exact path="/about" element={<ProtectedRoute loggedin={islogged}><About mode={mode} setProgress={setProgress} showAlert={showAlert} /></ProtectedRoute>} />
+                <Route exact path="/about" element={<ProtectedRoute loggedin={islogged}><About mode={mode} setProgress={setProgress} showAlert={showAlert} /></ProtectedRoute>} />
                 <Route
                   exact
                   path='/blog'
@@ -208,7 +208,7 @@ function App() {
                     />
                   }
                 />
-                 <Route exact path="/login" element={<Login mode={mode} setProgress={setProgress} showAlert={showAlert} loggedin={islogged} setloggedin={setloggedin}/>} />
+                <Route exact path="/login" element={<Login mode={mode} setProgress={setProgress} showAlert={showAlert} loggedin={islogged} setloggedin={setloggedin} />} />
                 <Route
                   exact
                   path='/signup'

client/src/component/Footer.jsx

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { FaXTwitter } from "react-icons/fa6";
 import { FaGithub, FaLinkedin, FaYoutube } from 'react-icons/fa';
-import React, { useState } from "react";
+
+import React, { useEffect, useState } from "react";
 const Footer = (props) => {
     const [email, setEmail] = useState("");
     const [message, setMessage] = useState("");
@@ -54,6 +55,31 @@ const Footer = (props) => {
             setEmail("");
         }, 7000);
     };
+    useEffect(() => {
+        // Configure the chatbot settings
+        window.embeddedChatbotConfig = {
+            chatbotId: "GzK_h2kRkJ8e-jLXJVgmy",
+            domain: "www.chatbase.co"
+        };
+
+        // Create the script element
+        const script = document.createElement('script');
+        script.src = "https://www.chatbase.co/embed.min.js";
+        script.defer = true;
+        script.setAttribute("chatbotId", "GzK_h2kRkJ8e-jLXJVgmy");
+        script.setAttribute("domain", "www.chatbase.co");
+
+        // Append the script to the body
+        document.body.appendChild(script);
+
+        // Cleanup function to remove the script on component unmount
+        return () => {
+            document.body.removeChild(script);
+        };
+    }, []);
+
+
+
     return (
         <>
             {/* Divider line */}

client/src/css/ScrollTop.css

@@ -2,7 +2,7 @@
     display: none;
     position: fixed;
     bottom: 20px;
-    right: 30px;
+    right: 80px;
     z-index: 999;
     transition-duration: 0.3s;
 }