107 lines
3.0 KiB
JavaScript
107 lines
3.0 KiB
JavaScript
import React, { useState } from "react";
|
|
import "./style.css";
|
|
import ChatBoxMessages from "./ChatMessages.js";
|
|
|
|
const ChatBoxProps = (props) => {
|
|
const { visible, updateNeedForm, messages, updateMessages } = props.props;
|
|
const [inputValue, setInputValue] = useState("");
|
|
const backendUrl = process.env.REACT_APP_BACKEND_URL;
|
|
|
|
function handleKeyDown(event) {
|
|
if (event.key === "Enter") {
|
|
onSend(inputValue);
|
|
}
|
|
}
|
|
|
|
function onSend(text) {
|
|
if (inputValue === "") {
|
|
return;
|
|
}
|
|
let msg1 = { name: "User", message: inputValue };
|
|
updateMessages(msg1);
|
|
//setMessages((prevMessages) => [msg1, ...prevMessages]);
|
|
/*let msg2 = {
|
|
name: "Sam",
|
|
message: "response" + inputValue,
|
|
query: "query" + inputValue,
|
|
history: messages,
|
|
modQuery: inputValue
|
|
};*/
|
|
//let msg2 = { name: "Sam", message: inputValue};
|
|
//setMessages((prevMessages) => [msg2, ...prevMessages]);
|
|
//updateMessages(msg2)
|
|
//setInputValue("");
|
|
//updateNeedForm(true);
|
|
|
|
//setMessages([msg2, ...messages]);
|
|
fetch(backendUrl + '/predict', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ message: inputValue }),
|
|
mode: 'cors',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
})
|
|
.then(r => r.json())
|
|
.then(r => {
|
|
let msg2 = { name: "Sam", message: r.answer, query: r.query, cand: r.cand, history: r.history, modQuery: r.modQuery};
|
|
//setMessages((prevMessages) => [msg2, ...prevMessages]);
|
|
updateMessages(msg2);
|
|
setInputValue("");
|
|
updateNeedForm(true);
|
|
setInputValue("");
|
|
}).catch((error) => {
|
|
console.error('Error:', error);
|
|
setInputValue("");
|
|
});
|
|
}
|
|
|
|
function handleInputChange(event) {
|
|
setInputValue(event.target.value);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="chatbox__support"
|
|
style={{
|
|
...{ opacity: visible ? "1" : "0" },
|
|
...{ zIndex: visible ? "123456" : "-123456" },
|
|
...{
|
|
transform: visible ? "translateY(-40px)" : "translateY(0px)"
|
|
}
|
|
}}
|
|
>
|
|
<div className="chatbox__header">
|
|
<div className="chatbox__image--header">
|
|
<img
|
|
src="https://img.icons8.com/color/48/000000/circled-user-female-skin-type-5--v1.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div className="chatbox__content--header">
|
|
<h4 className="chatbox__heading--header">Janet</h4>
|
|
<p className="chatbox__description--header">
|
|
Hi, it's Janet. I am here to help you in utilizing the VRE.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<ChatBoxMessages messages={messages} />
|
|
<div className="chatbox__footer">
|
|
<input
|
|
type="text"
|
|
placeholder="Write a message..."
|
|
value={inputValue}
|
|
onChange={handleInputChange}
|
|
onKeyDown={handleKeyDown}
|
|
/>
|
|
<button className="chatbox__send--footer send__button" onClick={onSend}>
|
|
Send
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChatBoxProps;
|
|
|