@droppii-org/chat-mobile 0.2.109 → 0.2.110

package/src/screens/chat-detail/hooks/useMarkConversationRead.ts

@@ -0,0 +1,197 @@
+import { useCallback, useEffect, useRef, type RefObject } from 'react';
+import { AppState } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { ChatMessageAPI } from '../../../services/message';
+import { perfMark } from '../../../utils/perf-marker';
+import {
+  isListLoadReason,
+  nextMarkReadDelay,
+  shouldRequestMarkRead,
+  type MarkReadReason,
+} from '../../../utils/markReadPolicy';
+
+/**
+ * Something mark-read has to wait for. Optional, so the edge-triggered
+ * mark-read works on its own (gate open) without the unread indicator.
+ */
+export interface MarkReadGate {
+  isClosed: () => boolean;
+  /** When a closed gate opens on its own (epoch ms), or null if it won't. */
+  openDeadline: () => number | null;
+  /** `onOpen`: the gate opened; `onClear`: the session ended (non-child blur). */
+  subscribe: (handlers: {
+    onOpen: () => void;
+    onClear: () => void;
+  }) => () => void;
+}
+
+/**
+ * Edge-triggered, throttled mark-read. A trigger marks the conversation dirty
+ * and tries to flush; the flush only calls the SDK when `shouldRequestMarkRead`
+ * allows it, at most once per `MARK_READ_THROTTLE_MS` (trailing). The dirty
+ * flag is cleared only by a successful call, so a suppressed or failed one is
+ * retried by the next trigger. Everything is read through refs, so the
+ * returned callbacks are stable.
+ *
+ * Deeplink entry: the first list load of each deeplink target never marks the
+ * thread dirty — the list rests at the window end only until the jump runs.
+ */
+export const useMarkConversationRead = ({
+  conversationId,
+  isAtBottomRef,
+  listLoadedRef,
+  hasMoreNew,
+  deeplinkTargetId,
+  gate,
+}: {
+  conversationId?: string;
+  isAtBottomRef: RefObject<boolean>;
+  listLoadedRef: RefObject<boolean>;
+  hasMoreNew: boolean;
+  deeplinkTargetId?: string;
+  gate?: MarkReadGate;
+}) => {
+  const navigation = useNavigation();
+  const dirtyRef = useRef(false);
+  const dirtyWhileFocusedRef = useRef(false);
+  const lastCallAtRef = useRef(0);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const timerDueRef = useRef(0);
+  // The next list load is a deeplink's first (pending the jump).
+  const deeplinkLoadHeldRef = useRef(!!deeplinkTargetId);
+  const latest = useRef({ conversationId, hasMoreNew, gate });
+  latest.current = { conversationId, hasMoreNew, gate };
+  const tryFlushRef = useRef<(reason: MarkReadReason) => void>(() => {});
+
+  const clearTimer = () => {
+    clearTimeout(timerRef.current);
+    timerRef.current = undefined;
+  };
+
+  // Single timer: a sooner deadline replaces a later one; the timer
+  // re-evaluates everything when it fires.
+  const schedule = (delay: number, reason: MarkReadReason) => {
+    const due = Date.now() + delay;
+    if (timerRef.current && timerDueRef.current <= due) return;
+    clearTimer();
+    timerDueRef.current = due;
+    timerRef.current = setTimeout(() => {
+      timerRef.current = undefined;
+      tryFlushRef.current(reason);
+    }, delay);
+  };
+
+  const callMarkRead = () => {
+    const id = latest.current.conversationId;
+    if (!id) return;
+    const wasDirtyWhileFocused = dirtyWhileFocusedRef.current;
+    lastCallAtRef.current = Date.now();
+    dirtyRef.current = false;
+    dirtyWhileFocusedRef.current = false;
+    // At the SDK call site: 1 marker = 2 SDK requests.
+    perfMark('mark_read_call');
+    ChatMessageAPI.markConversationAsRead(id).catch((error) => {
+      dirtyRef.current = true; // retried by the next trigger
+      dirtyWhileFocusedRef.current ||= wasDirtyWhileFocused;
+      if (__DEV__) console.log('[mark-read] failed', error);
+    });
+  };
+
+  tryFlushRef.current = (reason: MarkReadReason) => {
+    if (!dirtyRef.current) return;
+    const { hasMoreNew: moreNew, gate: currentGate } = latest.current;
+    const gateClosed = !!currentGate?.isClosed();
+    const allowed = shouldRequestMarkRead({
+      reason,
+      gateClosed,
+      focused: navigation.isFocused(),
+      appActive: AppState.currentState === 'active',
+      listLoaded: !!listLoadedRef.current,
+      hasMoreNew: moreNew,
+      atBottom: !!isAtBottomRef.current,
+      isDeeplinkFirstLoad: false, // held loads never reach a flush
+      dirtyWhileFocused: dirtyWhileFocusedRef.current,
+    });
+    if (!allowed) {
+      // Fail-safe: re-check when the gate's watchdog opens it.
+      const deadline = gateClosed ? currentGate?.openDeadline() : null;
+      if (deadline != null) {
+        schedule(Math.max(0, deadline - Date.now()) + 1, 'gate-open');
+      }
+      return;
+    }
+    // Bypass the throttle: the component is going away.
+    if (reason === 'leave') return callMarkRead();
+    const delay = nextMarkReadDelay(Date.now(), lastCallAtRef.current);
+    if (delay === 0) return callMarkRead();
+    schedule(delay, reason);
+  };
+
+  /** A trigger: something may now be read. */
+  const requestMarkRead = useCallback(
+    (reason: MarkReadReason) => {
+      if (isListLoadReason(reason) && deeplinkLoadHeldRef.current) {
+        deeplinkLoadHeldRef.current = false;
+        return;
+      }
+      dirtyRef.current = true;
+      if (navigation.isFocused()) dirtyWhileFocusedRef.current = true;
+      tryFlushRef.current(reason);
+    },
+    [navigation]
+  );
+
+  /** Flush-only: retry a pending mark-read without marking anything new. */
+  const flushMarkRead = useCallback((reason: MarkReadReason) => {
+    tryFlushRef.current(reason);
+  }, []);
+
+  // A new conversation / deeplink target on the same instance starts over.
+  useEffect(() => {
+    dirtyRef.current = false;
+    dirtyWhileFocusedRef.current = false;
+    deeplinkLoadHeldRef.current = !!deeplinkTargetId;
+    clearTimer();
+  }, [conversationId, deeplinkTargetId]);
+
+  // Back on the screen (after a blur) / back in the app: messages may have
+  // arrived meanwhile. The initial focus is not a return.
+  useEffect(() => {
+    let hasBlurred = false;
+    const offBlur = navigation.addListener('blur', () => {
+      hasBlurred = true;
+    });
+    const offFocus = navigation.addListener('focus', () => {
+      if (hasBlurred) requestMarkRead('focus');
+    });
+    return () => {
+      offBlur();
+      offFocus();
+    };
+  }, [navigation, requestMarkRead]);
+
+  useEffect(() => {
+    const sub = AppState.addEventListener('change', (state) => {
+      if (state === 'active') requestMarkRead('app-active');
+    });
+    return () => sub.remove();
+  }, [requestMarkRead]);
+
+  useEffect(() => {
+    if (!gate) return;
+    return gate.subscribe({
+      onOpen: () => tryFlushRef.current('gate-open'),
+      onClear: () => tryFlushRef.current('leave'),
+    });
+  }, [gate]);
+
+  useEffect(
+    () => () => {
+      clearTimer();
+      tryFlushRef.current('leave');
+    },
+    []
+  );
+
+  return { requestMarkRead, flushMarkRead };
+};

package/src/screens/chat-detail/hooks/useUnreadAnchorSeen.ts

@@ -0,0 +1,105 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type RefObject,
+} from 'react';
+import type {
+  LegendListRef,
+  ViewToken,
+  ViewabilityConfig,
+} from '@legendapp/list/react-native';
+import { useUnreadIndicatorStore } from '../../../store/unreadIndicator';
+import { isRowTopInViewport } from '../../../utils/unreadAnchor';
+
+// A candidate filter only; `isRowTopInViewport` decides.
+const VIEWABILITY_CONFIG: ViewabilityConfig = {
+  itemVisiblePercentThreshold: 1,
+};
+
+/**
+ * "The divider has been seen" = the anchor row's TOP edge (where the divider
+ * sits) is in the viewport, after initial positioning has settled. Before
+ * settle — Old Arch corrects the estimated `initialScrollAtEnd` later — a
+ * visible divider only hides the pill (render-time check), it doesn't dismiss
+ * it for good.
+ */
+export const useUnreadAnchorSeen = ({
+  rowId,
+  unreadToken,
+  isLoading,
+  listRef,
+}: {
+  rowId: string | null;
+  unreadToken: number | null;
+  isLoading: boolean;
+  listRef: RefObject<LegendListRef | null>;
+}) => {
+  const rowIdRef = useRef(rowId);
+  rowIdRef.current = rowId;
+  const tokenRef = useRef(unreadToken);
+  tokenRef.current = unreadToken;
+  const viewableKeysRef = useRef<Set<string>>(new Set());
+  const settledRef = useRef(false);
+  const [positionSettled, setPositionSettled] = useState(false);
+  const [viewabilityReady, setViewabilityReady] = useState(false);
+
+  const isAnchorTopVisibleNow = useCallback(() => {
+    const id = rowIdRef.current;
+    if (!id || !viewableKeysRef.current.has(id)) return false;
+    const state = listRef.current?.getState?.();
+    if (!state) return false;
+    const rowTop = state.positionByKey(id);
+    return isRowTopInViewport(rowTop, state.scroll, state.scrollLength);
+  }, [listRef]);
+
+  const checkAnchorSeen = useCallback(() => {
+    if (!settledRef.current || tokenRef.current == null) return;
+    if (!isAnchorTopVisibleNow()) return;
+    useUnreadIndicatorStore.getState().dismissPill(tokenRef.current);
+  }, [isAnchorTopVisibleNow]);
+
+  // Stable identity: LegendList reads it once.
+  const handleViewableItemsChanged = useCallback(
+    ({ viewableItems }: { viewableItems: ViewToken[] }) => {
+      viewableKeysRef.current = new Set(viewableItems.map((t) => t.key));
+      setViewabilityReady(true);
+      checkAnchorSeen();
+    },
+    [checkAnchorSeen]
+  );
+
+  // handleListLoad's scrollToEnd + 1 frame | first drag | a finished jump.
+  const markPositionSettled = useCallback(() => {
+    if (!settledRef.current) {
+      settledRef.current = true;
+      setPositionSettled(true);
+    }
+    checkAnchorSeen(); // the CURRENT snapshot, not an older one
+  }, [checkAnchorSeen]);
+
+  // Late anchor / a new window.
+  useEffect(() => {
+    checkAnchorSeen();
+  }, [rowId, checkAnchorSeen]);
+
+  // The list remounts under the spinner: start over.
+  useEffect(() => {
+    if (!isLoading) return;
+    viewableKeysRef.current = new Set();
+    settledRef.current = false;
+    setPositionSettled(false);
+    setViewabilityReady(false);
+  }, [isLoading]);
+
+  return {
+    positionSettled,
+    viewabilityReady,
+    viewabilityConfig: VIEWABILITY_CONFIG,
+    isAnchorTopVisibleNow,
+    checkAnchorSeen,
+    handleViewableItemsChanged,
+    markPositionSettled,
+  };
+};

package/src/screens/chat-detail/hooks/useUnreadDeeplinkCheck.ts

@@ -0,0 +1,68 @@
+import { useEffect, useRef, type RefObject } from 'react';
+import { useUnreadIndicatorStore } from '../../../store/unreadIndicator';
+import { useMessageStore } from '../../../store/message';
+import { isDeeplinkTargetBeforeAnchor } from '../../../utils/unreadAnchor';
+
+/**
+ * D11: a deeplink to a message OLDER than the first unread hides the
+ * indicator; a deeplink at/after it (or whose target never shows up) shows it.
+ * Decided explicitly once the lookup has answered and the window has loaded,
+ * and re-decided — against the existing anchor, with no SDK call — when
+ * `targetMessageId` changes on the same screen.
+ *
+ * Must run above `useMessages` in ChatDetail: the re-arm effect has to land
+ * before `useMessages`' `reset()` in the same commit.
+ */
+export const useUnreadDeeplinkCheck = ({
+  targetMessageId,
+  unreadToken,
+  tokenRef,
+}: {
+  targetMessageId?: string;
+  unreadToken: number | null;
+  tokenRef: RefObject<number | null>;
+}) => {
+  const awaiting = useUnreadIndicatorStore(
+    (s) =>
+      unreadToken != null && s.token === unreadToken && s.awaitingDeeplinkCheck
+  );
+  const pending = useUnreadIndicatorStore((s) => s.pending);
+  const initLoading = useMessageStore((s) => s.initLoading);
+  const rawMessages = useMessageStore((s) => s.messages);
+  const prevTargetRef = useRef(targetMessageId);
+  // After a re-arm, wait until the new search has been seen loading and then
+  // finished, so the rule is never decided against the old window.
+  const needLoadCycleRef = useRef(false);
+
+  useEffect(() => {
+    const prev = prevTargetRef.current;
+    prevTargetRef.current = targetMessageId;
+    const token = tokenRef.current;
+    if (!targetMessageId || targetMessageId === prev || token == null) return;
+    const store = useUnreadIndicatorStore.getState();
+    if (store.token !== token || !store.anchor) return;
+    store.rearmDeeplinkCheck(token);
+    needLoadCycleRef.current = true;
+  }, [targetMessageId, tokenRef]);
+
+  useEffect(() => {
+    const token = tokenRef.current;
+    if (!targetMessageId || !awaiting || pending || token == null) return;
+    if (needLoadCycleRef.current) {
+      if (initLoading) needLoadCycleRef.current = false;
+      return;
+    }
+    if (initLoading) return;
+    const store = useUnreadIndicatorStore.getState();
+    if (!store.anchor) {
+      store.confirmDeeplinkCheck(token, false);
+      return;
+    }
+    const target = rawMessages.find((m) => m.clientMsgID === targetMessageId);
+    // A missing target (search failed / not in window) shows normally.
+    store.confirmDeeplinkCheck(
+      token,
+      isDeeplinkTargetBeforeAnchor(target?.seq, store.anchor.seq)
+    );
+  }, [targetMessageId, awaiting, pending, initLoading, rawMessages, tokenRef]);
+};

package/src/screens/chat-detail/hooks/useUnreadIndicator.ts

@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  useIsFocused,
+  useNavigation,
+  useRoute,
+} from '@react-navigation/native';
+import { ChatMessageAPI } from '../../../services/message';
+import { useUnreadIndicatorStore } from '../../../store/unreadIndicator';
+import { toUnreadAnchor } from '../../../utils/unreadAnchor';
+import { useUnreadDeeplinkCheck } from './useUnreadDeeplinkCheck';
+
+// A blur within this long of a library-initiated child navigation (Thread
+// Info, in-thread search, add member) keeps the indicator; any other blur
+// (tab switch, another module) clears it.
+export const CHILD_NAV_TTL_MS = 1000;
+
+/**
+ * Owns this screen's unread-indicator session. `getFirstUnreadMessage` records
+ * the thread's open time server-side, so it's called exactly once per route
+ * visit: on the first focus after access is confirmed. A remount of ChatDetail
+ * inside the same route (access re-check, SDK reconnect) adopts the existing
+ * session instead of calling again; a new route key is a new visit.
+ *
+ * Must be called above `useMessages` (see `useUnreadDeeplinkCheck`).
+ */
+export const useUnreadIndicator = ({
+  conversationId,
+  isBotConversation,
+  targetMessageId,
+  accessConfirmed,
+}: {
+  conversationId: string;
+  isBotConversation: boolean;
+  targetMessageId?: string;
+  accessConfirmed: boolean;
+}) => {
+  const routeKey = useRoute().key;
+  const navigation = useNavigation();
+  const isFocused = useIsFocused();
+  // Ref for listeners and async code; state so token-scoped selectors re-run
+  // when it's set (adopting doesn't change the store).
+  const tokenRef = useRef<number | null>(null);
+  const [unreadToken, setUnreadToken] = useState<number | null>(null);
+  const childNavAtRef = useRef(0);
+
+  useEffect(() => {
+    if (!conversationId) return;
+    const s = useUnreadIndicatorStore.getState();
+    if (s.routeKey === routeKey && s.conversationId === conversationId) {
+      tokenRef.current = s.token;
+      setUnreadToken(s.token);
+      return;
+    }
+    if (!isFocused || !accessConfirmed) return;
+    const token = s.begin({
+      routeKey,
+      conversationId,
+      skip: isBotConversation,
+      awaitDeeplinkCheck: !!targetMessageId,
+    });
+    tokenRef.current = token;
+    setUnreadToken(token);
+    if (isBotConversation) return;
+    let resolved = false;
+    (async () => {
+      try {
+        const message =
+          await ChatMessageAPI.getFirstUnreadMessage(conversationId);
+        useUnreadIndicatorStore
+          .getState()
+          .resolve(token, toUnreadAnchor(message, conversationId));
+        resolved = true;
+      } catch (error) {
+        if (__DEV__) console.log('[unread] resolve failed', error);
+      } finally {
+        // The mark-read gate must always open.
+        if (!resolved) useUnreadIndicatorStore.getState().resolve(token, null);
+      }
+    })();
+    // targetMessageId is deliberately not a dependency: a target change on
+    // the same screen re-arms D11, it doesn't start a new visit.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [conversationId, routeKey, isFocused, accessConfirmed, isBotConversation]);
+
+  const markChildNavigation = useCallback(() => {
+    childNavAtRef.current = Date.now();
+  }, []);
+
+  useEffect(() => {
+    const offBlur = navigation.addListener('blur', () => {
+      const isChildNavigation =
+        Date.now() - childNavAtRef.current < CHILD_NAV_TTL_MS;
+      childNavAtRef.current = 0;
+      const token = tokenRef.current;
+      // Token-scoped: a no-op if another visit has superseded this session.
+      if (!isChildNavigation && token != null) {
+        useUnreadIndicatorStore.getState().clear(token);
+      }
+    });
+    const offFocus = navigation.addListener('focus', () => {
+      childNavAtRef.current = 0;
+    });
+    return () => {
+      offBlur();
+      offFocus();
+    };
+  }, [navigation]);
+
+  useUnreadDeeplinkCheck({ targetMessageId, unreadToken, tokenRef });
+
+  return { unreadToken, unreadTokenRef: tokenRef, markChildNavigation };
+};

package/src/screens/chat-detail/hooks/useUnreadIndicatorInList.ts

@@ -0,0 +1,181 @@
+import { useCallback, useEffect, useMemo, useRef, type RefObject } from 'react';
+import { DeviceEventEmitter } from 'react-native';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import type { LegendListRef } from '@legendapp/list/react-native';
+import { useUnreadIndicatorStore } from '../../../store/unreadIndicator';
+import { useMessageStore } from '../../../store/message';
+import { ChatEvent, type ScrollToMessageOptions } from '../../../types/events';
+import { resolveUnreadAnchorRowId } from '../../../utils/unreadAnchor';
+import { useUnreadAnchorSeen } from './useUnreadAnchorSeen';
+
+/** Lands the divider ~100px below the list top, no highlight, never exits. */
+export const UNREAD_JUMP_OPTIONS: ScrollToMessageOptions = {
+  highlight: false,
+  viewPosition: 0,
+  viewOffset: 100,
+  exitOnUnavailable: false,
+};
+// Parity with searchMessages' own re-emit delay.
+const POST_SEARCH_SCROLL_DELAY_MS = 300;
+// Anchor not reachable by id (not in the local DB): page older history at
+// most this many times (~75 messages) looking for the boundary.
+const MAX_ANCHOR_PAGES = 5;
+
+type PendingJump = 'idle' | 'requested' | 'loading' | 'paging';
+
+/**
+ * Wires the unread session into the list: which row carries the divider,
+ * whether the pill shows, and the pill's jump. The session is token-scoped —
+ * a second ChatDetail of the same thread never reads or dismisses this one's.
+ */
+export const useUnreadIndicatorInList = ({
+  messages,
+  unreadToken,
+  isLoading,
+  hasMoreOld,
+  moreOldLoading,
+  onLoadMoreOld,
+  isBotConversation,
+  listRef,
+  jumpInFlightRef,
+  setJumpInFlight,
+}: {
+  messages: MessageItem[];
+  unreadToken: number | null;
+  isLoading: boolean;
+  hasMoreOld: boolean;
+  moreOldLoading: boolean;
+  onLoadMoreOld?: (loadMore: boolean) => void;
+  isBotConversation: boolean;
+  listRef: RefObject<LegendListRef | null>;
+  jumpInFlightRef: RefObject<boolean>;
+  /** Writes the flag (and its safety timeout); `jumpInFlightRef` reads it. */
+  setJumpInFlight: (inFlight: boolean) => void;
+}) => {
+  const own = useUnreadIndicatorStore(
+    (s) => unreadToken != null && s.token === unreadToken
+  );
+  const anchor = useUnreadIndicatorStore((s) => s.anchor);
+  const pillDismissed = useUnreadIndicatorStore((s) => s.pillDismissed);
+  const awaiting = useUnreadIndicatorStore((s) => s.awaitingDeeplinkCheck);
+  // Raw window (before rendering filters) decides whether the boundary is in.
+  const oldestLoadedSeq = useMessageStore((s) => s.messages[0]?.seq ?? 0);
+  const active = own && !isBotConversation && !awaiting && !!anchor;
+
+  const unreadAnchorRowId = useMemo(
+    () =>
+      active
+        ? resolveUnreadAnchorRowId(messages, anchor, {
+            oldestLoadedSeq,
+            hasMoreOld,
+          })
+        : null,
+    [active, messages, anchor, oldestLoadedSeq, hasMoreOld]
+  );
+
+  const seen = useUnreadAnchorSeen({
+    rowId: unreadAnchorRowId,
+    unreadToken,
+    isLoading,
+    listRef,
+  });
+
+  const latest = useRef({ unreadAnchorRowId, unreadToken, hasMoreOld });
+  latest.current = { unreadAnchorRowId, unreadToken, hasMoreOld };
+  const onLoadMoreOldRef = useRef(onLoadMoreOld);
+  onLoadMoreOldRef.current = onLoadMoreOld;
+  const pendingJumpRef = useRef<PendingJump>('idle');
+  const pagesRef = useRef(0);
+
+  // After the window has landed (or been kept): land on the row re-resolved
+  // by seq, page older history toward it, or give up silently (no toast).
+  const landOrPage = useCallback(() => {
+    const { unreadAnchorRowId: id, hasMoreOld: more } = latest.current;
+    if (id) {
+      pendingJumpRef.current = 'idle';
+      DeviceEventEmitter.emit(ChatEvent.ScrollToMessage, {
+        ...UNREAD_JUMP_OPTIONS,
+        clientMessageId: id,
+        fromSearch: true,
+      });
+      return;
+    }
+    if (
+      more &&
+      pagesRef.current < MAX_ANCHOR_PAGES &&
+      onLoadMoreOldRef.current
+    ) {
+      pagesRef.current += 1;
+      pendingJumpRef.current = 'paging';
+      onLoadMoreOldRef.current(true);
+      return;
+    }
+    pendingJumpRef.current = 'idle';
+    setJumpInFlight(false);
+  }, [setJumpInFlight]);
+
+  useEffect(() => {
+    if (isLoading) {
+      if (pendingJumpRef.current === 'requested') {
+        pendingJumpRef.current = 'loading';
+      }
+      return;
+    }
+    if (pendingJumpRef.current !== 'loading') return;
+    const timer = setTimeout(landOrPage, POST_SEARCH_SCROLL_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, [isLoading, landOrPage]);
+
+  // One older page landed while paging toward the anchor.
+  const prevMoreOldLoadingRef = useRef(moreOldLoading);
+  useEffect(() => {
+    const wasLoading = prevMoreOldLoadingRef.current;
+    prevMoreOldLoadingRef.current = moreOldLoading;
+    if (wasLoading && !moreOldLoading && pendingJumpRef.current === 'paging') {
+      landOrPage();
+    }
+  }, [moreOldLoading, landOrPage]);
+
+  const jumpToFirstUnread = useCallback(() => {
+    const s = useUnreadIndicatorStore.getState();
+    const { unreadToken: token, unreadAnchorRowId: id } = latest.current;
+    if (token == null || s.token !== token || !s.anchor) return;
+    if (s.pillDismissed || jumpInFlightRef.current) return;
+    s.dismissPill(token);
+    setJumpInFlight(true);
+    if (id) {
+      DeviceEventEmitter.emit(ChatEvent.ScrollToMessage, {
+        ...UNREAD_JUMP_OPTIONS,
+        clientMessageId: id,
+      });
+      return;
+    }
+    pendingJumpRef.current = 'requested';
+    pagesRef.current = 0;
+    DeviceEventEmitter.emit(ChatEvent.ScrollToMessage, {
+      ...UNREAD_JUMP_OPTIONS,
+      clientMessageId: s.anchor.clientMsgID,
+      reemitAfterSearch: false,
+    });
+  }, [jumpInFlightRef, setJumpInFlight]);
+
+  // Evaluated in render, including "the divider is on screen right now", so a
+  // late anchor never flashes the pill for a frame.
+  const isPillVisible =
+    active &&
+    !pillDismissed &&
+    !isLoading &&
+    seen.positionSettled &&
+    seen.viewabilityReady &&
+    !(unreadAnchorRowId && seen.isAnchorTopVisibleNow());
+
+  return {
+    unreadAnchorRowId,
+    isPillVisible,
+    viewabilityConfig: seen.viewabilityConfig,
+    handleViewableItemsChanged: seen.handleViewableItemsChanged,
+    checkAnchorSeen: seen.checkAnchorSeen,
+    markPositionSettled: seen.markPositionSettled,
+    jumpToFirstUnread,
+  };
+};