diff --git a/frontend-react/src/components/ChatbotComponent.js b/frontend-react/src/components/ChatbotComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..5b169bbe7d5ce75a0d88690bbeacad01b41c9db9
--- /dev/null
+++ b/frontend-react/src/components/ChatbotComponent.js
@@ -0,0 +1,140 @@
+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>© Copyright 2023</footer>
+ </div>
+ );
+};
+
+export default ChatbotComponent;
\ No newline at end of file
diff --git a/frontend-react/src/components/Header.js b/frontend-react/src/components/Header.js
new file mode 100644
index 0000000000000000000000000000000000000000..01f84d42bae50a31280773de4af03ead1d1aef5a
--- /dev/null
+++ b/frontend-react/src/components/Header.js
@@ -0,0 +1,17 @@
+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
diff --git a/frontend-react/src/components/Input_area.js b/frontend-react/src/components/Input_area.js
new file mode 100644
index 0000000000000000000000000000000000000000..ecf8558a252ed2c93ab13a0ac596ba2b28a76294
--- /dev/null
+++ b/frontend-react/src/components/Input_area.js
@@ -0,0 +1,37 @@
+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;
diff --git a/frontend-react/src/components/Left_message.js b/frontend-react/src/components/Left_message.js
new file mode 100644
index 0000000000000000000000000000000000000000..95afdf12801363cceb7877e2b6cc9cfa79015bc8
--- /dev/null
+++ b/frontend-react/src/components/Left_message.js
@@ -0,0 +1,16 @@
+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
diff --git a/frontend-react/src/components/Message.js b/frontend-react/src/components/Message.js
new file mode 100644
index 0000000000000000000000000000000000000000..e8288dca7675b448a6af3f88533b74b441a18494
--- /dev/null
+++ b/frontend-react/src/components/Message.js
@@ -0,0 +1,16 @@
+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
diff --git a/frontend-react/src/components/Message_Area.js b/frontend-react/src/components/Message_Area.js
new file mode 100644
index 0000000000000000000000000000000000000000..d9222fcdad8b84c62c2fabe9c692c2d6a204a0e9
--- /dev/null
+++ b/frontend-react/src/components/Message_Area.js
@@ -0,0 +1,35 @@
+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
diff --git a/frontend-react/src/components/Right_message.js b/frontend-react/src/components/Right_message.js
new file mode 100644
index 0000000000000000000000000000000000000000..b5a21a5d4492fb45620b0178ff1d055dce1a32d4
--- /dev/null
+++ b/frontend-react/src/components/Right_message.js
@@ -0,0 +1,16 @@
+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
diff --git a/frontend-react/src/components/Sidebar.js b/frontend-react/src/components/Sidebar.js
new file mode 100644
index 0000000000000000000000000000000000000000..7169866d2ebf1bd45c6643ba2f91ccf6e67fac45
--- /dev/null
+++ b/frontend-react/src/components/Sidebar.js
@@ -0,0 +1,38 @@
+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