Merge branch 'main' into toast

frontend/src/App.js

@@ -11,16 +11,26 @@ import NotFound from "./Component/NotFound";
 import BackToTopButton from "./Component/BackToTopButton";
 import OpenSource from "./Component/OpenSource";
 import Review from "./Component/Review";
+
 import AOS from "aos";
 import "aos/dist/aos.css";
 import { Toaster } from "react-hot-toast";
 
+
+import AOS from 'aos';
+import 'aos/dist/aos.css';
+import { BrowserRouter } from 'react-router-dom';
+import ScrollToTop from "./Component/ScrollToTop";
 function App() {
   const [searchQuery, setSearchQuery] = useState("");
   AOS.init();
   return (
     <>
+      <BrowserRouter>
+      <ScrollToTop/>
       <Navbar setSearchQuery={setSearchQuery} />
+
+
       <Routes>
         <Route path="/" element={<Home searchQuery={searchQuery} />}></Route>
         <Route path="/bookmark" element={<BookMark />}></Route>
@@ -29,10 +39,16 @@ function App() {
         <Route path="/review" element={<Review />}></Route>
         <Route path="*" element={<NotFound />} /> {/* 404 route */}
       </Routes>
+
       <BackToTopButton />
       <Footer />
+
       <Toaster />
       <ChatAssistant />
+
+      <ChatAssistant/>
+      </BrowserRouter>
+
     </>
   );
 }

frontend/src/ChatAssistant/ChatAssistant.css

@@ -4,29 +4,30 @@
   right: 0;
   margin-right: 20px;
   margin-bottom: 12px;
+  z-index: 999;
 }
-.chatbot-close-animation{
+.chatbot-close-animation {
   animation: animate-close ease-in 0.3s forwards;
-
 }
-.chatbot-animation{
-
+.chatbot-animation {
   animation: animate ease-in 0.3s forwards;
 }
 @keyframes animate {
-  from{
+  from {
     height: 0px;
     /* width: 250px; */
-  }to{
+  }
+  to {
     height: 450px;
     width: 350px;
   }
 }
 @keyframes animate-close {
-  from{
+  from {
     height: 450px;
     width: 350px;
-  }to{
+  }
+  to {
     height: 0px;
     width: 0px;
   }
@@ -65,12 +66,17 @@
   height: 45px;
 }
 
-.Logo{
+.Logo {
   cursor: pointer;
+
   height:50px;
   width:50px;
 }
 
+
+  height: 50px;
+  width: 50px;
+}
 .Logo {
   height: 50px;
   width: 50px;
@@ -90,7 +96,15 @@
   width: 50px;
   border-radius: 50px;
 }
-
+.close-button {
+  background-color: #55a0ea;
+  height: 45px;
+  width: 45px;
+  border-radius: 50px;
+  color: white;
+  font-size: 20px;
+  cursor: pointer;
+}
 @media only screen and (max-width: 425px) {
   .chatbot {
     margin-right: 5px;

frontend/src/ChatAssistant/ChatAssistant.jsx

@@ -14,6 +14,14 @@ const ChatAssistant = () => {
   const toggleChatbot = () => {
     setIsOpen(!isOpen);
   };
+
+        <img className="Logo" src={chatbotLogo} alt="Logo" onClick={toggleChatbot} />}
+        <div className={`${isOpen?"chatbot-animation":"chatbot-close-animation"}`}>
+
+  const closeChatbot = () => {
+    setIsOpen(false);
+  };
+
   return (
     <div className="chatbot">
       <img
@@ -27,6 +35,7 @@ const ChatAssistant = () => {
         onMouseLeave={() => (document.querySelector(".Logo").src = chatbotLogo)}
       />
       {isOpen && (
+
         <div
           className={`${
             isOpen ? "chatbot-animation" : "chatbot-close-animation"
@@ -38,6 +47,40 @@ const ChatAssistant = () => {
             actionProvider={ActionProvider}
           />
         </div>
+
+        <div>
+          <img
+            className="Logo"
+            src={chatbotLogo}
+            alt="Logo"
+            onClick={toggleChatbot}
+          />
+          <button className="close-button" onClick={closeChatbot}>
+            X
+          </button>
+          <div
+            className={`${
+              isOpen ? "chatbot-animation" : "chatbot-close-animation"
+            }`}
+          >
+            {isOpen && (
+              <Chatbot
+                config={config}
+                messageParser={MessageParser}
+                actionProvider={ActionProvider}
+              />
+            )}
+          </div>
+        </div>
+
+      </div>
+
+    );
+  }
+
+
+export default ChatAssistant;
+
       )}
     </div>
   );

frontend/src/Component/ScrollToTop.jsx

@@ -0,0 +1,14 @@
+
+import {useEffect} from 'react'
+import { useLocation } from 'react-router-dom'
+
+function ScrollToTop() {
+  const { pathname } = useLocation();
+  useEffect(()=>{
+    window.scrollTo(0,0);
+  },[pathname])
+  return null;
+
+}
+
+export default ScrollToTop;

frontend/src/index.css

@@ -1,7 +1,7 @@
 :root,
 body,
 html {
-  overflow-x: hidden;
+  scrollbar-width: none; 
   height: 100%;
 }
 

frontend/src/index.js

@@ -5,8 +5,8 @@ import App from './App';
 import { Provider } from 'react-redux';
 import store from './Store/store'
 import Darkmode from 'darkmode-js';
-import { BrowserRouter } from 'react-router-dom';
 import Preloader from './Component/Preloader';
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 const options = {
@@ -29,12 +29,8 @@ darkmode.showWidget();
 
 
 root.render(
-  <React.StrictMode>
-    <BrowserRouter>
       <Provider store={store}>
-        {/* <App /> */}
+        { /*<App />*/ }
         <Preloader/>
       </Provider>
-    </BrowserRouter>
-  </React.StrictMode>
 );