feat: button can scroll to bottom

package.json

@@ -27,6 +27,7 @@
     "react-dom": "18.2.0",
     "react-firebase-hooks": "^5.1.1",
     "react-hot-toast": "^2.4.0",
+    "react-intersection-observer": "^9.4.3",
     "react-markdown": "^8.0.5",
     "react-select": "^5.7.0",
     "react-syntax-highlighter": "^15.5.0",

src/components/contentContainer/index.tsx

@@ -3,23 +3,34 @@
 import { useRef, useEffect } from 'react';
 import ChatInput from '../chatInput/ChatInput';
 import TopBar from '../topBar/TopBar';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { showBottomDivRef } from '@/recoil/atom/AtomRef';
+import { ArrowSmallDownIcon } from '@heroicons/react/24/outline';
+import { useScrollToView } from '@/hook/useScrollToView';
+import { useInView } from 'react-intersection-observer';
 
 type ContentContainerProps = {
   children: React.ReactNode;
   pageId?: string;
 };
 
 function ContentContainer({ children, pageId }: ContentContainerProps) {
-  const messageEndRef = useRef<null | HTMLDivElement>(null);
+  const messageEndRef = useRef<HTMLDivElement | null>(null);
 
-  const setShowBottomDivRef = useSetRecoilState(showBottomDivRef);
+  const [ShowBottomDiv, setShowBottomDivRef] = useRecoilState(showBottomDivRef);
+
+  const scrollIntoView = useScrollToView(ShowBottomDiv);
+
+  const { ref, inView } = useInView();
 
   useEffect(() => {
     setShowBottomDivRef(messageEndRef);
   }, []);
 
+  const scrollTobBottom = () => {
+    scrollIntoView();
+  };
+
   return (
     <div className="main">
       <TopBar />
@@ -29,11 +40,19 @@ function ContentContainer({ children, pageId }: ContentContainerProps) {
             <div className="h-full w-full overflow-y-auto">
               <div className="flex flex-col items-center text-sm dark:bg-gray-800">
                 {children}
+                <div
+                  ref={messageEndRef}
+                  className="h-32 w-full flex-shrink-0 md:h-48"
+                >
+                  <div ref={ref} />
+                </div>
               </div>
-              <div
-                ref={messageEndRef}
-                className="h-32 w-full flex-shrink-0 md:h-48"
-              ></div>
+              <button
+                onClick={scrollTobBottom}
+                className={`scrollDown ${inView && 'hidden'}`}
+              >
+                <ArrowSmallDownIcon className="m-1 h-4 w-4" />
+              </button>
             </div>
           </div>
         </div>

src/styles/tailwind.css

@@ -45,4 +45,9 @@
   .sidebar-container {
     @apply hidden h-full bg-gray-900 md:fixed md:inset-0 md:flex md:w-[260px] md:flex-col;
   }
+
+  .scrollDown {
+    @apply absolute right-6 bottom-[124px] z-10 cursor-pointer rounded-full border border-gray-200 bg-gray-50 text-gray-600 
+    dark:border-white/10 dark:bg-white/10 dark:text-gray-200 md:bottom-[120px];
+  }
 }