Merge pull request #88 from wtlyu/feat-clean-after-regenerate-pr

Feat clean after regenerate pr

api/package.json

@@ -24,6 +24,7 @@
     "@waylaidwanderer/chatgpt-api": "^1.28.2",
     "axios": "^1.3.4",
     "cors": "^2.8.5",
+    "crypto": "^1.0.1",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
     "express-session": "^1.17.3",

client/src/components/Main/Footer.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function Footer() {
   return (
-    <div className="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
+    <div className="hidden md:block px-3 pt-2 pb-1 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-4">
       <a
         href="https://github.com/danny-avila/chatgpt-clone"
         target="_blank"

client/src/components/Main/Landing.jsx

@@ -26,7 +26,7 @@ export default function Landing({ title }) {
   };
 
   return (
-    <div className="flex h-full flex-col items-center overflow-y-auto text-sm dark:bg-gray-800">
+    <div className="flex pt-10 md:pt-0 h-full flex-col items-center overflow-y-auto text-sm dark:bg-gray-800">
       <div className="w-full px-6 text-gray-800 dark:text-gray-100 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl">
         <h1 className="mt-6 ml-auto mr-auto mb-10 flex items-center justify-center gap-2 text-center text-4xl font-semibold md:mt-[20vh] sm:mb-16">
           ChatGPT Clone

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 = latestMessage?.cancelled || latestMessage?.error;
 
   // auto focus to input, when enter a conversation.
   useEffect(() => {
@@ -43,7 +43,6 @@ export default function TextChat({ messages }) {
   }, [convo?.conversationId]);
 
   const messageHandler = (data, currentState, currentMsg) => {
-
     const { messages, _currentMsg, message, sender, isRegenerate } = currentState;
 
     if (isRegenerate)
@@ -75,6 +74,38 @@ 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(
@@ -93,9 +124,11 @@ export default function TextChat({ messages }) {
     const { model, chatGptLabel, promptPrefix } = message;
     if (isRegenerate) dispatch(setMessages([...messages, responseMessage]));
     else dispatch(setMessages([...messages, requestMessage, responseMessage]));
+    dispatch(setSubmitState(false));
 
     const isBing = model === 'bingai' || model === 'sydney';
 
+    // refresh title
     if (requestMessage.parentMessageId == '00000000-0000-0000-0000-000000000000') {
       setTimeout(() => {
         dispatch(refreshConversation());
@@ -163,8 +196,6 @@ export default function TextChat({ messages }) {
         })
       );
     }
-
-    dispatch(setSubmitState(false));
   };
 
   const errorHandler = (data, currentState, currentMsg) => {
@@ -193,7 +224,9 @@ export default function TextChat({ messages }) {
     }
 
     const currentState = submission;
+
     let currentMsg = { ...currentState.message };
+    let latestResponseText = '';
 
     const { server, payload } = createPayload(submission);
     const onMessage = (e) => {
@@ -216,6 +249,7 @@ export default function TextChat({ messages }) {
           console.log(data);
         }
         if (data.message) {
+          latestResponseText = text;
           messageHandler(text, currentState, currentMsg);
         }
         // console.log('dataStream', data);
@@ -233,6 +267,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();
@@ -245,9 +283,13 @@ export default function TextChat({ messages }) {
     events.stream();
 
     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]);
 
@@ -290,9 +332,9 @@ export default function TextChat({ messages }) {
   const changeHandler = (e) => {
     const { value } = e.target;
 
-    if (isSubmitting && (value === '' || value === '\n')) {
-      return;
-    }
+    // if (isSubmitting && (value === '' || value === '\n')) {
+    //   return;
+    // }
     dispatch(setText(value));
   };
 
@@ -301,20 +343,8 @@ 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 md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient absolute bottom-0 left-0 w-full border-t bg-white pt-2 dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent">
+    <div className="input-panel md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient fixed bottom-0 left-0 w-full border-t bg-white py-2 dark:border-white/20 dark:bg-gray-800 md:absolute md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent md:dark:bg-transparent">
       <form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-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">
@@ -352,13 +382,19 @@ 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
+                  ? 'Edit your message or Regenerate.'
+                  : ''
+              }
               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"
             />

client/src/components/Messages/index.jsx

@@ -63,7 +63,7 @@ export default function Messages({ messages, messageTree }) {
 
   return (
     <div
-      className="flex-1 overflow-y-auto "
+      className="flex-1 overflow-y-auto pt-10 md:pt-0"
       ref={scrollableRef}
       onScroll={debouncedHandleScroll}
     >

client/src/components/Models/ModelMenu.jsx

@@ -38,7 +38,8 @@ export default function ModelMenu() {
   const { data, isLoading, mutate } = swr(`/api/customGpts`, (res) => {
     const fetchedModels = res.map((modelItem) => ({
       ...modelItem,
-      name: modelItem.chatGptLabel
+      name: modelItem.chatGptLabel,
+      model: 'chatgptCustom'
     }));
 
     dispatch(setModels(fetchedModels));
@@ -100,7 +101,7 @@ export default function ModelMenu() {
     localStorage.setItem('model', JSON.stringify(model));
   }, [model]);
 
-  const filteredModels = models.filter(({model, _id }) => initial[model] || _id.length > 1 );
+  const filteredModels = models.filter(({model, _id }) => initial[model] );
 
   const onChange = (value) => {
     if (!value) {

client/src/components/Nav/MobileNav.jsx

@@ -23,7 +23,7 @@ export default function MobileNav({ setNavVisible }) {
   }
 
   return (
-    <div className="sticky top-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
+    <div className="fixed top-0 left-0 right-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
       <button
         type="button"
         className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:hover:text-white"

client/src/utils/handleSubmit.js

@@ -5,6 +5,7 @@ import { setNewConvo } from '~/store/convoSlice';
 import { setMessages } from '~/store/messageSlice';
 import { setSubmitState, setSubmission } from '~/store/submitSlice';
 import { setText } from '~/store/textSlice';
+import { setError } from '~/store/convoSlice';
 
 const useMessageHandler = () => {
   const dispatch = useDispatch();
@@ -40,14 +41,6 @@ const useMessageHandler = () => {
     const currentMsg = { sender: 'User', text, current: true, isCreatedByUser: true, parentMessageId, conversationId, messageId: fakeMessageId };
     const initialResponse = { sender, text: '', parentMessageId: isRegenerate?messageId:fakeMessageId, messageId: (isRegenerate?messageId:fakeMessageId) + '_', submitting: true };
 
-    dispatch(setSubmitState(true));
-    if (isRegenerate) {
-      dispatch(setMessages([...currentMessages, initialResponse]));
-    } else {
-      dispatch(setMessages([...currentMessages, currentMsg, initialResponse]));
-    }
-    dispatch(setText(''));
-
     const submission = {
       convo,
       isCustomModel,
@@ -63,7 +56,16 @@ const useMessageHandler = () => {
       initialResponse,
       sender,
     };
+
     console.log('User Input:', text);
+
+    if (isRegenerate) {
+      dispatch(setMessages([...currentMessages, initialResponse]));
+    } else {
+      dispatch(setMessages([...currentMessages, currentMsg, initialResponse]));
+      dispatch(setText(''));  
+    }
+    dispatch(setSubmitState(true));
     dispatch(setSubmission(submission));
   }
 

client/src/utils/index.js

@@ -56,8 +56,6 @@ export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGp
     chatgptCustom: `rgb(0, 163, 255${ button ? ', 0.75' : ''})`,
   };
 
-  // console.log(sender, isCreatedByUser, model, chatGptLabel, error, )
-
   if (isCreatedByUser) 
     return (
       <div