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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
 import { WithComponents } from '../../../../contexts/componentsContext/ComponentsContext';
@@ -382,6 +382,73 @@ describe('MessageContent', () => {
     expect(contentContainerStyle.paddingBottom).toBeGreaterThan(0);
   });
 
+  describe('pressing a quote', () => {
+    const renderQuote = ({
+      quotedMessage,
+    }: {
+      quotedMessage: ReturnType<typeof generateMessage>;
+    }) => {
+      const goToMessage = jest.fn();
+      render(
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <Message
+              goToMessage={goToMessage}
+              groupStyles={['bottom']}
+              message={generateMessage({ quoted_message: quotedMessage, user })}
+            />
+          </Channel>
+        </Chat>,
+      );
+      return { goToMessage };
+    };
+
+    const threadOnlyReply = () => {
+      const parentMessage = generateMessage({ cid: channel.cid, user });
+      const thread = chatClient.threads.ensure({ channel, parentMessage });
+      const reply = generateMessage({ parent_id: parentMessage.id, text: 'quoted message', user });
+      return { reply, thread };
+    };
+
+    it('passes the quoted message to goToMessage when the quote is pressed', async () => {
+      const quotedMessage = generateMessage({ text: 'quoted message', user });
+      const { goToMessage } = renderQuote({ quotedMessage });
+
+      fireEvent.press(await screen.findByText('quoted message'));
+
+      await waitFor(() =>
+        expect(goToMessage).toHaveBeenCalledWith(
+          quotedMessage.id,
+          expect.objectContaining({ id: quotedMessage.id }),
+        ),
+      );
+    });
+
+    it('opens the thread from the header of a reply also sent to the channel', async () => {
+      const onAlsoSentToChannelHeaderPress = jest.fn();
+      const { reply, thread } = threadOnlyReply();
+      render(
+        <Chat client={chatClient}>
+          <Channel
+            channel={channel}
+            onAlsoSentToChannelHeaderPress={onAlsoSentToChannelHeaderPress}
+          >
+            <Message groupStyles={['bottom']} message={{ ...reply, show_in_channel: true }} />
+          </Channel>
+        </Chat>,
+      );
+
+      fireEvent.press(await screen.findByText('View'));
+
+      await waitFor(() =>
+        expect(onAlsoSentToChannelHeaderPress).toHaveBeenCalledWith({
+          targetedMessageId: reply.id,
+          thread,
+        }),
+      );
+    });
+  });
+
   it('does not render the quoted reply for an ephemeral giphy preview', async () => {
     const user = generateUser();
     const message = generateMessage({

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

@@ -84,6 +84,63 @@ describe('MessageStatus', () => {
     },
   );
 
+  it.each([
+    ['renders', 'regular', 1],
+    ['renders no', 'deleted', 0],
+  ])('%s status for a %s message', async (_, type, expectedCount) => {
+    const message = generateMessage({ user: user1 });
+    const { queryAllByLabelText } = renderMessageStatus({
+      delivered: true,
+      message: { ...message, status: 'received', type },
+      read: true,
+    });
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    expect(queryAllByLabelText('Read')).toHaveLength(expectedCount);
+  });
+
+  describe('with read events disabled', () => {
+    beforeEach(() => {
+      chatClient.config.set({ channel: { readEvents: { enabled: false } } });
+    });
+
+    it.each([
+      [false, false, 'Sent'],
+      [true, false, 'Delivered'],
+      [true, true, 'Read'],
+    ])(
+      'renders no status when delivered is %s and read is %s',
+      async (delivered, read, accessibilityLabel) => {
+        const message = generateMessage({ user: user1 });
+        const { queryByLabelText } = renderMessageStatus({
+          delivered,
+          message: { ...message, status: 'received' },
+          read,
+        });
+
+        await act(async () => {
+          await new Promise((resolve) => setTimeout(resolve, 0));
+        });
+
+        expect(queryByLabelText(accessibilityLabel)).toBeNull();
+      },
+    );
+
+    it('still renders the sending status', async () => {
+      const message = generateMessage({ user: user1 });
+      const { getByLabelText } = renderMessageStatus({
+        message: { ...message, status: 'sending' },
+      });
+
+      await waitFor(() => {
+        expect(getByLabelText('Sending')).toBeTruthy();
+      });
+    });
+  });
+
   describe('reactive receipt state', () => {
     // Two own messages, older first. `olderMessage` is the one under test throughout: the whole
     // point of sourcing from `lastReadRefByOthers` is that it reports correctly even though no

package/src/components/Message/hooks/useOpenThreadAtMessage.ts

@@ -0,0 +1,50 @@
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useMessagesContext } from '../../../contexts/messagesContext/MessagesContext';
+import { useStableCallback } from '../../../hooks';
+
+/**
+ * Returns a function that opens the thread holding a message, at that message, through the
+ * `onAlsoSentToChannelHeaderPress` handler. The thread is taken from the client when it is
+ * registered there; otherwise its parent message is read from the message store, or fetched, and a
+ * thread is built from it. Opening the thread loads whatever else it is missing.
+ *
+ * @returns The function, which takes the thread's `parentId` and the `targetedMessageId` to open
+ * the thread at. It does nothing without an `onAlsoSentToChannelHeaderPress` handler.
+ */
+export const useOpenThreadAtMessage = () => {
+  const { onAlsoSentToChannelHeaderPress } = useMessagesContext();
+  const { client } = useChatContext();
+  const { channel } = useChannelContext();
+
+  return useStableCallback(
+    async ({ parentId, targetedMessageId }: { parentId: string; targetedMessageId: string }) => {
+      if (!onAlsoSentToChannelHeaderPress) {
+        return;
+      }
+
+      const registeredThread = client.threads.get(parentId);
+      if (registeredThread) {
+        onAlsoSentToChannelHeaderPress({ targetedMessageId, thread: registeredThread });
+        return;
+      }
+
+      try {
+        const parentMessage =
+          client.messageStore.get(parentId) ??
+          (await channel.getMessagesById([parentId])).messages?.[0];
+
+        if (!parentMessage) {
+          return;
+        }
+
+        onAlsoSentToChannelHeaderPress({
+          targetedMessageId,
+          thread: client.threads.ensure({ channel, parentMessage }),
+        });
+      } catch (error) {
+        console.error('Error querying parent message:', error);
+      }
+    },
+  );
+};

package/src/components/Message/utils/__tests__/messageActions.test.ts

@@ -0,0 +1,57 @@
+import type { OwnCapabilitiesContextValue } from '../../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
+import { generateMessage } from '../../../../mock-builders/generator/message';
+import type { MessageActionType } from '../../../MessageMenu/MessageActionListItem';
+import { messageActions, MessageActionsParams } from '../messageActions';
+
+const action = (actionType: string) => ({ actionType }) as unknown as MessageActionType;
+
+const getActionTypes = (overrides: Partial<MessageActionsParams>) =>
+  messageActions({
+    banUser: action('banUser'),
+    blockUser: action('blockUser'),
+    copyMessage: action('copyMessage'),
+    deleteMessage: action('deleteMessage'),
+    dismissOverlay: jest.fn(),
+    editMessage: action('editMessage'),
+    error: false,
+    flagMessage: action('flagMessage'),
+    isMyMessage: false,
+    isThreadMessage: false,
+    markUnread: action('markUnread'),
+    message: generateMessage(),
+    muteUser: action('muteUser'),
+    ownCapabilities: {
+      quoteMessage: true,
+      readEvents: true,
+      sendReply: true,
+    } as OwnCapabilitiesContextValue,
+    pinMessage: action('pinMessage'),
+    quotedReply: action('quotedReply'),
+    retry: action('retry'),
+    threadReply: action('threadReply'),
+    unpinMessage: action('unpinMessage'),
+    updateMessage: jest.fn(),
+    ...overrides,
+  })?.map((item) => item.actionType);
+
+describe('messageActions', () => {
+  it('offers quoting a thread message, but not replying in a thread or marking it unread', () => {
+    const actionTypes = getActionTypes({ isThreadMessage: true });
+
+    expect(actionTypes).toContain('quotedReply');
+    expect(actionTypes).not.toContain('threadReply');
+    expect(actionTypes).not.toContain('markUnread');
+  });
+
+  it('does not offer quoting a message that failed or is an error', () => {
+    expect(getActionTypes({ error: true })).not.toContain('quotedReply');
+  });
+
+  it('does not offer quoting without the quote-message capability', () => {
+    expect(
+      getActionTypes({
+        ownCapabilities: { quoteMessage: false } as OwnCapabilitiesContextValue,
+      }),
+    ).not.toContain('quotedReply');
+  });
+});

package/src/components/Message/utils/messageActions.ts

@@ -64,7 +64,7 @@ export const messageActions = ({
     actions.push(threadReply);
   }
 
-  if (ownCapabilities.quoteMessage && !isThreadMessage && !error) {
+  if (ownCapabilities.quoteMessage && !error) {
     actions.push(quotedReply);
   }
 

package/src/components/MessageInput/__tests__/AttachmentUploadPreviewList.test.tsx

@@ -312,8 +312,8 @@ describe('AttachmentUploadPreviewList', () => {
     });
 
     it('should render FileAttachmentUploadPreview with all failed files', async () => {
-      const uploadAttachmentSpy = jest.fn();
-      channel.messageComposer.attachmentManager.uploadAttachment = uploadAttachmentSpy;
+      const uploadFileSpy = jest.fn();
+      channel.messageComposer.attachmentManager.uploadFile = uploadFileSpy;
       const attachments = [
         generateFileAttachment({
           localMetadata: {
@@ -353,10 +353,38 @@ describe('AttachmentUploadPreviewList', () => {
       await waitFor(() => {
         expect(queryAllByTestId('file-attachment-upload-preview')).toHaveLength(2);
         expect(channel.messageComposer.attachmentManager.attachments).toHaveLength(2);
-        expect(uploadAttachmentSpy).toHaveBeenCalled();
+        expect(uploadFileSpy).toHaveBeenCalled();
       });
     });
 
+    it('does not retry a failed upload while uploads are disabled', async () => {
+      const { attachmentManager } = channel.messageComposer;
+      const uploadFileSpy = jest.fn();
+      attachmentManager.uploadFile = uploadFileSpy;
+      jest.spyOn(attachmentManager, 'isUploadEnabled', 'get').mockReturnValue(false);
+
+      act(() => {
+        attachmentManager.upsertAttachments([
+          generateFileAttachment({
+            localMetadata: { id: 'file-attachment', uploadState: FileState.FAILED },
+          }),
+        ]);
+      });
+
+      renderComponent({ channel, client, props: {} });
+
+      await waitFor(() => {
+        expect(screen.queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(1);
+      });
+
+      act(() => {
+        fireEvent.press(screen.getAllByTestId('retry-upload-progress-indicator')[0]);
+      });
+
+      expect(uploadFileSpy).not.toHaveBeenCalled();
+      expect(attachmentManager.attachments).toHaveLength(1);
+    });
+
     it('should render FileAttachmentUploadPreview with all unsupported', async () => {
       const attachments = [
         generateFileAttachment({
@@ -472,8 +500,8 @@ describe('AttachmentUploadPreviewList', () => {
     });
 
     it('should render ImageAttachmentUploadPreview with all failed images', async () => {
-      const uploadAttachmentSpy = jest.fn();
-      channel.messageComposer.attachmentManager.uploadAttachment = uploadAttachmentSpy;
+      const uploadFileSpy = jest.fn();
+      channel.messageComposer.attachmentManager.uploadFile = uploadFileSpy;
       const attachments = [
         generateImageAttachment({
           localMetadata: {
@@ -511,7 +539,7 @@ describe('AttachmentUploadPreviewList', () => {
       await waitFor(() => {
         expect(queryAllByTestId('image-attachment-upload-preview')).toHaveLength(1);
         expect(channel.messageComposer.attachmentManager.attachments).toHaveLength(1);
-        expect(uploadAttachmentSpy).toHaveBeenCalled();
+        expect(uploadFileSpy).toHaveBeenCalled();
       });
     });
 

package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreview.test.tsx

@@ -165,9 +165,30 @@ describe('AudioAttachmentUploadPreview render', () => {
     });
   });
 
+  it('should render AudioAttachmentUploadPreview for an attachment without a local file', async () => {
+    const attachments = [
+      generateAudioAttachment({
+        localMetadata: {
+          id: 'audio-attachment',
+          uploadState: FileState.FINISHED,
+        },
+      }),
+    ];
+
+    act(() => {
+      channel.messageComposer.attachmentManager.upsertAttachments(attachments);
+    });
+
+    renderComponent({ channel, client, props: {} });
+
+    await waitFor(() => {
+      expect(screen.queryAllByTestId('audio-attachment-upload-preview')).toHaveLength(1);
+    });
+  });
+
   it('should render AudioAttachmentUploadPreview with all failed files', async () => {
-    const uploadAttachmentSpy = jest.fn();
-    channel.messageComposer.attachmentManager.uploadAttachment = uploadAttachmentSpy;
+    const uploadFileSpy = jest.fn();
+    channel.messageComposer.attachmentManager.uploadFile = uploadFileSpy;
     const attachments = [
       generateAudioAttachment({
         localMetadata: {
@@ -203,7 +224,7 @@ describe('AudioAttachmentUploadPreview render', () => {
       expect(queryAllByTestId('audio-attachment-upload-preview')).toHaveLength(1);
       expect(getByLabelText('audio-attachment-preview')).toBeDefined();
       expect(channel.messageComposer.attachmentManager.attachments).toHaveLength(1);
-      expect(uploadAttachmentSpy).toHaveBeenCalled();
+      expect(uploadFileSpy).toHaveBeenCalled();
     });
   });
 

package/src/components/MessageInput/__tests__/SendMessageDisallowedIndicator.test.tsx

@@ -115,8 +115,7 @@ describe('SendMessageDisallowedIndicator', () => {
       expect(queryByTestId('send-message-disallowed-indicator')).toBeNull();
     });
 
-    // Own capabilities are now sourced reactively from channel.state; `capabilities.changed` is an
-    // output-only notification in v10, so drive the change through the store directly.
+    // Own capabilities are read from `channel.state`, so the change is driven through the store.
     act(() => {
       channel.state.partialNext({
         ownCapabilities: channel.data!.own_capabilities!.filter(
@@ -226,12 +225,10 @@ describe("SendMessageDisallowedIndicator's edited state", () => {
     });
 
     act(() => {
-      chatClient.dispatchEvent({
-        cid: customChannel.cid,
-        own_capabilities: customChannel.data!.own_capabilities!.filter(
+      customChannel.state.partialNext({
+        ownCapabilities: customChannel.data!.own_capabilities!.filter(
           (capability: string) => capability !== 'send-message',
         ),
-        type: 'capabilities.changed',
       });
     });
 

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx

@@ -21,6 +21,7 @@ import {
   isVideoAttachment,
   LocalAttachment,
   LocalAudioAttachment,
+  LocalUploadAttachment,
   LocalVoiceRecordingAttachment,
 } from 'stream-chat';
 
@@ -292,6 +293,16 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
     [attachmentManager, dataRef, prepareForRemoval],
   );
 
+  // `uploadFile` does not check whether uploads are enabled, so a retry does not start one while
+  // they are off.
+  const handleRetry = useCallback(
+    (attachment: LocalUploadAttachment) => {
+      if (!attachmentManager.isUploadEnabled) return;
+      return attachmentManager.uploadFile(attachment);
+    },
+    [attachmentManager],
+  );
+
   useLayoutEffect(() => {
     const previousData = previousDataRef.current;
     const nextIds = new Set(data.map((attachment) => attachment.localMetadata.id));
@@ -346,7 +357,7 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
         return (
           <ImageAttachmentUploadPreview
             attachment={attachment}
-            handleRetry={attachmentManager.uploadAttachment}
+            handleRetry={handleRetry}
             removeAttachments={removeAttachments}
           />
         );
@@ -354,7 +365,7 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
         return (
           <AudioAttachmentUploadPreview
             attachment={attachment}
-            handleRetry={attachmentManager.uploadAttachment}
+            handleRetry={handleRetry}
             removeAttachments={removeAttachments}
           />
         );
@@ -363,7 +374,7 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
           return (
             <AudioAttachmentUploadPreview
               attachment={attachment}
-              handleRetry={attachmentManager.uploadAttachment}
+              handleRetry={handleRetry}
               removeAttachments={removeAttachments}
             />
           );
@@ -371,7 +382,7 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
           return (
             <FileAttachmentUploadPreview
               attachment={attachment}
-              handleRetry={attachmentManager.uploadAttachment}
+              handleRetry={handleRetry}
               removeAttachments={removeAttachments}
             />
           );
@@ -380,7 +391,7 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
         return (
           <VideoAttachmentUploadPreview
             attachment={attachment}
-            handleRetry={attachmentManager.uploadAttachment}
+            handleRetry={handleRetry}
             removeAttachments={removeAttachments}
           />
         );
@@ -388,7 +399,7 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
         return (
           <FileAttachmentUploadPreview
             attachment={attachment}
-            handleRetry={attachmentManager.uploadAttachment}
+            handleRetry={handleRetry}
             removeAttachments={removeAttachments}
           />
         );
@@ -399,7 +410,7 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
       FileAttachmentUploadPreview,
       ImageAttachmentUploadPreview,
       VideoAttachmentUploadPreview,
-      attachmentManager.uploadAttachment,
+      handleRetry,
       removeAttachments,
       soundPackageAvailable,
     ],
@@ -496,7 +507,7 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
             <AttachmentPreviewCell key={attachment.localMetadata.id}>
               <AudioAttachmentUploadPreview
                 attachment={attachment}
-                handleRetry={attachmentManager.uploadAttachment}
+                handleRetry={handleRetry}
                 removeAttachments={removeAttachments}
               />
             </AttachmentPreviewCell>

package/src/components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview.tsx

@@ -43,11 +43,8 @@ export const AudioAttachmentUploadPreview = ({
   const messageComposer = useMessageComposer();
   const isDraft = messageComposer.draftId;
   const isEditing = messageComposer.editedMessage;
-  const assetUrl =
-    (isDraft || isEditing
-      ? attachment.asset_url
-      : (attachment.localMetadata.file as FileReference).uri) ??
-    (attachment.localMetadata.file as FileReference).uri;
+  const fileUri = (attachment.localMetadata.file as FileReference | undefined)?.uri;
+  const assetUrl = (isDraft || isEditing ? attachment.asset_url : fileUri) ?? fileUri;
 
   const finalAttachment = useMemo(
     () => ({

package/src/components/MessageInput/hooks/useAudioRecorder.tsx

@@ -97,8 +97,8 @@ export const useAudioRecorder = ({
         if (sendOnComplete) {
           attachmentManager.upsertAttachments([audioFile]);
           sendMessage();
-        } else {
-          await attachmentManager.uploadAttachment(audioFile);
+        } else if (attachmentManager.isUploadEnabled) {
+          await attachmentManager.uploadFile(audioFile);
         }
       } catch (error) {
         console.log('Error uploading voice recording: ', error);

package/src/components/MessageList/InlineUnreadIndicator.tsx

@@ -20,8 +20,8 @@ export const InlineUnreadIndicator = (props: InlineUnreadIndicatorProps) => {
         {unreadCount
           ? t('messageList.newMessages.text', {
               count: unreadCount,
-              defaultValue_one: '{{count}} new message',
-              defaultValue_other: '{{count}} new messages',
+              defaultValue_one: '{{count}} unread message',
+              defaultValue_other: '{{count}} unread messages',
             })
           : t('messageList.unreadMessages.label', 'Unread Messages')}
       </Text>

package/src/components/MessageList/MessageList.tsx

@@ -432,12 +432,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   }, [disabled]);
 
   useEffect(() => {
-    if (thread) {
-      setAutoscrollToRecent(true);
-      return;
-    }
-
     if (!processedMessageList.length || !paginator) {
+      if (thread) setAutoscrollToRecent(true);
       return;
     }
 

package/src/components/MessageList/__tests__/InlineUnreadIndicator.test.tsx

@@ -9,8 +9,8 @@ import { InlineUnreadIndicator } from '../InlineUnreadIndicator';
 
 describe('InlineUnreadIndicator', () => {
   it.each([
-    [1, '1 new message'],
-    [3, '3 new messages'],
+    [1, '1 unread message'],
+    [3, '3 unread messages'],
   ])('labels %i unread messages as "%s"', async (unreadCount, label) => {
     const translators = await new Streami18n().init();
     render(