feat : chat bot integrated with queries

package.json

@@ -4,9 +4,10 @@
   "private": true,
   "dependencies": {
     "@emailjs/browser": "^4.3.3",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/material": "^5.16.1",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
     "@react-icons/all-files": "^4.1.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
@@ -17,6 +18,7 @@
     "framer-motion": "^11.3.2",
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
+    "react-chatbot-kit": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.12.0",
@@ -26,6 +28,7 @@
     "react-scripts": "5.0.1",
     "react-spinners": "^0.13.8",
     "react-toastify": "^9.1.3",
+    "styled-components": "^6.1.12",
     "tailwind-merge": "^2.4.0",
     "web-vitals": "^2.1.4"
   },

server/routes/student.js

@@ -2,11 +2,8 @@ const express = require("express");
 const { auth, studentAuth, isCanteen } = require("../middlewares/auth");
 const router = express.Router();
 const authController = require("../controllers/Auth");
-<<<<<<< HEAD
 const { getCanteenData } = require("../controllers/canteenController");
-=======
 const feedbackController = require("../controllers/feedbackController");
->>>>>>> 56cd98b40c82e9849270fe2c43ef735b8fe058bc
 
 router.post("/studentSignup", authController.studentSignup);
 router.post("/studentLogin", authController.studentLogin);
@@ -17,12 +14,9 @@ router.get("/resetPassword/:id/:token", authController.verifyLink);
 router.post("/newPassword/:id/:token", authController.resetPassword);
 router.get("/studentLogout", studentAuth, authController.studentLogout);
 router.get("/canteenLogout", auth, authController.canteenLogout);
-<<<<<<< HEAD
 router.get("/canteen/:id", getCanteenData);
-=======
 router.post('/submitFeedback', feedbackController.submitFeedback);
 
->>>>>>> 56cd98b40c82e9849270fe2c43ef735b8fe058bc
 router.post(
   "/changeStudentPassword",
   studentAuth,

src/components/Chatbot/Actionprovider.js

@@ -0,0 +1,56 @@
+class ActionProvider {
+    constructor(createChatBotMessage, setStateFunc) {
+      this.createChatBotMessage = createChatBotMessage;
+      this.setState = setStateFunc;
+    }
+
+    handleMenu = () => {
+      const message = this.createChatBotMessage("You can explore our canteen menus with various food options tailored to your taste. Would you like to see today's menu?");
+      this.updateChatbotState(message);
+    };
+
+    handleOrder = () => {
+      const message = this.createChatBotMessage("You can place an order directly from the menu. Let me guide you through the process.");
+      this.updateChatbotState(message);
+    };
+
+    handleDelivery = () => {
+      const message = this.createChatBotMessage("You can track your order status in real-time. Would you like to check your current order?");
+      this.updateChatbotState(message);
+    };
+
+    handleDiscounts = () => {
+      const message = this.createChatBotMessage("We have special offers available today! Want to hear about them?");
+      this.updateChatbotState(message);
+    };
+
+    handlePayment = () => {
+      const message = this.createChatBotMessage("We accept multiple payment methods. Need help with the checkout process?");
+      this.updateChatbotState(message);
+    };
+
+    handleAccount = () => {
+      const message = this.createChatBotMessage("You can manage your account settings or update your profile. Need assistance with something?");
+      this.updateChatbotState(message);
+    };
+
+    handleSupport = () => {
+      const message = this.createChatBotMessage("If you need any help, our support team is here for you. How can I assist you?");
+      this.updateChatbotState(message);
+    };
+
+    handleUnknown = () => {
+      const message = this.createChatBotMessage("I'm sorry, I didn't understand that. Could you please rephrase?");
+      this.updateChatbotState(message);
+    };
+
+    updateChatbotState(message) {
+      this.setState((prevState) => ({
+        ...prevState,
+        messages: [...prevState.messages, message],
+      }));
+    }
+  }
+
+  export default ActionProvider;
+

src/components/Chatbot/Chatmain.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import Chatbot from 'react-chatbot-kit'
+import { useState } from 'react'
+import 'react-chatbot-kit/build/main.css'
+import config from './config'
+import MessageParser from './Messageparser'
+import ActionProvider from './Actionprovider'
+import MarkUnreadChatAltIcon from '@mui/icons-material/MarkUnreadChatAlt';
+import CloseIcon from '@mui/icons-material/Close';
+import './chat.css'
+import { createChatBotMessage } from 'react-chatbot-kit'
+
+
+export const Chatmain = () => {
+
+    const [showchat , setShowchat] = useState(false)
+    const  initialMessages =  [
+        createChatBotMessage(`Hello! 👋  Welcome to Foodies . How can I help you today?`, {
+          widget: "productOptions",
+        }),
+      ] 
+
+      const botName = 'Foodies bot'
+      const updatedconfig = {
+        ...config  ,
+        botName ,
+        initialMessages
+      }
+  return (
+   <>
+      <div className='flex justify-end'>
+
+           <div onClick={() => setShowchat(prev => !prev)} className='chat-toggle-button mr-3 bg-blue-500 fixed p-2 rounded-full cursor-pointer hover:shadow-lg hover:scale-105 ease-in-out bottom-6'> 
+                 {!showchat ? <MarkUnreadChatAltIcon  fontSize='large' style={{color : 'white'}}/> : <CloseIcon fontSize='large' style={{color : 'white'}}/>} 
+           </div>
+
+           <div className={`chatbot-container fixed bottom-6 rounded-md right-[70px] ${showchat ? 'chatbot-show' : 'chatbot-hide'} `}>
+
+                    <Chatbot config={updatedconfig} messageParser={MessageParser} actionProvider={ActionProvider}  />
+           </div>
+
+      </div>
+   </>
+  )
+}

src/components/Chatbot/Messageparser.js

@@ -0,0 +1,34 @@
+class MessageParser {
+    constructor(actionProvider) {
+      this.actionProvider = actionProvider;
+    }
+
+    parse(message) {
+      const lowerCaseMessage = message.toLowerCase();
+
+      if (this.containsKeywords(lowerCaseMessage, ["menu", "food", "canteen", "dining"])) {
+        this.actionProvider.handleMenu();
+      } else if (this.containsKeywords(lowerCaseMessage, ["order", "place order", "buy"])) {
+        this.actionProvider.handleOrder();
+      } else if (this.containsKeywords(lowerCaseMessage, ["delivery", "track order", "status"])) {
+        this.actionProvider.handleDelivery();
+      } else if (this.containsKeywords(lowerCaseMessage, ["discount", "offer", "deal"])) {
+        this.actionProvider.handleDiscounts();
+      } else if (this.containsKeywords(lowerCaseMessage, ["payment", "checkout", "billing"])) {
+        this.actionProvider.handlePayment();
+      } else if (this.containsKeywords(lowerCaseMessage, ["account", "profile", "settings"])) {
+        this.actionProvider.handleAccount();
+      } else if (this.containsKeywords(lowerCaseMessage, ["support", "help", "contact"])) {
+        this.actionProvider.handleSupport();
+      } else {
+        this.actionProvider.handleUnknown();
+      }
+    }
+
+    containsKeywords(message, keywords) {
+      return keywords.some(keyword => message.includes(keyword));
+    }
+  }
+
+  export default MessageParser;
+

src/components/Chatbot/ProductOption.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import LaunchRoundedIcon from '@mui/icons-material/LaunchRounded';
+import styled from 'styled-components';
+
+const Button = styled.button`
+  
+  background-color: #A9A9A9; /* Change to a more vibrant color */
+  color: white;
+  border: none;
+  border-radius: 5px;
+  padding: 4px 10px;
+  margin: 8px;
+  font-size: 12px;
+  font-weight: 400;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+  
+
+  &:hover {
+    background-color: #808080; /* Slightly darker shade on hover */
+    transform: scale(1.05); /* Slight zoom effect */
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  svg {
+    margin-right:3px; /* Space between icon and text */
+  }
+`;
+
+const OptionsContainer = styled.div`
+  margin-left  : 80px
+`;
+
+const ProductOptions = (props) => {
+    //"menu", "food", "canteen", "dining"
+  const options = [
+    { text: "Menu", handler: props.actionProvider.handleMenu, id: 1 },
+    { text: "Order", handler: props.actionProvider.handleOrder, id: 2 },
+    { text: "Status", handler: props.actionProvider.handleDelivery, id: 3 },
+    { text: "Help", handler: props.actionProvider.handleSupport, id: 4 },
+  ];
+
+  const optionsMarkup = options.map((option) => (
+    <Button key={option.id} onClick={option.handler}>
+      <LaunchRoundedIcon />{option.text}
+    </Button>
+  ));
+
+  return <OptionsContainer>{optionsMarkup}</OptionsContainer>;
+};
+
+export default ProductOptions;

src/components/Chatbot/chat.css

@@ -0,0 +1,27 @@
+
+.chatbot-container {
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    transform: translateY(100%);
+    opacity: 0;
+    z-index: 1000; /* Ensure the chatbot is on top */
+    border-radius: 8px;
+     /* Add border radius if needed */
+  }
+
+  .chatbot-show {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  .chatbot-hide {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  .chat-toggle-button {
+    z-index: 1100;
+     /* Higher than chatbot-container */
+  }
+
+
+

src/components/Chatbot/config.js

@@ -0,0 +1,28 @@
+import { createChatBotMessage } from 'react-chatbot-kit';
+import ProductOptions from './ProductOption';
+
+
+const config = {
+    botName: "Leads Bot",
+    initialMessages: [
+      createChatBotMessage("Hello! Welcome to Leads . How can I help you today?", {
+        widget: "productOptions",
+      }),
+    ],
+    widgets: [
+      {
+        widgetName: "productOptions",
+        widgetFunc: (props) => <ProductOptions {...props} />,
+      },
+    ],
+    customStyles: {
+      botMessageBox: {
+        backgroundColor: "#007FFF"
+      },
+      chatButton: {
+        backgroundColor: "",
+      },
+    }
+}
+
+export default config

src/pages/Home.jsx

@@ -10,6 +10,7 @@ import Footer from "../components/Footer";
 import FloatBtn from "../components/FloatBtn/FloatBtn";
 import { useAuth } from "../authContext";
 import { useNavigate } from "react-router-dom";
+import { Chatmain } from "../components/Chatbot/Chatmain";
 function Home() {
   const navigate = useNavigate();
   const { isAuthenticated } = useAuth();
@@ -136,6 +137,7 @@ function Home() {
           <div className="text-center">
             <CanteenList canteenData={filteredCanteenData} />
           </div>
+          <Chatmain />
           <Footer />
         </div>
       )}

src/pages/SectionPage.jsx

@@ -11,6 +11,7 @@ import { ThemeContext } from "../themeContext";
 import { FaRegEdit } from "react-icons/fa";
 import { CiBoxList } from "react-icons/ci";
 import { IoMdAdd } from "react-icons/io";
+import { Chatmain } from "../components/Chatbot/Chatmain";
 const SectionPage = () => {
   const { _id } = useParams();
   const navigate = useNavigate();
@@ -121,6 +122,7 @@ const SectionPage = () => {
           </>
         )}
       </div>
+      <Chatmain />
       <Footer />
     </div>
   );