@droppii-org/chat-mobile 0.2.87 → 0.2.89

package/lib/module/screens/chat-detail/ChatListLegend.js

@@ -4,7 +4,7 @@ import { memo, useCallback, useMemo, useEffect, useRef, useState } from 'react';
 import { ActivityIndicator, DeviceEventEmitter, Platform, StyleSheet, useWindowDimensions } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { KeyboardAwareLegendList } from '@legendapp/list/keyboard';
-import { LegendList } from '@legendapp/list/react-native';
+import { KeyboardEvents } from 'react-native-keyboard-controller';
 import { KContainer, KColors, KSpacingValue, KLabel, KRadiusValue, KImage } from '@droppii/libs';
 import { precomputeLegendListData } from "../../utils/legendListMessage.js";
 import { getMessageRenderId } from "../../utils/message.js";
@@ -35,11 +35,15 @@ import ChatImageDimens, { CHAT_IMAGE_VIEW_SOURCE } from "../../utils/chatImageDi
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const ROW_MARGIN_CLUSTER_END = KSpacingValue['0.5rem'];
 const ROW_MARGIN_IN_CLUSTER = KSpacingValue['0.25rem'];
-const getRowMarginBottom = position => position === 'last' || position === 'solo' ? ROW_MARGIN_CLUSTER_END : ROW_MARGIN_IN_CLUSTER;
 
-// KeyboardAwareLegendList auto scroll when modal opened
-// TODO: Convert toolbox to absolute view
-const ListComponent = Platform.OS === 'ios' ? KeyboardAwareLegendList : LegendList;
+// Tags every __DEV__ diagnostic log below with the platform, so logs from an
+// iOS and an Android run can be told apart when compared side by side.
+const LOG_TAG = `[ChatListLegend:${Platform.OS}]`;
+const BUTTON_FADE_CONFIG = {
+  duration: 200,
+  easing: Easing.out(Easing.ease)
+};
+const getRowMarginBottom = position => position === 'last' || position === 'solo' ? ROW_MARGIN_CLUSTER_END : ROW_MARGIN_IN_CLUSTER;
 export const ChatListLegend = /*#__PURE__*/memo(({
   messages = [],
   conversationId,
@@ -48,7 +52,6 @@ export const ChatListLegend = /*#__PURE__*/memo(({
   moreOldLoading,
   hasMoreOld,
   onLoadMoreNew,
-  moreNewLoading,
   hasMoreNew,
   onMediaPress,
   onPressUrl,
@@ -82,6 +85,16 @@ export const ChatListLegend = /*#__PURE__*/memo(({
     const last = messages[messages.length - 1];
     return last?.clientMsgID || last?.serverMsgID || null;
   }, [messages]);
+  // Stopgap for the keyboard-open blank-gap bug (unresolved upstream —
+  // see project_chatlistlegend_scroll_debugging memory): below this
+  // threshold, disable `alignItemsAtEnd` and let plain CSS `flex-end`
+  // anchor short content to the bottom instead. Known trade-off (same
+  // memory, bug #17/#19): disabling `alignItemsAtEnd` removes the extra
+  // scrollable room `clampScrollOffset` needs, so sending a message while
+  // the keyboard is open on one of these same short conversations can
+  // land the new message away from the composer instead of scrolling to
+  // it — verify that scenario specifically after any change here.
+  const isVeryShortConversation = messages.length < 15;
   const {
     mutate: runFlow
   } = useRunFlow();
@@ -91,11 +104,42 @@ export const ChatListLegend = /*#__PURE__*/memo(({
   const buttonOpacity = useSharedValue(0);
   const isAtBottomRef = useRef(true);
   const scrollDebounceRef = useRef(undefined);
+  // Diagnostic only (__DEV__): the keyboard-open bottom inset `useChatKeyboard`
+  // computes internally (raw keyboard height minus `keyboardOffset`, matching
+  // how much the composer's KeyboardStickyView actually rises). Compared
+  // against the list's real, native-reported `contentInset.bottom` in
+  // `handleScroll` below to auto-detect the known issue where that native
+  // inset silently fails to apply (confirmed via manual trace: contentOffset
+  // scrolls correctly but contentInset stays {bottom:0} on this RN/Reanimated/
+  // Old-Architecture combo, leaving a blank gap past the real content end).
+  const expectedKeyboardInsetRef = useRef(0);
   const rowRefsMap = useRef(new Map());
-  // Flips true once LegendList's onLoad fires (initial layout + initial
-  // scroll both settled) — before that, onStartReached/onEndReached can
-  // fire purely from resting scroll position, not a real user gesture.
-  const hasSettledRef = useRef(false);
+  // Set on a real touch-drag (`onScrollBeginDrag`), before onStartReached/
+  // onEndReached's threshold could fire. `onMomentumScrollBegin` was tried
+  // and reverted: it only fires after the finger lifts, so the first
+  // gesture's mid-drag threshold-crossing beats it, needing a wasted
+  // second gesture to actually unlock. See
+  // project_chatlistlegend_scroll_debugging for the full history.
+  const hasUserScrolledRef = useRef(false);
+  // Old Architecture defers recomputing `alignItemsAtEndPadding` when
+  // content shrinks while `initialScrollAtEnd` is active. `estimatedItemSize`
+  // below is a deliberate lower bound to mostly avoid that; this ref
+  // backstops the rest via one forced `scrollToEnd` on mount (`handleListLoad`).
+  const hasCorrectedInitialPaddingRef = useRef(false);
+  // `messages` starts empty, so `lastMessageId`'s first real value looks
+  // identical to a new message — tracking the previous id (not a one-shot
+  // flag) lets the effect below tell the two apart.
+  const previousLastMessageIdRef = useRef(null);
+  // Read via ref (not as a dependency) by the `lastMessageId` effect below —
+  // a loading-state flip alone shouldn't re-run it.
+  const moreOldLoadingRef = useRef(moreOldLoading);
+  moreOldLoadingRef.current = moreOldLoading;
+  // Read via ref (not as a dependency) by the ScrollToMessage subscription
+  // below — the whole array changes on every new message and every old-
+  // history page, which would otherwise tear down and re-add both
+  // DeviceEventEmitter listeners on every one of those.
+  const messagesRef = useRef(messages);
+  messagesRef.current = messages;
   const [showBadge, setShowBadge] = useState(false);
   const [highlightedId, setHighlightedId] = useState(null);
   const highlightTimerRef = useRef(null);
@@ -201,48 +245,33 @@ export const ChatListLegend = /*#__PURE__*/memo(({
     }
   }, [currentUserId, lastMessageId, messageDataMap, isGroupConversation, isBotConversation, onMediaPress, onPressUrl, onLongPress, handleMessageLongPress, customMessageItemFactory, onResetFlow, onRunFlow, conversationFlow?.flowCurrentStep, conversationFlow?.havingBotMessage, retryMessage, highlightedId, revealedMessageId, handleMessagePress]);
 
-  // const maintainScrollConfig = useMemo(
-  //   () => ({
-  //     animated: false,
-  //     on: {
-  //       dataChange: !moreOldLoading,
-  //       layout: !moreOldLoading,
-  //       // Must be disabled while prepending older history; otherwise re-measuring
-  //       // the freshly prepended items snaps the list back to the bottom.
-  //       itemLayout: !moreOldLoading,
-  //     },
-  //   }),
-  //   [moreOldLoading]
-  // );
-
-  // Stable config so the native maintainVisibleContentPosition prop isn't toggled
-  // mid-prepend (toggling forces an extra layout recompute). `data` anchoring keeps
-  // the viewport pinned to the item being read when older messages are added on top.
+  // `maintainVisibleContentPosition` anchors a prepend to whatever native
+  // view sits at the top. Default `drawDistance` (250px) doesn't survive a
+  // ~1-1.5s history fetch if the user keeps scrolling away — the anchor
+  // unmounts and the native compensation silently drops (the "list drifts
+  // after loading old history" bug). `drawDistance` below is raised to
+  // outlast a realistic scroll during that wait (measured ~300-350px).
+  // `recycleItems` is safe again since @legendapp/list 3.3.7 fixed
+  // recycled rows flashing wrong content on prepend.
   const maintainVisiblePositionConfig = useMemo(() => ({
     data: true
   }), []);
 
-  // Buckets averaging (`averageSizes[itemType]`, internal to LegendList) per
-  // content type, so a batch of images landing early doesn't pollute the
-  // estimate used for still-unmeasured text rows and vice versa. Items
-  // rendered via `customMessageItemFactory` (host apps can override ANY
-  // content type with an arbitrary custom node — see `LegendChatMessage`'s
-  // `customNode` short-circuit, checked before its own contentType switch)
-  // get their own bucket per content type, so a custom node's real measured
-  // height never pollutes the native component's average for that same type.
+  // Buckets LegendList's size-averaging per content type so a batch of
+  // images landing early doesn't pollute the estimate for still-unmeasured
+  // text rows. `customMessageItemFactory` nodes get their own bucket per
+  // type too, so a custom node's real height doesn't pollute that type's average.
   const getItemType = useCallback(item => {
     const isCustom = !!customMessageItemFactory?.(item);
     return `${item?.contentType ?? 'default'}${isCustom ? '-custom' : ''}`;
   }, [customMessageItemFactory]);
 
-  // Exact size for content types that are knowable ahead of render — see
-  // `plans/260728-1400-chatlist-legend-fixed-item-size/plan.md`. Returns
-  // `undefined` (defer to dynamic measurement) for anything whose size can't
-  // be predicted, AND for any item carrying extra chrome this function
-  // doesn't account for (day-divider above it, trailing flow-input-buttons
-  // row) — `getFixedItemSize` describes the ENTIRE item LegendList renders,
-  // and once it resolves a number that item is never measured again, so
-  // guessing wrong here is a permanent regression, not just an approximation.
+  // Exact size for content types knowable ahead of render (see
+  // `plans/260728-1400-chatlist-legend-fixed-item-size/plan.md`). Returns
+  // `undefined` (defer to measurement) for anything unpredictable, or
+  // carrying chrome this function doesn't account for (day-divider, flow-
+  // input-buttons row) — a resolved number is never re-measured, so
+  // guessing wrong here is permanent, not just approximate.
   const getFixedItemSize = useCallback((item, index) => {
     const message = item;
     const messageId = getMessageRenderId(message, index);
@@ -294,13 +323,10 @@ export const ChatListLegend = /*#__PURE__*/memo(({
     return candidateSize;
   }, [messageDataMap, customMessageItemFactory, currentUserId, isGroupConversation, lastMessageId, isBotConversation, conversationFlow?.flowCurrentStep, windowWidth]);
 
-  // LegendList memoises each rendered item on [itemKey, item, extraData], so
-  // an item whose own object is unchanged will not re-render. Cluster
-  // position depends on a message's NEIGHBOURS, which can change while the
-  // message itself does not — prepending older history is enough to turn a
-  // 'first' into a 'middle'. messageDataMap is memoised on exactly the inputs
-  // that can move those boundaries, so including it here is what keeps a
-  // stale tail from being left behind.
+  // LegendList only re-renders an item when [itemKey, item, extraData]
+  // changes. Cluster position depends on a message's NEIGHBOURS, which can
+  // shift (prepending history can turn a 'first' into a 'middle') without
+  // the message itself changing — messageDataMap here is what catches that.
   const listExtraData = useMemo(() => ({
     messageDataMap,
     flowStepId: conversationFlow?.flowCurrentStep?.id ?? '',
@@ -309,46 +335,75 @@ export const ChatListLegend = /*#__PURE__*/memo(({
     revealedMessageId
   }), [messageDataMap, conversationFlow?.flowCurrentStep?.id, lastMessageId, highlightedId, revealedMessageId]);
   const handleStartReached = useCallback(() => {
-    const willLoad = hasMoreOld && !moreOldLoading;
     if (__DEV__) {
-      console.log(willLoad && !hasSettledRef.current ? '[LegendList] ⚠️ onStartReached SPURIOUS mount-time load' : '[LegendList] onStartReached triggered', {
+      console.log(`${LOG_TAG} onStartReached fired`, {
         conversationId,
-        messagesLength: messages.length,
-        firstMessageId: messages[0]?.clientMsgID || messages[0]?.serverMsgID,
+        hasUserScrolled: hasUserScrolledRef.current,
         hasMoreOld,
-        moreOldLoading,
-        willLoad,
-        duringInitialSettle: !hasSettledRef.current
+        moreOldLoading: useMessageStore.getState().moreOldLoading
       });
     }
-    if (willLoad) {
+    if (!hasUserScrolledRef.current) {
+      const wouldHaveLoaded = __DEV__ && hasMoreOld && !useMessageStore.getState().moreOldLoading;
+      if (wouldHaveLoaded) {
+        console.warn(`${LOG_TAG} onStartReached fired before user scroll — suppressed`, {
+          conversationId,
+          hasMoreOld
+        });
+      }
+      return;
+    }
+    if (hasMoreOld && !useMessageStore.getState().moreOldLoading) {
       onLoadMoreOld?.(true);
     }
-  }, [conversationId, messages, hasMoreOld, moreOldLoading, onLoadMoreOld]);
+  }, [conversationId, hasMoreOld, onLoadMoreOld]);
   const handleEndReached = useCallback(() => {
-    const willLoad = hasMoreNew && !moreNewLoading;
-    if (__DEV__) {
-      console.log(willLoad && !hasSettledRef.current ? '[LegendList] ⚠️ onEndReached SPURIOUS mount-time load' : '[LegendList] onEndReached triggered', {
-        conversationId,
-        messagesLength: messages.length,
-        lastMessageId: messages[messages.length - 1]?.clientMsgID,
-        hasMoreNew,
-        moreNewLoading,
-        willLoad,
-        duringInitialSettle: !hasSettledRef.current
-      });
+    if (!hasUserScrolledRef.current) {
+      const wouldHaveLoaded = __DEV__ && hasMoreNew && !useMessageStore.getState().moreNewLoading;
+      if (wouldHaveLoaded) {
+        console.warn(`${LOG_TAG} onEndReached fired before user scroll — suppressed`, {
+          conversationId,
+          hasMoreNew
+        });
+      }
+      return;
     }
-    if (willLoad) {
+    if (hasMoreNew && !useMessageStore.getState().moreNewLoading) {
+      if (__DEV__) console.log(`${LOG_TAG} handleEndReached`);
       onLoadMoreNew?.(true);
     }
-  }, [conversationId, messages, hasMoreNew, moreNewLoading, onLoadMoreNew]);
+  }, [conversationId, hasMoreNew, onLoadMoreNew]);
+  const handleScrollBeginDrag = useCallback(() => {
+    hasUserScrolledRef.current = true;
+  }, []);
   const handleScroll = useCallback(e => {
     const {
       contentOffset,
       contentSize,
-      layoutMeasurement
+      layoutMeasurement,
+      contentInset
     } = e.nativeEvent;
     const isAtBottom = contentOffset.y + layoutMeasurement.height >= contentSize.height - 100;
+    if (__DEV__) {
+      const expected = expectedKeyboardInsetRef.current;
+      const actual = contentInset?.bottom ?? 0;
+      // `contentInset` failing to apply is a constant, systemic mismatch
+      // (present regardless of conversation length) — but it only shows
+      // up as a visible gap once the scroll position has actually moved
+      // past the real end of content. Gate on that so the warning fires
+      // only when the bug is actually visible, not on every keyboard
+      // open in every conversation.
+      const scrolledPastRealContentEnd = contentOffset.y + layoutMeasurement.height > contentSize.height;
+      if (expected > 0 && Math.abs(actual - expected) > 5 && scrolledPastRealContentEnd) {
+        console.warn(`${LOG_TAG} keyboard contentInset mismatch — expected bottom inset ~${expected} (keyboard open) but native reports ${actual}, and scroll position is past the real content end. This reproduces the known "blank gap" issue: contentOffset scrolls correctly but contentInset silently fails to apply.`, {
+          expected,
+          actual,
+          contentOffsetY: contentOffset.y,
+          contentSizeHeight: contentSize.height,
+          layoutHeight: layoutMeasurement.height
+        });
+      }
+    }
 
     // Debounce animation updates
     if (scrollDebounceRef.current) {
@@ -357,10 +412,7 @@ export const ChatListLegend = /*#__PURE__*/memo(({
     scrollDebounceRef.current = setTimeout(() => {
       if (isAtBottomRef.current !== isAtBottom) {
         isAtBottomRef.current = isAtBottom;
-        buttonOpacity.value = withTiming(isAtBottom ? 0 : 1, {
-          duration: 200,
-          easing: Easing.out(Easing.ease)
-        });
+        buttonOpacity.value = withTiming(isAtBottom ? 0 : 1, BUTTON_FADE_CONFIG);
       }
       if (isAtBottom) {
         ChatMessageAPI.markConversationAsRead(conversationId || '');
@@ -370,18 +422,20 @@ export const ChatListLegend = /*#__PURE__*/memo(({
   const handleScrollToBottom = useCallback(() => {
     if (hasMoreNew) {
       onLoadMoreOld?.(false);
-    } else {
-      scrollMessageToEnd({
-        animated: true,
-        closeKeyboard: false
-      });
-      buttonOpacity.value = withTiming(0, {
-        duration: 200,
-        easing: Easing.out(Easing.ease)
-      });
-      isAtBottomRef.current = true;
-      setShowBadge(false);
+      return;
     }
+    // `ChatEvent.ScrollToBottom` fires after every self-sent message, but
+    // the `lastMessageId` effect below already animates to it — re-scrolling
+    // here raced it and flickered. Only act when not already at bottom
+    // (FAB tap, or a send while scrolled away).
+    if (isAtBottomRef.current) return;
+    scrollMessageToEnd({
+      animated: true,
+      closeKeyboard: false
+    });
+    buttonOpacity.value = withTiming(0, BUTTON_FADE_CONFIG);
+    isAtBottomRef.current = true;
+    setShowBadge(false);
   }, [hasMoreNew, onLoadMoreOld, scrollMessageToEnd, buttonOpacity]);
   const animatedButtonStyle = useAnimatedStyle(() => ({
     opacity: buttonOpacity.value,
@@ -397,19 +451,94 @@ export const ChatListLegend = /*#__PURE__*/memo(({
     };
   }, []);
 
-  // Debug-only: this component can stay mounted across a conversationId
-  // change (e.g. navigation.replace reusing the same screen instance), so
-  // hasSettledRef must reset per-conversation for the spurious-load log
-  // above to stay accurate for the newly opened conversation.
+  // Diagnostic only (__DEV__) — keeps `expectedKeyboardInsetRef` in sync so
+  // `handleScroll` can detect the known contentInset-not-applying issue.
+  // JS-thread only (no worklet involved), so this carries none of the
+  // reentrant-lock crash risk `useKeyboardHandler`'s own worklet hit.
   useEffect(() => {
-    hasSettledRef.current = false;
+    if (!__DEV__) return;
+    const willShow = KeyboardEvents.addListener('keyboardWillShow', e => {
+      expectedKeyboardInsetRef.current = Math.max(e.height - keyboardOffset, 0);
+    });
+    const willHide = KeyboardEvents.addListener('keyboardWillHide', () => {
+      expectedKeyboardInsetRef.current = 0;
+    });
+    return () => {
+      willShow.remove();
+      willHide.remove();
+    };
+  }, [keyboardOffset]);
+
+  // This component can stay mounted across a conversationId change (e.g.
+  // navigation.replace reusing the same screen instance), so this ref must
+  // reset per-conversation — otherwise a leftover "user scrolled" flag from
+  // the previous conversation would wrongly let load-more fire on the
+  // newly opened one before any real scroll there.
+  useEffect(() => {
+    hasUserScrolledRef.current = false;
+    hasCorrectedInitialPaddingRef.current = false;
+    previousLastMessageIdRef.current = null;
   }, [conversationId]);
+
+  // Single source of truth for "scroll to bottom on a new message" (self-
+  // sent or received). Skipped while prepending old history or scrolled
+  // away from the bottom. `moreOldLoading` is read via ref, not a
+  // dependency, so its own start/finish toggle doesn't re-run this.
+  useEffect(() => {
+    const previousLastMessageId = previousLastMessageIdRef.current;
+    previousLastMessageIdRef.current = lastMessageId;
+
+    // null → a real id is the initial fetch landing (initialScrollAtEnd +
+    // handleListLoad's job), not a new message; a real id → a different
+    // one is.
+    const shouldFire = previousLastMessageId !== null && !!lastMessageId && !moreOldLoadingRef.current && isAtBottomRef.current;
+    if (__DEV__) {
+      console.log(`${LOG_TAG} lastMessageId effect — ${shouldFire ? 'firing animated scroll' : 'skipped'}`, {
+        conversationId,
+        lastMessageId,
+        initialPopulation: previousLastMessageId === null,
+        moreOldLoading: moreOldLoadingRef.current,
+        isAtBottom: isAtBottomRef.current
+      });
+    }
+    if (!shouldFire) return;
+    scrollMessageToEnd({
+      animated: true,
+      closeKeyboard: false
+    });
+  }, [lastMessageId, scrollMessageToEnd, conversationId]);
+  const handleListLoad = useCallback(info => {
+    if (hasCorrectedInitialPaddingRef.current) return;
+    hasCorrectedInitialPaddingRef.current = true;
+
+    // Diagnostic: how long bootstrap + the flush below each take.
+    if (__DEV__) {
+      console.log(`${LOG_TAG} onLoad (bootstrap settle done)`, {
+        conversationId,
+        messagesLength: messages.length,
+        elapsedTimeInMs: info.elapsedTimeInMs
+      });
+    }
+    const startedAt = __DEV__ ? Date.now() : 0;
+    const flushPromise = scrollMessageToEnd({
+      animated: false,
+      closeKeyboard: false
+    });
+    if (__DEV__) {
+      flushPromise.then(() => {
+        console.log(`${LOG_TAG} handleListLoad flush resolved`, {
+          conversationId,
+          tookMs: Date.now() - startedAt
+        });
+      });
+    }
+  }, [scrollMessageToEnd, conversationId, messages.length]);
   useEffect(() => {
     const bottomSubscription = DeviceEventEmitter.addListener(ChatEvent.ScrollToBottom, handleScrollToBottom);
     const subscription = DeviceEventEmitter.addListener(ChatEvent.ScrollToMessage, ({
       clientMessageId
     }) => {
-      const index = messages.findIndex(m => m.clientMsgID === clientMessageId);
+      const index = messagesRef.current.findIndex(m => m.clientMsgID === clientMessageId);
       if (index >= 0) {
         try {
           listRef.current?.scrollToIndex({
@@ -441,7 +570,7 @@ export const ChatListLegend = /*#__PURE__*/memo(({
       bottomSubscription.remove();
       subscription.remove();
     };
-  }, [messages, applicationType, searchMessages, conversationId, buttonOpacity, handleScrollToBottom, listRef]);
+  }, [applicationType, searchMessages, conversationId, handleScrollToBottom, listRef]);
   if (isLoading) {
     return /*#__PURE__*/_jsx(KContainer.View, {
       flex: true,
@@ -453,50 +582,60 @@ export const ChatListLegend = /*#__PURE__*/memo(({
       })
     });
   }
-  console.log('messages length: ', +messages.length);
   return /*#__PURE__*/_jsxs(KContainer.View, {
     flex: true,
     background: KColors.white,
     style: styles.container,
-    children: [/*#__PURE__*/_jsx(ListComponent, {
+    children: [/*#__PURE__*/_jsx(KeyboardAwareLegendList, {
       ref: listRef,
       data: messages,
-      renderItem: renderItem,
-      estimatedItemSize: 200,
+      renderItem: renderItem
+      // Deliberate lower bound (not a best-guess average) — see the
+      // comment above `hasCorrectedInitialPaddingRef`. A single-line
+      // bubble floors out around 38-44px, so this stays safely under it.
+      ,
+      estimatedItemSize: 36,
       getItemType: getItemType,
       getFixedItemSize: getFixedItemSize,
       keyExtractor: item => String(item.clientMsgID || item.serverMsgID),
-      recycleItems: false,
+      recycleItems: true,
       extraData: listExtraData,
-      alignItemsAtEnd: true,
-      maintainVisibleContentPosition: maintainVisiblePositionConfig,
+      alignItemsAtEnd: !isVeryShortConversation,
+      alwaysRender: {
+        top: 10
+      },
+      maintainScrollAtEnd: true,
+      maintainVisibleContentPosition: maintainVisiblePositionConfig
+      // See the comment above `maintainVisiblePositionConfig` — this is
+      // what keeps a history prepend's anchor item mounted through a slow
+      // fetch instead of the default 250px window losing it.
+      ,
+      drawDistance: 800,
       freeze: freeze,
       keyboardOffset: keyboardOffset,
       scrollEventThrottle: 16,
       onScroll: handleScroll,
-      contentContainerStyle: styles.content,
+      onScrollBeginDrag: handleScrollBeginDrag,
+      onLoad: handleListLoad,
+      contentContainerStyle: isVeryShortConversation ? [styles.content, styles.contentBottomAnchored] : styles.content,
       scrollIndicatorInsets: {
         right: 1
       },
       ListHeaderComponent: /*#__PURE__*/_jsx(LegendChatLoadEarlier, {
         isLoading: moreOldLoading
       }),
-      onLoad: info => {
-        hasSettledRef.current = true;
-        if (__DEV__) {
-          console.log('[LegendList] onLoad (initial settle done)', {
-            conversationId,
-            messagesLength: messages.length,
-            elapsedTimeInMs: info.elapsedTimeInMs
-          });
-        }
-      },
-      onStartReached: handleStartReached,
-      onStartReachedThreshold: 0.5,
+      onStartReached: handleStartReached
+      // LegendList only re-fires onStartReached after scrolling away from
+      // the threshold by 1.3x and back. At 0.5 that distance exceeded a
+      // short conversation's whole scrollable range, so the mount-time
+      // firing we suppress in handleStartReached "used up" the only
+      // trigger. 0.3 keeps that reset distance safely under a
+      // ~1.5-screen conversation; shorter ones can still hit it.
+      ,
+      onStartReachedThreshold: 0.2,
       onEndReached: handleEndReached,
       onEndReachedThreshold: 0.2,
-      showsVerticalScrollIndicator: false,
-      initialScrollIndex: messages.length - 1
+      initialScrollAtEnd: true
     }), /*#__PURE__*/_jsx(Animated.View, {
       style: [styles.scrollToBottomButton, animatedButtonStyle],
       children: /*#__PURE__*/_jsxs(KContainer.Touchable, {
@@ -526,6 +665,9 @@ const styles = StyleSheet.create({
     paddingVertical: KSpacingValue['0.75rem'],
     flexGrow: 1
   },
+  contentBottomAnchored: {
+    justifyContent: 'flex-end'
+  },
   scrollToBottomButton: {
     position: 'absolute',
     bottom: 20,