feat: add scroll-to-bottom on mount with reusable hook

Implement automatic scroll-to-bottom when chat loads using a new
useScrollToBottom hook. The hook provides configurable scroll behavior
for initial mount and content changes, improving UX by showing the most
recent messages immediately.

- Add useScrollToBottom hook with scrollOnMount, delay, and animated options
- Integrate onContentSizeChange to detect when to scroll
- Non-animated scroll on mount, animated scroll when sending messages
- Reusable across any list/chat component

src/hooks/useScrollToBottom.ts

···
+import { useRef, useEffect, useCallback } from 'react';
+import { FlatList } from 'react-native';
+
+interface UseScrollToBottomOptions {
+  /**
+   * Whether to scroll to bottom on initial mount/load
+   * @default true
+   */
+  scrollOnMount?: boolean;
+
+  /**
+   * Delay before scrolling (ms) - useful for rendering completion
+   * @default 100
+   */
+  delay?: number;
+
+  /**
+   * Whether to animate the scroll
+   * @default true
+   */
+  animated?: boolean;
+}
+
+/**
+ * Hook for managing scroll-to-bottom behavior in chat interfaces
+ *
+ * @example
+ * const { scrollViewRef, scrollToBottom, onContentSizeChange } = useScrollToBottom({
+ *   scrollOnMount: true,
+ *   delay: 100
+ * });
+ *
+ * <FlatList
+ *   ref={scrollViewRef}
+ *   onContentSizeChange={onContentSizeChange}
+ * />
+ */
+export function useScrollToBottom(options: UseScrollToBottomOptions = {}) {
+  const {
+    scrollOnMount = true,
+    delay = 100,
+    animated = true,
+  } = options;
+
+  const scrollViewRef = useRef<FlatList<any>>(null);
+  const hasMountedRef = useRef(false);
+  const contentSizeRef = useRef({ width: 0, height: 0 });
+
+  const scrollToBottom = useCallback((customAnimated?: boolean) => {
+    setTimeout(() => {
+      scrollViewRef.current?.scrollToEnd({
+        animated: customAnimated !== undefined ? customAnimated : animated
+      });
+    }, delay);
+  }, [delay, animated]);
+
+  // Handle content size change - scroll to bottom if content grows
+  const onContentSizeChange = useCallback((width: number, height: number) => {
+    const hasContentGrown = height > contentSizeRef.current.height;
+    contentSizeRef.current = { width, height };
+
+    // Scroll if this is the first render with content, or if content has grown
+    if (!hasMountedRef.current && height > 0 && scrollOnMount) {
+      hasMountedRef.current = true;
+      scrollToBottom(false); // Don't animate initial scroll
+    } else if (hasContentGrown && hasMountedRef.current) {
+      // Content grew after mount - could be new message
+      scrollToBottom(true);
+    }
+  }, [scrollOnMount, scrollToBottom]);
+
+  // Scroll on mount if requested
+  useEffect(() => {
+    if (scrollOnMount) {
+      scrollToBottom(false);
+    }
+  }, [scrollOnMount, scrollToBottom]);
+
+  return {
+    scrollViewRef,
+    scrollToBottom,
+    onContentSizeChange,
+  };
+}

src/screens/ChatScreen.tsx

···
 import { useMessageStream } from '../hooks/useMessageStream';
 import { useChatStore } from '../stores/chatStore';
 import { useMessageInteractions } from '../hooks/useMessageInteractions';
+import { useScrollToBottom } from '../hooks/useScrollToBottom';
 
 import MessageBubbleEnhanced from '../components/MessageBubble.enhanced';
 import MessageInputEnhanced from '../components/MessageInputEnhanced';
···
 
 export function ChatScreen({ theme, colorScheme, showCompaction = true }: ChatScreenProps) {
   const insets = useSafeAreaInsets();
-  const scrollViewRef = useRef<FlatList<any>>(null);
 
   // Hooks
   const { messages, isLoadingMessages, loadMoreMessages, hasMoreBefore, isLoadingMore } = useMessages();
···
     toggleToolReturn,
     copyToClipboard,
   } = useMessageInteractions();
+
+  // Scroll management
+  const { scrollViewRef, scrollToBottom, onContentSizeChange } = useScrollToBottom({
+    scrollOnMount: true,
+    delay: 150,
+    animated: false,
+  });
 
   // Filter and sort messages for display
   const displayMessages = React.useMemo(() => {
···
   const spacerHeightAnim = useRef(new Animated.Value(0)).current;
   const [containerHeight, setContainerHeight] = React.useState(0);
 
-  // Scroll to bottom
-  const scrollToBottom = () => {
-    setTimeout(() => {
-      scrollViewRef.current?.scrollToEnd({ animated: true });
-    }, 100);
-  };
-
   // Handle send message
   const handleSend = async (text: string) => {
     await sendMessage(text, selectedImages);
-    scrollToBottom();
+    scrollToBottom(true); // Animate scroll when sending
   };
 
   // Render message item
···
           styles.messagesList,
           { paddingBottom: insets.bottom + 80 },
         ]}
+        onContentSizeChange={onContentSizeChange}
         onEndReached={loadMoreMessages}
         onEndReachedThreshold={0.5}
         initialNumToRender={100}