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

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

@@ -77,6 +77,8 @@ describe('Channel', () => {
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     channel = chatClient.channel('messaging', mockedChannel.id);
     channel.cid = mockedChannel.channel.cid;
+    const getConfigSpy = jest.fn();
+    channel.getConfig = getConfigSpy;
   });
 
   afterEach(() => {
@@ -356,7 +358,7 @@ describe('Channel initial load useEffect', () => {
     cleanup();
   });
 
-  it('should not call channel.watch if channel is not initialized', async () => {
+  it('should still call channel.watch if we are online and DB channels are loaded', async () => {
     const messages = Array.from({ length: 10 }, (_, i) => generateMessage({ id: i }));
     const mockedChannel = generateChannelResponse({
       messages,
@@ -366,13 +368,18 @@ describe('Channel initial load useEffect', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.watch();
     channel.offlineMode = true;
-    channel.state = channelInitialState;
+    channel.state = {
+      ...channelInitialState,
+      messagePagination: {
+        hasPrev: true,
+      },
+    };
     const watchSpy = jest.fn();
     channel.watch = watchSpy;
 
     renderComponent({ channel });
 
-    await waitFor(() => expect(watchSpy).not.toHaveBeenCalled());
+    await waitFor(() => expect(watchSpy).toHaveBeenCalledTimes(1));
   });
 
   it("should call channel.watch if channel is initialized and it's not in offline mode", async () => {

package/src/components/Channel/hooks/useChannelDataState.ts

@@ -1,8 +1,6 @@
 import { useCallback, useState } from 'react';
 
-import { Channel, ChannelState as StreamChannelState } from 'stream-chat';
-
-import { MessageType } from '../../MessageList/hooks/useMessageList';
+import { Channel, LocalMessage, ChannelState as StreamChannelState } from 'stream-chat';
 
 export const channelInitialState = {
   hasMore: true,
@@ -38,7 +36,7 @@ export type ChannelMessagesState = {
  * The ChannelThreadState object
  */
 export type ChannelThreadState = {
-  thread: MessageType | null;
+  thread: LocalMessage | null;
   threadHasMore?: boolean;
   threadLoadingMore?: boolean;
   threadMessages?: StreamChannelState['messages'];

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -45,6 +45,7 @@ export const useCreateMessagesContext = ({
   hasCreatePoll,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
+  ImageReloadIndicator,
   initialScrollToFirstUnreadMessage,
   InlineDateSeparator,
   InlineUnreadIndicator,
@@ -162,6 +163,7 @@ export const useCreateMessagesContext = ({
       hasCreatePoll,
       ImageLoadingFailedIndicator,
       ImageLoadingIndicator,
+      ImageReloadIndicator,
       initialScrollToFirstUnreadMessage,
       InlineDateSeparator,
       InlineUnreadIndicator,

package/src/components/Channel/hooks/useMessageListPagination.tsx

@@ -6,6 +6,7 @@ import { Channel, ChannelState, MessageResponse } from 'stream-chat';
 import { useChannelMessageDataState } from './useChannelDataState';
 
 import { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import { useStableCallback } from '../../../hooks';
 import { findInMessagesByDate, findInMessagesById } from '../../../utils/utils';
 
 const defaultDebounceInterval = 500;
@@ -59,7 +60,7 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
   /**
    * This function loads the latest messages in the channel.
    */
-  const loadLatestMessages = async () => {
+  const loadLatestMessages = useStableCallback(async () => {
     try {
       setLoading(true);
       await channel.state.loadMessageIntoState('latest');
@@ -68,12 +69,12 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
     } catch (err) {
       console.warn('Loading latest messages failed with error:', err);
     }
-  };
+  });
 
   /**
    * This function loads more messages before the first message in current channel state.
    */
-  const loadMore = async (limit = 20) => {
+  const loadMore = useStableCallback(async (limit: number = 20) => {
     if (!channel.state.messagePagination.hasPrev) {
       return;
     }
@@ -97,12 +98,12 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
       setLoadingMore(false);
       console.warn('Message pagination(fetching old messages) request failed with error:', e);
     }
-  };
+  });
 
   /**
    * This function loads more messages after the most recent message in current channel state.
    */
-  const loadMoreRecent = async (limit = 10) => {
+  const loadMoreRecent = useStableCallback(async (limit: number = 10) => {
     if (!channel.state.messagePagination.hasNext) {
       return;
     }
@@ -126,180 +127,179 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
       console.warn('Message pagination(fetching new messages) request failed with error:', e);
       return;
     }
-  };
+  });
 
   /**
    * Loads channel around a specific message
    *
    * @param messageId If undefined, channel will be loaded at most recent message.
    */
-  const loadChannelAroundMessage: ChannelContextValue['loadChannelAroundMessage'] = async ({
-    limit = 25,
-    messageId: messageIdToLoadAround,
-    setTargetedMessage,
-  }) => {
-    if (!messageIdToLoadAround) {
-      return;
-    }
-    setLoadingMore(true);
-    setLoading(true);
-    try {
-      await channel.state.loadMessageIntoState(messageIdToLoadAround, undefined, limit);
-      loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-      jumpToMessageFinished(channel.state.messagePagination.hasNext, messageIdToLoadAround);
+  const loadChannelAroundMessage: ChannelContextValue['loadChannelAroundMessage'] =
+    useStableCallback(
+      async ({ limit = 25, messageId: messageIdToLoadAround, setTargetedMessage }) => {
+        if (!messageIdToLoadAround) {
+          return;
+        }
+        setLoadingMore(true);
+        setLoading(true);
+        try {
+          await channel.state.loadMessageIntoState(messageIdToLoadAround, undefined, limit);
+          loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+          jumpToMessageFinished(channel.state.messagePagination.hasNext, messageIdToLoadAround);
 
-      if (setTargetedMessage) {
-        setTargetedMessage(messageIdToLoadAround);
-      }
-    } catch (error) {
-      setLoadingMore(false);
-      setLoading(false);
-      console.warn(
-        'Message pagination(fetching messages in the channel around a message id) request failed with error:',
-        error,
-      );
-      return;
-    }
-  };
+          if (setTargetedMessage) {
+            setTargetedMessage(messageIdToLoadAround);
+          }
+        } catch (error) {
+          setLoadingMore(false);
+          setLoading(false);
+          console.warn(
+            'Message pagination(fetching messages in the channel around a message id) request failed with error:',
+            error,
+          );
+          return;
+        }
+      },
+    );
 
   /**
    * Fetch messages around a specific timestamp.
    */
-  const fetchMessagesAround = async (
-    channel: Channel,
-    timestamp: string,
-    limit: number,
-  ): Promise<MessageResponse[]> => {
-    try {
-      const { messages } = await channel.query(
-        { messages: { created_at_around: timestamp, limit } },
-        'new',
-      );
-      return messages;
-    } catch (error) {
-      console.error('Error fetching messages around timestamp:', error);
-      throw error;
-    }
-  };
+  const fetchMessagesAround = useStableCallback(
+    async (channel: Channel, timestamp: string, limit: number): Promise<MessageResponse[]> => {
+      try {
+        const { messages } = await channel.query(
+          { messages: { created_at_around: timestamp, limit } },
+          'new',
+        );
+        return messages;
+      } catch (error) {
+        console.error('Error fetching messages around timestamp:', error);
+        throw error;
+      }
+    },
+  );
 
   /**
    * Loads channel at first unread message.
    */
   const loadChannelAtFirstUnreadMessage: ChannelContextValue['loadChannelAtFirstUnreadMessage'] =
-    async ({ channelUnreadState, limit = 25, setChannelUnreadState, setTargetedMessage }) => {
-      try {
-        if (!channelUnreadState?.unread_messages) {
-          return;
-        }
-        const { first_unread_message_id, last_read, last_read_message_id } = channelUnreadState;
-        let firstUnreadMessageId = first_unread_message_id;
-        let lastReadMessageId = last_read_message_id;
-        let isInCurrentMessageSet = false;
-        const messagesState = channel.state.messages;
+    useStableCallback(
+      async ({ channelUnreadState, limit = 25, setChannelUnreadState, setTargetedMessage }) => {
+        try {
+          if (!channelUnreadState?.unread_messages) {
+            return;
+          }
+          const { first_unread_message_id, last_read, last_read_message_id } = channelUnreadState;
+          let firstUnreadMessageId = first_unread_message_id;
+          let lastReadMessageId = last_read_message_id;
+          let isInCurrentMessageSet = false;
+          const messagesState = channel.state.messages;
 
-        // If the first unread message is already in the current message set, we don't need to load more messages.
-        if (firstUnreadMessageId) {
-          const messageIdx = findInMessagesById(messagesState, firstUnreadMessageId);
-          isInCurrentMessageSet = messageIdx !== -1;
-        }
-        // If the last read message is already in the current message set, we don't need to load more messages, and we set the first unread message id as that is what we want to operate on.
-        else if (lastReadMessageId) {
-          const messageIdx = findInMessagesById(messagesState, lastReadMessageId);
-          isInCurrentMessageSet = messageIdx !== -1;
-          firstUnreadMessageId = messageIdx > -1 ? messagesState[messageIdx + 1]?.id : undefined;
-        } else {
-          const lastReadTimestamp = last_read.getTime();
-          const { index: lastReadIdx, message: lastReadMessage } = findInMessagesByDate(
-            messagesState,
-            last_read,
-          );
-          if (lastReadMessage) {
-            lastReadMessageId = lastReadMessage.id;
-            firstUnreadMessageId = messagesState[lastReadIdx + 1].id;
-            isInCurrentMessageSet = !!firstUnreadMessageId;
+          // If the first unread message is already in the current message set, we don't need to load more messages.
+          if (firstUnreadMessageId) {
+            const messageIdx = findInMessagesById(messagesState, firstUnreadMessageId);
+            isInCurrentMessageSet = messageIdx !== -1;
+          }
+          // If the last read message is already in the current message set, we don't need to load more messages, and we set the first unread message id as that is what we want to operate on.
+          else if (lastReadMessageId) {
+            const messageIdx = findInMessagesById(messagesState, lastReadMessageId);
+            isInCurrentMessageSet = messageIdx !== -1;
+            firstUnreadMessageId = messageIdx > -1 ? messagesState[messageIdx + 1]?.id : undefined;
           } else {
-            setLoadingMore(true);
-            setLoading(true);
-            let messages;
-            try {
-              messages = await fetchMessagesAround(channel, last_read.toISOString(), limit);
-            } catch (error) {
-              setLoading(false);
-              loadMoreFinished(channel.state.messagePagination.hasPrev, messagesState);
-              console.log('Loading channel at first unread message failed with error:', error);
-              return;
-            }
+            const lastReadTimestamp = last_read.getTime();
+            const { index: lastReadIdx, message: lastReadMessage } = findInMessagesByDate(
+              messagesState,
+              last_read,
+            );
+            if (lastReadMessage) {
+              lastReadMessageId = lastReadMessage.id;
+              firstUnreadMessageId = messagesState[lastReadIdx + 1].id;
+              isInCurrentMessageSet = !!firstUnreadMessageId;
+            } else {
+              setLoadingMore(true);
+              setLoading(true);
+              let messages;
+              try {
+                messages = await fetchMessagesAround(channel, last_read.toISOString(), limit);
+              } catch (error) {
+                setLoading(false);
+                loadMoreFinished(channel.state.messagePagination.hasPrev, messagesState);
+                console.log('Loading channel at first unread message failed with error:', error);
+                return;
+              }
 
-            const firstMessageWithCreationDate = messages.find((msg) => msg.created_at);
-            if (!firstMessageWithCreationDate) {
-              loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-              throw new Error('Failed to jump to first unread message id.');
-            }
-            const firstMessageTimestamp = new Date(
-              firstMessageWithCreationDate.created_at as string,
-            ).getTime();
+              const firstMessageWithCreationDate = messages.find((msg) => msg.created_at);
+              if (!firstMessageWithCreationDate) {
+                loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+                throw new Error('Failed to jump to first unread message id.');
+              }
+              const firstMessageTimestamp = new Date(
+                firstMessageWithCreationDate.created_at as string,
+              ).getTime();
 
-            if (lastReadTimestamp < firstMessageTimestamp) {
-              // whole channel is unread
-              firstUnreadMessageId = firstMessageWithCreationDate.id;
-            } else {
-              const result = findInMessagesByDate(messages, last_read);
-              lastReadMessageId = result.message?.id;
+              if (lastReadTimestamp < firstMessageTimestamp) {
+                // whole channel is unread
+                firstUnreadMessageId = firstMessageWithCreationDate.id;
+              } else {
+                const result = findInMessagesByDate(messages, last_read);
+                lastReadMessageId = result.message?.id;
+              }
+              loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
             }
-            loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
           }
-        }
 
-        // If we still don't have the first and last read message id, we can't proceed.
-        if (!firstUnreadMessageId && !lastReadMessageId) {
-          throw new Error('Failed to jump to first unread message id.');
-        }
+          // If we still don't have the first and last read message id, we can't proceed.
+          if (!firstUnreadMessageId && !lastReadMessageId) {
+            throw new Error('Failed to jump to first unread message id.');
+          }
 
-        // If the first unread message is not in the current message set, we need to load message around the id.
-        if (!isInCurrentMessageSet) {
-          try {
-            setLoadingMore(true);
-            setLoading(true);
-            const targetedMessage = (firstUnreadMessageId || lastReadMessageId) as string;
-            await channel.state.loadMessageIntoState(targetedMessage, undefined, limit);
-            /**
-             * if the index of the last read message on the page is beyond the half of the page,
-             * we have arrived to the oldest page of the channel
-             */
-            const indexOfTarget = channel.state.messages.findIndex(
-              (message) => message.id === targetedMessage,
-            );
+          // If the first unread message is not in the current message set, we need to load message around the id.
+          if (!isInCurrentMessageSet) {
+            try {
+              setLoadingMore(true);
+              setLoading(true);
+              const targetedMessage = (firstUnreadMessageId || lastReadMessageId) as string;
+              await channel.state.loadMessageIntoState(targetedMessage, undefined, limit);
+              /**
+               * if the index of the last read message on the page is beyond the half of the page,
+               * we have arrived to the oldest page of the channel
+               */
+              const indexOfTarget = channel.state.messages.findIndex(
+                (message) => message.id === targetedMessage,
+              );
 
-            loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-            firstUnreadMessageId =
-              firstUnreadMessageId ?? channel.state.messages[indexOfTarget + 1].id;
-          } catch (error) {
-            setLoading(false);
-            loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-            console.log('Loading channel at first unread message failed with error:', error);
-            return;
+              loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+              firstUnreadMessageId =
+                firstUnreadMessageId ?? channel.state.messages[indexOfTarget + 1].id;
+            } catch (error) {
+              setLoading(false);
+              loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+              console.log('Loading channel at first unread message failed with error:', error);
+              return;
+            }
           }
-        }
 
-        if (!firstUnreadMessageId) {
-          throw new Error('Failed to jump to first unread message id.');
-        }
-        if (!first_unread_message_id && setChannelUnreadState) {
-          setChannelUnreadState({
-            ...channelUnreadState,
-            first_unread_message_id: firstUnreadMessageId,
-            last_read_message_id: lastReadMessageId,
-          });
-        }
+          if (!firstUnreadMessageId) {
+            throw new Error('Failed to jump to first unread message id.');
+          }
+          if (!first_unread_message_id && setChannelUnreadState) {
+            setChannelUnreadState({
+              ...channelUnreadState,
+              first_unread_message_id: firstUnreadMessageId,
+              last_read_message_id: lastReadMessageId,
+            });
+          }
 
-        jumpToMessageFinished(channel.state.messagePagination.hasNext, firstUnreadMessageId);
-        if (setTargetedMessage) {
-          setTargetedMessage(firstUnreadMessageId);
+          jumpToMessageFinished(channel.state.messagePagination.hasNext, firstUnreadMessageId);
+          if (setTargetedMessage) {
+            setTargetedMessage(firstUnreadMessageId);
+          }
+        } catch (error) {
+          console.log('Loading channel at first unread message failed with error:', error);
         }
-      } catch (error) {
-        console.log('Loading channel at first unread message failed with error:', error);
-      }
-    };
+      },
+    );
 
   return {
     copyMessagesStateFromChannel,

package/src/components/Chat/Chat.tsx

@@ -308,15 +308,6 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
  * - connectionRecovering - whether or not websocket is reconnecting
  * - isOnline - whether or not set user is active
  * - setActiveChannel - function to set the currently active channel
- *
- * The Chat Component takes the following generics in order:
- * - At (AttachmentType) - custom Attachment object extension
- * - Ct (ChannelType) - custom Channel object extension
- * - Co (CommandType) - custom Command string union extension
- * - Ev (EventType) - custom Event object extension
- * - Me (MessageType) - custom Message object extension
- * - Re (ReactionType) - custom Reaction object extension
- * - Us (UserType) - custom User object extension
  */
 export const Chat = (props: PropsWithChildren<ChatProps>) => {
   const { style } = useOverlayContext();

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -4,6 +4,8 @@ import type { SharedValue } from 'react-native-reanimated';
 
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 
+import { LocalMessage } from 'stream-chat';
+
 import {
   ImageGalleryContext,
   ImageGalleryContextValue,
@@ -18,7 +20,6 @@ import {
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
 
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import { ImageGallery } from '../ImageGallery';
 
 jest.mock('../../../native.ts', () => {
@@ -56,7 +57,7 @@ describe('ImageGallery', () => {
               generateVideoAttachment({ type: 'video' }),
             ],
           }),
-        ] as unknown as MessageType[],
+        ] as unknown as LocalMessage[],
       }),
     );
 
@@ -73,7 +74,7 @@ describe('ImageGallery', () => {
     });
     render(
       getComponent({
-        messages: [message] as unknown as MessageType[],
+        messages: [message] as unknown as LocalMessage[],
       }),
     );
 
@@ -102,7 +103,7 @@ describe('ImageGallery', () => {
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
-        ] as unknown as MessageType[],
+        ] as unknown as LocalMessage[],
       }),
     );
 
@@ -128,7 +129,7 @@ describe('ImageGallery', () => {
 
     render(
       getComponent({
-        messages: [message] as unknown as MessageType[],
+        messages: [message] as unknown as LocalMessage[],
       }),
     );
 
@@ -163,7 +164,7 @@ describe('ImageGallery', () => {
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
-        ] as unknown as MessageType[],
+        ] as unknown as LocalMessage[],
       }),
     );
 
@@ -193,7 +194,7 @@ describe('ImageGallery', () => {
     });
     render(
       getComponent({
-        messages: [message] as unknown as MessageType[],
+        messages: [message] as unknown as LocalMessage[],
       }),
     );
 

package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx

@@ -7,6 +7,8 @@ import { ReactTestInstance } from 'react-test-renderer';
 
 import { render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
+import { LocalMessage } from 'stream-chat';
+
 import { Chat } from '../../../components/Chat/Chat';
 import {
   ImageGalleryContext,
@@ -20,7 +22,6 @@ import {
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { NativeHandlers } from '../../../native';
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import { ImageGallery, ImageGalleryCustomComponents } from '../ImageGallery';
 
 jest.mock('../../../native.ts', () => {
@@ -76,7 +77,7 @@ describe('ImageGalleryFooter', () => {
                 generateMessage({
                   attachments: [generateVideoAttachment({ type: 'video' })],
                 }),
-              ] as unknown as MessageType[],
+              ] as unknown as LocalMessage[],
             } as unknown as ImageGalleryContextValue
           }
         >
@@ -131,7 +132,7 @@ describe('ImageGalleryFooter', () => {
                 generateMessage({
                   attachments: [generateVideoAttachment({ type: 'video' })],
                 }),
-              ] as unknown as MessageType[],
+              ] as unknown as LocalMessage[],
             } as unknown as ImageGalleryContextValue
           }
         >
@@ -174,7 +175,7 @@ describe('ImageGalleryFooter', () => {
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),
-              ] as unknown as MessageType[],
+              ] as unknown as LocalMessage[],
             } as unknown as ImageGalleryContextValue
           }
         >

package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx

@@ -7,6 +7,8 @@ import { act } from 'react-test-renderer';
 
 import { render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
+import { LocalMessage } from 'stream-chat';
+
 import { Chat } from '../../../components/Chat/Chat';
 import {
   ImageGalleryContext,
@@ -24,7 +26,6 @@ import {
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import { ImageGallery, ImageGalleryCustomComponents } from '../ImageGallery';
 
 jest.mock('../../../native.ts', () => {
@@ -71,7 +72,7 @@ describe('ImageGalleryHeader', () => {
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),
-              ] as unknown as MessageType[],
+              ] as unknown as LocalMessage[],
             } as unknown as ImageGalleryContextValue
           }
         >
@@ -118,7 +119,7 @@ describe('ImageGalleryHeader', () => {
                 generateMessage({
                   attachments: [generateVideoAttachment({ type: 'video' })],
                 }),
-              ] as unknown as MessageType[],
+              ] as unknown as LocalMessage[],
             } as unknown as ImageGalleryContextValue
           }
         >
@@ -158,7 +159,7 @@ describe('ImageGalleryHeader', () => {
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),
-              ] as unknown as MessageType[],
+              ] as unknown as LocalMessage[],
             } as unknown as ImageGalleryContextValue
           }
         >

package/src/components/ImageGallery/__tests__/ImageGalleryOverlay.test.tsx

@@ -7,6 +7,8 @@ import { act } from 'react-test-renderer';
 
 import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
+import { LocalMessage } from 'stream-chat';
+
 import { Chat } from '../../../components/Chat/Chat';
 import {
   ImageGalleryContext,
@@ -20,7 +22,6 @@ import { generateImageAttachment } from '../../../mock-builders/generator/attach
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import { ImageGalleryOverlay } from '../components/ImageGalleryOverlay';
 
 describe('ImageGalleryOverlay', () => {
@@ -39,7 +40,7 @@ describe('ImageGalleryOverlay', () => {
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),
-              ] as unknown as MessageType[],
+              ] as unknown as LocalMessage[],
             } as unknown as ImageGalleryContextValue
           }
         >