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

package/src/components/MessageInput/components/LinkPreviewList.tsx

@@ -9,7 +9,8 @@ import { LinkPreviewsManager } from 'stream-chat';
 
 import { AttachmentRemoveControl } from './AttachmentPreview/AttachmentRemoveControl';
 
-import { useChatContext, useMessageComposer, useTheme } from '../../../contexts';
+import { useMessageComposer, useTheme } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { Link } from '../../../icons/link';
 import { components, primitives } from '../../../theme';
 import { useLinkPreviews } from '../hooks/useLinkPreviews';
@@ -38,7 +39,7 @@ type LinkPreviewProps = {
 
 export const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {
   const styles = useStyles();
-  const { ImageComponent } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
   const { linkPreviewsManager } = useMessageComposer();
   const { image_url, thumb_url, title, text, og_scrape_url } = linkPreview;
 

package/src/components/MessageInput/components/OutputButtons/index.tsx

@@ -14,6 +14,7 @@ import {
   useMessageComposerHasSendableData,
   useTheme,
 } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useHasAttachments } from '../../../../contexts/messageInputContext/hooks/useHasAttachments';
 import { useMessageComposer } from '../../../../contexts/messageInputContext/hooks/useMessageComposer';
 import {
@@ -36,10 +37,6 @@ export type OutputButtonsWithContextProps = Pick<ChatContextValue, 'isOnline'> &
     | 'asyncMessagesLockDistance'
     | 'audioRecordingSendOnComplete'
     | 'audioRecordingEnabled'
-    | 'CooldownTimer'
-    | 'SendButton'
-    | 'StopMessageStreamingButton'
-    | 'StartAudioRecordingButton'
   > & {
     cooldownIsActive: boolean;
     hasAttachments: boolean;
@@ -51,17 +48,9 @@ const textComposerStateSelector = (state: TextComposerState) => ({
 });
 
 export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) => {
-  const {
-    audioRecordingEnabled,
-    channel,
-    CooldownTimer,
-    cooldownIsActive,
-    isOnline,
-    SendButton,
-    StopMessageStreamingButton,
-    StartAudioRecordingButton,
-    hasAttachments,
-  } = props;
+  const { audioRecordingEnabled, channel, cooldownIsActive, isOnline, hasAttachments } = props;
+  const { CooldownTimer, SendButton, StartAudioRecordingButton, StopMessageStreamingButton } =
+    useComponentsContext();
   const {
     theme: {
       messageComposer: {
@@ -180,10 +169,6 @@ export const OutputButtons = (props: OutputButtonsProps) => {
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
     audioRecordingSendOnComplete,
-    CooldownTimer,
-    SendButton,
-    StopMessageStreamingButton,
-    StartAudioRecordingButton,
   } = useMessageInputContext();
   const cooldownIsActive = useIsCooldownActive();
   const hasAttachments = useHasAttachments();
@@ -198,11 +183,7 @@ export const OutputButtons = (props: OutputButtonsProps) => {
         audioRecordingEnabled,
         channel,
         cooldownIsActive,
-        CooldownTimer,
         isOnline,
-        SendButton,
-        StartAudioRecordingButton,
-        StopMessageStreamingButton,
         hasAttachments,
       }}
       {...props}

package/src/components/MessageList/MessageFlashList.tsx

@@ -29,6 +29,7 @@ import {
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -121,19 +122,15 @@ type MessageFlashListPropsWithContext = Pick<
     | 'channel'
     | 'channelUnreadStateStore'
     | 'disabled'
-    | 'EmptyStateIndicator'
     | 'hideStickyDateHeader'
     | 'highlightedMessageId'
     | 'loadChannelAroundMessage'
     | 'loading'
-    | 'LoadingIndicator'
     | 'markRead'
-    | 'NetworkDownIndicator'
     | 'reloadChannel'
     | 'scrollToFirstUnreadThreshold'
     | 'setChannelUnreadState'
     | 'setTargetedMessage'
-    | 'StickyHeader'
     | 'targetedMessage'
     | 'threadList'
     | 'maximumMessageLimit'
@@ -143,19 +140,7 @@ type MessageFlashListPropsWithContext = Pick<
   Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent'> &
   Pick<
     MessagesContextValue,
-    | 'DateHeader'
-    | 'disableTypingIndicator'
-    | 'FlatList'
-    | 'InlineDateSeparator'
-    | 'InlineUnreadIndicator'
-    | 'Message'
-    | 'ScrollToBottomButton'
-    | 'MessageSystem'
-    | 'myMessageTheme'
-    | 'shouldShowUnreadUnderlay'
-    | 'TypingIndicator'
-    | 'TypingIndicatorContainer'
-    | 'UnreadMessagesNotification'
+    'disableTypingIndicator' | 'FlatList' | 'myMessageTheme' | 'shouldShowUnreadUnderlay'
   > &
   Pick<
     ThreadContextValue,
@@ -277,10 +262,8 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     channelUnreadStateStore,
     client,
     closePicker,
-    DateHeader,
     disabled,
     disableTypingIndicator,
-    EmptyStateIndicator,
     // FlatList,
     FooterComponent,
     HeaderComponent = InlineLoadingMoreIndicator,
@@ -288,7 +271,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     isLiveStreaming = false,
     loadChannelAroundMessage,
     loading,
-    LoadingIndicator,
     loadMore,
     loadMoreRecent,
     loadMoreRecentThread,
@@ -299,24 +281,28 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     messageInputHeightStore,
     myMessageTheme,
     readEvents,
-    NetworkDownIndicator,
     noGroupByUser,
     onListScroll,
     onThreadSelect,
     reloadChannel,
-    ScrollToBottomButton,
     setChannelUnreadState,
     setFlatListRef,
     setTargetedMessage,
-    StickyHeader,
     targetedMessage,
     thread,
     threadInstance,
     threadList = false,
+  } = props;
+  const {
+    EmptyStateIndicator,
+    MessageListLoadingIndicator: LoadingIndicator,
+    NetworkDownIndicator,
+    ScrollToBottomButton,
+    StickyHeader,
     TypingIndicator,
     TypingIndicatorContainer,
     UnreadMessagesNotification,
-  } = props;
+  } = useComponentsContext();
   const flashListRef = useRef<FlashListRef<LocalMessage> | null>(null);
 
   const { height: messageInputHeight } = useStateStore(
@@ -1091,7 +1077,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       )}
       <View style={styles.stickyHeaderContainer}>
         {messageListLengthAfterUpdate && StickyHeader ? (
-          <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
+          <StickyHeader date={stickyHeaderDate} />
         ) : null}
       </View>
       <Animated.View
@@ -1181,7 +1167,6 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
     channel,
     channelUnreadStateStore,
     disabled,
-    EmptyStateIndicator,
     enableMessageGroupingByUser,
     error,
     hideStickyDateHeader,
@@ -1189,34 +1174,18 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
     isChannelActive,
     loadChannelAroundMessage,
     loading,
-    LoadingIndicator,
     markRead,
     maximumMessageLimit,
-    NetworkDownIndicator,
     reloadChannel,
     scrollToFirstUnreadThreshold,
     setChannelUnreadState,
     setTargetedMessage,
-    StickyHeader,
     targetedMessage,
     threadList,
   } = useChannelContext();
   const { client } = useChatContext();
-  const {
-    DateHeader,
-    disableTypingIndicator,
-    FlatList,
-    InlineDateSeparator,
-    InlineUnreadIndicator,
-    Message,
-    MessageSystem,
-    myMessageTheme,
-    ScrollToBottomButton,
-    shouldShowUnreadUnderlay,
-    TypingIndicator,
-    TypingIndicatorContainer,
-    UnreadMessagesNotification,
-  } = useMessagesContext();
+  const { disableTypingIndicator, FlatList, myMessageTheme, shouldShowUnreadUnderlay } =
+    useMessagesContext();
   const { loadMore, loadMoreRecent } = usePaginatedMessageListContext();
   const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext();
   const { readEvents } = useOwnCapabilitiesContext();
@@ -1230,48 +1199,35 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
         channelUnreadStateStore,
         client,
         closePicker,
-        DateHeader,
         disabled,
         disableTypingIndicator,
-        EmptyStateIndicator,
         enableMessageGroupingByUser,
         error,
         FlatList,
         hideStickyDateHeader,
         highlightedMessageId,
-        InlineDateSeparator,
-        InlineUnreadIndicator,
         isListActive: isChannelActive,
         loadChannelAroundMessage,
         loading,
-        LoadingIndicator,
         loadMore,
         loadMoreRecent,
         loadMoreRecentThread,
         loadMoreThread,
         markRead,
         maximumMessageLimit,
-        Message,
         messageInputFloating,
         messageInputHeightStore,
-        MessageSystem,
         myMessageTheme,
-        NetworkDownIndicator,
         readEvents,
         reloadChannel,
-        ScrollToBottomButton,
         scrollToFirstUnreadThreshold,
         setChannelUnreadState,
         setTargetedMessage,
         shouldShowUnreadUnderlay,
-        StickyHeader,
         targetedMessage,
         thread,
         threadInstance,
         threadList,
-        TypingIndicator,
-        TypingIndicatorContainer,
-        UnreadMessagesNotification,
       }}
       {...props}
       noGroupByUser={!enableMessageGroupingByUser || props.noGroupByUser}

package/src/components/MessageList/MessageList.tsx

@@ -38,6 +38,7 @@ import {
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useDebugContext } from '../../contexts/debugContext/DebugContext';
 
 import {
@@ -196,18 +197,14 @@ type MessageListPropsWithContext = Pick<
     | 'channel'
     | 'channelUnreadStateStore'
     | 'disabled'
-    | 'EmptyStateIndicator'
     | 'hideStickyDateHeader'
     | 'loadChannelAroundMessage'
     | 'loading'
-    | 'LoadingIndicator'
     | 'markRead'
-    | 'NetworkDownIndicator'
     | 'reloadChannel'
     | 'scrollToFirstUnreadThreshold'
     | 'setChannelUnreadState'
     | 'setTargetedMessage'
-    | 'StickyHeader'
     | 'targetedMessage'
     | 'threadList'
     | 'maximumMessageLimit'
@@ -216,17 +213,7 @@ type MessageListPropsWithContext = Pick<
   Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent' | 'hasMore'> &
   Pick<
     MessagesContextValue,
-    | 'DateHeader'
-    | 'disableTypingIndicator'
-    | 'FlatList'
-    | 'InlineDateSeparator'
-    | 'InlineUnreadIndicator'
-    | 'Message'
-    | 'ScrollToBottomButton'
-    | 'myMessageTheme'
-    | 'TypingIndicator'
-    | 'TypingIndicatorContainer'
-    | 'UnreadMessagesNotification'
+    'disableTypingIndicator' | 'FlatList' | 'myMessageTheme' | 'shouldShowUnreadUnderlay'
   > &
   Pick<MessageInputContextValue, 'messageInputFloating' | 'messageInputHeightStore'> &
   Pick<
@@ -326,10 +313,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     channelUnreadStateStore,
     client,
     closePicker,
-    DateHeader,
     disabled,
     disableTypingIndicator,
-    EmptyStateIndicator,
     FlatList,
     FooterComponent = InlineLoadingMoreIndicator,
     HeaderComponent,
@@ -338,7 +323,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     isLiveStreaming = false,
     loadChannelAroundMessage,
     loading,
-    LoadingIndicator,
     loadMore,
     loadMoreRecent,
     loadMoreRecentThread,
@@ -348,27 +332,31 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     messageInputFloating,
     messageInputHeightStore,
     myMessageTheme,
-    NetworkDownIndicator,
     noGroupByUser,
     onListScroll,
     onThreadSelect,
     readEvents,
     reloadChannel,
-    ScrollToBottomButton,
     setChannelUnreadState,
     setFlatListRef,
     setTargetedMessage,
-    StickyHeader,
     targetedMessage,
     thread,
     threadInstance,
     threadList = false,
-    TypingIndicator,
-    TypingIndicatorContainer,
-    UnreadMessagesNotification,
     hasMore,
     threadHasMore,
   } = props;
+  const {
+    EmptyStateIndicator,
+    MessageListLoadingIndicator: LoadingIndicator,
+    NetworkDownIndicator,
+    ScrollToBottomButton,
+    StickyHeader,
+    TypingIndicator,
+    TypingIndicatorContainer,
+    UnreadMessagesNotification,
+  } = useComponentsContext();
   const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState<boolean>(false);
   const { theme } = useTheme();
   const styles = useStyles();
@@ -1306,7 +1294,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       )}
       <View style={styles.stickyHeaderContainer}>
         {messageListLengthAfterUpdate && StickyHeader ? (
-          <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
+          <StickyHeader date={stickyHeaderDate} />
         ) : null}
       </View>
       {scrollToBottomButtonVisible ? (
@@ -1350,42 +1338,25 @@ export const MessageList = (props: MessageListProps) => {
     channel,
     channelUnreadStateStore,
     disabled,
-    EmptyStateIndicator,
     enableMessageGroupingByUser,
     error,
     hideStickyDateHeader,
     highlightedMessageId,
     loadChannelAroundMessage,
     loading,
-    LoadingIndicator,
     maximumMessageLimit,
     markRead,
-    NetworkDownIndicator,
     reloadChannel,
     scrollToFirstUnreadThreshold,
     setChannelUnreadState,
     setTargetedMessage,
-    StickyHeader,
     targetedMessage,
     threadList,
   } = useChannelContext();
   const { client } = useChatContext();
   const { readEvents } = useOwnCapabilitiesContext();
-  const {
-    DateHeader,
-    disableTypingIndicator,
-    FlatList,
-    InlineDateSeparator,
-    InlineUnreadIndicator,
-    Message,
-    MessageSystem,
-    myMessageTheme,
-    ScrollToBottomButton,
-    shouldShowUnreadUnderlay,
-    TypingIndicator,
-    TypingIndicatorContainer,
-    UnreadMessagesNotification,
-  } = useMessagesContext();
+  const { disableTypingIndicator, FlatList, myMessageTheme, shouldShowUnreadUnderlay } =
+    useMessagesContext();
   const { messageInputFloating, messageInputHeightStore } = useMessageInputContext();
   const { loadMore, loadMoreRecent, hasMore } = usePaginatedMessageListContext();
   const { loadMoreRecentThread, loadMoreThread, threadHasMore, thread, threadInstance } =
@@ -1399,47 +1370,34 @@ export const MessageList = (props: MessageListProps) => {
         channelUnreadStateStore,
         client,
         closePicker,
-        DateHeader,
         disabled,
         disableTypingIndicator,
-        EmptyStateIndicator,
         enableMessageGroupingByUser,
         error,
         FlatList,
         hideStickyDateHeader,
         highlightedMessageId,
-        InlineDateSeparator,
-        InlineUnreadIndicator,
         loadChannelAroundMessage,
         loading,
-        LoadingIndicator,
         loadMore,
         loadMoreRecent,
         loadMoreRecentThread,
         loadMoreThread,
         markRead,
         maximumMessageLimit,
-        Message,
         messageInputFloating,
         messageInputHeightStore,
-        MessageSystem,
         myMessageTheme,
-        NetworkDownIndicator,
         readEvents,
         reloadChannel,
-        ScrollToBottomButton,
         scrollToFirstUnreadThreshold,
         setChannelUnreadState,
         setTargetedMessage,
         shouldShowUnreadUnderlay,
-        StickyHeader,
         targetedMessage,
         thread,
         threadInstance,
         threadList,
-        TypingIndicator,
-        TypingIndicatorContainer,
-        UnreadMessagesNotification,
         hasMore,
         threadHasMore,
       }}

package/src/components/MessageList/StickyHeader.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
 import { getDateString } from '../../utils/i18n/getDateString';
@@ -8,7 +8,7 @@ import { getDateString } from '../../utils/i18n/getDateString';
 /**
  * Props for the StickyHeader component.
  */
-export type StickyHeaderProps = Pick<MessagesContextValue, 'DateHeader'> & {
+export type StickyHeaderProps = {
   /**
    * Date to be displayed in the sticky header.
    */
@@ -19,7 +19,8 @@ export type StickyHeaderProps = Pick<MessagesContextValue, 'DateHeader'> & {
   dateString?: string | number;
 };
 
-export const StickyHeader = ({ date, DateHeader, dateString }: StickyHeaderProps) => {
+export const StickyHeader = ({ date, dateString }: StickyHeaderProps) => {
+  const { DateHeader } = useComponentsContext();
   const { t, tDateTimeParser } = useTranslationContext();
 
   const stickyHeaderDateString = useMemo(() => {

package/src/components/MessageMenu/MessageActionList.tsx

@@ -5,11 +5,11 @@ import { ScrollView } from 'react-native-gesture-handler';
 
 import { MessageActionType } from './MessageActionListItem';
 
-import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
 
-export type MessageActionListProps = Pick<MessagesContextValue, 'MessageActionListItem'> & {
+export type MessageActionListProps = {
   /**
    * Function to close the message actions bottom sheet
    * @returns void
@@ -22,7 +22,8 @@ export type MessageActionListProps = Pick<MessagesContextValue, 'MessageActionLi
 };
 
 export const MessageActionList = (props: MessageActionListProps) => {
-  const { MessageActionListItem, messageActions } = props;
+  const { messageActions } = props;
+  const { MessageActionListItem } = useComponentsContext();
   const {
     theme: {
       messageMenu: {

package/src/components/MessageMenu/MessageMenu.tsx

@@ -5,58 +5,46 @@ import { useWindowDimensions } from 'react-native';
 import { MessageActionType } from './MessageActionListItem';
 
 import { MessageContextValue } from '../../contexts/messageContext/MessageContext';
-import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { BottomSheetModal } from '../UIComponents/BottomSheetModal';
 
 export type MessageMenuProps = PropsWithChildren<
-  Partial<
-    Pick<
-      MessagesContextValue,
-      | 'MessageActionList'
-      | 'MessageActionListItem'
-      | 'MessageReactionPicker'
-      | 'MessageUserReactions'
-      | 'MessageUserReactionsAvatar'
-      | 'MessageUserReactionsItem'
-    >
-  > &
-    Partial<Pick<MessageContextValue, 'message'>> & {
-      /**
-       * Function to close the message actions bottom sheet
-       * @returns void
-       */
-      dismissOverlay: () => void;
-      /**
-       * An array of message actions to render
-       */
-      messageActions: MessageActionType[];
-      /**
-       * Boolean to determine if there are message actions
-       */
-      showMessageReactions: boolean;
-      /**
-       * Boolean to determine if the overlay is visible.
-       */
-      visible: boolean;
-      /**
-       * Function to handle reaction on press
-       * @param reactionType
-       * @returns
-       */
-      handleReaction?: (reactionType: string) => Promise<void>;
-      /**
-       * The selected reaction
-       */
-      selectedReaction?: string;
+  Partial<Pick<MessageContextValue, 'message'>> & {
+    /**
+     * Function to close the message actions bottom sheet
+     * @returns void
+     */
+    dismissOverlay: () => void;
+    /**
+     * An array of message actions to render
+     */
+    messageActions: MessageActionType[];
+    /**
+     * Boolean to determine if there are message actions
+     */
+    showMessageReactions: boolean;
+    /**
+     * Boolean to determine if the overlay is visible.
+     */
+    visible: boolean;
+    /**
+     * Function to handle reaction on press
+     * @param reactionType
+     * @returns
+     */
+    handleReaction?: (reactionType: string) => Promise<void>;
+    /**
+     * The selected reaction
+     */
+    selectedReaction?: string;
 
-      layout: {
-        x: number;
-        y: number;
-        w: number;
-        h: number;
-      };
-    }
+    layout: {
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+    };
+  }
 >;
 
 // TODO: V9: Either remove this or refactor it so that it's useful again, as its logic