@droppii-org/chat-mobile 0.2.88 → 0.2.90

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,18 @@ import ChatImageDimens, {
 const ROW_MARGIN_CLUSTER_END = KSpacingValue['0.5rem'];
 const ROW_MARGIN_IN_CLUSTER = KSpacingValue['0.25rem'];
 
+const BUTTON_FADE_CONFIG = { duration: 200, easing: Easing.out(Easing.ease) };
+
+// Long enough to swallow Android's willShow→willHide→willShow flapping
+// (~1.3s period, measured), short enough that a real keyboard close still
+// settles within one animation.
+const KEYBOARD_HIDE_DEBOUNCE_MS = 300;
+
 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 +107,6 @@ export const ChatListLegend = memo(
     moreOldLoading,
     hasMoreOld,
     onLoadMoreNew,
-    moreNewLoading,
     hasMoreNew,
     onMediaPress,
     onPressUrl,
@@ -144,11 +149,37 @@ export const ChatListLegend = memo(
     const buttonOpacity = useSharedValue(0);
     const isAtBottomRef = useRef(true);
     const scrollDebounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
+    // Current keyboard height, and the trigger for the re-anchor effect
+    // below — see the keyboard listener for how each platform uses it.
+    const [keyboardInset, setKeyboardInset] = useState(0);
+    const hasSeenFirstKeyboardInsetRef = useRef(false);
     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 +221,7 @@ export const ChatListLegend = memo(
     }, []);
 
     const renderItem = useCallback(
-      ({ item, index }: any) => {
+      ({ item, index }: { item: MessageItem; index: number }) => {
         try {
           if (!item) return null;
 
@@ -247,17 +278,14 @@ export const ChatListLegend = memo(
               >
                 <LegendChatMessage
                   message={message}
+                  messageId={messageId}
                   isOutgoing={isOutgoing}
                   createdAtTime={createdAt}
                   onMediaPress={onMediaPress}
                   onPressUrl={onPressUrl}
                   onRetry={retryMessage}
-                  onPress={() => handleMessagePress(messageId)}
-                  onLongPress={
-                    onLongPress
-                      ? () => handleMessageLongPress(messageId, message)
-                      : undefined
-                  }
+                  onPress={handleMessagePress}
+                  onLongPress={onLongPress ? handleMessageLongPress : undefined}
                   customMessageItemFactory={customMessageItemFactory}
                   isHighlighted={highlightedId === messageId}
                   isTimeRevealed={revealedMessageId === messageId}
@@ -310,33 +338,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 +361,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 +446,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,51 +468,25 @@ 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,
-          }
-        );
-      }
-      if (willLoad) {
+      // Both thresholds are checked continuously, including at mount before
+      // any gesture — `hasUserScrolledRef` is what keeps that from firing a
+      // load-more the user never asked for.
+      if (!hasUserScrolledRef.current) return;
+      if (hasMoreOld && !useMessageStore.getState().moreOldLoading) {
         onLoadMoreOld?.(true);
       }
-    }, [conversationId, messages, hasMoreOld, moreOldLoading, onLoadMoreOld]);
+    }, [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 (willLoad) {
+      if (!hasUserScrolledRef.current) return;
+      if (hasMoreNew && !useMessageStore.getState().moreNewLoading) {
         onLoadMoreNew?.(true);
       }
-    }, [conversationId, messages, hasMoreNew, moreNewLoading, onLoadMoreNew]);
+    }, [hasMoreNew, onLoadMoreNew]);
+
+    const handleScrollBeginDrag = useCallback(() => {
+      hasUserScrolledRef.current = true;
+    }, []);
 
     const handleScroll = useCallback(
       (e: any) => {
@@ -518,10 +503,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 +519,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 +546,113 @@ 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.
+    // Tracks the keyboard's height as the trigger for the re-anchor below.
+    // The `willHide` side is debounced because Android's event stream flaps
+    // willShow→willHide→willShow roughly every 1.3s for as long as the
+    // keyboard stays open (measured on device) — without this, every flap
+    // would fire another scroll. A real close still lands, just one tick
+    // later. Setting the same height twice is a no-op for the effect below,
+    // so a stable open only ever re-anchors once.
+    //
+    // JS-thread only (no worklet), so none of the reentrant-lock crash risk
+    // that reaching into `useKeyboardHandler`'s worklets carries.
     useEffect(() => {
-      hasSettledRef.current = false;
+      let pendingHide: ReturnType<typeof setTimeout> | undefined;
+      const clearPendingHide = () => {
+        if (pendingHide) {
+          clearTimeout(pendingHide);
+          pendingHide = undefined;
+        }
+      };
+      const applyInset = (nextInset: number) => {
+        // Android only: the bottom inset the library applies there is a
+        // synthetic prop that `onScroll` does not report (its own
+        // `ScrollViewWithBottomPadding` says as much), so LegendList never
+        // learns about it, `alignItemsAtEndPadding` never shrinks, and the
+        // re-anchor below has no room to scroll into. Reporting it closes
+        // that gap. iOS needs none of this — there the inset is real and
+        // arrives through `onScroll` on its own, and overriding it here
+        // would double-count.
+        if (Platform.OS === 'android') {
+          listRef.current?.reportContentInset(
+            nextInset > 0 ? { bottom: nextInset } : null
+          );
+        }
+        setKeyboardInset(nextInset);
+      };
+
+      const willShow = KeyboardEvents.addListener('keyboardWillShow', (e) => {
+        clearPendingHide();
+        applyInset(Math.max(e.height - keyboardOffset, 0));
+      });
+      const willHide = KeyboardEvents.addListener('keyboardWillHide', () => {
+        clearPendingHide();
+        pendingHide = setTimeout(
+          () => applyInset(0),
+          KEYBOARD_HIDE_DEBOUNCE_MS
+        );
+      });
+      return () => {
+        clearPendingHide();
+        willShow.remove();
+        willHide.remove();
+      };
+    }, [keyboardOffset, listRef]);
+
+    // Re-anchors to the end once the keyboard's inset has landed, which puts
+    // the last message at exactly the spacing the closed-keyboard layout has
+    // (verified on device against both a 7-message and a long conversation).
+    // Skipped when the user has scrolled away from the bottom — opening the
+    // keyboard shouldn't yank them back down.
+    useEffect(() => {
+      if (!hasSeenFirstKeyboardInsetRef.current) {
+        hasSeenFirstKeyboardInsetRef.current = true;
+        return;
+      }
+      if (!isAtBottomRef.current) return;
+      scrollMessageToEnd({ animated: true, closeKeyboard: false });
+    }, [keyboardInset, scrollMessageToEnd]);
+
+    // 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 (!shouldFire) return;
+
+      scrollMessageToEnd({ animated: true, closeKeyboard: false });
+    }, [lastMessageId, scrollMessageToEnd]);
+
+    const handleListLoad = useCallback(() => {
+      if (hasCorrectedInitialPaddingRef.current) return;
+      hasCorrectedInitialPaddingRef.current = true;
+
+      scrollMessageToEnd({ animated: false, closeKeyboard: false });
+    }, [scrollMessageToEnd]);
+
     useEffect(() => {
       const bottomSubscription = DeviceEventEmitter.addListener(
         ChatEvent.ScrollToBottom,
@@ -576,7 +662,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 +707,9 @@ export const ChatListLegend = memo(
         subscription.remove();
       };
     }, [
-      messages,
       applicationType,
       searchMessages,
       conversationId,
-      buttonOpacity,
       handleScrollToBottom,
       listRef,
     ]);
@@ -638,46 +722,62 @@ 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
+          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}
+          // The list's own keyboard compensation is off on both platforms —
+          // measured, it overshoots badly either way. On iOS it scrolls on
+          // top of React Native's `automaticallyAdjustContentInsets` (which
+          // already insets the scroll view by the full keyboard height), and
+          // that double lift is the blank gap. On Android it overshot by
+          // ~690px against a 128px target. What both platforms do keep from
+          // the library is the bottom inset it sets, which is the room the
+          // re-anchor above scrolls into.
+          keyboardLiftBehavior="never"
           scrollEventThrottle={16}
           onScroll={handleScroll}
+          onScrollBeginDrag={handleScrollBeginDrag}
+          onLoad={handleListLoad}
           contentContainerStyle={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]}

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

@@ -52,7 +52,11 @@ const PinnedMessagesSheetContent = memo(
     );
 
     const handlePressMessage = useCallback(
-      (message: MessageItem) => {
+      (messageId: string) => {
+        const message = usePinnedMessageStore
+          .getState()
+          .messages.find((m) => (m.clientMsgID || m.serverMsgID) === messageId);
+        if (!message) return;
         UIUtils.bottomSheet.dismiss();
         onPressMessage?.(message);
       },
@@ -117,6 +121,7 @@ const PinnedMessagesSheetContent = memo(
 
                 <LegendChatMessage
                   message={message}
+                  messageId={messageId}
                   isOutgoing={isOutgoing}
                   createdAtTime={createdAtTime}
                   onPress={handlePressMessage}

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

@@ -90,6 +90,7 @@ const PinnedMessageToolboxOverlay = memo(
             message={
               <LegendChatMessage
                 message={message}
+                messageId={message.clientMsgID || message.serverMsgID || ''}
                 isOutgoing={isOutgoing}
                 createdAtTime={message.sendTime || message.createTime}
                 customMessageItemFactory={customMessageItemFactory}
@@ -191,9 +192,10 @@ const PinnedMessagesSheetContent = memo(
             >
               <LegendChatMessage
                 message={message}
+                messageId={messageId}
                 isOutgoing={isOutgoing}
                 createdAtTime={createdAtTime}
-                onLongPress={() => handleLongPress(messageId, message)}
+                onLongPress={handleLongPress}
                 customMessageItemFactory={customMessageItemFactory}
               />
               {!!timeLabel && (

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

@@ -38,13 +38,15 @@ type MessageProps = BaseLegendMessageProps & {
 
 interface LegendChatMessageProps {
   message: MessageItem;
+  /** Stable per-row id (see getMessageRenderId) — bound into onPress/onLongPress locally so those callbacks stay referentially stable across unrelated list re-renders. */
+  messageId: string;
   isOutgoing: boolean;
   createdAtTime: number;
   onMediaPress?: (items: MediaItem[], index?: number) => void;
   onPressUrl?: (url: string) => void;
   onRetry?: (message: MessageItem) => void;
-  onPress?: (message: MessageItem) => void;
-  onLongPress?: () => void;
+  onPress?: (messageId: string) => void;
+  onLongPress?: (messageId: string, message: MessageItem) => void;
   customMessageItemFactory?: (m: MessageItem) => ReactNode;
   isHighlighted?: boolean;
   isTimeRevealed?: boolean;
@@ -99,6 +101,7 @@ const TIME_REVEAL_EXCLUDED_TYPES: number[] = [
 export const LegendChatMessage = memo(
   ({
     message,
+    messageId,
     isOutgoing,
     createdAtTime,
     onMediaPress,
@@ -115,12 +118,12 @@ export const LegendChatMessage = memo(
     groupPosition,
   }: LegendChatMessageProps) => {
     const handlePress = useCallback(() => {
-      onPress?.(message);
-    }, [onPress, message]);
+      onPress?.(messageId);
+    }, [onPress, messageId]);
 
     const handleLongPress = useCallback(() => {
-      onLongPress?.();
-    }, [onLongPress]);
+      onLongPress?.(messageId, message);
+    }, [onLongPress, messageId, message]);
 
     const customNode = customMessageItemFactory?.(message);
 
@@ -147,14 +150,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
     );