diff --git a/api/app/chatgpt-browser.js b/api/app/chatgpt-browser.js
index a5bea22729..792f108e7d 100644
--- a/api/app/chatgpt-browser.js
+++ b/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 };
diff --git a/api/app/chatgpt-client.js b/api/app/chatgpt-client.js
index 350d1210ce..04368e85bd 100644
--- a/api/app/chatgpt-client.js
+++ b/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 };
diff --git a/api/app/chatgpt-custom.js b/api/app/chatgpt-custom.js
index e7a0ee0503..a1c797e31d 100644
--- a/api/app/chatgpt-custom.js
+++ b/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 };
   }
diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index c8313efd68..3ce95ea1d6 100644
--- a/api/server/routes/ask.js
+++ b/api/server/routes/ask.js
@@ -90,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 }),
@@ -98,7 +106,8 @@ const ask = async ({
         conversationId,
         ...convo
       },
-      ...convo
+      ...convo,
+      abortController
     });
 
     console.log('CLIENT RESPONSE', gptResponse);
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index 007aba779b..bff342ca3e 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -84,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, {
@@ -95,7 +103,8 @@ const ask = async ({
         ...convo,
         parentMessageId: userParentMessageId,
         conversationId
-      }
+      },
+      abortController
     });
 
     console.log('BING RESPONSE', response);
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index 77f95371a0..81a3b2fa20 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -84,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, {
@@ -95,7 +103,8 @@ const ask = async ({
         parentMessageId: userParentMessageId,
         conversationId,
         ...convo
-      }
+      },
+      abortController
     });
 
     console.log('SYDNEY RESPONSE', response);
diff --git a/client/src/components/Main/SubmitButton.jsx b/client/src/components/Main/SubmitButton.jsx
index 1aa437e26e..79b1634c54 100644
--- a/client/src/components/Main/SubmitButton.jsx
+++ b/client/src/components/Main/SubmitButton.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-export default function SubmitButton({ submitMessage }) {
-  const { isSubmitting, disabled } = useSelector((state) => state.submit);
+export default function SubmitButton({ submitMessage, disabled }) {
+  const { isSubmitting } = useSelector((state) => state.submit);
+  const { error, latestMessage } = useSelector((state) => state.convo);
+
   const clickHandler = (e) => {
     e.preventDefault();
     submitMessage();
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index e6bd79c8f0..59b81e7182 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -28,7 +28,9 @@ export default function TextChat({ messages }) {
     useSelector((state) => state.submit);
   const { text } = useSelector((state) => state.text);
   const { error, latestMessage } = convo;
-  const { ask, regenerate } = useMessageHandler();
+  const { ask, regenerate, stopGenerating } = useMessageHandler();
+
+  const isNotAppendable = (!isSubmitting && latestMessage?.submitting) || latestMessage?.error;
 
   // auto focus to input, when enter a conversation.
   useEffect(() => {
@@ -231,6 +233,10 @@ export default function TextChat({ messages }) {
       regenerate(latestMessage)
   }
 
+  const handleStopGenerating = () => {
+    stopGenerating()
+  }
+
   const handleKeyDown = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
@@ -273,31 +279,23 @@ 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">
       <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">
         <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" />
-          {error ? (
-            <Regenerate
-              submitMessage={submitMessage}
-              tryAgain={tryAgain}
-              errorMessage={errorMessage}
-            />
-          ) : (
-            <>
-              <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>:
+            <span className="flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center">
+              {isSubmitting?
+                <button
+                  onClick={handleStopGenerating}
+                  className="btn btn-neutral flex justify-center gap-2 border-0 md:border"
+                  type="button"
+                >
+                  <StopGeneratingIcon />
+                  Stop generating
+                </button>
+                :(latestMessage&&!latestMessage?.isCreatedByUser)?
                     <button
                       onClick={handleRegenerate}
                       className="btn btn-neutral flex justify-center gap-2 border-0 md:border"
@@ -307,36 +305,34 @@ export default function TextChat({ messages }) {
                       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>
-            </>
-          )}
+              }
+            </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' : isNotAppendable ? 'Can not send new message after an error or unfinished response.' : ''}
+                disabled={disabled || isNotAppendable}
+                className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-8 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
+              />
+              <SubmitButton submitMessage={submitMessage} disabled={disabled || isNotAppendable} />
+            </div>
         </div>
       </form>
       <Footer />
diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index d53c46d412..9e778ad094 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/client/src/components/Messages/Message.jsx
@@ -58,7 +58,7 @@ export default function Message({
       dispatch(setConversation({ parentMessageId: message?.messageId }));
       dispatch(setLatestMessage({ ...message }));
     }
-  }, [last]);
+  }, [last, message]);
 
   const enterEdit = (cancel) => setCurrentEditId(cancel ? -1 : message.messageId);
 
diff --git a/client/src/components/Messages/index.jsx b/client/src/components/Messages/index.jsx
index 27fd406425..951d57c281 100644
--- a/client/src/components/Messages/index.jsx
+++ b/client/src/components/Messages/index.jsx
@@ -67,7 +67,7 @@ const Messages = ({ messages, messageTree }) => {
         <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>
-        <div className="dark:gpt-dark-gray flex h-full flex-col items-center text-sm">
+        <div className="dark:gpt-dark-gray flex flex-col items-center text-sm">
           {messageTree.length === 0 ? (
             <Spinner />
           ) : (
diff --git a/client/src/utils/handleSubmit.js b/client/src/utils/handleSubmit.js
index 5e4969f394..bdfa46713a 100644
--- a/client/src/utils/handleSubmit.js
+++ b/client/src/utils/handleSubmit.js
@@ -42,10 +42,8 @@ const useMessageHandler = () => {
 
     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(''));
@@ -78,8 +76,11 @@ const useMessageHandler = () => {
       console.error('Failed to regenerate the message: parentMessage not found or not created by user.', message);
   }
 
+  const stopGenerating = () => {
+    dispatch(setSubmission({}));
+  }
 
-  return { ask, regenerate }
+  return { ask, regenerate, stopGenerating }
 }
 
 export { useMessageHandler };