stream-chat-react-native-core 6.0.0-rc.8 → 6.0.0

package/src/components/MessageList/MessageList.tsx

@@ -126,10 +126,7 @@ type MessageListPropsWithContext<
   > &
   Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
   Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setMessages'> &
-  Pick<
-    PaginatedMessageListContextValue<StreamChatGenerics>,
-    'hasNoMoreRecentMessagesToLoad' | 'loadMore' | 'loadMoreRecent'
-  > &
+  Pick<PaginatedMessageListContextValue<StreamChatGenerics>, 'loadMore' | 'loadMoreRecent'> &
   Pick<OverlayContextValue, 'overlay'> &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
@@ -239,7 +236,6 @@ const MessageListWithContext = <
     EmptyStateIndicator,
     FlatList,
     FooterComponent = InlineLoadingMoreIndicator,
-    hasNoMoreRecentMessagesToLoad,
     HeaderComponent = LoadingMoreRecentIndicator,
     hideStickyDateHeader,
     initialScrollToFirstUnreadMessage,
@@ -440,6 +436,9 @@ const MessageListWithContext = <
     }
   }, [disabled]);
 
+  /**
+   * Effect to mark the channel as read when the user scrolls to the bottom of the message list.
+   */
   useEffect(() => {
     const getShouldMarkReadAutomatically = (): boolean => {
       if (loading || !channel) {
@@ -519,34 +518,16 @@ const MessageListWithContext = <
       }
     };
 
-    if (threadList || hasNoMoreRecentMessagesToLoad) {
+    if (threadList) {
       scrollToBottomIfNeeded();
     } else {
       setScrollToBottomButtonVisible(false);
     }
 
-    if (
-      !hasNoMoreRecentMessagesToLoad &&
-      flatListRef.current &&
-      messageListLengthBeforeUpdate.current === 0 &&
-      messageListLengthAfterUpdate < 10
-    ) {
-      /**
-       * Trigger onStartReached on first load, if messages are not enough to fill the screen.
-       * This is important especially for android, where you can't overscroll.
-       */
-      maybeCallOnStartReached(10);
-    }
-
     messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
     topMessageBeforeUpdate.current = topMessageAfterUpdate;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    threadList,
-    hasNoMoreRecentMessagesToLoad,
-    messageListLengthAfterUpdate,
-    topMessageAfterUpdate?.id,
-  ]);
+  }, [threadList, messageListLengthAfterUpdate, topMessageAfterUpdate?.id]);
 
   useEffect(() => {
     if (!rawMessageList.length) return;
@@ -670,9 +651,19 @@ const MessageListWithContext = <
         threadList={threadList}
       />
     );
-    return wrapMessageInTheme ? (
+    return (
       <>
-        <ThemeProvider mergedStyle={modifiedTheme}>
+        {wrapMessageInTheme ? (
+          <ThemeProvider mergedStyle={modifiedTheme}>
+            <View
+              style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
+              testID={`message-list-item-${index}`}
+            >
+              {shouldApplyAndroidWorkaround && renderDateSeperator}
+              {renderMessage}
+            </View>
+          </ThemeProvider>
+        ) : (
           <View
             style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
             testID={`message-list-item-${index}`}
@@ -680,23 +671,12 @@ const MessageListWithContext = <
             {shouldApplyAndroidWorkaround && renderDateSeperator}
             {renderMessage}
           </View>
-        </ThemeProvider>
+        )}
         {!shouldApplyAndroidWorkaround && renderDateSeperator}
         {/* Adding indicator below the messages, since the list is inverted */}
-        {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
-      </>
-    ) : (
-      <>
-        <View
-          style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
-          testID={`message-list-item-${index}`}
-        >
-          {shouldApplyAndroidWorkaround && renderDateSeperator}
-          {renderMessage}
+        <View style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}>
+          {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
         </View>
-        {!shouldApplyAndroidWorkaround && renderDateSeperator}
-        {/* Adding indicator below the messages, since the list is inverted */}
-        {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
       </>
     );
   };
@@ -724,7 +704,7 @@ const MessageListWithContext = <
    * 2. Ensures that we call `loadMoreRecent`, once per content length
    * 3. If the call to `loadMore` is in progress, we wait for it to finish to make sure scroll doesn't jump.
    */
-  const maybeCallOnStartReached = async (limit?: number) => {
+  const maybeCallOnStartReached = async () => {
     // If onStartReached has already been called for given data length, then ignore.
     if (
       processedMessageList?.length &&
@@ -756,8 +736,8 @@ const MessageListWithContext = <
     }
     onStartReachedInPromise.current = (
       threadList && !!threadInstance && loadMoreRecentThread
-        ? loadMoreRecentThread({ limit })
-        : loadMoreRecent(limit)
+        ? loadMoreRecentThread({})
+        : loadMoreRecent()
     )
       .then(callback)
       .catch(onError);
@@ -831,8 +811,7 @@ const MessageListWithContext = <
     const notLatestSet = channel.state.messages !== channel.state.latestMessages;
 
     const showScrollToBottomButton =
-      messageListHasMessages &&
-      ((!threadList && notLatestSet) || !isScrollAtBottom || !hasNoMoreRecentMessagesToLoad);
+      messageListHasMessages && ((!threadList && notLatestSet) || !isScrollAtBottom);
 
     /**
      * 1. If I scroll up -> show scrollToBottom button.
@@ -842,12 +821,7 @@ const MessageListWithContext = <
      */
     setScrollToBottomButtonVisible(showScrollToBottomButton);
 
-    const shouldMarkRead =
-      !threadList &&
-      !notLatestSet &&
-      offset <= 0 &&
-      hasNoMoreRecentMessagesToLoad &&
-      channel.countUnread() > 0;
+    const shouldMarkRead = !threadList && !notLatestSet && offset <= 0 && channel.countUnread() > 0;
 
     if (shouldMarkRead) {
       markRead();
@@ -862,9 +836,8 @@ const MessageListWithContext = <
 
   const goToNewMessages = async () => {
     const isNotLatestSet = channel.state.messages !== channel.state.latestMessages;
-    if (isNotLatestSet && hasNoMoreRecentMessagesToLoad) {
-      loadChannelAroundMessage({});
-    } else if (!hasNoMoreRecentMessagesToLoad) {
+
+    if (isNotLatestSet) {
       resetPaginationTrackersRef.current();
       await reloadChannel();
     } else if (flatListRef.current) {
@@ -927,7 +900,7 @@ const MessageListWithContext = <
     // this onScrollToIndexFailed will be called again
   });
 
-  const goToMessage = (messageId: string) => {
+  const goToMessage = async (messageId: string) => {
     const indexOfParentInMessageList = processedMessageList.findIndex(
       (message) => message?.id === messageId,
     );
@@ -946,7 +919,7 @@ const MessageListWithContext = <
       return;
     }
     // the message we want was not loaded yet, so lets load it
-    loadChannelAroundMessage({ messageId });
+    await loadChannelAroundMessage({ messageId });
   };
 
   /**
@@ -987,6 +960,7 @@ const MessageListWithContext = <
           viewPosition: 0.5, // try to place message in the center of the screen
         });
       }
+
       // the message we want to scroll to has not been loaded in the state yet
       if (indexOfParentInMessageList === -1) {
         loadChannelAroundMessage({ messageId: messageIdToScroll });
@@ -1049,11 +1023,12 @@ const MessageListWithContext = <
   ]);
 
   const dismissImagePicker = () => {
-    if (!hasMoved && selectedPicker) {
+    if (selectedPicker) {
       setSelectedPicker(undefined);
       closePicker();
     }
   };
+
   const onScrollBeginDrag: ScrollViewProps['onScrollBeginDrag'] = (event) => {
     !hasMoved && selectedPicker && setHasMoved(true);
     onUserScrollEvent(event);
@@ -1157,17 +1132,17 @@ const MessageListWithContext = <
           ]}
           /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
           data={processedMessageList}
-          extraData={disabled || !hasNoMoreRecentMessagesToLoad}
+          extraData={disabled}
           inverted={shouldApplyAndroidWorkaround ? false : inverted}
           ItemSeparatorComponent={WrappedItemSeparatorComponent}
           keyboardShouldPersistTaps='handled'
           keyExtractor={keyExtractor}
           ListFooterComponent={ListFooterComponent}
           /**
-          if autoscrollToTopThreshold is 10, we scroll to recent if before new list update it was already at the bottom (10 offset or below)
-          minIndexForVisible = 1 means that beyond item at index 1 will not change position on list updates
-          minIndexForVisible is not used when autoscrollToTopThreshold = 10
-        */
+            if autoscrollToTopThreshold is 10, we scroll to recent if before new list update it was already at the bottom (10 offset or below)
+            minIndexForVisible = 1 means that beyond item at index 1 will not change position on list updates
+            minIndexForVisible is not used when autoscrollToTopThreshold = 10
+          */
           ListHeaderComponent={ListHeaderComponent}
           maintainVisibleContentPosition={{
             autoscrollToTopThreshold: autoscrollToRecent ? 10 : undefined,
@@ -1196,26 +1171,21 @@ const MessageListWithContext = <
           {...additionalFlatListPropsExcludingStyle}
         />
       )}
-
-      {!loading && (
-        <>
-          <View style={styles.stickyHeader}>
-            {messageListLengthAfterUpdate && StickyHeader ? (
-              <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
-            ) : null}
-          </View>
-          {!disableTypingIndicator && TypingIndicator && (
-            <TypingIndicatorContainer>
-              <TypingIndicator />
-            </TypingIndicatorContainer>
-          )}
-          <ScrollToBottomButton
-            onPress={goToNewMessages}
-            showNotification={scrollToBottomButtonVisible}
-            unreadCount={threadList ? 0 : channel?.countUnread()}
-          />
-        </>
+      <View style={styles.stickyHeader}>
+        {messageListLengthAfterUpdate && StickyHeader ? (
+          <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
+        ) : null}
+      </View>
+      {!disableTypingIndicator && TypingIndicator && (
+        <TypingIndicatorContainer>
+          <TypingIndicator />
+        </TypingIndicatorContainer>
       )}
+      <ScrollToBottomButton
+        onPress={goToNewMessages}
+        showNotification={scrollToBottomButtonVisible}
+        unreadCount={threadList ? 0 : channel?.countUnread()}
+      />
       <NetworkDownIndicator />
     </View>
   );
@@ -1269,8 +1239,7 @@ export const MessageList = <
     TypingIndicator,
     TypingIndicatorContainer,
   } = useMessagesContext<StreamChatGenerics>();
-  const { hasNoMoreRecentMessagesToLoad, loadMore, loadMoreRecent } =
-    usePaginatedMessageListContext<StreamChatGenerics>();
+  const { loadMore, loadMoreRecent } = usePaginatedMessageListContext<StreamChatGenerics>();
   const { overlay } = useOverlayContext();
   const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } =
     useThreadContext<StreamChatGenerics>();
@@ -1288,7 +1257,6 @@ export const MessageList = <
         enableMessageGroupingByUser,
         error,
         FlatList,
-        hasNoMoreRecentMessagesToLoad,
         hideStickyDateHeader,
         initialScrollToFirstUnreadMessage,
         InlineDateSeparator,

package/src/components/MessageList/ScrollToBottomButton.tsx

@@ -80,7 +80,7 @@ export const ScrollToBottomButton = (props: ScrollToBottomButtonProps) => {
     <TouchableOpacity
       onPress={onPress}
       style={[styles.touchable, touchable]}
-      testID='message-notification'
+      testID='scroll-to-bottom-button'
     >
       <View style={[styles.wrapper, wrapper]}>
         <View style={[styles.container, { backgroundColor: white, shadowColor: black }, container]}>

package/src/components/MessageList/__tests__/MessageList.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
@@ -14,6 +14,8 @@ import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Channel } from '../../Channel/Channel';
+import { channelInitialState } from '../../Channel/hooks/useChannelDataState';
+import * as MessageListPaginationHook from '../../Channel/hooks/useMessageListPagination';
 import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../MessageList';
 
@@ -47,7 +49,7 @@ describe('MessageList', () => {
     act(() => dispatchMessageNewEvent(chatClient, newMessage, mockedChannel.channel));
 
     await waitFor(() => {
-      expect(queryAllByTestId('message-notification')).toHaveLength(0);
+      expect(queryAllByTestId('scroll-to-bottom-button')).toHaveLength(0);
       expect(getByText(newMessage.text)).toBeTruthy();
     });
   }, 10000);
@@ -381,3 +383,173 @@ describe('MessageList', () => {
     });
   });
 });
+
+describe('MessageList pagination', () => {
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
+
+  const mockedHook = (values) => {
+    const messages = Array.from({ length: 100 }, (_, i) =>
+      generateMessage({ text: `message-${i}` }),
+    );
+    return jest
+      .spyOn(MessageListPaginationHook, 'useMessageListPagination')
+      .mockImplementation(() => ({
+        copyMessagesStateFromChannel: jest.fn(),
+        loadChannelAroundMessage: jest.fn(),
+        loadChannelAtFirstUnreadMessage: jest.fn(),
+        loadInitialMessagesStateFromChannel: jest.fn(),
+        loadLatestMessages: jest.fn(),
+        loadMore: jest.fn(),
+        loadMoreRecent: jest.fn(),
+        state: { ...channelInitialState, messages },
+        ...values,
+      }));
+  };
+
+  it('should load more recent messages when the user scrolls to the start of the list', async () => {
+    const user1 = generateUser();
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: Array.from({ length: 100 }, (_, i) => generateMessage({ text: `message-${i}` })),
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    const loadMoreRecent = jest.fn(() => Promise.resolve());
+    mockedHook({ loadMoreRecent });
+
+    const { getByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    act(() => {
+      // scroll to the top of the list
+      const flatList = getByTestId('message-flat-list');
+      fireEvent(flatList, 'momentumScrollEnd', {
+        nativeEvent: {
+          contentOffset: { y: 0 }, // Scroll position at the top
+          contentSize: { height: 2000, width: 200 }, // Total content size
+          layoutMeasurement: { height: 400, width: 200 }, // Visible area size
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(loadMoreRecent).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should load more messages when the user scrolls to the end of the list', async () => {
+    const user1 = generateUser();
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: Array.from({ length: 100 }, (_, i) => generateMessage({ text: `message-${i}` })),
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    const loadMore = jest.fn(() => Promise.resolve());
+    mockedHook({ loadMore });
+
+    const { getByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    act(() => {
+      // scroll to the top of the list
+      const flatList = getByTestId('message-flat-list');
+      fireEvent(flatList, 'momentumScrollEnd', {
+        nativeEvent: {
+          contentOffset: { y: 1900 }, // Scroll position at the top
+          contentSize: { height: 2000, width: 200 }, // Total content size
+          layoutMeasurement: { height: 400, width: 200 }, // Visible area size
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(loadMore).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should call load latest messages when the scroll to bottom button is pressed', async () => {
+    const user1 = generateUser();
+    const messages = Array.from({ length: 10 }, (_, i) =>
+      generateMessage({ text: `message-${i}` }),
+    );
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages,
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    channel.state = {
+      ...channelInitialState,
+      latestMessages: [],
+      members: Object.fromEntries(
+        Array.from({ length: 10 }, (_, i) => [i, generateMember({ id: i })]),
+      ),
+      messages: Array.from({ length: 10 }, (_, i) => generateMessage({ id: i })),
+      messageSets: [{ isCurrent: true, isLatest: true }],
+    };
+
+    const loadLatestMessages = jest.fn(() => Promise.resolve());
+    mockedHook({ loadLatestMessages });
+
+    const { getByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    act(() => {
+      // scroll to the top of the list
+      const flatList = getByTestId('message-flat-list');
+      fireEvent(flatList, 'scroll', {
+        nativeEvent: {
+          contentOffset: { y: 1900 }, // Scroll position at the top
+          contentSize: { height: 2000, width: 200 }, // Total content size
+          layoutMeasurement: { height: 400, width: 200 }, // Visible area size
+        },
+      });
+    });
+
+    await waitFor(() => {
+      const scrollToBottomButton = getByTestId('scroll-to-bottom-button');
+      expect(scrollToBottomButton).toBeTruthy();
+
+      fireEvent.press(scrollToBottomButton);
+
+      expect(loadLatestMessages).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/components/MessageList/__tests__/ScrollToBottomButton.test.js

@@ -22,7 +22,7 @@ describe('ScrollToBottomButton', () => {
     );
 
     await waitFor(() => {
-      expect(queryByTestId('message-notification')).toBeFalsy();
+      expect(queryByTestId('scroll-to-bottom-button')).toBeFalsy();
     });
   });
 
@@ -38,7 +38,7 @@ describe('ScrollToBottomButton', () => {
     );
 
     await waitFor(() => {
-      expect(queryByTestId('message-notification')).toBeTruthy();
+      expect(queryByTestId('scroll-to-bottom-button')).toBeTruthy();
     });
   });
 
@@ -53,7 +53,7 @@ describe('ScrollToBottomButton', () => {
         </TranslationProvider>
       </ThemeProvider>,
     );
-    fireEvent.press(getByTestId('message-notification'));
+    fireEvent.press(getByTestId('scroll-to-bottom-button'));
     expect(onPress).toHaveBeenCalledTimes(1);
   });
 

package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.js.snap

@@ -37,7 +37,7 @@ exports[`ScrollToBottomButton should render the message notification and match s
       "right": 20,
     }
   }
-  testID="message-notification"
+  testID="scroll-to-bottom-button"
 >
   <View
     style={

package/src/components/MessageList/hooks/useMessageList.ts

@@ -1,9 +1,6 @@
 import type { ChannelState, MessageResponse } from 'stream-chat';
 
-import {
-  ChannelContextValue,
-  useChannelContext,
-} from '../../../contexts/channelContext/ChannelContext';
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import {
   DeletedMessagesVisibilityType,
@@ -61,7 +58,7 @@ export const useMessageList = <
   const { threadMessages } = useThreadContext<StreamChatGenerics>();
 
   const messageList = threadList ? threadMessages : messages;
-  const readList: ChannelContextValue<StreamChatGenerics>['read'] | undefined = threadList
+  const readList: ChannelState<StreamChatGenerics>['read'] | undefined = threadList
     ? undefined
     : read;
 

package/src/components/MessageList/utils/getReadStates.ts

@@ -1,4 +1,5 @@
-import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import { ChannelState } from 'stream-chat';
+
 import type { PaginatedMessageListContextValue } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
@@ -10,7 +11,7 @@ export const getReadStates = <
   messages:
     | PaginatedMessageListContextValue<StreamChatGenerics>['messages']
     | ThreadContextValue<StreamChatGenerics>['threadMessages'],
-  read?: ChannelContextValue<StreamChatGenerics>['read'],
+  read?: ChannelState<StreamChatGenerics>['read'],
 ) => {
   const readData: Record<string, number> = {};
 

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -98,7 +98,7 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
     loadNextPage,
     reactions: fetchedReactions,
   } = useFetchReactions({
-    messageId: message?.id,
+    message,
     reactionType: selectedReaction,
     sort,
   });

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -37,7 +37,9 @@ export const MessageUserReactionsItem = <
       messageMenu: {
         userReactions: {
           avatarContainer,
+          avatarInnerContainer,
           avatarName,
+          avatarNameContainer,
           avatarSize,
           radius,
           reactionBubbleBackground,
@@ -69,7 +71,7 @@ export const MessageUserReactionsItem = <
       accessibilityLabel='Individual User Reaction on long press message'
       style={[styles.avatarContainer, avatarContainer]}
     >
-      <View style={styles.avatarInnerContainer}>
+      <View style={[styles.avatarInnerContainer, avatarInnerContainer]}>
         <MessageUserReactionsAvatar reaction={reaction} size={avatarSize} />
         <View
           style={[
@@ -91,7 +93,7 @@ export const MessageUserReactionsItem = <
           />
         </View>
       </View>
-      <View style={styles.avatarNameContainer}>
+      <View style={[styles.avatarNameContainer, avatarNameContainer]}>
         <Text numberOfLines={2} style={[styles.avatarName, { color: black }, avatarName]}>
           {name}
         </Text>

package/src/components/MessageMenu/hooks/useFetchReactions.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { ReactionResponse, ReactionSort } from 'stream-chat';
 
+import { MessageType } from '../../../components/MessageList/hooks/useMessageList';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { getReactionsForFilterSort } from '../../../store/apis/getReactionsforFilterSort';
 import { DefaultStreamChatGenerics } from '../../../types/types';
@@ -10,7 +11,7 @@ export type UseFetchReactionParams<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   limit?: number;
-  messageId?: string;
+  message?: MessageType<StreamChatGenerics>;
   reactionType?: string;
   sort?: ReactionSort<StreamChatGenerics>;
 };
@@ -19,13 +20,14 @@ export const useFetchReactions = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   limit = 25,
-  messageId,
+  message,
   reactionType,
   sort,
 }: UseFetchReactionParams) => {
   const [reactions, setReactions] = useState<ReactionResponse<StreamChatGenerics>[]>([]);
   const [loading, setLoading] = useState(true);
   const [next, setNext] = useState<string | undefined>(undefined);
+  const messageId = message?.id;
 
   const { client, enableOfflineSupport } = useChatContext();
 
@@ -61,7 +63,8 @@ export const useFetchReactions = <
     };
 
     try {
-      if (enableOfflineSupport) {
+      // TODO: Threads are not supported for the offline use case as we don't store the thread messages currently, and this will change in the future.
+      if (enableOfflineSupport && !message?.parent_id) {
         await loadOfflineReactions();
       } else {
         await loadOnlineReactions();