From 1f9d17f8bf1d3fd82d00ba7a974fe75e7108f623 Mon Sep 17 00:00:00 2001
From: Mckay Wrigley <mckaywrigley@gmail.com>
Date: Tue, 28 Mar 2023 02:52:45 -0600
Subject: [PATCH] scroll btn (#256)

* feat: added scroll down button

when the use scrolls up on the chat a button will appear on the bottom right side of the screen. It will smoothly scroll down to the bottom of the chat when the button was pressed.

* remove env

---------

Co-authored-by: dasunNimantha <dasun4@pm.me>
---
 .gitignore               |  2 +-
 components/Chat/Chat.tsx | 27 ++++++++++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index 0f356d1..a731251 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,4 +36,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-.idea
+.idea
\ No newline at end of file
diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
index de4d46c..74e1680 100644
--- a/components/Chat/Chat.tsx
+++ b/components/Chat/Chat.tsx
@@ -1,4 +1,5 @@
 import { Conversation, Message } from '@/types/chat';
+import { IconArrowDown } from '@tabler/icons-react';
 import { KeyValuePair } from '@/types/data';
 import { ErrorMessage } from '@/types/error';
 import { OpenAIModel } from '@/types/openai';
@@ -58,8 +59,10 @@ export const Chat: FC<Props> = memo(
   }) => {
     const { t } = useTranslation('chat');
     const [currentMessage, setCurrentMessage] = useState<Message>();
-    const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
+    const [autoScrollEnabled, setAutoScrollEnabled] = useState<boolean>(true);
     const [showSettings, setShowSettings] = useState<boolean>(false);
+    const [showScrollDownButton, setShowScrollDownButton] =
+      useState<boolean>(false);
 
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const chatContainerRef = useRef<HTMLDivElement>(null);
@@ -80,12 +83,21 @@ export const Chat: FC<Props> = memo(
 
         if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
           setAutoScrollEnabled(false);
+          setShowScrollDownButton(true);
         } else {
           setAutoScrollEnabled(true);
+          setShowScrollDownButton(false);
         }
       }
     };
 
+    const handleScrollDown = () => {
+      chatContainerRef.current?.scrollTo({
+        top: chatContainerRef.current.scrollHeight,
+        behavior: 'smooth',
+      });
+    };
+
     const handleSettings = () => {
       setShowSettings(!showSettings);
     };
@@ -103,6 +115,8 @@ export const Chat: FC<Props> = memo(
     };
     const throttledScrollDown = throttle(scrollDown, 250);
 
+    // appear scroll down button only when user scrolls up
+
     useEffect(() => {
       throttledScrollDown();
       setCurrentMessage(
@@ -172,6 +186,7 @@ export const Chat: FC<Props> = memo(
             <div
               className="max-h-full overflow-x-hidden"
               ref={chatContainerRef}
+              onScroll={handleScroll}
             >
               {conversation.messages.length === 0 ? (
                 <>
@@ -285,6 +300,16 @@ export const Chat: FC<Props> = memo(
             />
           </>
         )}
+        {showScrollDownButton && (
+          <div className="absolute bottom-0 right-0 mb-4 mr-4 pb-20">
+            <button
+              className="flex h-7 w-7 items-center justify-center rounded-full bg-white shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-[#515152d7]"
+              onClick={handleScrollDown}
+            >
+              <IconArrowDown className="h-4 w-4" />
+            </button>
+          </div>
+        )}
       </div>
     );
   },