fix: hovering over edit button jumps to bottom of chat

components/message-actions.tsx

@@ -37,8 +37,8 @@ export function PureMessageActions({
     return null;
 
   return (
-    <TooltipProvider delayDuration={0}>
-      <div className="flex flex-row gap-2">
+    <div className="message-actions flex flex-row gap-2 items-center">
+      <TooltipProvider delayDuration={0}>
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
@@ -54,8 +54,8 @@ export function PureMessageActions({
           </TooltipTrigger>
           <TooltipContent>Copy</TooltipContent>
         </Tooltip>
-      </div>
-    </TooltipProvider>
+      </TooltipProvider>
+    </div>
   );
 }
 

components/message.tsx

@@ -170,6 +170,7 @@ const PurePreviewMessage = ({
         initial={{ y: 5, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         data-role={message.role}
+        data-message={message.id}
       >
         <div
           className={cn(

components/use-scroll-to-bottom.ts

@@ -1,9 +1,8 @@
 import { useEffect, useRef, type RefObject } from 'react';
 
-export function useScrollToBottom<T extends HTMLElement>(): [
-  RefObject<T>,
-  RefObject<T>,
-] {
+export function useScrollToBottom<T extends HTMLElement>(
+  shouldScroll?: (mutation: MutationRecord, container: T) => boolean
+): [RefObject<T>, RefObject<T>] {
   const containerRef = useRef<T>(null);
   const endRef = useRef<T>(null);
 
@@ -12,20 +11,47 @@ export function useScrollToBottom<T extends HTMLElement>(): [
     const end = endRef.current;
 
     if (container && end) {
-      const observer = new MutationObserver(() => {
-        end.scrollIntoView({ behavior: 'instant', block: 'end' });
+      const observer = new MutationObserver((mutations) => {
+        const defaultShouldScroll = (mutation: MutationRecord) => {
+          // New message added
+          if (mutation.type === 'childList' && 
+             mutation.target === container &&
+             Array.from(mutation.addedNodes).some(node => 
+               node instanceof Element && 
+               node.hasAttribute('data-role')
+             )) {
+            return true;
+          }
+
+          // Content streaming in
+          if (mutation.type === 'characterData') {
+            const target = mutation.target as Node;
+            const messageElement = target.parentElement?.closest('[data-role="assistant"]');
+            return !!messageElement;
+          }
+
+          return false;
+        };
+
+        const shouldScrollNow = mutations.some(mutation => 
+          shouldScroll ? shouldScroll(mutation, container) : defaultShouldScroll(mutation)
+        );
+
+        if (shouldScrollNow) {
+          end.scrollIntoView({ behavior: 'instant', block: 'end' });
+        }
       });
 
       observer.observe(container, {
         childList: true,
         subtree: true,
-        attributes: true,
+        attributes: false,
         characterData: true,
       });
 
       return () => observer.disconnect();
     }
-  }, []);
+  }, [shouldScroll]);
 
   return [containerRef, endRef];
 }