@droppii-org/chat-mobile 0.2.93 → 0.2.95

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

@@ -10,7 +10,6 @@ import {
 import {
   ActivityIndicator,
   DeviceEventEmitter,
-  Platform,
   StyleSheet,
   useWindowDimensions,
   type View,
@@ -23,7 +22,10 @@ import Animated, {
   type SharedValue,
 } from 'react-native-reanimated';
 import { KeyboardAwareLegendList } from '@legendapp/list/keyboard';
-import { KeyboardEvents } from 'react-native-keyboard-controller';
+import {
+  KeyboardEvents,
+  useGenericKeyboardHandler,
+} from 'react-native-keyboard-controller';
 import {
   type LegendListRef,
   type MaintainVisibleContentPositionConfig,
@@ -78,10 +80,36 @@ 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 CONTENT_PADDING_VERTICAL = KSpacingValue['0.75rem'];
+
+// How long past the duration the keyboard event reported the following loop
+// keeps waiting for the live height to actually reach its target before giving
+// up and snapping to it. Only a fallback: normally the loop ends the frame the
+// keyboard does.
+const FOLLOW_FALLBACK_MS = 120;
+
+// How long the keyboard-following loop keeps claiming the list after its last
+// frame. That frame's `setState` renders, lays out and emits its scroll event
+// after the loop has returned, and that trailing event carries the same
+// half-applied geometry the rest of the transition does.
+const FOLLOW_SETTLE_MS = 200;
+
+// Frames the keyboard-following loop keeps pinning after the reserved room has
+// reached its target. The pin in the frame that sets the final padding runs
+// before React has rendered it and before the native layout has applied, so it
+// finds no room to scroll into. On iOS that goes unnoticed — the loop has many
+// frames and a later one does the work — but Android's first loop frame
+// already reports the finished height, so without a tail nothing ever scrolls
+// and the last message stays behind the keyboard.
+const FOLLOW_TAIL_FRAMES = 3;
+
+// Passed as the list's `keyboardOffset` to switch KeyboardChatScrollView's own
+// native `contentInset` off while leaving the rest of the component in place.
+// Its `getEffectiveHeight` interpolates the live keyboard height into
+// `[0, max(keyboardHeight - offset, 0)]`, so an offset no keyboard can exceed
+// pins the inset at 0 for every frame of the transition. The keyboard's room is
+// reserved as real content padding instead — see the keyboard effect below.
+const DISABLE_NATIVE_KEYBOARD_INSET = 1_000_000;
 
 const getRowMarginBottom = (position: GroupPosition): number =>
   position === 'last' || position === 'solo'
@@ -149,10 +177,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.
+    // The state drives the content's bottom padding; the ref is the last
+    // value acted on, read synchronously inside the keyboard listener to
+    // drop Android's repeat events before they reach React.
+    const keyboardInsetRef = useRef(0);
     const [keyboardInset, setKeyboardInset] = useState(0);
-    const hasSeenFirstKeyboardInsetRef = useRef(false);
+    // The keyboard's live height, written on the UI thread and sampled from
+    // the JS thread by the tween below, so the content tracks the keyboard's
+    // real position instead of a guessed easing curve.
+    //
+    // `useGenericKeyboardHandler` rather than `useKeyboardHandler` /
+    // `useReanimatedKeyboardAnimation`: those call `useResizeMode()`, which
+    // reaches in and sets Android's soft input mode — `KeyboardProvider`
+    // already owns that here. The worklet only writes a SharedValue; calling
+    // `runOnJS` (or anything that reaches JS) from a keyboard worklet
+    // reliably crashes Reanimated with a reentrant-lock assertion.
+    // True while the keyboard-following loop below is driving the list.
+    const isFollowingKeyboardRef = useRef(false);
+    const liveKeyboardHeight = useSharedValue(0);
+    useGenericKeyboardHandler(
+      {
+        onMove: (e) => {
+          'worklet';
+          liveKeyboardHeight.value = e.height;
+        },
+        onEnd: (e) => {
+          'worklet';
+          liveKeyboardHeight.value = e.height;
+        },
+      },
+      []
+    );
     const rowRefsMap = useRef<Map<string, View | null>>(new Map());
     // Set on a real touch-drag (`onScrollBeginDrag`), before onStartReached/
     // onEndReached's threshold could fire. `onMomentumScrollBegin` was tried
@@ -199,10 +254,11 @@ export const ChatListLegend = memo(
         const node = rowRefsMap.current.get(messageId);
         node?.measureInWindow((x, y, width, height) => {
           if (x == null || y == null || width == null || height == null) return;
-          onLongPress?.(message, { x, y, width, height });
+          const groupPosition = messageDataMap.get(messageId)?.groupPosition;
+          onLongPress?.(message, { x, y, width, height }, groupPosition);
         });
       },
-      [onLongPress]
+      [onLongPress, messageDataMap]
     );
 
     const onRunFlow = useCallback(
@@ -490,6 +546,15 @@ export const ChatListLegend = memo(
 
     const handleScroll = useCallback(
       (e: any) => {
+        // The keyboard-following loop re-pins to the end on every frame, so
+        // the list is at the bottom for the whole transition by construction.
+        // The intermediate events it produces are not: content size and
+        // offset move a frame apart, and a reading taken between them says
+        // "not at bottom" and latches the scroll-to-bottom button on. The
+        // loop only runs when the list was already at the bottom, so there is
+        // nothing here to detect while it does.
+        if (isFollowingKeyboardRef.current) return;
+
         const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
         const isAtBottom =
           contentOffset.y + layoutMeasurement.height >=
@@ -532,6 +597,17 @@ export const ChatListLegend = memo(
       setShowBadge(false);
     }, [hasMoreNew, onLoadMoreOld, scrollMessageToEnd, buttonOpacity]);
 
+    // `paddingBottom` here replaces the one `styles.content` sets via
+    // `paddingVertical`, so the base spacing has to be added back or the last
+    // message ends up flush against the composer.
+    const contentContainerStyle = useMemo(
+      () => [
+        styles.content,
+        { paddingBottom: CONTENT_PADDING_VERTICAL + keyboardInset },
+      ],
+      [keyboardInset]
+    );
+
     const animatedButtonStyle = useAnimatedStyle(() => ({
       opacity: buttonOpacity.value,
       pointerEvents: buttonOpacity.value === 0 ? 'none' : 'auto',
@@ -546,72 +622,167 @@ export const ChatListLegend = memo(
       };
     }, []);
 
-    // 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.
+    // Reserves the keyboard's room on the content and keeps the list pinned
+    // to the end for the length of each keyboard transition.
     //
-    // JS-thread only (no worklet), so none of the reentrant-lock crash risk
-    // that reaching into `useKeyboardHandler`'s worklets carries.
+    // JS thread only: no worklet, so none of the reentrant-lock crash risk
+    // that reaching into `useKeyboardHandler`'s worklets carries. The one
+    // worklet involved only writes `liveKeyboardHeight`, which this reads.
     useEffect(() => {
-      let pendingHide: ReturnType<typeof setTimeout> | undefined;
-      const clearPendingHide = () => {
-        if (pendingHide) {
-          clearTimeout(pendingHide);
-          pendingHide = undefined;
+      let pendingSettle: ReturnType<typeof setTimeout> | undefined;
+      let pendingFrame: number | undefined;
+      const clearPending = () => {
+        if (pendingSettle) {
+          clearTimeout(pendingSettle);
+          pendingSettle = undefined;
+        }
+        if (pendingFrame !== undefined) {
+          cancelAnimationFrame(pendingFrame);
+          pendingFrame = undefined;
         }
+        isFollowingKeyboardRef.current = false;
       };
-      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
+
+      // Follows the keyboard frame by frame instead of setting the reserved
+      // room in one step.
+      //
+      // Set in one step the layout lift lands in a single frame — measured,
+      // 72 of the 302px the content had to travel arrived as an instant jump
+      // while only the remaining 230 were animated, and `scrollToEnd`'s own
+      // ~324ms curve then finished about 100ms after the keyboard had already
+      // stopped. Sampling `liveKeyboardHeight` each frame instead means the
+      // padding, and with it the content, is wherever the keyboard actually
+      // is — no easing curve to guess at, and the two cannot drift apart.
+      //
+      // `duration` is only a bound, for a transition whose reported height
+      // never quite reaches the event's target.
+      const followKeyboard = (to: number, duration: number) => {
+        const startedAt = Date.now();
+        const startedFrom = Math.max(
+          Math.abs(liveKeyboardHeight.value) - keyboardOffset,
+          0
+        );
+        let tailFrames = 0;
+        isFollowingKeyboardRef.current = true;
+        const step = () => {
+          const live = Math.max(
+            Math.abs(liveKeyboardHeight.value) - keyboardOffset,
+            0
           );
+          // Tracks the keyboard rather than a timer, so the content never
+          // keeps travelling after the keyboard has stopped. The elapsed
+          // check is only a fallback for a transition whose reported height
+          // never quite reaches the target.
+          const reached = Math.abs(live - to) <= 1;
+          const timedOut =
+            !reached && Date.now() - startedAt >= duration + FOLLOW_FALLBACK_MS;
+          // Whether the keyboard moved at all decides what a timeout means. A
+          // `keyboardWillHide` the keyboard does not act on leaves the live
+          // height exactly where it was, and forcing the target there would
+          // collapse the room out from under a keyboard that is still up —
+          // which is what the old hide debounce was guarding against, at the
+          // cost of the list dropping a beat after the keyboard had gone. A
+          // real transition that merely stops a few px short of the height
+          // the event reported (iOS, measured ~4px) still has to land exactly
+          // on the target.
+          const moved = Math.abs(live - startedFrom) > 1;
+          if (reached) {
+            tailFrames += 1;
+          }
+          const done = timedOut || tailFrames >= FOLLOW_TAIL_FRAMES;
+          const settleTo = reached || (timedOut && moved) ? to : live;
+
+          setKeyboardInset(settleTo);
+          if (settleTo !== to) {
+            // Record what the room actually ended up as, or the dedupe in
+            // `applyInset` would swallow the next real transition to `to`.
+            keyboardInsetRef.current = settleTo;
+          }
+          // Re-pin every frame. Growing the padding only moves the content on
+          // its own while there is `alignItemsAtEndPadding` left to absorb
+          // it; once that is gone — any conversation taller than the viewport
+          // — the padding just extends the range and nothing moves until
+          // something scrolls, and `maintainScrollAtEnd` does not follow a
+          // content size change frame by frame (measured: one scroll event,
+          // at the very end). Unanimated on purpose: the keyboard is the
+          // animation, and an animated scroll here would start a second curve
+          // on top of it every frame.
+          listRef.current?.scrollToEnd({ animated: false });
+
+          if (done) {
+            pendingFrame = undefined;
+            // The loop only runs from a list that was at the bottom and it
+            // has just pinned it there again, so record that rather than
+            // waiting to re-derive it from a scroll event.
+            isAtBottomRef.current = true;
+            buttonOpacity.value = withTiming(0, BUTTON_FADE_CONFIG);
+            setShowBadge(false);
+            pendingSettle = setTimeout(() => {
+              pendingSettle = undefined;
+              isFollowingKeyboardRef.current = false;
+            }, FOLLOW_SETTLE_MS);
+            return;
+          }
+          pendingFrame = requestAnimationFrame(step);
+        };
+        pendingFrame = requestAnimationFrame(step);
+      };
+
+      const applyInset = (nextInset: number, duration: number) => {
+        // Android's event stream flaps willShow -> willHide -> willShow every
+        // ~1.3s for as long as the keyboard stays open (measured), so a
+        // repeated height must not restart the follow loop.
+        if (keyboardInsetRef.current === nextInset) return;
+        keyboardInsetRef.current = nextInset;
+
+        // Reserve the keyboard's room as real bottom padding on the content
+        // and let LegendList own it end to end. The native `contentInset` is
+        // switched off (see `keyboardOffset` on the list below), so this is
+        // the only thing compensating for the keyboard.
+        //
+        // The point is an invariant, not an offset: the scroll view's
+        // maximum content offset has to BE the visually correct position.
+        // Otherwise there is a band of legal resting offsets that all look
+        // wrong, and a drag settles somewhere inside it — which is the blank
+        // gap above the composer.
+        //
+        // A native inset cannot hold that invariant here. It widens the
+        // scroll range by the full keyboard height, but LegendList
+        // independently shrinks `alignItemsAtEndPadding` by the same amount
+        // and lifts the content through layout as well. Measured on a short
+        // conversation: the layout lift covered 258 of the 302 needed, so
+        // only 44 of scrolling was left to do while the range still ran to
+        // 302 — 258px of pure slack. As content padding the same 302 goes
+        // into `contentSize`, so `alignItemsAtEndPadding` falls out to zero,
+        // the range is exactly the lift required, and `scrollToEnd` (which
+        // reads LegendList's own metrics, and already offsets itself by
+        // `stylePaddingBottom`) lands on it.
+        //
+        // Skipped when the user has scrolled away from the bottom — opening
+        // the keyboard shouldn't yank them back down — but the padding still
+        // has to change, or the range would be wrong for them too.
+        if (!isAtBottomRef.current) {
+          setKeyboardInset(nextInset);
+          return;
         }
-        setKeyboardInset(nextInset);
+        followKeyboard(nextInset, duration);
       };
 
       const willShow = KeyboardEvents.addListener('keyboardWillShow', (e) => {
-        clearPendingHide();
-        applyInset(Math.max(e.height - keyboardOffset, 0));
+        clearPending();
+        applyInset(Math.max(e.height - keyboardOffset, 0), e.duration);
       });
-      const willHide = KeyboardEvents.addListener('keyboardWillHide', () => {
-        clearPendingHide();
-        pendingHide = setTimeout(
-          () => applyInset(0),
-          KEYBOARD_HIDE_DEBOUNCE_MS
-        );
+      const willHide = KeyboardEvents.addListener('keyboardWillHide', (e) => {
+        clearPending();
+        applyInset(0, e.duration);
       });
+
       return () => {
-        clearPendingHide();
+        clearPending();
         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]);
+    }, [buttonOpacity, keyboardOffset, listRef, liveKeyboardHeight]);
 
     // This component can stay mounted across a conversationId change (e.g.
     // navigation.replace reusing the same screen instance), so this ref must
@@ -748,21 +919,26 @@ export const ChatListLegend = memo(
           // 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.
+          keyboardOffset={DISABLE_NATIVE_KEYBOARD_INSET}
+          // iOS only. Left on, React Native recomputes and applies its own
+          // `contentInset` every time the keyboard moves — measured here as
+          // {top: 59, bottom: keyboardHeight}, both wrong. The bottom value
+          // over-insets by the safe area, and the phantom top one is worse:
+          // iOS rests a scroll view at `-contentInset.top`.
+          // That resting offset is what put the content 59pt low and hid the
+          // last message behind the composer the moment a touch let UIKit
+          // re-clamp. legend-list's own KeyboardAvoidingLegendList disables
+          // this for the same reason.
+          automaticallyAdjustContentInsets={false}
+          // No scroll shift from the library either — the content padding
+          // above is the single compensator. Measured with it on: a 302px
+          // keyboard produced a 604px lift, exactly double.
           keyboardLiftBehavior="never"
           scrollEventThrottle={16}
           onScroll={handleScroll}
           onScrollBeginDrag={handleScrollBeginDrag}
           onLoad={handleListLoad}
-          contentContainerStyle={styles.content}
+          contentContainerStyle={contentContainerStyle}
           scrollIndicatorInsets={{ right: 1 }}
           ListHeaderComponent={
             <LegendChatLoadEarlier isLoading={moreOldLoading} />
@@ -810,7 +986,7 @@ const styles = StyleSheet.create({
     position: 'relative',
   },
   content: {
-    paddingVertical: KSpacingValue['0.75rem'],
+    paddingVertical: CONTENT_PADDING_VERTICAL,
     flexGrow: 1,
   },
   scrollToBottomButton: {

package/src/screens/chat-detail/messageToolbox/MessageToolboxOverlay.tsx

@@ -17,7 +17,11 @@ import {
   getCopyableMessageText,
   getMessageToolboxItems,
 } from './messageToolbox.utils';
-import type { MeasuredRect, MessageToolboxRef } from './types';
+import type {
+  MeasuredRect,
+  MessageToolboxRef,
+  MessageToolboxShowFn,
+} from './types';
 import { MessageToolboxWrapper } from './MessageToolboxWrapper';
 import type { ReactNode } from 'react';
 import type { SharedValue } from 'react-native-reanimated';
@@ -28,6 +32,7 @@ import {
   type MessageItem,
 } from '@droppii/openim-rn-client-sdk';
 import { useHasGroupPermission } from '../../../hooks/useGroupPermission';
+import type { GroupPosition } from '../../../utils/legendListMessage';
 
 // Android only: this Modal's native window is added/removed asynchronously
 // relative to its React state, and each of those transitions makes
@@ -64,11 +69,15 @@ export const MessageToolboxOverlay = forwardRef<
     },
     ref
   ) => {
-    const { setQuotedMessage, conversation } = useChatDetailContext();
+    const { setQuotedMessage, conversation, isGroupConversation } =
+      useChatDetailContext();
     const { generateChatDetailLink } = useChatContext();
     const [visible, setVisible] = useState(false);
     const [message, setMessage] = useState<MessageItem | undefined>(undefined);
     const [rect, setRect] = useState<MeasuredRect | null>(null);
+    const [groupPosition, setGroupPosition] = useState<
+      GroupPosition | undefined
+    >(undefined);
     const toolboxItems = useMemo(
       () => getMessageToolboxItems(message, currentUserId),
       [message, currentUserId]
@@ -92,6 +101,7 @@ export const MessageToolboxOverlay = forwardRef<
       setVisible(false);
       setMessage(undefined);
       setRect(null);
+      setGroupPosition(undefined);
       if (freeze) {
         clearPendingUnfreeze();
         unfreezeTimeoutRef.current = setTimeout(() => {
@@ -101,8 +111,8 @@ export const MessageToolboxOverlay = forwardRef<
       }
     }, [freeze, clearPendingUnfreeze]);
 
-    const show = useCallback(
-      (msg: MessageItem, msgRect: MeasuredRect) => {
+    const show = useCallback<MessageToolboxShowFn>(
+      (msg, msgRect, msgGroupPosition) => {
         const toolboxNotAvailable =
           Object.values(getMessageToolboxItems(msg, currentUserId)).filter(
             Boolean
@@ -119,6 +129,7 @@ export const MessageToolboxOverlay = forwardRef<
 
         setMessage(msg);
         setRect(msgRect);
+        setGroupPosition(msgGroupPosition);
         setVisible(true);
       },
       [currentUserId, freeze, clearPendingUnfreeze]
@@ -145,9 +156,6 @@ export const MessageToolboxOverlay = forwardRef<
       const link = generateChatDetailLink({
         targetConversationId: conversation?.conversationID,
         targetMessageId: message.clientMsgID,
-        targetGroupId: conversation?.groupID,
-        targetUserId: conversation?.userID,
-        // targetBotId: '',
       });
       Clipboard.setString(link);
 
@@ -206,6 +214,13 @@ export const MessageToolboxOverlay = forwardRef<
     }
 
     const isOutgoing = message.sendID === currentUserId;
+    const showSenderGutter = isGroupConversation && !isOutgoing;
+    const showName =
+      showSenderGutter &&
+      (groupPosition === 'first' || groupPosition === 'solo');
+    const showAvatar =
+      showSenderGutter &&
+      (groupPosition === 'last' || groupPosition === 'solo');
 
     return (
       <Modal
@@ -227,6 +242,10 @@ export const MessageToolboxOverlay = forwardRef<
               isOutgoing={isOutgoing}
               createdAtTime={message.sendTime || message.createTime}
               customMessageItemFactory={customMessageItemFactory}
+              showSenderGutter={showSenderGutter}
+              showAvatar={showAvatar}
+              showName={showName}
+              groupPosition={groupPosition}
             />
           }
           toolbox={

package/src/screens/chat-detail/messageToolbox/types.ts

@@ -1,4 +1,5 @@
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import type { GroupPosition } from '../../../utils/legendListMessage';
 
 export interface MeasuredRect {
   x: number;
@@ -7,7 +8,13 @@ export interface MeasuredRect {
   height: number;
 }
 
+export type MessageToolboxShowFn = (
+  message: MessageItem,
+  rect: MeasuredRect,
+  groupPosition?: GroupPosition
+) => void;
+
 export interface MessageToolboxRef {
-  show: (message: MessageItem, rect: MeasuredRect) => void;
+  show: MessageToolboxShowFn;
   hide: () => void;
 }

package/src/screens/chat-detail/types.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { MediaItem } from '../../hooks/useMediaViewer';
-import type { MeasuredRect } from './messageToolbox/types';
+import type { MessageToolboxShowFn } from './messageToolbox/types';
 import type {
   GroupJoinSource,
   MessageItem,
@@ -86,7 +86,7 @@ export interface ChatListProps {
   hasMoreNew?: boolean;
   onMediaPress?: (items: MediaItem[], index?: number) => void;
   onPressUrl?: (url: string) => void;
-  onLongPress?: (message: MessageItem, rect: MeasuredRect) => void;
+  onLongPress?: MessageToolboxShowFn;
 }
 
 export interface ChatDetailProps extends Omit<

package/src/store/message.ts

@@ -12,6 +12,7 @@ import type {
   MessageStore,
 } from '../types/chat';
 import { mergeMessages } from '../utils/message';
+import { isMessageRevoked } from '../utils/messageUtils';
 import { useConversationStore } from './conversation';
 
 // Smaller than a typical "load more" page size elsewhere in the app on
@@ -191,12 +192,20 @@ export const useMessageStore = create<MessageStore>()((set, get) => ({
           hasMoreNew: !searchNextRes.isEnd,
           initLoading: false,
         });
-        if (newMessages?.length > 0) {
-          await new Promise((resolve) => setTimeout(resolve, 300));
-          DeviceEventEmitter.emit(ChatEvent.ScrollToMessage, {
-            clientMessageId: startClientMsgId,
-          });
+
+        const targetMessage = currentMessages.find(
+          (msg) => msg.clientMsgID === startClientMsgId
+        );
+
+        if (!targetMessage || isMessageRevoked(targetMessage)) {
+          DeviceEventEmitter.emit(ChatEvent.TargetMessageUnavailable);
+          return;
         }
+
+        await new Promise((resolve) => setTimeout(resolve, 300));
+        DeviceEventEmitter.emit(ChatEvent.ScrollToMessage, {
+          clientMessageId: startClientMsgId,
+        });
       }
     } catch (error) {
       console.error('Failed to search messages', error);

package/src/types/events.ts

@@ -6,6 +6,7 @@ export enum ChatEvent {
   MessageRevoked = 'chat:message_revoked',
   GroupPermissionUpdated = 'chat:group_permission_updated',
   GroupRemoved = 'chat:group_removed',
+  TargetMessageUnavailable = 'chat:target_message_unavailable',
 }
 
 export interface ScrollToMessagePayload {