add scrolling behavior

hack4impact-uiuc · Mar 29, 2024 · 62897db · 62897db
1 parent 551de1a
commit 62897db
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 24 deletions.
diff --git a/app/components/ConversationMessages.tsx b/app/components/ConversationMessages.tsx
@@ -35,35 +35,40 @@ const ConversationMessages: React.FC<ConversationMessagesProps> = ({
   userName = "User",
 }) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  // const messagesContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages.length]);
 
-  // useEffect(() => {
-  //   const messagesContainer = messagesContainerRef.current;
-  //   if (messagesContainer) {
-  //     const scrollHeight = messagesContainer.scrollHeight;
-  //     const scrollTop = messagesContainer.scrollTop;
-  //     const clientHeight = messagesContainer.clientHeight;
-  //     const scrollPosition = scrollTop + clientHeight;
-  //     const scrollThreshold = scrollHeight * 0.9; // Bottom 10% of the page
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+        }
+      },
+      {
+        root: null,
+        rootMargin: "0px",
+        threshold: 0.01, // Adjust the threshold as needed
+      }
+    );
+
+    const currentMessagesEndRef = messagesEndRef.current;
+
+    if (currentMessagesEndRef) {
+      observer.observe(currentMessagesEndRef);
+    }
 
-  //     if (scrollPosition >= scrollThreshold) {
-  //       messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  //     }
-  //   }
-  // }, [messages]);
+    return () => {
+      if (currentMessagesEndRef) {
+        observer.unobserve(currentMessagesEndRef);
+      }
+    };
+  }, [messages]);
 
   return (
-    <VStack
-      spacing={4}
-      align="stretch"
-      width="100%"
-      mb={10}
-      // ref={messagesContainerRef}
-    >
+    <VStack spacing={4} align="stretch" width="100%" mb={10}>
       {messages.map((message, index) => (
         <Box
           key={index}
@@ -149,7 +154,7 @@ const ConversationMessages: React.FC<ConversationMessagesProps> = ({
           </Button>
         </Box>
       ))}
-      <div ref={messagesEndRef} />
+      <Box ref={messagesEndRef} height="5px" />
     </VStack>
   );
 };

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useEffect, useState, } from "react";
 import { useRouter } from "next/navigation";
 import { useSearchParams } from "next/navigation";
 import { useCookies } from "react-cookie";
@@ -156,7 +156,7 @@ export default function Home() {
           />
         </Link>
       </HStack>
-      <Center minHeight="calc(100vh - 80px)" mt={16} mb={24}>
+      <Center minHeight="calc(100vh - 80px)" mt={16} mb={24} >
         <VStack
           width="60%"
           minWidth="500px"