app/components/ConversationFrontend.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, useState, useEffect, useRef } from 'react';
+import React, { ForwardedRef, useEffect, useRef } from 'react';
 
 type Message = {
   role: string
@@ -15,45 +15,24 @@ interface ConversationProps {
 }
 
 const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
-  ({ messages, onStopClick, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
-    const [isScrolling, setIsScrolling] = useState(true);
-    const messagesEndRef = useRef<HTMLDivElement | null>(null);
+  ({ messages,onStopClick, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
+
+    const messagesEndRef = useRef<HTMLDivElement | null>(null)
 
     useEffect(() => {
-      const observer = new IntersectionObserver(
-        (entries) => {
-          if (entries[0].isIntersecting) {
-            console.log('End of messages reached');
-            setIsScrolling(true);
-          } else {
-            console.log('End of messages not reached');
-            setIsScrolling(false);
-          }
-        },
-        {
-          root: document.querySelector('.output'),
-          threshold: 1.0, // Ensure the whole element is visible
-        }
-      );
-      
-      const endOfMessages = messagesEndRef.current;
-      if (endOfMessages) {
-        observer.observe(endOfMessages);
-      }
+    if (messagesEndRef.current) {
+      const rect = messagesEndRef.current.getBoundingClientRect();
+      console.log('Position of the target div:');
+      console.log('Top:', rect.top);      // Distance from the top of the viewport
+      console.log('Left:', rect.left);    // Distance from the left of the viewport
+      console.log('Width:', rect.width);   // Width of the element
+      console.log('Height:', rect.height); // Height of the element
+    }
+  }, [messages]);
 
-      return () => {
-        if (endOfMessages) {
-          observer.unobserve(endOfMessages);
-        }
-      };
-    }, [messages]);
-
-    // Scroll to bottom when new messages arrive
     useEffect(() => {
-      if (isScrolling) {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-      }
-    }, [messages, isScrolling]);
+      messagesEndRef.current?.scrollIntoView()
+    }, [messages])
 
     return (
       <div className="output" ref={ref}>
@@ -98,12 +77,11 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
               <span className="tooltiptext">{isClicked?"Copied!": "Copy" }</span>
             </div>
           </div>
-          <div className={"endOfMessages"} ref={messagesEndRef} style={{height:"10px"}}/>
+          <div ref={messagesEndRef} />
         </div>
-        <button id="scrollToBottom" disabled={isScrolling?true:false} style={{visibility: isScrolling?"hidden":"visible"}} onClick={()=> setIsScrolling(true)}>Down</button>
       </div>
     );
-  } 
+  }
 );
 
 export default ConversationFrontend;

app/styles/output.css

@@ -1,6 +1,5 @@
 /* Output Section */
 .output {
-    scroll-behavior: smooth;
     grid-column: 2;
     grid-row: 1 / 4;
     background-color: var(--output-background-color);
@@ -14,7 +13,6 @@
     overflow-y: auto;
     width: calc(100% - 2em); /* Corrected calculation for width */
     height: 86dvh;
-    position: relative;
 }
 
 #conversation {
@@ -129,16 +127,3 @@
     pointer-events: none;
     user-select: none;
 }
-
-#scrollToBottom{
-    scroll-behavior: smooth;
-    visibility: hidden;
-    position: absolute;
-    height: 50px;
-    width: 50px;
-    margin: auto;
-    border-radius: 100%;
-    bottom: 16dvh;
-    left: 50%;
-    translate: -25px;
-}