stream-chat-react-native-core 10.0.0-rc.3 → 10.0.0-rc.5

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

@@ -147,12 +147,12 @@ describe('Channel', () => {
     await waitFor(() => expect(watchSpy).toHaveBeenCalledTimes(1));
   });
 
-  it('does not watch or load a draft channel, which has no id and is marked initialized', async () => {
+  it('does not watch, query or load a channel built from members', async () => {
     const draft = chatClient.channel('messaging', {
       members: [{ user_id: user.id }, { user_id: 'other' }],
     } as never);
-    draft.initialized = true;
     const watchSpy = jest.spyOn(draft, 'watch');
+    const querySpy = jest.spyOn(draft, 'query');
     const seedSpy = jest.spyOn(draft.messagePaginator, 'reload');
 
     renderComponent({ channel: draft });
@@ -162,7 +162,9 @@ describe('Channel', () => {
     });
 
     expect(draft.isProvisional).toBe(true);
+    expect(draft.initialized).toBe(false);
     expect(watchSpy).not.toHaveBeenCalled();
+    expect(querySpy).not.toHaveBeenCalled();
     expect(seedSpy).not.toHaveBeenCalled();
   });
 
@@ -223,6 +225,37 @@ describe('Channel', () => {
     );
   });
 
+  describe('connection.recovered', () => {
+    const renderAndRecover = async () => {
+      const markReadSpy = jest
+        .spyOn(chatClient.messageDeliveryReporter, 'throttledMarkRead')
+        .mockImplementation(() => undefined);
+      renderComponent({ channel });
+      await waitFor(() => expect(channel.initialized).toBe(true));
+      markReadSpy.mockClear();
+
+      act(() => {
+        chatClient.dispatchEvent({ type: 'connection.recovered' });
+      });
+
+      return markReadSpy;
+    };
+
+    it('marks the channel read after a recovery', async () => {
+      const markReadSpy = await renderAndRecover();
+
+      expect(markReadSpy).toHaveBeenCalledWith(channel);
+    });
+
+    it('does not mark the channel read when recovery is disabled', async () => {
+      chatClient.config.set({ client: { connectionRecovery: { enabled: false } } });
+
+      const markReadSpy = await renderAndRecover();
+
+      expect(markReadSpy).not.toHaveBeenCalled();
+    });
+  });
+
   const queryChannelWithNewMessages = (newMessages: ReturnType<typeof generateMessage>[]) =>
     // generate new channel mock from existing channel with new messages added
     getOrCreateChannelApi(
@@ -400,8 +433,6 @@ describe('Channel', () => {
         members: [{ user_id: user.id }, { user_id: otherUser.id }],
       });
       const stored = chatClient.channel('messaging', '!members-xyz');
-      // the mount's first-page load would query (and so supersede) the draft before the test does
-      jest.spyOn(draft.messagePaginator, 'reload').mockResolvedValue(undefined);
       useMockedApis(chatClient, [
         getOrCreateChannelApi(
           generateChannelResponse({
@@ -610,12 +641,14 @@ describe('Channel', () => {
     });
     const rendersBefore = renderSpy.mock.calls.length;
     const capabilitiesBefore = channel.state.getLatestValue().ownCapabilities;
+    const dataBefore = channel.data;
 
     act(() => dispatchChannelUpdatedEvent(chatClient, { ...channel.data }));
 
-    // Guard against a vacuous pass: the update was applied and republished the capabilities.
-    expect(channel.state.getLatestValue().ownCapabilities).not.toBe(capabilitiesBefore);
-    expect(channel.state.getLatestValue().ownCapabilities).toEqual(capabilitiesBefore);
+    // Guard against a vacuous pass: the update was applied. The capabilities did not change, so
+    // the client keeps their array.
+    expect(channel.data).not.toBe(dataBefore);
+    expect(channel.state.getLatestValue().ownCapabilities).toBe(capabilitiesBefore);
     expect(renderSpy.mock.calls.length).toBe(rendersBefore);
   });
 
@@ -796,6 +829,108 @@ describe('Channel initial load useEffect', () => {
     });
   });
 
+  describe('reopening a channel left on an older page', () => {
+    const OLDER_PAGE_START = new Date('2020-01-01T00:00:00.000Z').getTime();
+
+    // A watched channel whose newest messages are loaded, but whose list shows an older page, as it
+    // does after a jump to a quoted, pinned or searched message.
+    const setUpChannelOnOlderPage = async () => {
+      const newestMessages = Array.from({ length: 10 }, (_, i) =>
+        generateMessage({ id: `newest-${i}` }),
+      );
+      const mockedChannel = generateChannelResponse({ messages: newestMessages });
+      useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+      const channel = chatClient.channel('messaging', mockedChannel.channel.id);
+      await channel.watch();
+
+      const olderMessages = Array.from({ length: 5 }, (_, i) =>
+        generateMessage({ id: `older-${i}`, timestamp: OLDER_PAGE_START + i * 1000 }),
+      );
+      channel.messagePaginator.ingestPage({
+        page: olderMessages,
+        policy: 'strict-overlap-only',
+        setActive: true,
+      });
+      expect(channel.messagePaginator.isActiveIntervalAtHead).toBe(false);
+
+      return channel;
+    };
+
+    it('shows the newest messages again', async () => {
+      const channel = await setUpChannelOnOlderPage();
+
+      renderComponent({ channel, markReadOnMount: false });
+
+      await waitFor(() => expect(channel.messagePaginator.isActiveIntervalAtHead).toBe(true));
+      expect(channel.messagePaginator.items?.map((message) => message.id)).toContain('newest-9');
+    });
+
+    it('keeps a jump the integrator already made to a loaded message', async () => {
+      const channel = await setUpChannelOnOlderPage();
+      // A deep link from the screen: the target is loaded, so the jump lands at once.
+      await channel.messagePaginator.jumpToMessage('older-2', { focusReason: 'jump-to-message' });
+      const seedSpy = jest.spyOn(channel.messagePaginator, 'seedUnreadSnapshot');
+
+      renderComponent({ channel, markReadOnMount: false });
+
+      await waitFor(() => expect(seedSpy).toHaveBeenCalled());
+      expect(channel.messagePaginator.isActiveIntervalAtHead).toBe(false);
+      expect(channel.messagePaginator.messageFocusSignal.getLatestValue().signal?.messageId).toBe(
+        'older-2',
+      );
+    });
+
+    it('leaves a jump that is still in flight alone', async () => {
+      const channel = await setUpChannelOnOlderPage();
+      // A deep link to a message that is not loaded: its query is in flight.
+      jest.spyOn(channel.messagePaginator, 'isLoading', 'get').mockReturnValue(true);
+      const jumpToTheLatestMessageSpy = jest.spyOn(
+        channel.messagePaginator,
+        'jumpToTheLatestMessage',
+      );
+      const seedSpy = jest.spyOn(channel.messagePaginator, 'seedUnreadSnapshot');
+
+      renderComponent({ channel, markReadOnMount: false });
+
+      await waitFor(() => expect(seedSpy).toHaveBeenCalled());
+      expect(jumpToTheLatestMessageSpy).not.toHaveBeenCalled();
+    });
+
+    it('leaves the list alone when the app places its pages itself', async () => {
+      const channel = await setUpChannelOnOlderPage();
+      const jumpToTheLatestMessageSpy = jest.spyOn(
+        channel.messagePaginator,
+        'jumpToTheLatestMessage',
+      );
+
+      renderComponent({ channel, initializeOnMount: false, markReadOnMount: false });
+
+      expect(jumpToTheLatestMessageSpy).not.toHaveBeenCalled();
+      expect(channel.messagePaginator.isActiveIntervalAtHead).toBe(false);
+    });
+
+    it('leaves the jump to the first unread message to the initial load', async () => {
+      const channel = await setUpChannelOnOlderPage();
+      jest.spyOn(channel, 'countUnread').mockImplementation(() => 3);
+      const jumpToTheFirstUnreadMessageSpy = jest
+        .spyOn(channel.messagePaginator, 'jumpToTheFirstUnreadMessage')
+        .mockResolvedValue(undefined as never);
+      const jumpToTheLatestMessageSpy = jest.spyOn(
+        channel.messagePaginator,
+        'jumpToTheLatestMessage',
+      );
+
+      renderComponent({
+        channel,
+        initialScrollToFirstUnreadMessage: true,
+        markReadOnMount: false,
+      });
+
+      await waitFor(() => expect(jumpToTheFirstUnreadMessageSpy).toHaveBeenCalledTimes(1));
+      expect(jumpToTheLatestMessageSpy).not.toHaveBeenCalled();
+    });
+  });
+
   describe('message page size', () => {
     const mountChannel = async () => {
       const mockedChannel = generateChannelResponse({ messages: [] });

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

@@ -97,8 +97,9 @@ export const useChannelLifecycle = ({
         return;
       }
 
-      // A draft has no ID and is marked initialized, and querying it would create it on the server.
-      if (channel.isProvisional && channel.initialized) {
+      // A channel built from members has no ID yet, and querying it would create it on the server. It
+      // is the app's responsibility to create it before trying to interact.
+      if (channel.isProvisional) {
         return;
       }
 
@@ -155,9 +156,12 @@ export const useChannelLifecycle = ({
   useEffect(() => {
     // Waits for `connection.recovered`, which fires after the reloads land, so `hasMoreHead`
     // reflects the refreshed window. Marks read only when that window is at the newest message,
-    // leaving the read state alone when the user has paginated up into older history.
+    // leaving the read state alone when the user has paginated up into older history. With
+    // recovery disabled the event fires on every reconnect without a reload, so the messages sent
+    // during the drop were never shown and are not marked read. A manual `recover()` dispatches the
+    // same event, so it does not mark read either.
     const { unsubscribe } = client.on('connection.recovered', () => {
-      if (channel.messagePaginator.hasMoreHead) {
+      if (!client.connectionRecovery.config.enabled || channel.messagePaginator.hasMoreHead) {
         return;
       }
       markRead();

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

@@ -22,7 +22,7 @@ export const useCreateOwnCapabilitiesContext = ({
   channel: Channel;
   overrideCapabilities?: Partial<OwnCapabilitiesContextValue>;
 }) => {
-  // Updated by the client on watch, query and `capabilities.changed`.
+  // Updated by the client on watch, query and `channel.updated`.
   const { ownCapabilities } = useStateStore(channel.state, selector);
 
   const overrideCapabilitiesKey = overrideCapabilities

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

@@ -0,0 +1,42 @@
+import { useLayoutEffect } from 'react';
+
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
+import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
+import { useMessagePaginator } from '../../../hooks/useMessagePaginator';
+
+/**
+ * Shows the newest messages when a channel or thread is opened on an older page. Its paginator
+ * outlives the screen, so it keeps the page it was left on, such as one after a jump to a quoted,
+ * pinned or searched message. Runs before the first paint, so the old page never flashes.
+ *
+ * Stays out of the way of a jump that already landed or is in flight (a deep link from the screen)
+ * and of the jump to the first unread message. Runs once per channel or thread: its dependencies
+ * are stable, so nothing that changes while it is open moves the list.
+ *
+ * `<Channel>` and `<Thread>` already run it, unless `<Channel initializeOnMount={false}>`. Call it
+ * from a component inside `<Channel>` or `<Thread>` only when the app opted out that way and still
+ * wants the newest messages shown on open.
+ */
+export const useJumpToLatestOnOpen = () => {
+  const { channel, hasPendingInitialTargetLoad } = useChannelContext();
+  const { thread } = useThreadContext();
+  const paginator = useMessagePaginator();
+
+  useLayoutEffect(() => {
+    // A channel that is not loaded yet, or a draft, gets its first page from `<Channel>` itself.
+    const isChannelLoading = !thread && (!channel.initialized || channel.isProvisional);
+    if (
+      isChannelLoading ||
+      !paginator.items?.length ||
+      paginator.isActiveIntervalAtHead ||
+      paginator.isLoading ||
+      hasPendingInitialTargetLoad?.()
+    ) {
+      return;
+    }
+
+    paginator
+      .jumpToTheLatestMessage()
+      .catch((error: unknown) => console.warn('Jumping to the latest message failed:', error));
+  }, [channel, hasPendingInitialTargetLoad, paginator, thread]);
+};

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

@@ -1154,6 +1154,34 @@ describe('ChannelList', () => {
       expect(querySpy).not.toHaveBeenCalled();
     });
 
+    it('loads the first page when an event put a channel in the list before it was ever queried', async () => {
+      const seededChannel = chatClient.channel(testChannel1.channel.type, testChannel1.channel.id);
+      // What `message.new` / `member.updated` do for a channel matching a list nobody queried yet.
+      chatClient.channelManager.ingestChannel(seededChannel);
+      expect(props.paginator.items?.map((channel) => channel.id)).toEqual([
+        testChannel1.channel.id,
+      ]);
+      expect(props.paginator.isInitialized).toBe(false);
+
+      useMockedApis(chatClient, [queryChannelsApi([testChannel2, testChannel1])]);
+      const querySpy = jest.spyOn(chatClient, 'queryChannels');
+      render(
+        <Chat client={chatClient}>
+          <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
+            <ChannelList {...props} />
+          </WithComponents>
+        </Chat>,
+      );
+
+      // The seeded channel does not count as a loaded first page, so the list queries on mount.
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+      expect(querySpy).toHaveBeenCalledTimes(1);
+      await waitFor(() => expect(screen.getByTestId(testChannel2.channel.id)).toBeTruthy());
+      expect(props.paginator.isInitialized).toBe(true);
+    });
+
     it('leaves the paginator registered and loaded when it unmounts', async () => {
       useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
 

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -95,7 +95,7 @@ export const usePaginatedChannels = ({ paginator }: { paginator: ChannelPaginato
   // new paginator, and after `client.disconnectUser` resets it. A paginator that already has
   // channels is shown as is, and a load in flight is left alone.
   const userId = useClientUserId(client);
-  const isUnloaded = channels === undefined;
+  const isUnloaded = channels === undefined || !paginator.isInitialized;
   useEffect(() => {
     if (!isUnloaded || !userId || paginator.isLoading) return;
     reloadList();

package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx

@@ -103,6 +103,14 @@ export const ChannelMessagePreviewDeliveryStatus = ({
     );
   }
 
+  if (message.type === 'deleted') {
+    return (
+      <Text style={styles.text} testID='channel-preview-sender'>
+        {t('common.you.label', 'You')}:
+      </Text>
+    );
+  }
+
   return (
     <CompositeAccessibilityProbe label={statusLabel}>
       <View style={styles.container}>

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -55,7 +55,6 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   const lastMessageStatus = lastMessage && 'status' in lastMessage ? lastMessage.status : undefined;
   const isFailedMessage =
     lastMessageStatus === MessageStatusTypes.FAILED || lastMessage?.type === 'error';
-  const showMessageDeliveryStatus = !isMessageDeleted;
 
   if (usersTyping.length > 0) {
     return <ChannelPreviewTypingIndicator channel={channel} usersTyping={usersTyping} />;
@@ -103,18 +102,14 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   if (channel.data?.custom?.name || membersWithoutSelf.length > 1) {
     return (
       <View style={styles.container}>
-        {showMessageDeliveryStatus ? (
-          <ChannelPreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
-        ) : null}
+        <ChannelPreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
         <ChannelPreviewLastMessage message={lastMessage} />
       </View>
     );
   } else {
     return (
       <View style={styles.container}>
-        {showMessageDeliveryStatus ? (
-          <ChannelPreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
-        ) : null}
+        <ChannelPreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
         <ChannelPreviewLastMessage message={lastMessage} />
       </View>
     );

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

@@ -126,6 +126,47 @@ describe('ChannelPreviewView', () => {
     await waitFor(() => screen.queryByText(expectedDisplayName));
   });
 
+  describe('the sender of the latest message', () => {
+    const otherUser = generateUser({ name: 'Count Dooku' });
+
+    const renderWithLatestMessage = async (latestMessage: ReturnType<typeof generateMessage>) => {
+      await initializeChannel(
+        generateChannelResponse({
+          channel: { custom: { name: 'group' } },
+          members: [generateMember({ user: clientUser }), generateMember({ user: otherUser })],
+          messages: [latestMessage],
+        }),
+      );
+      render(
+        <OverlayProvider accessibility={{ enabled: true }}>
+          <Chat client={chatClient}>
+            <ChannelPreviewView
+              channel={channel as ChannelType}
+              lastMessage={latestMessage}
+              onSelect={jest.fn()}
+            />
+          </Chat>
+        </OverlayProvider>,
+      );
+    };
+
+    it.each([
+      ['an own message', clientUser, 'regular', 'You:', 1],
+      ['an own deleted message', clientUser, 'deleted', 'You:', 0],
+      ['a deleted message from another member', otherUser, 'deleted', 'Count Dooku:', 0],
+    ] as const)('names the sender of %s', async (_, user, type, prefix, statusLabels) => {
+      await renderWithLatestMessage(generateMessage({ status: 'received', type, user }));
+
+      // An own message's status hides its sender text from screen readers, so hidden elements count.
+      const sender = () =>
+        screen.getByTestId('channel-preview-sender', { includeHiddenElements: true });
+      await waitFor(() => expect(sender()).toBeTruthy());
+      expect(sender().props.children.join('')).toBe(prefix);
+      // The delivery status announces itself with "Sent by you" or "Read, sent by you".
+      expect(screen.queryAllByLabelText(/sent by you/i)).toHaveLength(statusLabels);
+    });
+  });
+
   it('should render latest message, truncated to length given by latestMessageLength', async () => {
     const message = generateMessage();
     await initializeChannel(generateChannelResponse());

package/src/components/Message/Message.tsx

@@ -47,7 +47,10 @@ import {
   MessageOverlayRuntimeProvider,
   MessageProvider,
 } from '../../contexts/messageContext/MessageContext';
-import { useMessageListItemContext } from '../../contexts/messageListItemContext/MessageListItemContext';
+import {
+  GoToMessage,
+  useMessageListItemContext,
+} from '../../contexts/messageListItemContext/MessageListItemContext';
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -223,7 +226,7 @@ export type MessagePropsWithContext = Pick<
     messagesContext: MessagesContextValue;
     /** Whether long pressing a message is enabled. Defaults to true. */
     enableLongPress?: boolean;
-    goToMessage?: (messageId: string) => void;
+    goToMessage?: GoToMessage;
     isTargetedMessage?: boolean;
     /**
      * Called with the message's thread when its replies button is pressed.

package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx

@@ -2,8 +2,6 @@ import React, { useMemo } from 'react';
 
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
-import { useChannelContext } from '../../../../contexts/channelContext/ChannelContext';
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useMessageContext } from '../../../../contexts/messageContext/MessageContext';
 import { useMessagesContext } from '../../../../contexts/messagesContext/MessagesContext';
@@ -15,6 +13,7 @@ import {
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../../hooks';
 import { primitives } from '../../../../theme';
+import { useOpenThreadAtMessage } from '../../hooks/useOpenThreadAtMessage';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 
 type SentToChannelHeaderPropsWithContext = Pick<ThreadContextValue, 'thread'> & {
@@ -67,10 +66,9 @@ export type SentToChannelHeaderProps = Partial<SentToChannelHeaderPropsWithConte
 
 export const SentToChannelHeader = (props: SentToChannelHeaderProps) => {
   const { onAlsoSentToChannelHeaderPress } = useMessagesContext();
-  const { client } = useChatContext();
-  const { channel } = useChannelContext();
   const { thread } = useThreadContext();
   const { message } = useMessageContext();
+  const openThreadAtMessage = useOpenThreadAtMessage();
 
   const handleOnPress = useStableCallback(async () => {
     if (thread) {
@@ -78,34 +76,8 @@ export const SentToChannelHeader = (props: SentToChannelHeaderProps) => {
       return;
     }
 
-    const parentId = message.parent_id;
-    if (!parentId) {
-      return;
-    }
-
-    // The parent is only fetched when neither its thread nor the message itself is loaded. Opening
-    // the thread loads whatever else it is missing.
-    const registeredThread = client.threads.get(parentId);
-    if (registeredThread) {
-      onAlsoSentToChannelHeaderPress?.({ targetedMessageId: message.id, thread: registeredThread });
-      return;
-    }
-
-    try {
-      const parentMessage =
-        client.messageStore.get(parentId) ??
-        (await channel.getMessagesById([parentId])).messages?.[0];
-
-      if (!parentMessage) {
-        return;
-      }
-
-      onAlsoSentToChannelHeaderPress?.({
-        targetedMessageId: message.id,
-        thread: client.threads.ensure({ channel, parentMessage }),
-      });
-    } catch (error) {
-      console.error('Error querying parent message:', error);
+    if (message.parent_id) {
+      await openThreadAtMessage({ parentId: message.parent_id, targetedMessageId: message.id });
     }
   });
 

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

@@ -254,14 +254,15 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
 
                       if (onPress) {
                         onPress({
-                          defaultHandler: () => goToMessage(message.quoted_message!.id),
+                          defaultHandler: () =>
+                            goToMessage(message.quoted_message!.id, message.quoted_message!),
                           emitter: 'messageContent',
                           event,
                         });
                         return;
                       }
 
-                      goToMessage(message.quoted_message.id);
+                      goToMessage(message.quoted_message.id, message.quoted_message);
                     }}
                     onPressIn={(event) => {
                       if (onPressIn) {

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

@@ -1,13 +1,17 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import type { ChannelConfig } from 'stream-chat';
+
 import { useA11yLabel } from '../../../a11y/hooks/useA11yLabel';
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useStateStore } from '../../../hooks/useStateStore';
 import { primitives } from '../../../theme';
 import { MessageStatusTypes } from '../../../utils/utils';
 import { HiddenA11yText } from '../../Accessibility/HiddenA11yText';
@@ -15,15 +19,27 @@ import { useIsMessageDeliveredToOthers } from '../hooks/useIsMessageDeliveredToO
 import { useIsMessageReadByOthers } from '../hooks/useIsMessageReadByOthers';
 import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 
+const readEventsSelector = ({ readEvents }: ChannelConfig) => ({
+  readEventsEnabled: readEvents.enabled,
+});
+
 export type MessageStatusPropsWithContext = Pick<MessageContextValue, 'message'> & {
   /** Whether the message reached at least one other member. */
   delivered: boolean;
   /** Whether at least one other member read the message. */
   read: boolean;
+  /**
+   * Whether the channel has read events. Without them only the sending status shows, as in the
+   * channel preview.
+   * @default true
+   */
+  readEventsEnabled?: boolean;
 };
 
 const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
-  const { delivered, message, read } = props;
+  const { message, readEventsEnabled = true } = props;
+  const delivered = readEventsEnabled && props.delivered;
+  const read = readEventsEnabled && props.read;
 
   const styles = useStyles();
   const { icons } = useComponentsContext();
@@ -38,6 +54,7 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
 
   const sending = message.status === MessageStatusTypes.SENDING;
   const sent =
+    readEventsEnabled &&
     message.status === MessageStatusTypes.RECEIVED &&
     !delivered &&
     !read &&
@@ -55,7 +72,11 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
             : '',
   );
 
-  if (message.status === MessageStatusTypes.FAILED || message.type === 'error') {
+  if (
+    message.status === MessageStatusTypes.FAILED ||
+    message.type === 'error' ||
+    message.type === 'deleted'
+  ) {
     return null;
   }
 
@@ -109,8 +130,23 @@ const areEqual = (
   prevProps: MessageStatusPropsWithContext,
   nextProps: MessageStatusPropsWithContext,
 ) => {
-  const { delivered: prevDelivered, message: prevMessage, read: prevRead } = prevProps;
-  const { delivered: nextDelivered, message: nextMessage, read: nextRead } = nextProps;
+  const {
+    delivered: prevDelivered,
+    message: prevMessage,
+    read: prevRead,
+    readEventsEnabled: prevReadEventsEnabled,
+  } = prevProps;
+  const {
+    delivered: nextDelivered,
+    message: nextMessage,
+    read: nextRead,
+    readEventsEnabled: nextReadEventsEnabled,
+  } = nextProps;
+
+  const readEventsEnabledEqual = prevReadEventsEnabled === nextReadEventsEnabled;
+  if (!readEventsEnabledEqual) {
+    return false;
+  }
 
   const deliveredEqual = prevDelivered === nextDelivered;
   if (!deliveredEqual) {
@@ -141,14 +177,17 @@ export type MessageStatusProps = Partial<MessageStatusPropsWithContext>;
 export const MessageStatus = (props: MessageStatusProps) => {
   const { message: contextMessage } = useMessageContext();
   const message = props.message ?? contextMessage;
+  const { channel } = useChannelContext();
   const readByOthers = useIsMessageReadByOthers({ message });
   const deliveredToOthers = useIsMessageDeliveredToOthers({ message });
+  const { readEventsEnabled } = useStateStore(channel?.configState, readEventsSelector) ?? {};
 
   return (
     <MemoizedMessageStatus
       delivered={props.delivered ?? deliveredToOthers}
       message={message}
       read={props.read ?? readByOthers}
+      readEventsEnabled={props.readEventsEnabled ?? readEventsEnabled}
     />
   );
 };