animates scroll to bottom and debounces bottom

package-lock.json

@@ -29,6 +29,7 @@
         "react-dom": "^18.2.0",
         "react-redux": "^8.0.5",
         "react-textarea-autosize": "^8.4.0",
+        "react-transition-group": "^4.4.5",
         "swr": "^2.0.3",
         "tailwind-merge": "^1.9.1",
         "tailwindcss-animate": "^1.0.5",
@@ -10058,6 +10059,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -17961,8 +17971,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -17972,9 +17980,7 @@
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-      "optional": true,
-      "peer": true
     },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
@@ -18443,6 +18449,21 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -29400,6 +29421,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -35271,8 +35301,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "optional": true,
-      "peer": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -35282,9 +35310,7 @@
         "react-is": {
           "version": "16.13.1",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-          "optional": true,
-          "peer": true
         }
       }
     },
@@ -35615,6 +35641,17 @@
         "use-latest": "^1.2.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -41,6 +41,7 @@
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
     "react-textarea-autosize": "^8.4.0",
+    "react-transition-group": "^4.4.5",
     "swr": "^2.0.3",
     "tailwind-merge": "^1.9.1",
     "tailwindcss-animate": "^1.0.5",

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 timeoutId = setTimeout(() => {
       const scrollable = scrollableRef.current;
       const hasScrollbar = scrollable.scrollHeight > scrollable.clientHeight;
       setShowScrollButton(hasScrollbar);
-  }, [scrollableRef]);
+    }, 850);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, []);
 
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    setShowScrollButton(false);
   };
 
-  const handleScroll = (e) => {
+  const handleScroll = () => {
-    const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
+    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(''));

src/style.css

@@ -7,6 +7,27 @@
   outline: 1px solid limegreen !important;
 } */
 
+.scroll-down-enter {
+  opacity: 0;
+}
+.scroll-down-appear {
+  opacity: 0;
+}
+
+.scroll-down-enter-active {
+  opacity: 1;
+  transition: opacity 650ms;
+}
+
+.scroll-down-exit {
+  opacity: 1;
+}
+
+.scroll-down-exit-active {
+  opacity: 0;
+  transition: opacity 650ms;
+}
+
 .blink {
   animation: blink 1s linear infinite;
 }