fix: sroll down button overlaping chat input (#564)

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