stream-chat-react-native-core 9.0.0-beta.8 → 9.0.0

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

@@ -9,8 +9,9 @@ import { LinkPreviewsManager } from 'stream-chat';
 
 import { AttachmentRemoveControl } from './AttachmentPreview/AttachmentRemoveControl';
 
-import { useChatContext, useMessageComposer, useTheme } from '../../../contexts';
-import { Link } from '../../../icons/Link';
+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/EditButton.tsx

@@ -4,7 +4,7 @@ import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
-import { Tick } from '../../../../icons/Tick';
+import { Tick } from '../../../../icons/checkmark';
 import { Button } from '../../../ui';
 
 export type EditButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {

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

@@ -4,7 +4,7 @@ import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
-import { SendRight } from '../../../../icons/SendRight';
+import { SendRight } from '../../../../icons/send';
 import { Button } from '../../../ui';
 
 export type SendButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {

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

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import { TextComposerState } from 'stream-chat';
 
@@ -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 {
@@ -21,6 +22,7 @@ import {
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useStateStore } from '../../../../hooks/useStateStore';
+import { transitions } from '../../../../utils/transitions';
 import { AIStates, useAIState } from '../../../AITypingIndicatorView';
 import { useIsCooldownActive } from '../../hooks/useIsCooldownActive';
 
@@ -35,10 +37,6 @@ export type OutputButtonsWithContextProps = Pick<ChatContextValue, 'isOnline'> &
     | 'asyncMessagesLockDistance'
     | 'audioRecordingSendOnComplete'
     | 'audioRecordingEnabled'
-    | 'CooldownTimer'
-    | 'SendButton'
-    | 'StopMessageStreamingButton'
-    | 'StartAudioRecordingButton'
   > & {
     cooldownIsActive: boolean;
     hasAttachments: boolean;
@@ -50,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: {
@@ -88,9 +78,9 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   } else if (editing || command) {
     return (
       <Animated.View
-        entering={ZoomIn.duration(200)}
-        exiting={ZoomOut.duration(200)}
-        key='cooldown-timer'
+        entering={transitions.zoomIn200}
+        exiting={transitions.zoomOut200}
+        key='edit-button'
         style={editButtonContainer}
       >
         <EditButton disabled={messageComposer.compositionIsEmpty} />
@@ -99,8 +89,8 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   } else if (cooldownIsActive) {
     return (
       <Animated.View
-        entering={ZoomIn.duration(200)}
-        exiting={ZoomOut.duration(200)}
+        entering={transitions.zoomIn200}
+        exiting={transitions.zoomOut200}
         key='cooldown-timer'
         style={cooldownButtonContainer}
       >
@@ -110,8 +100,8 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   } else if (audioRecordingEnabled && textIsEmpty && !hasAttachments) {
     return (
       <Animated.View
-        entering={ZoomIn.duration(200)}
-        exiting={ZoomOut.duration(200)}
+        entering={transitions.zoomIn200}
+        exiting={transitions.zoomOut200}
         key='audio-recording-button'
         style={audioRecordingButtonContainer}
       >
@@ -121,8 +111,8 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   } else {
     return (
       <Animated.View
-        entering={ZoomIn.duration(200)}
-        exiting={ZoomOut.duration(200)}
+        entering={transitions.zoomIn200}
+        exiting={transitions.zoomOut200}
         key='send-button'
         style={sendButtonContainer}
       >
@@ -179,10 +169,6 @@ export const OutputButtons = (props: OutputButtonsProps) => {
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
     audioRecordingSendOnComplete,
-    CooldownTimer,
-    SendButton,
-    StopMessageStreamingButton,
-    StartAudioRecordingButton,
   } = useMessageInputContext();
   const cooldownIsActive = useIsCooldownActive();
   const hasAttachments = useHasAttachments();
@@ -197,11 +183,7 @@ export const OutputButtons = (props: OutputButtonsProps) => {
         audioRecordingEnabled,
         channel,
         cooldownIsActive,
-        CooldownTimer,
         isOnline,
-        SendButton,
-        StartAudioRecordingButton,
-        StopMessageStreamingButton,
         hasAttachments,
       }}
       {...props}

package/src/components/MessageList/MessageFlashList.tsx

@@ -8,7 +8,7 @@ import {
   ViewToken,
 } from 'react-native';
 
-import Animated, { LinearTransition } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import type { FlashListProps, FlashListRef } from '@shopify/flash-list';
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
@@ -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,
@@ -56,6 +57,7 @@ import { useStableCallback, useStateStore } from '../../hooks';
 import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
+import { transitions } from '../../utils/transitions';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
 type FlashListContextApi = { getRef?: () => FlashListRef<LocalMessage> | null } | undefined;
@@ -120,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'
@@ -142,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,
@@ -276,10 +262,8 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     channelUnreadStateStore,
     client,
     closePicker,
-    DateHeader,
     disabled,
     disableTypingIndicator,
-    EmptyStateIndicator,
     // FlatList,
     FooterComponent,
     HeaderComponent = InlineLoadingMoreIndicator,
@@ -287,7 +271,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     isLiveStreaming = false,
     loadChannelAroundMessage,
     loading,
-    LoadingIndicator,
     loadMore,
     loadMoreRecent,
     loadMoreRecentThread,
@@ -298,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(
@@ -1090,11 +1077,11 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       )}
       <View style={styles.stickyHeaderContainer}>
         {messageListLengthAfterUpdate && StickyHeader ? (
-          <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
+          <StickyHeader date={stickyHeaderDate} />
         ) : null}
       </View>
       <Animated.View
-        layout={LinearTransition.duration(200)}
+        layout={transitions.layout200}
         style={[
           styles.scrollToBottomButtonContainer,
           {
@@ -1180,7 +1167,6 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
     channel,
     channelUnreadStateStore,
     disabled,
-    EmptyStateIndicator,
     enableMessageGroupingByUser,
     error,
     hideStickyDateHeader,
@@ -1188,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();
@@ -1229,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

@@ -11,7 +11,7 @@ import {
   ViewToken,
 } from 'react-native';
 
-import Animated, { LinearTransition } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import debounce from 'lodash/debounce';
 
@@ -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 {
@@ -68,6 +69,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
+import { transitions } from '../../utils/transitions';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
 // This is just to make sure that the scrolling happens in a different task queue.
@@ -195,18 +197,14 @@ type MessageListPropsWithContext = Pick<
     | 'channel'
     | 'channelUnreadStateStore'
     | 'disabled'
-    | 'EmptyStateIndicator'
     | 'hideStickyDateHeader'
     | 'loadChannelAroundMessage'
     | 'loading'
-    | 'LoadingIndicator'
     | 'markRead'
-    | 'NetworkDownIndicator'
     | 'reloadChannel'
     | 'scrollToFirstUnreadThreshold'
     | 'setChannelUnreadState'
     | 'setTargetedMessage'
-    | 'StickyHeader'
     | 'targetedMessage'
     | 'threadList'
     | 'maximumMessageLimit'
@@ -215,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<
@@ -325,10 +313,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     channelUnreadStateStore,
     client,
     closePicker,
-    DateHeader,
     disabled,
     disableTypingIndicator,
-    EmptyStateIndicator,
     FlatList,
     FooterComponent = InlineLoadingMoreIndicator,
     HeaderComponent,
@@ -337,7 +323,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     isLiveStreaming = false,
     loadChannelAroundMessage,
     loading,
-    LoadingIndicator,
     loadMore,
     loadMoreRecent,
     loadMoreRecentThread,
@@ -347,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();
@@ -1263,7 +1252,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
         <MessageListItemProvider value={messageListItemContextValue}>
           <ListComponent
             // TODO: Consider hiding this behind a feature flag.
-            layout={LayoutTransition}
+            layout={transitions.layout200}
             contentContainerStyle={flatListContentContainerStyle}
             /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
             data={processedMessageListWithNeighbors}
@@ -1305,12 +1294,12 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       )}
       <View style={styles.stickyHeaderContainer}>
         {messageListLengthAfterUpdate && StickyHeader ? (
-          <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
+          <StickyHeader date={stickyHeaderDate} />
         ) : null}
       </View>
       {scrollToBottomButtonVisible ? (
         <Animated.View
-          layout={LinearTransition.duration(200)}
+          layout={transitions.layout200}
           style={[
             {
               bottom: messageInputFloating
@@ -1349,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 } =
@@ -1398,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,
       }}
@@ -1462,5 +1421,3 @@ export const MessageList = (props: MessageListProps) => {
 const AnimatedList = React.memo(
   Animated.createAnimatedComponent(FlatList<MessageListItemWithNeighbours>),
 );
-
-const LayoutTransition = LinearTransition.duration(200);

package/src/components/MessageList/NetworkDownIndicator.tsx

@@ -52,7 +52,7 @@ const useStyles = () => {
         right: 0,
         top: 0,
         justifyContent: 'center',
-        backgroundColor: semantics.backgroundCoreSurface,
+        backgroundColor: semantics.backgroundCoreSurfaceDefault,
         ...errorNotification,
       },
       errorText: {

package/src/components/MessageList/ScrollToBottomButton.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native';
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Down } from '../../icons/Down';
+import { Down } from '../../icons/arrow-up';
 import { primitives } from '../../theme';
 import { BadgeNotification } from '../ui';
 import { Button } from '../ui/Button';

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/MessageList/UnreadMessagesNotification.tsx

@@ -8,8 +8,8 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../hooks/useStateStore';
-import { ArrowUp } from '../../icons/ArrowUp';
-import { NewClose } from '../../icons/NewClose';
+import { ArrowUp } from '../../icons/arrow-up';
+import { NewClose } from '../../icons/xmark';
 import { ChannelUnreadStateStoreType } from '../../state-store/channel-unread-state';
 import { primitives } from '../../theme';
 import { Button } from '../ui';