merge commit

.gitignore

@@ -34,6 +34,7 @@ client/public/main.js.LICENSE.txt
 # Deployed apps should consider commenting these lines out:
 # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
 node_modules/
+meili_data/
 api/node_modules/
 client/node_modules/
 bower_components/

api/app/clients/chatgpt-browser.js

@@ -10,7 +10,7 @@ const clientOptions = {
   proxy: process.env.PROXY || null,
 };
 
-const browserClient = async ({ text, onProgress, convo }) => {
+const browserClient = async ({ text, onProgress, convo, abortController }) => {
   const { ChatGPTBrowserClient } = await import('@waylaidwanderer/chatgpt-api');
 
   const store = {
@@ -18,7 +18,7 @@ const browserClient = async ({ text, onProgress, convo }) => {
   };
 
   const client = new ChatGPTBrowserClient(clientOptions, store);
-  let options = { onProgress };
+  let options = { onProgress, abortController };
 
   if (!!convo.parentMessageId && !!convo.conversationId) {
     options = { ...options, ...convo };

api/app/clients/chatgpt-client.js

@@ -9,14 +9,14 @@ const clientOptions = {
   debug: false
 };
 
-const askClient = async ({ text, onProgress, convo }) => {
+const askClient = async ({ text, onProgress, convo, abortController }) => {
   const ChatGPTClient = (await import('@waylaidwanderer/chatgpt-api')).default;
   const store = {
     store: new KeyvFile({ filename: './data/cache.json' })
   };
 
   const client = new ChatGPTClient(process.env.OPENAI_KEY, clientOptions, store);
-  let options = { onProgress };
+  let options = { onProgress, abortController };
 
   if (!!convo.parentMessageId && !!convo.conversationId) {
     options = { ...options, ...convo };

api/app/clients/chatgpt-custom.js

@@ -9,7 +9,7 @@ const clientOptions = {
   debug: false
 };
 
-const customClient = async ({ text, onProgress, convo, promptPrefix, chatGptLabel }) => {
+const customClient = async ({ text, onProgress, convo, promptPrefix, chatGptLabel, abortController }) => {
   const ChatGPTClient = (await import('@waylaidwanderer/chatgpt-api')).default;
   const store = {
     store: new KeyvFile({ filename: './data/cache.json' })
@@ -23,7 +23,7 @@ const customClient = async ({ text, onProgress, convo, promptPrefix, chatGptLabe
 
   const client = new ChatGPTClient(process.env.OPENAI_KEY, clientOptions, store);
 
-  let options = { onProgress };
+  let options = { onProgress, abortController };
   if (!!convo.parentMessageId && !!convo.conversationId) {
     options = { ...options, ...convo };
   }

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",

api/server/routes/ask.js

@@ -12,7 +12,7 @@ router.use('/bing', askBing);
 router.use('/sydney', askSydney);
 
 router.post('/', async (req, res) => {
-  let { model, text, parentMessageId, conversationId: oldConversationId, ...convo } = req.body;
+  let { model, text, overrideParentMessageId=null, parentMessageId, conversationId: oldConversationId, ...convo } = req.body;
   if (text.length === 0) {
     return handleError(res, { text: 'Prompt empty or too short' });
   }
@@ -36,51 +36,22 @@ router.post('/', async (req, res) => {
     ...convo
   });
 
-  await saveMessage(userMessage);
+  if (!overrideParentMessageId) {
-  await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...convo });
+    await saveMessage(userMessage);
+    await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...convo });
+  }
 
   return await ask({
     userMessage,
     model,
     convo,
     preSendRequest: true,
+    overrideParentMessageId,
     req,
     res
   });
 });
 
-router.post('/regenerate', async (req, res) => {
-  const { model } = req.body;
-
-  const oldUserMessage = await getMessages({ messageId: req.body });
-
-  if (oldUserMessage) {
-    const convo = await getConvo(userMessage?.conversationId);
-
-    const userMessageId = crypto.randomUUID();
-
-    let userMessage = {
-      ...userMessage,
-      messageId: userMessageId
-    };
-
-    console.log('ask log for regeneration', {
-      model,
-      ...userMessage,
-      ...convo
-    });
-
-    return await ask({
-      userMessage,
-      model,
-      convo,
-      preSendRequest: false,
-      req,
-      res
-    });
-  } else return handleError(res, { text: 'Parent message not found' });
-});
-
 const ask = async ({
   userMessage,
   overrideParentMessageId = null,
@@ -119,6 +90,14 @@ const ask = async ({
 
   try {
     const progressCallback = createOnProgress();
+
+    const abortController = new AbortController();
+    res.on('close', () => {
+      console.log('The client has disconnected.');
+      // 执行其他操作
+      abortController.abort();
+    })
+
     let gptResponse = await client({
       text,
       onProgress: progressCallback.call(null, model, { res, text }),
@@ -127,7 +106,8 @@ const ask = async ({
         conversationId,
         ...convo
       },
-      ...convo
+      ...convo,
+      abortController
     });
 
     console.log('CLIENT RESPONSE', gptResponse);
@@ -136,10 +116,10 @@ const ask = async ({
       gptResponse.text = gptResponse.response;
       // gptResponse.id = gptResponse.messageId;
       gptResponse.parentMessageId = overrideParentMessageId || userMessageId;
-      userMessage.conversationId = conversationId
+      // userMessage.conversationId = conversationId
-        ? conversationId
+      //   ? conversationId
-        : gptResponse.conversationId;
+      //   : gptResponse.conversationId;
-      await saveMessage(userMessage);
+      // await saveMessage(userMessage);
       delete gptResponse.response;
     }
 

api/server/routes/askBing.js

@@ -9,6 +9,7 @@ router.post('/', async (req, res) => {
   const {
     model,
     text,
+    overrideParentMessageId=null,
     parentMessageId,
     conversationId: oldConversationId,
     ...convo
@@ -37,8 +38,10 @@ router.post('/', async (req, res) => {
     ...convo
   });
 
-  await saveMessage(userMessage);
+  if (!overrideParentMessageId) {
-  await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...convo });
+    await saveMessage(userMessage);
+    await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...convo });
+  }
 
   return await ask({
     isNewConversation,
@@ -46,6 +49,7 @@ router.post('/', async (req, res) => {
     model,
     convo,
     preSendRequest: true,
+    overrideParentMessageId,
     req,
     res
   });
@@ -80,6 +84,14 @@ const ask = async ({
 
   try {
     const progressCallback = createOnProgress();
+
+    const abortController = new AbortController();
+    res.on('close', () => {
+      console.log('The client has disconnected.');
+      // 执行其他操作
+      abortController.abort();
+    })
+
     let response = await askBing({
       text,
       onProgress: progressCallback.call(null, model, {
@@ -91,7 +103,8 @@ const ask = async ({
         ...convo,
         parentMessageId: userParentMessageId,
         conversationId
-      }
+      },
+      abortController
     });
 
     console.log('BING RESPONSE', response);
@@ -101,7 +114,8 @@ const ask = async ({
       convo.conversationSignature || response.conversationSignature;
     userMessage.conversationId = response.conversationId || conversationId;
     userMessage.invocationId = response.invocationId;
-    await saveMessage(userMessage);
+    if (!overrideParentMessageId)
+      await saveMessage(userMessage);
 
     // Bing API will not use our conversationId at the first time,
     // so change the placeholder conversationId to the real one.
@@ -117,8 +131,8 @@ const ask = async ({
       );
     conversationId = userMessage.conversationId;
 
-    response.text = response.response;
+    response.text = response.response || response.details.spokenText || '**Bing refused to answer.**';
-    delete response.response;
+    // delete response.response;
     // response.id = response.details.messageId;
     response.suggestions =
       response.details.suggestedResponses &&

api/server/routes/askSydney.js

@@ -9,6 +9,7 @@ router.post('/', async (req, res) => {
   const {
     model,
     text,
+    overrideParentMessageId=null,
     parentMessageId,
     conversationId: oldConversationId,
     ...convo
@@ -37,8 +38,10 @@ router.post('/', async (req, res) => {
     ...convo
   });
 
-  await saveMessage(userMessage);
+  if (!overrideParentMessageId) {
-  await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...convo });
+    await saveMessage(userMessage);
+    await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...convo });
+  }
 
   return await ask({
     isNewConversation,
@@ -46,6 +49,7 @@ router.post('/', async (req, res) => {
     model,
     convo,
     preSendRequest: true,
+    overrideParentMessageId,
     req,
     res
   });
@@ -80,6 +84,14 @@ const ask = async ({
 
   try {
     const progressCallback = createOnProgress();
+
+    const abortController = new AbortController();
+    res.on('close', () => {
+      console.log('The client has disconnected.');
+      // 执行其他操作
+      abortController.abort();
+    })
+
     let response = await askSydney({
       text,
       onProgress: progressCallback.call(null, model, {
@@ -91,7 +103,8 @@ const ask = async ({
         parentMessageId: userParentMessageId,
         conversationId,
         ...convo
-      }
+      },
+      abortController
     });
 
     console.log('SYDNEY RESPONSE', response);
@@ -102,7 +115,8 @@ const ask = async ({
     userMessage.conversationId = response.conversationId || conversationId;
     userMessage.invocationId = response.invocationId;
     // Unlike gpt and bing, Sydney will never accept our given userMessage.messageId, it will generate its own one.
-    await saveMessage(userMessage);
+    if (!overrideParentMessageId)
+      await saveMessage(userMessage);
 
     // Save sydney response
     // response.id = response.messageId;
@@ -111,8 +125,8 @@ const ask = async ({
     response.conversationSignature = convo.conversationSignature
       ? convo.conversationSignature
       : crypto.randomUUID();
-    response.text = response.response;
+    response.text = response.response || response.details.spokenText || '**Bing refused to answer.**';
-    delete response.response;
+    // delete response.response;
     response.suggestions =
       response.details.suggestedResponses &&
       response.details.suggestedResponses.map((s) => s.text);
@@ -125,7 +139,8 @@ const ask = async ({
 
     // Save user message
     userMessage.conversationId = response.conversationId || conversationId;
-    await saveMessage(userMessage);
+    if (!overrideParentMessageId)
+      await saveMessage(userMessage);
 
     // Bing API will not use our conversationId at the first time,
     // so change the placeholder conversationId to the real one.

api/server/routes/handlers.js

@@ -1,8 +1,6 @@
 const _ = require('lodash');
-const sanitizeHtml = require('sanitize-html');
 const citationRegex = /\[\^\d+?\^]/g;
 const { getCitations, citeText, detectCode } = require('../../app/');
-// const htmlTagRegex = /(<\/?\s*[a-zA-Z]*\s*(?:\s+[a-zA-Z]+\s*=\s*(?:"[^"]*"|'[^']*'))*\s*(?:\/?)>|<\s*[a-zA-Z]+\s*(?:\s+[a-zA-Z]+\s*=\s*(?:"[^"]*"|'[^']*'))*\s*(?:\/?>|<\/?>))/g;
 
 const handleError = (res, message) => {
   res.write(`event: error\ndata: ${JSON.stringify(message)}\n\n`);
@@ -28,14 +26,6 @@ const createOnProgress = () => {
       tokens = tokens.replace(/^\n/, '');
     }
 
-    // const htmlTags = tokens.match(htmlTagRegex);
-    // if (tokens.includes('```') && htmlTags && htmlTags.length > 0) {
-    //   htmlTags.forEach((tag) => {
-    //     const sanitizedTag = sanitizeHtml(tag);
-    //     tokens = tokens.replaceAll(tag, sanitizedTag);
-    //   });
-    // }
-
     if (bing) {
       tokens = citeText(tokens, true);
     }
@@ -54,7 +44,7 @@ const createOnProgress = () => {
 
 const handleText = async (response, bing = false) => {
   let { text } = response;
-  text = await detectCode(text);
+  // text = await detectCode(text);
   response.text = text;
 
   if (bing) {
@@ -66,14 +56,6 @@ const handleText = async (response, bing = false) => {
     text += links?.length > 0 ? `\n<small>${links}</small>` : '';
   }
 
-  // const htmlTags = text.match(htmlTagRegex);
-  // if (text.includes('```') && htmlTags && htmlTags.length > 0) {
-  //   htmlTags.forEach((tag) => {
-  //     const sanitizedTag = sanitizeHtml(tag);
-  //     text = text.replaceAll(tag, sanitizedTag);
-  //   });
-  // }
-
   return text;
 };
 

client/public/index.html

@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
+    <meta name="theme-color" content="#343541">
     <title>ChatGPT Clone</title>
     <link
       rel="shortcut icon"

client/src/components/Conversations/Conversation.jsx

@@ -58,7 +58,8 @@ export default function Conversation({
           jailbreakConversationId,
           conversationSignature,
           clientId,
-          invocationId
+          invocationId,
+          latestMessage: null
         })
       );
     } else {
@@ -69,7 +70,8 @@ export default function Conversation({
           jailbreakConversationId: null,
           conversationSignature: null,
           clientId: null,
-          invocationId: null
+          invocationId: null,
+          latestMessage: null
         })
       );
     }

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/SubmitButton.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-export default function SubmitButton({ submitMessage }) {
+export default function SubmitButton({ submitMessage, disabled }) {
-  const { isSubmitting, disabled } = useSelector((state) => state.submit);
+  const { isSubmitting } = useSelector((state) => state.submit);
+  const { error, latestMessage } = useSelector((state) => state.convo);
+
   const clickHandler = (e) => {
     e.preventDefault();
     submitMessage();
@@ -28,7 +30,7 @@ export default function SubmitButton({ submitMessage }) {
       disabled={disabled}
       className="group absolute bottom-0 right-0 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
     >
-      <div className="m-1 rounded-md p-2 pt-[10px] pb-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
+      <div className="m-1 mr-0 rounded-md p-2 pt-[10px] pb-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
         <svg
           stroke="currentColor"
           fill="none"

client/src/components/Main/TextChat.jsx

@@ -7,15 +7,23 @@ import Footer from './Footer';
 import TextareaAutosize from 'react-textarea-autosize';
 import createPayload from '~/utils/createPayload';
 import resetConvo from '~/utils/resetConvo';
+import RegenerateIcon from '../svg/RegenerateIcon';
+import StopGeneratingIcon from '../svg/StopGeneratingIcon';
 import { useSelector, useDispatch } from 'react-redux';
-import { setConversation, setNewConvo, setError, refreshConversation } from '~/store/convoSlice';
+import {
+  setConversation,
+  setNewConvo,
+  setError,
+  refreshConversation
+} from '~/store/convoSlice';
 import { setMessages } from '~/store/messageSlice';
 import { setSubmitState, setSubmission } from '~/store/submitSlice';
 import { setText } from '~/store/textSlice';
+import { useMessageHandler } from '../../utils/handleSubmit';
 
 export default function TextChat({ messages }) {
   const [errorMessage, setErrorMessage] = useState('');
-  const inputRef = useRef(null)
+  const inputRef = useRef(null);
   const isComposing = useRef(false);
   const dispatch = useDispatch();
   const { user } = useSelector((state) => state.user);
@@ -24,17 +32,78 @@ export default function TextChat({ messages }) {
   const { isSubmitting, stopStream, submission, disabled, model, chatGptLabel, promptPrefix } =
     useSelector((state) => state.submit);
   const { text } = useSelector((state) => state.text);
-  const { error } = convo;
+  const { error, latestMessage } = convo;
+  const { ask, regenerate, stopGenerating } = useMessageHandler();
+
+  const isNotAppendable = latestMessage?.cancelled || latestMessage?.error;
 
   // auto focus to input, when enter a conversation.
   useEffect(() => {
     inputRef.current?.focus();
-  }, [convo?.conversationId,])
+  }, [convo?.conversationId]);
 
   const messageHandler = (data, currentState, currentMsg) => {
-    const { messages, _currentMsg, message, sender } = currentState;
+    const { messages, _currentMsg, message, sender, isRegenerate } = currentState;
 
-    dispatch(setMessages([...messages, currentMsg, { sender, text: data, parentMessageId: currentMsg?.messageId, messageId: currentMsg?.messageId + '_', submitting: true }]));
+    if (isRegenerate)
+      dispatch(
+        setMessages([
+          ...messages,
+          {
+            sender,
+            text: data,
+            parentMessageId: message?.overrideParentMessageId,
+            messageId: message?.overrideParentMessageId + '_',
+            submitting: true
+          }
+        ])
+      );
+    else
+      dispatch(
+        setMessages([
+          ...messages,
+          currentMsg,
+          {
+            sender,
+            text: data,
+            parentMessageId: currentMsg?.messageId,
+            messageId: currentMsg?.messageId + '_',
+            submitting: true
+          }
+        ])
+      );
+  };
+
+  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) => {
@@ -42,6 +111,7 @@ export default function TextChat({ messages }) {
     dispatch(
       setConversation({
         conversationId,
+        latestMessage: null
       })
     );
   };
@@ -49,15 +119,16 @@ export default function TextChat({ messages }) {
   const convoHandler = (data, currentState, currentMsg) => {
     const { requestMessage, responseMessage } = data;
     const { conversationId } = requestMessage;
-    const { messages, _currentMsg, message, isCustomModel, sender } =
+    const { messages, _currentMsg, message, isCustomModel, sender, isRegenerate } =
       currentState;
     const { model, chatGptLabel, promptPrefix } = message;
-    dispatch(
+    if (isRegenerate) dispatch(setMessages([...messages, responseMessage]));
-      setMessages([...messages, requestMessage, 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());
@@ -82,15 +153,15 @@ export default function TextChat({ messages }) {
           clientId: null,
           invocationId: null,
           chatGptLabel: model === isCustomModel ? chatGptLabel : null,
-          promptPrefix: model === isCustomModel ? promptPrefix : null
+          promptPrefix: model === isCustomModel ? promptPrefix : null,
+          latestMessage: null
         })
       );
-    } else if (
+    } else if (model === 'bingai') {
-      model === 'bingai'
-    ) {
       console.log('Bing data:', data);
       const { title } = data;
-      const { conversationSignature, clientId, conversationId, invocationId } = responseMessage;
+      const { conversationSignature, clientId, conversationId, invocationId } =
+        responseMessage;
       dispatch(
         setConversation({
           title,
@@ -98,7 +169,8 @@ export default function TextChat({ messages }) {
           conversationSignature,
           clientId,
           conversationId,
-          invocationId
+          invocationId,
+          latestMessage: null
         })
       );
     } else if (model === 'sydney') {
@@ -119,12 +191,11 @@ export default function TextChat({ messages }) {
           conversationSignature,
           clientId,
           conversationId,
-          invocationId
+          invocationId,
+          latestMessage: null
         })
       );
     }
-
-    dispatch(setSubmitState(false));
   };
 
   const errorHandler = (data, currentState, currentMsg) => {
@@ -133,7 +204,7 @@ export default function TextChat({ messages }) {
     const errorResponse = {
       ...data,
       error: true,
-      parentMessageId: currentMsg?.messageId,
+      parentMessageId: currentMsg?.messageId
     };
     setErrorMessage(data?.text);
     dispatch(setSubmitState(false));
@@ -142,51 +213,8 @@ export default function TextChat({ messages }) {
     dispatch(setError(true));
     return;
   };
-
   const submitMessage = () => {
-    if (error) {
+    ask({ text });
-      dispatch(setError(false));
-    }
-
-    if (!!isSubmitting || text.trim() === '') {
-      return;
-    }
-
-    // this is not a real messageId, it is used as placeholder before real messageId returned
-    const fakeMessageId = crypto.randomUUID();
-    const isCustomModel = model === 'chatgptCustom' || !initial[model];
-    const message = text.trim();
-    const sender = model === 'chatgptCustom' ? chatGptLabel : model;
-    let parentMessageId = convo.parentMessageId || '00000000-0000-0000-0000-000000000000';
-    let currentMessages = messages;
-    if (resetConvo(currentMessages, sender)) {
-      parentMessageId = '00000000-0000-0000-0000-000000000000';
-      dispatch(setNewConvo());
-      currentMessages = [];
-    }
-    const currentMsg = { sender: 'User', text: message, current: true, isCreatedByUser: true, parentMessageId , messageId: fakeMessageId };
-    const initialResponse = { sender, text: '', parentMessageId: fakeMessageId, submitting: true };
-
-    dispatch(setSubmitState(true));
-    dispatch(setMessages([...currentMessages, currentMsg, initialResponse]));
-    dispatch(setText(''));
-
-    const submission = {
-      convo,
-      isCustomModel,
-      message: { 
-        ...currentMsg,
-        model,
-        chatGptLabel,
-        promptPrefix,
-      },
-      messages: currentMessages,
-      currentMsg,
-      initialResponse,
-      sender,
-    };
-    console.log('User Input:', message);
-    dispatch(setSubmission(submission));
   };
 
   useEffect(() => {
@@ -196,7 +224,10 @@ export default function TextChat({ messages }) {
     }
 
     const currentState = submission;
-    let currentMsg = currentState.currentMsg;
+
+    let currentMsg = { ...currentState.message };
+    let latestResponseText = '';
+
     const { server, payload } = createPayload(submission);
     const onMessage = (e) => {
       if (stopStream) {
@@ -205,19 +236,20 @@ export default function TextChat({ messages }) {
 
       const data = JSON.parse(e.data);
 
-      // if (data.message) {
-      //   messageHandler(text, currentState);
-      // }
-
       if (data.final) {
         convoHandler(data, currentState, currentMsg);
         console.log('final', data);
-      } if (data.created) {
+      }
+      if (data.created) {
         currentMsg = data.message;
         createdHandler(data, currentState, currentMsg);
       } else {
         let text = data.text || data.response;
+        if (data.initial) {
+          console.log(data);
+        }
         if (data.message) {
+          latestResponseText = text;
           messageHandler(text, currentState, currentMsg);
         }
         // console.log('dataStream', data);
@@ -235,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();
@@ -248,18 +284,30 @@ export default function TextChat({ messages }) {
 
     return () => {
       events.removeEventListener('message', onMessage);
+      const isCancelled = events.readyState <= 1;
       events.close();
+      if (isCancelled) {
+        const e = new Event('cancel');
+        events.dispatchEvent(e);
+      }
     };
   }, [submission]);
 
+  const handleRegenerate = () => {
+    if (latestMessage && !latestMessage?.isCreatedByUser) regenerate(latestMessage);
+  };
+
+  const handleStopGenerating = () => {
+    stopGenerating();
+  };
+
   const handleKeyDown = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
     }
 
     if (e.key === 'Enter' && !e.shiftKey) {
-      if (!isComposing.current)
+      if (!isComposing.current) submitMessage();
-        submitMessage();
     }
   };
 
@@ -272,21 +320,21 @@ export default function TextChat({ messages }) {
       return;
     }
   };
-  
+
   const handleCompositionStart = (e) => {
-    isComposing.current = true
+    isComposing.current = true;
-  }
+  };
 
   const handleCompositionEnd = (e) => {
     isComposing.current = false;
-  }
+  };
 
   const changeHandler = (e) => {
     const { value } = e.target;
 
-    if (isSubmitting && (value === '' || value === '\n')) {
+    // if (isSubmitting && (value === '' || value === '\n')) {
-      return;
+    //   return;
-    }
+    // }
     dispatch(setText(value));
   };
 
@@ -296,44 +344,65 @@ export default function TextChat({ messages }) {
   };
 
   return (
-    <div className="md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient absolute bottom-0 left-0 w-full border-t bg-white 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 pt-2 last:mb-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
+      <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">
-          <div className="ml-1 mt-1.5 flex justify-center gap-0 md:m-auto md:mb-2 md:w-full md:gap-2" />
+          <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">
-          {error ? (
+            {isSubmitting ? (
-            <Regenerate
+              <button
-              submitMessage={submitMessage}
+                onClick={handleStopGenerating}
-              tryAgain={tryAgain}
+                className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
-              errorMessage={errorMessage}
+                type="button"
+              >
+                <StopGeneratingIcon />
+                <span className="hidden md:block">Stop generating</span>
+              </button>
+            ) : latestMessage && !latestMessage?.isCreatedByUser ? (
+              <button
+                onClick={handleRegenerate}
+                className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
+                type="button"
+              >
+                <RegenerateIcon />
+                <span className="hidden md:block">Regenerate response</span>
+              </button>
+            ) : null}
+          </span>
+          <div
+            className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
+              disabled ? 'bg-gray-100' : 'bg-white'
+            } py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
+              disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
+            } dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`}
+          >
+            <ModelMenu />
+            <TextareaAutosize
+              tabIndex="0"
+              autoFocus
+              ref={inputRef}
+              // style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
+              rows="1"
+              value={disabled || isNotAppendable ? '' : text}
+              onKeyUp={handleKeyUp}
+              onKeyDown={handleKeyDown}
+              onChange={changeHandler}
+              onCompositionStart={handleCompositionStart}
+              onCompositionEnd={handleCompositionEnd}
+              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"
             />
-          ) : (
+            <SubmitButton
-            <div
+              submitMessage={submitMessage}
-              className={`relative flex w-full flex-grow flex-col rounded-md border border-black/10 ${
+              disabled={disabled || isNotAppendable}
-                disabled ? 'bg-gray-100' : 'bg-white'
+            />
-              } py-3 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
+          </div>
-                disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
-              } dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`}
-            >
-              <ModelMenu />
-              <TextareaAutosize
-                tabIndex="0"
-                autoFocus
-                ref={inputRef}
-                // style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
-                rows="1"
-                value={text}
-                onKeyUp={handleKeyUp}
-                onKeyDown={handleKeyDown}
-                onChange={changeHandler}
-                onCompositionStart={handleCompositionStart}
-                onCompositionEnd={handleCompositionEnd}
-                placeholder={disabled ? 'Choose another model or customize GPT again' : ''}
-                disabled={disabled}
-                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} />
-            </div>
-          )}
         </div>
       </form>
       <Footer />

client/src/components/Messages/Message.jsx

@@ -4,12 +4,9 @@ import MultiMessage from './MultiMessage';
 import { useSelector, useDispatch } from 'react-redux';
 import HoverButtons from './HoverButtons';
 import SiblingSwitch from './SiblingSwitch';
-import { setError } from '~/store/convoSlice';
+import { setConversation, setLatestMessage } from '../../store/convoSlice';
-import { setMessages } from '~/store/messageSlice';
-import { setSubmitState, setSubmission } from '~/store/submitSlice';
-import { setText } from '~/store/textSlice';
-import { setConversation } from '../../store/convoSlice';
 import { getIconOfModel } from '../../utils';
+import { useMessageHandler } from '../../utils/handleSubmit';
 
 export default function Message({
   message,
@@ -28,14 +25,14 @@ export default function Message({
   const { sender, text, isCreatedByUser, error, submitting } = message;
   const textEditor = useRef(null);
   const convo = useSelector((state) => state.convo);
-  const { initial } = useSelector((state) => state.models);
-  const { error: convoError } = convo;
   const last = !message?.children?.length;
   const edit = message.messageId == currentEditId;
+  const { ask } = useMessageHandler();
   const dispatch = useDispatch();
 
   // const notUser = !isCreatedByUser; // sender.toLowerCase() !== 'user';
-  const blinker = submitting && isSubmitting && last && !isCreatedByUser;
+  // const blinker = submitting && isSubmitting && last && !isCreatedByUser;
+  const blinker = submitting && isSubmitting;
   const generateCursor = useCallback(() => {
     if (!blinker) {
       return '';
@@ -48,11 +45,15 @@ export default function Message({
     if (blinker && !abortScroll) {
       scrollToBottom();
     }
-  }, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
+  }, [isSubmitting, blinker, text, scrollToBottom]);
 
   useEffect(() => {
-    if (last) dispatch(setConversation({ parentMessageId: message?.messageId }));
+    if (last) {
-  }, [last]);
+      // TODO: stop using conversation.parentMessageId and remove it.
+      dispatch(setConversation({ parentMessageId: message?.messageId }));
+      dispatch(setLatestMessage({ ...message }));
+    }
+  }, [last, message]);
 
   const enterEdit = (cancel) => setCurrentEditId(cancel ? -1 : message.messageId);
 
@@ -87,55 +88,11 @@ export default function Message({
   const resubmitMessage = () => {
     const text = textEditor.current.innerText;
 
-    if (convoError) {
+    ask({
-      dispatch(setError(false));
+      text,
-    }
-
-    if (!!isSubmitting || text.trim() === '') {
-      return;
-    }
-
-    // this is not a real messageId, it is used as placeholder before real messageId returned
-    const fakeMessageId = crypto.randomUUID();
-    const isCustomModel = model === 'chatgptCustom' || !initial[model];
-    const currentMsg = {
-      sender: 'User',
-      text: text.trim(),
-      current: true,
-      isCreatedByUser: true,
       parentMessageId: message?.parentMessageId,
-      conversationId: message?.conversationId,
+      conversationId: message?.conversationId
-      messageId: fakeMessageId
+    });
-    };
-    const sender = model === 'chatgptCustom' ? chatGptLabel : model;
-
-    const initialResponse = {
-      sender,
-      text: '',
-      parentMessageId: fakeMessageId,
-      submitting: true
-    };
-
-    dispatch(setSubmitState(true));
-    dispatch(setMessages([...messages, currentMsg, initialResponse]));
-    dispatch(setText(''));
-
-    const submission = {
-      isCustomModel,
-      message: {
-        ...currentMsg,
-        model,
-        chatGptLabel,
-        promptPrefix
-      },
-      messages: messages,
-      currentMsg,
-      initialResponse,
-      sender
-    };
-    console.log('User Input:', currentMsg?.text);
-    // handleSubmit(submission);
-    dispatch(setSubmission(submission));
 
     setSiblingIdx(siblingCount - 1);
     enterEdit(true);

client/src/components/Messages/MultiMessage.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Message from './Message';
 
 export default function MultiMessage({
@@ -14,6 +14,11 @@ export default function MultiMessage({
     setSiblingIdx(messageList?.length - value - 1);
   };
 
+  useEffect(() => {
+    // reset siblingIdx when changes, mostly a new message is submitting.
+    setSiblingIdx(0);
+  }, [messageList?.length])
+
   // if (!messageList?.length) return null;
   if (!(messageList && messageList.length)) {
     return null;

client/src/components/Messages/index.jsx

@@ -1,40 +1,49 @@
-import React, { useEffect, useState, useRef, useMemo } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import Spinner from '../svg/Spinner';
 import { CSSTransition } from 'react-transition-group';
 import ScrollToBottom from './ScrollToBottom';
 import MultiMessage from './MultiMessage';
 import { useSelector } from 'react-redux';
 
-const Messages = ({ messages, messageTree }) => {
+export default function Messages({ messages, messageTree }) {
   const [currentEditId, setCurrentEditId] = useState(-1);
   const { conversationId } = useSelector((state) => state.convo);
+  const { model, customModel, chatGptLabel } = useSelector((state) => state.submit);
+  const { models } = useSelector((state) => state.models);
   const [showScrollButton, setShowScrollButton] = useState(false);
   const scrollableRef = useRef(null);
   const messagesEndRef = useRef(null);
 
+  const modelName = models.find((element) => element.model == model)?.name;
+
   useEffect(() => {
     const timeoutId = setTimeout(() => {
-      const scrollable = scrollableRef.current;
+      const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
-      const hasScrollbar = scrollable.scrollHeight > scrollable.clientHeight;
+      const diff = Math.abs(scrollHeight - scrollTop);
+      const percent = Math.abs(clientHeight - diff ) / clientHeight;
+      const hasScrollbar = scrollHeight > clientHeight && percent > 0.2;
       setShowScrollButton(hasScrollbar);
     }, 650);
 
+    // Add a listener on the window object
+    window.addEventListener('scroll', handleScroll);
+
     return () => {
       clearTimeout(timeoutId);
+      window.removeEventListener('scroll', handleScroll);
     };
   }, [messages]);
 
-  const scrollToBottom = () => {
+  const scrollToBottom = useCallback(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     setShowScrollButton(false);
-  };
+  }, [messagesEndRef]);
 
   const handleScroll = () => {
     const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
     const diff = Math.abs(scrollHeight - scrollTop);
-    const bottom =
+    const percent = Math.abs(clientHeight - diff ) / clientHeight;
-      diff === clientHeight || (diff <= clientHeight + 25 && diff >= clientHeight - 25);
+    if (percent <= 0.2) {
-    if (bottom) {
       setShowScrollButton(false);
     } else {
       setShowScrollButton(true);
@@ -54,13 +63,16 @@ const 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}
     >
       {/* <div className="flex-1 overflow-hidden"> */}
       <div className="dark:gpt-dark-gray h-full">
         <div className="dark:gpt-dark-gray flex h-full flex-col items-center text-sm">
+          <div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300">
+            Model: {modelName} {customModel ? `(${customModel})` : null}
+          </div>
           {messageTree.length === 0 ? (
             <Spinner />
           ) : (
@@ -93,6 +105,4 @@ const Messages = ({ messages, messageTree }) => {
       {/* </div> */}
     </div>
   );
-};
+}
-
-export default React.memo(Messages);

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) {
@@ -187,9 +188,9 @@ export default function ModelMenu() {
           <Button
             variant="outline"
             // style={{backgroundColor: 'rgb(16, 163, 127)'}}
-            className={`absolute bottom-0.5 items-center mb-[1.75px] md:mb-0 rounded-md border-0 p-1 ml-1 md:ml-0 outline-none ${colorProps.join(
+            className={`absolute top-[0.25px] items-center mb-0 rounded-md border-0 p-1 ml-1 md:ml-0 outline-none ${colorProps.join(
               ' '
-            )} focus:ring-0 focus:ring-offset-0 disabled:bottom-0.5 dark:data-[state=open]:bg-opacity-50 md:bottom-1 md:left-1 md:pl-1 md:disabled:bottom-1`}
+            )} focus:ring-0 focus:ring-offset-0 disabled:top-[0.25px] dark:data-[state=open]:bg-opacity-50 md:top-1 md:left-1 md:pl-1 md:disabled:top-1`}
           >
             {icon}
           </Button>

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/components/svg/StopGeneratingIcon.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function StopGeneratingIcon() {
+  return (
+    <svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
+  );
+}

client/src/mobile.css

@@ -46,6 +46,18 @@
 }
 
 @media (max-width: 767px) {
+  .input-panel-button {
+    border: 0;
+  }
+
+  .input-panel-button svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .input-panel {
+  }
+
   .nav-close-button {
     display: block;
     position: absolute;

client/src/store/convoSlice.js

@@ -16,6 +16,7 @@ const initialState = {
   pages: 1,
   refreshConvoHint: 0,
   search: false,
+  latestMessage: null,
   convos: [],
 };
 
@@ -53,6 +54,7 @@ const currentSlice = createSlice({
       state.chatGptLabel = null;
       state.promptPrefix = null;
       state.convosLoading = false;
+      state.latestMessage = null;
     },
     setConvos: (state, action) => {
       state.convos = action.payload.sort(
@@ -67,11 +69,14 @@ const currentSlice = createSlice({
     },
     removeAll: (state) => {
       state.convos = [];
-    }
+    },
+    setLatestMessage: (state, action) => {
+      state.latestMessage = action.payload;
+    },
   }
 });
 
-export const { refreshConversation, setConversation, setPages, setConvos, setNewConvo, setError, increasePage, decreasePage, setPage, removeConvo, removeAll } =
+export const { refreshConversation, setConversation, setPages, setConvos, setNewConvo, setError, increasePage, decreasePage, setPage, removeConvo, removeAll, setLatestMessage } =
   currentSlice.actions;
 
 export default currentSlice.reducer;

client/src/utils/handleSubmit.js

@@ -1,5 +1,91 @@
 import { SSE } from './sse';
-// const newLineRegex = /^\n+/;
+import resetConvo from './resetConvo';
+import { useSelector, useDispatch } from 'react-redux';
+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();
+  const convo = useSelector((state) => state.convo);
+  const { initial } = useSelector((state) => state.models);
+  const { messages } = useSelector((state) => state.messages);
+  const { model, chatGptLabel, promptPrefix, isSubmitting } = useSelector((state) => state.submit);
+  const { text } = useSelector((state) => state.text);
+  const { latestMessage, error } = convo;
+
+  const ask = ({ text, parentMessageId=null, conversationId=null, messageId=null}, { isRegenerate=false }={}) => {
+    if (error) {
+      dispatch(setError(false));
+    }
+
+    if (!!isSubmitting || text === '') {
+      return;
+    }
+    
+    // this is not a real messageId, it is used as placeholder before real messageId returned
+    text = text.trim();
+    const fakeMessageId = crypto.randomUUID();
+    const isCustomModel = model === 'chatgptCustom' || !initial[model];
+    const sender = model === 'chatgptCustom' ? chatGptLabel : model;
+    parentMessageId = parentMessageId || latestMessage?.messageId || '00000000-0000-0000-0000-000000000000';
+    let currentMessages = messages;
+    if (resetConvo(currentMessages, sender)) {
+      parentMessageId = '00000000-0000-0000-0000-000000000000';
+      conversationId = null;
+      dispatch(setNewConvo());
+      currentMessages = [];
+    }
+    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 };
+
+    const submission = {
+      convo,
+      isCustomModel,
+      message: { 
+        ...currentMsg,
+        model,
+        chatGptLabel,
+        promptPrefix,
+        overrideParentMessageId: isRegenerate?messageId:null
+      },
+      messages: currentMessages,
+      isRegenerate,
+      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));
+  }
+
+  const regenerate = ({ parentMessageId }) => {
+    const parentMessage = messages?.find(element => element.messageId == parentMessageId);
+
+    if (parentMessage && parentMessage.isCreatedByUser)
+      ask({ ...parentMessage }, { isRegenerate: true })
+    else
+      console.error('Failed to regenerate the message: parentMessage not found or not created by user.', message);
+  }
+
+  const stopGenerating = () => {
+    dispatch(setSubmission({}));
+  }
+
+  return { ask, regenerate, stopGenerating }
+}
+
+export { useMessageHandler };
 
 export default function handleSubmit({
   model,

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