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

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

@@ -2,11 +2,6 @@ import { useMemo } from 'react';
 
 import type { LocalMessage } from 'stream-chat';
 
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
-import {
-  DeletedMessagesVisibilityType,
-  useMessagesContext,
-} from '../../../contexts/messagesContext/MessagesContext';
 import { usePaginatedMessageListContext } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
 
@@ -27,35 +22,8 @@ export type MessageGroupStyles = {
   [key: string]: string[];
 };
 
-export const shouldIncludeMessageInList = (
-  message: LocalMessage,
-  options: { deletedMessagesVisibilityType?: DeletedMessagesVisibilityType; userId?: string },
-) => {
-  const { deletedMessagesVisibilityType, userId } = options;
-  const isMessageTypeDeleted = message.type === 'deleted';
-  const isSender = message.user?.id === userId;
-
-  if (!isMessageTypeDeleted) {
-    return true;
-  }
-
-  switch (deletedMessagesVisibilityType) {
-    case 'always':
-      return true;
-    case 'sender':
-      return isSender;
-    case 'receiver':
-      return !isSender;
-    case 'never':
-    default:
-      return false;
-  }
-};
-
 export const useMessageList = (params: UseMessageListParams) => {
   const { threadList, isLiveStreaming, isFlashList = false } = params;
-  const { client } = useChatContext();
-  const { deletedMessagesVisibilityType } = useMessagesContext();
   const { messages, viewabilityChangedCallback } = usePaginatedMessageListContext();
   const { threadMessages } = useThreadContext();
   const messageList = threadList ? threadMessages : messages;
@@ -63,14 +31,6 @@ export const useMessageList = (params: UseMessageListParams) => {
   const processedMessageList = useMemo<LocalMessage[]>(() => {
     const newMessageList = [];
     for (const message of messageList) {
-      if (
-        !shouldIncludeMessageInList(message, {
-          deletedMessagesVisibilityType,
-          userId: client.userID,
-        })
-      ) {
-        continue;
-      }
       if (isFlashList) {
         newMessageList.push(message);
       } else {
@@ -78,7 +38,7 @@ export const useMessageList = (params: UseMessageListParams) => {
       }
     }
     return newMessageList;
-  }, [messageList, deletedMessagesVisibilityType, client.userID, isFlashList]);
+  }, [messageList, isFlashList]);
 
   const data = useRAFCoalescedValue(processedMessageList, isLiveStreaming);
 

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -51,7 +51,8 @@ export type ChannelsContextValue = {
    */
   loadingChannels: boolean;
   /**
-   * Whether or not additional channels are being loaded, triggers the FooterLoadingIndicator
+   * Whether or not additional channels are being loaded, triggers the
+   * ChannelListFooterLoadingIndicator
    */
   loadingNextPage: boolean;
   /**

package/src/contexts/componentsContext/PLAN.md

@@ -69,26 +69,26 @@ const getDefaults = () => {
 
 Some component keys differ from their default component names to avoid collisions:
 
-| Override Key                  | Default Component                       | Why renamed                                                |
-| ----------------------------- | --------------------------------------- | ---------------------------------------------------------- |
-| `FileAttachmentIcon`          | `FileIcon`                              | Clarity                                                    |
-| `ChannelListLoadingIndicator` | `ChannelListLoadingIndicator`           | Split from shared `LoadingIndicator` — renders skeleton UI |
-| `MessageListLoadingIndicator` | `LoadingIndicator`                      | Split from shared `LoadingIndicator` — renders text        |
-| `ChatLoadingIndicator`        | `undefined`                             | Optional, no default                                       |
-| `ThreadMessageComposer`       | `MessageComposer`                       | Avoid collision with `MessageComposer` component name      |
-| `ThreadListComponent`         | `DefaultThreadListComponent`            | Avoid collision with exported `ThreadList`                 |
-| `StartAudioRecordingButton`   | `AudioRecordingButton`                  | Historical naming                                          |
-| `Preview`                     | `ChannelPreviewView`                    | ChannelList preview item                                   |
-| `PreviewAvatar`               | `ChannelAvatar`                         | ChannelList preview avatar                                 |
-| `FooterLoadingIndicator`      | `ChannelListFooterLoadingIndicator`     | ChannelList footer                                         |
-| `HeaderErrorIndicator`        | `ChannelListHeaderErrorIndicator`       | ChannelList header                                         |
-| `HeaderNetworkDownIndicator`  | `ChannelListHeaderNetworkDownIndicator` | ChannelList header                                         |
+| Override Key                            | Default Component                       | Why renamed                                                |
+| --------------------------------------- | --------------------------------------- | ---------------------------------------------------------- |
+| `FileAttachmentIcon`                    | `FileIcon`                              | Clarity                                                    |
+| `ChannelListLoadingIndicator`           | `ChannelListLoadingIndicator`           | Split from shared `LoadingIndicator` — renders skeleton UI |
+| `MessageListLoadingIndicator`           | `LoadingIndicator`                      | Split from shared `LoadingIndicator` — renders text        |
+| `ChatLoadingIndicator`                  | `undefined`                             | Optional, no default                                       |
+| `ThreadMessageComposer`                 | `MessageComposer`                       | Avoid collision with `MessageComposer` component name      |
+| `ThreadListComponent`                   | `DefaultThreadListComponent`            | Avoid collision with exported `ThreadList`                 |
+| `StartAudioRecordingButton`             | `AudioRecordingButton`                  | Historical naming                                          |
+| `ChannelPreview`                        | `ChannelPreviewView`                    | ChannelList preview item                                   |
+| `ChannelPreviewAvatar`                  | `ChannelAvatar`                         | ChannelList preview avatar                                 |
+| `ChannelListFooterLoadingIndicator`     | `ChannelListFooterLoadingIndicator`     | ChannelList footer                                         |
+| `ChannelListHeaderErrorIndicator`       | `ChannelListHeaderErrorIndicator`       | ChannelList header                                         |
+| `ChannelListHeaderNetworkDownIndicator` | `ChannelListHeaderNetworkDownIndicator` | ChannelList header                                         |
 
 ### Optional Components (no default)
 
 These exist in `DEFAULT_COMPONENTS` as `undefined` with `React.ComponentType<any> | undefined` type assertions:
 
-`AttachmentPickerIOSSelectMorePhotos`, `ChatLoadingIndicator`, `CreatePollContent`, `ImageComponent`, `Input`, `ListHeaderComponent`, `MessageContentBottomView`, `MessageContentLeadingView`, `MessageContentTopView`, `MessageContentTrailingView`, `MessageLocation`, `MessageSpacer`, `MessageText`, `PollContent`
+`AttachmentPickerIOSSelectMorePhotos`, `ChatLoadingIndicator`, `CreatePollContent`, `ImageComponent`, `Input`, `ListHeaderComponent`, `MessageActions`, `MessageContentBottomView`, `MessageContentLeadingView`, `MessageContentTopView`, `MessageContentTrailingView`, `MessageLocation`, `MessageSpacer`, `MessageText`, `PollContent`
 
 ### Shared Component Keys (audited)
 

package/src/contexts/componentsContext/__tests__/defaultComponents.test.ts

@@ -5,6 +5,7 @@ const OPTIONAL_KEYS = new Set([
   'AttachmentPickerIOSSelectMorePhotos',
   'ChatLoadingIndicator',
   'CreatePollContent',
+  'MessageActions',
   'Input',
   'ListHeaderComponent',
   'MessageContentBottomView',

package/src/contexts/componentsContext/defaultComponents.ts

@@ -144,6 +144,7 @@ import { ThreadListUnreadBanner } from '../../components/ThreadList/ThreadListUn
 import { ThreadMessagePreviewDeliveryStatus } from '../../components/ThreadList/ThreadMessagePreviewDeliveryStatus';
 import { ChannelAvatar } from '../../components/ui/Avatar/ChannelAvatar';
 import { DefaultMessageOverlayBackground } from '../../contexts/overlayContext/MessageOverlayHostLayer';
+import type { MessageActionsProps } from '../../contexts/overlayContext/MessageOverlayHostLayer';
 
 /**
  * All default component implementations used across the SDK.
@@ -177,11 +178,11 @@ export const DEFAULT_COMPONENTS = {
   FileUploadNotSupportedIndicator,
   FileUploadRetryIndicator,
   FilePreview,
-  FooterLoadingIndicator: ChannelListFooterLoadingIndicator,
+  ChannelListFooterLoadingIndicator,
   Gallery,
   Giphy,
-  HeaderErrorIndicator: ChannelListHeaderErrorIndicator,
-  HeaderNetworkDownIndicator: ChannelListHeaderNetworkDownIndicator,
+  ChannelListHeaderErrorIndicator,
+  ChannelListHeaderNetworkDownIndicator,
   ImageAttachmentUploadPreview,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
@@ -231,16 +232,16 @@ export const DEFAULT_COMPONENTS = {
   MessageUserReactionsAvatar,
   MessageUserReactionsItem,
   NetworkDownIndicator,
-  Preview: ChannelPreviewView,
-  PreviewAvatar: ChannelAvatar,
-  PreviewLastMessage: ChannelLastMessagePreview,
-  PreviewMessage: ChannelPreviewMessage,
-  PreviewMessageDeliveryStatus: ChannelMessagePreviewDeliveryStatus,
-  PreviewMutedStatus: ChannelPreviewMutedStatus,
-  PreviewStatus: ChannelPreviewStatus,
-  PreviewTitle: ChannelPreviewTitle,
-  PreviewTypingIndicator: ChannelPreviewTypingIndicator,
-  PreviewUnreadCount: ChannelPreviewUnreadCount,
+  ChannelPreview: ChannelPreviewView,
+  ChannelPreviewAvatar: ChannelAvatar,
+  ChannelPreviewLastMessage: ChannelLastMessagePreview,
+  ChannelPreviewMessage,
+  ChannelPreviewMessageDeliveryStatus: ChannelMessagePreviewDeliveryStatus,
+  ChannelPreviewMutedStatus,
+  ChannelPreviewStatus,
+  ChannelPreviewTitle,
+  ChannelPreviewTypingIndicator,
+  ChannelPreviewUnreadCount,
   ReactionListBottom,
   ReactionListClustered,
   ReactionListCountItem,
@@ -309,6 +310,7 @@ export const DEFAULT_COMPONENTS = {
   ChatLoadingIndicator: undefined as React.ComponentType<any> | null | undefined,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   CreatePollContent: undefined as React.ComponentType<any> | undefined,
+  MessageActions: undefined as React.ComponentType<MessageActionsProps> | undefined,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Input: undefined as React.ComponentType<any> | undefined,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -39,7 +39,6 @@ export type MessageContentType =
   | 'ai_text'
   | 'text'
   | 'location';
-export type DeletedMessagesVisibilityType = 'always' | 'never' | 'receiver' | 'sender';
 
 export type MessageLocationProps = {
   message: LocalMessage;
@@ -112,14 +111,6 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
     message: LocalMessage;
   }) => void;
 
-  /**
-   * Full override of the delete message button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   */
-  /** Control if the deleted message is visible to both the send and reciever, either of them or none  */
-  deletedMessagesVisibilityType?: DeletedMessagesVisibilityType;
-
   disableTypingIndicator?: boolean;
   /**
    * Enable swipe to reply on messages.

package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx

@@ -4,8 +4,10 @@ import {
   Platform,
   Pressable,
   StyleSheet,
+  StyleProp,
   useWindowDimensions,
   View,
+  ViewStyle,
 } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
@@ -53,8 +55,15 @@ export const DefaultMessageOverlayBackground = () => {
   );
 };
 
+export type MessageActionsProps = {
+  bottomItemStyle: StyleProp<ViewStyle>;
+  hostStyle: StyleProp<ViewStyle>;
+  portalHostStyle: StyleProp<ViewStyle>;
+  topItemStyle: StyleProp<ViewStyle>;
+};
+
 export const MessageOverlayHostLayer = () => {
-  const { MessageOverlayBackground } = useComponentsContext();
+  const { MessageActions, MessageOverlayBackground } = useComponentsContext();
   const { id, closing } = useOverlayController();
   const insets = useSafeAreaInsets();
   const { height: screenH } = useWindowDimensions();
@@ -259,21 +268,32 @@ export const MessageOverlayHostLayer = () => {
             />
           ) : null}
 
-          <Animated.View style={topItemStyle} testID='message-overlay-top'>
-            <PortalHost name='top-item' style={styles.absoluteFill} />
-          </Animated.View>
-
-          <Animated.View
-            pointerEvents='box-none'
-            style={hostStyle}
-            testID='message-overlay-message'
-          >
-            <PortalHost name='message-overlay' style={styles.absoluteFill} />
-          </Animated.View>
-
-          <Animated.View style={bottomItemStyle} testID='message-overlay-bottom'>
-            <PortalHost name='bottom-item' style={styles.absoluteFill} />
-          </Animated.View>
+          {MessageActions ? (
+            <MessageActions
+              bottomItemStyle={bottomItemStyle}
+              hostStyle={hostStyle}
+              portalHostStyle={styles.absoluteFill}
+              topItemStyle={topItemStyle}
+            />
+          ) : (
+            <>
+              <Animated.View style={topItemStyle} testID='message-overlay-top'>
+                <PortalHost name='top-item' style={styles.absoluteFill} />
+              </Animated.View>
+
+              <Animated.View
+                pointerEvents='box-none'
+                style={hostStyle}
+                testID='message-overlay-message'
+              >
+                <PortalHost name='message-overlay' style={styles.absoluteFill} />
+              </Animated.View>
+
+              <Animated.View style={bottomItemStyle} testID='message-overlay-bottom'>
+                <PortalHost name='bottom-item' style={styles.absoluteFill} />
+              </Animated.View>
+            </>
+          )}
         </View>
 
         <ClosingPortalHostsLayer closeCoverOpacity={closeCoverOpacity} />

package/src/contexts/overlayContext/__tests__/MessageOverlayHostLayer.test.tsx

@@ -14,7 +14,7 @@ import {
   setOverlayTopH,
 } from '../../../state-store';
 import { WithComponents } from '../../componentsContext/ComponentsContext';
-import { MessageOverlayHostLayer } from '../MessageOverlayHostLayer';
+import { MessageActionsProps, MessageOverlayHostLayer } from '../MessageOverlayHostLayer';
 
 jest.mock('react-native', () => {
   const actual = jest.requireActual('react-native');
@@ -93,6 +93,18 @@ const TOP_RECT = { h: 20, w: 90, x: 5, y: 0 };
 const MESSAGE_RECT = { h: 50, w: 180, x: 10, y: 0 };
 const BOTTOM_RECT = { h: 30, w: 140, x: 20, y: 100 };
 const NoopBackground = () => null;
+const CustomMessageActions = ({
+  bottomItemStyle,
+  hostStyle,
+  topItemStyle,
+}: MessageActionsProps) => (
+  <>
+    <Text testID='custom-message-actions'>Custom</Text>
+    <Text style={topItemStyle} testID='custom-message-actions-top' />
+    <Text style={hostStyle} testID='custom-message-actions-message' />
+    <Text style={bottomItemStyle} testID='custom-message-actions-bottom' />
+  </>
+);
 
 const flushAnimationFrameQueue = () => {
   act(() => {
@@ -260,4 +272,50 @@ describe('MessageOverlayHostLayer', () => {
       height: 0,
     });
   });
+
+  it('renders MessageActions override instead of the default host wrappers when provided', () => {
+    const renderTree = () => (
+      <WithComponents
+        overrides={{
+          MessageActions: CustomMessageActions,
+          MessageOverlayBackground: NoopBackground,
+        }}
+      >
+        <MessageOverlayHostLayer />
+      </WithComponents>
+    );
+    const { rerender } = render(renderTree());
+
+    act(() => {
+      setOverlayTopH(TOP_RECT);
+      setOverlayMessageH(MESSAGE_RECT);
+      setOverlayBottomH(BOTTOM_RECT);
+      openOverlay('message-1');
+    });
+
+    rerender(renderTree());
+
+    expect(screen.getByTestId('custom-message-actions')).toBeTruthy();
+    expect(screen.queryByTestId('message-overlay-top')).toBeNull();
+    expect(screen.queryByTestId('message-overlay-message')).toBeNull();
+    expect(screen.queryByTestId('message-overlay-bottom')).toBeNull();
+    expect(
+      StyleSheet.flatten(screen.getByTestId('custom-message-actions-top').props.style),
+    ).toMatchObject({
+      height: TOP_RECT.h,
+      width: TOP_RECT.w,
+    });
+    expect(
+      StyleSheet.flatten(screen.getByTestId('custom-message-actions-message').props.style),
+    ).toMatchObject({
+      height: MESSAGE_RECT.h,
+      width: MESSAGE_RECT.w,
+    });
+    expect(
+      StyleSheet.flatten(screen.getByTestId('custom-message-actions-bottom').props.style),
+    ).toMatchObject({
+      height: BOTTOM_RECT.h,
+      width: BOTTOM_RECT.w,
+    });
+  });
 });

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.0.0-beta.32"
+  "version": "9.0.0-beta.33"
 }