@assistant-ui/react-native 0.1.41 → 0.1.43

package/src/primitives/thread/ThreadMessages.tsx

@@ -67,6 +67,13 @@ export type ThreadMessagesFlatListProps = Omit<
     scrollToBottomOnRunStart?: boolean | undefined;
     scrollToBottomOnInitialize?: boolean | undefined;
     scrollToBottomOnThreadSwitch?: boolean | undefined;
+    history?:
+      | {
+          hasMore: boolean;
+          isLoadingMore: boolean;
+          loadMore: () => void;
+        }
+      | undefined;
   };
 
 /** @deprecated Use ThreadMessagesFlatListProps instead. */
@@ -206,6 +213,7 @@ const useComposedFlatListRef = (
 const useThreadMessagesFlatListAutoScroll = ({
   flatListRef,
   hasMessages,
+  horizontal = false,
   autoScroll = true,
   scrollToBottomOnRunStart = true,
   scrollToBottomOnInitialize = true,
@@ -213,6 +221,7 @@ const useThreadMessagesFlatListAutoScroll = ({
 }: {
   flatListRef: RefObject<FlatList<ThreadMessage> | null>;
   hasMessages: boolean;
+  horizontal?: boolean | null | undefined;
   autoScroll?: boolean | undefined;
   scrollToBottomOnRunStart?: boolean | undefined;
   scrollToBottomOnInitialize?: boolean | undefined;
@@ -224,9 +233,16 @@ const useThreadMessagesFlatListAutoScroll = ({
     scrollY: 0,
   });
   const isAtBottomRef = useRef(true);
-  const lastScrollEventYRef = useRef(0);
+  const lastScrollEventOffsetRef = useRef(0);
   const initializeScrollRequestedRef = useRef(false);
-  const pendingScrollToBottomRef = useRef<false | { animated: boolean }>(false);
+  const contentSizeVersionRef = useRef(0);
+  const pendingScrollToBottomRef = useRef<
+    | false
+    | {
+        animated: boolean;
+        minimumContentSizeVersion: number;
+      }
+  >(false);
 
   const updateIsAtBottom = useCallback(() => {
     const { contentHeight, scrollY, viewportHeight } = metricsRef.current;
@@ -241,9 +257,10 @@ const useThreadMessagesFlatListAutoScroll = ({
   const scrollToBottom = useCallback(
     (animated: boolean) => {
       const { contentHeight, viewportHeight } = metricsRef.current;
-      metricsRef.current.scrollY = Math.max(0, contentHeight - viewportHeight);
+      const offset = Math.max(0, contentHeight - viewportHeight);
+      metricsRef.current.scrollY = offset;
       isAtBottomRef.current = true;
-      flatListRef.current?.scrollToEnd({ animated });
+      flatListRef.current?.scrollToOffset({ offset, animated });
     },
     [flatListRef],
   );
@@ -252,9 +269,21 @@ const useThreadMessagesFlatListAutoScroll = ({
     (event: LayoutChangeEvent) => {
       const wasAtBottom = isAtBottomRef.current;
       const previousViewportHeight = metricsRef.current.viewportHeight;
-      const viewportHeight = event.nativeEvent.layout.height;
+      const viewportHeight = horizontal
+        ? event.nativeEvent.layout.width
+        : event.nativeEvent.layout.height;
       metricsRef.current.viewportHeight = viewportHeight;
       updateIsAtBottom();
+      const pending = pendingScrollToBottomRef.current;
+      if (
+        pending &&
+        contentSizeVersionRef.current >= pending.minimumContentSizeVersion &&
+        viewportHeight > 0
+      ) {
+        pendingScrollToBottomRef.current = false;
+        scrollToBottom(pending.animated);
+        return;
+      }
       if (!wasAtBottom) return;
       // Layout changes are never user gestures, so they must not unpin. Past
       // the first measurement, a viewport change while pinned re-commands the
@@ -265,29 +294,31 @@ const useThreadMessagesFlatListAutoScroll = ({
         previousViewportHeight !== 0 &&
         viewportHeight !== previousViewportHeight
       ) {
-        const pending = pendingScrollToBottomRef.current;
         scrollToBottom(pending ? pending.animated : false);
       } else {
         isAtBottomRef.current = true;
       }
     },
-    [autoScroll, scrollToBottom, updateIsAtBottom],
+    [autoScroll, horizontal, scrollToBottom, updateIsAtBottom],
   );
 
   const handleScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
       const { contentOffset, contentSize, layoutMeasurement } =
         event.nativeEvent;
-      const previousEventY = lastScrollEventYRef.current;
+      const scrollOffset = horizontal ? contentOffset.x : contentOffset.y;
+      const previousEventOffset = lastScrollEventOffsetRef.current;
       const wasPinnedToBottom = isAtBottomRef.current;
-      lastScrollEventYRef.current = contentOffset.y;
+      lastScrollEventOffsetRef.current = scrollOffset;
       metricsRef.current = {
-        contentHeight: contentSize.height,
-        viewportHeight: layoutMeasurement.height,
-        scrollY: contentOffset.y,
+        contentHeight: horizontal ? contentSize.width : contentSize.height,
+        viewportHeight: horizontal
+          ? layoutMeasurement.width
+          : layoutMeasurement.height,
+        scrollY: scrollOffset,
       };
       updateIsAtBottom();
-      const upwardMove = contentOffset.y < previousEventY;
+      const upwardMove = scrollOffset < previousEventOffset;
       // Only a deliberate upward move unpins or cancels a pending scroll.
       // Gestures are detected echo-to-echo because a commanded scroll
       // optimistically moves the tracked position ahead of its ascending
@@ -299,22 +330,28 @@ const useThreadMessagesFlatListAutoScroll = ({
         pendingScrollToBottomRef.current = false;
       }
     },
-    [updateIsAtBottom],
+    [horizontal, updateIsAtBottom],
   );
 
   const handleContentSizeChange = useCallback(
-    (_width: number, height: number) => {
+    (width: number, height: number) => {
       const metrics = metricsRef.current;
+      const contentHeight = horizontal ? width : height;
       const previousContentHeight = metrics.contentHeight;
       const wasAtBottom = isAtBottomRef.current;
-      metrics.contentHeight = height;
+      if (contentHeight > 0) contentSizeVersionRef.current += 1;
+      metrics.contentHeight = contentHeight;
       updateIsAtBottom();
 
-      // FlatList.scrollToEnd is a no-op before the list has measured, so the
-      // initialize and thread-switch scrolls land on the next content-size
-      // event, once real metrics exist.
+      // Initialize and thread-switch requests are repeated after the list has
+      // measured so the explicit bottom offset uses real content metrics.
       const pendingScroll = pendingScrollToBottomRef.current;
-      if (pendingScroll) {
+      if (
+        pendingScroll &&
+        contentSizeVersionRef.current >=
+          pendingScroll.minimumContentSizeVersion &&
+        metrics.viewportHeight > 0
+      ) {
         pendingScrollToBottomRef.current = false;
         scrollToBottom(pendingScroll.animated);
         return;
@@ -323,11 +360,11 @@ const useThreadMessagesFlatListAutoScroll = ({
       if (!autoScroll) return;
       if (!wasAtBottom) return;
       if (previousContentHeight === 0) return;
-      if (height <= previousContentHeight) return;
+      if (contentHeight <= previousContentHeight) return;
 
       scrollToBottom(false);
     },
-    [autoScroll, scrollToBottom, updateIsAtBottom],
+    [autoScroll, horizontal, scrollToBottom, updateIsAtBottom],
   );
 
   useEffect(() => {
@@ -339,21 +376,30 @@ const useThreadMessagesFlatListAutoScroll = ({
     if (initializeScrollRequestedRef.current) return;
 
     initializeScrollRequestedRef.current = true;
-    pendingScrollToBottomRef.current = { animated: false };
+    pendingScrollToBottomRef.current = {
+      animated: false,
+      minimumContentSizeVersion: Math.max(1, contentSizeVersionRef.current),
+    };
     scrollToBottom(false);
   }, [hasMessages, scrollToBottom, scrollToBottomOnInitialize]);
 
   useAuiEvent("thread.runStart", () => {
     if (!scrollToBottomOnRunStart) return;
-    pendingScrollToBottomRef.current = { animated: true };
+    pendingScrollToBottomRef.current = {
+      animated: true,
+      minimumContentSizeVersion: contentSizeVersionRef.current + 1,
+    };
     scrollToBottom(true);
   });
 
   useAuiEvent("threads.selectionChanged", () => {
     if (!scrollToBottomOnThreadSwitch) return;
     initializeScrollRequestedRef.current = false;
-    lastScrollEventYRef.current = 0;
-    pendingScrollToBottomRef.current = { animated: false };
+    lastScrollEventOffsetRef.current = 0;
+    pendingScrollToBottomRef.current = {
+      animated: false,
+      minimumContentSizeVersion: contentSizeVersionRef.current + 1,
+    };
     scrollToBottom(false);
   });
 
@@ -376,10 +422,13 @@ export const ThreadMessagesFlatList = forwardRef<
       onContentSizeChange,
       onLayout,
       onScroll,
+      onStartReached,
+      onStartReachedThreshold,
       scrollEventThrottle,
       scrollToBottomOnInitialize,
       scrollToBottomOnRunStart,
       scrollToBottomOnThreadSwitch,
+      history,
       ...flatListProps
     },
     forwardedRef,
@@ -393,6 +442,7 @@ export const ThreadMessagesFlatList = forwardRef<
     } = useThreadMessagesFlatListAutoScroll({
       flatListRef,
       hasMessages: messages.length > 0,
+      horizontal: flatListProps.horizontal,
       autoScroll,
       scrollToBottomOnInitialize,
       scrollToBottomOnRunStart,
@@ -445,12 +495,25 @@ export const ThreadMessagesFlatList = forwardRef<
       [handleAutoScrollContentSizeChange, onContentSizeChange],
     );
 
+    const canLoadMore = history?.hasMore && !history.isLoadingMore;
+
+    const handleStartReached = useCallback<
+      NonNullable<FlatListProps<ThreadMessage>["onStartReached"]>
+    >(
+      (info) => {
+        onStartReached?.(info);
+        history?.loadMore();
+      },
+      [history, onStartReached],
+    );
+
     return (
       <FlatList
         ref={setFlatListRef}
         data={messages as unknown as ThreadMessage[]}
         renderItem={renderItem}
         keyExtractor={keyExtractor}
+        maintainVisibleContentPosition={{ minIndexForVisible: 0 }}
         {...(scrollTracking
           ? {
               onContentSizeChange: handleContentSizeChange,
@@ -464,6 +527,21 @@ export const ThreadMessagesFlatList = forwardRef<
               ...(onScroll && { onScroll }),
               ...(scrollEventThrottle !== undefined && { scrollEventThrottle }),
             })}
+        {...(history
+          ? {
+              ...(canLoadMore
+                ? { onStartReached: handleStartReached }
+                : onStartReached
+                  ? { onStartReached }
+                  : {}),
+              onStartReachedThreshold: onStartReachedThreshold ?? 1,
+            }
+          : {
+              ...(onStartReached && { onStartReached }),
+              ...(onStartReachedThreshold !== undefined && {
+                onStartReachedThreshold,
+              }),
+            })}
         {...flatListProps}
       />
     );