add scroll to bottom button

client/src/components/MessageWrapper.tsx

@@ -1,22 +1,31 @@
-import Message from "./Message";
-import { getMessages } from "@controllers/MessageController";
-import { useQuery } from "@tanstack/react-query";
-import { toastError } from "@controllers/Toasts";
+import Message from './Message';
+import { getMessages } from '@controllers/MessageController';
+import { useQuery } from '@tanstack/react-query';
+import { toastError } from '@controllers/Toasts';
+import ScrollToBottom from './ScrollToBottom';
 
 const MessageWrapper = () => {
-  const { data: messages, isLoading, isError } = useQuery(["messages"], getMessages, {
+  const {
+    data: messages,
+    isLoading,
+    isError,
+  } = useQuery(['messages'], getMessages, {
     onError: (error) => {
       toastError(error as string);
     },
   });
 
   return (
-    <main className="messages-wrapper flex flex-col gap-4 pb-6 pt-4 -mb-4 overflow-scroll w-full max-w-3xl rounded-md">
-      {isLoading ? '' : isError ? '' : messages?.map((message: any) => (
-        <Message message={message} key={message.id}/>
-      ))}
+    <main className="messages-wrapper rounded-md w-full max-w-3xl flex flex-col max-h-[83vh] relative">
+      <ScrollToBottom className="message-container overflow-scroll flex flex-col gap-4 w-full py-4 -mb-3">
+        {isLoading
+          ? ''
+          : isError
+          ? ''
+          : messages?.map((message: any) => <Message message={message} key={message.id} />)}
+      </ScrollToBottom>
     </main>
   );
-}
+};
 
 export default MessageWrapper;

client/src/components/ScrollToBottom.tsx

@@ -0,0 +1,25 @@
+import { ReactNode, useRef } from 'react';
+import { FaChevronDown } from 'react-icons/fa';
+
+const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; className?: string }) => {
+  const bottom = useRef<HTMLDivElement>(null);
+
+  return (
+    <>
+      <div className={className}>
+        {children}
+        <div className="scroll-bottom" ref={bottom}></div>
+      </div>
+      <button
+        onClick={() => bottom?.current?.scrollIntoView({ behavior: 'smooth' })}
+        className="absolute right-3 bottom-3"
+      >
+          <div className="popup-btn cursor-pointer rounded-full bg-grey-dark hover:bg-grey-light transition-all">
+            <FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
+          </div>
+      </button>
+    </>
+  );
+};
+
+export default ScrollToBottom;