@ethora/chat-component-rn 26.9.0 → 26.10.0

package/lib/commonjs/components/MainComponents/MessageList.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.WINDOW_SETTLE_MS = exports.WINDOW_RETRY_AFTER_FAILURE_MS = exports.WINDOW_EXIT_GRACE_MS = exports.PREFETCH_SCREENS = exports.PREFETCH_MIN_DISTANCE = exports.NO_PROGRESS_RETRY_MS = exports.MAX_IDLE_AUTO_PAGES = exports.HISTORY_PAGE_SIZE = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactRedux = require("react-redux");
 var _roomsSlice = require("../../roomStore/roomsSlice");
 var _Composing = _interopRequireDefault(require("../styled/StyledInputComponents/Composing"));
 var _TreadLabel = _interopRequireDefault(require("../styled/TreadLabel"));
 var _MessageContainer = require("./MessageContainer");
-var _reactRedux = require("react-redux");
 var _Loader = _interopRequireDefault(require("../styled/Loader"));
 var _icons = require("../../assets/icons");
 var _CustomTypingIndicator = _interopRequireDefault(require("../styled/StyledInputComponents/CustomTypingIndicator"));
@@ -18,11 +18,46 @@ var _getIconColor = require("../../helpers/getIconColor");
 var _getChatBackground = require("../../helpers/getChatBackground");
 var _useTheme = require("../../hooks/useTheme");
 var _isOwnMessage = require("../../helpers/isOwnMessage");
+var _useJumpToMessage = require("../../hooks/useJumpToMessage");
+var _jumpToMessage = require("../../helpers/jumpToMessage");
+var _jumpWindow = require("../../helpers/jumpWindow");
+var _jumpThread = require("../../helpers/jumpThread");
+var _openThreadForJump = require("../../helpers/openThreadForJump");
+var _bubbleHighlight = require("../../helpers/bubbleHighlight");
+var _userResolver = require("../../helpers/userResolver");
+var _useT = require("../../i18n/useT");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /** @format */
 
+// Older history is requested while the reader is still this far from the top
+// (or 3 screens, whichever is more), so a normal scroll finds it already there
+// and never sees a spinner. The spinner is for a reader who outruns the
+// request and reaches the very top while it is in flight.
+const PREFETCH_MIN_DISTANCE = exports.PREFETCH_MIN_DISTANCE = 1200;
+const PREFETCH_SCREENS = exports.PREFETCH_SCREENS = 3;
+// FlatList's own trigger distance, in screens: generous on purpose.
+const END_REACHED_THRESHOLD = 4;
+const HISTORY_PAGE_SIZE = exports.HISTORY_PAGE_SIZE = 100;
+// Consecutive history pages that added nothing to the list before auto-paging
+// stops (a reader scroll re-arms it).
+const MAX_IDLE_AUTO_PAGES = exports.MAX_IDLE_AUTO_PAGES = 40;
+// A request that settled without moving the oldest message or the cursor gets
+// exactly one more try after this long.
+const NO_PROGRESS_RETRY_MS = exports.NO_PROGRESS_RETRY_MS = 1000;
+const AUTO_FILL_DELAY_MS = 100;
+// After a page lands, the content size change it causes is not new content.
+const GROWTH_GUARD_MS = 500;
+// A window page that failed is not retried in a hot loop.
+const WINDOW_RETRY_AFTER_FAILURE_MS = exports.WINDOW_RETRY_AFTER_FAILURE_MS = 3000;
+// The scroll that centres the target must not be read as the reader scrolling
+// toward an edge (it would page, or leave the window).
+const WINDOW_SETTLE_MS = exports.WINDOW_SETTLE_MS = 600;
+const WINDOW_EXIT_GRACE_MS = exports.WINDOW_EXIT_GRACE_MS = 1500;
+
+/** The slice of the XMPP client the list needs. */
+
 const mainIdCache = new WeakMap();
 const mainMessageIdOf = m => {
   if (!m?.mainMessage) {
@@ -75,17 +110,21 @@ const MessageList = ({
   loading,
   isReply,
   activeMessage,
+  client,
   onReadBoundaryChange
 }) => {
   const room = (0, _reactRedux.useSelector)(state => state.rooms.rooms?.[roomJID]);
   const composing = room?.composing;
   const composingList = room?.composingList;
   const messages = room?.messages || EMPTY_LIST;
+  const historyComplete = room?.historyComplete;
   const theme = (0, _useTheme.useTheme)();
+  const t = (0, _useT.useT)();
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const reduxStore = (0, _reactRedux.useStore)();
   const [isUserAtBottom, setIsUserAtBottom] = (0, _react.useState)(true);
   const [showNewMessageIndicator, setShowNewMessageIndicator] = (0, _react.useState)(false);
   const [isLoadingMore, setIsLoadingMore] = (0, _react.useState)(false);
-  const [isScrollBlocked, setIsScrollBlocked] = (0, _react.useState)(false);
   // Count of messages that arrived while the user was scrolled up.
   // Renders as a badge on the scroll-to-bottom arrow so they know how
   // much they're missing without having to scroll to find out.
@@ -102,10 +141,57 @@ const MessageList = ({
   // to jump back to the bottom when a new message landed mid-scroll.
   const isUserAtBottomRef = (0, _react.useRef)(true);
   const hasUserScrolledRef = (0, _react.useRef)(false);
+  const mountedRef = (0, _react.useRef)(true);
+  (0, _react.useEffect)(() => () => {
+    mountedRef.current = false;
+  }, []);
   const flatListRef = (0, _react.useRef)(null);
+
+  // Viewport metrics, kept in refs: the loaders read them from timers and
+  // FlatList callbacks, never from a stale render closure.
+  const scrollOffsetRef = (0, _react.useRef)(0);
+  const contentHeightRef = (0, _react.useRef)(0);
+  const viewportHeightRef = (0, _react.useRef)(0);
+
+  // A short slice of archive around a far jump target, shown instead of the
+  // live list until the reader returns to the latest messages. Not for threads.
+  const jumpWindow = (0, _reactRedux.useSelector)(state => state.rooms.jumpWindow);
+  const joiningRoomJID = (0, _reactRedux.useSelector)(state => typeof state.rooms.joiningRoomJID === 'string' ? state.rooms.joiningRoomJID : null);
+  const windowActive = !isReply && jumpWindow?.roomJID === roomJID;
+  const windowActiveRef = (0, _react.useRef)(windowActive);
+  windowActiveRef.current = windowActive;
+  const loadingPropRef = (0, _react.useRef)(loading);
+  loadingPropRef.current = loading;
+
+  // A thread list also sees what a jump to one of its replies brought in (and
+  // any window on screen): those replies may be older than the live list.
+  const jumpThread = (0, _jumpThread.useJumpThread)();
+  const threadExtras = (0, _react.useMemo)(() => {
+    if (!isReply || !activeMessage) {
+      return null;
+    }
+    const fromWindow = jumpWindow?.roomJID === roomJID ? jumpWindow.messages : [];
+    const fromJump = jumpThread && jumpThread.roomJID === roomJID && jumpThread.parentId === String(activeMessage.id) ? jumpThread.replies : [];
+    if (fromWindow.length === 0 && fromJump.length === 0) {
+      return null;
+    }
+    return (0, _jumpThread.mergeById)(fromWindow, fromJump);
+  }, [isReply, activeMessage, jumpWindow, jumpThread, roomJID]);
+  const sourceMessages = (0, _react.useMemo)(() => {
+    if (windowActive && jumpWindow) {
+      return jumpWindow.messages;
+    }
+    if (threadExtras) {
+      return (0, _jumpThread.mergeById)(messages ?? [], threadExtras);
+    }
+    return messages;
+  }, [windowActive, jumpWindow, threadExtras, messages]);
   const addReplyMessages = (0, _react.useMemo)(() => {
+    // Index replies by their parent once instead of filtering the whole list
+    // per message. Only a message that has replies is copied, so the others
+    // keep their identity (memoized rows do not re-render).
     const repliesByParent = new Map();
-    for (const mess of messages) {
+    for (const mess of sourceMessages) {
       if (!mess?.mainMessage || mess.isDeleted) {
         continue;
       }
@@ -121,16 +207,16 @@ const MessageList = ({
       }
     }
     if (repliesByParent.size === 0) {
-      return messages;
+      return sourceMessages;
     }
-    return messages.map(message => {
+    return sourceMessages.map(message => {
       const reply = repliesByParent.get(String(message.id));
       return reply ? {
         ...message,
         reply
       } : message;
     });
-  }, [messages]);
+  }, [sourceMessages]);
   const memoizedMessages = (0, _react.useMemo)(() => {
     const nonDeletedMessages = addReplyMessages.filter(item => !item.isDeleted);
     let filtered;
@@ -147,8 +233,8 @@ const MessageList = ({
     // matching their date.toString() comparison, but redux state can
     // emit intermediate snapshots between dispatches, so the FlatList
     // briefly renders messages out-of-order until the final batch
-    // settles. Sorting here makes each render a stable, ordered view —
-    // even mid-stream — so the user sees them appear from oldest to
+    // settles. Sorting here makes each render a stable, ordered view,
+    // even mid-stream, so the user sees them appear from oldest to
     // newest with no swap animation.
     let sorted = filtered;
     for (let i = 1; i < filtered.length; i++) {
@@ -169,31 +255,460 @@ const MessageList = ({
     }
     return deduped;
   }, [addReplyMessages, isReply, roomJID, activeMessage]);
-  const handleLoadMore = (0, _react.useCallback)(async () => {
-    if (loading || isLoadingMore || !memoizedMessages.length || isScrollBlocked) {
+  const memoizedMessagesRef = (0, _react.useRef)(memoizedMessages);
+  memoizedMessagesRef.current = memoizedMessages;
+
+  // ---------------------------------------------------------------------
+  // History loading (live list)
+  // ---------------------------------------------------------------------
+
+  const isLoadingMoreRef = (0, _react.useRef)(false);
+  const growthGuardUntilRef = (0, _react.useRef)(0);
+  // The request key (oldest displayed message + cursor) last kicked off.
+  // Guards against a busy loop: a short conversation that never fills the
+  // viewport keeps asking, and a request that settles without moving anything
+  // would be asked again immediately, forever.
+  const lastRequestedKeyRef = (0, _react.useRef)(null);
+  const idleLoadsRef = (0, _react.useRef)(0);
+  const idleLoadsLenRef = (0, _react.useRef)(-1);
+  // Request keys that already got their one delayed retry.
+  const retriedKeysRef = (0, _react.useRef)(new Set());
+  const retryTimerRef = (0, _react.useRef)(null);
+  const autoFillTimerRef = (0, _react.useRef)(null);
+  const checkLoadMoreRef = (0, _react.useRef)(() => {});
+  const checkWindowLoadMoreRef = (0, _react.useRef)(() => {});
+
+  // The paging cursor moved (or regressed through another path) or the
+  // history completed: the repeat guard no longer describes the room, so a key
+  // seen before is allowed again. The idle page cap still bounds any loop.
+  const pagingCursor = (0, _reactRedux.useSelector)(state => state.rooms.rooms[roomJID]?.messageStats?.firstMessageTimestamp);
+  const roomHistoryComplete = (0, _reactRedux.useSelector)(state => Boolean(state.rooms.rooms[roomJID]?.historyComplete));
+  (0, _react.useEffect)(() => {
+    lastRequestedKeyRef.current = null;
+    retriedKeysRef.current = new Set();
+  }, [pagingCursor, roomHistoryComplete]);
+  (0, _react.useEffect)(() => {
+    // A new room's oldest message is unrelated to whatever the previous room
+    // last attempted: do not let a stale guard block its first load.
+    lastRequestedKeyRef.current = null;
+    retriedKeysRef.current = new Set();
+    idleLoadsRef.current = 0;
+    idleLoadsLenRef.current = -1;
+    if (retryTimerRef.current) {
+      clearTimeout(retryTimerRef.current);
+      retryTimerRef.current = null;
+    }
+  }, [roomJID]);
+  (0, _react.useEffect)(() => () => {
+    if (retryTimerRef.current) {
+      clearTimeout(retryTimerRef.current);
+    }
+    if (autoFillTimerRef.current) {
+      clearTimeout(autoFillTimerRef.current);
+    }
+  }, []);
+  const prefetchDistance = () => Math.max(PREFETCH_MIN_DISTANCE, viewportHeightRef.current * PREFETCH_SCREENS);
+  // Inverted list: offset 0 is the newest end; older history is at the far end.
+  const distanceToOlderEdge = () => contentHeightRef.current - viewportHeightRef.current - scrollOffsetRef.current;
+
+  // After a request settled, if the guard still holds the same key nothing
+  // moved (oldest id and cursor identical). Allow exactly one retry per key
+  // after ~1 s, then stay stopped until the cursor, historyComplete or the
+  // room changes (those clear the retried set).
+  const scheduleNoProgressRetry = (0, _react.useCallback)(key => {
+    if (retriedKeysRef.current.has(key)) {
+      return;
+    }
+    if (retryTimerRef.current) {
+      clearTimeout(retryTimerRef.current);
+    }
+    const forRoom = roomJID;
+    retryTimerRef.current = setTimeout(() => {
+      retryTimerRef.current = null;
+      if (forRoom !== roomJID || !mountedRef.current) {
+        return;
+      }
+      if (lastRequestedKeyRef.current !== key) {
+        return;
+      }
+      if (reduxStore.getState().rooms.rooms[forRoom]?.historyComplete) {
+        return;
+      }
+      retriedKeysRef.current.add(key);
+      lastRequestedKeyRef.current = null;
+      checkLoadMoreRef.current();
+    }, NO_PROGRESS_RETRY_MS);
+  }, [roomJID, reduxStore]);
+  const checkIfLoadMore = (0, _react.useCallback)((assumeNear = false) => {
+    // While a jump window is on screen the live list is not what the reader
+    // is looking at: no background prefetch of it, the window pages instead.
+    if (windowActiveRef.current) {
+      checkWindowLoadMoreRef.current();
+      return;
+    }
+    if (isLoadingMoreRef.current) {
       return;
     }
-    const oldestMessage = memoizedMessages[0];
-    if (!oldestMessage || !oldestMessage.id) {
+    const state = reduxStore.getState().rooms;
+    // A jump is already paging this room's history. A second request in
+    // flight at the same time makes the server's answers interleave and one
+    // of them time out, which the jump reads as the history being
+    // unreachable.
+    if (state.pendingJump?.roomJID === roomJID) {
       return;
     }
+    // Read the room at call time: a closure over an old render would act on
+    // an old cursor.
+    const room = state.rooms[roomJID];
+    if (!room || room.historyComplete) {
+      return;
+    }
+    if (!assumeNear && viewportHeightRef.current > 0 && distanceToOlderEdge() >= prefetchDistance()) {
+      return;
+    }
+    const displayed = memoizedMessagesRef.current;
+    const first = displayed.find(message => !String(message.id).startsWith('delimiter-new'));
+    // Continue from the server's own cursor (the oldest ROW the last page
+    // returned), never from the oldest DISPLAYED message alone: a page made
+    // only of receipts or reactions displays nothing, the oldest message
+    // does not change, and paging would stall with plenty of history left.
+    const serverCursor = room.messageStats?.firstMessageTimestamp;
+    const oldestDisplayed = first ? Number(first.id) : NaN;
+    let before;
+    if (Number.isFinite(oldestDisplayed)) {
+      before = typeof serverCursor === 'number' && serverCursor < oldestDisplayed ? serverCursor : oldestDisplayed;
+    } else if (typeof serverCursor === 'number' && Number.isFinite(serverCursor)) {
+      before = serverCursor;
+    } else {
+      return;
+    }
+
+    // A repeat of the same request (same oldest message AND same cursor) is
+    // what the guard stops; a page that only moved the cursor is progress.
+    const key = `${first ? first.id : 'none'}|${before}`;
+    if (key === lastRequestedKeyRef.current) {
+      return;
+    }
+
+    // Hard stop for a long run of pages that add nothing to the list (an
+    // archive that is almost all receipts): a reader scroll re-arms it.
+    if (displayed.length !== idleLoadsLenRef.current) {
+      idleLoadsLenRef.current = displayed.length;
+      idleLoadsRef.current = 0;
+    }
+    if (idleLoadsRef.current >= MAX_IDLE_AUTO_PAGES) {
+      return;
+    }
+    idleLoadsRef.current += 1;
+    isLoadingMoreRef.current = true;
+    lastRequestedKeyRef.current = key;
     setIsLoadingMore(true);
-    setIsScrollBlocked(true);
+    let request;
     try {
-      await loadMoreMessages(oldestMessage.roomJid || roomJID, 15, Number(oldestMessage.id));
+      request = Promise.resolve(loadMoreMessages(roomJID, HISTORY_PAGE_SIZE, before));
     } catch (error) {
-      console.error(error);
+      request = Promise.reject(error);
+    }
+    request.catch(() => undefined).then(() => {
+      isLoadingMoreRef.current = false;
+      growthGuardUntilRef.current = Date.now() + GROWTH_GUARD_MS;
+      if (mountedRef.current) {
+        setIsLoadingMore(false);
+      }
+      scheduleNoProgressRetry(key);
+      // Keep the buffer above the reader topped up without waiting for the
+      // next scroll event: a reader still inside the prefetch distance
+      // once this page is in gets the next page right away, so a
+      // normal-speed scroll never catches up with the loader. Deferred so
+      // the new page has been rendered and measured first.
+      setTimeout(() => {
+        if (mountedRef.current) {
+          checkLoadMoreRef.current();
+        }
+      }, 80);
+    });
+  }, [loadMoreMessages, roomJID, reduxStore, scheduleNoProgressRetry]);
+  checkLoadMoreRef.current = checkIfLoadMore;
+
+  // A list that does not fill the viewport cannot scroll, so no scroll event
+  // ever asks for older history (a first page made of receipts displays one
+  // message and the archive behind it stays unreachable). Ask without one; the
+  // chain in checkIfLoadMore then pages until the viewport fills. Threads load
+  // through their own wrapper; a jump window pages itself.
+  const scheduleAutoFill = (0, _react.useCallback)(() => {
+    if (isReply || windowActiveRef.current || !roomJID) {
+      return;
+    }
+    if (autoFillTimerRef.current) {
+      clearTimeout(autoFillTimerRef.current);
+    }
+    autoFillTimerRef.current = setTimeout(() => {
+      autoFillTimerRef.current = null;
+      if (!mountedRef.current) {
+        return;
+      }
+      if (windowActiveRef.current || isLoadingMoreRef.current) {
+        return;
+      }
+      const state = reduxStore.getState().rooms;
+      if (state.pendingJump?.roomJID === roomJID) {
+        return;
+      }
+      if (state.rooms[roomJID]?.historyComplete) {
+        return;
+      }
+      // Not laid out yet: nothing to compare against.
+      if (viewportHeightRef.current <= 0 || contentHeightRef.current <= 0) {
+        return;
+      }
+      const unfilled = contentHeightRef.current <= viewportHeightRef.current || distanceToOlderEdge() < prefetchDistance();
+      if (!unfilled || !isUserAtBottomRef.current) {
+        return;
+      }
+      checkLoadMoreRef.current();
+    }, AUTO_FILL_DELAY_MS);
+  }, [isReply, roomJID, reduxStore]);
+  (0, _react.useEffect)(() => {
+    if (isReply || windowActive || loading || historyComplete) {
+      return;
+    }
+    scheduleAutoFill();
+  }, [roomJID, isReply, windowActive, loading, historyComplete, memoizedMessages.length, pagingCursor, scheduleAutoFill]);
+  const handleLoadMore = (0, _react.useCallback)(() => {
+    // FlatList says the reader is near the older end.
+    checkLoadMoreRef.current(true);
+  }, []);
+
+  // ---------------------------------------------------------------------
+  // Jump window (a far jump shows a short slice of the archive around it)
+  // ---------------------------------------------------------------------
+
+  const [windowLoading, setWindowLoading] = (0, _react.useState)(null);
+  const windowBusyRef = (0, _react.useRef)(null);
+  const windowFailedAtRef = (0, _react.useRef)({
+    older: 0,
+    newer: 0
+  });
+  const windowOpenedAtRef = (0, _react.useRef)(0);
+  const pendingExitScrollRef = (0, _react.useRef)(false);
+  const prevWindowActiveRef = (0, _react.useRef)(windowActive);
+  const exitWindow = (0, _react.useCallback)(() => {
+    if (!windowActiveRef.current) {
+      return;
+    }
+    isUserAtBottomRef.current = true;
+    hasUserScrolledRef.current = false;
+    pendingExitScrollRef.current = true;
+    setShowNewMessageIndicator(false);
+    setIsUserAtBottom(true);
+    setUnreadWhileScrolledUp(0);
+    newestSeenTsRef.current = null;
+    onReadBoundaryChange?.(null);
+    dispatch((0, _roomsSlice.clearJumpWindow)());
+  }, [dispatch, onReadBoundaryChange]);
+
+  // Back on the live list: land on its newest message.
+  (0, _react.useEffect)(() => {
+    const was = prevWindowActiveRef.current;
+    prevWindowActiveRef.current = windowActive;
+    if (windowActive || !was) {
+      return;
+    }
+    // A new jump is about to scroll somewhere else: leave the position to it.
+    if (reduxStore.getState().rooms.pendingJump?.roomJID === roomJID) {
+      return;
+    }
+    isUserAtBottomRef.current = true;
+    pendingExitScrollRef.current = false;
+    setIsUserAtBottom(true);
+    const toLiveEnd = () => flatListRef.current?.scrollToOffset({
+      offset: 0,
+      animated: false
+    });
+    toLiveEnd();
+    // The list swaps its data a frame later on a slow device: once more.
+    const timer = setTimeout(toLiveEnd, 50);
+    return () => clearTimeout(timer);
+  }, [windowActive, roomJID, reduxStore]);
+
+  // A window must not outlive the list that showed it.
+  (0, _react.useEffect)(() => () => {
+    if (windowActiveRef.current) {
+      dispatch((0, _roomsSlice.clearJumpWindow)());
+    }
+  }, [dispatch]);
+  (0, _react.useEffect)(() => {
+    if (!jumpWindow?.targetId || !windowActive) {
+      return;
+    }
+    windowOpenedAtRef.current = Date.now();
+    windowFailedAtRef.current = {
+      older: 0,
+      newer: 0
+    };
+    isUserAtBottomRef.current = false;
+    setIsUserAtBottom(false);
+    setShowNewMessageIndicator(false);
+    // Reading a window of old history is not reading the latest messages: from
+    // here on the read boundary is the newest live message the reader had
+    // reached, never "everything".
+    if (newestSeenTsRef.current === null) {
+      const newest = (messages ?? []).reduce((mx, m) => Math.max(mx, (0, _roomsSlice.msgSortableMs)(m)), 0);
+      if (newest > 0) {
+        newestSeenTsRef.current = newest;
+        onReadBoundaryChange?.(newest);
+      }
+    }
+    // A window that does not fill the viewport never scrolls, so nothing would
+    // ask for the next page: look once it has settled.
+    const timer = setTimeout(() => checkWindowLoadMoreRef.current(), WINDOW_SETTLE_MS + 100);
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [jumpWindow?.targetId, windowActive]);
+  const loadWindowPage = (0, _react.useCallback)(async direction => {
+    const win = reduxStore.getState().rooms.jumpWindow;
+    if (!win || win.roomJID !== roomJID || !client) {
+      return;
+    }
+    if (windowBusyRef.current) {
+      return;
+    }
+    windowBusyRef.current = direction;
+    setWindowLoading(direction);
+    try {
+      const page = direction === 'older' ? await (0, _jumpWindow.loadOlderWindowPage)(client, win) : await (0, _jumpWindow.loadNewerWindowPage)(client, win);
+      const current = reduxStore.getState().rooms.jumpWindow;
+      // The reader left, or opened another window, while this was in flight.
+      if (!current || current.targetId !== win.targetId) {
+        return;
+      }
+      if (!page) {
+        windowFailedAtRef.current[direction] = Date.now();
+        return;
+      }
+      (0, _userResolver.requestSendersOf)(page.messages);
+      if ('olderCursor' in page) {
+        dispatch((0, _roomsSlice.prependJumpWindowMessages)({
+          roomJID,
+          ...page
+        }));
+      } else {
+        dispatch((0, _roomsSlice.appendJumpWindowMessages)({
+          roomJID,
+          ...page
+        }));
+      }
+    } catch {
+      windowFailedAtRef.current[direction] = Date.now();
     } finally {
+      windowBusyRef.current = null;
+      if (mountedRef.current) {
+        setWindowLoading(null);
+      }
       setTimeout(() => {
-        setIsLoadingMore(false);
-        setIsScrollBlocked(false);
-      }, 500);
+        if (mountedRef.current) {
+          checkWindowLoadMoreRef.current();
+        }
+      }, 80);
+    }
+  }, [client, roomJID, dispatch, reduxStore]);
+  checkWindowLoadMoreRef.current = (fromUserScroll = false) => {
+    const win = reduxStore.getState().rooms.jumpWindow;
+    if (!win || win.roomJID !== roomJID) {
+      return;
+    }
+    const now = Date.now();
+    if (now - windowOpenedAtRef.current < WINDOW_SETTLE_MS) {
+      return;
+    }
+    // Not laid out yet: there is nothing to measure a distance against.
+    if (viewportHeightRef.current <= 0 || contentHeightRef.current <= 0) {
+      return;
+    }
+    const prefetch = prefetchDistance();
+    const olderDistance = distanceToOlderEdge();
+    const newerDistance = scrollOffsetRef.current;
+    if (win.hasOlder && olderDistance < prefetch && now - windowFailedAtRef.current.older > WINDOW_RETRY_AFTER_FAILURE_MS) {
+      loadWindowPage('older');
+    } else if (win.hasNewer && newerDistance < prefetch && now - windowFailedAtRef.current.newer > WINDOW_RETRY_AFTER_FAILURE_MS) {
+      loadWindowPage('newer');
+    } else if (!win.hasNewer && fromUserScroll && newerDistance <= 5 && now - windowOpenedAtRef.current > WINDOW_EXIT_GRACE_MS) {
+      // Nothing newer than this is left to load: that is the live tail.
+      exitWindow();
+    }
+  };
+  const handleStartReached = (0, _react.useCallback)(() => {
+    checkWindowLoadMoreRef.current();
+  }, []);
+
+  // A jump whose target is a thread reply opens the parent's thread (the main
+  // list never shows replies); the thread list then highlights the reply.
+  const resolveReply = (0, _react.useCallback)((jump, reply, nearby) => (0, _openThreadForJump.openThreadForJump)({
+    client,
+    dispatch: dispatch,
+    roomJID,
+    at: jump.at,
+    reply,
+    live: messages ?? [],
+    nearby
+  }), [client, dispatch, roomJID, messages]);
+  const fetchWindow = (0, _react.useCallback)(async jump => {
+    if (isReply || !client?.getHistoryWindow) {
+      return 'unavailable';
+    }
+    const result = await (0, _jumpWindow.loadJumpWindow)(client, roomJID, jump.ids, {
+      createdAt: jump.createdAt,
+      body: jump.body
+    });
+    if (result.status !== 'found') {
+      return result.status;
+    }
+    const target = result.window.messages.find(message => String(message.id) === result.window.targetId);
+    if (target && (0, _jumpThread.replyParentId)(target)) {
+      // Not a main-list message: the window is only used to learn what the
+      // reply belongs to; it is not put on screen.
+      const opened = await resolveReply(jump, target, result.window.messages).catch(() => false);
+      return opened ? 'found' : 'missing';
+    }
+    isUserAtBottomRef.current = false;
+    (0, _userResolver.requestSendersOf)(result.window.messages);
+    dispatch((0, _roomsSlice.setJumpWindow)(result.window));
+    return 'found';
+  }, [client, roomJID, isReply, dispatch, resolveReply]);
+  const fetchOlderPage = (0, _react.useCallback)(async (jid, before, max) => {
+    if (!client) {
+      return {
+        ok: false
+      };
+    }
+    const page = await client.getHistoryStanza(jid, max, before, undefined, {
+      source: 'active'
+    });
+    // The page is in the store by now, and so is the server's cursor for it
+    // (the <fin> handler writes it to messageStats).
+    const room = reduxStore.getState().rooms.rooms[jid];
+    return {
+      ok: page !== undefined,
+      cursor: room?.messageStats?.firstMessageTimestamp,
+      complete: Boolean(room?.historyComplete)
+    };
+  }, [client, reduxStore]);
+
+  // The own message that was just sent is on the live list: leave the window
+  // for it (the composer already clears it; this covers other send paths).
+  const lastNewestIdRef = (0, _react.useRef)(messages[messages.length - 1]?.id);
+  (0, _react.useEffect)(() => {
+    const newest = messages[messages.length - 1];
+    const changed = newest && String(newest.id) !== lastNewestIdRef.current;
+    lastNewestIdRef.current = newest ? String(newest.id) : undefined;
+    if (changed && windowActiveRef.current && (0, _isOwnMessage.isOwnMessage)(newest, user.xmppUsername || user.walletAddress)) {
+      exitWindow();
     }
-  }, [memoizedMessages, loadMoreMessages, loading, isLoadingMore, isScrollBlocked, roomJID]);
+  }, [messages, user.xmppUsername, user.walletAddress, exitWindow]);
   const dataMessages = (0, _react.useMemo)(() => {
     const base = memoizedMessages.slice().reverse();
     const boundaryTs = newestSeenTsRef.current;
-    if (isUserAtBottomRef.current || boundaryTs === null || unreadWhileScrolledUp === 0) {
+    if (windowActive || isUserAtBottomRef.current || boundaryTs === null || unreadWhileScrolledUp === 0) {
       return base;
     }
     let lastNewIndex = -1;
@@ -221,7 +736,58 @@ const MessageList = ({
       roomJid: roomJID
     });
     return withDivider;
-  }, [memoizedMessages, isUserAtBottom, roomJID, unreadWhileScrolledUp]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [memoizedMessages, isUserAtBottom, roomJID, unreadWhileScrolledUp, windowActive]);
+
+  // Jump-to-message (search hit, notification): scroll to the row, then pulse
+  // the bubble. The retry budget is for scrolling to a row the virtualised
+  // list has not measured yet.
+  const scrollRetryRef = (0, _react.useRef)(0);
+  const scrollToRow = (0, _react.useCallback)(index => {
+    scrollRetryRef.current = 0;
+    flatListRef.current?.scrollToIndex({
+      index,
+      viewPosition: 0.5,
+      animated: false
+    });
+  }, []);
+  const handleScrollToIndexFailed = (0, _react.useCallback)(info => {
+    const offset = (0, _jumpToMessage.scrollRetryOffset)(info, scrollRetryRef.current);
+    if (offset === null) {
+      return;
+    }
+    scrollRetryRef.current += 1;
+    flatListRef.current?.scrollToOffset({
+      offset,
+      animated: false
+    });
+    setTimeout(() => {
+      flatListRef.current?.scrollToIndex({
+        index: info.index,
+        viewPosition: 0.5,
+        animated: false
+      });
+    }, 120);
+  }, []);
+  (0, _useJumpToMessage.useJumpToMessage)({
+    roomJID,
+    messages: memoizedMessages,
+    listData: dataMessages,
+    scrollToIndex: scrollToRow,
+    onHighlight: _bubbleHighlight.setBubbleHighlight,
+    loadMoreMessages,
+    fetchOlderPage: client ? fetchOlderPage : undefined,
+    historyComplete,
+    isUserAtBottomRef,
+    jumpWindowActive: windowActive,
+    fetchWindow: isReply || !client ? undefined : fetchWindow,
+    scope: isReply && activeMessage ? {
+      threadId: String(activeMessage.id)
+    } : 'main',
+    allMessages: sourceMessages,
+    resolveReply: isReply ? undefined : (jump, reply) => resolveReply(jump, reply),
+    roomOpening: !isReply && (Boolean(loading) || joiningRoomJID === roomJID || sourceMessages.length === 0 && !historyComplete)
+  });
   const dateLabelIds = (0, _react.useMemo)(() => {
     const ids = new Set();
     let nextDay = null;
@@ -255,6 +821,9 @@ const MessageList = ({
       });
     }
     const showDateLabel = dateLabelIds.has(String(item.id));
+
+    // The jump highlight is drawn by the message bubble itself (see
+    // BubbleHighlight), so the row, its date label and its avatar stay put.
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageContainer.MessageContainer, {
       CustomMessage: CustomMessage,
       CustomDaySeparator: CustomDaySeparator,
@@ -275,29 +844,58 @@ const MessageList = ({
       });
     }
   }, [flatListRef]);
-  const handleContentSizeChange = (0, _react.useCallback)(() => {
-    if (!isLoadingMore && flatListRef.current && isUserAtBottomRef.current) {
+  const handleContentSizeChange = (0, _react.useCallback)((_width, height) => {
+    if (typeof height === 'number' && height > 0) {
+      contentHeightRef.current = height;
+    }
+    if (windowActiveRef.current) {
+      // Reading a window of old history: never stick to the bottom.
+      checkWindowLoadMoreRef.current();
+      return;
+    }
+    const growing = isLoadingMoreRef.current || Date.now() < growthGuardUntilRef.current;
+    if (!growing && flatListRef.current && isUserAtBottomRef.current) {
       scrollToBottom();
-    } else if (!isLoadingMore && hasUserScrolledRef.current) {
+    } else if (!growing && hasUserScrolledRef.current) {
       setShowNewMessageIndicator(true);
     }
-  }, [scrollToBottom, isLoadingMore]);
+    scheduleAutoFill();
+  }, [scrollToBottom, scheduleAutoFill]);
   const handleScroll = (0, _react.useCallback)(event => {
-    const contentOffset = event.nativeEvent.contentOffset.y;
+    const {
+      contentOffset,
+      contentSize,
+      layoutMeasurement
+    } = event.nativeEvent;
+    const offsetY = contentOffset.y;
+    scrollOffsetRef.current = offsetY;
+    if (contentSize?.height > 0) {
+      contentHeightRef.current = contentSize.height;
+    }
+    if (layoutMeasurement?.height > 0) {
+      viewportHeightRef.current = layoutMeasurement.height;
+    }
+    if (windowActiveRef.current) {
+      // Reading a window of old history: never "at the bottom", always the
+      // way back to the latest messages, and page both ways.
+      isUserAtBottomRef.current = false;
+      checkWindowLoadMoreRef.current(true);
+      return;
+    }
 
-    // Don't force-dismiss the keyboard on every scroll event — any
+    // Don't force-dismiss the keyboard on every scroll event, any
     // touch on the message list used to close it, which made replying
     // to a long thread feel broken. Drag-to-dismiss still works via
     // FlatList's keyboardDismissMode="interactive" below.
 
-    if (contentOffset > 150 && !hasUserScrolledRef.current) {
+    if (offsetY > 150 && !hasUserScrolledRef.current) {
       hasUserScrolledRef.current = true;
     }
-    if (contentOffset < 150) {
+    if (offsetY < 150) {
       isUserAtBottomRef.current = true;
       setShowNewMessageIndicator(false);
       setIsUserAtBottom(true);
-      // Back at the bottom — clear the unread-while-scrolled-up
+      // Back at the bottom, clear the unread-while-scrolled-up
       // counter so the badge disappears with the arrow.
       setUnreadWhileScrolledUp(0);
       newestSeenTsRef.current = null;
@@ -313,8 +911,8 @@ const MessageList = ({
         // arrives later is genuinely "new"; older history loaded by
         // back-pagination is < this and never counts.
         newestSeenTsRef.current = memoizedMessages.reduce((mx, m) => {
-          const t = (0, _roomsSlice.msgSortableMs)(m);
-          return t > mx ? t : mx;
+          const ts = (0, _roomsSlice.msgSortableMs)(m);
+          return ts > mx ? ts : mx;
         }, 0);
         onReadBoundaryChange?.(newestSeenTsRef.current);
       }
@@ -324,8 +922,11 @@ const MessageList = ({
 
   // Keep the badge in sync with messages that arrive while the user is
   // scrolled up. Count ONLY messages newer than the newest-seen snapshot
-  // — so loading older history (back-pagination) doesn't inflate it.
+  //, so loading older history (back-pagination) doesn't inflate it.
   (0, _react.useEffect)(() => {
+    if (windowActiveRef.current) {
+      return;
+    }
     if (isUserAtBottomRef.current) {
       return;
     }
@@ -336,10 +937,17 @@ const MessageList = ({
     const count = memoizedMessages.reduce((n, m) => (0, _roomsSlice.msgSortableMs)(m) > since ? n + 1 : n, 0);
     setUnreadWhileScrolledUp(count);
   }, [memoizedMessages, isUserAtBottom]);
-  const handleLayout = () => {
-    isUserAtBottomRef.current = true;
-    hasUserScrolledRef.current = false;
-    setIsUserAtBottom(true);
+  const handleLayout = event => {
+    const height = event?.nativeEvent?.layout?.height;
+    if (typeof height === 'number' && height > 0) {
+      viewportHeightRef.current = height;
+    }
+    if (!windowActiveRef.current) {
+      isUserAtBottomRef.current = true;
+      hasUserScrolledRef.current = false;
+      setIsUserAtBottom(true);
+      scheduleAutoFill();
+    }
   };
   const handleNewMessageIndicatorPress = () => {
     isUserAtBottomRef.current = true;
@@ -400,20 +1008,69 @@ const MessageList = ({
       initialNumToRender: 15,
       maxToRenderPerBatch: 10,
       windowSize: 7,
-      onEndReached: handleLoadMore,
+      onEndReached: windowActive ? handleStartReached : handleLoadMore,
+      onStartReached: windowActive ? handleStartReached : undefined,
       onScroll: handleScroll,
       onContentSizeChange: handleContentSizeChange,
-      onEndReachedThreshold: 0.1,
+      onScrollToIndexFailed: handleScrollToIndexFailed
+      // Prefetch well ahead of the viewport (screens, not pixels) so a
+      // normal scroll finds older history already there.
+      ,
+      onEndReachedThreshold: END_REACHED_THRESHOLD,
+      onStartReachedThreshold: END_REACHED_THRESHOLD
+      // In a jump window newer messages arrive at the near (offset 0) end:
+      // keep what the reader is looking at where it is instead of letting
+      // the content slide. The live list stays unanchored on purpose, it
+      // follows its own newest end (handleContentSizeChange).
+      ,
+      maintainVisibleContentPosition: windowActive ? {
+        minIndexForVisible: 0
+      } : undefined,
       scrollEventThrottle: 16,
       onLayout: handleLayout,
       inverted: true,
       keyboardShouldPersistTaps: "handled",
       keyboardDismissMode: config?.keepKeyboardOpenOnScroll ? 'none' : 'interactive',
       contentContainerStyle: styles.flatListContent,
-      ListFooterComponent: loading && memoizedMessages.length > 15 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loader.default, {
+      ListFooterComponent: (loading || isLoadingMore) && !windowActive && memoizedMessages.length > 15 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loader.default, {
         color: config?.colors?.primary
       }) : null
-    }), showNewMessageIndicator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    }), windowActive && windowLoading === 'older' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      testID: "history-loader-older",
+      pointerEvents: "none",
+      style: styles.loaderTop,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loader.default, {
+        size: 24,
+        color: config?.colors?.primary
+      })
+    }), windowActive && windowLoading === 'newer' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      testID: "history-loader-newer",
+      pointerEvents: "none",
+      style: styles.loaderBottom,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loader.default, {
+        size: 24,
+        color: config?.colors?.primary
+      })
+    }), windowActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      testID: "jump-to-latest",
+      accessibilityRole: "button",
+      accessibilityLabel: t('action.jumpToLatest'),
+      style: [styles.jumpToLatest, {
+        backgroundColor: (0, _getIconColor.getIconColor)(config),
+        shadowColor: theme.shadow
+      }],
+      onPress: exitWindow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArowDownIcon, {
+        color: theme.textOnPrimary,
+        width: 18,
+        height: 18
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.jumpToLatestText, {
+          color: theme.textOnPrimary
+        }],
+        children: t('action.jumpToLatest')
+      })]
+    }) : showNewMessageIndicator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
       style: [styles.newMessageIndicator, {
         backgroundColor: (0, _getIconColor.getIconColor)(config),
         shadowColor: theme.shadow
@@ -476,6 +1133,46 @@ const styles = _reactNative.StyleSheet.create({
     width: '100%',
     height: '100%'
   },
+  // Float over the list so showing or hiding them never moves the messages.
+  loaderTop: {
+    position: 'absolute',
+    top: 8,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    zIndex: 2
+  },
+  loaderBottom: {
+    position: 'absolute',
+    bottom: 8,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    zIndex: 2
+  },
+  jumpToLatest: {
+    position: 'absolute',
+    bottom: 20,
+    right: 20,
+    height: 40,
+    paddingHorizontal: 14,
+    borderRadius: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 4
+  },
+  jumpToLatestText: {
+    fontSize: 13,
+    fontWeight: '600'
+  },
   newMessageIndicator: {
     position: 'absolute',
     width: 40,