stream-chat-react-native-core 9.10.1 → 10.0.0-rc.1

package/lib/module/components/MessageList/MessageList.js

@@ -10,23 +10,28 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _useMarkRead = require("./hooks/useMarkRead");
 var _useMessageList2 = require("./hooks/useMessageList");
+var _useMessageListFocus2 = require("./hooks/useMessageListFocus");
+var _useMessageListLiveState = require("./hooks/useMessageListLiveState");
+var _useMessageListPagination = require("./hooks/useMessageListPagination");
+var _useOwnUnreadCount = require("./hooks/useOwnUnreadCount");
 var _useScrollToBottomAccessibilityAction = require("./hooks/useScrollToBottomAccessibilityAction");
 var _useShouldScrollToRecentOnNewOwnMessage = require("./hooks/useShouldScrollToRecentOnNewOwnMessage");
+var _useStickyHeaderDate2 = require("./hooks/useStickyHeaderDate");
+var _useUnreadNotificationVisibility = require("./hooks/useUnreadNotificationVisibility");
 var _InlineLoadingMoreIndicator = require("./InlineLoadingMoreIndicator");
 var _InlineLoadingMoreRecentIndicator = require("./InlineLoadingMoreRecentIndicator");
-var _InlineLoadingMoreRecentThreadIndicator = require("./InlineLoadingMoreRecentThreadIndicator");
 var _buildMessageListWithNeighbours = require("./utils/buildMessageListWithNeighbours");
 var _AttachmentPickerContext = require("../../contexts/attachmentPickerContext/AttachmentPickerContext");
 var _ChannelContext = require("../../contexts/channelContext/ChannelContext");
 var _ChatContext = require("../../contexts/chatContext/ChatContext");
 var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
-var _DebugContext = require("../../contexts/debugContext/DebugContext");
+var _usePendingUploadsEnabled = require("../../contexts/messageInputContext/hooks/usePendingUploadsEnabled");
 var _MessageInputContext = require("../../contexts/messageInputContext/MessageInputContext");
 var _MessageListItemContext = require("../../contexts/messageListItemContext/MessageListItemContext");
 var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
 var _OwnCapabilitiesContext = require("../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext");
-var _PaginatedMessageListContext = require("../../contexts/paginatedMessageListContext/PaginatedMessageListContext");
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
 var _hooks = require("../../hooks");
@@ -37,6 +42,7 @@ var _transitions = require("../../utils/animations/transitions");
 var _useIncomingMessageAnnouncements = require("../Accessibility/hooks/useIncomingMessageAnnouncements");
 var _MessageWrapper = require("../Message/MessageItemView/MessageWrapper");
 var _notificationFilters = require("../Notifications/notificationFilters");
+var _ThreadFooterComponent = require("../Thread/components/ThreadFooterComponent");
 var _UIComponents = require("../UIComponents");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["contentContainerStyle", "style"];
@@ -105,90 +111,44 @@ var useStyles = () => {
     }
   }), [backgroundCoreApp, container, contentContainer, listContainer, scrollToBottomButtonContainer, stickyHeaderContainer, unreadMessagesNotificationContainer, suggestionListContainer]);
 };
-var keyExtractor = derivedItem => {
-  var item = derivedItem.message;
-  if (item.id) {
-    return item.id;
-  }
-  if (item.created_at) {
-    return typeof item.created_at === 'string' ? item.created_at : item.created_at.toISOString();
-  }
-  return Date.now().toString();
-};
+var keyExtractor = (derivedItem, index) => (0, _buildMessageListWithNeighbours.getMessageListItemCacheKey)(derivedItem.message, index);
 var flatListViewabilityConfig = {
   viewAreaCoveragePercentThreshold: 1
 };
-var hasReadLastMessage = (channel, userId) => {
-  var _channel$state$latest, _channel$state$read$u;
-  var latestMessageIdInChannel = (_channel$state$latest = channel.state.latestMessages.slice(-1)[0]) == null ? void 0 : _channel$state$latest.id;
-  var lastReadMessageIdServer = (_channel$state$read$u = channel.state.read[userId]) == null ? void 0 : _channel$state$read$u.last_read_message_id;
-  return latestMessageIdInChannel === lastReadMessageIdServer;
-};
-var getPreviousLastMessage = (messages, newMessage) => {
-  if (!newMessage) return;
-  var previousLastMessage;
-  for (var i = messages.length - 1; i >= 0; i--) {
-    var msg = messages[i];
-    if (!(msg != null && msg.id)) break;
-    if (msg.id !== newMessage.id) {
-      previousLastMessage = msg;
-      break;
-    }
-  }
-  return previousLastMessage;
-};
 var messageInputHeightStoreSelector = state => ({
   height: state.height
 });
 var MessageListWithContext = props => {
-  var _client$user, _client$user5;
-  var LoadingMoreRecentIndicator = props.threadList ? _InlineLoadingMoreRecentThreadIndicator.InlineLoadingMoreRecentThreadIndicator : _InlineLoadingMoreRecentIndicator.InlineLoadingMoreRecentIndicator;
-  var allowSendBeforeAttachmentsUpload = props.allowSendBeforeAttachmentsUpload,
-    _props$animateLayout = props.animateLayout,
+  var _client$user, _client$user2;
+  var _props$animateLayout = props.animateLayout,
     animateLayout = _props$animateLayout === void 0 ? true : _props$animateLayout,
     attachmentPickerStore = props.attachmentPickerStore,
     additionalFlatListProps = props.additionalFlatListProps,
     channel = props.channel,
-    channelUnreadStateStore = props.channelUnreadStateStore,
     client = props.client,
     closePicker = props.closePicker,
     disabled = props.disabled,
     disableTypingIndicator = props.disableTypingIndicator,
     FlatList = props.FlatList,
-    _props$FooterComponen = props.FooterComponent,
-    FooterComponent = _props$FooterComponen === void 0 ? _InlineLoadingMoreIndicator.InlineLoadingMoreIndicator : _props$FooterComponen,
+    FooterComponentProp = props.FooterComponent,
     HeaderComponent = props.HeaderComponent,
     hideStickyDateHeader = props.hideStickyDateHeader,
     _props$inverted = props.inverted,
     inverted = _props$inverted === void 0 ? true : _props$inverted,
     _props$isLiveStreamin = props.isLiveStreaming,
     isLiveStreaming = _props$isLiveStreamin === void 0 ? false : _props$isLiveStreamin,
-    loadChannelAroundMessage = props.loadChannelAroundMessage,
-    loading = props.loading,
-    loadMore = props.loadMore,
-    loadMoreRecent = props.loadMoreRecent,
-    loadMoreRecentThread = props.loadMoreRecentThread,
-    loadMoreThread = props.loadMoreThread,
     markRead = props.markRead,
-    maximumMessageLimit = props.maximumMessageLimit,
     messageInputFloating = props.messageInputFloating,
     messageInputHeightStore = props.messageInputHeightStore,
     myMessageTheme = props.myMessageTheme,
+    pendingUploadsEnabled = props.pendingUploadsEnabled,
     noGroupByUser = props.noGroupByUser,
     onListScroll = props.onListScroll,
     onThreadSelect = props.onThreadSelect,
     readEvents = props.readEvents,
-    reloadChannel = props.reloadChannel,
-    setChannelUnreadState = props.setChannelUnreadState,
     setFlatListRef = props.setFlatListRef,
-    setTargetedMessage = props.setTargetedMessage,
-    targetedMessage = props.targetedMessage,
-    thread = props.thread,
-    threadInstance = props.threadInstance,
-    _props$threadList = props.threadList,
-    threadList = _props$threadList === void 0 ? false : _props$threadList,
-    hasMore = props.hasMore,
-    threadHasMore = props.threadHasMore;
+    thread = props.thread;
+  var FooterComponent = FooterComponentProp != null ? FooterComponentProp : thread ? _ThreadFooterComponent.ThreadFooterComponent : _InlineLoadingMoreIndicator.InlineLoadingMoreIndicator;
   var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
     EmptyStateIndicator = _useComponentsContext.EmptyStateIndicator,
     LoadingIndicator = _useComponentsContext.MessageListLoadingIndicator,
@@ -200,20 +160,16 @@ var MessageListWithContext = props => {
     TypingIndicatorContainer = _useComponentsContext.TypingIndicatorContainer,
     UnreadMessagesNotification = _useComponentsContext.UnreadMessagesNotification,
     AutoCompleteSuggestionList = _useComponentsContext.AutoCompleteSuggestionList;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isUnreadNotificationOpen = _useState2[0],
-    setIsUnreadNotificationOpen = _useState2[1];
   var _useTheme2 = (0, _ThemeContext.useTheme)(),
     theme = _useTheme2.theme;
   var styles = useStyles();
   var _useStateStore = (0, _useStateStore2.useStateStore)(messageInputHeightStore.store, messageInputHeightStoreSelector),
     messageInputHeight = _useStateStore.height;
+  var paginator = thread ? thread.messagePaginator : channel.messagePaginator;
   (0, _useIncomingMessageAnnouncements.useIncomingMessageAnnouncements)({
     activeThreadId: thread == null ? void 0 : thread.id,
     channel,
-    ownUserId: (_client$user = client.user) == null ? void 0 : _client$user.id,
-    threadList
+    ownUserId: (_client$user = client.user) == null ? void 0 : _client$user.id
   });
   var myMessageThemeString = (0, _react.useMemo)(() => JSON.stringify(myMessageTheme), [myMessageTheme]);
   var scheme = (0, _reactNative.useColorScheme)();
@@ -224,11 +180,42 @@ var MessageListWithContext = props => {
   }), [myMessageThemeString, scheme, theme]);
   var _useMessageList = (0, _useMessageList2.useMessageList)({
       isLiveStreaming,
-      threadList
+      paginator
     }),
+    maxLoadedItems = _useMessageList.maxLoadedItems,
     processedMessageList = _useMessageList.processedMessageList,
     rawMessageList = _useMessageList.rawMessageList,
     viewabilityChangedCallback = _useMessageList.viewabilityChangedCallback;
+  var _useMessageListPagina = (0, _useMessageListPagination.useMessageListPagination)(paginator),
+    loading = _useMessageListPagina.loading,
+    loadingMore = _useMessageListPagina.loadingMore,
+    loadingMoreRecent = _useMessageListPagina.loadingMoreRecent,
+    loadMore = _useMessageListPagina.loadMore,
+    loadMoreRecent = _useMessageListPagina.loadMoreRecent;
+  var _useMessageListFocus = (0, _useMessageListFocus2.useMessageListFocus)(paginator),
+    focusedMessageId = _useMessageListFocus.focusedMessageId,
+    focusToken = _useMessageListFocus.focusToken,
+    goToMessage = _useMessageListFocus.goToMessage;
+  var reportViewableMessages = (0, _useMessageListLiveState.useMessageListLiveState)({
+    channel,
+    markRead,
+    paginator,
+    thread,
+    userId: (_client$user2 = client.user) == null ? void 0 : _client$user2.id
+  });
+  var _useStickyHeaderDate = (0, _useStickyHeaderDate2.useStickyHeaderDate)(),
+    stickyHeaderDate = _useStickyHeaderDate.stickyHeaderDate,
+    updateStickyHeaderDate = _useStickyHeaderDate.updateStickyHeaderDate;
+  var _useUnreadNotificatio = (0, _useUnreadNotificationVisibility.useUnreadNotificationVisibility)({
+      attachmentPickerStore,
+      channel,
+      markRead,
+      readEvents,
+      userId: client.userID
+    }),
+    isUnreadNotificationOpen = _useUnreadNotificatio.isUnreadNotificationOpen,
+    onUnreadNotificationClose = _useUnreadNotificatio.onUnreadNotificationClose,
+    updateUnreadNotification = _useUnreadNotificatio.updateUnreadNotification;
   var previousDerivedItemsRef = (0, _react.useRef)(undefined);
   var processedMessageListWithNeighbors = (0, _react.useMemo)(() => {
     if (!previousDerivedItemsRef.current) {
@@ -252,16 +239,12 @@ var MessageListWithContext = props => {
       nextMessage: nextMessage
     });
   });
-  var messageListLengthBeforeUpdate = (0, _react.useRef)(0);
-  var messageListLengthAfterUpdate = processedMessageList.length;
-  var topMessageBeforeUpdate = (0, _react.useRef)(undefined);
   var latestNonCurrentMessageBeforeUpdateRef = (0, _react.useRef)(undefined);
-  var topMessageAfterUpdate = rawMessageList[0];
   var shouldScrollToRecentOnNewOwnMessageRef = (0, _useShouldScrollToRecentOnNewOwnMessage.useShouldScrollToRecentOnNewOwnMessage)(rawMessageList, client.userID);
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    autoscrollToRecent = _useState4[0],
-    setAutoscrollToRecent = _useState4[1];
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    autoscrollToRecent = _useState2[0],
+    setAutoscrollToRecent = _useState2[1];
   var minIndexForVisible = Math.min(1, processedMessageList.length);
   var isOverlayOpen = (0, _stateStore.useHasActiveId)();
   var autoscrollToTopThreshold = autoscrollToRecent && !isOverlayOpen ? isLiveStreaming ? 300 : 10 : undefined;
@@ -269,83 +252,16 @@ var MessageListWithContext = props => {
     autoscrollToTopThreshold,
     minIndexForVisible
   }), [autoscrollToTopThreshold, minIndexForVisible]);
-  var onStartReachedTracker = (0, _react.useRef)({});
-  var onEndReachedTracker = (0, _react.useRef)({});
-  var onStartReachedInPromise = (0, _react.useRef)(null);
-  var onEndReachedInPromise = (0, _react.useRef)(null);
   var flatListRef = (0, _react.useRef)(null);
-  var channelResyncScrollSet = (0, _react.useRef)(true);
   var scrollToDebounceTimeoutRef = (0, _react.useRef)(undefined);
-  var onScrollEventTimeoutRef = (0, _react.useRef)(undefined);
-  var messageIdLastScrolledToRef = (0, _react.useRef)(undefined);
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    hasMoved = _useState6[0],
-    setHasMoved = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    scrollToBottomButtonVisible = _useState8[0],
-    setScrollToBottomButtonVisible = _useState8[1];
-  var _useState9 = (0, _react.useState)(),
-    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
-    stickyHeaderDate = _useState0[0],
-    setStickyHeaderDate = _useState0[1];
-  var stickyHeaderDateRef = (0, _react.useRef)(undefined);
-  var channelRef = (0, _react.useRef)(channel);
-  channelRef.current = channel;
-  var updateStickyHeaderDateIfNeeded = (0, _hooks.useStableCallback)(viewableItems => {
-    var _viewableItems$item;
-    if (!viewableItems.length) {
-      return;
-    }
-    var lastMessage = (_viewableItems$item = viewableItems[viewableItems.length - 1].item) == null ? void 0 : _viewableItems$item.message;
-    if (lastMessage) {
-      var _stickyHeaderDateRef$;
-      if (!channel.state.messagePagination.hasPrev && processedMessageList[processedMessageList.length - 1].id === lastMessage.id) {
-        setStickyHeaderDate(undefined);
-        return;
-      }
-      var isMessageTypeDeleted = lastMessage.type === 'deleted';
-      if (lastMessage != null && lastMessage.created_at && !isMessageTypeDeleted && typeof lastMessage.created_at !== 'string' && lastMessage.created_at.toDateString() !== ((_stickyHeaderDateRef$ = stickyHeaderDateRef.current) == null ? void 0 : _stickyHeaderDateRef$.toDateString())) {
-        stickyHeaderDateRef.current = lastMessage.created_at;
-        setStickyHeaderDate(lastMessage.created_at);
-      }
-    }
-  });
-  var updateStickyUnreadIndicator = (0, _hooks.useStableCallback)(viewableItems => {
-    var channelUnreadState = channelUnreadStateStore.channelUnreadState;
-    var lastReadMessageId = channelUnreadState == null ? void 0 : channelUnreadState.last_read_message_id;
-    var lastReadMessageVisible = viewableItems.some(item => item.item.message.id === lastReadMessageId);
-    var unreadNotificationSupported = readEvents || client.options.isLocalUnreadCountEnabled;
-    if (!viewableItems.length || !unreadNotificationSupported || lastReadMessageVisible || attachmentPickerStore.state.getLatestValue().selectedPicker === 'images') {
-      setIsUnreadNotificationOpen(false);
-      return;
-    }
-    var lastItem = viewableItems[viewableItems.length - 1].item;
-    if (lastItem) {
-      var _channelUnreadState$l, _lastItemMessage$user;
-      var lastItemMessage = lastItem.message;
-      var lastItemCreatedAt = lastItemMessage.created_at;
-      var unreadIndicatorDate = channelUnreadState == null || (_channelUnreadState$l = channelUnreadState.last_read) == null ? void 0 : _channelUnreadState$l.getTime();
-      var lastItemDate = lastItemCreatedAt.getTime();
-      if (!channel.state.messagePagination.hasPrev && processedMessageList[processedMessageList.length - 1].id === lastItemMessage.id) {
-        setIsUnreadNotificationOpen(false);
-        return;
-      }
-      if (viewableItems.length === 1 && channel.countUnread() === 0 && ((_lastItemMessage$user = lastItemMessage.user) == null ? void 0 : _lastItemMessage$user.id) === client.userID) {
-        setIsUnreadNotificationOpen(false);
-        return;
-      }
-      if (unreadIndicatorDate && lastItemDate > unreadIndicatorDate) {
-        setIsUnreadNotificationOpen(true);
-      } else {
-        setIsUnreadNotificationOpen(false);
-      }
-    }
-  });
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    scrollToBottomButtonVisible = _useState4[0],
+    setScrollToBottomButtonVisible = _useState4[1];
   var unstableOnViewableItemsChanged = ({
     viewableItems
   }) => {
+    var _processedMessageList;
     viewabilityChangedCallback({
       inverted,
       viewableItems
@@ -353,10 +269,23 @@ var MessageListWithContext = props => {
     if (!viewableItems) {
       return;
     }
-    if (!hideStickyDateHeader) {
-      updateStickyHeaderDateIfNeeded(viewableItems);
+    var viewableMessages = viewableItems.map(viewable => viewable.item.message);
+    var topVisibleMessage = viewableMessages[viewableMessages.length - 1];
+    var isAtOldestMessage = topVisibleMessage !== undefined && !(paginator != null && paginator.hasMoreTail) && ((_processedMessageList = processedMessageList[processedMessageList.length - 1]) == null ? void 0 : _processedMessageList.id) === topVisibleMessage.id;
+    if (!hideStickyDateHeader && topVisibleMessage) {
+      updateStickyHeaderDate({
+        isAtOldestMessage,
+        topVisibleMessage
+      });
+    }
+    if (!thread) {
+      updateUnreadNotification({
+        isAtOldestMessage,
+        topVisibleMessage,
+        viewableMessages
+      });
     }
-    updateStickyUnreadIndicator(viewableItems);
+    reportViewableMessages(viewableMessages);
   };
   var onViewableItemsChanged = (0, _react.useRef)(unstableOnViewableItemsChanged);
   onViewableItemsChanged.current = unstableOnViewableItemsChanged;
@@ -367,95 +296,22 @@ var MessageListWithContext = props => {
       viewableItems
     });
   }, []);
-  var resetPaginationTrackersRef = (0, _react.useRef)(() => {
-    onStartReachedTracker.current = {};
-    onEndReachedTracker.current = {};
-  });
   (0, _react.useEffect)(() => {
     if (disabled) {
       setScrollToBottomButtonVisible(false);
     }
   }, [disabled]);
   (0, _react.useEffect)(() => {
-    var shouldMarkRead = () => {
-      var _client$user2, _client$user3;
-      var channelUnreadState = channelUnreadStateStore.channelUnreadState;
-      return !(channelUnreadState != null && channelUnreadState.first_unread_message_id) && !scrollToBottomButtonVisible && ((_client$user2 = client.user) == null ? void 0 : _client$user2.id) && !hasReadLastMessage(channel, (_client$user3 = client.user) == null ? void 0 : _client$user3.id);
-    };
-    var handleEvent = function () {
-      var _ref = (0, _asyncToGenerator2.default)(function* (event) {
-        var _event$message, _event$message2, _event$message3, _client$user4;
-        var mainChannelUpdated = !((_event$message = event.message) != null && _event$message.parent_id) || ((_event$message2 = event.message) == null ? void 0 : _event$message2.show_in_channel);
-        var isMyOwnMessage = ((_event$message3 = event.message) == null || (_event$message3 = _event$message3.user) == null ? void 0 : _event$message3.id) === ((_client$user4 = client.user) == null ? void 0 : _client$user4.id);
-        var channelUnreadState = channelUnreadStateStore.channelUnreadState;
-        if ((scrollToBottomButtonVisible || channelUnreadState != null && channelUnreadState.first_unread_message_id) && !isMyOwnMessage) {
-          var _channelUnreadState$u, _channelUnreadState$l2;
-          var previousUnreadCount = (_channelUnreadState$u = channelUnreadState == null ? void 0 : channelUnreadState.unread_messages) != null ? _channelUnreadState$u : 0;
-          var previousLastMessage = getPreviousLastMessage(channel.state.messages, event.message);
-          setChannelUnreadState({
-            ...channelUnreadState,
-            last_read: (_channelUnreadState$l2 = channelUnreadState == null ? void 0 : channelUnreadState.last_read) != null ? _channelUnreadState$l2 : previousUnreadCount === 0 && previousLastMessage != null && previousLastMessage.created_at ? new Date(previousLastMessage.created_at) : new Date(0),
-            unread_messages: previousUnreadCount + 1
-          });
-        } else if (mainChannelUpdated && shouldMarkRead()) {
-          yield markRead();
-        }
-      });
-      return function handleEvent(_x) {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    var listener = channel.on('message.new', handleEvent);
-    return () => {
-      listener == null || listener.unsubscribe();
-    };
-  }, [channel, channelUnreadStateStore, (_client$user5 = client.user) == null ? void 0 : _client$user5.id, markRead, scrollToBottomButtonVisible, setChannelUnreadState, threadList]);
-  (0, _react.useEffect)(() => {
-    var isMessageRemovedFromMessageList = messageListLengthAfterUpdate < messageListLengthBeforeUpdate.current;
-    var scrollToBottomIfNeeded = () => {
-      var _topMessageBeforeUpda;
-      if (!client || !channel || rawMessageList.length === 0) {
-        return;
-      }
-      if (isMessageRemovedFromMessageList || (_topMessageBeforeUpda = topMessageBeforeUpdate.current) != null && _topMessageBeforeUpda.created_at && topMessageAfterUpdate != null && topMessageAfterUpdate.created_at && topMessageBeforeUpdate.current.created_at < topMessageAfterUpdate.created_at) {
-        channelResyncScrollSet.current = false;
-        setScrollToBottomButtonVisible(false);
-        resetPaginationTrackersRef.current();
-        setTimeout(() => {
-          var _flatListRef$current;
-          (_flatListRef$current = flatListRef.current) == null || _flatListRef$current.scrollToOffset({
-            offset: 0
-          });
-        }, WAIT_FOR_SCROLL_TIMEOUT);
-        setTimeout(() => {
-          channelResyncScrollSet.current = true;
-          if (channel.countUnread() > 0) {
-            markRead();
-          }
-        }, 500);
-      }
-    };
-    if (threadList || isMessageRemovedFromMessageList) {
-      if (maximumMessageLimit) {
-        resetPaginationTrackersRef.current();
-      } else {
-        scrollToBottomIfNeeded();
-      }
-    }
-    messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
-    topMessageBeforeUpdate.current = topMessageAfterUpdate;
-  }, [threadList, messageListLengthAfterUpdate, topMessageAfterUpdate == null ? void 0 : topMessageAfterUpdate.id, maximumMessageLimit]);
-  (0, _react.useEffect)(() => {
-    if (threadList) {
+    if (thread) {
       setAutoscrollToRecent(true);
       return;
     }
-    if (!processedMessageList.length) {
+    if (!processedMessageList.length || !paginator) {
       return;
     }
-    var notLatestSet = channel.state.messages !== channel.state.latestMessages;
-    if (notLatestSet) {
-      latestNonCurrentMessageBeforeUpdateRef.current = channel.state.latestMessages[channel.state.latestMessages.length - 1];
+    if (paginator.hasMoreHead) {
+      var _paginator$lastMessag;
+      latestNonCurrentMessageBeforeUpdateRef.current = (_paginator$lastMessag = paginator.lastMessage) != null ? _paginator$lastMessag : undefined;
       setAutoscrollToRecent(false);
       setScrollToBottomButtonVisible(true);
       return;
@@ -467,83 +323,47 @@ var MessageListWithContext = props => {
       setAutoscrollToRecent(true);
       return;
     }
-    var didMergeMessageSetsWithNoUpdates = (latestNonCurrentMessageBeforeUpdate == null ? void 0 : latestNonCurrentMessageBeforeUpdate.id) === latestCurrentMessageAfterUpdate.id;
-    var shouldForceScrollToRecent = !didMergeMessageSetsWithNoUpdates || processedMessageList.length - messageListLengthBeforeUpdate.current > 0;
-    if (maximumMessageLimit && shouldForceScrollToRecent || !maximumMessageLimit) {
+    var shouldForceScrollToRecent = (latestNonCurrentMessageBeforeUpdate == null ? void 0 : latestNonCurrentMessageBeforeUpdate.id) !== latestCurrentMessageAfterUpdate.id;
+    if (maxLoadedItems && shouldForceScrollToRecent || !maxLoadedItems) {
       setAutoscrollToRecent(shouldForceScrollToRecent);
     }
-    if (!didMergeMessageSetsWithNoUpdates) {
+    if (shouldForceScrollToRecent) {
       var shouldScrollToRecentOnNewOwnMessage = shouldScrollToRecentOnNewOwnMessageRef.current();
       if (shouldScrollToRecentOnNewOwnMessage) {
         setTimeout(() => {
-          var _flatListRef$current2;
-          (_flatListRef$current2 = flatListRef.current) == null || _flatListRef$current2.scrollToOffset({
+          var _flatListRef$current;
+          (_flatListRef$current = flatListRef.current) == null || _flatListRef$current.scrollToOffset({
             animated: true,
             offset: 0
           });
         }, WAIT_FOR_SCROLL_TIMEOUT);
       }
     }
-  }, [channel, threadList, processedMessageList, shouldScrollToRecentOnNewOwnMessageRef, maximumMessageLimit]);
-  var goToMessage = (0, _hooks.useStableCallback)(function () {
-    var _ref2 = (0, _asyncToGenerator2.default)(function* (messageId) {
-      var indexOfParentInMessageList = processedMessageList.findIndex(message => (message == null ? void 0 : message.id) === messageId);
-      try {
-        if (indexOfParentInMessageList === -1) {
-          yield loadChannelAroundMessage({
-            messageId
-          });
-          return;
-        } else {
-          if (!flatListRef.current) {
-            return;
-          }
-          clearTimeout(failScrollTimeoutId.current);
-          scrollToIndexFailedRetryCountRef.current = 0;
-          messageIdLastScrolledToRef.current = messageId;
-          setTargetedMessage(messageId);
-          flatListRef.current.scrollToIndex({
-            animated: true,
-            index: indexOfParentInMessageList,
-            viewPosition: 0.5
-          });
-          return;
-        }
-      } catch (e) {
-        console.warn('Error while scrolling to message', e);
-      }
-    });
-    return function (_x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }());
+  }, [paginator, thread, processedMessageList, shouldScrollToRecentOnNewOwnMessageRef, maxLoadedItems]);
+  var lastFocusScrollTokenRef = (0, _react.useRef)(undefined);
   (0, _react.useEffect)(() => {
-    if (!targetedMessage) {
+    if (!focusedMessageId || focusToken === lastFocusScrollTokenRef.current) {
       return;
     }
-    scrollToDebounceTimeoutRef.current = setTimeout((0, _asyncToGenerator2.default)(function* () {
-      var indexOfParentInMessageList = processedMessageList.findIndex(message => (message == null ? void 0 : message.id) === targetedMessage);
-      if (indexOfParentInMessageList === -1) {
-        yield loadChannelAroundMessage({
-          messageId: targetedMessage,
-          setTargetedMessage
-        });
-      } else {
-        if (!flatListRef.current) {
-          return;
-        }
-        clearTimeout(scrollToDebounceTimeoutRef.current);
-        clearTimeout(failScrollTimeoutId.current);
-        scrollToIndexFailedRetryCountRef.current = 0;
-        flatListRef.current.scrollToIndex({
-          animated: true,
-          index: indexOfParentInMessageList,
-          viewPosition: 0.5
-        });
-        setTargetedMessage(undefined);
+    scrollToDebounceTimeoutRef.current = setTimeout(() => {
+      var indexOfParentInMessageList = processedMessageList.findIndex(message => (message == null ? void 0 : message.id) === focusedMessageId);
+      if (indexOfParentInMessageList === -1 || !flatListRef.current) {
+        return;
       }
-    }), WAIT_FOR_SCROLL_TIMEOUT);
-  }, [targetedMessage]);
+      clearTimeout(scrollToDebounceTimeoutRef.current);
+      clearTimeout(failScrollTimeoutId.current);
+      scrollToIndexFailedRetryCountRef.current = 0;
+      lastFocusScrollTokenRef.current = focusToken;
+      flatListRef.current.scrollToIndex({
+        animated: true,
+        index: indexOfParentInMessageList,
+        viewPosition: 0.5
+      });
+      paginator == null || paginator.scheduleMessageFocusSignalClear({
+        token: focusToken
+      });
+    }, WAIT_FOR_SCROLL_TIMEOUT);
+  }, [paginator, focusToken, focusedMessageId, processedMessageList]);
   var setNativeScrollability = (0, _hooks.useStableCallback)(value => {
     if (flatListRef.current) {
       flatListRef.current.setNativeProps({
@@ -558,83 +378,32 @@ var MessageListWithContext = props => {
     onThreadSelect,
     setNativeScrollability
   }), [goToMessage, modifiedTheme, noGroupByUser, onThreadSelect, setNativeScrollability]);
-  var maybeCallOnStartReached = (0, _hooks.useStableCallback)((0, _asyncToGenerator2.default)(function* () {
-    if (processedMessageList != null && processedMessageList.length && onStartReachedTracker.current[processedMessageList.length]) {
-      return;
-    }
-    if (processedMessageList != null && processedMessageList.length) {
-      onStartReachedTracker.current[processedMessageList.length] = true;
-    }
-    var callback = () => {
-      onStartReachedInPromise.current = null;
-      return Promise.resolve();
-    };
-    var onError = () => {
-      setTimeout(() => {
-        onStartReachedTracker.current = {};
-      }, 2000);
-    };
-    if (onEndReachedInPromise.current) {
-      yield onEndReachedInPromise.current;
-    }
-    onStartReachedInPromise.current = (threadList && !!threadInstance && loadMoreRecentThread ? loadMoreRecentThread({}) : loadMoreRecent()).then(callback).catch(onError);
-  }));
-  var maybeCallOnEndReached = (0, _hooks.useStableCallback)((0, _asyncToGenerator2.default)(function* () {
-    var shouldQuery = threadList && threadHasMore || !threadList && hasMore;
-    if (processedMessageList != null && processedMessageList.length && onEndReachedTracker.current[processedMessageList.length] || !shouldQuery) {
-      return;
-    }
-    if (processedMessageList != null && processedMessageList.length) {
-      onEndReachedTracker.current[processedMessageList.length] = true;
-    }
-    var callback = () => {
-      onEndReachedInPromise.current = null;
-      return Promise.resolve();
-    };
-    var onError = () => {
-      setTimeout(() => {
-        onEndReachedTracker.current = {};
-      }, 2000);
-    };
-    if (onStartReachedInPromise.current) {
-      yield onStartReachedInPromise.current;
-    }
-    onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore()).then(callback).catch(onError);
-  }));
   var onUserScrollEvent = (0, _hooks.useStableCallback)(event => {
     var nativeEvent = event.nativeEvent;
-    clearTimeout(onScrollEventTimeoutRef.current);
     var offset = nativeEvent.contentOffset.y;
     var visibleLength = nativeEvent.layoutMeasurement.height;
     var contentLength = nativeEvent.contentSize.height;
-    if (!channel || !channelResyncScrollSet.current) {
-      return;
-    }
     var isScrollAtStart = offset < 100;
     var isScrollAtEnd = contentLength - visibleLength - offset < 100;
     if (isScrollAtStart) {
-      maybeCallOnStartReached();
+      loadMoreRecent();
     }
     if (isScrollAtEnd) {
-      maybeCallOnEndReached();
+      loadMore();
     }
   });
   var handleScroll = (0, _hooks.useStableCallback)(event => {
     var messageListHasMessages = processedMessageList.length > 0;
     var offset = event.nativeEvent.contentOffset.y;
     var isScrollAtBottom = offset <= messageInputHeight;
-    var notLatestSet = channel.state.messages !== channel.state.latestMessages;
-    var showScrollToBottomButton = messageListHasMessages && (!threadList && notLatestSet || !isScrollAtBottom);
-    setScrollToBottomButtonVisible(showScrollToBottomButton);
+    setScrollToBottomButtonVisible(messageListHasMessages && ((paginator == null ? void 0 : paginator.hasMoreHead) || !isScrollAtBottom));
     if (onListScroll) {
       onListScroll(event);
     }
   });
   var goToNewMessages = (0, _hooks.useStableCallback)((0, _asyncToGenerator2.default)(function* () {
-    var isNotLatestSet = channel.state.messages !== channel.state.latestMessages;
-    if (isNotLatestSet) {
-      resetPaginationTrackersRef.current();
-      yield reloadChannel();
+    if (paginator != null && paginator.hasMoreHead) {
+      yield paginator.jumpToTheLatestMessage();
     } else if (flatListRef.current) {
       flatListRef.current.scrollToOffset({
         animated: true,
@@ -642,11 +411,14 @@ var MessageListWithContext = props => {
       });
     }
     setScrollToBottomButtonVisible(false);
+    if (thread) {
+      return;
+    }
     yield markRead({
       updateChannelUnreadState: false
     });
   }));
-  var scrollToBottomUnreadCount = scrollToBottomButtonVisible && !threadList ? channel == null ? void 0 : channel.countUnread() : undefined;
+  var scrollToBottomUnreadCount = (0, _useOwnUnreadCount.useOwnUnreadCount)(scrollToBottomButtonVisible && !thread ? channel : undefined);
   var _useScrollToBottomAcc = (0, _useScrollToBottomAccessibilityAction.useScrollToBottomAccessibilityAction)({
       accessibilityActions: additionalFlatListProps == null ? void 0 : additionalFlatListProps.accessibilityActions,
       onAccessibilityAction: additionalFlatListProps == null ? void 0 : additionalFlatListProps.onAccessibilityAction,
@@ -664,15 +436,12 @@ var MessageListWithContext = props => {
     }
     failScrollTimeoutId.current = setTimeout(() => {
       try {
-        var _flatListRef$current3;
-        (_flatListRef$current3 = flatListRef.current) == null || _flatListRef$current3.scrollToIndex({
+        var _flatListRef$current2;
+        (_flatListRef$current2 = flatListRef.current) == null || _flatListRef$current2.scrollToIndex({
           animated: true,
           index: info.index,
           viewPosition: 0.5
         });
-        if (messageIdLastScrolledToRef.current) {
-          setTargetedMessage(messageIdLastScrolledToRef.current);
-        }
         scrollToIndexFailedRetryCountRef.current = 0;
       } catch (e) {
         if (!onScrollToIndexFailedRef.current || scrollToIndexFailedRetryCountRef.current > MAX_RETRIES_AFTER_SCROLL_FAILURE) {
@@ -690,37 +459,12 @@ var MessageListWithContext = props => {
       closePicker();
     }
   });
-  var onScrollBeginDrag = (0, _hooks.useStableCallback)(event => {
-    !hasMoved && attachmentPickerStore.state.getLatestValue().selectedPicker && setHasMoved(true);
-    onUserScrollEvent(event);
-  });
-  var onScrollEndDrag = (0, _hooks.useStableCallback)(event => {
-    hasMoved && attachmentPickerStore.state.getLatestValue().selectedPicker && setHasMoved(false);
-    onUserScrollEvent(event);
-  });
   var refCallback = (0, _hooks.useStableCallback)(ref => {
     flatListRef.current = ref;
     if (setFlatListRef) {
       setFlatListRef(ref);
     }
   });
-  var onUnreadNotificationClose = (0, _hooks.useStableCallback)((0, _asyncToGenerator2.default)(function* () {
-    yield markRead();
-    setIsUnreadNotificationOpen(false);
-  }));
-  var debugRef = (0, _DebugContext.useDebugContext)();
-  var isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;
-  if (isDebugModeEnabled) {
-    if (debugRef.current.setEventType) {
-      debugRef.current.setEventType('send');
-    }
-    if (debugRef.current.setSendEventParams) {
-      debugRef.current.setSendEventParams({
-        action: thread ? 'ThreadList' : 'Messages',
-        data: processedMessageList
-      });
-    }
-  }
   var additionalFlatListPropsExcludingStyle;
   if (additionalFlatListProps) {
     var contentContainerStyle = additionalFlatListProps.contentContainerStyle,
@@ -739,12 +483,12 @@ var MessageListWithContext = props => {
   var viewportHeightRef = (0, _react.useRef)(undefined);
   var debouncedPrefillMessages = (0, _react.useMemo)(() => (0, _debounce.default)((viewportHeight, contentHeight) => {
     if (viewportHeight >= contentHeight) {
-      maybeCallOnEndReached();
+      loadMore();
     }
   }, 500, {
     leading: false,
     trailing: true
-  }), [maybeCallOnEndReached]);
+  }), [loadMore]);
   var onContentSizeChange = (0, _hooks.useStableCallback)((width, height) => {
     var _viewportHeightRef$cu;
     if (additionalFlatListProps != null && additionalFlatListProps.onContentSizeChange) {
@@ -765,16 +509,21 @@ var MessageListWithContext = props => {
     }
     viewportHeightRef.current = nextViewportHeight;
   });
+  var ListFooterComponent = (0, _react.useCallback)(() => (0, _jsxRuntime.jsx)(FooterComponent, {
+    loadingMore: loadingMore
+  }), [FooterComponent, loadingMore]);
   var ListHeaderComponent = (0, _react.useCallback)(() => {
     if (HeaderComponent) {
       return (0, _jsxRuntime.jsx)(HeaderComponent, {});
     }
     return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [(0, _jsxRuntime.jsx)(LoadingMoreRecentIndicator, {}), !disableTypingIndicator && TypingIndicator && (0, _jsxRuntime.jsx)(TypingIndicatorContainer, {
+      children: [(0, _jsxRuntime.jsx)(_InlineLoadingMoreRecentIndicator.InlineLoadingMoreRecentIndicator, {
+        loadingMoreRecent: loadingMoreRecent
+      }), !disableTypingIndicator && TypingIndicator && (0, _jsxRuntime.jsx)(TypingIndicatorContainer, {
         children: (0, _jsxRuntime.jsx)(TypingIndicator, {})
       })]
     });
-  }, [HeaderComponent, LoadingMoreRecentIndicator, TypingIndicator, TypingIndicatorContainer, disableTypingIndicator]);
+  }, [HeaderComponent, loadingMoreRecent, TypingIndicator, TypingIndicatorContainer, disableTypingIndicator]);
   if (!ListComponent) {
     return null;
   }
@@ -801,11 +550,10 @@ var MessageListWithContext = props => {
         layout: _transitions.transitions.layout200,
         contentContainerStyle: flatListContentContainerStyle,
         data: processedMessageListWithNeighbors,
-        extraData: disabled,
         inverted: inverted,
         keyboardShouldPersistTaps: "handled",
         keyExtractor: keyExtractor,
-        ListFooterComponent: FooterComponent,
+        ListFooterComponent: ListFooterComponent,
         ListHeaderComponent: ListHeaderComponent,
         maintainVisibleContentPosition: maintainVisibleContentPosition,
         maxToRenderPerBatch: 30,
@@ -813,8 +561,8 @@ var MessageListWithContext = props => {
         onLayout: onLayout,
         onMomentumScrollEnd: onUserScrollEvent,
         onScroll: handleScroll,
-        onScrollBeginDrag: onScrollBeginDrag,
-        onScrollEndDrag: onScrollEndDrag,
+        onScrollBeginDrag: onUserScrollEvent,
+        onScrollEndDrag: onUserScrollEvent,
         onScrollToIndexFailed: onScrollToIndexFailedRef.current,
         onTouchEnd: dismissImagePicker,
         onViewableItemsChanged: stableOnViewableItemsChanged,
@@ -835,7 +583,7 @@ var MessageListWithContext = props => {
       accessible: false,
       importantForAccessibility: "no-hide-descendants",
       style: styles.stickyHeaderContainer,
-      children: messageListLengthAfterUpdate && StickyHeader ? (0, _jsxRuntime.jsx)(StickyHeader, {
+      children: processedMessageList.length > 0 && StickyHeader ? (0, _jsxRuntime.jsx)(StickyHeader, {
         date: stickyHeaderDate
       }) : null
     }), scrollToBottomButtonVisible ? (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
@@ -845,14 +593,13 @@ var MessageListWithContext = props => {
       }, styles.scrollToBottomButtonContainer],
       children: (0, _jsxRuntime.jsx)(ScrollToBottomButton, {
         onPress: goToNewMessages,
-        showNotification: scrollToBottomButtonVisible,
-        unreadCount: scrollToBottomUnreadCount
+        showNotification: scrollToBottomButtonVisible
       })
-    }) : null, (0, _jsxRuntime.jsx)(NetworkDownIndicator, {}), isUnreadNotificationOpen && !threadList ? (0, _jsxRuntime.jsx)(_reactNative.View, {
+    }) : null, (0, _jsxRuntime.jsx)(NetworkDownIndicator, {}), isUnreadNotificationOpen && !thread ? (0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.unreadMessagesNotificationContainer,
       children: (0, _jsxRuntime.jsx)(UnreadMessagesNotification, {
-        onCloseHandler: onUnreadNotificationClose,
-        channelUnreadStateStore: channelUnreadStateStore
+        markRead: markRead,
+        onCloseHandler: onUnreadNotificationClose
       })
     }) : null, (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
       layout: _transitions.transitions.layout200,
@@ -866,7 +613,7 @@ var MessageListWithContext = props => {
       })
     }), (0, _jsxRuntime.jsx)(NotificationList, {
       bottomOffset: messageInputFloating ? messageInputHeight + 16 : undefined,
-      filter: allowSendBeforeAttachmentsUpload ? _notificationFilters.excludeCanceledUploadNotifications : undefined
+      filter: pendingUploadsEnabled ? _notificationFilters.excludeCanceledUploadNotifications : undefined
     })]
   });
 };
@@ -876,22 +623,10 @@ var MessageList = props => {
     attachmentPickerStore = _useAttachmentPickerC.attachmentPickerStore;
   var _useChannelContext = (0, _ChannelContext.useChannelContext)(),
     channel = _useChannelContext.channel,
-    channelUnreadStateStore = _useChannelContext.channelUnreadStateStore,
     disabled = _useChannelContext.disabled,
     enableMessageGroupingByUser = _useChannelContext.enableMessageGroupingByUser,
-    error = _useChannelContext.error,
-    hideStickyDateHeader = _useChannelContext.hideStickyDateHeader,
-    highlightedMessageId = _useChannelContext.highlightedMessageId,
-    loadChannelAroundMessage = _useChannelContext.loadChannelAroundMessage,
-    loading = _useChannelContext.loading,
-    maximumMessageLimit = _useChannelContext.maximumMessageLimit,
-    markRead = _useChannelContext.markRead,
-    reloadChannel = _useChannelContext.reloadChannel,
-    scrollToFirstUnreadThreshold = _useChannelContext.scrollToFirstUnreadThreshold,
-    setChannelUnreadState = _useChannelContext.setChannelUnreadState,
-    setTargetedMessage = _useChannelContext.setTargetedMessage,
-    targetedMessage = _useChannelContext.targetedMessage,
-    threadList = _useChannelContext.threadList;
+    hideStickyDateHeader = _useChannelContext.hideStickyDateHeader;
+  var markRead = (0, _useMarkRead.useMarkRead)(channel);
   var _useChatContext = (0, _ChatContext.useChatContext)(),
     client = _useChatContext.client;
   var _useOwnCapabilitiesCo = (0, _OwnCapabilitiesContext.useOwnCapabilitiesContext)(),
@@ -899,59 +634,29 @@ var MessageList = props => {
   var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
     disableTypingIndicator = _useMessagesContext.disableTypingIndicator,
     FlatList = _useMessagesContext.FlatList,
-    myMessageTheme = _useMessagesContext.myMessageTheme,
-    shouldShowUnreadUnderlay = _useMessagesContext.shouldShowUnreadUnderlay;
+    myMessageTheme = _useMessagesContext.myMessageTheme;
+  var pendingUploadsEnabled = (0, _usePendingUploadsEnabled.usePendingUploadsEnabled)();
   var _useMessageInputConte = (0, _MessageInputContext.useMessageInputContext)(),
-    allowSendBeforeAttachmentsUpload = _useMessageInputConte.allowSendBeforeAttachmentsUpload,
     messageInputFloating = _useMessageInputConte.messageInputFloating,
     messageInputHeightStore = _useMessageInputConte.messageInputHeightStore;
-  var _usePaginatedMessageL = (0, _PaginatedMessageListContext.usePaginatedMessageListContext)(),
-    loadMore = _usePaginatedMessageL.loadMore,
-    loadMoreRecent = _usePaginatedMessageL.loadMoreRecent,
-    hasMore = _usePaginatedMessageL.hasMore;
   var _useThreadContext = (0, _ThreadContext.useThreadContext)(),
-    loadMoreRecentThread = _useThreadContext.loadMoreRecentThread,
-    loadMoreThread = _useThreadContext.loadMoreThread,
-    threadHasMore = _useThreadContext.threadHasMore,
-    thread = _useThreadContext.thread,
-    threadInstance = _useThreadContext.threadInstance;
+    thread = _useThreadContext.thread;
   return (0, _jsxRuntime.jsx)(MessageListWithContext, {
-    allowSendBeforeAttachmentsUpload,
     attachmentPickerStore,
     channel,
-    channelUnreadStateStore,
     client,
     closePicker,
     disabled,
     disableTypingIndicator,
-    enableMessageGroupingByUser,
-    error,
     FlatList,
     hideStickyDateHeader,
-    highlightedMessageId,
-    loadChannelAroundMessage,
-    loading,
-    loadMore,
-    loadMoreRecent,
-    loadMoreRecentThread,
-    loadMoreThread,
     markRead,
-    maximumMessageLimit,
     messageInputFloating,
     messageInputHeightStore,
     myMessageTheme,
+    pendingUploadsEnabled,
     readEvents,
-    reloadChannel,
-    scrollToFirstUnreadThreshold,
-    setChannelUnreadState,
-    setTargetedMessage,
-    shouldShowUnreadUnderlay,
-    targetedMessage,
     thread,
-    threadInstance,
-    threadList,
-    hasMore,
-    threadHasMore,
     ...props,
     noGroupByUser: !enableMessageGroupingByUser || props.noGroupByUser
   });