From 47cb80308e6704b65700919be2d692bab6472a73 Mon Sep 17 00:00:00 2001
From: Sawan <sawankushwah457@gmail.com>
Date: Sat, 26 Oct 2024 01:50:19 +0530
Subject: [PATCH] Added AI supported chatbot

---
 client/src/App.jsx              | 36 ++++++++++++++++-----------------
 client/src/component/Footer.jsx | 24 ++++++++++++++++++++++
 client/src/css/ScrollTop.css    |  2 +-
 3 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 62cc01e..794387c 100644
--- a/client/src/App.jsx
+++ b/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,17 +52,17 @@ 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 */}
@@ -70,7 +70,7 @@ const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => {
 
       {/* 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'
diff --git a/client/src/component/Footer.jsx b/client/src/component/Footer.jsx
index da559d5..3922905 100644
--- a/client/src/component/Footer.jsx
+++ b/client/src/component/Footer.jsx
@@ -3,8 +3,32 @@ 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 { useEffect } from 'react';
 
 const Footer = (props) => {
+    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 */}
diff --git a/client/src/css/ScrollTop.css b/client/src/css/ScrollTop.css
index 308d15d..e595fae 100644
--- a/client/src/css/ScrollTop.css
+++ b/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;
 }