feat: save cancelled flag in message

client/src/components/Main/TextChat.jsx

@@ -35,7 +35,7 @@ export default function TextChat({ messages }) {
   const { error, latestMessage } = convo;
   const { ask, regenerate, stopGenerating } = useMessageHandler();
 
-  const isNotAppendable = (!isSubmitting && latestMessage?.submitting) || latestMessage?.error;
+  const isNotAppendable = (!isSubmitting && latestMessage?.cancelled) || latestMessage?.error;
 
   // auto focus to input, when enter a conversation.
   useEffect(() => {
@@ -75,6 +75,15 @@ export default function TextChat({ messages }) {
       );
   };
 
+  const cancelHandler = (data, currentState, currentMsg) => {
+    const { messages, _currentMsg, message, sender, isRegenerate } = currentState;
+
+    if (isRegenerate)
+      dispatch(setMessages([...messages, { sender, text: data, parentMessageId: message?.overrideParentMessageId, messageId: message?.overrideParentMessageId + '_', cancelled: true }]));
+    else
+      dispatch(setMessages([...messages, currentMsg, { sender, text: data, parentMessageId: currentMsg?.messageId, messageId: currentMsg?.messageId + '_', cancelled: true }]));
+  };
+
   const createdHandler = (data, currentState, currentMsg) => {
     const { conversationId } = currentMsg;
     dispatch(
@@ -91,11 +100,24 @@ export default function TextChat({ messages }) {
     const { messages, _currentMsg, message, isCustomModel, sender, isRegenerate } =
       currentState;
     const { model, chatGptLabel, promptPrefix } = message;
+<<<<<<< HEAD
     if (isRegenerate) dispatch(setMessages([...messages, responseMessage]));
     else dispatch(setMessages([...messages, requestMessage, responseMessage]));
+=======
+    if (isRegenerate)
+      dispatch(
+        setMessages([...messages, responseMessage,])
+      );
+    else
+      dispatch(
+        setMessages([...messages, requestMessage, responseMessage,])
+      );
+    dispatch(setSubmitState(false));
+>>>>>>> 92d0d11 (feat: save cancelled flag in message)
 
     const isBing = model === 'bingai' || model === 'sydney';
 
+    // refresh title
     if (requestMessage.parentMessageId == '00000000-0000-0000-0000-000000000000') {
       setTimeout(() => {
         dispatch(refreshConversation());
@@ -163,8 +185,6 @@ export default function TextChat({ messages }) {
         })
       );
     }
-
-    dispatch(setSubmitState(false));
   };
 
   const errorHandler = (data, currentState, currentMsg) => {
@@ -193,8 +213,14 @@ export default function TextChat({ messages }) {
     }
 
     const currentState = submission;
+<<<<<<< HEAD
     let currentMsg = { ...currentState.message };
 
+=======
+    let currentMsg = {...currentState.message};
+    let latestResponseText = '';
+    
+>>>>>>> 92d0d11 (feat: save cancelled flag in message)
     const { server, payload } = createPayload(submission);
     const onMessage = (e) => {
       if (stopStream) {
@@ -216,6 +242,7 @@ export default function TextChat({ messages }) {
           console.log(data);
         }
         if (data.message) {
+          latestResponseText = text;
           messageHandler(text, currentState, currentMsg);
         }
         // console.log('dataStream', data);
@@ -233,6 +260,10 @@ export default function TextChat({ messages }) {
 
     events.onmessage = onMessage;
 
+    events.oncancel = (e) => {
+      cancelHandler(latestResponseText, currentState, currentMsg);
+    };
+
     events.onerror = function (e) {
       console.log('error in opening conn.');
       events.close();
@@ -247,7 +278,12 @@ export default function TextChat({ messages }) {
     return () => {
       dispatch(setSubmitState(false));
       events.removeEventListener('message', onMessage);
+      const isCancelled = events.readyState <= 1;
       events.close();
+      if (isCancelled) {
+        const e = new Event("cancel");
+        events.dispatchEvent(e)
+      }
     };
   }, [submission]);
 
@@ -301,24 +337,12 @@ export default function TextChat({ messages }) {
     dispatch(setError(false));
   };
 
-  const placeholder = () => {
-    if (disabled && isSubmitting) {
-      return 'Choose another model or customize GPT again';
-    } else if (!isSubmitting && latestMessage?.submitting) {
-      return 'Message in progress...';
-      // } else if (latestMessage?.error) {
-      // return 'Error...';
-    } else {
-      return '';
-    }
-  };
-
   return (
     <div className="input-panel fixed md:absolute bottom-0 left-0 w-full border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:bg-vert-light-gradient bg-white dark:bg-gray-800 md:dark:bg-transparent md:bg-transparent dark:md:bg-vert-dark-gradient py-2">
       <form className="stretch mx-2 flex flex-row gap-3 md:pt-2 last:mb-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
         <div className="relative flex h-full flex-1 md:flex-col">
-          <span className="order-last ml-1 flex justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
+          <span className="flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center order-last md:order-none">
-            {isSubmitting ? (
+            {isSubmitting?
               <button
                 onClick={handleStopGenerating}
                 className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
@@ -327,7 +351,7 @@ export default function TextChat({ messages }) {
                 <StopGeneratingIcon />
                 <span className="hidden md:block">Stop generating</span>
               </button>
-            ) : latestMessage && !latestMessage?.isCreatedByUser ? (
+              :(latestMessage&&!latestMessage?.isCreatedByUser)?
                   <button
                     onClick={handleRegenerate}
                     className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
@@ -336,7 +360,8 @@ export default function TextChat({ messages }) {
                     <RegenerateIcon />
                     <span className="hidden md:block">Regenerate response</span>
                   </button>
-            ) : null}
+                :null
+            }
           </span>
           <div
             className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
@@ -352,20 +377,17 @@ export default function TextChat({ messages }) {
               ref={inputRef}
               // style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
               rows="1"
-              value={text}
+              value={(disabled || isNotAppendable) ? '' : text}
               onKeyUp={handleKeyUp}
               onKeyDown={handleKeyDown}
               onChange={changeHandler}
               onCompositionStart={handleCompositionStart}
               onCompositionEnd={handleCompositionEnd}
-              placeholder={placeholder()}
+              placeholder={disabled ? 'Choose another model or customize GPT again' : isNotAppendable ? 'Can not send new message after an error or unfinished response.' : ''}
-              disabled={disabled || isNotAppendable}
-              className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 placeholder:text-sm focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
-            />
-            <SubmitButton
-              submitMessage={submitMessage}
               disabled={disabled || isNotAppendable}
+              className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
             />
+            <SubmitButton submitMessage={submitMessage} disabled={disabled || isNotAppendable} />
           </div>
         </div>
       </form>

client/src/utils/handleSubmit.js

@@ -46,9 +46,8 @@ const useMessageHandler = () => {
       dispatch(setMessages([...currentMessages, initialResponse]));
     } else {
       dispatch(setMessages([...currentMessages, currentMsg, initialResponse]));
-    }
       dispatch(setText(''));  
-
+    }
     const submission = {
       convo,
       isCustomModel,