Delete frontend-react/src directory

frontend-react/src/App.js

-import React from "react";
-import image from "./images/recipe.jpg";
-import "/App.css";
-import ChatBotRobot from "./Chatbotcomponent";
-
-function App() {
-    return (
-        <span>
-      <div className="App" style={{ backgroundImage:`url(${image})`,backgroundRepeat:"no-repeat",backgroundSize:"cover" }}>
-        <header className="App-header">
-          <h3> RECIPE EXPERTS. </h3>
-          <p> Welcomes you's to the smart assistance by our Sam the Advisor. </p>
-        </header>
-      </div>
-      <ChatBotRobot />
-    </span>
-    );
-}
-
-export default App;

frontend-react/src/App.test.js

-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-    const { getByText } = render(<App />);
-    const linkElement = getByText(/learn react/i);
-    expect(linkElement).toBeInTheDocument();
-});

frontend-react/src/Chatbot.js

-import React, {useEffect, useState} from "react";
-import './Chatbot.css';
-
-import {Header} from "./Header";
-import {UserInput} from "./UserInput";
-import {MessageArea} from "./MessageArea";
-
-import {io} from "socket.io-client";
-const socket = io("ws://localhost:5000");
-
-function Chatbot() {
-    /*
-      Handle messages
-     */
-    const [messages, setMessages] = useState([{
-        text: "Hello, i am the Internet Technologies Chatbot, how can i help you?",
-        position: "left"
-    }]);
-
-    useEffect(() => {
-        //if last message is a non-empty question, ask the server
-        let lastMessage = messages[messages.length - 1]
-        if (lastMessage.text !== "" && lastMessage.position === "right") {
-            socket.emit('question', lastMessage.text);
-        }
-
-        //handle server responses
-        socket.on("answer", (data) => {
-            setMessages([...messages, {text: data, position: "left"}])
-        });
-
-    }, [messages]);
-
-    function onSubmitMessage(inputText) {
-        setMessages([...messages, {text: inputText, position: "right"}])
-    }
-
-    /*
-      Render HTML
-    */
-    return (
-        <div className="chat_window">
-            <Header />
-            <MessageArea messages={messages} />
-            <UserInput onSubmitMessage={onSubmitMessage} />
-        </div>
-    );
-}
-
-export default Chatbot;

frontend-react/src/Chatbotcomponent.jsx

-import React from "react";
-import { Launcher } from "react-chat-window"
-import io from "socket.io-client";
-
-class ChatBotRobot extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            messageList: [],
-            socket: io("http://localhost:3000"),
-            room: "user1",
-        }
-
-    }
-
-    UNSAFE_componentWillMount() {
-        this._sendMessage("Hello! Welcome to 'RESWHIZ'. I am your RECIPE recommendation assistance. Would you like to see what can I do?Type 'start' to get started. !");
-    }
-
-    componentDidMount() {
-        this.state.socket.connect(true);
-        this.state.socket.emit('join', this.state.room);
-
-        this.state.socket.on("send-msg-response", async (msg) => {
-            this.state.messageList.pop();
-            await this.setState({
-                messageList: [...this.state.messageList]
-            })
-
-            this._sendMessage(msg);
-        })
-
-    }
-
-    async _onMessageWasSent(message) {
-        await this.setState({
-            messageList: [...this.state.messageList, message]
-        })
-
-        this._sendMessage("••••");
-        console.log(message.data.text);
-        await this.state.socket.emit('new-msg', { msg: message.data.text, room: this.state.room })
-
-    }
-
-    _sendMessage(text) {
-        if (text.length > 0) {
-            this.setState({
-                messageList: [...this.state.messageList, {
-                    author: 'them',
-                    type: 'text',
-                    data: { text }
-                },]
-            })
-        }
-    }
-
-    render() {
-
-        return (
-            <div id="chatbox" className="chatbox">
-                <Launcher
-                    agentProfile={{
-                        teamName: 'RESWHIZ',
-                        image: 'Chatbot.png'
-                    }}
-                    onMessageWasSent={this._onMessageWasSent.bind(this)}
-                    messageList={this.state.messageList}
-                    showEmoji
-                />
-            </div>
-        );
-    }
-}
-
-export default ChatBotRobot;

frontend-react/src/Header.css

-.top_menu {
-    background-color: #fff;
-    width: 100%;
-    padding: 20px 0 15px;
-    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
-}
-.top_menu .buttons {
-    margin: 3px 0 0 20px;
-    position: absolute;
-}
-.top_menu .buttons .button {
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    display: inline-block;
-    margin-right: 10px;
-    position: relative;
-}
-.top_menu .buttons .button.close {
-    background-color: #f5886e;
-}
-.top_menu .buttons .button.minimize {
-    background-color: #fdbf68;
-}
-.top_menu .buttons .button.maximize {
-    background-color: #a3d063;
-}
-.top_menu .title {
-    text-align: center;
-    color: #bcbdc0;
-    font-size: 20px;
-}

frontend-react/src/Header.js

-import React from "react";
-import './Header.css'
-
-function Header() {
-    return (
-        <div className="top_menu">
-            <div className="buttons">
-                <div className="button close"/>
-                <div className="button minimize"/>
-                <div className="button maximize"/>
-            </div>
-            <div className="title">Chat</div>
-        </div>
-    )
-}
-
-export {Header}
\ No newline at end of file

frontend-react/src/Message.css

-#messages .message {
-    clear: both;
-    overflow: hidden;
-    margin-bottom: 20px;
-    transition: all 0.5s linear;
-    opacity: 0;
-}
-#messages .message.left .avatar {
-    background-color: #f5886e;
-    float: left;
-}
-#messages .message.left .text_wrapper {
-    background-color: #ffe6cb;
-    margin-left: 20px;
-}
-#messages .message.left .text_wrapper::after, #messages .message.left .text_wrapper::before {
-    right: 100%;
-    border-right-color: #ffe6cb;
-}
-#messages .message.left .text {
-    color: #c48843;
-}
-#messages .message.right .avatar {
-    background-color: #fdbf68;
-    float: right;
-}
-#messages .message.right .text_wrapper {
-    background-color: #c7eafc;
-    margin-right: 20px;
-    float: right;
-}
-#messages .message.right .text_wrapper::after, #messages .message.right .text_wrapper::before {
-    left: 100%;
-    border-left-color: #c7eafc;
-}
-#messages .message.right .text {
-    color: #45829b;
-}
-#messages .message.appeared {
-    opacity: 1;
-}
-#messages .message .avatar {
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    display: inline-block;
-}
-#messages .message .text_wrapper {
-    display: inline-block;
-    padding: 20px;
-    border-radius: 6px;
-    width: calc(100% - 85px);
-    min-width: 100px;
-    position: relative;
-}
-#messages .message .text_wrapper::after, #messages .message .text_wrapper:before {
-    top: 18px;
-    border: solid transparent;
-    content: " ";
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-}
-#messages .message .text_wrapper::after {
-    border-width: 13px;
-    margin-top: 0px;
-}
-#messages .message .text_wrapper::before {
-    border-width: 15px;
-    margin-top: -2px;
-}
-#messages .message .text_wrapper .text {
-    font-size: 18px;
-    font-weight: 300;
-}
\ No newline at end of file

frontend-react/src/Message.js

-import React from "react";
-import './Message.css'
-
-function Message(props) {
-
-    return (
-        <li className={"message appeared " + props.position}>
-            <div className="avatar"/>
-            <div className="text_wrapper">
-                <div className="text">{props.text}</div>
-            </div>
-        </li>
-    )
-}
-
-export {Message}
\ No newline at end of file

frontend-react/src/MessageArea.css

-#messages {
-    position: relative;
-    list-style: none;
-    padding: 20px 10px 0 10px;
-    margin: 0;
-    height: 347px;
-    overflow: scroll;
-}
\ No newline at end of file

frontend-react/src/MessageArea.js

-import React, {useEffect, useRef} from "react";
-import './MessageArea.css'
-import {Message} from "./Message";
-
-function MessageArea(props) {
-
-    /*
-      Autoscrolling
-     */
-    const messagesEndRef = useRef(null)
-
-    useEffect(() => {
-        //scroll to bottom when a message is sent or received
-        if (props.messages.length > 1) {
-            scrollToBottom();
-        }
-    })
-
-    function scrollToBottom() {
-        messagesEndRef.current.scrollIntoView({behavior: "smooth"})
-    }
-
-    return (
-        <ul id="messages">
-            {props.messages.map((item, i) =>
-                (<Message text={item.text} position={item.position}/>))}
-            <li ref={messagesEndRef}/>
-        </ul>
-    )
-}
-
-export {MessageArea}
\ No newline at end of file

frontend-react/src/UserInput.css

-.bottom_wrapper {
-    position: relative;
-    width: 100%;
-    background-color: #fff;
-    padding: 20px 20px;
-    bottom: 0;
-}
-.bottom_wrapper .message_input_wrapper {
-    display: inline-block;
-    height: 50px;
-    border-radius: 25px;
-    border: 1px solid #bcbdc0;
-    width: calc(100% - 160px);
-    position: relative;
-    padding: 0 20px;
-}
-.bottom_wrapper .message_input_wrapper .message_input {
-    border: none;
-    height: 100%;
-    box-sizing: border-box;
-    width: calc(100% - 40px);
-    position: absolute;
-    outline-width: 0;
-    color: gray;
-}
-.bottom_wrapper .send_message {
-    width: 140px;
-    height: 50px;
-    display: inline-block;
-    border-radius: 50px;
-    background-color: #a3d063;
-    border: 2px solid #a3d063;
-    color: #fff;
-    cursor: pointer;
-    transition: all 0.2s linear;
-    text-align: center;
-    float: right;
-}
-.bottom_wrapper .send_message:hover {
-    color: #a3d063;
-    background-color: #fff;
-}
-.bottom_wrapper .send_message .text {
-    font-size: 18px;
-    font-weight: 300;
-    display: inline-block;
-    line-height: 48px;
-}
-
-.message_template {
-    display: none;
-}
\ No newline at end of file

frontend-react/src/UserInput.js

-import React, {useState} from "react";
-import './UserInput.css'
-
-function UserInput(props) {
-
-    /*
-    Handle input text
-    */
-    const [inputText, setInputText] = useState("")
-
-    function handleChange(e) {
-        setInputText(e.target.value)
-    }
-
-    function handleSubmit() {
-        props.onSubmitMessage(inputText);
-        setInputText("");
-    }
-
-    return (
-        <div className="bottom_wrapper clearfix">
-            <div className="message_input_wrapper">
-                <input className="message_input" value={inputText} onChange={handleChange}
-                       placeholder="Type your message here..."/>
-            </div>
-            <div className="send_message" onClick={handleSubmit}>
-                <div className="icon"/>
-                <div className="text">Send</div>
-            </div>
-        </div>
-    )
-}
-
-export {UserInput}
\ No newline at end of file

frontend-react/src/images/style.css

-body{
-    background: linear-gradient(135deg, #a7acad 0%, #bac5cc 100%);
-    margin: 0;
-}
-
-
-.main {
-    transition: margin 400ms cubic-bezier(0.17,0.04,0.03,0.94);
-    position: relative;
-    height: calc(100vh - 40px);
-    max-width: 900px;
-    margin: auto;
-    margin-top: 20px;
-    background-color: #d0d0d0;
-    border: 3px solid white;
-    border-radius: 30px;
-    overflow: hidden;
-}
-
-
-#sidebar {
-    background: linear-gradient(135deg, #be7819 0%, #fd8d00 100%);
-    position: absolute;
-    top: -250px;
-    left: 0;
-    width: 100%;
-    height: 250px;
-    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-    transition: top 400ms cubic-bezier(0.17,0.04,0.03,0.94);
-    color: white;
-    font-family: 'Times New Roman';
-}
-
-.down_label {
-    display: block;
-    position: absolute;
-    right: 50px;
-    top: 0;
-    cursor: pointer;
-    background: #fd8d00;
-    width: 30px;
-    height: 20px;
-    border-radius: 0 0 5px 5px;
-    color: white;
-    font-size: 1em;
-    text-align: center;
-    cursor: pointer;
-    transition: all 400ms cubic-bezier(0.17,0.04,0.03,0.94);
-    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-    padding: 10px;
-    z-index: 100;
-}
-
-
-.down_label:hover {
-    box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)
-}
-
-
-.down_label:after, .down_button:checked + .down_label {
-    content: "=";
-    font-family: "Arial";
-}
-
-
-.down_button:checked ~ #sidebar {
-    top: 0
-}
-
-
-.down_button:checked ~ .down_label {
-    top: 250px;
-    background-color: #f1ed04;
-}
-
-
-.down_button:checked ~ .main {
-    margin-top: 300px
-}
-
-
-ul{
-    margin: 0;
-    padding: 0;
-    background: linear-gradient(135deg, #be7819 0%, #fd8d00 100%);
-    color: white;
-}
-li{
-    list-style-type: none;
-    display: inline-block;
-    color: inherit;
-}
-.bar{
-    margin-left: 30px;
-    padding: 8px;
-    border: none;
-    cursor: pointer;
-    background: none;
-    font-size: 1.3em;
-    color: inherit;
-    font-family: "Arial";
-}
-
-#home{
-    cursor: default;
-}
-.bar:hover{
-    transition: 0.3s;
-    background: #b5c7c3;
-}
-#dark_theme{
-    position: absolute;
-    right: 30px;
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-#text{
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-footer{
-    margin: 20px;
-    color: #5b5b5b;
-}
-
-.placeholder-white::placeholder {
-    color: white;
-}
-
-.msg_area{
-    position: absolute;
-    width: 100%;
-    height: calc(100% - 103px);
-    background-image: url("wall 1.jpeg");
-    background-size: cover;
-    overflow: auto;
-}
-
-.msg_area.black{
-    background-image: url("wall 2.jpeg");
-}
-.header{
-    margin: auto;
-    padding: 10px;
-    text-align: center;
-    font-size: 1.5em;
-    color: #5b5b5b;
-    background: #d0d0d0;
-    border-bottom: 3px solid white;
-    border-top-left-radius: 30px;
-    border-top-right-radius: 30px;
-    font-family: "Arial";
-    font-size: 1.6em;
-}
-.refresh {
-    position: absolute;
-    top: 10px;
-    width: 30px;
-    height: 22px;
-    right: 20px;
-    border: none;
-    cursor: pointer;
-    appearance: none;
-    background-color: inherit;
-}
-.update {
-    position: absolute;
-    right: 0;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 30px;
-    height: 22px;
-    transition: .2s;
-}
-.update.hover {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    opacity: 0;
-    transition: opacity .2s;
-}
-.refresh:hover .update.hover {
-    opacity: 1;
-    transform: rotate(180deg);
-}
-.refresh:hover .update {
-    opacity: 0;
-    transform: rotate(180deg);
-}
-.left_message{
-    display: flex;
-    max-width: 80%;
-    margin-left: 20px;
-    margin-top: 20px;
-    margin-bottom: 20px;
-    word-wrap: break-word;
-}
-.right_message{
-    display: flex;
-    max-width: 80%;
-    flex-direction: row-reverse;
-    margin: 20px 20px 20px auto;
-    word-wrap: break-word;
-}
-
-.msg{
-    min-width: 100px;
-    padding: 10px 10px 15px 10px;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    font-family: 'Times New Roman';
-    word-wrap: break-word;
-
-}
-.msg.left{
-    margin-left: 10px;
-    border-bottom-right-radius: 10px;
-    background: linear-gradient(135deg, #f1ed04 0%, #be7819 100%);
-}
-.msg.right{
-    margin-right: 10px;
-    border-bottom-left-radius: 10px;
-    color: white;
-    background: linear-gradient(135deg, #be7819 0%, #fd8d00 100%);
-}
-.mes_info{
-    display: flex;
-    margin-bottom: 5px;
-    margin-left: 6px;
-    font-weight: bold;
-    font-size: 1.2em;
-}
-.mes_header{
-    margin-right: 6px;
-    max-width: 60%;
-}
-.mes_time{
-    margin: auto 1px 5px auto;
-    font-size: 0.5em;
-}
-
-.mes_text{
-    margin-left: 6px;
-    font-size: 1em;
-}
-
-
-@media (min-width: 992px){
-    .msg_area{
-        height: calc(100% - 101px);
-    }
-}
-
-.icon{
-    width: 50px;
-    height: 50px;
-    min-width: 50px;
-    margin: auto 0 0 0;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    background-image: image("icon 1.png");
-    border-radius: 50%;
-}
-
-.icon.left{
-    background-image: image("icon 2.png");
-}
-
-
-.header_bottom{
-    position: absolute;
-    display: flex;
-    width: 100%;
-    height: 50px;
-    bottom: 0;
-    background: #d0d0d0;
-    border-top: 3px solid white;
-    border-bottom-left-radius: 30px;
-    border-bottom-right-radius: 30px;
-}
-#input_area{
-    display: flex;
-    width: 60%;
-    flex: 1;
-    margin: 8px 3px 8px 11px;
-    padding: 2px 2px 2px 10px;
-    border: none;
-    border-radius: 5px 5px 5px 15px;
-    font-size: 1.3em;
-    height: auto;
-    overflow-y: auto;
-    resize: none;
-}
-.send_button{
-    width: 60px;
-    margin: 8px 8px 8px 3px;
-    cursor: pointer;
-    border: none;
-    border-radius: 5px 5px 15px 5px;
-    color: #ffffff;
-    background-color: #f1ed04;
-    transition-duration: 0.3s;
-    overflow: hidden;
-    text-align: center;
-}
-.send_button:hover{
-    background-color: #fd8d00;
-}
-
-footer{
-    margin-top: 0;
-    margin-bottom: 5px;
-    margin-left: 20px;
-    color: #5b5b5b;
-}
-
-@media (max-width: 767px) {
-    .mes_text{
-        font-size: 2em;
-    }
-    .mes_info{
-        font-size: 2.5em;
-    }
-    .msg_area{
-        height: calc(100% - 93px);
-    }
-    .header{
-        padding: 5px;
-    }
-    .refresh{
-        top: 5px;
-    }
-    .bar {
-        padding: 6px;
-        margin-left: 10px;
-        font-size: 0.8em;
-    }
-
-    #dark_theme {
-        right: 10px;
-        top: 0.3px;
-    }
-
-    #text{
-        font-size: 0.8em;
-    }
-
-}
\ No newline at end of file