stream-chat-react-native-core 5.44.2 → 6.0.0-beta.1

package/src/components/Channel/Channel.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
 
 import debounce from 'lodash/debounce';
@@ -11,6 +11,7 @@ import {
   ChannelState,
   Channel as ChannelType,
   EventHandler,
+  FormatMessageResponse,
   logChatPromiseExecution,
   MessageResponse,
   Reaction,
@@ -21,6 +22,7 @@ import {
   Thread,
 } from 'stream-chat';
 
+import { useChannelDataState } from './hooks/useChannelDataState';
 import { useCreateChannelContext } from './hooks/useCreateChannelContext';
 
 import { useCreateInputMessageInputContext } from './hooks/useCreateInputMessageInputContext';
@@ -34,6 +36,7 @@ import { useCreateThreadContext } from './hooks/useCreateThreadContext';
 
 import { useCreateTypingContext } from './hooks/useCreateTypingContext';
 
+import { useMessageListPagination } from './hooks/useMessageListPagination';
 import { useTargetedMessage } from './hooks/useTargetedMessage';
 
 import { MessageContextValue } from '../../contexts';
@@ -81,7 +84,13 @@ import {
   ThumbsUpReaction,
   WutReaction,
 } from '../../icons';
-import { FlatList as FlatListDefault, isImagePickerAvailable, pickDocument } from '../../native';
+import {
+  FlatList as FlatListDefault,
+  isAudioRecorderAvailable,
+  isDocumentPickerAvailable,
+  isImageMediaLibraryAvailable,
+  isImagePickerAvailable,
+} from '../../native';
 import * as dbApi from '../../store/apis';
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
@@ -135,7 +144,8 @@ import { MessageRepliesAvatars as MessageRepliesAvatarsDefault } from '../Messag
 import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/MessageSimple';
 import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/MessageStatus';
 import { MessageTimestamp as MessageTimestampDefault } from '../Message/MessageSimple/MessageTimestamp';
-import { ReactionList as ReactionListDefault } from '../Message/MessageSimple/ReactionList';
+import { ReactionListBottom as ReactionListBottomDefault } from '../Message/MessageSimple/ReactionList/ReactionListBottom';
+import { ReactionListTop as ReactionListTopDefault } from '../Message/MessageSimple/ReactionList/ReactionListTop';
 import { StreamingMessageView as DefaultStreamingMessageView } from '../Message/MessageSimple/StreamingMessageView';
 import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
 import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
@@ -169,7 +179,13 @@ import { ScrollToBottomButton as ScrollToBottomButtonDefault } from '../MessageL
 import { StickyHeader as StickyHeaderDefault } from '../MessageList/StickyHeader';
 import { TypingIndicator as TypingIndicatorDefault } from '../MessageList/TypingIndicator';
 import { TypingIndicatorContainer as TypingIndicatorContainerDefault } from '../MessageList/TypingIndicatorContainer';
-import { OverlayReactionList as OverlayReactionListDefault } from '../MessageOverlay/OverlayReactionList';
+import { MessageActionList as MessageActionListDefault } from '../MessageMenu/MessageActionList';
+import { MessageActionListItem as MessageActionListItemDefault } from '../MessageMenu/MessageActionListItem';
+import { MessageMenu as MessageMenuDefault } from '../MessageMenu/MessageMenu';
+import { MessageReactionPicker as MessageReactionPickerDefault } from '../MessageMenu/MessageReactionPicker';
+import { MessageUserReactions as MessageUserReactionsDefault } from '../MessageMenu/MessageUserReactions';
+import { MessageUserReactionsAvatar as MessageUserReactionsAvatarDefault } from '../MessageMenu/MessageUserReactionsAvatar';
+import { MessageUserReactionsItem as MessageUserReactionsItemDefault } from '../MessageMenu/MessageUserReactionsItem';
 import { Reply as ReplyDefault } from '../Reply/Reply';
 
 const styles = StyleSheet.create({
@@ -255,11 +271,11 @@ export type ChannelPropsWithContext<
       'messages' | 'loadingMore' | 'loadingMoreRecent'
     >
   > &
-  UseChannelStateValue<StreamChatGenerics> &
+  Pick<UseChannelStateValue<StreamChatGenerics>, 'threadMessages' | 'setThreadMessages'> &
   Partial<
     Pick<
       MessagesContextValue<StreamChatGenerics>,
-      | 'additionalTouchableProps'
+      | 'additionalPressableProps'
       | 'Attachment'
       | 'AttachmentActions'
       | 'AudioAttachment'
@@ -281,7 +297,6 @@ export type ChannelPropsWithContext<
       | 'Giphy'
       | 'giphyVersion'
       | 'handleBan'
-      | 'handleBlock'
       | 'handleCopy'
       | 'handleDelete'
       | 'handleEdit'
@@ -300,6 +315,8 @@ export type ChannelPropsWithContext<
       | 'ImageLoadingIndicator'
       | 'markdownRules'
       | 'Message'
+      | 'MessageActionList'
+      | 'MessageActionListItem'
       | 'messageActions'
       | 'MessageAvatar'
       | 'MessageBounce'
@@ -311,6 +328,7 @@ export type ChannelPropsWithContext<
       | 'MessageFooter'
       | 'MessageHeader'
       | 'MessageList'
+      | 'MessageMenu'
       | 'MessagePinnedHeader'
       | 'MessageReplies'
       | 'MessageRepliesAvatars'
@@ -318,13 +336,19 @@ export type ChannelPropsWithContext<
       | 'MessageStatus'
       | 'MessageSystem'
       | 'MessageText'
+      | 'messageTextNumberOfLines'
       | 'MessageTimestamp'
+      | 'MessageUserReactions'
       | 'myMessageTheme'
       | 'onLongPressMessage'
       | 'onPressInMessage'
       | 'onPressMessage'
-      | 'OverlayReactionList'
-      | 'ReactionList'
+      | 'MessageReactionPicker'
+      | 'MessageUserReactionsAvatar'
+      | 'MessageUserReactionsItem'
+      | 'ReactionListBottom'
+      | 'reactionListPosition'
+      | 'ReactionListTop'
       | 'Reply'
       | 'shouldShowUnreadUnderlay'
       | 'ScrollToBottomButton'
@@ -347,10 +371,6 @@ export type ChannelPropsWithContext<
      * Additional props passed to keyboard avoiding view
      */
     additionalKeyboardAvoidingViewProps?: Partial<KeyboardAvoidingViewProps>;
-    /**
-     * Disables the channel UI if the channel is frozen
-     */
-    disableIfFrozenChannel?: boolean;
     /**
      * When true, disables the KeyboardCompatibleView wrapper
      *
@@ -418,6 +438,10 @@ export type ChannelPropsWithContext<
      * Load the channel at a specified message instead of the most recent message.
      */
     messageId?: string;
+    /**
+     * @deprecated
+     * The time interval for throttling while updating the message state
+     */
     newMessageStateUpdateThrottleInterval?: number;
     overrideOwnCapabilities?: Partial<OwnCapabilitiesContextValue>;
     stateUpdateThrottleInterval?: number;
@@ -439,8 +463,8 @@ const ChannelWithContext = <
 ) => {
   const {
     additionalKeyboardAvoidingViewProps,
+    additionalPressableProps,
     additionalTextInputProps,
-    additionalTouchableProps,
     allowThreadMessagesInChannel = true,
     asyncMessagesLockDistance = 50,
     asyncMessagesMinimumPressDuration = 500,
@@ -452,7 +476,7 @@ const ChannelWithContext = <
     AudioAttachment = AudioAttachmentDefault,
     AudioAttachmentUploadPreview = AudioAttachmentDefault,
     AudioRecorder = AudioRecorderDefault,
-    audioRecordingEnabled = false,
+    audioRecordingEnabled = isAudioRecorderAvailable(),
     AudioRecordingInProgress = AudioRecordingInProgressDefault,
     AudioRecordingLockIndicator = AudioRecordingLockIndicatorDefault,
     AudioRecordingPreview = AudioRecordingPreviewDefault,
@@ -475,7 +499,6 @@ const ChannelWithContext = <
     CreatePollContent,
     DateHeader = DateHeaderDefault,
     deletedMessagesVisibilityType = 'always',
-    disableIfFrozenChannel = true,
     disableKeyboardCompatibleView = false,
     disableTypingIndicator,
     dismissKeyboardOnMessageTouch = true,
@@ -502,7 +525,6 @@ const ChannelWithContext = <
     giphyVersion = 'fixed_height',
     handleAttachButtonPress,
     handleBan,
-    handleBlock,
     handleCopy,
     handleDelete,
     handleEdit,
@@ -513,12 +535,12 @@ const ChannelWithContext = <
     handleReaction,
     handleRetry,
     handleThreadReply,
-    // If pickDocument isn't available, default to hiding the file picker
     hasCameraPicker = isImagePickerAvailable(),
     hasCommands = true,
     hasCreatePoll,
-    hasFilePicker = pickDocument !== null,
-    hasImagePicker = true,
+    // If pickDocument isn't available, default to hiding the file picker
+    hasFilePicker = isDocumentPickerAvailable(),
+    hasImagePicker = isImagePickerAvailable() || isImageMediaLibraryAvailable(),
     hideDateSeparators = false,
     hideStickyDateHeader = false,
     ImageLoadingFailedIndicator = ImageLoadingFailedIndicatorDefault,
@@ -547,10 +569,11 @@ const ChannelWithContext = <
     maxMessageLength: maxMessageLengthProp,
     maxNumberOfFiles = 10,
     maxTimeBetweenGroupedMessages,
-    members,
     mentionAllAppUsersEnabled = false,
     mentionAllAppUsersQuery,
     Message = MessageDefault,
+    MessageActionList = MessageActionListDefault,
+    MessageActionListItem = MessageActionListItemDefault,
     messageActions,
     MessageAvatar = MessageAvatarDefault,
     MessageBounce = MessageBounceDefault,
@@ -571,18 +594,24 @@ const ChannelWithContext = <
     MessageHeader,
     messageId,
     MessageList = MessageListDefault,
+    MessageMenu = MessageMenuDefault,
     MessagePinnedHeader = MessagePinnedHeaderDefault,
+    MessageReactionPicker = MessageReactionPickerDefault,
     MessageReplies = MessageRepliesDefault,
     MessageRepliesAvatars = MessageRepliesAvatarsDefault,
-    messages,
     MessageSimple = MessageSimpleDefault,
     MessageStatus = MessageStatusDefault,
     MessageSystem = MessageSystemDefault,
     MessageText,
+    messageTextNumberOfLines,
     MessageTimestamp = MessageTimestampDefault,
+    MessageUserReactions = MessageUserReactionsDefault,
+    MessageUserReactionsAvatar = MessageUserReactionsAvatarDefault,
+    MessageUserReactionsItem = MessageUserReactionsItemDefault,
     MoreOptionsButton = MoreOptionsButtonDefault,
     myMessageTheme,
     NetworkDownIndicator = NetworkDownIndicatorDefault,
+    // TODO: Think about this one
     newMessageStateUpdateThrottleInterval = defaultThrottleInterval,
     numberOfLines = 5,
     onChangeText,
@@ -590,11 +619,11 @@ const ChannelWithContext = <
     onPressInMessage,
     onPressMessage,
     openPollCreationDialog,
-    OverlayReactionList = OverlayReactionListDefault,
     overrideOwnCapabilities,
     PollContent,
-    ReactionList = ReactionListDefault,
-    read,
+    ReactionListBottom = ReactionListBottomDefault,
+    reactionListPosition = 'top',
+    ReactionListTop = ReactionListTopDefault,
     Reply = ReplyDefault,
     ScrollToBottomButton = ScrollToBottomButtonDefault,
     selectReaction,
@@ -602,13 +631,7 @@ const ChannelWithContext = <
     sendImageAsync = false,
     SendMessageDisallowedIndicator = SendMessageDisallowedIndicatorDefault,
     setInputRef,
-    setMembers,
-    setMessages,
-    setRead,
     setThreadMessages,
-    setTyping,
-    setWatcherCount,
-    setWatchers,
     shouldShowUnreadUnderlay = true,
     shouldSyncChannel,
     ShowThreadMessageInChannelButton = ShowThreadMessageInChannelButtonDefault,
@@ -622,14 +645,11 @@ const ChannelWithContext = <
     thread: threadFromProps,
     threadList,
     threadMessages,
-    typing,
     TypingIndicator = TypingIndicatorDefault,
     TypingIndicatorContainer = TypingIndicatorContainerDefault,
     UploadProgressIndicator = UploadProgressIndicatorDefault,
     UrlPreview = CardDefault,
     VideoThumbnail = VideoThumbnailDefault,
-    watcherCount,
-    watchers,
   } = props;
 
   const { thread: threadProps, threadInstance } = threadFromProps;
@@ -644,17 +664,12 @@ const ChannelWithContext = <
       colors: { black },
     },
   } = useTheme();
-  const [deleted, setDeleted] = useState(false);
+  const [deleted, setDeleted] = useState<boolean>(false);
   const [editing, setEditing] = useState<MessageType<StreamChatGenerics> | undefined>(undefined);
   const [error, setError] = useState<Error | boolean>(false);
-  const [hasMore, setHasMore] = useState(true);
   const [lastRead, setLastRead] = useState<ChannelContextValue<StreamChatGenerics>['lastRead']>();
-  const [loading, setLoading] = useState(false);
-  const [loadingMore, setLoadingMore] = useState(false);
-
-  const [loadingMoreRecent, setLoadingMoreRecent] = useState(false);
-  const [quotedMessage, setQuotedMessage] = useState<boolean | MessageType<StreamChatGenerics>>(
-    false,
+  const [quotedMessage, setQuotedMessage] = useState<MessageType<StreamChatGenerics> | undefined>(
+    undefined,
   );
   const [thread, setThread] = useState<MessageType<StreamChatGenerics> | null>(threadProps || null);
   const [threadHasMore, setThreadHasMore] = useState(true);
@@ -662,19 +677,7 @@ const ChannelWithContext = <
 
   const syncingChannelRef = useRef(false);
 
-  /**
-   * Flag to track if we know for sure that there are no more recent messages to load.
-   * This is necessary to avoid unnecessary api calls to load recent messages on pagination.
-   */
-  const [hasNoMoreRecentMessagesToLoad, setHasNoMoreRecentMessagesToLoad] = useState(true);
-
-  const { prevTargetedMessage, setTargetedMessage, targetedMessage } = useTargetedMessage();
-
-  /**
-   * If we loaded a channel around message
-   * We may have moved latest message to a new message set in that case mark this ref to avoid fetching
-   */
-  const hasOverlappingRecentMessagesRef = useRef(false);
+  const { setTargetedMessage, targetedMessage } = useTargetedMessage();
 
   /**
    * This ref will hold the abort controllers for
@@ -686,50 +689,142 @@ const ChannelWithContext = <
   const channelId = channel?.id || '';
   const pollCreationEnabled = !channel.disconnected && !!channel?.id && channel?.getConfig()?.polls;
 
+  const {
+    copyStateFromChannel,
+    initStateFromChannel,
+    setTyping,
+    state: channelState,
+  } = useChannelDataState<StreamChatGenerics>(channel);
+
+  const {
+    copyMessagesStateFromChannel,
+    loadChannelAroundMessage: loadChannelAroundMessageFn,
+    loadChannelAtFirstUnreadMessage,
+    loadInitialMessagesStateFromChannel,
+    loadLatestMessages,
+    loadMore,
+    loadMoreRecent,
+    state: channelMessagesState,
+  } = useMessageListPagination<StreamChatGenerics>({
+    channel,
+  });
+
+  /**
+   * Since we copy the current channel state all together, we need to find the greatest time among the below two and apply it as the throttling time for copying the channel state.
+   * This is done until we remove the newMessageStateUpdateThrottleInterval prop.
+   */
+  const copyChannelStateThrottlingTime =
+    newMessageStateUpdateThrottleInterval > stateUpdateThrottleInterval
+      ? newMessageStateUpdateThrottleInterval
+      : stateUpdateThrottleInterval;
+
+  const copyChannelState = useRef(
+    throttle(
+      () => {
+        if (channel) {
+          copyStateFromChannel(channel);
+          copyMessagesStateFromChannel(channel);
+        }
+      },
+      copyChannelStateThrottlingTime,
+      throttleOptions,
+    ),
+  ).current;
+
+  const handleEvent: EventHandler<StreamChatGenerics> = (event) => {
+    if (shouldSyncChannel) {
+      // Ignore user.watching.start and user.watching.stop events
+      const ignorableEvents = ['user.watching.start', 'user.watching.stop'];
+      if (ignorableEvents.includes(event.type)) return;
+
+      // If the event is typing.start or typing.stop, set the typing state
+      const isTypingEvent = event.type === 'typing.start' || event.type === 'typing.stop';
+      if (isTypingEvent) {
+        setTyping(channel);
+      } else {
+        if (thread?.id) {
+          const updatedThreadMessages =
+            (thread.id && channel && channel.state.threads[thread.id]) || threadMessages;
+          setThreadMessages(updatedThreadMessages);
+
+          if (channel && event.message?.id === thread.id && !threadInstance) {
+            const updatedThread = channel.state.formatMessage(event.message);
+            setThread(updatedThread);
+          }
+        }
+      }
+
+      // only update channel state if the events are not the previously subscribed useEffect's subscription events
+      if (channel && channel.initialized) {
+        copyChannelState();
+      }
+    }
+  };
+
   useEffect(() => {
+    let listener: ReturnType<typeof channel.on>;
     const initChannel = async () => {
       if (!channel || !shouldSyncChannel || channel.offlineMode) return;
-      /**
-       * Loading channel at first unread message  requires channel to be initialized in the first place,
-       * since we use read state on channel to decide what offset to load channel at.
-       * Also there is no use case from UX perspective, why one would need loading uninitialized channel at particular message.
-       * If the channel is not initiated, then we need to do channel.watch, which is more expensive for backend than channel.query.
-       */
-      if (!channel.initialized) {
-        await loadChannel();
+      let errored = false;
+
+      if (!channel.initialized || !channel.state.isUpToDate) {
+        try {
+          await channel?.watch();
+        } catch (err) {
+          console.warn('Channel watch request failed with error:', err);
+          setError(true);
+          errored = true;
+        }
       }
 
-      if (messageId) {
-        loadChannelAroundMessage({ messageId });
+      if (!errored) {
+        initStateFromChannel(channel);
+        loadInitialMessagesStateFromChannel(channel, channel.state.messagePagination.hasPrev);
       }
-      // The condition, where if the count of unread messages is greater than 4, then scroll to the first unread message.
-      else if (
+
+      if (messageId) {
+        await loadChannelAroundMessage({ messageId, setTargetedMessage });
+      } else if (
         initialScrollToFirstUnreadMessage &&
         channel.countUnread() > scrollToFirstUnreadThreshold
       ) {
-        loadChannelAtFirstUnreadMessage();
-      }
-      // If the messageId is undefined and the last message and the current message id do not match we load the channel at the very bottom.
-      else if (
-        channel.state.messages?.[channel.state.messages.length - 1]?.id !==
-          channel.state.latestMessages?.[channel.state.latestMessages.length - 1]?.id &&
-        !messageId
-      ) {
-        await loadChannel();
+        await loadChannelAtFirstUnreadMessage({ setTargetedMessage });
       }
+      listener = channel.on(handleEvent);
     };
 
     initChannel();
 
     return () => {
       copyChannelState.cancel();
-      copyReadState.cancel();
-      copyTypingState.cancel();
-      loadMoreFinished.cancel();
       loadMoreThreadFinished.cancel();
+      listener?.unsubscribe();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channelId, messageId]);
+  }, [channel.cid, messageId, shouldSyncChannel]);
+
+  // subscribe to channel.deleted event
+  useEffect(() => {
+    const { unsubscribe } = client.on('channel.deleted', (event) => {
+      if (event.cid === channel?.cid) {
+        setDeleted(true);
+      }
+    });
+
+    return unsubscribe;
+  }, [channel?.cid, client]);
+
+  /**
+   * Subscription to the Notification mark_read event.
+   */
+  useEffect(() => {
+    const handleEvent: EventHandler<StreamChatGenerics> = (event) => {
+      if (channel.cid === event.cid) copyChannelState();
+    };
+
+    const { unsubscribe } = client.on('notification.mark_read', handleEvent);
+    return unsubscribe;
+  }, [channel.cid, client, copyChannelState]);
 
   const threadPropsExists = !!threadProps;
 
@@ -760,17 +855,6 @@ const ChannelWithContext = <
 
   useAppStateListener(undefined, handleAppBackground);
 
-  /**
-   * CHANNEL CONSTANTS
-   */
-  const isAdmin = client?.user?.role === 'admin' || channel?.state.membership.role === 'admin';
-
-  const isModerator =
-    channel?.state.membership.role === 'channel_moderator' ||
-    channel?.state.membership.role === 'moderator';
-
-  const isOwner = channel?.state.membership.role === 'owner';
-
   /**
    * CHANNEL METHODS
    */
@@ -792,464 +876,6 @@ const ChannelWithContext = <
     ),
   ).current;
 
-  const copyMessagesState = useRef(
-    throttle(
-      () => {
-        if (channel) {
-          clearInterval(mergeSetsIntervalRef.current);
-          setMessages(channel.state.messages);
-          restartSetsMergeFuncRef.current();
-        }
-      },
-      newMessageStateUpdateThrottleInterval,
-      throttleOptions,
-    ),
-  ).current;
-
-  const copyTypingState = useRef(
-    throttle(
-      () => {
-        if (channel) {
-          setTyping({ ...channel.state.typing });
-        }
-      },
-      stateUpdateThrottleInterval,
-      throttleOptions,
-    ),
-  ).current;
-
-  const copyReadState = useRef(
-    throttle(
-      () => {
-        if (channel) {
-          setRead({ ...channel.state.read });
-        }
-      },
-      stateUpdateThrottleInterval,
-      throttleOptions,
-    ),
-  ).current;
-
-  const copyChannelState = useRef(
-    throttle(
-      () => {
-        setLoading(false);
-        if (channel) {
-          setMembers({ ...channel.state.members });
-          setMessages([...channel.state.messages]);
-          setRead({ ...channel.state.read });
-          setTyping({ ...channel.state.typing });
-          setWatcherCount(channel.state.watcher_count);
-          setWatchers({ ...channel.state.watchers });
-        }
-      },
-      stateUpdateThrottleInterval,
-      throttleOptions,
-    ),
-  ).current;
-
-  // subscribe to specific channel events
-  useEffect(() => {
-    const channelSubscriptions: Array<ReturnType<ChannelType['on']>> = [];
-    if (channel && shouldSyncChannel) {
-      channelSubscriptions.push(channel.on('message.new', copyMessagesState));
-      channelSubscriptions.push(channel.on('message.read', copyReadState));
-      channelSubscriptions.push(channel.on('typing.start', copyTypingState));
-      channelSubscriptions.push(channel.on('typing.stop', copyTypingState));
-    }
-    return () => {
-      channelSubscriptions.forEach((s) => s.unsubscribe());
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channelId, shouldSyncChannel]);
-
-  // subscribe to the generic all channel event
-  useEffect(() => {
-    const handleEvent: EventHandler<StreamChatGenerics> = (event) => {
-      const ignorableEvents = ['user.watching.start', 'user.watching.stop'];
-      if (ignorableEvents.includes(event.type)) return;
-      if (shouldSyncChannel) {
-        const isTypingEvent = event.type === 'typing.start' || event.type === 'typing.stop';
-        if (!isTypingEvent) {
-          if (thread?.id) {
-            const updatedThreadMessages =
-              (thread.id && channel && channel.state.threads[thread.id]) || threadMessages;
-            setThreadMessages(updatedThreadMessages);
-          }
-
-          if (channel && thread?.id && event.message?.id === thread.id && !threadInstance) {
-            const updatedThread = channel.state.formatMessage(event.message);
-            setThread(updatedThread);
-          }
-        }
-
-        // only update channel state if the events are not the previously subscribed useEffect's subscription events
-        if (
-          channel &&
-          channel.initialized &&
-          event.type !== 'message.new' &&
-          event.type !== 'message.read' &&
-          event.type !== 'typing.start' &&
-          event.type !== 'typing.stop'
-        ) {
-          copyChannelState();
-        }
-      }
-    };
-    const { unsubscribe } = channel.on(handleEvent);
-    return unsubscribe;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channelId, thread?.id, shouldSyncChannel]);
-
-  // subscribe to channel.deleted event
-  useEffect(() => {
-    const { unsubscribe } = client.on('channel.deleted', (event) => {
-      if (event.cid === channel?.cid) {
-        setDeleted(true);
-      }
-    });
-
-    return unsubscribe;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channelId]);
-
-  useEffect(() => {
-    const handleEvent: EventHandler<StreamChatGenerics> = (event) => {
-      if (channel.cid === event.cid) copyChannelState();
-    };
-
-    const { unsubscribe } = client.on('notification.mark_read', handleEvent);
-    return unsubscribe;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const channelQueryCallRef = useRef(
-    async (
-      queryCall: () => Promise<void>,
-      onAfterQueryCall: (() => void) | undefined = undefined,
-      // if we are scrolling to a message after the query, pass it here
-      scrollToMessageId: string | (() => string | undefined) | undefined = undefined,
-    ) => {
-      setError(false);
-      try {
-        clearInterval(mergeSetsIntervalRef.current);
-        await queryCall();
-        setLastRead(new Date());
-        setHasMore(true);
-        const currentMessages = channel.state.messages;
-        const hadCurrentLatestMessages =
-          currentMessages.length > 0 && currentMessages === channel.state.latestMessages;
-        if (typeof scrollToMessageId === 'function') {
-          scrollToMessageId = scrollToMessageId();
-        }
-
-        const scrollToMessageIndex = scrollToMessageId
-          ? currentMessages.findIndex(({ id }) => id === scrollToMessageId)
-          : -1;
-        if (channel && scrollToMessageIndex !== -1) {
-          copyChannelState.cancel();
-          // We assume that on average user sees 5 messages on screen
-          // We dont want new renders to happen while scrolling to the targeted message
-          // hence we limit the number of messages to be rendered after the targeted message to 5 - 1 = 4
-          // NOTE: we have one drawback here, if there were already a split latest and current message set
-          // the previous latest message set will be thrown away as we cannot merge it with the current message set after the target message is set
-          const limitAfter = 4;
-          const currentLength = currentMessages.length;
-          const noOfMessagesAfter = currentLength - scrollToMessageIndex - 1;
-          // number of messages are over the limit, limit the length of messages
-          if (noOfMessagesAfter > limitAfter) {
-            const endIndex = scrollToMessageIndex + limitAfter;
-            channel.state.clearMessages();
-            channel.state.messages = currentMessages.slice(0, endIndex + 1);
-            splitLatestCurrentMessageSetRef.current();
-            const restOfMessages = currentMessages.slice(endIndex + 1);
-            if (hadCurrentLatestMessages) {
-              const latestSet = channel.state.messageSets.find((set) => set.isLatest);
-              if (latestSet) {
-                latestSet.messages = restOfMessages;
-                hasOverlappingRecentMessagesRef.current = true;
-              }
-            }
-          }
-        }
-        const hasLatestMessages = channel.state.latestMessages.length > 0;
-        channel.state.setIsUpToDate(hasLatestMessages);
-        setHasNoMoreRecentMessagesToLoad(hasLatestMessages);
-        copyChannelState();
-        if (scrollToMessageIndex !== -1) {
-          // since we need to scroll after immediately do this without throttle
-          copyChannelState.flush();
-        }
-        onAfterQueryCall?.();
-      } catch (err) {
-        if (err instanceof Error) {
-          setError(err);
-        } else {
-          setError(true);
-        }
-        setLoading(false);
-        setLastRead(new Date());
-      }
-    },
-  );
-
-  /**
-   * Loads channel at first unread message.
-   */
-  const loadChannelAtFirstUnreadMessage = () => {
-    if (!channel) return;
-    let unreadMessageIdToScrollTo: string | undefined;
-    // query for messages around the last read date
-    return channelQueryCallRef.current(
-      async () => {
-        const unreadCount = channel.countUnread();
-        if (unreadCount === 0) return;
-        const isLatestMessageSetShown = !!channel.state.messageSets.find(
-          (set) => set.isCurrent && set.isLatest,
-        );
-        if (isLatestMessageSetShown && unreadCount <= channel.state.messages.length) {
-          unreadMessageIdToScrollTo =
-            channel.state.messages[channel.state.messages.length - unreadCount].id;
-          return;
-        }
-        const lastReadDate = channel.lastRead();
-
-        // if last read date is present we can just fetch messages around that date
-        // last read date not being present is an edge case if somewhere the user of SDK deletes the read state (this will usually never happen)
-        if (lastReadDate) {
-          setLoading(true);
-          // get totally 30 messages... max 15 before last read date and max 15 after last read date
-          // ref: https://github.com/GetStream/chat/pull/2588
-          const res = await channel.query(
-            {
-              messages: {
-                created_at_around: lastReadDate,
-                limit: 30,
-              },
-              watch: true,
-            },
-            'new',
-          );
-          unreadMessageIdToScrollTo = res.messages.find(
-            (m) => lastReadDate < (m.created_at ? new Date(m.created_at) : new Date()),
-          )?.id;
-          if (unreadMessageIdToScrollTo) {
-            channel.state.loadMessageIntoState(unreadMessageIdToScrollTo);
-          }
-        } else {
-          await loadLatestMessagesRef.current();
-        }
-      },
-      () => {
-        if (unreadMessageIdToScrollTo) {
-          restartSetsMergeFuncRef.current();
-        }
-      },
-      () => unreadMessageIdToScrollTo,
-    );
-  };
-
-  /**
-   * Loads channel around a specific message
-   *
-   * @param messageId If undefined, channel will be loaded at most recent message.
-   */
-  const loadChannelAroundMessage: ChannelContextValue<StreamChatGenerics>['loadChannelAroundMessage'] =
-    async ({ messageId: messageIdToLoadAround }) => {
-      if (thread) {
-        if (messageIdToLoadAround) {
-          setThreadLoadingMore(true);
-          try {
-            await channel.state.loadMessageIntoState(messageIdToLoadAround, thread.id);
-            setThreadLoadingMore(false);
-            setThreadMessages(channel.state.threads[thread.id]);
-            setTargetedMessage(messageIdToLoadAround);
-          } catch (err) {
-            if (err instanceof Error) {
-              setError(err);
-            } else {
-              setError(true);
-            }
-            setThreadLoadingMore(false);
-          }
-        }
-      } else {
-        await channelQueryCallRef.current(
-          async () => {
-            setLoading(true);
-            if (messageIdToLoadAround) {
-              setMessages([]);
-              await channel.state.loadMessageIntoState(messageIdToLoadAround);
-              const currentMessageSet = channel.state.messageSets.find((set) => set.isCurrent);
-              if (currentMessageSet && !currentMessageSet?.isLatest) {
-                // if the current message set is not the latest, we will throw away the latest messages
-                // in order to attempt to not throw away, will attempt to merge it by loading 25 more messages
-                const recentCurrentSetMsgId =
-                  currentMessageSet.messages[currentMessageSet.messages.length - 1].id;
-                await channel.query(
-                  {
-                    messages: {
-                      id_gte: recentCurrentSetMsgId,
-                      limit: 25,
-                    },
-                  },
-                  'current',
-                );
-                // if the gap is more than 25, we will unfortunately have to throw away the latest messages
-              }
-            }
-          },
-          () => {
-            if (messageIdToLoadAround) {
-              clearInterval(mergeSetsIntervalRef.current); // do not merge sets as we will scroll/highlight to the message
-              setTargetedMessage(messageIdToLoadAround);
-            }
-          },
-          messageIdToLoadAround,
-        );
-      }
-    };
-
-  useEffect(() => {
-    if (!targetedMessage && prevTargetedMessage) {
-      // we cleared the merge sets interval to wait for the targeted message to be set
-      // now restart it since its done
-      restartSetsMergeFuncRef.current();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [targetedMessage]);
-
-  /**
-   * @deprecated use loadChannelAroundMessage instead
-   *
-   * Loads channel at specific message
-   *
-   * @param messageId If undefined, channel will be loaded at most recent message.
-   * @param before Number of message to query before messageId
-   * @param after Number of message to query after messageId
-   */
-  const loadChannelAtMessage: ChannelContextValue<StreamChatGenerics>['loadChannelAtMessage'] = ({
-    after = 2,
-    before = 30,
-    messageId,
-  }) =>
-    channelQueryCallRef.current(async () => {
-      await queryAtMessage({ after, before, messageId });
-
-      if (messageId) {
-        setTargetedMessage(messageId);
-      }
-    });
-
-  /**
-   * Utility method to mark that current set if latest into two.
-   * With an empty latest set
-   * This is useful when we know that we dont know the latest messages anymore
-   * Or if we are loading a channel around a message
-   */
-  const splitLatestCurrentMessageSetRef = useRef(() => {
-    const currentLatestSet = channel.state.messageSets.find((set) => set.isCurrent && set.isLatest);
-    if (!currentLatestSet) return;
-    // unmark the current latest set
-    currentLatestSet.isLatest = false;
-    // create a new set with empty latest messages
-    channel.state.messageSets.push({
-      isCurrent: false,
-      isLatest: true,
-      messages: [],
-      pagination: {
-        hasNext: true,
-        hasPrev: true,
-      },
-    });
-  });
-
-  /**
-   * Utility method to merge current and latest message set.
-   * Returns true if merge was successful, false otherwise.
-   */
-  const mergeOverlappingMessageSetsRef = useRef((limitToMaxRenderPerBatch = false) => {
-    if (hasOverlappingRecentMessagesRef.current) {
-      const limit = 5; // 5 is the load to recent limit, a larger value seems to cause jumpiness in some devices..
-      // merge current and latest sets
-      const latestMessageSet = channel.state.messageSets.find((set) => set.isLatest);
-      const currentMessageSet = channel.state.messageSets.find((set) => set.isCurrent);
-      if (latestMessageSet && currentMessageSet && latestMessageSet !== currentMessageSet) {
-        if (limitToMaxRenderPerBatch && latestMessageSet.messages.length > limit) {
-          currentMessageSet.messages = currentMessageSet.messages.concat(
-            latestMessageSet.messages.slice(0, limit),
-          );
-          latestMessageSet.messages = latestMessageSet.messages.slice(limit);
-        } else {
-          channel.state.messageSets = channel.state.messageSets.filter((set) => !set.isLatest);
-          currentMessageSet.messages = currentMessageSet.messages.concat(latestMessageSet.messages);
-          currentMessageSet.isLatest = true;
-          hasOverlappingRecentMessagesRef.current = false;
-          clearInterval(mergeSetsIntervalRef.current);
-        }
-        return true;
-      }
-    }
-    return false;
-  });
-
-  const mergeSetsIntervalRef = useRef<NodeJS.Timeout>();
-
-  // clear the interval on unmount
-  useEffect(
-    () => () => {
-      clearInterval(mergeSetsIntervalRef.current);
-    },
-    [],
-  );
-
-  // if we had split the latest and current message set, we try to merge them back
-  // temporarily commented out the interval as it was causing issues with jankiness during scrolling
-  const restartSetsMergeFuncRef = useRef(() => {
-    clearInterval(mergeSetsIntervalRef.current);
-    if (!hasOverlappingRecentMessagesRef.current) return;
-    // mergeSetsIntervalRef.current = setInterval(() => {
-    //   const currentLength = channel.state.messages.length || 0;
-    //   const didMerge = mergeOverlappingMessageSetsRef.current(true);
-    //   if (didMerge && channel.state.messages.length !== currentLength) {
-    //     setMessages(channel.state.messages);
-    //   }
-    // }, 1000);
-  });
-
-  /**
-   * Shows the latest messages from the channel state
-   * If recent messages are empty, fetches new
-   * @param clearLatest If true, clears the latest messages before loading (useful for complete refresh)
-   */
-  const loadLatestMessagesRef = useRef(async (clearLatest = false) => {
-    mergeOverlappingMessageSetsRef.current();
-    if (clearLatest) {
-      const latestSet = channel.state.messageSets.find((set) => set.isLatest);
-      if (latestSet) latestSet.messages = [];
-    }
-    if (channel.state.latestMessages.length === 0) {
-      await channel.query({}, 'latest');
-    }
-    await channel.state.loadMessageIntoState('latest');
-    setMessages([...channel.state.messages]);
-  });
-
-  const loadChannel = () =>
-    channelQueryCallRef.current(
-      async () => {
-        if (!channel?.initialized || !channel.state.isUpToDate) {
-          await channel?.watch();
-        } else {
-          await channel.state.loadMessageIntoState('latest');
-        }
-      },
-      () => {
-        channel?.state.setIsUpToDate(true);
-        setHasNoMoreRecentMessagesToLoad(true);
-      },
-    );
-
   const reloadThread = async () => {
     if (!channel || !thread?.id) return;
     setThreadLoadingMore(true);
@@ -1285,105 +911,39 @@ const ChannelWithContext = <
 
   const resyncChannel = async () => {
     if (!channel || syncingChannelRef.current) return;
-    hasOverlappingRecentMessagesRef.current = false;
-    clearInterval(mergeSetsIntervalRef.current);
     syncingChannelRef.current = true;
-
     setError(false);
-    try {
-      /**
-       * Allow a buffer of 30 new messages, so that MessageList won't move its scroll position,
-       * giving smooth user experience.
-       */
-      const state = await channel.watch({
-        messages: {
-          limit: messages.length + 30,
-        },
-      });
-
-      const oldListTopMessage = messages[0];
-      const oldListTopMessageId = messages[0]?.id;
-      const oldListBottomMessage = messages[messages.length - 1];
 
-      const newListTopMessage = state.messages[0];
-      const newListBottomMessage = state.messages[state.messages.length - 1];
-
-      if (
-        !oldListTopMessage || // previous list was empty
-        !oldListBottomMessage || // previous list was empty
-        !newListTopMessage || // new list is truncated
-        !newListBottomMessage // new list is truncated
-      ) {
-        /** Channel was truncated */
-        channel.state.clearMessages();
-        channel.state.setIsUpToDate(true);
-        channel.state.addMessagesSorted(state.messages);
-        channel.state.addPinnedMessages(state.pinned_messages);
+    const parseMessage = (message: FormatMessageResponse<StreamChatGenerics>) =>
+      ({
+        ...message,
+        created_at: message.created_at.toString(),
+        pinned_at: message.pinned_at?.toString(),
+        updated_at: message.updated_at?.toString(),
+      } as unknown as MessageResponse<StreamChatGenerics>);
 
+    try {
+      if (!thread) {
         copyChannelState();
-        return;
-      }
 
-      const parseMessage = (message: typeof oldListTopMessage) =>
-        ({
-          ...message,
-          created_at: message.created_at.toString(),
-          pinned_at: message.pinned_at?.toString(),
-          updated_at: message.updated_at?.toString(),
-        } as unknown as MessageResponse<StreamChatGenerics>);
-
-      const failedMessages = messages
-        .filter((message) => message.status === MessageStatusTypes.FAILED)
-        .map(parseMessage);
-
-      const failedThreadMessages = thread
-        ? threadMessages
-            .filter((message) => message.status === MessageStatusTypes.FAILED)
-            .map(parseMessage)
-        : [];
-
-      const oldListTopMessageCreatedAt = oldListTopMessage.created_at;
-      const oldListBottomMessageCreatedAt = oldListBottomMessage.created_at;
-      const newListTopMessageCreatedAt = newListTopMessage.created_at
-        ? new Date(newListTopMessage.created_at)
-        : new Date();
-      const newListBottomMessageCreatedAt = newListBottomMessage?.created_at
-        ? new Date(newListBottomMessage.created_at)
-        : new Date();
-
-      let finalMessages = [];
-
-      if (
-        oldListTopMessage &&
-        oldListTopMessageCreatedAt &&
-        oldListBottomMessageCreatedAt &&
-        newListTopMessageCreatedAt < oldListTopMessageCreatedAt &&
-        newListBottomMessageCreatedAt >= oldListBottomMessageCreatedAt
-      ) {
-        const index = state.messages.findIndex((message) => message.id === oldListTopMessageId);
-        finalMessages = state.messages.slice(index);
+        const failedMessages = channelMessagesState.messages
+          ?.filter((message) => message.status === MessageStatusTypes.FAILED)
+          .map(parseMessage);
+        if (failedMessages?.length) {
+          channel.state.addMessagesSorted(failedMessages);
+        }
       } else {
-        finalMessages = state.messages;
-      }
-
-      channel.state.setIsUpToDate(true);
-      channel.state.clearMessages();
-      channel.state.addMessagesSorted(finalMessages);
-      channel.state.addPinnedMessages(state.pinned_messages);
-      setHasNoMoreRecentMessagesToLoad(true);
-      setHasMore(true);
-      copyChannelState();
-
-      if (failedMessages.length) {
-        channel.state.addMessagesSorted(failedMessages);
-        copyChannelState();
-      }
-
-      await reloadThread();
-
-      if (thread && failedThreadMessages.length) {
-        channel.state.addMessagesSorted(failedThreadMessages);
-        setThreadMessages([...channel.state.threads[thread.id]]);
+        await reloadThread();
+
+        const failedThreadMessages = thread
+          ? threadMessages
+              .filter((message) => message.status === MessageStatusTypes.FAILED)
+              .map(parseMessage)
+          : [];
+        if (failedThreadMessages.length) {
+          channel.state.addMessagesSorted(failedThreadMessages);
+          setThreadMessages([...channel.state.threads[thread.id]]);
+        }
       }
     } catch (err) {
       if (err instanceof Error) {
@@ -1391,7 +951,6 @@ const ChannelWithContext = <
       } else {
         setError(true);
       }
-      setLoading(false);
     }
 
     syncingChannelRef.current = false;
@@ -1412,7 +971,7 @@ const ChannelWithContext = <
     if (enableOfflineSupport) {
       connectionChangedSubscription = DBSyncManager.onSyncStatusChange((statusChanged) => {
         if (statusChanged) {
-          connectionChangedHandler();
+          copyChannelState();
         }
       });
     } else {
@@ -1428,108 +987,6 @@ const ChannelWithContext = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [enableOfflineSupport, shouldSyncChannel]);
 
-  const reloadChannel = () =>
-    channelQueryCallRef.current(
-      async () => {
-        setLoading(true);
-        await loadLatestMessagesRef.current(true);
-        setLoading(false);
-      },
-      () => {
-        channel?.state.setIsUpToDate(true);
-        setHasNoMoreRecentMessagesToLoad(true);
-      },
-    );
-
-  /**
-   * @deprecated
-   * Makes a query to load messages at particular message id.
-   *
-   * @param messageId Targeted message id
-   * @param before Number of messages to load before messageId
-   * @param after Number of messages to load after messageId
-   */
-  const queryAtMessage = async ({
-    after = 10,
-    before = 10,
-    messageId,
-  }: Parameters<ChannelContextValue<StreamChatGenerics>['loadChannelAtMessage']>[0]) => {
-    if (!channel) return;
-    channel.state.setIsUpToDate(false);
-    hasOverlappingRecentMessagesRef.current = false;
-    clearInterval(mergeSetsIntervalRef.current);
-    channel.state.clearMessages();
-    setMessages([]);
-    if (!messageId) {
-      await channel.query({
-        messages: {
-          limit: before,
-        },
-        watch: true,
-      });
-
-      channel.state.setIsUpToDate(true);
-      return;
-    }
-
-    await queryBeforeMessage(messageId, before);
-    await queryAfterMessage(messageId, after);
-  };
-
-  /**
-   * @deprecated
-   * Makes a query to load messages before particular message id.
-   *
-   * @param messageId Targeted message id
-   * @param limit Number of messages to load
-   */
-  const queryBeforeMessage = async (messageId: string, limit = 5) => {
-    if (!channel) return;
-
-    await channel.query({
-      messages: {
-        id_lt: messageId,
-        limit,
-      },
-      watch: true,
-    });
-
-    channel.state.setIsUpToDate(false);
-  };
-
-  /**
-   * @deprecated
-   * Makes a query to load messages later than particular message id.
-   *
-   * @param messageId Targeted message id
-   * @param limit Number of messages to load.
-   */
-  const queryAfterMessage = async (messageId: string, limit = 5) => {
-    if (!channel) return;
-    const state = await channel.query({
-      messages: {
-        id_gte: messageId,
-        limit,
-      },
-      watch: true,
-    });
-
-    if (state.messages.length < limit) {
-      // make current set as the latest
-      const currentSet = channel.state.messageSets.find((set) => set.isCurrent);
-      if (currentSet && !currentSet.isLatest) {
-        channel.state.messageSets = channel.state.messageSets.filter((set) => !set.isLatest);
-        currentSet.isLatest = true;
-      }
-      channel.state.setIsUpToDate(true);
-      setHasNoMoreRecentMessagesToLoad(true);
-    } else {
-      splitLatestCurrentMessageSetRef.current();
-      channel.state.setIsUpToDate(false);
-      setHasNoMoreRecentMessagesToLoad(false);
-    }
-  };
-
   // In case the channel is disconnected which may happen when channel is deleted,
   // underlying js client throws an error. Following function ensures that Channel component
   // won't result in error in such a case.
@@ -1548,22 +1005,61 @@ const ChannelWithContext = <
    */
   const clientChannelConfig = getChannelConfigSafely();
 
+  const reloadChannel = async () => {
+    try {
+      await loadLatestMessages();
+    } catch (err) {
+      console.warn('Reloading channel failed with error:', err);
+    }
+  };
+
+  const loadChannelAroundMessage: ChannelContextValue<StreamChatGenerics>['loadChannelAroundMessage'] =
+    async ({ messageId: messageIdToLoadAround }): Promise<void> => {
+      if (!messageIdToLoadAround) return;
+      try {
+        if (thread) {
+          setThreadLoadingMore(true);
+          try {
+            await 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 {
+          await loadChannelAroundMessageFn({
+            messageId: messageIdToLoadAround,
+            setTargetedMessage,
+          });
+        }
+      } catch (err) {
+        console.warn('Loading channel around message failed with error:', err);
+      }
+    };
+
   /**
    * MESSAGE METHODS
    */
-
   const updateMessage: MessagesContextValue<StreamChatGenerics>['updateMessage'] = (
     updatedMessage,
     extraState = {},
   ) => {
-    if (channel) {
-      channel.state.addMessageSorted(updatedMessage, true);
-      if (thread && updatedMessage.parent_id) {
-        extraState.threadMessages = channel.state.threads[updatedMessage.parent_id] || [];
-        setThreadMessages(extraState.threadMessages);
-      }
+    if (!channel) return;
+
+    channel.state.addMessageSorted(updatedMessage, true);
+    copyMessagesStateFromChannel(channel);
 
-      setMessages([...channel.state.messages]);
+    if (thread && updatedMessage.parent_id) {
+      extraState.threadMessages = channel.state.threads[updatedMessage.parent_id] || [];
+      setThreadMessages(extraState.threadMessages);
     }
   };
 
@@ -1574,11 +1070,12 @@ const ChannelWithContext = <
     if (channel) {
       channel.state.removeMessage(oldMessage);
       channel.state.addMessageSorted(newMessage, true);
+      copyMessagesStateFromChannel(channel);
+
       if (thread && newMessage.parent_id) {
         const threadMessages = channel.state.threads[newMessage.parent_id] || [];
         setThreadMessages(threadMessages);
       }
-      setMessages(channel.state.messages);
     }
   };
 
@@ -1628,7 +1125,9 @@ const ChannelWithContext = <
      * as quoted_message is a reserved field.
      */
     if (preview.quoted_message_id) {
-      const quotedMessage = messages.find((message) => message.id === preview.quoted_message_id);
+      const quotedMessage = channelMessagesState.messages?.find(
+        (message) => message.id === preview.quoted_message_id,
+      );
 
       preview.quoted_message =
         quotedMessage as MessageResponse<StreamChatGenerics>['quoted_message'];
@@ -1667,7 +1166,7 @@ const ChannelWithContext = <
           attachment.image_url = uploadResponse.file;
           delete attachment.originalFile;
 
-          dbApi.updateMessage({
+          await dbApi.updateMessage({
             message: { ...updatedMessage, cid: channel.cid },
           });
         }
@@ -1696,7 +1195,7 @@ const ChannelWithContext = <
           }
 
           delete attachment.originalFile;
-          dbApi.updateMessage({
+          await dbApi.updateMessage({
             message: { ...updatedMessage, cid: channel.cid },
           });
         }
@@ -1758,7 +1257,7 @@ const ChannelWithContext = <
         messageResponse.message.status = MessageStatusTypes.RECEIVED;
 
         if (enableOfflineSupport) {
-          dbApi.updateMessage({
+          await dbApi.updateMessage({
             message: { ...messageResponse.message, cid: channel.cid },
           });
         }
@@ -1778,7 +1277,7 @@ const ChannelWithContext = <
       threadInstance?.upsertReplyLocally?.({ message: updatedMessage });
 
       if (enableOfflineSupport) {
-        dbApi.updateMessage({
+        await dbApi.updateMessage({
           message: { ...message, cid: channel.cid },
         });
       }
@@ -1797,8 +1296,6 @@ const ChannelWithContext = <
       attachments: message.attachments || [],
     });
 
-    mergeOverlappingMessageSetsRef.current();
-
     updateMessage(messagePreview, {
       commands: [],
       messageInput: '',
@@ -1810,7 +1307,7 @@ const ChannelWithContext = <
       // if app gets closed before message gets sent and next time user opens the app
       // then user can see that message in failed state and can retry.
       // If succesfull, it will be updated with received status.
-      dbApi.upsertMessages({
+      await dbApi.upsertMessages({
         messages: [{ ...messagePreview, cid: channel.cid, status: MessageStatusTypes.FAILED }],
       });
     }
@@ -1839,161 +1336,6 @@ const ChannelWithContext = <
     );
   };
 
-  // hard limit to prevent you from scrolling faster than 1 page per 2 seconds
-  const loadMoreFinished = useRef(
-    debounce(
-      (updatedHasMore: boolean, newMessages: ChannelState<StreamChatGenerics>['messages']) => {
-        setLoading(false);
-        setLoadingMore(false);
-        setError(false);
-        setHasMore(updatedHasMore);
-        setMessages(newMessages);
-      },
-      defaultDebounceInterval,
-      debounceOptions,
-    ),
-  ).current;
-
-  /**
-   * This function loads more messages before the first message in current channel state.
-   */
-  const loadMore = useCallback<PaginatedMessageListContextValue<StreamChatGenerics>['loadMore']>(
-    async (limit = 20) => {
-      if (loadingMore || hasMore === false) {
-        return;
-      }
-
-      const currentMessages = channel.state.messages;
-
-      if (!currentMessages.length) {
-        return setLoadingMore(false);
-      }
-
-      const oldestMessage = currentMessages && currentMessages[0];
-
-      if (oldestMessage && oldestMessage.status !== MessageStatusTypes.RECEIVED) {
-        return setLoadingMore(false);
-      }
-
-      setLoadingMore(true);
-
-      const oldestID = oldestMessage && oldestMessage.id;
-
-      try {
-        if (channel) {
-          const queryResponse = await channel.query({
-            messages: { id_lt: oldestID, limit },
-          });
-
-          const updatedHasMore = queryResponse.messages.length === limit;
-          loadMoreFinished(updatedHasMore, channel.state.messages);
-        }
-      } catch (err) {
-        if (err instanceof Error) {
-          setError(err);
-        } else {
-          setError(true);
-        }
-        setLoadingMore(false);
-        throw err;
-      }
-    },
-    /*
-     * This function is passed to useCreatePaginatedMessageListContext
-     * Where the deps are [channelId, hasMore, loadingMoreRecent, loadingMore]
-     * and only those deps should be used here because of that
-     */
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [channelId, hasMore, loadingMore],
-  );
-
-  /**
-   * This function loads more messages after the most recent message in current channel state.
-   */
-  const loadMoreRecent = useCallback<
-    PaginatedMessageListContextValue<StreamChatGenerics>['loadMoreRecent']
-  >(
-    async (limit = 5) => {
-      const latestMessageSet = channel.state.messageSets.find((set) => set.isLatest);
-      const latestLengthBeforeMerge = latestMessageSet?.messages.length || 0;
-      const didMerge = mergeOverlappingMessageSetsRef.current(true);
-      if (didMerge) {
-        if (latestMessageSet && latestLengthBeforeMerge > 0) {
-          const shouldSetStateUpToDate =
-            latestMessageSet.messages.length < limit && latestMessageSet.isCurrent;
-          setLoadingMoreRecent(true);
-          channel.state.setIsUpToDate(shouldSetStateUpToDate);
-          setHasNoMoreRecentMessagesToLoad(shouldSetStateUpToDate);
-          loadMoreRecentFinished(channel.state.messages);
-          restartSetsMergeFuncRef.current();
-          return;
-        }
-      }
-      if (channel.state.isUpToDate) {
-        setLoadingMoreRecent(false);
-        return;
-      }
-      const currentMessages = channel.state.messages;
-      const recentMessage = currentMessages[currentMessages.length - 1];
-
-      if (recentMessage?.status !== MessageStatusTypes.RECEIVED) {
-        setLoadingMoreRecent(false);
-        return;
-      }
-      setLoadingMoreRecent(true);
-      try {
-        if (channel) {
-          const queryResponse = await channel.query({
-            messages: {
-              id_gte: recentMessage.id,
-              limit,
-            },
-            watch: true,
-          });
-          const gotAllRecentMessages = queryResponse.messages.length < limit;
-          const currentSet = channel.state.messageSets.find((set) => set.isCurrent);
-          if (gotAllRecentMessages && currentSet && !currentSet.isLatest) {
-            channel.state.messageSets = channel.state.messageSets.filter((set) => !set.isLatest);
-            // make current set as the latest
-            currentSet.isLatest = true;
-          }
-          channel.state.setIsUpToDate(gotAllRecentMessages);
-          setHasNoMoreRecentMessagesToLoad(gotAllRecentMessages);
-          loadMoreRecentFinished(channel.state.messages);
-        }
-      } catch (err) {
-        console.warn('Message pagination request failed with error', err);
-        if (err instanceof Error) {
-          setError(err);
-        } else {
-          setError(true);
-        }
-        setLoadingMoreRecent(false);
-        throw err;
-      }
-    },
-    /*
-     * This function is passed to useCreatePaginatedMessageListContext
-     * Where the deps are [channelId, hasMore, loadingMoreRecent, loadingMore, hasNoMoreRecentMessagesToLoad]
-     * and and only those deps should be used here because of that
-     */
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [channelId, hasNoMoreRecentMessagesToLoad],
-  );
-
-  // hard limit to prevent you from scrolling faster than 1 page per 2 seconds
-  const loadMoreRecentFinished = useRef(
-    debounce(
-      (newMessages: ChannelState<StreamChatGenerics>['messages']) => {
-        setLoadingMoreRecent(false);
-        setMessages(newMessages);
-        setError(false);
-      },
-      defaultDebounceInterval,
-      debounceOptions,
-    ),
-  ).current;
-
   const editMessage: InputMessageInputContextValue<StreamChatGenerics>['editMessage'] = (
     updatedMessage,
   ) =>
@@ -2018,22 +1360,25 @@ const ChannelWithContext = <
     () => setEditing(undefined);
 
   const clearQuotedMessageState: InputMessageInputContextValue<StreamChatGenerics>['clearQuotedMessageState'] =
-    () => setQuotedMessage(false);
+    () => setQuotedMessage(undefined);
 
   /**
    * Removes the message from local state
    */
-  const removeMessage: MessagesContextValue<StreamChatGenerics>['removeMessage'] = (message) => {
+  const removeMessage: MessagesContextValue<StreamChatGenerics>['removeMessage'] = async (
+    message,
+  ) => {
     if (channel) {
       channel.state.removeMessage(message);
-      setMessages(channel.state.messages);
+      copyMessagesStateFromChannel(channel);
+
       if (thread) {
         setThreadMessages(channel.state.threads[thread.id] || []);
       }
     }
 
     if (enableOfflineSupport) {
-      dbApi.deleteMessage({
+      await dbApi.deleteMessage({
         id: message.id,
       });
     }
@@ -2065,7 +1410,7 @@ const ChannelWithContext = <
       user: client.user,
     });
 
-    setMessages(channel.state.messages);
+    copyMessagesStateFromChannel(channel);
 
     const sendReactionResponse = await DBSyncManager.queueTask<StreamChatGenerics>({
       client,
@@ -2091,7 +1436,7 @@ const ChannelWithContext = <
 
     if (!enableOfflineSupport) {
       if (message.status === MessageStatusTypes.FAILED) {
-        removeMessage(message);
+        await removeMessage(message);
         return;
       }
       await client.deleteMessage(message.id);
@@ -2099,8 +1444,8 @@ const ChannelWithContext = <
     }
 
     if (message.status === MessageStatusTypes.FAILED) {
-      DBSyncManager.dropPendingTasks({ messageId: message.id });
-      removeMessage(message);
+      await DBSyncManager.dropPendingTasks({ messageId: message.id });
+      await removeMessage(message);
     } else {
       const updatedMessage = {
         ...message,
@@ -2151,7 +1496,7 @@ const ChannelWithContext = <
       user: client.user,
     });
 
-    setMessages(channel.state.messages);
+    copyMessagesStateFromChannel(channel);
 
     await DBSyncManager.queueTask<StreamChatGenerics>({
       client,
@@ -2246,11 +1591,6 @@ const ChannelWithContext = <
     }
   };
 
-  const disabledValue = useMemo(
-    () => !!channel?.data?.frozen && disableIfFrozenChannel,
-    [channel.data?.frozen, disableIfFrozenChannel],
-  );
-
   const ownCapabilitiesContext = useCreateOwnCapabilitiesContext({
     channel,
     overrideCapabilities: overrideOwnCapabilities,
@@ -2258,7 +1598,7 @@ const ChannelWithContext = <
 
   const channelContext = useCreateChannelContext({
     channel,
-    disabled: disabledValue,
+    disabled: !!channel?.data?.frozen,
     EmptyStateIndicator,
     enableMessageGroupingByUser,
     enforceUniqueReaction,
@@ -2268,20 +1608,16 @@ const ChannelWithContext = <
       !!(clientChannelConfig?.commands || [])?.some((command) => command.name === 'giphy'),
     hideDateSeparators,
     hideStickyDateHeader,
-    isAdmin,
     isChannelActive: shouldSyncChannel,
-    isModerator,
-    isOwner,
     lastRead,
     loadChannelAroundMessage,
-    loadChannelAtMessage,
-    loading,
+    loading: channelMessagesState.loading,
     LoadingIndicator,
     markRead,
     maxTimeBetweenGroupedMessages,
-    members,
+    members: channelState.members ?? {},
     NetworkDownIndicator,
-    read,
+    read: channelState.read ?? {},
     reloadChannel,
     scrollToFirstUnreadThreshold,
     setLastRead,
@@ -2290,8 +1626,8 @@ const ChannelWithContext = <
     targetedMessage,
     threadList,
     uploadAbortControllerRef,
-    watcherCount,
-    watchers,
+    watcherCount: channelState.watcherCount,
+    watchers: channelState.watchers,
   });
 
   // This is mainly a hack to get around an issue with sendMessage not being passed correctly as a
@@ -2369,20 +1705,20 @@ const ChannelWithContext = <
 
   const messageListContext = useCreatePaginatedMessageListContext({
     channelId,
-    hasMore,
-    hasNoMoreRecentMessagesToLoad,
-    loadingMore: loadingMoreProp !== undefined ? loadingMoreProp : loadingMore,
+    hasMore: channelMessagesState.hasMore,
+    loadingMore: loadingMoreProp !== undefined ? loadingMoreProp : channelMessagesState.loadingMore,
     loadingMoreRecent:
-      loadingMoreRecentProp !== undefined ? loadingMoreRecentProp : loadingMoreRecent,
+      loadingMoreRecentProp !== undefined
+        ? loadingMoreRecentProp
+        : channelMessagesState.loadingMoreRecent,
+    loadLatestMessages,
     loadMore,
     loadMoreRecent,
-    messages,
-    setLoadingMore,
-    setLoadingMoreRecent,
+    messages: channelMessagesState.messages ?? [],
   });
 
   const messagesContext = useCreateMessagesContext({
-    additionalTouchableProps,
+    additionalPressableProps,
     Attachment,
     AttachmentActions,
     AudioAttachment,
@@ -2408,7 +1744,6 @@ const ChannelWithContext = <
     Giphy,
     giphyVersion,
     handleBan,
-    handleBlock,
     handleCopy,
     handleDelete,
     handleEdit,
@@ -2431,6 +1766,8 @@ const ChannelWithContext = <
     legacyImageViewerSwipeBehaviour,
     markdownRules,
     Message,
+    MessageActionList,
+    MessageActionListItem,
     messageActions,
     MessageAvatar,
     MessageBounce,
@@ -2442,21 +1779,28 @@ const ChannelWithContext = <
     MessageFooter,
     MessageHeader,
     MessageList,
+    MessageMenu,
     MessagePinnedHeader,
+    MessageReactionPicker,
     MessageReplies,
     MessageRepliesAvatars,
     MessageSimple,
     MessageStatus,
     MessageSystem,
     MessageText,
+    messageTextNumberOfLines,
     MessageTimestamp,
+    MessageUserReactions,
+    MessageUserReactionsAvatar,
+    MessageUserReactionsItem,
     myMessageTheme,
     onLongPressMessage,
     onPressInMessage,
     onPressMessage,
-    OverlayReactionList,
     PollContent,
-    ReactionList,
+    ReactionListBottom,
+    reactionListPosition,
+    ReactionListTop,
     removeMessage,
     Reply,
     retrySendMessage,
@@ -2497,13 +1841,13 @@ const ChannelWithContext = <
   });
 
   const typingContext = useCreateTypingContext({
-    typing,
+    typing: channelState.typing ?? {},
   });
 
   // TODO: replace the null view with appropriate message. Currently this is waiting a design decision.
   if (deleted) return null;
 
-  if (!channel || (error && messages.length === 0)) {
+  if (!channel || (error && channelMessagesState.messages?.length === 0)) {
     return <LoadingErrorIndicator error={error} listType='message' retry={reloadChannel} />;
   }
 
@@ -2580,22 +1924,7 @@ export const Channel = <
 
   const shouldSyncChannel = threadMessage?.id ? !!props.threadList : true;
 
-  const {
-    members,
-    messages,
-    read,
-    setMembers,
-    setMessages,
-    setRead,
-    setThreadMessages,
-    setTyping,
-    setWatcherCount,
-    setWatchers,
-    threadMessages,
-    typing,
-    watcherCount,
-    watchers,
-  } = useChannelState<StreamChatGenerics>(
+  const { setThreadMessages, threadMessages } = useChannelState<StreamChatGenerics>(
     props.channel,
     props.threadList ? threadMessage?.id : undefined,
   );
@@ -2611,21 +1940,9 @@ export const Channel = <
       shouldSyncChannel={shouldSyncChannel}
       {...{
         isMessageAIGenerated,
-        members,
-        messages: props.messages || messages,
-        read,
-        setMembers,
-        setMessages,
-        setRead,
         setThreadMessages,
-        setTyping,
-        setWatcherCount,
-        setWatchers,
         thread,
         threadMessages,
-        typing,
-        watcherCount,
-        watchers,
       }}
     />
   );