animates scroll to bottom and debounces bottom

src/components/main/Message.jsx

@@ -1,9 +1,24 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import GPTIcon from '../svg/GPTIcon';
+// import useCustomEffect from '~/hooks/useCustomEffect';
 
-export default function Message({ sender, text, last = false, error = false }) {
+export default function Message({
+  sender,
+  text,
+  last = false,
+  error = false,
+  scrollToBottom
+}) {
   const { isSubmitting } = useSelector((state) => state.submit);
+  const blinker = isSubmitting && last && sender === 'GPT';
+
+  useEffect(() => {
+    if (blinker) {
+      scrollToBottom();
+    }
+  }, [isSubmitting, text]);
+
   const props = {
     className:
       'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800'
@@ -14,15 +29,13 @@ export default function Message({ sender, text, last = false, error = false }) {
       'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
   }
 
-  const blinker = isSubmitting && last && sender === 'GPT';
-
   return (
     <div {...props}>
       <div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
         <strong className="relative flex w-[30px] flex-col items-end">
           {sender === 'GPT' ? (
             <div
-              style={{backgroundColor: 'rgb(16, 163, 127)'}}
+              style={{ backgroundColor: 'rgb(16, 163, 127)' }}
               className="relative flex h-[30px] w-[30px] items-center justify-center rounded-sm p-1 text-white"
             >
               <GPTIcon />
@@ -34,7 +47,7 @@ export default function Message({ sender, text, last = false, error = false }) {
         <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
           <div className="flex flex-grow flex-col gap-3">
             {!!error ? (
-              <div className="flex flex min-h-[20px] flex-row flex-col items-start gap-4 gap-2 whitespace-pre-wrap text-red-500" >
+              <div className="flex flex min-h-[20px] flex-row flex-col items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
                 <div className="rounded-md border border-red-500 bg-red-500/10 py-2 px-3 text-sm text-gray-600 dark:text-gray-100">
                   {text}
                 </div>

src/components/main/Messages.jsx

@@ -1,26 +1,35 @@
 import React, { useEffect, useState, useRef } from 'react';
-import useDidMountEffect from '~/hooks/useDidMountEffect';
 import Message from './Message';
 import ScrollToBottom from './ScrollToBottom';
+import { CSSTransition } from 'react-transition-group';
 
 const Messages = ({ messages }) => {
   const [showScrollButton, setShowScrollButton] = useState(false);
   const scrollableRef = useRef(null);
   const messagesEndRef = useRef(null);
 
-
   useEffect(() => {
-    const scrollable = scrollableRef.current;
-    const hasScrollbar = scrollable.scrollHeight > scrollable.clientHeight;
-    setShowScrollButton(hasScrollbar);
-  }, [scrollableRef]);
+    const timeoutId = setTimeout(() => {
+      const scrollable = scrollableRef.current;
+      const hasScrollbar = scrollable.scrollHeight > scrollable.clientHeight;
+      setShowScrollButton(hasScrollbar);
+    }, 850);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, []);
 
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    setShowScrollButton(false);
   };
 
-  const handleScroll = (e) => {
-    const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
+  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) {
       setShowScrollButton(false);
     } else {
@@ -28,6 +37,12 @@ const Messages = ({ messages }) => {
     }
   };
 
+  let timeoutId = null;
+  const debouncedHandleScroll = () => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(handleScroll, 100);
+  };
+
   const scrollHandler = (e) => {
     e.preventDefault();
     scrollToBottom();
@@ -37,7 +52,7 @@ const Messages = ({ messages }) => {
     <div
       className="flex-1 overflow-y-auto "
       ref={scrollableRef}
-      onScroll={handleScroll}
+      onScroll={debouncedHandleScroll}
     >
       {/* <div className="flex-1 overflow-hidden"> */}
       <div className="h-full dark:bg-gray-800">
@@ -49,9 +64,19 @@ const Messages = ({ messages }) => {
               text={message.text}
               last={i === messages.length - 1}
               error={!!message.error ? true : false}
+              scrollToBottom={i === messages.length - 1 ? scrollToBottom : null}
             />
           ))}
-          {showScrollButton && <ScrollToBottom scrollHandler={scrollHandler} />}
+          <CSSTransition
+            in={showScrollButton}
+            timeout={650}
+            classNames="scroll-down"
+            unmountOnExit={false}
+            appear
+          >
+            {(state) => showScrollButton && <ScrollToBottom scrollHandler={scrollHandler} />}
+          </CSSTransition>
+
           <div
             className="group h-32 w-full flex-shrink-0 dark:border-gray-900/50 dark:bg-gray-800 md:h-48"
             ref={messagesEndRef}
@@ -63,4 +88,4 @@ const Messages = ({ messages }) => {
   );
 };
 
-export default Messages
+export default Messages;

src/components/main/ModelMenu.jsx

@@ -30,7 +30,7 @@ export default function ModelMenu() {
 
   const chatgptColorProps = [
     'text-green-700',
-    // 'dark:text-green-400',
+    'dark:text-emerald-300',
     'hover:bg-green-100',
     'disabled:hover:bg-transparent',
     'dark:hover:bg-opacity-50',

src/components/main/ScrollToBottom.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+export default function ScrollToBottom({ scrollHandler}) {
 
-export default function ScrollToBottom({ scrollHandler }) {
   return (
     <button
       onClick={scrollHandler}

src/components/main/TextChat.jsx

@@ -29,7 +29,7 @@ export default function TextChat({ messages }) {
     }
     dispatch(setSubmitState(true));
     const payload = text.trim();
-    const currentMsg = { sender: 'user', text: payload, current: true };
+    const currentMsg = { sender: 'User', text: payload, current: true };
     const initialResponse = { sender: 'GPT', text: '' };
     dispatch(setMessages([...messages, currentMsg, initialResponse]));
     dispatch(setText(''));