From 1960a630f2775c9fe9cd2ab581a83ca4bea36ea5 Mon Sep 17 00:00:00 2001
From: Avanish Singh <79073722+aaviix@users.noreply.github.com>
Date: Fri, 1 Dec 2023 11:29:46 +0100
Subject: [PATCH] Add files via upload
---
.../src/components/ChatbotComponent.js | 10 ++---
frontend-react/src/components/InputSection.js | 38 +++++++++++++++++++
frontend-react/src/components/LeftMessage.js | 16 ++++++++
.../src/components/MessageSection.js | 35 +++++++++++++++++
frontend-react/src/components/RightMessage.js | 16 ++++++++
frontend-react/src/components/Sidebar.js | 2 +-
6 files changed, 111 insertions(+), 6 deletions(-)
create mode 100644 frontend-react/src/components/InputSection.js
create mode 100644 frontend-react/src/components/LeftMessage.js
create mode 100644 frontend-react/src/components/MessageSection.js
create mode 100644 frontend-react/src/components/RightMessage.js
diff --git a/frontend-react/src/components/ChatbotComponent.js b/frontend-react/src/components/ChatbotComponent.js
index 455736b..9c8b1dd 100644
--- a/frontend-react/src/components/ChatbotComponent.js
+++ b/frontend-react/src/components/ChatbotComponent.js
@@ -1,13 +1,13 @@
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 InputArea from "./InputSection";
+import MessageArea from "./MessageSection";
import Sidebar from "./Sidebar";
import io from 'socket.io-client';
-import RightMessage from "./Right_message";
-import LeftMessage from "./Left_message";
+import RightMessage from "./RightMessage";
+import LeftMessage from "./LeftMessage";
const socket = io();
const ChatbotComponent = () => {
@@ -21,7 +21,7 @@ const ChatbotComponent = () => {
const[update, setUpdate] = useState("reload.png");
const greetingMessage = {
- info: "Hey, Welcome to Recipe Selection System, Say Hi to start chat?",
+ info: "Hey, Welcome to FoodWhizz, what would you like to have today? Say Hey to start...",
date: getCurrentTime(),
type: "left",
name: "FoodWhizz"
diff --git a/frontend-react/src/components/InputSection.js b/frontend-react/src/components/InputSection.js
new file mode 100644
index 0000000..423321b
--- /dev/null
+++ b/frontend-react/src/components/InputSection.js
@@ -0,0 +1,38 @@
+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 to handle sending messages
+ 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/LeftMessage.js b/frontend-react/src/components/LeftMessage.js
new file mode 100644
index 0000000..95afdf1
--- /dev/null
+++ b/frontend-react/src/components/LeftMessage.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/MessageSection.js b/frontend-react/src/components/MessageSection.js
new file mode 100644
index 0000000..bb95853
--- /dev/null
+++ b/frontend-react/src/components/MessageSection.js
@@ -0,0 +1,35 @@
+import React, {useEffect, useRef} from 'react';
+import LeftMessage from "./LeftMessage";
+import RightMessage from "./RightMessage";
+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/RightMessage.js b/frontend-react/src/components/RightMessage.js
new file mode 100644
index 0000000..b5a21a5
--- /dev/null
+++ b/frontend-react/src/components/RightMessage.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
index e64bb57..3fbf4cc 100644
--- a/frontend-react/src/components/Sidebar.js
+++ b/frontend-react/src/components/Sidebar.js
@@ -31,4 +31,4 @@ const Sidebar = (props) => {
</div>
);
};
-export default Sidebar;
+export default Sidebar;
\ No newline at end of file
--
GitLab