From 00f6189a42a7878d8b6aa7ae35e70d173ac180a5 Mon Sep 17 00:00:00 2001
From: Aldo Santiago <37028475+santi4o@users.noreply.github.com>
Date: Tue, 18 Apr 2023 08:28:19 -0600
Subject: [PATCH] fix: sroll down button overlaping chat input (#564)

---
 components/Chat/Chat.tsx      | 14 +++-----------
 components/Chat/ChatInput.tsx | 16 ++++++++++++++++
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
index 0109d75..e618585 100644
--- a/components/Chat/Chat.tsx
+++ b/components/Chat/Chat.tsx
@@ -1,4 +1,4 @@
-import { IconArrowDown, IconClearAll, IconSettings } from '@tabler/icons-react';
+import { IconClearAll, IconSettings } from '@tabler/icons-react';
 import {
   MutableRefObject,
   memo,
@@ -492,24 +492,16 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
               setCurrentMessage(message);
               handleSend(message, 0, plugin);
             }}
+            onScrollDownClick={handleScrollDown}
             onRegenerate={() => {
               if (currentMessage) {
                 handleSend(currentMessage, 2, null);
               }
             }}
+            showScrollDownButton={showScrollDownButton}
           />
         </>
       )}
-      {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-neutral-300 text-gray-800 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-neutral-200"
-            onClick={handleScrollDown}
-          >
-            <IconArrowDown size={18} />
-          </button>
-        </div>
-      )}
     </div>
   );
 });
diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
index e286573..729702b 100644
--- a/components/Chat/ChatInput.tsx
+++ b/components/Chat/ChatInput.tsx
@@ -1,4 +1,5 @@
 import {
+  IconArrowDown,
   IconBolt,
   IconBrandGoogle,
   IconPlayerStop,
@@ -30,15 +31,19 @@ import { VariableModal } from './VariableModal';
 interface Props {
   onSend: (message: Message, plugin: Plugin | null) => void;
   onRegenerate: () => void;
+  onScrollDownClick: () => void;
   stopConversationRef: MutableRefObject<boolean>;
   textareaRef: MutableRefObject<HTMLTextAreaElement | null>;
+  showScrollDownButton: boolean;
 }
 
 export const ChatInput = ({
   onSend,
   onRegenerate,
+  onScrollDownClick,
   stopConversationRef,
   textareaRef,
+  showScrollDownButton
 }: Props) => {
   const { t } = useTranslation('chat');
 
@@ -341,6 +346,17 @@ export const ChatInput = ({
             )}
           </button>
 
+          {showScrollDownButton && (
+            <div className="absolute bottom-12 right-0 lg:bottom-0 lg:-right-10">
+              <button
+                className="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-300 text-gray-800 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-neutral-200"
+                onClick={onScrollDownClick}
+              >
+                <IconArrowDown size={18} />
+              </button>
+            </div>
+          )}
+
           {showPromptList && filteredPrompts.length > 0 && (
             <div className="absolute bottom-12 w-full">
               <PromptList