diff --git a/frontend-react/src/components/ChatbotComponent.js b/frontend-react/src/components/ChatbotComponent.js
index 5b169bbe7d5ce75a0d88690bbeacad01b41c9db9..455736b8c2655b3f1a08219a8ff49c34e26d63e0 100644
--- a/frontend-react/src/components/ChatbotComponent.js
+++ b/frontend-react/src/components/ChatbotComponent.js
@@ -31,9 +31,8 @@ const ChatbotComponent = () => {
setMessages([greetingMessage]);
}, []);
-
-
- function handleButtonClick(){
+ // Function to handle theme button click
+ function handleThemeButtonClick(){
const head = document.getElementById("head");
const input = document.getElementById("input");
@@ -80,19 +79,19 @@ const ChatbotComponent = () => {
}
};
- function AddMes(value_info, value_type){
- var new_mes_right = Create(value_info, value_type, "User");
- setMessages([...messages, new_mes_right]);
+ // 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) =>{
- const new_mes = Create(data, "left", "Bot");
- setMessages([...messages,new_mes_right,new_mes]);
+ 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');
@@ -100,9 +99,8 @@ const ChatbotComponent = () => {
return `${hours}:${minutes}`;
}
-
-
- function Create(value_info, value_type, name){
+ // Function to create a message object
+ function createMessage(value_info, value_type, name){
let date = new Date();
let minutes = date.getMinutes().toString();
if (date.getMinutes() < 10){
@@ -118,6 +116,8 @@ const ChatbotComponent = () => {
)
}
+
+ // Function to update messages
function Update(){
setMessages([greetingMessage])
}
@@ -126,13 +126,13 @@ const ChatbotComponent = () => {
<div>
<input className="down_button" id="top-box" type="checkbox" hidden></input>
<label className="down_label" htmlFor="top-box"></label>
- <Sidebar func={handleButtonClick} />
+ <Sidebar themeButtonClick={handleThemeButtonClick} />
<div className="main" id="container">
<Header update={Update} button={update} />
<MessageArea messages={messages} area={area} />
- <InputArea send_button={AddMes} />
+ <InputArea send_button={addMessage} />
</div>
- <footer>© Copyright 2023</footer>
+ <footer>© Copyright 2024</footer>
</div>
);
};
diff --git a/frontend-react/src/components/Header.js b/frontend-react/src/components/Header.js
index 01f84d42bae50a31280773de4af03ead1d1aef5a..5509c1a9b7bc94168a7a5b5a0240ff0aaee2005e 100644
--- a/frontend-react/src/components/Header.js
+++ b/frontend-react/src/components/Header.js
@@ -3,15 +3,14 @@ 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>
+ <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>
);
-};
-
-export default Header;
\ No newline at end of file
+ };
+
+ 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
index ecf8558a252ed2c93ab13a0ac596ba2b28a76294..423321bc4f0594c7db3196a63e3f9493d66e6d9c 100644
--- a/frontend-react/src/components/Input_area.js
+++ b/frontend-react/src/components/Input_area.js
@@ -12,6 +12,7 @@ const InputArea = (props) => {
}
};
+ // Function to handle sending messages
function HandleSend(){
if (value !== "") {
props.send_button(value, "right");
diff --git a/frontend-react/src/components/Sidebar.js b/frontend-react/src/components/Sidebar.js
index 7169866d2ebf1bd45c6643ba2f91ccf6e67fac45..849bbe32933318757d9fa947c3b4417ea61a8485 100644
--- a/frontend-react/src/components/Sidebar.js
+++ b/frontend-react/src/components/Sidebar.js
@@ -7,32 +7,29 @@ function addText(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>
+ <button className="bar" onClick={() => addText("Welcome to the Recipe Bot WebPage." +
+ "This bot is made to help you have proper recipes for the food you would love to have.")}>
+ Home
+ </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 className="bar" onClick={() => addText('You can reach us here:\n' +
+ 'Avanish Singh: avanish.singh@stud.th-deg.de \nBrahim Ghaouthi: brahim.ghauothi@stud.th-deg.de \nRashid Aghayev:rashid.aghayev@stud.th-deg.de \nMamoun Mourad: mamoun.mourad@stud.th-deg.de')}>
+ Contact Us
</button>
</li>
- <button className="bar" id="dark_theme" onClick={props.func}>Change Mode</button>
+ <button className="bar" id="dark_theme" onClick={props.themeButtonClick}>
+ Dark 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