diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index 32b12cdf00..8d7db4e71a 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -10,15 +10,20 @@ 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'
+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);
@@ -35,15 +40,39 @@ export default function TextChat({ messages }) {
   // 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, isRegenerate } = currentState;
 
     if (isRegenerate)
-      dispatch(setMessages([...messages, { sender, text: data, parentMessageId: message?.overrideParentMessageId, messageId: message?.overrideParentMessageId + '_', submitting: true }]));
+      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 }]));
+      dispatch(
+        setMessages([
+          ...messages,
+          currentMsg,
+          {
+            sender,
+            text: data,
+            parentMessageId: currentMsg?.messageId,
+            messageId: currentMsg?.messageId + '_',
+            submitting: true
+          }
+        ])
+      );
   };
 
   const createdHandler = (data, currentState, currentMsg) => {
@@ -62,14 +91,8 @@ export default function TextChat({ messages }) {
     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,])
-      );
+    if (isRegenerate) dispatch(setMessages([...messages, responseMessage]));
+    else dispatch(setMessages([...messages, requestMessage, responseMessage]));
 
     const isBing = model === 'bingai' || model === 'sydney';
 
@@ -101,12 +124,11 @@ export default function TextChat({ messages }) {
           latestMessage: null
         })
       );
-    } else if (
-      model === 'bingai'
-    ) {
+    } else if (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,
@@ -151,7 +173,7 @@ export default function TextChat({ messages }) {
     const errorResponse = {
       ...data,
       error: true,
-      parentMessageId: currentMsg?.messageId,
+      parentMessageId: currentMsg?.messageId
     };
     setErrorMessage(data?.text);
     dispatch(setSubmitState(false));
@@ -161,7 +183,7 @@ export default function TextChat({ messages }) {
     return;
   };
   const submitMessage = () => {
-    ask({ text })
+    ask({ text });
   };
 
   useEffect(() => {
@@ -171,8 +193,8 @@ export default function TextChat({ messages }) {
     }
 
     const currentState = submission;
-    let currentMsg = {...currentState.message};
-    
+    let currentMsg = { ...currentState.message };
+
     const { server, payload } = createPayload(submission);
     const onMessage = (e) => {
       if (stopStream) {
@@ -181,18 +203,18 @@ 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) {
           messageHandler(text, currentState, currentMsg);
         }
@@ -230,13 +252,12 @@ export default function TextChat({ messages }) {
   }, [submission]);
 
   const handleRegenerate = () => {
-    if (latestMessage&&!latestMessage?.isCreatedByUser)
-      regenerate(latestMessage)
-  }
+    if (latestMessage && !latestMessage?.isCreatedByUser) regenerate(latestMessage);
+  };
 
   const handleStopGenerating = () => {
-    stopGenerating()
-  }
+    stopGenerating();
+  };
 
   const handleKeyDown = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
@@ -244,8 +265,7 @@ export default function TextChat({ messages }) {
     }
 
     if (e.key === 'Enter' && !e.shiftKey) {
-      if (!isComposing.current)
-        submitMessage();
+      if (!isComposing.current) submitMessage();
     }
   };
 
@@ -258,14 +278,14 @@ 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;
@@ -280,59 +300,73 @@ export default function TextChat({ messages }) {
     e.preventDefault();
     dispatch(setError(false));
   };
-  isNotAppendable
+
+  const placeholder = () => {
+    if (disabled && isSubmitting) {
+      return 'Choose another model or customize GPT again';
+    } else if (!isSubmitting && latestMessage?.submitting) {
+      return 'Message in progress...';
+      // } else if (latestMessage?.error) {
+      // return 'Error...';
+    } else {
+      return '';
+    }
+  };
+
   return (
-    <div className="input-panel 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 md:pt-2 last:mb-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
+    <div className="input-panel md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient absolute bottom-0 left-0 w-full border-t bg-white pt-2 dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent">
+      <form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
         <div className="relative flex h-full flex-1 md:flex-col">
-            <span className="flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center order-last md:order-none">
-              {isSubmitting?
-                <button
-                  onClick={handleStopGenerating}
-                  className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
-                  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={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-12 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>
+          <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">
+            {isSubmitting ? (
+              <button
+                onClick={handleStopGenerating}
+                className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
+                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={text}
+              onKeyUp={handleKeyUp}
+              onKeyDown={handleKeyDown}
+              onChange={changeHandler}
+              onCompositionStart={handleCompositionStart}
+              onCompositionEnd={handleCompositionEnd}
+              placeholder={placeholder()}
+              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
+              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 9e778ad094..e3a2b5c82e 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/client/src/components/Messages/Message.jsx
@@ -4,13 +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 { setMessages } from '~/store/messageSlice';
-import { setSubmitState, setSubmission } from '~/store/submitSlice';
-import { setText } from '~/store/textSlice';
 import { setConversation, setLatestMessage } from '../../store/convoSlice';
 import { getIconOfModel } from '../../utils';
-import { useMessageHandler } from '../../utils/handleSubmit'
+import { useMessageHandler } from '../../utils/handleSubmit';
 
 export default function Message({
   message,
@@ -29,15 +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 '';
@@ -50,7 +45,7 @@ export default function Message({
     if (blinker && !abortScroll) {
       scrollToBottom();
     }
-  }, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
+  }, [isSubmitting, blinker, text, scrollToBottom]);
 
   useEffect(() => {
     if (last) {
@@ -93,7 +88,11 @@ export default function Message({
   const resubmitMessage = () => {
     const text = textEditor.current.innerText;
 
-    ask({ text, parentMessageId: message?.parentMessageId, conversationId: message?.conversationId,});
+    ask({
+      text,
+      parentMessageId: message?.parentMessageId,
+      conversationId: message?.conversationId
+    });
 
     setSiblingIdx(siblingCount - 1);
     enterEdit(true);
diff --git a/client/src/components/Messages/index.jsx b/client/src/components/Messages/index.jsx
index f87101fb31..28b2fbfeda 100644
--- a/client/src/components/Messages/index.jsx
+++ b/client/src/components/Messages/index.jsx
@@ -1,11 +1,11 @@
-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);
@@ -14,31 +14,36 @@ const Messages = ({ messages, messageTree }) => {
   const scrollableRef = useRef(null);
   const messagesEndRef = useRef(null);
 
-  const modelName = models.find(element => element.model==model)?.name
+  const modelName = models.find((element) => element.model == model)?.name;
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
-      const scrollable = scrollableRef.current;
-      const hasScrollbar = scrollable.scrollHeight > scrollable.clientHeight;
+      const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
+      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 =
-      diff === clientHeight || (diff <= clientHeight + 25 && diff >= clientHeight - 25);
-    if (bottom) {
+    const percent = Math.abs(clientHeight - diff ) / clientHeight;
+    if (percent <= 0.2) {
       setShowScrollButton(false);
     } else {
       setShowScrollButton(true);
@@ -65,8 +70,8 @@ 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 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 />
@@ -100,6 +105,4 @@ const Messages = ({ messages, messageTree }) => {
       {/* </div> */}
     </div>
   );
-};
-
-export default React.memo(Messages);
+}
diff --git a/client/src/utils/index.js b/client/src/utils/index.js
index 6f482d51da..a831189730 100644
--- a/client/src/utils/index.js
+++ b/client/src/utils/index.js
@@ -56,7 +56,7 @@ export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGp
     chatgptCustom: `rgb(0, 163, 255${ button ? ', 0.75' : ''})`,
   };
 
-  console.log(sender, isCreatedByUser, model, chatGptLabel, error, )
+  // console.log(sender, isCreatedByUser, model, chatGptLabel, error, )
 
   if (isCreatedByUser) 
     return (