Add files via upload

frontend-react/src/components/ChatbotComponent.js

@@ -3,25 +3,16 @@ import "../styles/style.css";
 import Header from "./Header";
 import InputSection from "./InputSection";
 import MessageSection from "./MessageSection";
-import Sidebar from "./Sidebar";
 import io from 'socket.io-client';
 
-import TextMessage from "./TextMessage";
-
 const socket = io();
 const ChatbotComponent = () => {
 
     const [messages, setMessages] = useState([
     ])
 
-    const [theme, setTheme] = useState('light');
-    const [area, setArea] = useState('msg_section');
-
-    const[update, setUpdate] = useState("reload.png");
-
     const greetingMessage = {
         info: "Hey, Welcome to FoodWhizz, What would you like to have today? Say Hey to start...",
-        date: getCurrentTime(),
         type: "left",
         name: "FoodWhizz"
       };
@@ -32,74 +23,18 @@ const ChatbotComponent = () => {
     }, []);
 
 
-    // Function to handle theme button click
-    function handleThemeButtonClick(){
-
-        const head = document.getElementById("head");
-        const input = document.getElementById("input");
-        const input_section = document.getElementById("input_section");
-        const container = document.getElementById("container");
-        const body = document.getElementsByTagName("body")[0];
-        const bar = document.getElementById("sidebar");
-        const labels = document.getElementsByTagName("ul")[0];
-        if (theme === 'light'){
-            setTheme('dark');
-            setUpdate("https://upload.wikimedia.org/wikipedia/commons/3/38/Solid_white_bordered.png");
-            setArea('msg_section black');
-            head.style.background = '#010507';
-            head.style.color = '#fd8d00';
-            head.style.borderBottom = '3px solid black';
-            input.style.background = '#010507';
-            input.style.borderTop = '3px solid black';
-            input_section.style.background = 'black';
-            input_section.style.color = 'white';
-            input_section.classList.toggle("placeholder-white");
-            body.style.background = ("recipe1.jpeg");
-            container.style.border = '3px solid black';
-            container.style.backgroundColor = '#010507';
-            bar.style.color = 'black';
-            labels.style.color = 'black';
-        }
-        else {
-            setTheme('light');
-            setUpdate("reload.png");
-            setArea('msg_section');
-            head.style.background = '#d0d0d0';
-            head.style.color = '#5b5b5b';
-            head.style.borderBottom = '3px solid white';
-            input.style.background = '#d0d0d0';
-            input.style.borderTop = '3px solid white';
-            input_section.style.background = 'white';
-            input_section.style.color = '#5b5b5b';
-            input_section.classList.remove("placeholder-white");
-            body.style.background = ("recipe.jpeg");
-            container.style.border = '3px solid white';
-            container.style.backgroundColor = '#d0d0d0';
-            bar.style.color = 'white';
-            labels.style.color = 'white';
-        }
-    };
-
     // Function to add user and bot messages
     function addMessage(value_info, value_type){
         const newUserMessage = createMessage(value_info, value_type, "User");
         setMessages([...messages, newUserMessage]);
         
         socket.emit('human',value_info)
-        socket.on('botmes',(data) =>{
+        socket.on('bot-message',(data) =>{
             const newBotMessage = createMessage(data, "left", "Bot");
             setMessages([...messages,newUserMessage,newBotMessage]);
         })
     }
 
-    // Function to get current time 
-    function getCurrentTime() {
-        const date = new Date();
-        const hours = date.getHours().toString().padStart(2, '0');
-        const minutes = date.getMinutes().toString().padStart(2, '0');
-        return `${hours}:${minutes}`;
-      }
-
     // Function to create a message object
     function createMessage(value_info, value_type, name){
         let date = new Date();
@@ -127,10 +62,9 @@ const ChatbotComponent = () => {
         <div>
             <input className="down_button" id="top-box" type="checkbox" hidden></input>
             <label className="down_label" htmlFor="top-box"></label>
-            <Sidebar themeButtonClick={handleThemeButtonClick} />
             <div className="main" id="container">
-                <Header update={Update} button={update} />
-                <MessageSection messages={messages} area={area} />
+                <Header update={Update}/>
+                <MessageSection messages={messages} area="msg_section" />
                 <InputSection send_button={addMessage} />
             </div>
             <footer>&copy; Copyright 2024</footer>

frontend-react/src/components/Header.js

@@ -5,10 +5,6 @@ const Header = (props) => {
     return (
       <div className="header" id="head">
         FoodWhizz
-        <button className="refresh" type="submit" onClick={props.update}>
-          <img className="update" src={props.button} alt="Refresh Button" />
-          <img className="update hover" src="reload1.png" alt="Hover Reload Button" />
-        </button>
       </div>
     );
   };

frontend-react/src/components/InputSection.js

 import React, {useRef, useState} from 'react';
 import '../styles/style.css';
 
-const InputArea = (props) => {
+const InputSection = (props) => {
 
     const [value, setValue] = useState("")
     const textareaRef = useRef(null);
@@ -23,7 +23,7 @@ const InputArea = (props) => {
 
     return (
         <div className="header_bottom" id="input">
-            <textarea id="input_area" ref={textareaRef} onKeyDown={handleKeyDown} placeholder="say HEY to start" value={value} onChange={event => setValue(event.target.value)}></textarea>
+            <textarea id="input_section" ref={textareaRef} onKeyDown={handleKeyDown} placeholder="say HEY to start" value={value} onChange={event => setValue(event.target.value)}></textarea>
             <button className="send_button" type="submit" id="send" onClick={HandleSend}>Send</button>
         </div>
     );
@@ -35,4 +35,4 @@ document.addEventListener('keydown', function(event) {
     }
 });
 
-export default InputArea;
+export default InputSection;