diff --git a/frontend-react/src/components/Chatbot.js b/frontend-react/src/components/Chatbot.js
new file mode 100644
index 0000000000000000000000000000000000000000..2b80524f245c61b6e096e6192326820658e627cb
--- /dev/null
+++ b/frontend-react/src/components/Chatbot.js
@@ -0,0 +1,133 @@
+import React, {useEffect, useState} from "react";
+import "../images/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 RightMessage from "./Right_message";
+import LeftMessage from "./Left_message";
+
+const socket = io();
+const Chatbot = () => {
+
+ const [messages, setMessage] = useState([])
+ const [theme, setTheme] = useState('Light');
+ const [area, setArea] = useState('msg_sec');
+
+ const [update, setUpdate] = useState('https://upload.wikimedia.org/wikipedia/commons/b/bc/Refresh_icon.png');
+
+ const greetingMessage = {
+ info: "Hey, Welcome to Recipe Selection System, Say Hi to start chat?",
+ date: getCurrentTime(),
+ type: "left",
+ name: "FoodWhizz Bot"
+ };
+ useEffect(() => {
+ setMessage([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_sec black');
+ head.style.background = '#010507';
+ head.style.color = '#ffffff';
+ 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 = 'linear-gradient(135deg, #000102 0%, #173146 100%)';
+ container.style.border = '3px solid black';
+ container.style.backgroundColor = '#010507';
+ bar.style.color = 'black';
+ labels.style.color = 'black';
+ }
+ else {
+ setTheme('light');
+ setUpdate("https://upload.wikimedia.org/wikipedia/commons/b/bc/Refresh_icon.png");
+ setArea('msg_sec');
+ 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 = 'linear-gradient(135deg, #a7acad 0%, #bac5cc 100%)';
+ 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");
+ setMessage([...messages, new_mes_right]);
+
+ socket.emit('human', value_info)
+ socket.on('botmes', (dat) =>{
+ 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() {
+ setMessage([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}/>
+ <MessageSection messages={messages} area={area}/>
+ <InputSection send_button={AddMes}/>
+ </div>
+ <footer>© Copyright 2023</footer>
+ </div>
+ );
+};
+
+export default Chatbot;
diff --git a/frontend-react/src/components/Header.js b/frontend-react/src/components/Header.js
new file mode 100644
index 0000000000000000000000000000000000000000..c0b63a1144d183d4ef665b7a673795c924d6b158
--- /dev/null
+++ b/frontend-react/src/components/Header.js
@@ -0,0 +1,15 @@
+import React from "react";
+import "../images/style.css";
+
+const Header = (props) => {
+ return (
+ <div className="header" id="head">Chatbot
+ <button className="refresh" type="submit" onClick={props.update}>
+ <img className="update hover"
+ src="refresh.png"></img>
+ </button>
+ </div>
+ );
+};
+
+export default Header;
\ No newline at end of file
diff --git a/frontend-react/src/components/InputSection.js b/frontend-react/src/components/InputSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..fd53633d4c384d8a40acd22eb38b59a5c57513ba
--- /dev/null
+++ b/frontend-react/src/components/InputSection.js
@@ -0,0 +1,37 @@
+import React, {useRef, useState} from "react";
+import '../images/style.css';
+
+const InputSection = (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_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>
+ );
+};
+
+document.addEventListener('keydown', function (event){
+ if (event.key === 'Enter') {
+ document.getElementById('send').click();
+ }
+});
+
+export default InputSection;
\ No newline at end of file
diff --git a/frontend-react/src/components/Left_message.js b/frontend-react/src/components/Left_message.js
new file mode 100644
index 0000000000000000000000000000000000000000..2da5facb8cf5cc994bbf46b1345a2fe5234ee4d4
--- /dev/null
+++ b/frontend-react/src/components/Left_message.js
@@ -0,0 +1,16 @@
+import React from "react";
+import Message from "./Message";
+import '../images/style.css';
+
+const LeftMessage = (props) => {
+ return (
+ <div className="left_message">
+ <div className="icon left"></div>
+ <div className="msg left">
+ <Message message={props.left_message}></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..937921220b2f9850a35873013d9594d1bbf67423
--- /dev/null
+++ b/frontend-react/src/components/Message.js
@@ -0,0 +1,16 @@
+import React from "react";
+import '../images/style.css';
+
+const Message = (props) => {
+ return (
+ <div className="message">
+ <div className="msg_info">
+ <div className="mes_header">{props.message.name}</div>
+ <div className="mes_time">{props.message.data}</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/MessageSection.js b/frontend-react/src/components/MessageSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..ee77725d9ad3c35d7212be75018675849ab42811
--- /dev/null
+++ b/frontend-react/src/components/MessageSection.js
@@ -0,0 +1,34 @@
+import React, {useEffect, useRef} from "react";
+import LeftMessage from "./Left_message";
+import RightMessage from "./Right_message";
+import '../images/style.css';
+
+const MessageSection = (props) => {
+ const End = useRef(null)
+
+ useEffect(() => {
+ if (props.message.length > 0 ) {
+ scrollToBottom();
+ }
+ })
+
+ function scrollToBottom() {
+ End.current.scrollIntoView({behavior: "smooth"})
+ }
+
+ return(
+ <div className={props.area}>
+ {props.message.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 MessageSection;
\ 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..8dc95cdabea5027765e716e037f220c63e8a369c
--- /dev/null
+++ b/frontend-react/src/components/Right_message.js
@@ -0,0 +1,16 @@
+import React from "react";
+import '../images/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..ef1eb6b16a159a294b5230d4843c3356a48dbaee
--- /dev/null
+++ b/frontend-react/src/components/Sidebar.js
@@ -0,0 +1,38 @@
+import React from "react";
+import '../images/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