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

package/lib/module/components/Channel/Channel.js

@@ -2,1460 +2,104 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.reactionData = exports.Channel = void 0;
+exports.Channel = void 0;
+Object.defineProperty(exports, "reactionData", {
+  enumerable: true,
+  get: function () {
+    return _ChannelShell.reactionData;
+  }
+});
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _throttle = _interopRequireDefault(require("lodash/throttle"));
-var _streamChat = require("stream-chat");
-var _useChannelDataState2 = require("./hooks/useChannelDataState");
-var _useCreateChannelContext = require("./hooks/useCreateChannelContext");
-var _useCreateInputMessageInputContext = require("./hooks/useCreateInputMessageInputContext");
-var _useCreateMessagesContext = require("./hooks/useCreateMessagesContext");
-var _useCreateOwnCapabilitiesContext = require("./hooks/useCreateOwnCapabilitiesContext");
-var _useCreatePaginatedMessageListContext = require("./hooks/useCreatePaginatedMessageListContext");
-var _useCreateThreadContext = require("./hooks/useCreateThreadContext");
-var _useCreateTypingContext = require("./hooks/useCreateTypingContext");
-var _useMessageListPagination = require("./hooks/useMessageListPagination");
-var _useTargetedMessage2 = require("./hooks/useTargetedMessage");
-var _AttachmentPickerContext = require("../../contexts/attachmentPickerContext/AttachmentPickerContext");
-var _AudioPlayerContext = require("../../contexts/audioPlayerContext/AudioPlayerContext");
-var _ChannelContext = require("../../contexts/channelContext/ChannelContext");
-var _useChannelState2 = require("../../contexts/channelsStateContext/useChannelState");
+var _ChannelShell = require("./ChannelShell");
+var _useChannelLifecycle2 = require("./hooks/useChannelLifecycle");
+var _useSupersededChannelSwap = require("./hooks/useSupersededChannelSwap");
 var _ChatContext = require("../../contexts/chatContext/ChatContext");
 var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
-var _MessageComposerContext = require("../../contexts/messageComposerContext/MessageComposerContext");
-var _MessageInputContext = require("../../contexts/messageInputContext/MessageInputContext");
-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 _TranslationContext = require("../../contexts/translationContext/TranslationContext");
-var _TypingContext = require("../../contexts/typingContext/TypingContext");
-var _hooks = require("../../hooks");
-var _useAppStateListener = require("../../hooks/useAppStateListener");
-var _useAttachmentPickerBottomSheet = require("../../hooks/useAttachmentPickerBottomSheet");
-var _usePrunableMessageList = require("../../hooks/usePrunableMessageList");
-var _native = require("../../native");
-var _channelUnreadState = require("../../state-store/channel-unread-state");
-var _messageInputHeightStore = require("../../state-store/message-input-height-store");
+var _useStateStore2 = require("../../hooks/useStateStore");
 var _theme = require("../../theme");
-var _types = require("../../types/types");
-var _addReactionToLocalState = require("../../utils/addReactionToLocalState");
-var _compressImage = require("../../utils/compressImage");
-var _patchMessageTextCommand = require("../../utils/patchMessageTextCommand");
-var _utils = require("../../utils/utils");
-var _NotificationAnnouncer = require("../Accessibility/NotificationAnnouncer");
-var _AttachmentPicker = require("../AttachmentPicker/AttachmentPicker");
-var _EmojiPickerList = require("../MessageMenu/EmojiPickerList");
-var _emojis = require("../MessageMenu/emojis");
-var _toUnicodeScalarString = require("../MessageMenu/utils/toUnicodeScalarString");
 var _notificationTarget = require("../Notifications/notificationTarget");
 var _NotificationTargetContext = require("../Notifications/NotificationTargetContext");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["user"],
-  _excluded2 = ["user"];
 var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Channel/Channel.tsx";
+var _excluded = ["channel", "children", "client", "initialScrollToFirstUnreadMessage", "initializeOnMount", "markReadOnMount", "t"],
+  _excluded2 = ["notificationHostId"];
 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 (var _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); }
-var reactionData = exports.reactionData = [{
-  Icon: ({
-    size = 12
-  }) => (0, _jsxRuntime.jsx)(_EmojiPickerList.Emoji, {
-    item: '👍',
-    size: size
-  }),
-  type: 'like',
-  isMain: true
-}, {
-  Icon: ({
-    size = 12
-  }) => (0, _jsxRuntime.jsx)(_EmojiPickerList.Emoji, {
-    item: '😂',
-    size: size
-  }),
-  type: 'haha',
-  isMain: true
-}, {
-  Icon: ({
-    size = 12
-  }) => (0, _jsxRuntime.jsx)(_EmojiPickerList.Emoji, {
-    item: '❤️',
-    size: size
-  }),
-  type: 'love',
-  isMain: true
-}, {
-  Icon: ({
-    size = 12
-  }) => (0, _jsxRuntime.jsx)(_EmojiPickerList.Emoji, {
-    item: '😮',
-    size: size
-  }),
-  type: 'wow',
-  isMain: true
-}, {
-  Icon: ({
-    size = 12
-  }) => (0, _jsxRuntime.jsx)(_EmojiPickerList.Emoji, {
-    item: '😢',
-    size: size
-  }),
-  type: 'sad',
-  isMain: true
-}, ..._emojis.emojis.map(emoji => ({
-  Icon: ({
-    size = 12
-  }) => (0, _jsxRuntime.jsx)(_EmojiPickerList.Emoji, {
-    item: emoji,
-    size: size
-  }),
-  type: (0, _toUnicodeScalarString.toUnicodeScalarString)(emoji)
-}))];
-var scrollToFirstUnreadThreshold = 0;
-var defaultThrottleInterval = 500;
-var defaultDebounceInterval = 500;
-var throttleOptions = {
-  leading: true,
-  trailing: true
-};
-var debounceOptions = {
-  leading: true,
-  trailing: true
+var channelQuerySelector = state => {
+  var _state$items;
+  return {
+    blockingError: (_state$items = state.items) != null && _state$items.length ? undefined : state.lastQueryError
+  };
 };
 var ChannelWithContext = props => {
-  var _channel$getConfig, _channel$data, _channelState$members, _channelState$read, _clientChannelConfig$, _channelMessagesState, _channelState$typing, _channelMessagesState2;
-  var _props$disableAttachm = props.disableAttachmentPicker,
-    disableAttachmentPicker = _props$disableAttachm === void 0 ? !(0, _native.isImageMediaLibraryAvailable)() : _props$disableAttachm,
-    _props$shouldRenderAt = props.shouldRenderAttachmentPicker,
-    shouldRenderAttachmentPicker = _props$shouldRenderAt === void 0 ? true : _props$shouldRenderAt,
-    additionalKeyboardAvoidingViewProps = props.additionalKeyboardAvoidingViewProps,
-    additionalPressableProps = props.additionalPressableProps,
-    additionalTextInputProps = props.additionalTextInputProps,
-    _props$allowConcurren = props.allowConcurrentAudioPlayback,
-    allowConcurrentAudioPlayback = _props$allowConcurren === void 0 ? false : _props$allowConcurren,
-    _props$allowThreadMes = props.allowThreadMessagesInChannel,
-    allowThreadMessagesInChannel = _props$allowThreadMes === void 0 ? true : _props$allowThreadMes,
-    _props$asyncMessagesL = props.asyncMessagesLockDistance,
-    asyncMessagesLockDistance = _props$asyncMessagesL === void 0 ? 50 : _props$asyncMessagesL,
-    _props$asyncMessagesM = props.asyncMessagesMinimumPressDuration,
-    asyncMessagesMinimumPressDuration = _props$asyncMessagesM === void 0 ? 500 : _props$asyncMessagesM,
-    _props$asyncMessagesS = props.asyncMessagesSlideToCancelDistance,
-    asyncMessagesSlideToCancelDistance = _props$asyncMessagesS === void 0 ? 75 : _props$asyncMessagesS,
-    _props$audioRecording = props.audioRecordingSendOnComplete,
-    audioRecordingSendOnComplete = _props$audioRecording === void 0 ? false : _props$audioRecording,
-    _props$attachmentPick = props.attachmentPickerBottomSheetHeight,
-    attachmentPickerBottomSheetHeight = _props$attachmentPick === void 0 ? disableAttachmentPicker ? 72 : 333 : _props$attachmentPick,
-    _props$attachmentSele = props.attachmentSelectionBarHeight,
-    attachmentSelectionBarHeight = _props$attachmentSele === void 0 ? 72 : _props$attachmentSele,
-    _props$audioRecording2 = props.audioRecordingEnabled,
-    audioRecordingEnabled = _props$audioRecording2 === void 0 ? false : _props$audioRecording2,
-    _props$numberOfAttach = props.numberOfAttachmentImagesToLoadPerCall,
-    numberOfAttachmentImagesToLoadPerCall = _props$numberOfAttach === void 0 ? 25 : _props$numberOfAttach,
-    _props$numberOfAttach2 = props.numberOfAttachmentPickerImageColumns,
-    numberOfAttachmentPickerImageColumns = _props$numberOfAttach2 === void 0 ? 3 : _props$numberOfAttach2,
-    _props$giphyVersion = props.giphyVersion,
-    giphyVersion = _props$giphyVersion === void 0 ? 'fixed_height' : _props$giphyVersion,
-    _props$bottomInset = props.bottomInset,
-    bottomInset = _props$bottomInset === void 0 ? 0 : _props$bottomInset,
-    channel = props.channel,
+  var _useStateStore;
+  var channel = props.channel,
     children = props.children,
     client = props.client,
-    compressImageQuality = props.compressImageQuality,
-    createPollOptionGap = props.createPollOptionGap,
-    customMessageSwipeAction = props.customMessageSwipeAction,
-    _props$disableKeyboar = props.disableKeyboardCompatibleView,
-    disableKeyboardCompatibleView = _props$disableKeyboar === void 0 ? false : _props$disableKeyboar,
-    disableTypingIndicator = props.disableTypingIndicator,
-    _props$dismissKeyboar = props.dismissKeyboardOnMessageTouch,
-    dismissKeyboardOnMessageTouch = _props$dismissKeyboar === void 0 ? true : _props$dismissKeyboar,
-    doFileUploadRequest = props.doFileUploadRequest,
-    doMarkReadRequest = props.doMarkReadRequest,
-    doSendMessageRequest = props.doSendMessageRequest,
-    preSendMessageRequest = props.preSendMessageRequest,
-    doUpdateMessageRequest = props.doUpdateMessageRequest,
-    _props$enableMessageG = props.enableMessageGroupingByUser,
-    enableMessageGroupingByUser = _props$enableMessageG === void 0 ? true : _props$enableMessageG,
-    enableOfflineSupport = props.enableOfflineSupport,
-    _props$allowSendBefor = props.allowSendBeforeAttachmentsUpload,
-    allowSendBeforeAttachmentsUpload = _props$allowSendBefor === void 0 ? enableOfflineSupport : _props$allowSendBefor,
-    _props$enableSwipeToR = props.enableSwipeToReply,
-    enableSwipeToReply = _props$enableSwipeToR === void 0 ? true : _props$enableSwipeToR,
-    _props$enforceUniqueR = props.enforceUniqueReaction,
-    enforceUniqueReaction = _props$enforceUniqueR === void 0 ? false : _props$enforceUniqueR,
-    _props$FlatList = props.FlatList,
-    FlatList = _props$FlatList === void 0 ? _native.NativeHandlers.FlatList : _props$FlatList,
-    _props$focusInputOnPi = props.focusInputOnPickerClose,
-    focusInputOnPickerClose = _props$focusInputOnPi === void 0 ? true : _props$focusInputOnPi,
-    forceAlignMessages = props.forceAlignMessages,
-    getMessageGroupStyle = props.getMessageGroupStyle,
-    handleAttachButtonPress = props.handleAttachButtonPress,
-    handleBan = props.handleBan,
-    handleCopy = props.handleCopy,
-    handleDelete = props.handleDelete,
-    handleDeleteForMe = props.handleDeleteForMe,
-    handleEdit = props.handleEdit,
-    handleFlag = props.handleFlag,
-    handleMarkUnread = props.handleMarkUnread,
-    handleMute = props.handleMute,
-    handlePinMessage = props.handlePinMessage,
-    handleQuotedReply = props.handleQuotedReply,
-    handleReaction = props.handleReaction,
-    handleRetry = props.handleRetry,
-    handleThreadReply = props.handleThreadReply,
-    handleBlockUser = props.handleBlockUser,
-    _props$hasCameraPicke = props.hasCameraPicker,
-    hasCameraPicker = _props$hasCameraPicke === void 0 ? (0, _native.isImagePickerAvailable)() : _props$hasCameraPicke,
-    hasCommands = props.hasCommands,
-    hasCreatePoll = props.hasCreatePoll,
-    _props$hasFilePicker = props.hasFilePicker,
-    hasFilePicker = _props$hasFilePicker === void 0 ? (0, _native.isDocumentPickerAvailable)() : _props$hasFilePicker,
-    _props$hasImagePicker = props.hasImagePicker,
-    hasImagePicker = _props$hasImagePicker === void 0 ? (0, _native.isImagePickerAvailable)() || (0, _native.isImageMediaLibraryAvailable)() : _props$hasImagePicker,
-    _props$allowDateSepar = props.allowDateSeparatorForSystemMessages,
-    allowDateSeparatorForSystemMessages = _props$allowDateSepar === void 0 ? false : _props$allowDateSepar,
-    _props$hideDateSepara = props.hideDateSeparators,
-    hideDateSeparators = _props$hideDateSepara === void 0 ? false : _props$hideDateSepara,
-    _props$hideStickyDate = props.hideStickyDateHeader,
-    hideStickyDateHeader = _props$hideStickyDate === void 0 ? false : _props$hideStickyDate,
     _props$initialScrollT = props.initialScrollToFirstUnreadMessage,
     initialScrollToFirstUnreadMessage = _props$initialScrollT === void 0 ? false : _props$initialScrollT,
-    isAttachmentEqual = props.isAttachmentEqual,
-    _props$isMessageAIGen = props.isMessageAIGenerated,
-    isMessageAIGenerated = _props$isMessageAIGen === void 0 ? () => false : _props$isMessageAIGen,
-    keyboardBehavior = props.keyboardBehavior,
-    keyboardVerticalOffset = props.keyboardVerticalOffset,
-    loadingMoreProp = props.loadingMore,
-    loadingMoreRecentProp = props.loadingMoreRecent,
-    markdownRules = props.markdownRules,
+    _props$initializeOnMo = props.initializeOnMount,
+    initializeOnMount = _props$initializeOnMo === void 0 ? true : _props$initializeOnMo,
     _props$markReadOnMoun = props.markReadOnMount,
     markReadOnMount = _props$markReadOnMoun === void 0 ? true : _props$markReadOnMoun,
-    maxTimeBetweenGroupedMessages = props.maxTimeBetweenGroupedMessages,
-    messageActions = props.messageActions,
-    _props$messageContent = props.messageContentOrder,
-    messageContentOrder = _props$messageContent === void 0 ? ['quoted_reply', 'gallery', 'files', 'poll', 'ai_text', 'attachments', 'location', 'text'] : _props$messageContent,
-    messageOverlayTargetId = props.messageOverlayTargetId,
-    _props$messageInputFl = props.messageInputFloating,
-    messageInputFloating = _props$messageInputFl === void 0 ? false : _props$messageInputFl,
-    messageId = props.messageId,
-    messageSwipeToReplyHitSlop = props.messageSwipeToReplyHitSlop,
-    messageTextNumberOfLines = props.messageTextNumberOfLines,
-    myMessageTheme = props.myMessageTheme,
-    _props$newMessageStat = props.newMessageStateUpdateThrottleInterval,
-    newMessageStateUpdateThrottleInterval = _props$newMessageStat === void 0 ? defaultThrottleInterval : _props$newMessageStat,
-    onLongPressMessage = props.onLongPressMessage,
-    onPressInMessage = props.onPressInMessage,
-    onPressMessage = props.onPressMessage,
-    onAlsoSentToChannelHeaderPress = props.onAlsoSentToChannelHeaderPress,
-    openPollCreationDialog = props.openPollCreationDialog,
-    overrideOwnCapabilities = props.overrideOwnCapabilities,
-    _props$reactionListPo = props.reactionListPosition,
-    reactionListPosition = _props$reactionListPo === void 0 ? 'top' : _props$reactionListPo,
-    _props$reactionListTy = props.reactionListType,
-    reactionListType = _props$reactionListTy === void 0 ? 'clustered' : _props$reactionListTy,
-    selectReaction = props.selectReaction,
-    setInputRef = props.setInputRef,
-    setThreadMessages = props.setThreadMessages,
-    _props$shouldShowUnre = props.shouldShowUnreadUnderlay,
-    shouldShowUnreadUnderlay = _props$shouldShowUnre === void 0 ? true : _props$shouldShowUnre,
-    shouldSyncChannel = props.shouldSyncChannel,
-    _props$stateUpdateThr = props.stateUpdateThrottleInterval,
-    stateUpdateThrottleInterval = _props$stateUpdateThr === void 0 ? defaultThrottleInterval : _props$stateUpdateThr,
-    _props$supportedReact = props.supportedReactions,
-    supportedReactions = _props$supportedReact === void 0 ? reactionData : _props$supportedReact,
     t = props.t,
-    threadFromProps = props.thread,
-    threadList = props.threadList,
-    threadMessages = props.threadMessages,
-    _props$topInset = props.topInset,
-    topInset = _props$topInset === void 0 ? 0 : _props$topInset,
-    isOnline = props.isOnline,
-    maximumMessageLimit = props.maximumMessageLimit,
-    _props$initializeOnMo = props.initializeOnMount,
-    initializeOnMount = _props$initializeOnMo === void 0 ? true : _props$initializeOnMo,
-    _props$urlPreviewType = props.urlPreviewType,
-    urlPreviewType = _props$urlPreviewType === void 0 ? 'full' : _props$urlPreviewType;
-  var components = (0, _ComponentsContext.useComponentsContext)();
-  var KeyboardCompatibleView = components.KeyboardCompatibleView,
-    LoadingErrorIndicator = components.LoadingErrorIndicator;
-  var threadProps = threadFromProps.thread,
-    threadInstance = threadFromProps.threadInstance;
+    shellProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
+    LoadingErrorIndicator = _useComponentsContext.LoadingErrorIndicator;
   var styles = useStyles();
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    deleted = _useState2[0],
-    setDeleted = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    error = _useState4[0],
-    setError = _useState4[1];
-  var lastReadRef = (0, _react.useRef)(undefined);
-  var _useState5 = (0, _react.useState)(threadProps || null),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    thread = _useState6[0],
-    setThread = _useState6[1];
-  var _useState7 = (0, _react.useState)(true),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    threadHasMore = _useState8[0],
-    setThreadHasMore = _useState8[1];
-  var _useState9 = (0, _react.useState)(false),
-    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
-    threadLoadingMore = _useState0[0],
-    setThreadLoadingMore = _useState0[1];
-  var _useState1 = (0, _react.useState)(() => new _channelUnreadState.ChannelUnreadStateStore()),
-    _useState10 = (0, _slicedToArray2.default)(_useState1, 1),
-    channelUnreadStateStore = _useState10[0];
-  var _useState11 = (0, _react.useState)(() => new _messageInputHeightStore.MessageInputHeightStore()),
-    _useState12 = (0, _slicedToArray2.default)(_useState11, 1),
-    messageInputHeightStore = _useState12[0];
-  var setChannelUnreadState = (0, _react.useCallback)(data => {
-    channelUnreadStateStore.channelUnreadState = data;
-  }, [channelUnreadStateStore]);
-  var _useAttachmentPickerB = (0, _useAttachmentPickerBottomSheet.useAttachmentPickerBottomSheet)(),
-    bottomSheetRef = _useAttachmentPickerB.bottomSheetRef,
-    closePicker = _useAttachmentPickerB.closePicker,
-    openPicker = _useAttachmentPickerB.openPicker;
-  var syncingChannelRef = (0, _react.useRef)(false);
-  var _useTargetedMessage = (0, _useTargetedMessage2.useTargetedMessage)(),
-    highlightedMessageId = _useTargetedMessage.highlightedMessageId,
-    setTargetedMessage = _useTargetedMessage.setTargetedMessage,
-    targetedMessage = _useTargetedMessage.targetedMessage;
-  var uploadAbortControllerRef = (0, _react.useRef)(new Map());
-  var optimisticallyUpdatedNewMessages = (0, _react.useMemo)(() => new Set(), []);
-  var channelId = (channel == null ? void 0 : channel.id) || '';
-  var pollCreationEnabled = !channel.disconnected && !!(channel != null && channel.id) && (channel == null || (_channel$getConfig = channel.getConfig()) == null ? void 0 : _channel$getConfig.polls);
-  var _useChannelDataState = (0, _useChannelDataState2.useChannelDataState)(channel),
-    copyStateFromChannel = _useChannelDataState.copyStateFromChannel,
-    initStateFromChannel = _useChannelDataState.initStateFromChannel,
-    setRead = _useChannelDataState.setRead,
-    setTyping = _useChannelDataState.setTyping,
-    channelState = _useChannelDataState.state;
-  var _useMessageListPagina = (0, _useMessageListPagination.useMessageListPagination)({
-      channel
-    }),
-    rawCopyMessagesStateFromChannel = _useMessageListPagina.copyMessagesStateFromChannel,
-    loadChannelAroundMessageFn = _useMessageListPagina.loadChannelAroundMessage,
-    loadChannelAtFirstUnreadMessage = _useMessageListPagina.loadChannelAtFirstUnreadMessage,
-    loadInitialMessagesStateFromChannel = _useMessageListPagina.loadInitialMessagesStateFromChannel,
-    loadLatestMessages = _useMessageListPagina.loadLatestMessages,
-    loadMore = _useMessageListPagina.loadMore,
-    loadMoreRecent = _useMessageListPagina.loadMoreRecent,
-    channelMessagesState = _useMessageListPagina.state;
-  var shouldLoadInitialChannelAtFirstUnreadMessage = (0, _hooks.useStableCallback)(unreadCount => {
-    if (messageId || !initialScrollToFirstUnreadMessage || !client.user) {
-      return false;
-    }
-    return (unreadCount != null ? unreadCount : channel.countUnread()) > scrollToFirstUnreadThreshold;
-  });
-  var hasPendingInitialTargetLoad = (0, _hooks.useStableCallback)(() => {
-    return !!messageId || shouldLoadInitialChannelAtFirstUnreadMessage();
-  });
-  var _usePrunableMessageLi = (0, _usePrunableMessageList.usePrunableMessageList)({
-      maximumMessageLimit,
-      setMessages: rawCopyMessagesStateFromChannel
+  var _ref = (_useStateStore = (0, _useStateStore2.useStateStore)(channel.messagePaginator.state, channelQuerySelector)) != null ? _useStateStore : {},
+    blockingError = _ref.blockingError;
+  var _useChannelLifecycle = (0, _useChannelLifecycle2.useChannelLifecycle)({
+      channel,
+      client,
+      initialScrollToFirstUnreadMessage,
+      initializeOnMount,
+      markReadOnMount,
+      t
     }),
-    copyMessagesStateFromChannel = _usePrunableMessageLi.setMessages,
-    viewabilityChangedCallback = _usePrunableMessageLi.viewabilityChangedCallback;
-  var setReadThrottled = (0, _react.useMemo)(() => (0, _throttle.default)(() => {
-    if (channel) {
-      setRead(channel);
-    }
-  }, stateUpdateThrottleInterval, throttleOptions), [channel, stateUpdateThrottleInterval, setRead]);
-  var copyMessagesStateFromChannelThrottled = (0, _react.useMemo)(() => (0, _throttle.default)(() => {
-    if (channel) {
-      copyMessagesStateFromChannel(channel);
-    }
-  }, newMessageStateUpdateThrottleInterval, throttleOptions), [channel, newMessageStateUpdateThrottleInterval, copyMessagesStateFromChannel]);
-  var copyChannelState = (0, _react.useMemo)(() => (0, _throttle.default)(() => {
-    if (channel) {
-      copyStateFromChannel(channel);
-      copyMessagesStateFromChannel(channel);
-    }
-  }, stateUpdateThrottleInterval, throttleOptions), [stateUpdateThrottleInterval, channel, copyStateFromChannel, copyMessagesStateFromChannel]);
-  var handleEvent = (0, _hooks.useStableCallback)(event => {
-    if (shouldSyncChannel) {
-      if (event.type.startsWith('poll.') || event.type === 'user.watching.start' || event.type === 'user.watching.stop') {
-        return;
-      }
-      if (event.type === 'typing.start' || event.type === 'typing.stop') {
-        var _event$user;
-        if (((_event$user = event.user) == null ? void 0 : _event$user.id) !== client.userID) {
-          setTyping(channel);
-        }
-        return;
-      } else {
-        if (thread != null && thread.id) {
-          var _event$message;
-          var updatedThreadMessages = thread.id && channel && channel.state.threads[thread.id] || threadMessages;
-          setThreadMessages(updatedThreadMessages);
-          if (channel && ((_event$message = event.message) == null ? void 0 : _event$message.id) === thread.id && !threadInstance) {
-            var updatedThread = channel.state.formatMessage(event.message);
-            setThread(updatedThread);
-          }
-        }
-      }
-      if (event.type === 'notification.mark_unread') {
-        var _event$unread_message;
-        if (!(event.last_read_at && event.user)) {
-          return;
-        }
-        setChannelUnreadState({
-          first_unread_message_id: event.first_unread_message_id,
-          last_read: new Date(event.last_read_at),
-          last_read_message_id: event.last_read_message_id,
-          unread_messages: (_event$unread_message = event.unread_messages) != null ? _event$unread_message : 0
-        });
-      }
-      if (event.type === 'channel.truncated' && event.cid === channel.cid) {
-        setChannelUnreadState(undefined);
-      }
-      if (channel) {
-        if (event.type === 'message.new' || event.type === 'notification.message_new') {
-          var _event$message$id, _event$message2, _event$user2;
-          var _messageId = (_event$message$id = (_event$message2 = event.message) == null ? void 0 : _event$message2.id) != null ? _event$message$id : '';
-          if (((_event$user2 = event.user) == null ? void 0 : _event$user2.id) !== client.userID || !optimisticallyUpdatedNewMessages.has(_messageId)) {
-            copyMessagesStateFromChannelThrottled();
-          }
-          optimisticallyUpdatedNewMessages.delete(_messageId);
-          return;
-        }
-        if (event.type === 'message.read_locally') {
-          return;
-        }
-        if (event.type === 'message.read' || event.type === 'notification.mark_read') {
-          setReadThrottled();
-          return;
-        }
-        copyChannelState();
-      }
-    }
-  });
-  (0, _react.useEffect)(() => {
-    var listener;
-    var initChannel = function () {
-      var _ref = (0, _asyncToGenerator2.default)(function* () {
-        var _client$user;
-        lastReadRef.current = new Date();
-        var unreadCount = channel.countUnread();
-        var shouldLoadAtFirstUnread = shouldLoadInitialChannelAtFirstUnreadMessage(unreadCount);
-        if (!channel || !shouldSyncChannel) {
-          return;
-        }
-        var errored = false;
-        if ((!channel.initialized || !channel.state.isUpToDate) && initializeOnMount) {
-          try {
-            yield channel == null ? void 0 : channel.watch();
-          } catch (err) {
-            console.warn('Channel watch request failed with error:', err);
-            setError(true);
-            errored = true;
-            channel.offlineMode = true;
-          }
-        }
-        if (!errored) {
-          initStateFromChannel(channel);
-          loadInitialMessagesStateFromChannel(channel, channel.state.messagePagination.hasPrev);
-        }
-        if ((_client$user = client.user) != null && _client$user.id && channel.state.read[client.user.id]) {
-          var _channel$state$read$c = channel.state.read[client.user.id],
-            user = _channel$state$read$c.user,
-            ownReadState = (0, _objectWithoutProperties2.default)(_channel$state$read$c, _excluded);
-          setChannelUnreadState(ownReadState);
-        }
-        if (messageId) {
-          yield loadChannelAroundMessage({
-            messageId,
-            setTargetedMessage
-          });
-        } else if (shouldLoadAtFirstUnread) {
-          var _client$user2;
-          var clientUserId = (_client$user2 = client.user) == null ? void 0 : _client$user2.id;
-          if (!clientUserId) {
-            return;
-          }
-          var _channel$state$read$c2 = channel.state.read[clientUserId],
-            _user = _channel$state$read$c2.user,
-            _ownReadState = (0, _objectWithoutProperties2.default)(_channel$state$read$c2, _excluded2);
-          yield loadChannelAtFirstUnreadMessage({
-            channelUnreadState: _ownReadState,
-            setChannelUnreadState,
-            setTargetedMessage
-          });
-        }
-        if (unreadCount > 0 && markReadOnMount) {
-          yield markRead({
-            updateChannelUnreadState: false
-          });
-        }
-        listener = channel.on(handleEvent);
-      });
-      return function initChannel() {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    initChannel();
-    return () => {
-      var _listener;
-      copyChannelState.cancel();
-      loadMoreThreadFinished.cancel();
-      (_listener = listener) == null || _listener.unsubscribe();
-    };
-  }, [channel.cid, messageId, shouldSyncChannel]);
-  (0, _react.useEffect)(() => {
-    var _client$on = client.on('channel.deleted', event => {
-        if (event.cid === (channel == null ? void 0 : channel.cid)) {
-          setDeleted(true);
-        }
-      }),
-      unsubscribe = _client$on.unsubscribe;
-    return unsubscribe;
-  }, [channel == null ? void 0 : channel.cid, client]);
-  var threadPropsExists = !!threadProps;
-  (0, _react.useEffect)(() => {
-    if (threadProps && shouldSyncChannel) {
-      setThread(threadProps);
-      if (channel && threadProps != null && threadProps.id) {
-        var _channel$state$thread;
-        setThreadMessages(((_channel$state$thread = channel.state.threads) == null ? void 0 : _channel$state$thread[threadProps.id]) || []);
-      }
-    } else {
-      setThread(null);
-    }
-  }, [threadPropsExists, shouldSyncChannel]);
-  var handleAppBackground = (0, _react.useCallback)(() => {
-    var _channelData$own_capa;
-    var channelData = channel.data;
-    if (channelData != null && (_channelData$own_capa = channelData.own_capabilities) != null && _channelData$own_capa.includes('send-typing-events')) {
-      channel.sendEvent({
-        parent_id: thread == null ? void 0 : thread.id,
-        type: 'typing.stop'
-      });
-    }
-  }, [thread == null ? void 0 : thread.id, channelId]);
-  (0, _useAppStateListener.useAppStateListener)(undefined, handleAppBackground);
-  var markReadInternal = (0, _throttle.default)(function () {
-    var _ref2 = (0, _asyncToGenerator2.default)(function* (options) {
-      var _ref3 = options != null ? options : {},
-        _ref3$updateChannelUn = _ref3.updateChannelUnreadState,
-        updateChannelUnreadState = _ref3$updateChannelUn === void 0 ? true : _ref3$updateChannelUn;
-      if (!channel || channel != null && channel.disconnected) {
-        return;
-      }
-      if (!(clientChannelConfig != null && clientChannelConfig.read_events)) {
-        if (client.options.isLocalUnreadCountEnabled) {
-          var event = channel.markReadLocally();
-          if (updateChannelUnreadState && event && lastReadRef.current) {
-            setChannelUnreadState({
-              last_read: lastReadRef.current,
-              last_read_message_id: event.last_read_message_id,
-              unread_messages: 0
-            });
-            lastReadRef.current = new Date();
-          }
-        }
-        return;
-      }
-      if (doMarkReadRequest) {
-        doMarkReadRequest(channel, updateChannelUnreadState ? setChannelUnreadState : undefined);
-      } else {
-        try {
-          var response = yield channel.markRead();
-          if (updateChannelUnreadState && response && lastReadRef.current) {
-            setChannelUnreadState({
-              last_read: lastReadRef.current,
-              last_read_message_id: response == null ? void 0 : response.event.last_read_message_id,
-              unread_messages: 0
-            });
-            lastReadRef.current = new Date();
-          }
-        } catch (err) {
-          console.log('Error marking channel as read:', err);
-        }
-      }
-    });
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), defaultThrottleInterval, throttleOptions);
-  var markRead = (0, _hooks.useStableCallback)(markReadInternal);
-  var reloadThread = (0, _hooks.useStableCallback)((0, _asyncToGenerator2.default)(function* () {
-    if (!channel || !(thread != null && thread.id)) {
-      return;
-    }
-    setThreadLoadingMore(true);
-    try {
-      var parentID = thread.id;
-      var limit = 50;
-      var queryResponse = yield channel.getReplies(parentID, {
-        limit
-      });
-      var updatedHasMore = queryResponse.messages.length === limit;
-      var updatedThreadMessages = channel.state.threads[parentID] || [];
-      loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
-      var _yield$channel$getMes = yield channel.getMessagesById([parentID]),
-        messages = _yield$channel$getMes.messages;
-      var _messages = (0, _slicedToArray2.default)(messages, 1),
-        threadMessage = _messages[0];
-      if (threadMessage && !threadInstance) {
-        var formattedMessage = channel.state.formatMessage(threadMessage);
-        setThread(formattedMessage);
-      }
-    } catch (err) {
-      console.warn('Thread loading request failed with error', err);
-      if (err instanceof Error) {
-        setError(err);
-      } else {
-        setError(true);
-      }
-      setThreadLoadingMore(false);
-      throw err;
-    }
-  }));
-  var resyncChannel = (0, _hooks.useStableCallback)((0, _asyncToGenerator2.default)(function* () {
-    if (!channel || syncingChannelRef.current || !channel.initialized && !channel.offlineMode) {
-      return;
-    }
-    syncingChannelRef.current = true;
-    setError(false);
-    var parseMessage = message => {
-      var _message$pinned_at, _message$updated_at;
-      return {
-        ...message,
-        created_at: message.created_at.toString(),
-        pinned_at: (_message$pinned_at = message.pinned_at) == null ? void 0 : _message$pinned_at.toString(),
-        updated_at: (_message$updated_at = message.updated_at) == null ? void 0 : _message$updated_at.toString()
-      };
-    };
-    var getRecoverableFailedMessages = (messages = []) => messages.filter(message => message.status === _utils.MessageStatusTypes.FAILED && !channel.state.findMessage(message.id, message.parent_id)).map(parseMessage);
-    try {
-      if (channelMessagesState != null && channelMessagesState.messages) {
-        yield channel == null ? void 0 : channel.watch({
-          messages: {
-            limit: channelMessagesState.messages.length
-          }
-        });
-        channel.offlineMode = false;
-      }
-      if (!thread) {
-        copyChannelState();
-        var failedMessages = getRecoverableFailedMessages(channelMessagesState.messages);
-        if (failedMessages != null && failedMessages.length) {
-          channel.state.addMessagesSorted(failedMessages);
-        }
-        yield markRead();
-        channel.state.setIsUpToDate(true);
-      } else {
-        yield reloadThread();
-        var failedThreadMessages = thread ? getRecoverableFailedMessages(threadMessages) : [];
-        if (failedThreadMessages.length) {
-          channel.state.addMessagesSorted(failedThreadMessages);
-          setThreadMessages([...channel.state.threads[thread.id]]);
-        }
-      }
-    } catch (err) {
-      if (err instanceof Error) {
-        setError(err);
-      } else {
-        setError(true);
-      }
-    }
-    syncingChannelRef.current = false;
-  }));
-  var resyncChannelRef = (0, _react.useRef)(resyncChannel);
-  resyncChannelRef.current = resyncChannel;
-  (0, _react.useEffect)(() => {
-    var connectionChangedHandler = () => {
-      if (shouldSyncChannel) {
-        resyncChannelRef.current();
-      }
-    };
-    var connectionChangedSubscription;
-    if (enableOfflineSupport && client.offlineDb) {
-      connectionChangedSubscription = client.offlineDb.syncManager.onSyncStatusChange(statusChanged => {
-        if (statusChanged) {
-          connectionChangedHandler();
-        }
-      });
-    } else {
-      connectionChangedSubscription = client.on('connection.changed', event => {
-        if (event.online) {
-          connectionChangedHandler();
-        }
-      });
-    }
-    return () => {
-      connectionChangedSubscription.unsubscribe();
-    };
-  }, [enableOfflineSupport, client, shouldSyncChannel]);
-  var getChannelConfigSafely = () => {
-    try {
-      return channel == null ? void 0 : channel.getConfig();
-    } catch (_) {
-      return null;
-    }
-  };
-  var clientChannelConfig = getChannelConfigSafely();
-  var reloadChannel = (0, _hooks.useStableCallback)((0, _asyncToGenerator2.default)(function* () {
-    try {
-      yield loadLatestMessages();
-    } catch (err) {
-      console.warn('Reloading channel failed with error:', err);
-    }
-  }));
-  var loadChannelAroundMessage = (0, _hooks.useStableCallback)(function () {
-    var _ref7 = (0, _asyncToGenerator2.default)(function* ({
-      messageId: messageIdToLoadAround
-    }) {
-      if (!messageIdToLoadAround) {
-        return;
-      }
-      try {
-        if (thread) {
-          setThreadLoadingMore(true);
-          try {
-            yield channel.state.loadMessageIntoState(messageIdToLoadAround, thread.id);
-            setThreadLoadingMore(false);
-            setThreadMessages(channel.state.threads[thread.id]);
-            if (setTargetedMessage) {
-              setTargetedMessage(messageIdToLoadAround);
-            }
-          } catch (err) {
-            if (err instanceof Error) {
-              setError(err);
-            } else {
-              setError(true);
-            }
-            setThreadLoadingMore(false);
-          }
-        } else {
-          yield loadChannelAroundMessageFn({
-            messageId: messageIdToLoadAround,
-            setTargetedMessage
-          });
-        }
-      } catch (err) {
-        console.warn('Loading channel around message failed with error:', err);
-      }
-    });
-    return function (_x2) {
-      return _ref7.apply(this, arguments);
+    hasPendingInitialTargetLoad = _useChannelLifecycle.hasPendingInitialTargetLoad;
+  if (!channel || blockingError) {
+    var retry = () => {
+      var _channel$messagePagin;
+      return channel == null || (_channel$messagePagin = channel.messagePaginator) == null ? void 0 : _channel$messagePagin.jumpToTheLatestMessage().catch(err => console.warn('Reloading the message list failed with error:', err));
     };
-  }());
-  var updateMessage = (0, _hooks.useStableCallback)((updatedMessage, extraState = {}, throttled = false) => {
-    if (!channel) {
-      return;
-    }
-    channel.state.addMessageSorted(updatedMessage, true);
-    if (throttled) {
-      copyMessagesStateFromChannelThrottled();
-    } else {
-      copyMessagesStateFromChannel(channel);
-    }
-    if (thread && updatedMessage.parent_id) {
-      extraState.threadMessages = channel.state.threads[updatedMessage.parent_id] || [];
-      setThreadMessages(extraState.threadMessages);
-    }
-  });
-  var replaceMessage = (0, _hooks.useStableCallback)((oldMessage, newMessage) => {
-    if (channel) {
-      channel.state.removeMessage(oldMessage);
-      channel.state.addMessageSorted(newMessage, true);
-      copyMessagesStateFromChannel(channel);
-      if (thread && newMessage.parent_id) {
-        var _threadMessages = channel.state.threads[newMessage.parent_id] || [];
-        setThreadMessages(_threadMessages);
-      }
-    }
-  });
-  var uploadPendingAttachments = (0, _hooks.useStableCallback)(function () {
-    var _ref8 = (0, _asyncToGenerator2.default)(function* (message) {
-      var _updatedMessage$attac;
-      var updatedMessage = {
-        ...message
-      };
-      if (!((_updatedMessage$attac = updatedMessage.attachments) != null && _updatedMessage$attac.length) || !(channel != null && channel.cid)) {
-        return updatedMessage;
-      }
-      var uploadOne = function () {
-        var _ref9 = (0, _asyncToGenerator2.default)(function* (attachment) {
-          var _client$offlineDb;
-          if (attachment.image_url && !(0, _utils.isLocalUrl)(attachment.image_url) || attachment.asset_url && !(0, _utils.isLocalUrl)(attachment.asset_url)) {
-            return;
-          }
-          var originalFile = attachment.originalFile;
-          if (!(originalFile != null && originalFile.uri)) {
-            return;
-          }
-          var localId = attachment.localId;
-          if (!localId) {
-            console.warn('uploadPendingAttachments: local attachment missing localId, skipping upload');
-            return;
-          }
-          var fileForUpload = originalFile;
-          if (attachment.type === _types.FileTypes.Image && !doFileUploadRequest) {
-            var _originalFile$name;
-            var filename = (_originalFile$name = originalFile.name) != null ? _originalFile$name : (0, _utils.getFileNameFromPath)(originalFile.uri);
-            var compressedUri = yield (0, _compressImage.compressedImageURI)(originalFile, compressImageQuality);
-            fileForUpload = {
-              ...originalFile,
-              name: filename,
-              uri: compressedUri
-            };
-          }
-          var response = yield client.uploadManager.upload({
-            channelCid: channel.cid,
-            file: fileForUpload,
-            id: localId
-          });
-          if (attachment.type === _types.FileTypes.Image) {
-            attachment.image_url = response.file;
-          } else {
-            attachment.asset_url = response.file;
-            if (response.thumb_url) {
-              attachment.thumb_url = response.thumb_url;
-            }
-          }
-          delete attachment.originalFile;
-          delete attachment.localId;
-          (_client$offlineDb = client.offlineDb) == null || _client$offlineDb.executeQuerySafely(db => db.updateMessage({
-            message: {
-              ...updatedMessage,
-              cid: channel.cid
-            }
-          }), {
-            method: 'updateMessage'
-          });
-        });
-        return function uploadOne(_x4) {
-          return _ref9.apply(this, arguments);
-        };
-      }();
-      yield Promise.all(updatedMessage.attachments.map(att => uploadOne(att)));
-      return updatedMessage;
-    });
-    return function (_x3) {
-      return _ref8.apply(this, arguments);
-    };
-  }());
-  var sendMessageRequest = (0, _hooks.useStableCallback)(function () {
-    var _ref0 = (0, _asyncToGenerator2.default)(function* ({
-      localMessage,
-      message,
-      options,
-      retrying
-    }) {
-      var failedMessageUpdated = false;
-      var handleFailedMessage = () => {
-        if (!failedMessageUpdated) {
-          var _client$offlineDb2;
-          var updatedMessage = {
-            ...localMessage,
-            cid: channel.cid,
-            status: _utils.MessageStatusTypes.FAILED
-          };
-          updateMessage(updatedMessage);
-          threadInstance == null || threadInstance.upsertReplyLocally == null || threadInstance.upsertReplyLocally({
-            message: updatedMessage
-          });
-          optimisticallyUpdatedNewMessages.delete(localMessage.id);
-          (_client$offlineDb2 = client.offlineDb) == null || _client$offlineDb2.executeQuerySafely(db => db.updateMessage({
-            message: updatedMessage
-          }), {
-            method: 'updateMessage'
-          });
-          failedMessageUpdated = true;
-        }
-      };
-      try {
-        var _messageResponse;
-        if (!isOnline) {
-          yield handleFailedMessage();
-        }
-        var updatedLocalMessage = yield uploadPendingAttachments(localMessage);
-        var attachments = updatedLocalMessage.attachments;
-        var text = message.text,
-          mentioned_users = message.mentioned_users;
-        if (!channel.id) {
-          return;
-        }
-        var messageData = {
-          ...message,
-          attachments,
-          text: (0, _patchMessageTextCommand.patchMessageTextCommand)(text != null ? text : '', mentioned_users != null ? mentioned_users : []),
-          type: message.type === 'error' ? 'regular' : message.type
-        };
-        var messageResponse = {};
-        if (doSendMessageRequest) {
-          messageResponse = yield doSendMessageRequest((channel == null ? void 0 : channel.cid) || '', messageData, options);
-        } else if (channel) {
-          messageResponse = yield channel.sendMessage(messageData, options);
-        }
-        if ((_messageResponse = messageResponse) != null && _messageResponse.message) {
-          var _client$offlineDb3;
-          var newMessageResponse = {
-            ...messageResponse.message,
-            status: _utils.MessageStatusTypes.RECEIVED
-          };
-          (_client$offlineDb3 = client.offlineDb) == null || _client$offlineDb3.executeQuerySafely(db => db.updateMessage({
-            message: {
-              ...newMessageResponse,
-              cid: channel.cid
-            }
-          }), {
-            method: 'updateMessage'
-          });
-          if (retrying) {
-            replaceMessage(localMessage, newMessageResponse);
-          } else {
-            updateMessage(newMessageResponse, {}, true);
-          }
-        }
-      } catch (err) {
-        console.log('Error sending message:', err);
-        yield handleFailedMessage();
-      }
-    });
-    return function (_x5) {
-      return _ref0.apply(this, arguments);
-    };
-  }());
-  var sendMessage = (0, _hooks.useStableCallback)(function () {
-    var _ref1 = (0, _asyncToGenerator2.default)(function* ({
-      localMessage,
-      message,
-      options
-    }) {
-      var _channel$state, _client$offlineDb4;
-      if (channel != null && (_channel$state = channel.state) != null && _channel$state.filterErrorMessages) {
-        channel.state.filterErrorMessages();
-      }
-      updateMessage(localMessage);
-      threadInstance == null || threadInstance.upsertReplyLocally == null || threadInstance.upsertReplyLocally({
-        message: localMessage
-      });
-      optimisticallyUpdatedNewMessages.add(localMessage.id);
-      (_client$offlineDb4 = client.offlineDb) == null || _client$offlineDb4.executeQuerySafely(db => db.upsertMessages({
-        messages: [{
-          ...localMessage,
-          cid: channel.cid,
-          status: _utils.MessageStatusTypes.FAILED
-        }]
-      }), {
-        method: 'upsertMessages'
-      });
-      if (preSendMessageRequest) {
-        yield preSendMessageRequest({
-          localMessage,
-          message,
-          options
-        });
-      }
-      yield sendMessageRequest({
-        localMessage,
-        message,
-        options
-      });
-    });
-    return function (_x6) {
-      return _ref1.apply(this, arguments);
-    };
-  }());
-  var retrySendMessage = (0, _hooks.useStableCallback)(function () {
-    var _ref10 = (0, _asyncToGenerator2.default)(function* (localMessage) {
-      var statusPendingMessage = {
-        ...localMessage,
-        status: _utils.MessageStatusTypes.SENDING
-      };
-      var messageWithoutReservedFields = (0, _streamChat.localMessageToNewMessagePayload)(statusPendingMessage);
-      if (!(0, _utils.isBouncedMessage)(localMessage)) {
-        updateMessage(messageWithoutReservedFields);
-      }
-      yield sendMessageRequest({
-        localMessage,
-        message: messageWithoutReservedFields,
-        retrying: true
-      });
-    });
-    return function (_x7) {
-      return _ref10.apply(this, arguments);
-    };
-  }());
-  var editMessage = (0, _hooks.useStableCallback)(function () {
-    var _ref11 = (0, _asyncToGenerator2.default)(function* ({
-      localMessage,
-      options
-    }) {
-      var _client$offlineDb5;
-      if (!channel) {
-        throw new Error('Channel has not been initialized');
-      }
-      var cid = channel.cid;
-      var currentMessage = channel.state.findMessage(localMessage.id, localMessage.parent_id);
-      var isFailedMessage = (currentMessage == null ? void 0 : currentMessage.status) === _utils.MessageStatusTypes.FAILED || localMessage.status === _utils.MessageStatusTypes.FAILED;
-      var optimisticEditedAt = new Date();
-      var optimisticEditedAtString = optimisticEditedAt.toISOString();
-      var optimisticMessage = {
-        ...currentMessage,
-        ...localMessage,
-        cid,
-        message_text_updated_at: isFailedMessage ? undefined : optimisticEditedAtString,
-        updated_at: optimisticEditedAt
-      };
-      updateMessage(optimisticMessage);
-      threadInstance == null || threadInstance.updateParentMessageOrReplyLocally(optimisticMessage);
-      (_client$offlineDb5 = client.offlineDb) == null || _client$offlineDb5.executeQuerySafely(db => db.updateMessage({
-        message: {
-          ...optimisticMessage,
-          cid
-        }
-      }), {
-        method: 'updateMessage'
-      });
-      var response = doUpdateMessageRequest ? yield doUpdateMessageRequest(cid, localMessage, options) : yield client.updateMessage(localMessage, undefined, options);
-      if (response != null && response.message) {
-        var _client$offlineDb6;
-        updateMessage(response.message);
-        threadInstance == null || threadInstance.updateParentMessageOrReplyLocally(response.message);
-        (_client$offlineDb6 = client.offlineDb) == null || _client$offlineDb6.executeQuerySafely(db => db.updateMessage({
-          message: {
-            ...response.message,
-            cid
-          }
-        }), {
-          method: 'updateMessage'
-        });
-      }
-      return response;
-    });
-    return function (_x8) {
-      return _ref11.apply(this, arguments);
-    };
-  }());
-  var removeMessage = (0, _hooks.useStableCallback)(function () {
-    var _ref12 = (0, _asyncToGenerator2.default)(function* (message) {
-      if (channel) {
-        channel.state.removeMessage(message);
-        copyMessagesStateFromChannel(channel);
-        if (thread) {
-          setThreadMessages(channel.state.threads[thread.id] || []);
-        }
-      }
-      if (client.offlineDb) {
-        yield client.offlineDb.handleRemoveMessage({
-          messageId: message.id
-        });
-      }
-    });
-    return function (_x9) {
-      return _ref12.apply(this, arguments);
-    };
-  }());
-  var sendReaction = (0, _hooks.useStableCallback)(function () {
-    var _ref13 = (0, _asyncToGenerator2.default)(function* (type, messageId) {
-      if (!(channel != null && channel.id) || !client.user) {
-        throw new Error('Channel has not been initialized');
-      }
-      var payload = [messageId, {
-        type
-      }, {
-        enforce_unique: enforceUniqueReaction
-      }];
-      if (enableOfflineSupport) {
-        yield (0, _addReactionToLocalState.addReactionToLocalState)({
-          channel,
-          enforceUniqueReaction,
-          messageId,
-          reactionType: type,
-          user: client.user
-        });
-        copyMessagesStateFromChannel(channel);
-      }
-      var sendReactionResponse = yield channel.sendReaction(...payload);
-      if (sendReactionResponse != null && sendReactionResponse.message) {
-        threadInstance == null || threadInstance.upsertReplyLocally == null || threadInstance.upsertReplyLocally({
-          message: sendReactionResponse.message
-        });
-      }
-    });
-    return function (_x0, _x1) {
-      return _ref13.apply(this, arguments);
-    };
-  }());
-  var deleteMessage = (0, _hooks.useStableCallback)(function () {
-    var _ref14 = (0, _asyncToGenerator2.default)(function* (message, optionsOrHardDelete = false) {
-      var options = {};
-      if (typeof optionsOrHardDelete === 'boolean') {
-        options = optionsOrHardDelete ? {
-          hardDelete: true
-        } : {};
-      } else if (optionsOrHardDelete != null && optionsOrHardDelete.deleteForMe) {
-        options = {
-          deleteForMe: true
-        };
-      } else if (optionsOrHardDelete != null && optionsOrHardDelete.hardDelete) {
-        options = {
-          hardDelete: true
-        };
-      }
-      if (!channel.id) {
-        throw new Error('Channel has not been initialized yet');
-      }
-      if (message.status === _utils.MessageStatusTypes.FAILED) {
-        yield removeMessage(message);
-        return;
-      }
-      var updatedMessage = {
-        ...message,
-        cid: channel.cid,
-        deleted_at: new Date(),
-        type: 'deleted'
-      };
-      updateMessage(updatedMessage);
-      threadInstance == null || threadInstance.upsertReplyLocally({
-        message: updatedMessage
-      });
-      var data = yield client.deleteMessage(message.id, options);
-      if (data != null && data.message) {
-        updateMessage({
-          ...data.message
-        });
-      }
-    });
-    return function (_x10) {
-      return _ref14.apply(this, arguments);
-    };
-  }());
-  var deleteReaction = (0, _hooks.useStableCallback)(function () {
-    var _ref15 = (0, _asyncToGenerator2.default)(function* (type, messageId) {
-      if (!(channel != null && channel.id) || !client.user) {
-        throw new Error('Channel has not been initialized');
-      }
-      var payload = [messageId, type];
-      if (enableOfflineSupport) {
-        channel.state.removeReaction({
-          created_at: '',
-          message_id: messageId,
-          type,
-          updated_at: ''
-        });
-        copyMessagesStateFromChannel(channel);
-      }
-      yield channel.deleteReaction(...payload);
-    });
-    return function (_x11, _x12) {
-      return _ref15.apply(this, arguments);
-    };
-  }());
-  var openThread = (0, _react.useCallback)(message => {
-    setThread(message);
-    if (channel.initialized) {
-      channel.markRead({
-        thread_id: message.id
-      });
-    }
-  }, [channel, setThread]);
-  var closeThread = (0, _react.useCallback)(() => {
-    setThread(null);
-    setThreadMessages([]);
-  }, [setThread, setThreadMessages]);
-  var loadMoreThreadFinished = (0, _react.useRef)((0, _debounce.default)((newThreadHasMore, updatedThreadMessages) => {
-    setThreadHasMore(newThreadHasMore);
-    setThreadLoadingMore(false);
-    setThreadMessages(updatedThreadMessages);
-  }, defaultDebounceInterval, debounceOptions)).current;
-  var loadMoreThread = (0, _hooks.useStableCallback)((0, _asyncToGenerator2.default)(function* () {
-    if (threadLoadingMore || !(thread != null && thread.id)) {
-      return;
-    }
-    setThreadLoadingMore(true);
-    try {
-      if (channel) {
-        var _threadMessages$;
-        var parentID = thread.id;
-        channel.state.threads[parentID] = threadMessages;
-        var oldestMessageID = threadMessages == null || (_threadMessages$ = threadMessages[0]) == null ? void 0 : _threadMessages$.id;
-        var limit = 50;
-        var queryResponse = yield channel.getReplies(parentID, {
-          id_lt: oldestMessageID,
-          limit
-        });
-        var updatedHasMore = queryResponse.messages.length === limit;
-        var updatedThreadMessages = channel.state.threads[parentID] || [];
-        loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
-      }
-    } catch (err) {
-      console.warn('Message pagination request failed with error', err);
-      if (err instanceof Error) {
-        setError(err);
-      } else {
-        setError(true);
-      }
-      setThreadLoadingMore(false);
-      throw err;
-    }
-  }));
-  var handleClosePicker = (0, _hooks.useStableCallback)(() => closePicker(bottomSheetRef));
-  var handleOpenPicker = (0, _hooks.useStableCallback)(() => openPicker(bottomSheetRef));
-  var attachmentPickerContext = (0, _react.useMemo)(() => ({
-    bottomInset,
-    bottomSheetRef,
-    closePicker: handleClosePicker,
-    disableAttachmentPicker,
-    openPicker: handleOpenPicker,
-    shouldRenderAttachmentPicker,
-    topInset,
-    numberOfAttachmentPickerImageColumns,
-    attachmentPickerBottomSheetHeight,
-    attachmentSelectionBarHeight,
-    numberOfAttachmentImagesToLoadPerCall
-  }), [bottomInset, bottomSheetRef, handleClosePicker, disableAttachmentPicker, handleOpenPicker, shouldRenderAttachmentPicker, topInset, numberOfAttachmentPickerImageColumns, attachmentPickerBottomSheetHeight, attachmentSelectionBarHeight, numberOfAttachmentImagesToLoadPerCall]);
-  var ownCapabilitiesContext = (0, _useCreateOwnCapabilitiesContext.useCreateOwnCapabilitiesContext)({
-    channel,
-    overrideCapabilities: overrideOwnCapabilities
-  });
-  var channelContext = (0, _useCreateChannelContext.useCreateChannelContext)({
-    channel,
-    channelUnreadStateStore,
-    disabled: !!(channel != null && (_channel$data = channel.data) != null && _channel$data.frozen),
-    enableMessageGroupingByUser,
-    enforceUniqueReaction,
-    error,
-    allowDateSeparatorForSystemMessages,
-    hideDateSeparators,
-    hideStickyDateHeader,
-    highlightedMessageId,
-    isChannelActive: shouldSyncChannel,
-    loadChannelAroundMessage,
-    loadChannelAtFirstUnreadMessage,
-    loading: channelMessagesState.loading,
-    markRead,
-    maximumMessageLimit,
-    maxTimeBetweenGroupedMessages,
-    members: (_channelState$members = channelState.members) != null ? _channelState$members : {},
-    read: (_channelState$read = channelState.read) != null ? _channelState$read : {},
-    reloadChannel,
-    scrollToFirstUnreadThreshold,
-    setChannelUnreadState,
-    setTargetedMessage,
-    hasPendingInitialTargetLoad,
-    targetedMessage,
-    threadList,
-    uploadAbortControllerRef,
-    watcherCount: channelState.watcherCount,
-    watchers: channelState.watchers
-  });
-  var inputMessageInputContext = (0, _useCreateInputMessageInputContext.useCreateInputMessageInputContext)({
-    additionalTextInputProps,
-    allowSendBeforeAttachmentsUpload,
-    asyncMessagesLockDistance,
-    asyncMessagesMinimumPressDuration,
-    audioRecordingSendOnComplete,
-    asyncMessagesSlideToCancelDistance,
-    attachmentPickerBottomSheetHeight,
-    attachmentSelectionBarHeight,
-    audioRecordingEnabled,
-    channelId,
-    compressImageQuality,
-    createPollOptionGap,
-    doFileUploadRequest,
-    editMessage,
-    focusInputOnPickerClose,
-    handleAttachButtonPress,
-    hasCameraPicker,
-    hasCommands: hasCommands != null ? hasCommands : !!(clientChannelConfig != null && (_clientChannelConfig$ = clientChannelConfig.commands) != null && _clientChannelConfig$.length),
-    hasFilePicker,
-    hasImagePicker,
-    messageInputFloating,
-    messageInputHeightStore,
-    openPollCreationDialog,
-    sendMessage,
-    setInputRef
-  });
-  var messageListContext = (0, _useCreatePaginatedMessageListContext.useCreatePaginatedMessageListContext)({
-    channelId,
-    hasMore: channelMessagesState.hasMore,
-    loadingMore: loadingMoreProp !== undefined ? loadingMoreProp : channelMessagesState.loadingMore,
-    loadingMoreRecent: loadingMoreRecentProp !== undefined ? loadingMoreRecentProp : channelMessagesState.loadingMoreRecent,
-    loadLatestMessages,
-    loadMore,
-    loadMoreRecent,
-    messages: (_channelMessagesState = channelMessagesState.messages) != null ? _channelMessagesState : [],
-    viewabilityChangedCallback
-  });
-  var messagesContext = (0, _useCreateMessagesContext.useCreateMessagesContext)({
-    additionalPressableProps,
-    channelId,
-    customMessageSwipeAction,
-    deleteMessage,
-    deleteReaction,
-    disableTypingIndicator,
-    dismissKeyboardOnMessageTouch,
-    enableMessageGroupingByUser,
-    enableSwipeToReply,
-    FlatList,
-    forceAlignMessages,
-    getMessageGroupStyle,
-    giphyVersion,
-    handleBan,
-    handleCopy,
-    handleDelete,
-    handleDeleteForMe,
-    handleEdit,
-    handleFlag,
-    handleMarkUnread,
-    handleMute,
-    handlePinMessage,
-    handleQuotedReply,
-    handleReaction,
-    handleRetry,
-    handleThreadReply,
-    handleBlockUser,
-    hasCreatePoll: hasCreatePoll === undefined ? pollCreationEnabled : hasCreatePoll && pollCreationEnabled,
-    initialScrollToFirstUnreadMessage: !messageId && initialScrollToFirstUnreadMessage,
-    isAttachmentEqual,
-    isMessageAIGenerated,
-    markdownRules,
-    messageActions,
-    messageContentOrder,
-    messageOverlayTargetId,
-    messageSwipeToReplyHitSlop,
-    messageTextNumberOfLines,
-    myMessageTheme,
-    onLongPressMessage,
-    onPressInMessage,
-    onPressMessage,
-    reactionListPosition,
-    reactionListType,
-    removeMessage,
-    retrySendMessage,
-    selectReaction,
-    sendReaction,
-    shouldShowUnreadUnderlay,
-    supportedReactions,
-    targetedMessage,
-    updateMessage,
-    urlPreviewType
-  });
-  var threadContext = (0, _useCreateThreadContext.useCreateThreadContext)({
-    allowThreadMessagesInChannel,
-    onAlsoSentToChannelHeaderPress,
-    closeThread,
-    loadMoreThread,
-    openThread,
-    reloadThread,
-    setThreadLoadingMore,
-    thread,
-    threadHasMore,
-    threadInstance,
-    threadLoadingMore,
-    threadMessages
-  });
-  var typingContext = (0, _useCreateTypingContext.useCreateTypingContext)({
-    typing: (_channelState$typing = channelState.typing) != null ? _channelState$typing : {}
-  });
-  var audioPlayerContext = (0, _react.useMemo)(() => ({
-    allowConcurrentAudioPlayback
-  }), [allowConcurrentAudioPlayback]);
-  var messageComposerContext = (0, _react.useMemo)(() => ({
-    channel,
-    thread,
-    threadInstance
-  }), [channel, thread, threadInstance]);
-  if (deleted) {
-    return null;
-  }
-  if (!channel || error && ((_channelMessagesState2 = channelMessagesState.messages) == null ? void 0 : _channelMessagesState2.length) === 0) {
     return (0, _jsxRuntime.jsx)(LoadingErrorIndicator, {
-      error: error,
+      error: blockingError,
       listType: "message",
-      retry: reloadChannel
+      retry: retry
     });
   }
   if (!(channel != null && channel.cid) || !channel.watch) {
     return (0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.selectChannel,
       testID: "no-channel",
-      children: t('Please select a channel first')
+      children: t('channel.noneSelected.text', 'Please select a channel first')
     });
   }
-  return (0, _jsxRuntime.jsx)(KeyboardCompatibleView, {
-    behavior: keyboardBehavior,
-    enabled: !disableKeyboardCompatibleView,
-    keyboardVerticalOffset: keyboardVerticalOffset,
-    ...additionalKeyboardAvoidingViewProps,
-    children: (0, _jsxRuntime.jsx)(_ChannelContext.ChannelProvider, {
-      value: channelContext,
-      children: (0, _jsxRuntime.jsx)(_OwnCapabilitiesContext.OwnCapabilitiesProvider, {
-        value: ownCapabilitiesContext,
-        children: (0, _jsxRuntime.jsx)(_TypingContext.TypingProvider, {
-          value: typingContext,
-          children: (0, _jsxRuntime.jsx)(_PaginatedMessageListContext.PaginatedMessageListProvider, {
-            value: messageListContext,
-            children: (0, _jsxRuntime.jsx)(_MessagesContext.MessagesProvider, {
-              value: messagesContext,
-              children: (0, _jsxRuntime.jsx)(_ThreadContext.ThreadProvider, {
-                value: threadContext,
-                children: (0, _jsxRuntime.jsx)(_AttachmentPickerContext.AttachmentPickerProvider, {
-                  value: attachmentPickerContext,
-                  children: (0, _jsxRuntime.jsx)(_MessageComposerContext.MessageComposerProvider, {
-                    value: messageComposerContext,
-                    children: (0, _jsxRuntime.jsx)(_MessageInputContext.MessageInputProvider, {
-                      value: inputMessageInputContext,
-                      children: (0, _jsxRuntime.jsxs)(_AudioPlayerContext.AudioPlayerProvider, {
-                        value: audioPlayerContext,
-                        children: [(0, _jsxRuntime.jsx)(_NotificationAnnouncer.NotificationAnnouncer, {}), (0, _jsxRuntime.jsx)(_reactNative.View, {
-                          style: {
-                            height: '100%'
-                          },
-                          children: children
-                        }), shouldRenderAttachmentPicker ? (0, _jsxRuntime.jsx)(_AttachmentPicker.AttachmentPicker, {}) : null]
-                      })
-                    })
-                  })
-                })
-              })
-            })
-          })
-        })
-      })
-    })
+  return (0, _jsxRuntime.jsx)(_ChannelShell.ChannelShell, {
+    ...shellProps,
+    channel: channel,
+    hasPendingInitialTargetLoad: hasPendingInitialTargetLoad,
+    children: children
   });
 };
 var Channel = props => {
-  var _props$notificationHo, _props$channel;
   var _useChatContext = (0, _ChatContext.useChatContext)(),
-    client = _useChatContext.client,
-    enableOfflineSupport = _useChatContext.enableOfflineSupport,
-    isOnline = _useChatContext.isOnline,
-    isMessageAIGenerated = _useChatContext.isMessageAIGenerated;
+    client = _useChatContext.client;
   var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
     t = _useTranslationContex.t;
-  var notificationHostId = (_props$notificationHo = props.notificationHostId) != null ? _props$notificationHo : (_props$channel = props.channel) != null && _props$channel.cid ? (0, _notificationTarget.getChannelNotificationHostId)(props.channel.cid) : undefined;
-  var threadFromProps = props == null ? void 0 : props.thread;
-  var threadInstance = threadFromProps == null ? void 0 : threadFromProps.threadInstance;
-  var threadMessage = threadInstance ? threadFromProps.thread : threadFromProps;
-  var thread = {
-    thread: threadMessage,
-    threadInstance
-  };
-  var shouldSyncChannel = threadMessage != null && threadMessage.id ? !!props.threadList : true;
-  var _useChannelState = (0, _useChannelState2.useChannelState)(props.channel, props.threadList ? threadMessage == null ? void 0 : threadMessage.id : undefined),
-    setThreadMessages = _useChannelState.setThreadMessages,
-    threadMessages = _useChannelState.threadMessages;
+  var notificationHostIdProp = props.notificationHostId,
+    channelProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
+  var channel = (0, _useSupersededChannelSwap.useSupersededChannelSwap)(props.channel);
+  var notificationHostId = notificationHostIdProp != null ? notificationHostIdProp : channel != null && channel.cid ? (0, _notificationTarget.getChannelNotificationHostId)(channel.cid) : undefined;
   var channelWithContext = (0, _jsxRuntime.jsx)(ChannelWithContext, {
     client,
-    enableOfflineSupport,
     t,
-    ...props,
-    shouldSyncChannel: shouldSyncChannel,
-    isMessageAIGenerated,
-    isOnline,
-    setThreadMessages,
-    thread,
-    threadMessages
+    ...channelProps,
+    channel: channel
   });
   return notificationHostId ? (0, _jsxRuntime.jsx)(_NotificationTargetContext.NotificationTargetProvider, {
     hostId: notificationHostId,