diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index f016a49b30..c8313efd68 100644
--- a/api/server/routes/ask.js
+++ b/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);
-  await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...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,
@@ -136,10 +107,10 @@ const ask = async ({
       gptResponse.text = gptResponse.response;
       // gptResponse.id = gptResponse.messageId;
       gptResponse.parentMessageId = overrideParentMessageId || userMessageId;
-      userMessage.conversationId = conversationId
-        ? conversationId
-        : gptResponse.conversationId;
-      await saveMessage(userMessage);
+      // userMessage.conversationId = conversationId
+      //   ? conversationId
+      //   : gptResponse.conversationId;
+      // await saveMessage(userMessage);
       delete gptResponse.response;
     }
 
diff --git a/client/src/components/Conversations/Conversation.jsx b/client/src/components/Conversations/Conversation.jsx
index 9e5c3dce6d..5d503372fd 100644
--- a/client/src/components/Conversations/Conversation.jsx
+++ b/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
         })
       );
     }
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index 9221e67090..e6bd79c8f0 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/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,8 @@ 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 } = useMessageHandler();
 
   // auto focus to input, when enter a conversation.
   useEffect(() => {
@@ -32,9 +36,12 @@ 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;
 
-    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 createdHandler = (data, currentState, currentMsg) => {
@@ -42,6 +49,7 @@ export default function TextChat({ messages }) {
     dispatch(
       setConversation({
         conversationId,
+        latestMessage: null
       })
     );
   };
@@ -49,12 +57,17 @@ 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(
-      setMessages([...messages, requestMessage, responseMessage,])
-    );
+    if (isRegenerate)
+      dispatch(
+        setMessages([...messages, responseMessage,])
+      );
+    else
+      dispatch(
+        setMessages([...messages, requestMessage, responseMessage,])
+      );
 
     const isBing = model === 'bingai' || model === 'sydney';
 
@@ -82,7 +95,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 +112,8 @@ export default function TextChat({ messages }) {
           conversationSignature,
           clientId,
           conversationId,
-          invocationId
+          invocationId,
+          latestMessage: null
         })
       );
     } else if (model === 'sydney') {
@@ -119,7 +134,8 @@ export default function TextChat({ messages }) {
           conversationSignature,
           clientId,
           conversationId,
-          invocationId
+          invocationId,
+          latestMessage: null
         })
       );
     }
@@ -142,51 +158,8 @@ export default function TextChat({ messages }) {
     dispatch(setError(true));
     return;
   };
-
   const submitMessage = () => {
-    if (error) {
-      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));
+    ask({ text })
   };
 
   useEffect(() => {
@@ -196,7 +169,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) {
@@ -252,6 +226,11 @@ export default function TextChat({ messages }) {
     };
   }, [submission]);
 
+  const handleRegenerate = () => {
+    if (latestMessage&&!latestMessage?.isCreatedByUser)
+      regenerate(latestMessage)
+  }
+
   const handleKeyDown = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
@@ -307,32 +286,56 @@ export default function TextChat({ messages }) {
               errorMessage={errorMessage}
             />
           ) : (
-            <div
-              className={`relative flex w-full 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 ${
-                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>
+            <>
+              <span className="flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center">
+                {(latestMessage&&!latestMessage?.isCreatedByUser)?
+                  isSubmitting?
+                    <button
+                      onClick={null}
+                      className="btn btn-neutral flex justify-center gap-2 border-0 md:border"
+                      type="button"
+                    >
+                      <StopGeneratingIcon />
+                      Stop Generating
+                    </button>:
+                    <button
+                      onClick={handleRegenerate}
+                      className="btn btn-neutral flex justify-center gap-2 border-0 md:border"
+                      type="button"
+                    >
+                      <RegenerateIcon />
+                      Regenerate response
+                    </button>
+                  :null
+                }
+              </span>
+              <div
+                className={`relative flex w-full 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={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-9 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>
diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index f7e446463e..d53c46d412 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/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,7 +53,11 @@ export default function Message({
   }, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
 
   useEffect(() => {
-    if (last) dispatch(setConversation({ parentMessageId: message?.messageId }));
+    if (last) {
+      // TODO: stop using conversation.parentMessageId and remove it.
+      dispatch(setConversation({ parentMessageId: message?.messageId }));
+      dispatch(setLatestMessage({ ...message }));
+    }
   }, [last]);
 
   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) {
-      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));
+    ask({ text, parentMessageId: message?.parentMessageId, conversationId: message?.conversationId,});
 
     setSiblingIdx(siblingCount - 1);
     enterEdit(true);
diff --git a/client/src/components/Messages/MultiMessage.jsx b/client/src/components/Messages/MultiMessage.jsx
index 24ab761eb6..1525fc495a 100644
--- a/client/src/components/Messages/MultiMessage.jsx
+++ b/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;
diff --git a/client/src/components/svg/StopGeneratingIcon.jsx b/client/src/components/svg/StopGeneratingIcon.jsx
new file mode 100644
index 0000000000..4c134cafe9
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/store/convoSlice.js b/client/src/store/convoSlice.js
index c862a8e1e7..e234af87d0 100644
--- a/client/src/store/convoSlice.js
+++ b/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;
diff --git a/client/src/utils/handleSubmit.js b/client/src/utils/handleSubmit.js
index 5c4184aac5..5e4969f394 100644
--- a/client/src/utils/handleSubmit.js
+++ b/client/src/utils/handleSubmit.js
@@ -1,5 +1,88 @@
 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) {
+      console.log([...currentMessages, initialResponse])
+      dispatch(setMessages([...currentMessages, initialResponse]));
+    } else {
+      console.log([...currentMessages, currentMsg, initialResponse])
+      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);
+  }
+
+
+  return { ask, regenerate }
+}
+
+export { useMessageHandler };
 
 export default function handleSubmit({
   model,