chatbot implementation

package.json

@@ -6,7 +6,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.11",
-    "@mui/material": "^5.15.11",
+    "@mui/material": "^5.15.20",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -25,8 +25,10 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.22.2",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
+    "react-simple-chatbot": "^0.5.0",
     "react-toastify": "^10.0.5",
+    "styled-components": "^4.4.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,41 +1,31 @@
-import React from 'react'
-import {createContext, useState} from 'react';
-import Header from "./pages/header";
-import Timetable from './components/page4/timetable';
-import Footer from "./pages/footer";
-import Home from "./components/page1/Home";
-import Notice from "./components/page2/notice";
-import LoginSignup from './components/login/LoginSignup';
-
-// import { ThemeProvider } from './components/ThemeContext';
-// const ThemeContext = createContext();
-
+import React, { useState } from 'react';
+import Header from './pages/header';
+import Footer from './pages/footer';
+import Home from './components/page1/Home';
+import Notice from './components/page2/notice';
+import MyChatbot from './components/ChatBot/chatbot';
+import { ThemeProvider } from './Content/context';
 
 function App() {
+  const [theme, setTheme] = useState('dark');
 
-  // const [theme, setTheme] = useState("dark");
-  // const toggleTheme = () => {
-  //   setTheme((curr) => (curr === "light" ? "light ": "dark"));
-  // }
-
+  const toggleTheme = () => {
+    setTheme((currentTheme) => (currentTheme === 'light' ? 'dark' : 'light'));
+  };
 
   return (
-<div className="maintain">
-
-    {/* <ThemeContext.Provider value={{theme, toggleTheme}}> */}
-    {/* <div className='app' id={theme}> */}
-       <Header/>
-       <Notice/>
-
-         {/* <Timetable /> */}
-         <Home />
-        <Footer/>
-
-    {/* </div> */}
-    {/* </ThemeContext.Provider> */}
-
+    <div className="maintain">
+      <ThemeProvider>
+        <div className={`app ${theme}`}>
+          <Header />
+          <Notice />
+          <Home />
+          <MyChatbot />
+          <Footer />
+        </div>
+      </ThemeProvider>
     </div>
-  )
+  );
 }
 
-export default App
+export default App;

src/Content/context.js

@@ -1,4 +1,3 @@
-// ThemeContext.js
 import React, { createContext, useState, useEffect } from 'react';
 
 export const ThemeContext = createContext();
@@ -9,13 +8,8 @@ export const ThemeProvider = ({ children }) => {
   });
 
   useEffect(() => {
-    localStorage.setItem('theme',theme)
-    if(theme=='light'){
-      document.getElementsByTagName('body')[0].className='';
-    }  else{
-
-      document.getElementsByTagName('body')[0].className='active';
-    }
+    localStorage.setItem('theme', theme);
+    document.body.className = theme === 'light' ? '' : 'active';
   }, [theme]);
 
   const toggleTheme = () => {

src/components/ChatBot/chatbot.jsx

@@ -0,0 +1,175 @@
+import React, { Component } from 'react';
+import ChatBot from 'react-simple-chatbot';
+import { ThemeProvider } from 'styled-components';
+
+class MyChatbot extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      opened: false, // State to manage chatbot visibility
+    };
+  }
+
+  toggleChatbot = () => {
+    this.setState((prevState) => ({
+      opened: !prevState.opened,
+    }));
+  };
+
+  render() {
+    const steps = [
+      {
+        id: '1',
+        message: 'Welcome to 75%.com! What is your name?',
+        trigger: 'name',
+      },
+      {
+        id: 'name',
+        user: true,
+        trigger: 'sayHello',
+      },
+      {
+        id: 'sayHello',
+        message: 'Hi {previousValue}! Nice to meet you! Which year are you in?',
+        trigger: 'yearOptions',
+      },
+      {
+        id: 'yearOptions',
+        options: [
+          { value: 'Year1', label: 'Year 1', trigger: 'yearSelected' },
+          { value: 'Year2', label: 'Year 2', trigger: 'yearSelected' },
+          { value: 'Year3', label: 'Year 3', trigger: 'yearSelected' },
+          { value: 'Year4', label: 'Year 4', trigger: 'yearSelected' },
+        ],
+        hideInput: true,
+      },
+      {
+        id: 'yearSelected',
+        message: 'Great! How can I assist you further?',
+        trigger: 'options',
+      },
+      {
+        id: 'options',
+        options: [
+          { value: 'Quantum', label: 'Quantum', trigger: 'quantumSection' },
+          { value: 'Lecture', label: 'Lecture', trigger: 'lectureSection' },
+          { value: 'Syllabus', label: 'Syllabus', trigger: 'syllabusSection' },
+          { value: 'Timetable', label: 'Timetable', trigger: 'timetableSection' },
+          { value: 'PYQ', label: 'PYQ', trigger: 'pyqSection' },
+          { value: 'Notes', label: 'Notes', trigger: 'notesSection' },
+        ],
+      },
+      {
+        id: 'quantumSection',
+        message: 'You are in the Quantum section. How can I help you here?',
+        trigger: 'endOptions',
+      },
+      {
+        id: 'lectureSection',
+        message: 'You are in the Lecture section. How can I help you here?',
+        trigger: 'endOptions',
+      },
+      {
+        id: 'syllabusSection',
+        message: 'You are in the Syllabus section. How can I help you here?',
+        trigger: 'endOptions',
+      },
+      {
+        id: 'timetableSection',
+        message: 'You are in the Timetable section. How can I help you here?',
+        trigger: 'endOptions',
+      },
+      {
+        id: 'pyqSection',
+        message: 'You are in the PYQ section. How can I help you here?',
+        trigger: 'endOptions',
+      },
+      {
+        id: 'notesSection',
+        message: 'You are in the Notes section. How can I help you here?',
+        trigger: 'endOptions',
+      },
+      {
+        id: 'endOptions',
+        options: [
+          { value: 'restart', label: 'Restart Chat', trigger: 'restart' },
+          { value: 'end', label: 'End Chat', trigger: 'end' },
+        ],
+        hideInput: true,
+      },
+      {
+        id: 'restart',
+        message: 'Let’s start over!',
+        trigger: '1',
+      },
+      {
+        id: 'end',
+        component: (
+          <div>
+            Perfect! All the Best with your Exam Preparation!<br />
+            <button onClick={() => window.location.reload()} className="text-blue-500">
+              End Chat
+            </button>
+          </div>
+        ),
+        asMessage: true,
+        end: true,
+      },
+    ];
+
+    const theme = {
+      background: 'white',
+      headerBgColor: '#000000',
+      headerFontColor: '#FFFFFF',
+      headerFontSize: '20px',
+      botBubbleColor: '#000000',
+      botFontColor: '#FFFFFF',
+      userBubbleColor: '#FFFFFF',
+      userFontColor: '#000000',
+      fontFamily: 'Inter, sans-serif',
+    };
+
+    return (
+      <div className="App">
+        <ThemeProvider theme={theme}>
+          <ChatBot
+            headerTitle="75Bot"
+            steps={steps}
+            floating={true}
+            opened={true}
+            openedByDefault={true}
+            botDelay={0}
+            botAvatarStyle={{ left: '10px' }}
+            userDelay={0}
+            userAvatarStyle={{ left: '10px' }}
+          />
+        </ThemeProvider>
+        <style>
+          {`
+            .rsc-os-option-element {
+              display: inline-block;
+              margin-right: 10px;
+            }
+            .rsc-os-option-element button {
+              background-color: #000000;
+              color: #FFFFFF;
+              border-radius: 5px;
+              padding: 10px;
+              margin: 5px;
+            }
+            .rsc-os-option-element button:hover {
+              background-color: #555555;
+            }
+          `}
+        </style>
+      </div>
+    );  
+  }
+}
+
+export default MyChatbot;
+
+
+
+
+

src/components/page1/Home.js

@@ -14,7 +14,7 @@ function Home() {
       if (event.key === 'mode') {
         setValue(event.newValue);
       }
-      console.log('mpde')
+      console.log('mode')
     };
 
     window.addEventListener('storage', ()=>console.log('dfdfdf'));

src/components/page2/notice.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import '../page2/notice.css';
+
 function notice() {
   return (
     <div className='notices'>