typing

src/ChatBox.js

@@ -5,14 +5,14 @@ import ChatBoxProps from "./ChatBoxProps.js";
 import ChatButton from "./ChatButton.js";
 
 const ChatBox = (props) => {
-  const { updateNeedForm, messages, updateMessages, token, updateState } = props.props;
+  const { updateNeedForm, messages, updateMessages, token } = props.props;
   const [visible, setVisible] = useState(false);
 
   return (
     <div className="container">
       <div className="chatbox">
         <ChatBoxProps
-          props={{ visible, updateNeedForm, messages, updateMessages, token, updateState }}
+          props={{ visible, updateNeedForm, messages, updateMessages, token }}
         />
         <ChatButton onClick={() => setVisible(!visible)} />
       </div>

src/ChatBoxProps.js

@@ -3,7 +3,7 @@ import "./style.css";
 import ChatBoxMessages from "./ChatMessages.js";
 
 const ChatBoxProps = (props) => {
-  const { visible, updateNeedForm, messages, updateMessages, token, updateState } = props.props;
+  const { visible, updateNeedForm, messages, updateMessages, token } = props.props;
   const [inputValue, setInputValue] = useState("");
   const backendUrl = '/api';
   const [clicked, setClicked] = useState(false);
@@ -23,11 +23,11 @@ const ChatBoxProps = (props) => {
            },
       }).then(r => r.json()).then(r => {
       let msg2 = { name: "Janet", message: r.answer, query: "", cand: "", history: "", modQuery: "", typing:false};
-      updateMessages(msg2);
+      updateMessages(msg2, false, -1);
       }).catch((error) => {
         console.error('Error:', error);
         let msg3 = { name: "Janet", message: "Server is down, try later.", typing:false, query: "", cand: "", history: "", modQuery: ""};
-      	updateMessages(msg3);
+      	updateMessages(msg3, false, -1);
       });
       
       setFirst((first) => false);
@@ -47,11 +47,11 @@ const ChatBoxProps = (props) => {
            },
       }).then(r => r.json()).then(r => {
       let msg2 = { name: "Janet", message: r.answer, query: "", cand: "", history: "", modQuery: "", typing:false};
-      updateMessages(msg2);
+      updateMessages(msg2, false, -1);
       }).catch((error) => {
         console.error('Error:', error);
 	let msg3 = { name: "Janet", message: "Server is down, try later.", typing:false, query: "", cand: "", history: "", modQuery: ""};
-      	updateMessages(msg3);
+      	updateMessages(msg3, false, -1);
       });
       
         setTimer((timer) => 0);
@@ -81,9 +81,9 @@ const ChatBoxProps = (props) => {
     setInputValue("");
     setBusy((busy) => true);
     let msg1 = { name: "User", message: inputValue, typing:false, query: "", cand: "", history: "", modQuery: "" };
-    updateMessages(msg1);
+    updateMessages(msg1, false, -1);
     let msgTemp = {name: "Janet", message: "Typing...", typing:true, query: "", cand: "", history: "", modQuery: ""};
-    updateMessages(msgTemp);
+    updateMessages(msgTemp, false, -1);
    
     fetch(backendUrl + '/predict', {
       method: 'POST',
@@ -96,13 +96,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, typing:false};
-      updateState(msg2);
+      updateMessages(msg2, true, 0);
       updateNeedForm(true);
       setBusy((busy) => false);
     }).catch((error) => {
       console.error('Error:', error);
       let msg3 = { name: "Janet", message: "Server is down, try later.", typing:false, query: "", cand: "", history: "", modQuery: ""};
-      updateState(msg3);
+      updateMessages(msg3, true, 0);
       //updateMessages(msg3);
       setBusy((busy) => false);
     });

src/ChatPage.js

@@ -63,18 +63,18 @@ const ChatPage = () => {
     setNeedForm(value);
   }
 
-  function updateState(msg){
-    const newState = messages.map(obj => {
-      if (obj.name === "Janet" && obj.typing) {
-        return {...obj, message: msg.message, typing:msg.typing, query: msg.query, cand: msg.cand, history: msg.history, modQuery: msg.modQuery};
-      }
-      return obj;
-    });
-    setMessages(newState);
-  }
  
-  function updateMessages(msg) {
-    setMessages((prevMessages) => [msg, ...prevMessages]);
+  function updateMessages(msg, update, index) {
+    if update{
+	const handleUpdate = (index, todo) => {
+		const newTodos = [...messages];
+        	newTodos[index] = todo;
+        	setMessages(newTodos);
+        }
+    }
+    else{
+        setMessages((prevMessages) => [msg, ...prevMessages]);
+    }
   }
   return (
     <div>
@@ -82,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, updateState}} /> }
+  {stat==="done" && <ChatBox props={{ updateNeedForm, messages, updateMessages,  token}} /> }
   {stat==="done" && needForm && <FeedbackForm props={{ updateNeedForm, messages }} /> }
     </div>
   );