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 "./Input_area";
+import MessageArea from "./Message_Area";
+import Sidebar from "./Sidebar";
+import io from 'socket.io-client';
+
+import RightMessage from "./Right_message";
+import LeftMessage from "./Left_message";
+
+const socket = io();
+const ChatbotComponent = () => {
+
+    const [messages, setMessages] = useState([
+    ])
+
+    const [theme, setTheme] = useState('light');
+    const [area, setArea] = useState('msg_area');
+
+    const[update, setUpdate] = useState("reload.png");
+
+    const greetingMessage = {
+        info: "Hey, Welcome to Recipe Selection System, Say Hi to start chat?",
+        date: getCurrentTime(),
+        type: "left",
+        name: "FoodWhizz"
+      };
+    useEffect(() => {
+       
+        setMessages([greetingMessage]);
+      }, []);
+
+
+
+    function handleButtonClick(){
+
+        const head = document.getElementById("head");
+        const input = document.getElementById("input");
+        const input_area = document.getElementById("input_area");
+        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_area 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");
+            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_area');
+            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");
+            body.style.background = ("recipe.jpeg");
+            container.style.border = '3px solid white';
+            container.style.backgroundColor = '#d0d0d0';
+            bar.style.color = 'white';
+            labels.style.color = 'white';
+        }
+    };
+
+    function AddMes(value_info, value_type){
+        var new_mes_right = Create(value_info, value_type, "User");
+        setMessages([...messages, new_mes_right]);
+        
+        socket.emit('human',value_info)
+        socket.on('botmes',(data) =>{
+            const new_mes = Create(data, "left", "Bot");
+            setMessages([...messages,new_mes_right,new_mes]);
+        })
+       
+        
+        
+    }
+    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 Create(value_info, value_type, name){
+        let date = new Date();
+        let minutes = date.getMinutes().toString();
+        if (date.getMinutes() < 10){
+            minutes = "0" + minutes.toString();
+        }
+        return(
+            {
+                info: value_info,
+                date: date.getHours().toString() + ":" + minutes,
+                type: value_type,
+                name: name
+            }
+        )
+
+    }
+    function Update(){
+        setMessages([greetingMessage])
+    }
+
+    return (
+        <div>
+            <input className="down_button" id="top-box" type="checkbox" hidden></input>
+            <label className="down_label" htmlFor="top-box"></label>
+            <Sidebar func={handleButtonClick} />
+            <div className="main" id="container">
+                <Header update={Update} button={update} />
+                <MessageArea messages={messages} area={area} />
+                <InputArea send_button={AddMes} />
+            </div>
+            <footer>&copy; Copyright 2023</footer>
+        </div>
+    );
+};
+
+export default ChatbotComponent;
\ No newline at end of file

frontend-react/src/components/Header.js

+import React from 'react';
+import "../styles/style.css";
+
+const Header = (props) => {
+    return (
+        <div className="header" id="head">FoodWhizz
+            <button className="refresh" type="submit" onClick={props.update}>
+                <img className="update"
+                     src={props.button}></img>
+                <img className="update hover"
+                     src="reload1.png"></img>
+            </button>
+        </div>
+    );
+};
+
+export default Header;
\ No newline at end of file

frontend-react/src/components/Input_area.js

+import React, {useRef, useState} from 'react';
+import '../styles/style.css';
+
+const InputArea = (props) => {
+
+    const [value, setValue] = useState("")
+    const textareaRef = useRef(null);
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            return false;
+        }
+    };
+
+    function HandleSend(){
+        if (value !== "") {
+            props.send_button(value, "right");
+            setValue("")
+        }
+
+    }
+
+    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>
+            <button className="send_button" type="submit" id="send" onClick={HandleSend}>Send</button>
+        </div>
+    );
+};
+
+document.addEventListener('keydown', function(event) {
+    if (event.key === 'Enter') {
+        document.getElementById('send').click();
+    }
+});
+
+export default InputArea;

frontend-react/src/components/Left_message.js

+import React from 'react';
+import Message from "./Message";
+import '../styles/style.css';
+
+const LeftMessage = (props) => {
+    return (
+        <div className="left_message">
+            <div className="icon left"></div>
+            <div className="msg left">
+                <Message message={props.left_message}/>
+            </div>
+        </div>
+    );
+};
+
+export default LeftMessage;
\ No newline at end of file

frontend-react/src/components/Message.js

+import React from 'react';
+import '../styles/style.css';
+
+const Message = (props) => {
+    return (
+            <div className="message">
+                <div className="mes_info">
+                    <div className="mes_header">{props.message.name}</div>
+                    <div className="mes_time">{props.message.date}</div>
+                </div>
+                <div className="mes_text">{props.message.info}</div>
+            </div>
+    );
+};
+
+export default Message;
\ No newline at end of file

frontend-react/src/components/Message_Area.js

+import React, {useEffect, useRef} from 'react';
+import LeftMessage from "./Left_message";
+import RightMessage from "./Right_message";
+import '../styles/style.css';
+
+const MessageArea = (props) => {
+
+    const End = useRef(null)
+
+    useEffect(() => {
+        if(props.messages.length > 0) {
+            scrollToBottom();
+        }
+        })
+
+    function scrollToBottom() {
+        End.current.scrollIntoView({behavior: "smooth"})
+    }
+
+    return (
+        <div className={props.area}>
+            {props.messages.map(mes => {
+                switch (mes.type) {
+                    case "right":
+                        return <RightMessage right_message={mes}/>;
+                    case "left":
+                        return <LeftMessage left_message={mes}/>;
+                }
+            })}
+            <div ref={End}></div>
+        </div>
+    );
+};
+
+export default MessageArea;
\ No newline at end of file

frontend-react/src/components/Right_message.js

+import React from 'react';
+import '../styles/style.css';
+import Message from "./Message";
+
+const RightMessage = (props) => {
+    return (
+        <div className="right_message">
+            <div className="icon"></div>
+            <div className="msg right">
+                <Message message={props.right_message}/>
+            </div>
+        </div>
+    );
+};
+
+export default RightMessage;
\ No newline at end of file

frontend-react/src/components/Sidebar.js

+import React from "react";
+import "../styles/style.css";
+
+function addText(text_for_sidebar) {
+    const area = document.getElementById("text");
+    area.innerText = text_for_sidebar;
+}
+
+const Sidebar = (props) => {
+
+    return (
+        <div id="sidebar">
+            <ul>
+                <li>
+                    <button className="bar" id="home">Home</button>
+                </li>
+                <li>
+                    <button className="bar"
+                            onClick={() => addText("Welcome to Recipe Bot WebPage." +
+                            "This bot is made to help you have proper recipes for the food you would love to have. Team Members:" +
+                            "Avanish Kumar Singh, Brahim Ghaouthi, Rashid Aghayev,Mamoun Mourad")}>About Us</button>
+                </li>
+                <li>
+                    <button className="bar" onClick={() => addText('you can add your emails here:\n' +
+                        'Avanish Kumar Singh:avanish.singh@stud.th-deg.de \nMamoun Mourad: \nRashid Aghayev: \nBrahim Ghaouthi: brahim.ghaouthi@stud.th-deg.de')}>Contact
+                    </button>
+                </li>
+                <button className="bar" id="dark_theme" onClick={props.func}>Change Mode</button>
+            </ul>
+            <p id="text"> Welcome to the Recipe Bot WebPage.
+                This bot is made to help you have proper recipes for the food you would love to have.
+                Team Members: Avanish Kumar Singh, Brahim Ghaouthi, Rashid Aghayev,Mamoun Mourad
+            </p>
+        </div>
+    );
+};
+
+export default Sidebar;
\ No newline at end of file