ui: mobile chatbot improvements (#1155)

hooks/use-scroll-to-bottom.tsx

@@ -1,27 +1,47 @@
 import useSWR from 'swr';
-import { useRef, useEffect, useCallback } from 'react';
+import { useRef, useEffect, useCallback, useState } from 'react';
 
 type ScrollFlag = ScrollBehavior | false;
 
 export function useScrollToBottom() {
   const containerRef = useRef<HTMLDivElement>(null);
   const endRef = useRef<HTMLDivElement>(null);
-
-  const { data: isAtBottom = false, mutate: setIsAtBottom } = useSWR(
-    'messages:is-at-bottom',
-    null,
-    { fallbackData: false },
-  );
+  const [isAtBottom, setIsAtBottom] = useState(true);
 
   const { data: scrollBehavior = false, mutate: setScrollBehavior } =
     useSWR<ScrollFlag>('messages:should-scroll', null, { fallbackData: false });
 
+  const handleScroll = useCallback(() => {
+    if (!containerRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    
+    // Check if we are within 100px of the bottom (like v0 does)
+    setIsAtBottom(scrollTop + clientHeight >= scrollHeight - 100);
+  }, []);
+
   useEffect(() => {
-    if (scrollBehavior) {
-      endRef.current?.scrollIntoView({ behavior: scrollBehavior });
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener('scroll', handleScroll);
+    handleScroll(); // Check initial state
+
+    return () => {
+      container.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll]);
+
+  useEffect(() => {
+    if (scrollBehavior && containerRef.current) {
+      const container = containerRef.current;
+      const scrollOptions: ScrollToOptions = {
+        top: container.scrollHeight,
+        behavior: scrollBehavior
+      };
+      container.scrollTo(scrollOptions);
       setScrollBehavior(false);
     }
-  }, [setScrollBehavior, scrollBehavior]);
+  }, [scrollBehavior, setScrollBehavior]);
 
   const scrollToBottom = useCallback(
     (scrollBehavior: ScrollBehavior = 'smooth') => {