ahmed.ibrahim39699
/
JanetFrontEnd
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

typing

This commit is contained in:
ahmed531998 2023-04-19 16:08:11 +02:00
parent 538a91e8fd
commit c3c384b733
3 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ChatBox.js
View File

@ -12,7 +12,7 @@ const ChatBox = (props) => {
<div className="container">
<div className="chatbox">
<ChatBoxProps
props={{ visible, updateNeedForm, messages, updateMessages, token, deleteById }}
props={{ visible, updateNeedForm, messages, updateMessages, token, updateState }}
/>
<ChatButton onClick={() => setVisible(!visible)} />
</div>

19
src/ChatBoxProps.js
View File

@ -3,7 +3,7 @@ import "./style.css";
import ChatBoxMessages from "./ChatMessages.js";
const ChatBoxProps = (props) => {
const { visible, updateNeedForm, messages, updateMessages, token, deleteById } = props.props;
const { visible, updateNeedForm, messages, updateMessages, token, updateState } = props.props;
const [inputValue, setInputValue] = useState("");
const backendUrl = '/api';
const [clicked, setClicked] = useState(false);
@ -22,11 +22,11 @@ const ChatBoxProps = (props) => {
'Content-Type': 'application/json'
},
}).then(r => r.json()).then(r => {
let msg2 = { name: "Janet", message: r.answer, query: "", cand: "", history: "", modQuery: ""};
let msg2 = { name: "Janet", message: r.answer, query: "", cand: "", history: "", modQuery: "", typing:false};
updateMessages(msg2);
}).catch((error) => {
console.error('Error:', error);
let msg3 = { name: "Janet", message: "Server is down, try later."};
let msg3 = { name: "Janet", message: "Server is down, try later.", typing:false};
updateMessages(msg3);
});
@ -46,11 +46,11 @@ const ChatBoxProps = (props) => {
'Content-Type': 'application/json'
},
}).then(r => r.json()).then(r => {
let msg2 = { name: "Janet", message: r.answer, query: "", cand: "", history: "", modQuery: ""};
let msg2 = { name: "Janet", message: r.answer, query: "", cand: "", history: "", modQuery: "", typing:false};
updateMessages(msg2);
}).catch((error) => {
console.error('Error:', error);
let msg3 = { name: "Janet", message: "Server is down, try later."};
let msg3 = { name: "Janet", message: "Server is down, try later.", typing:false};
updateMessages(msg3);
});
@ -82,7 +82,7 @@ const ChatBoxProps = (props) => {
setBusy((busy) => true);
let msg1 = { name: "User", message: inputValue };
updateMessages(msg1);
let msgTemp = {name: "Typer", message: "Typing..."};
let msgTemp = {name: "Janet", message: "Typing...", typing:true};
updateMessages(msgTemp);
fetch(backendUrl + '/predict', {
@ -95,14 +95,13 @@ const ChatBoxProps = (props) => {
})
.then(r => r.json())
.then(r => {
let msg2 = { name: "Janet", message: r.answer, query: r.query, cand: r.cand, history: r.history, modQuery: r.modQuery};
deleteById(msgTemp);
updateMessages(msg2);
let msg2 = { name: "Janet", message: r.answer, query: r.query, cand: r.cand, history: r.history, modQuery: r.modQuery, typing:false};
updateState(msg2);
updateNeedForm(true);
setBusy((busy) => false);
}).catch((error) => {
console.error('Error:', error);
deleteById(msgTemp);
updateState(msgTemp);
let msg3 = { name: "Janet", message: "Server is down, try later."};
updateMessages(msg3);
setBusy((busy) => false);

16
src/ChatPage.js
View File

@ -63,11 +63,15 @@ const ChatPage = () => {
setNeedForm(value);
}
function deleteById(name){
setMessages(oldValues => {
return oldValues.filter(msg => msg.name !== name)
})
}
function updateState(msg){
let newState = messages.map(obj => {
if (obj.name === "Janet" && obj.typing) {
return {...obj, message: msg.message, typing:msg.typing};
}
return obj;
});
setMessages(newState);
};
function updateMessages(msg) {
setMessages((prevMessages) => [msg, ...prevMessages]);
@ -78,7 +82,7 @@ const ChatPage = () => {
{stat==="start" && <p>Connecting to Server...</p>}
{stat==="rejected" && <p>Unauthorized Use...</p>}
{stat==="done" && <ChatBox props={{ updateNeedForm, messages, updateMessages, token, deleteById}} /> }
{stat==="done" && <ChatBox props={{ updateNeedForm, messages, updateMessages, token, updateState}} /> }
{stat==="done" && needForm && <FeedbackForm props={{ updateNeedForm, messages }} /> }
</div>
);