Merge pull request #80 from wtlyu/feat-regenerate-and-cancel

Feat regenerate and cancel

api/app/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/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/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/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
   });
 
+  if (!overrideParentMessageId) {
     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
   });
 
+  if (!overrideParentMessageId) {
     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,6 +114,7 @@ const ask = async ({
       convo.conversationSignature || response.conversationSignature;
     userMessage.conversationId = response.conversationId || conversationId;
     userMessage.invocationId = response.invocationId;
+    if (!overrideParentMessageId)
       await saveMessage(userMessage);
 
     // Bing API will not use our conversationId at the first time,

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
   });
 
+  if (!overrideParentMessageId) {
     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,6 +115,7 @@ 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.
+    if (!overrideParentMessageId)
       await saveMessage(userMessage);
 
     // Save sydney response
@@ -125,6 +139,7 @@ const ask = async ({
 
     // Save user message
     userMessage.conversationId = response.conversationId || conversationId;
+    if (!overrideParentMessageId)
       await saveMessage(userMessage);
 
     // Bing API will not use our conversationId at the first time,

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/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,11 +7,14 @@ 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 { 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('');
@@ -24,7 +27,10 @@ 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 = (!isSubmitting && latestMessage?.submitting) || latestMessage?.error;
 
   // auto focus to input, when enter a conversation.
   useEffect(() => {
@@ -32,8 +38,11 @@ export default function TextChat({ messages }) {
   }, [convo?.conversationId,])
 
   const messageHandler = (data, currentState, currentMsg) => {
-    const { messages, _currentMsg, message, sender } = currentState;
+    const { messages, _currentMsg, message, sender, isRegenerate } = currentState;
 
+    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 }]));
   };
 
@@ -42,6 +51,7 @@ export default function TextChat({ messages }) {
     dispatch(
       setConversation({
         conversationId,
+        latestMessage: null
       })
     );
   };
@@ -49,9 +59,14 @@ 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;
+    if (isRegenerate)
+      dispatch(
+        setMessages([...messages, responseMessage,])
+      );
+    else
       dispatch(
         setMessages([...messages, requestMessage, responseMessage,])
       );
@@ -82,7 +97,8 @@ 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 (
@@ -98,7 +114,8 @@ export default function TextChat({ messages }) {
           conversationSignature,
           clientId,
           conversationId,
-          invocationId
+          invocationId,
+          latestMessage: null
         })
       );
     } else if (model === 'sydney') {
@@ -119,7 +136,8 @@ export default function TextChat({ messages }) {
           conversationSignature,
           clientId,
           conversationId,
-          invocationId
+          invocationId,
+          latestMessage: null
         })
       );
     }
@@ -142,51 +160,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 +171,8 @@ export default function TextChat({ messages }) {
     }
 
     const currentState = submission;
-    let currentMsg = currentState.currentMsg;
+    let currentMsg = {...currentState.message};
+    
     const { server, payload } = createPayload(submission);
     const onMessage = (e) => {
       if (stopStream) {
@@ -247,11 +223,21 @@ export default function TextChat({ messages }) {
     events.stream();
 
     return () => {
+      dispatch(setSubmitState(false));
       events.removeEventListener('message', onMessage);
       events.close();
     };
   }, [submission]);
 
+  const handleRegenerate = () => {
+    if (latestMessage&&!latestMessage?.isCreatedByUser)
+      regenerate(latestMessage)
+  }
+
+  const handleStopGenerating = () => {
+    stopGenerating()
+  }
+
   const handleKeyDown = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
@@ -294,23 +280,37 @@ export default function TextChat({ messages }) {
     e.preventDefault();
     dispatch(setError(false));
   };
-
+  isNotAppendable
   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 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:bg-transparent dark:md:bg-vert-dark-gradient pt-2">
-      <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 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">
-          <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="flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center order-last md:order-none">
-          {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 w-full flex-grow flex-col rounded-md border border-black/10 ${
+              className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
                 disabled ? 'bg-gray-100' : 'bg-white'
-              } py-3 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
+              } 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`}
             >
@@ -327,13 +327,12 @@ export default function TextChat({ messages }) {
                 onChange={changeHandler}
                 onCompositionStart={handleCompositionStart}
                 onCompositionEnd={handleCompositionEnd}
-                placeholder={disabled ? 'Choose another model or customize GPT again' : ''}
+                placeholder={disabled ? 'Choose another model or customize GPT again' : isNotAppendable ? 'Can not send new message after an error or unfinished response.' : ''}
-                disabled={disabled}
+                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} />
+              <SubmitButton submitMessage={submitMessage} disabled={disabled || isNotAppendable} />
             </div>
-          )}
         </div>
       </form>
       <Footer />

client/src/components/Messages/Message.jsx

@@ -8,8 +8,9 @@ import { setError } 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 { setConversation, setLatestMessage } from '../../store/convoSlice';
 import { getIconOfModel } from '../../utils';
+import { useMessageHandler } from '../../utils/handleSubmit'
 
 export default function Message({
   message,
@@ -32,6 +33,7 @@ export default function Message({
   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';
@@ -51,8 +53,12 @@ export default function Message({
   }, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
 
   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 +93,7 @@ export default function Message({
   const resubmitMessage = () => {
     const text = textEditor.current.innerText;
 
-    if (convoError) {
+    ask({ text, parentMessageId: message?.parentMessageId, conversationId: message?.conversationId,});
-      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 currentMsg = {
-      sender: 'User',
-      text: text.trim(),
-      current: true,
-      isCreatedByUser: true,
-      parentMessageId: message?.parentMessageId,
-      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

@@ -8,10 +8,14 @@ import { useSelector } from 'react-redux';
 const 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;
@@ -61,6 +65,9 @@ const Messages = ({ messages, messageTree }) => {
       {/* <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-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300 text-sm">
+            Model: {modelName} {customModel?`(${customModel})`:null}
+          </div>
           {messageTree.length === 0 ? (
             <Spinner />
           ) : (

client/src/components/Models/ModelMenu.jsx

@@ -187,9 +187,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/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

@@ -15,6 +15,7 @@ const initialState = {
   pageNumber: 1,
   pages: 1,
   refreshConvoHint: 0,
+  latestMessage: null,
   convos: [],
 };
 
@@ -52,6 +53,7 @@ const currentSlice = createSlice({
       state.chatGptLabel = null;
       state.promptPrefix = null;
       state.convosLoading = false;
+      state.latestMessage = null;
     },
     setConvos: (state, action) => {
       state.convos = action.payload.sort(
@@ -66,11 +68,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,89 @@
 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';
+
+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 };
+
+    dispatch(setSubmitState(true));
+    if (isRegenerate) {
+      dispatch(setMessages([...currentMessages, initialResponse]));
+    } else {
+      dispatch(setMessages([...currentMessages, currentMsg, initialResponse]));
+    }
+    dispatch(setText(''));
+
+    const submission = {
+      convo,
+      isCustomModel,
+      message: { 
+        ...currentMsg,
+        model,
+        chatGptLabel,
+        promptPrefix,
+        overrideParentMessageId: isRegenerate?messageId:null
+      },
+      messages: currentMessages,
+      isRegenerate,
+      initialResponse,
+      sender,
+    };
+    console.log('User Input:', text);
+    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,