stream-chat-react-native-core 9.0.0-beta.30 → 9.0.0-beta.32

package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx

@@ -4,6 +4,7 @@ import { Text } from 'react-native';
 import { act, render } from '@testing-library/react-native';
 import type { Channel } from 'stream-chat';
 
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
 import * as ChannelActionItemsModule from '../../ChannelList/hooks/useChannelActionItems';
 import * as ChannelActionsModule from '../../ChannelList/hooks/useChannelActions';
@@ -115,9 +116,11 @@ describe('ChannelSwipableWrapper', () => {
     });
 
     render(
-      <ChannelSwipableWrapper channel={channel} ChannelDetailsBottomSheet={customBottomSheet}>
-        <Text>child</Text>
-      </ChannelSwipableWrapper>,
+      <WithComponents overrides={{ ChannelDetailsBottomSheet: customBottomSheet }}>
+        <ChannelSwipableWrapper channel={channel}>
+          <Text>child</Text>
+        </ChannelSwipableWrapper>
+      </WithComponents>,
     );
 
     expect(customBottomSheet).toHaveBeenCalledWith(
@@ -181,9 +184,11 @@ describe('ChannelSwipableWrapper', () => {
     });
 
     render(
-      <ChannelSwipableWrapper channel={channel} ChannelDetailsBottomSheet={customBottomSheet}>
-        <Text>child</Text>
-      </ChannelSwipableWrapper>,
+      <WithComponents overrides={{ ChannelDetailsBottomSheet: customBottomSheet }}>
+        <ChannelSwipableWrapper channel={channel}>
+          <Text>child</Text>
+        </ChannelSwipableWrapper>
+      </WithComponents>,
     );
 
     expect(customBottomSheet).toHaveBeenCalledWith(

package/src/components/Chat/Chat.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
-import { Image, Platform } from 'react-native';
+import { Platform } from 'react-native';
 
 import { Channel, OfflineDBState } from 'stream-chat';
 
@@ -10,6 +10,7 @@ import { useIsOnline } from './hooks/useIsOnline';
 
 import { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';
 import { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useDebugContext } from '../../contexts/debugContext/DebugContext';
 import { DeepPartial, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 import type { Theme } from '../../contexts/themeContext/utils/theme';
@@ -30,7 +31,7 @@ import { version } from '../../version.json';
 init();
 
 export type ChatProps = Pick<ChatContextValue, 'client'> &
-  Partial<Pick<ChatContextValue, 'ImageComponent' | 'isMessageAIGenerated'>> & {
+  Partial<Pick<ChatContextValue, 'isMessageAIGenerated'>> & {
     /**
      * When false, ws connection won't be disconnection upon backgrounding the app.
      * To receive push notifications, its necessary that user doesn't have active
@@ -94,12 +95,6 @@ export type ChatProps = Pick<ChatContextValue, 'client'> &
      * ```
      */
     i18nInstance?: Streami18n;
-    /**
-     * Custom loading indicator component to be used to represent the loading state of the chat.
-     *
-     * This can be used during the phase when db is not initialised.
-     */
-    LoadingIndicator?: React.ComponentType | null;
     /**
      * You can pass the theme object to customize the styles of Chat components. You can check the default theme in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/themeContext/utils/theme.ts)
      *
@@ -144,11 +139,10 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
     closeConnectionOnBackground = true,
     enableOfflineSupport = false,
     i18nInstance,
-    ImageComponent = Image,
     isMessageAIGenerated,
-    LoadingIndicator = null,
     style,
   } = props;
+  const { ChatLoadingIndicator } = useComponentsContext();
 
   const [channel, setChannel] = useState<Channel>();
 
@@ -257,7 +251,6 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
     client,
     connectionRecovering,
     enableOfflineSupport,
-    ImageComponent,
     isMessageAIGenerated,
     isOnline,
     mutedUsers,
@@ -266,7 +259,7 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
 
   if (userID && enableOfflineSupport && !initialisedDatabase) {
     // if user id has been set and offline support is enabled, we need to wait for database to be initialised
-    return LoadingIndicator ? <LoadingIndicator /> : null;
+    return ChatLoadingIndicator ? <ChatLoadingIndicator /> : null;
   }
 
   return (

package/src/components/Chat/hooks/useCreateChatContext.ts

@@ -8,7 +8,6 @@ export const useCreateChatContext = ({
   client,
   connectionRecovering,
   enableOfflineSupport,
-  ImageComponent,
   isMessageAIGenerated,
   isOnline,
   mutedUsers,
@@ -29,7 +28,6 @@ export const useCreateChatContext = ({
       client,
       connectionRecovering,
       enableOfflineSupport,
-      ImageComponent,
       isMessageAIGenerated,
       isOnline,
       mutedUsers,

package/src/components/ImageGallery/ImageGallery.tsx

@@ -13,9 +13,15 @@ import Animated, {
 
 import { AnimatedGalleryImage } from './components/AnimatedGalleryImage';
 import { AnimatedGalleryVideo } from './components/AnimatedGalleryVideo';
+import type {
+  ImageGalleryFooterProps,
+  ImageGalleryGridProps,
+  ImageGalleryHeaderProps,
+} from './components/types';
 
 import { useImageGalleryGestures } from './hooks/useImageGalleryGestures';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   ImageGalleryProviderProps,
   useImageGalleryContext,
@@ -63,13 +69,13 @@ const imageGallerySelector = (state: ImageGalleryState) => ({
 
 type ImageGalleryWithContextProps = Pick<
   ImageGalleryProviderProps,
-  | 'numberOfImageGalleryGridColumns'
-  | 'ImageGalleryHeader'
-  | 'ImageGalleryFooter'
-  | 'ImageGalleryVideoControls'
-  | 'ImageGalleryGrid'
+  'numberOfImageGalleryGridColumns'
 > &
-  Pick<OverlayContextValue, 'overlayOpacity'>;
+  Pick<OverlayContextValue, 'overlayOpacity'> & {
+    ImageGalleryHeader?: React.ComponentType<ImageGalleryHeaderProps>;
+    ImageGalleryFooter?: React.ComponentType<ImageGalleryFooterProps>;
+    ImageGalleryGrid?: React.ComponentType<ImageGalleryGridProps>;
+  };
 
 export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) => {
   const {
@@ -77,7 +83,6 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     overlayOpacity,
     ImageGalleryHeader,
     ImageGalleryFooter,
-    ImageGalleryVideoControls,
     ImageGalleryGrid,
   } = props;
   const [isGridViewVisible, setIsGridViewVisible] = useState(false);
@@ -345,7 +350,6 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
           opacity={headerFooterOpacity}
           openGridView={openGridView}
           visible={headerFooterVisible}
-          ImageGalleryVideoControls={ImageGalleryVideoControls}
         />
       ) : null}
 
@@ -370,13 +374,8 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
 export type ImageGalleryProps = Partial<ImageGalleryWithContextProps>;
 
 export const ImageGallery = (props: ImageGalleryProps) => {
-  const {
-    numberOfImageGalleryGridColumns,
-    ImageGalleryHeader,
-    ImageGalleryFooter,
-    ImageGalleryVideoControls,
-    ImageGalleryGrid,
-  } = useImageGalleryContext();
+  const { numberOfImageGalleryGridColumns } = useImageGalleryContext();
+  const { ImageGalleryHeader, ImageGalleryFooter, ImageGalleryGrid } = useComponentsContext();
   const { overlayOpacity } = useOverlayContext();
   return (
     <ImageGalleryWithContext
@@ -384,7 +383,6 @@ export const ImageGallery = (props: ImageGalleryProps) => {
       overlayOpacity={overlayOpacity}
       ImageGalleryHeader={ImageGalleryHeader}
       ImageGalleryFooter={ImageGalleryFooter}
-      ImageGalleryVideoControls={ImageGalleryVideoControls}
       ImageGalleryGrid={ImageGalleryGrid}
       {...props}
     />

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

@@ -9,10 +9,6 @@ import duration from 'dayjs/plugin/duration';
 
 import { LocalMessage } from 'stream-chat';
 
-import { ImageGalleryFooter as ImageGalleryFooterDefault } from '../../../components/ImageGallery/components/ImageGalleryFooter';
-import { ImageGalleryHeader as ImageGalleryHeaderDefault } from '../../../components/ImageGallery/components/ImageGalleryHeader';
-import { ImageGalleryVideoControl as ImageGalleryVideoControlDefault } from '../../../components/ImageGallery/components/ImageGalleryVideoControl';
-import { ImageGalleryGrid as ImageGalleryGridDefault } from '../../../components/ImageGallery/components/ImageGrid';
 import {
   ImageGalleryContext,
   ImageGalleryContextValue,
@@ -66,10 +62,6 @@ const ImageGalleryComponent = (props: ImageGalleryProps & { message: LocalMessag
         value={
           {
             imageGalleryStateStore,
-            ImageGalleryHeader: ImageGalleryHeaderDefault,
-            ImageGalleryFooter: ImageGalleryFooterDefault,
-            ImageGalleryVideoControls: ImageGalleryVideoControlDefault,
-            ImageGalleryGrid: ImageGalleryGridDefault,
           } as unknown as ImageGalleryContextValue
         }
       >

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

@@ -6,7 +6,7 @@ import { render, screen, userEvent, waitFor } from '@testing-library/react-nativ
 
 import { Attachment, LocalMessage } from 'stream-chat';
 
-import { ImageGalleryFooter as ImageGalleryFooterDefault } from '../../../components/ImageGallery/components/ImageGalleryFooter';
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   ImageGalleryContext,
   ImageGalleryContextValue,
@@ -60,16 +60,18 @@ const ImageGalleryComponentVideo = (props: ImageGalleryProps) => {
 
   return (
     <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
-      <ImageGalleryContext.Provider
-        value={
-          {
-            imageGalleryStateStore,
-            ImageGalleryFooter: ImageGalleryFooterDefault,
-          } as unknown as ImageGalleryContextValue
-        }
-      >
-        <ImageGallery {...props} />
-      </ImageGalleryContext.Provider>
+      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+      <WithComponents overrides={{ ImageGalleryHeader: undefined as any }}>
+        <ImageGalleryContext.Provider
+          value={
+            {
+              imageGalleryStateStore,
+            } as unknown as ImageGalleryContextValue
+          }
+        >
+          <ImageGallery {...props} />
+        </ImageGalleryContext.Provider>
+      </WithComponents>
     </OverlayProvider>
   );
 };
@@ -100,16 +102,18 @@ const ImageGalleryComponentImage = (
 
   return (
     <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
-      <ImageGalleryContext.Provider
-        value={
-          {
-            imageGalleryStateStore,
-            ImageGalleryFooter: ImageGalleryFooterDefault,
-          } as unknown as ImageGalleryContextValue
-        }
-      >
-        <ImageGallery {...props} />
-      </ImageGalleryContext.Provider>
+      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+      <WithComponents overrides={{ ImageGalleryHeader: undefined as any }}>
+        <ImageGalleryContext.Provider
+          value={
+            {
+              imageGalleryStateStore,
+            } as unknown as ImageGalleryContextValue
+          }
+        >
+          <ImageGallery {...props} />
+        </ImageGalleryContext.Provider>
+      </WithComponents>
     </OverlayProvider>
   );
 };

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

@@ -4,6 +4,7 @@ import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-na
 
 import type { ImageGalleryFooterProps, ImageGalleryVideoControlProps } from './types';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -42,7 +43,8 @@ const imageGallerySelector = (state: ImageGalleryState) => ({
 });
 
 export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterProps) => {
-  const { accessibilityLabel, opacity, openGridView, visible, ImageGalleryVideoControls } = props;
+  const { accessibilityLabel, opacity, openGridView, visible } = props;
+  const { ImageGalleryVideoControls } = useComponentsContext();
 
   const [height, setHeight] = useState(200);
   const [savingInProgress, setSavingInProgress] = useState(false);

package/src/components/ImageGallery/components/types.ts

@@ -1,5 +1,3 @@
-import type React from 'react';
-
 import type { SharedValue } from 'react-native-reanimated';
 
 export type ImageGalleryVideoControlProps = {
@@ -13,7 +11,6 @@ export type ImageGalleryHeaderProps = {
 
 export type ImageGalleryFooterProps = {
   accessibilityLabel: string;
-  ImageGalleryVideoControls?: React.ComponentType<ImageGalleryVideoControlProps>;
   opacity: SharedValue<number>;
   openGridView: () => void;
   visible: SharedValue<number>;

package/src/components/Message/Message.tsx

@@ -27,6 +27,7 @@ import {
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   KeyboardContextValue,
   useKeyboardContext,
@@ -205,12 +206,8 @@ export type MessagePropsWithContext = Pick<
     | 'handleThreadReply'
     | 'handleBlockUser'
     | 'isAttachmentEqual'
-    | 'MessageMenu'
     | 'messageActions'
     | 'messageContentOrder'
-    | 'MessageBounce'
-    | 'MessageBlocked'
-    | 'MessageItemView'
     | 'onLongPressMessage'
     | 'onPressInMessage'
     | 'onPressMessage'
@@ -220,14 +217,6 @@ export type MessagePropsWithContext = Pick<
     | 'selectReaction'
     | 'supportedReactions'
     | 'updateMessage'
-    | 'PollContent'
-    // TODO: remove this comment later, using it as a pragma mark
-    | 'MessageUserReactions'
-    | 'MessageUserReactionsAvatar'
-    | 'MessageUserReactionsItem'
-    | 'MessageReactionPicker'
-    | 'MessageActionList'
-    | 'MessageActionListItem'
   > &
   Pick<ThreadContextValue, 'openThread'> &
   Pick<TranslationContextValue, 't'> & {
@@ -289,11 +278,8 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     members,
     message,
     messageActions: messageActionsProp = defaultMessageActions,
-    MessageBlocked,
-    MessageBounce,
     messageContentOrder: messageContentOrderProp,
     messagesContext,
-    MessageItemView,
     onLongPressMessage: onLongPressMessageProp,
     onPressInMessage: onPressInMessageProp,
     onPressMessage: onPressMessageProp,
@@ -314,13 +300,15 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     updateMessage,
     readBy,
     setQuotedMessage,
-    MessageUserReactions,
-    MessageUserReactionsAvatar,
-    MessageUserReactionsItem,
-    MessageReactionPicker,
-    MessageActionList,
-    MessageActionListItem,
   } = props;
+  const {
+    MessageActionList,
+    MessageBlocked,
+    MessageBounce,
+    MessageItemView,
+    MessageReactionPicker,
+    MessageUserReactions,
+  } = useComponentsContext();
   // TODO: V9: Reconsider using safe area insets in every message.
   const insets = useSafeAreaInsets();
   const isMessageAIGenerated = messagesContext.isMessageAIGenerated;
@@ -878,12 +866,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
             visible={showMessageReactions}
             height={424}
           >
-            <MessageUserReactions
-              message={message}
-              MessageUserReactionsAvatar={MessageUserReactionsAvatar}
-              MessageUserReactionsItem={MessageUserReactionsItem}
-              selectedReaction={selectedReaction}
-            />
+            <MessageUserReactions message={message} selectedReaction={selectedReaction} />
           </BottomSheetModal>
         ) : null}
         <Portal hostName={overlayActive && rect ? 'bottom-item' : undefined}>
@@ -902,11 +885,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
                 });
               }}
             >
-              <MessageActionList
-                dismissOverlay={dismissOverlay}
-                MessageActionListItem={MessageActionListItem}
-                messageActions={messageActions}
-              />
+              <MessageActionList dismissOverlay={dismissOverlay} messageActions={messageActions} />
             </View>
           ) : null}
         </Portal>

package/src/components/Message/MessageItemView/MessageBubble.tsx

@@ -12,20 +12,24 @@ import Animated, {
 
 import { MessageItemViewPropsWithContext } from './MessageItemView';
 
-import { MessagesContextValue, useTheme } from '../../../contexts';
+import { useTheme } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 import { NativeHandlers } from '../../../native';
 
 const AnimatedWrapper = Animated.createAnimatedComponent(View);
 
-type SwipableMessageWrapperProps = Pick<MessagesContextValue, 'MessageSwipeContent'> &
-  Pick<MessageItemViewPropsWithContext, 'messageSwipeToReplyHitSlop'> & {
-    children: ReactNode;
-    onSwipe: () => void;
-  };
+type SwipableMessageWrapperProps = Pick<
+  MessageItemViewPropsWithContext,
+  'messageSwipeToReplyHitSlop'
+> & {
+  children: ReactNode;
+  onSwipe: () => void;
+};
 
 export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperProps) => {
-  const { MessageSwipeContent, children, messageSwipeToReplyHitSlop, onSwipe } = props;
+  const { children, messageSwipeToReplyHitSlop, onSwipe } = props;
+  const { MessageSwipeContent } = useComponentsContext();
   const isRTL = I18nManager.isRTL;
   const swipeDirectionMultiplier = isRTL ? -1 : 1;
 

package/src/components/Message/MessageItemView/MessageContent.tsx

@@ -4,6 +4,7 @@ import { AnimatableNumericValue, ColorValue, Pressable, StyleSheet, View } from
 import { MessageTextContainer } from './MessageTextContainer';
 
 import { useChatContext } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -67,19 +68,9 @@ export type MessageContentPropsWithContext = Pick<
   Pick<
     MessagesContextValue,
     | 'additionalPressableProps'
-    | 'Attachment'
     | 'enableMessageGroupingByUser'
-    | 'FileAttachmentGroup'
-    | 'Gallery'
     | 'isAttachmentEqual'
-    | 'MessageContentBottomView'
-    | 'MessageContentLeadingView'
-    | 'MessageLocation'
-    | 'MessageContentTrailingView'
-    | 'MessageContentTopView'
     | 'myMessageTheme'
-    | 'Reply'
-    | 'StreamingMessageView'
   > &
   Pick<TranslationContextValue, 't'> & {
     /**
@@ -115,11 +106,8 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
   const {
     additionalPressableProps,
     alignment,
-    Attachment,
     backgroundColor,
     enableMessageGroupingByUser,
-    FileAttachmentGroup,
-    Gallery,
     groupStyles,
     goToMessage,
     isMessageAIGenerated,
@@ -127,26 +115,30 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     isVeryLastMessage,
     message,
     messageContentOrder,
-    MessageContentBottomView,
-    MessageContentLeadingView,
     messageGroupedSingleOrBottom = false,
-    MessageLocation,
-    MessageContentTrailingView,
-    MessageContentTopView,
     noBorder,
     onLongPress,
     onPress,
     onPressIn,
     otherAttachments,
     preventPress,
-    Reply,
-    StreamingMessageView,
     hidePaddingTop,
     hidePaddingHorizontal,
     hidePaddingBottom,
   } = props;
   const { client } = useChatContext();
-  const { PollContent: PollContentOverride } = useMessagesContext();
+  const {
+    Attachment,
+    FileAttachmentGroup,
+    Gallery,
+    MessageContentBottomView,
+    MessageContentLeadingView,
+    MessageContentTopView,
+    MessageContentTrailingView,
+    MessageLocation,
+    Reply,
+    StreamingMessageView,
+  } = useComponentsContext();
   const replyStyles = useReplyStyles();
 
   const {
@@ -298,12 +290,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
               const pollId = message.poll_id;
               const poll = pollId && client.polls.fromState(pollId);
               return pollId && poll ? (
-                <Poll
-                  key={`poll_${message.poll_id}`}
-                  message={message}
-                  poll={poll}
-                  PollContent={PollContentOverride}
-                />
+                <Poll key={`poll_${message.poll_id}`} message={message} poll={poll} />
               ) : null;
             }
             case 'location':
@@ -590,19 +577,9 @@ export const MessageContent = (props: MessageContentProps) => {
   } = useMessageContext();
   const {
     additionalPressableProps,
-    Attachment,
     enableMessageGroupingByUser,
-    FileAttachmentGroup,
-    Gallery,
     isAttachmentEqual,
-    MessageContentBottomView,
-    MessageContentLeadingView,
-    MessageLocation,
-    MessageContentTrailingView,
-    MessageContentTopView,
     myMessageTheme,
-    Reply,
-    StreamingMessageView,
   } = useMessagesContext();
   const { t } = useTranslationContext();
   const isSingleFile = files.length === 1;
@@ -647,10 +624,7 @@ export const MessageContent = (props: MessageContentProps) => {
       {...{
         additionalPressableProps,
         alignment,
-        Attachment,
         enableMessageGroupingByUser,
-        FileAttachmentGroup,
-        Gallery,
         goToMessage,
         groupStyles,
         isAttachmentEqual,
@@ -658,19 +632,12 @@ export const MessageContent = (props: MessageContentProps) => {
         isMyMessage,
         message,
         messageContentOrder,
-        MessageContentBottomView,
-        MessageContentLeadingView,
-        MessageLocation,
-        MessageContentTrailingView,
-        MessageContentTopView,
         myMessageTheme,
         onLongPress,
         onPress,
         onPressIn,
         otherAttachments,
         preventPress,
-        Reply,
-        StreamingMessageView,
         t,
         threadList,
         hidePaddingTop,

package/src/components/Message/MessageItemView/MessageDeleted.tsx

@@ -1,14 +1,11 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { CircleBan } from '../../../icons/no-sign';
@@ -20,11 +17,11 @@ type MessageDeletedComponentProps = {
 };
 
 type MessageDeletedPropsWithContext = Pick<MessageContextValue, 'alignment' | 'message'> &
-  Pick<MessagesContextValue, 'MessageFooter'> &
   MessageDeletedComponentProps;
 
 const MessageDeletedWithContext = (props: MessageDeletedPropsWithContext) => {
-  const { alignment, date, groupStyle, MessageFooter } = props;
+  const { alignment, date, groupStyle } = props;
+  const { MessageFooter } = useComponentsContext();
 
   const {
     theme: {
@@ -111,14 +108,11 @@ export type MessageDeletedProps = Partial<MessageDeletedPropsWithContext> & {
 export const MessageDeleted = (props: MessageDeletedProps) => {
   const { alignment, message } = useMessageContext();
 
-  const { MessageFooter } = useMessagesContext();
-
   return (
     <MemoizedMessageDeleted
       {...{
         alignment,
         message,
-        MessageFooter,
       }}
       {...props}
     />