@droppii-org/chat-mobile 0.2.87 → 0.2.89

package/src/screens/chat-detail/ChatListLegend.tsx

@@ -23,7 +23,11 @@ import Animated, {
   type SharedValue,
 } from 'react-native-reanimated';
 import { KeyboardAwareLegendList } from '@legendapp/list/keyboard';
-import { LegendList, type LegendListRef } from '@legendapp/list/react-native';
+import { KeyboardEvents } from 'react-native-keyboard-controller';
+import {
+  type LegendListRef,
+  type MaintainVisibleContentPositionConfig,
+} from '@legendapp/list/react-native';
 import {
   KContainer,
   KColors,
@@ -72,16 +76,17 @@ import ChatImageDimens, {
 const ROW_MARGIN_CLUSTER_END = KSpacingValue['0.5rem'];
 const ROW_MARGIN_IN_CLUSTER = KSpacingValue['0.25rem'];
 
+// 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: GroupPosition): number =>
   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;
-
 interface ChatListLegendInternalProps extends ChatListProps {
   listRef: RefObject<LegendListRef | null>;
   freeze: SharedValue<boolean>;
@@ -101,7 +106,6 @@ export const ChatListLegend = memo(
     moreOldLoading,
     hasMoreOld,
     onLoadMoreNew,
-    moreNewLoading,
     hasMoreNew,
     onMediaPress,
     onPressUrl,
@@ -138,17 +142,58 @@ export const ChatListLegend = 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();
     const { mutate: resetFlow } = useResetFlow();
 
     const buttonOpacity = useSharedValue(0);
     const isAtBottomRef = useRef(true);
     const scrollDebounceRef = useRef<NodeJS.Timeout | undefined>(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<Map<string, View | null>>(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<string | null>(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<string | null>(null);
     const highlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
@@ -190,7 +235,7 @@ export const ChatListLegend = memo(
     }, []);
 
     const renderItem = useCallback(
-      ({ item, index }: any) => {
+      ({ item, index }: { item: MessageItem; index: number }) => {
         try {
           if (!item) return null;
 
@@ -310,33 +355,21 @@ export const ChatListLegend = memo(
       ]
     );
 
-    // 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.
-    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.
+    // `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: MaintainVisibleContentPositionConfig =
+      useMemo(() => ({ data: true }), []);
+
+    // 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: MessageItem) => {
         const isCustom = !!customMessageItemFactory?.(item);
@@ -345,14 +378,12 @@ export const ChatListLegend = memo(
       [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: MessageItem, index: number): number | undefined => {
         const message = item;
@@ -432,13 +463,10 @@ export const ChatListLegend = memo(
       ]
     );
 
-    // 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,
@@ -457,59 +485,89 @@ export const ChatListLegend = memo(
     );
 
     const handleStartReached = useCallback(() => {
-      const willLoad = hasMoreOld && !moreOldLoading;
       if (__DEV__) {
-        console.log(
-          willLoad && !hasSettledRef.current
-            ? '[LegendList] ⚠️ onStartReached SPURIOUS mount-time load'
-            : '[LegendList] onStartReached triggered',
-          {
-            conversationId,
-            messagesLength: messages.length,
-            firstMessageId:
-              messages[0]?.clientMsgID || messages[0]?.serverMsgID,
-            hasMoreOld,
-            moreOldLoading,
-            willLoad,
-            duringInitialSettle: !hasSettledRef.current,
-          }
-        );
+        console.log(`${LOG_TAG} onStartReached fired`, {
+          conversationId,
+          hasUserScrolled: hasUserScrolledRef.current,
+          hasMoreOld,
+          moreOldLoading: useMessageStore.getState().moreOldLoading,
+        });
+      }
+      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 (willLoad) {
+      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: any) => {
-        const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
+        const { contentOffset, contentSize, 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) {
           clearTimeout(scrollDebounceRef.current);
@@ -518,10 +576,10 @@ export const ChatListLegend = 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 || '');
@@ -534,15 +592,17 @@ export const ChatListLegend = 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(() => ({
@@ -559,14 +619,104 @@ export const ChatListLegend = 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: { elapsedTimeInMs: number }) => {
+        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,
@@ -576,7 +726,7 @@ export const ChatListLegend = memo(
       const subscription = DeviceEventEmitter.addListener(
         ChatEvent.ScrollToMessage,
         ({ clientMessageId }: ScrollToMessagePayload) => {
-          const index = messages.findIndex(
+          const index = messagesRef.current.findIndex(
             (m) => m.clientMsgID === clientMessageId
           );
 
@@ -621,11 +771,9 @@ export const ChatListLegend = memo(
         subscription.remove();
       };
     }, [
-      messages,
       applicationType,
       searchMessages,
       conversationId,
-      buttonOpacity,
       handleScrollToBottom,
       listRef,
     ]);
@@ -638,46 +786,57 @@ export const ChatListLegend = memo(
       );
     }
 
-    console.log('messages length: ', +messages.length);
     return (
       <KContainer.View flex background={KColors.white} style={styles.container}>
-        <ListComponent
+        <KeyboardAwareLegendList
           ref={listRef}
           data={messages}
           renderItem={renderItem}
-          estimatedItemSize={200}
+          // 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
           extraData={listExtraData}
-          alignItemsAtEnd
+          alignItemsAtEnd={!isVeryShortConversation}
+          alwaysRender={{
+            top: 10,
+          }}
+          maintainScrollAtEnd
           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={
             <LegendChatLoadEarlier isLoading={moreOldLoading} />
           }
-          onLoad={(info: { elapsedTimeInMs: number }) => {
-            hasSettledRef.current = true;
-            if (__DEV__) {
-              console.log('[LegendList] onLoad (initial settle done)', {
-                conversationId,
-                messagesLength: messages.length,
-                elapsedTimeInMs: info.elapsedTimeInMs,
-              });
-            }
-          }}
           onStartReached={handleStartReached}
-          onStartReachedThreshold={0.5}
+          // 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
         />
         <Animated.View
           style={[styles.scrollToBottomButton, animatedButtonStyle]}
@@ -713,6 +872,9 @@ const styles = StyleSheet.create({
     paddingVertical: KSpacingValue['0.75rem'],
     flexGrow: 1,
   },
+  contentBottomAnchored: {
+    justifyContent: 'flex-end',
+  },
   scrollToBottomButton: {
     position: 'absolute',
     bottom: 20,

package/src/screens/chat-detail/legend/LegendChatMessage.tsx

@@ -147,14 +147,16 @@ export const LegendChatMessage = memo(
 
     const hasMediaPress =
       MEDIA_TYPES.includes(message?.contentType) && onMediaPress;
-    // AtTextMessage included: mention+URL combo attaches its link-preview
-    // card via ex.urlMetadata on an AtTextMessage (see TextMessage's doc
-    // comment) instead of a dedicated UrlTextMessage — the card still needs
-    // a tap handler.
+    // AtTextMessage: mention+URL combo attaches its link-preview card via
+    // ex.urlMetadata (see TextMessage's doc comment) and/or the native
+    // AtTextElem.urls (SDK rc39+) for in-text link highlighting — either
+    // way the card/text needs a tap handler. QuoteMessage: same for a
+    // reply's own text via the native QuoteElem.urls (see QuotedMessage).
     const hasUrlPress =
       onPressUrl &&
       (message?.contentType === MessageType.UrlTextMessage ||
-        message?.contentType === MessageType.AtTextMessage);
+        message?.contentType === MessageType.AtTextMessage ||
+        message?.contentType === MessageType.QuoteMessage);
     const canRevealTime = !TIME_REVEAL_EXCLUDED_TYPES.includes(
       message?.contentType
     );