From a2f6545a7829474aba30b2684364928afcb6a41e Mon Sep 17 00:00:00 2001
From: Avanish Singh <79073722+aaviix@users.noreply.github.com>
Date: Thu, 7 Dec 2023 18:26:25 +0100
Subject: [PATCH] Add files via upload
---
.../src/components/ChatbotComponent.js | 72 +------------------
frontend-react/src/components/Header.js | 4 --
frontend-react/src/components/InputSection.js | 6 +-
3 files changed, 6 insertions(+), 76 deletions(-)
diff --git a/frontend-react/src/components/ChatbotComponent.js b/frontend-react/src/components/ChatbotComponent.js
index dbabcd0..2929c89 100644
--- a/frontend-react/src/components/ChatbotComponent.js
+++ b/frontend-react/src/components/ChatbotComponent.js
@@ -3,25 +3,16 @@ import "../styles/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 TextMessage from "./TextMessage";
-
const socket = io();
const ChatbotComponent = () => {
const [messages, setMessages] = useState([
])
- const [theme, setTheme] = useState('light');
- 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...",
- date: getCurrentTime(),
type: "left",
name: "FoodWhizz"
};
@@ -32,74 +23,18 @@ const ChatbotComponent = () => {
}, []);
- // Function to handle theme button click
- function handleThemeButtonClick(){
-
- const head = document.getElementById("head");
- const input = document.getElementById("input");
- const input_section = document.getElementById("input_section");
- 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_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_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';
- bar.style.color = 'black';
- labels.style.color = 'black';
- }
- else {
- setTheme('light');
- setUpdate("reload.png");
- 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_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';
- bar.style.color = 'white';
- labels.style.color = 'white';
- }
- };
-
// Function to add user and bot messages
function addMessage(value_info, value_type){
const newUserMessage = createMessage(value_info, value_type, "User");
setMessages([...messages, newUserMessage]);
socket.emit('human',value_info)
- socket.on('botmes',(data) =>{
+ socket.on('bot-message',(data) =>{
const newBotMessage = createMessage(data, "left", "Bot");
setMessages([...messages,newUserMessage,newBotMessage]);
})
}
- // Function to get current time
- 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 to create a message object
function createMessage(value_info, value_type, name){
let date = new Date();
@@ -127,10 +62,9 @@ const ChatbotComponent = () => {
<div>
<input className="down_button" id="top-box" type="checkbox" hidden></input>
<label className="down_label" htmlFor="top-box"></label>
- <Sidebar themeButtonClick={handleThemeButtonClick} />
<div className="main" id="container">
- <Header update={Update} button={update} />
- <MessageSection messages={messages} area={area} />
+ <Header update={Update}/>
+ <MessageSection messages={messages} area="msg_section" />
<InputSection send_button={addMessage} />
</div>
<footer>© Copyright 2024</footer>
diff --git a/frontend-react/src/components/Header.js b/frontend-react/src/components/Header.js
index 5509c1a..db163cb 100644
--- a/frontend-react/src/components/Header.js
+++ b/frontend-react/src/components/Header.js
@@ -5,10 +5,6 @@ const Header = (props) => {
return (
<div className="header" id="head">
FoodWhizz
- <button className="refresh" type="submit" onClick={props.update}>
- <img className="update" src={props.button} alt="Refresh Button" />
- <img className="update hover" src="reload1.png" alt="Hover Reload Button" />
- </button>
</div>
);
};
diff --git a/frontend-react/src/components/InputSection.js b/frontend-react/src/components/InputSection.js
index 423321b..8a183be 100644
--- a/frontend-react/src/components/InputSection.js
+++ b/frontend-react/src/components/InputSection.js
@@ -1,7 +1,7 @@
import React, {useRef, useState} from 'react';
import '../styles/style.css';
-const InputArea = (props) => {
+const InputSection = (props) => {
const [value, setValue] = useState("")
const textareaRef = useRef(null);
@@ -23,7 +23,7 @@ const InputArea = (props) => {
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>
+ <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>
);
@@ -35,4 +35,4 @@ document.addEventListener('keydown', function(event) {
}
});
-export default InputArea;
+export default InputSection;
--
GitLab