Add files via upload

frontend-react/src/components/ChatbotComponent.js

 import React, {useEffect, useState} from 'react';
 import "../styles/style.css";
 import Header from "./Header";
-import InputArea from "./InputSection";
-import MessageArea from "./MessageSection";
+import InputSection from "./InputSection";
+import MessageSection from "./MessageSection";
 import Sidebar from "./Sidebar";
 import io from 'socket.io-client';
 
-import RightMessage from "./RightMessage";
-import LeftMessage from "./LeftMessage";
+import TextMessage from "./TextMessage";
 
 const socket = io();
 const ChatbotComponent = () => {
@@ -16,27 +15,29 @@ const ChatbotComponent = () => {
     ])
 
     const [theme, setTheme] = useState('light');
-    const [area, setArea] = useState('msg_area');
+    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...",
+        info: "Hey, Welcome to FoodWhizz, What would you like to have today? Say Hey to start...",
         date: getCurrentTime(),
         type: "left",
         name: "FoodWhizz"
       };
+    
     useEffect(() => {
-       
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         setMessages([greetingMessage]);
-      }, []);
+    }, []);
+
 
     // Function to handle theme button click
     function handleThemeButtonClick(){
 
         const head = document.getElementById("head");
         const input = document.getElementById("input");
-        const input_area = document.getElementById("input_area");
+        const input_section = document.getElementById("input_section");
         const container = document.getElementById("container");
         const body = document.getElementsByTagName("body")[0];
         const bar = document.getElementById("sidebar");
@@ -44,15 +45,15 @@ const ChatbotComponent = () => {
         if (theme === 'light'){
             setTheme('dark');
             setUpdate("https://upload.wikimedia.org/wikipedia/commons/3/38/Solid_white_bordered.png");
-            setArea('msg_area black');
+            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_area.style.background = 'black';
-            input_area.style.color = 'white';
-            input_area.classList.toggle("placeholder-white");
+            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';
@@ -62,15 +63,15 @@ const ChatbotComponent = () => {
         else {
             setTheme('light');
             setUpdate("reload.png");
-            setArea('msg_area');
+            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_area.style.background = 'white';
-            input_area.style.color = '#5b5b5b';
-            input_area.classList.remove("placeholder-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';
@@ -129,8 +130,8 @@ const ChatbotComponent = () => {
             <Sidebar themeButtonClick={handleThemeButtonClick} />
             <div className="main" id="container">
                 <Header update={Update} button={update} />
-                <MessageArea messages={messages} area={area} />
-                <InputArea send_button={addMessage} />
+                <MessageSection messages={messages} area={area} />
+                <InputSection send_button={addMessage} />
             </div>
             <footer>&copy; Copyright 2024</footer>
         </div>