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

package/src/__tests__/offline-support/optimistic-update.js

@@ -15,6 +15,7 @@ import { getOrCreateChannelApi } from '../../mock-builders/api/getOrCreateChanne
 import { sendMessageApi } from '../../mock-builders/api/sendMessage';
 import { sendReactionApi } from '../../mock-builders/api/sendReaction';
 import { useMockedApis } from '../../mock-builders/api/useMockedApis';
+import { generateFileReference } from '../../mock-builders/attachments';
 import dispatchConnectionChangedEvent from '../../mock-builders/event/connectionChanged';
 import { generateChannelResponse } from '../../mock-builders/generator/channel';
 import { generateMember } from '../../mock-builders/generator/member';
@@ -25,6 +26,7 @@ import { getTestClientWithUser } from '../../mock-builders/mock';
 import { upsertChannels } from '../../store/apis';
 import { SqliteClient } from '../../store/SqliteClient';
 import { BetterSqlite } from '../../test-utils/BetterSqlite';
+import { MessageStatusTypes } from '../../utils/utils';
 
 test('Workaround to allow exporting tests', () => expect(true).toBe(true));
 
@@ -397,6 +399,229 @@ export const OptimisticUpdates = () => {
       });
     });
 
+    describe('edit message', () => {
+      it('should keep the optimistic edit in state and DB if the LLC queues the edit', async () => {
+        const message = channel.state.messages[0];
+        const editedText = 'edited while offline';
+
+        render(
+          <Chat client={chatClient} enableOfflineSupport>
+            <Channel
+              channel={channel}
+              doUpdateMessageRequest={async (_channelId, localMessage, options) => {
+                await chatClient.offlineDb.addPendingTask({
+                  channelId: channel.id,
+                  channelType: channel.type,
+                  messageId: message.id,
+                  payload: [localMessage, undefined, options],
+                  type: 'update-message',
+                });
+                return {
+                  message: {
+                    ...localMessage,
+                    message_text_updated_at: new Date(),
+                    updated_at: new Date(),
+                  },
+                };
+              }}
+            >
+              <CallbackEffectWithContext
+                callback={async ({ editMessage }) => {
+                  await editMessage({
+                    localMessage: {
+                      ...message,
+                      cid: channel.cid,
+                      text: editedText,
+                    },
+                    options: {},
+                  });
+                }}
+                context={MessageInputContext}
+              >
+                <View testID='children' />
+              </CallbackEffectWithContext>
+            </Channel>
+          </Chat>,
+        );
+
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
+
+        await waitFor(async () => {
+          const updatedMessage = channel.state.findMessage(message.id);
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
+          const dbMessages = await BetterSqlite.selectFromTable('messages');
+          const dbMessage = dbMessages.find((row) => row.id === message.id);
+
+          expect(updatedMessage.text).toBe(editedText);
+          expect(updatedMessage.message_text_updated_at).toBeTruthy();
+          expect(pendingTasksRows).toHaveLength(1);
+          expect(pendingTasksRows[0].type).toBe('update-message');
+          expect(dbMessage.text).toBe(editedText);
+          expect(dbMessage.messageTextUpdatedAt).toBeTruthy();
+        });
+      });
+
+      it('should keep the optimistic edit if the request fails', async () => {
+        const message = channel.state.messages[0];
+        const editedText = 'should stay optimistic';
+
+        render(
+          <Chat client={chatClient} enableOfflineSupport>
+            <Channel
+              channel={channel}
+              doUpdateMessageRequest={() => {
+                throw new Error('validation');
+              }}
+            >
+              <CallbackEffectWithContext
+                callback={async ({ editMessage }) => {
+                  try {
+                    await editMessage({
+                      localMessage: {
+                        ...message,
+                        cid: channel.cid,
+                        text: editedText,
+                      },
+                      options: {},
+                    });
+                  } catch (e) {
+                    // do nothing
+                  }
+                }}
+                context={MessageInputContext}
+              >
+                <View testID='children' />
+              </CallbackEffectWithContext>
+            </Channel>
+          </Chat>,
+        );
+
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
+
+        await waitFor(async () => {
+          const updatedMessage = channel.state.findMessage(message.id);
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
+          const dbMessages = await BetterSqlite.selectFromTable('messages');
+          const dbMessage = dbMessages.find((row) => row.id === message.id);
+
+          expect(updatedMessage.text).toBe(editedText);
+          expect(pendingTasksRows).toHaveLength(0);
+          expect(dbMessage.text).toBe(editedText);
+        });
+      });
+
+      it('should not set message_text_updated_at during optimistic edit of a failed message', async () => {
+        const message = channel.state.messages[0];
+        const optimisticStateSpy = jest.fn();
+
+        render(
+          <Chat client={chatClient} enableOfflineSupport>
+            <Channel
+              channel={channel}
+              doUpdateMessageRequest={() => {
+                const optimisticMessage = channel.state.findMessage(message.id);
+                optimisticStateSpy(optimisticMessage);
+
+                return {
+                  message: {
+                    ...optimisticMessage,
+                  },
+                };
+              }}
+            >
+              <CallbackEffectWithContext
+                callback={async ({ editMessage }) => {
+                  await editMessage({
+                    localMessage: {
+                      ...message,
+                      cid: channel.cid,
+                      status: MessageStatusTypes.FAILED,
+                      text: 'edited failed message',
+                    },
+                    options: {},
+                  });
+                }}
+                context={MessageInputContext}
+              >
+                <View testID='children' />
+              </CallbackEffectWithContext>
+            </Channel>
+          </Chat>,
+        );
+
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
+
+        await waitFor(() => {
+          expect(optimisticStateSpy).toHaveBeenCalled();
+          expect(optimisticStateSpy.mock.calls[0][0].message_text_updated_at).toBeUndefined();
+        });
+      });
+
+      it('should keep the optimistic edit for attachment updates without auto-queueing', async () => {
+        const message = channel.state.messages[0];
+        const editedText = 'edited attachment message';
+        const localUri = 'file://edited-attachment.png';
+
+        render(
+          <Chat client={chatClient} enableOfflineSupport>
+            <Channel
+              channel={channel}
+              doUpdateMessageRequest={() => {
+                throw new Error('offline');
+              }}
+            >
+              <CallbackEffectWithContext
+                callback={async ({ editMessage }) => {
+                  try {
+                    await editMessage({
+                      localMessage: {
+                        ...message,
+                        attachments: [
+                          {
+                            asset_url: localUri,
+                            originalFile: generateFileReference({
+                              name: 'edited-attachment.png',
+                              type: 'image/png',
+                              uri: localUri,
+                            }),
+                            type: 'file',
+                          },
+                        ],
+                        cid: channel.cid,
+                        text: editedText,
+                      },
+                      options: {},
+                    });
+                  } catch (e) {
+                    // do nothing
+                  }
+                }}
+                context={MessageInputContext}
+              >
+                <View testID='children' />
+              </CallbackEffectWithContext>
+            </Channel>
+          </Chat>,
+        );
+
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
+
+        await waitFor(async () => {
+          const updatedMessage = channel.state.findMessage(message.id);
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
+          const dbMessages = await BetterSqlite.selectFromTable('messages');
+          const dbMessage = dbMessages.find((row) => row.id === message.id);
+          const storedAttachments = JSON.parse(dbMessage.attachments);
+
+          expect(updatedMessage.text).toBe(editedText);
+          expect(updatedMessage.attachments[0].asset_url).toBe(localUri);
+          expect(pendingTasksRows).toHaveLength(0);
+          expect(dbMessage.text).toBe(editedText);
+          expect(storedAttachments[0].asset_url).toBe(localUri);
+        });
+      });
+    });
+
     describe('pending task execution', () => {
       it('pending task should be executed after connection is recovered', async () => {
         const message = channel.state.messages[0];
@@ -495,6 +720,131 @@ export const OptimisticUpdates = () => {
           expect(sendMessageSpy).toHaveBeenCalled();
         });
       });
+
+      it('should not re-add a failed local message after reconnect when its pending send task was resolved', async () => {
+        const localMessage = generateMessage({
+          status: MessageStatusTypes.SENDING,
+          text: 'offline resend',
+          user: chatClient.user,
+          userId: chatClient.userID,
+        });
+        const serverMessage = generateMessage({
+          id: localMessage.id,
+          text: localMessage.text,
+          user: chatClient.user,
+          userId: chatClient.userID,
+        });
+
+        jest.spyOn(channel.messageComposer, 'compose').mockResolvedValue({
+          localMessage,
+          message: localMessage,
+          options: {},
+        });
+
+        render(
+          <Chat client={chatClient} enableOfflineSupport>
+            <Channel channel={channel} initialValue={localMessage.text}>
+              <CallbackEffectWithContext
+                callback={async ({ sendMessage }) => {
+                  useMockedApis(chatClient, [erroredPostApi()]);
+                  await sendMessage();
+                }}
+                context={MessageInputContext}
+              >
+                <View testID='children' />
+              </CallbackEffectWithContext>
+            </Channel>
+          </Chat>,
+        );
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
+
+        let pendingTask;
+        await waitFor(async () => {
+          const pendingTasks = await chatClient.offlineDb.getPendingTasks();
+          expect(pendingTasks).toHaveLength(1);
+          pendingTask = pendingTasks[0];
+        });
+
+        expect(channel.state.messages.some((message) => message.id === localMessage.id)).toBe(true);
+
+        jest.spyOn(channel, 'watch').mockResolvedValue({});
+
+        channel.state.removeMessage(localMessage);
+        channel.state.addMessageSorted(serverMessage, true);
+        await chatClient.offlineDb.deletePendingTask({ id: pendingTask.id });
+
+        await act(async () => {
+          await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true);
+        });
+
+        await waitFor(() => {
+          const matchingMessages = channel.state.messages.filter(
+            (message) => message.text === localMessage.text,
+          );
+
+          expect(matchingMessages).toHaveLength(1);
+          expect(matchingMessages[0].id).toBe(serverMessage.id);
+          expect(matchingMessages[0].status).not.toBe(MessageStatusTypes.FAILED);
+        });
+      });
+
+      it('should re-add a failed local message after reconnect when fresh state still does not contain it', async () => {
+        const localMessage = generateMessage({
+          status: MessageStatusTypes.SENDING,
+          text: 'offline resend unresolved',
+          user: chatClient.user,
+          userId: chatClient.userID,
+        });
+
+        jest.spyOn(channel.messageComposer, 'compose').mockResolvedValue({
+          localMessage,
+          message: localMessage,
+          options: {},
+        });
+
+        render(
+          <Chat client={chatClient} enableOfflineSupport>
+            <Channel channel={channel} initialValue={localMessage.text}>
+              <CallbackEffectWithContext
+                callback={async ({ sendMessage }) => {
+                  useMockedApis(chatClient, [erroredPostApi()]);
+                  await sendMessage();
+                }}
+                context={MessageInputContext}
+              >
+                <View testID='children' />
+              </CallbackEffectWithContext>
+            </Channel>
+          </Chat>,
+        );
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
+
+        let pendingTask;
+        await waitFor(async () => {
+          const pendingTasks = await chatClient.offlineDb.getPendingTasks();
+          expect(pendingTasks).toHaveLength(1);
+          pendingTask = pendingTasks[0];
+        });
+
+        jest.spyOn(channel, 'watch').mockResolvedValue({});
+
+        channel.state.removeMessage(localMessage);
+        await chatClient.offlineDb.deletePendingTask({ id: pendingTask.id });
+
+        await act(async () => {
+          await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true);
+        });
+
+        await waitFor(() => {
+          const matchingMessages = channel.state.messages.filter(
+            (message) => message.id === localMessage.id,
+          );
+
+          expect(matchingMessages).toHaveLength(1);
+          expect(matchingMessages[0].status).toBe(MessageStatusTypes.FAILED);
+          expect(matchingMessages[0].text).toBe(localMessage.text);
+        });
+      });
     });
   });
 };

package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx

@@ -46,7 +46,7 @@ const useStyles = () => {
   return useMemo(() => {
     return StyleSheet.create({
       container: {
-        backgroundColor: semantics.backgroundCoreSurface,
+        backgroundColor: semantics.backgroundCoreSurfaceDefault,
         paddingHorizontal: primitives.spacingMd,
         paddingVertical: primitives.spacingLg,
         ...container,

package/src/components/Attachment/Attachment.tsx

@@ -11,17 +11,8 @@ import {
   type Attachment as AttachmentType,
 } from 'stream-chat';
 
-import { AudioAttachment as AudioAttachmentDefault } from './Audio';
-
-import { UnsupportedAttachment as UnsupportedAttachmentDefault } from './UnsupportedAttachment';
-import { URLPreview as URLPreviewDefault } from './UrlPreview';
-import { URLPreviewCompact as URLPreviewCompactDefault } from './UrlPreview/URLPreviewCompact';
-
-import { FileAttachment as FileAttachmentDefault } from '../../components/Attachment/FileAttachment';
-import { Gallery as GalleryDefault } from '../../components/Attachment/Gallery';
-import { Giphy as GiphyDefault } from '../../components/Attachment/Giphy';
-
 import { useTheme } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -39,16 +30,7 @@ export type ActionHandler = (name: string, value: string) => void;
 
 export type AttachmentPropsWithContext = Pick<
   MessagesContextValue,
-  | 'AudioAttachment'
-  | 'FileAttachment'
-  | 'Gallery'
-  | 'Giphy'
-  | 'isAttachmentEqual'
-  | 'UrlPreview'
-  | 'URLPreviewCompact'
-  | 'myMessageTheme'
-  | 'urlPreviewType'
-  | 'UnsupportedAttachment'
+  'isAttachmentEqual' | 'myMessageTheme' | 'urlPreviewType'
 > &
   Pick<MessageContextValue, 'message'> & {
     /**
@@ -62,19 +44,16 @@ export type AttachmentPropsWithContext = Pick<
   };
 
 const AttachmentWithContext = (props: AttachmentPropsWithContext) => {
+  const { attachment, index, message, urlPreviewType } = props;
   const {
-    attachment,
     AudioAttachment,
     FileAttachment,
     Gallery,
     Giphy,
     UrlPreview,
     URLPreviewCompact,
-    index,
-    message,
-    urlPreviewType,
     UnsupportedAttachment,
-  } = props;
+  } = useComponentsContext();
   const audioAttachmentStyles = useAudioAttachmentStyles();
 
   if (attachment.type === FileTypes.Giphy || attachment.type === FileTypes.Imgur) {
@@ -164,31 +143,9 @@ export type AttachmentProps = Partial<AttachmentPropsWithContext>;
  * Attachment - The message attachment
  */
 export const Attachment = (props: AttachmentProps) => {
-  const {
-    attachment,
-    AudioAttachment: PropAudioAttachment,
-    FileAttachment: PropFileAttachment,
-    Gallery: PropGallery,
-    Giphy: PropGiphy,
-    myMessageTheme: PropMyMessageTheme,
-    UrlPreview: PropUrlPreview,
-    URLPreviewCompact: PropURLPreviewCompact,
-    urlPreviewType: PropUrlPreviewType,
-    UnsupportedAttachment: PropUnsupportedAttachment,
-  } = props;
+  const { attachment } = props;
 
-  const {
-    AudioAttachment: ContextAudioAttachment,
-    FileAttachment: ContextFileAttachment,
-    Gallery: ContextGallery,
-    Giphy: ContextGiphy,
-    isAttachmentEqual,
-    myMessageTheme: ContextMyMessageTheme,
-    UrlPreview: ContextUrlPreview,
-    URLPreviewCompact: ContextURLPreviewCompact,
-    urlPreviewType: ContextUrlPreviewType,
-    UnsupportedAttachment: ContextUnsupportedAttachment,
-  } = useMessagesContext();
+  const { isAttachmentEqual, myMessageTheme, urlPreviewType } = useMessagesContext();
 
   const { message } = useMessageContext();
 
@@ -196,33 +153,14 @@ export const Attachment = (props: AttachmentProps) => {
     return null;
   }
 
-  const AudioAttachment = PropAudioAttachment || ContextAudioAttachment || AudioAttachmentDefault;
-  const FileAttachment = PropFileAttachment || ContextFileAttachment || FileAttachmentDefault;
-  const Gallery = PropGallery || ContextGallery || GalleryDefault;
-  const Giphy = PropGiphy || ContextGiphy || GiphyDefault;
-  const UrlPreview = PropUrlPreview || ContextUrlPreview || URLPreviewDefault;
-  const myMessageTheme = PropMyMessageTheme || ContextMyMessageTheme;
-  const URLPreviewCompact =
-    PropURLPreviewCompact || ContextURLPreviewCompact || URLPreviewCompactDefault;
-  const urlPreviewType = PropUrlPreviewType || ContextUrlPreviewType;
-  const UnsupportedAttachment =
-    PropUnsupportedAttachment || ContextUnsupportedAttachment || UnsupportedAttachmentDefault;
-
   return (
     <MemoizedAttachment
       {...{
         attachment,
-        message,
-        AudioAttachment,
-        FileAttachment,
-        Gallery,
-        Giphy,
         isAttachmentEqual,
+        message,
         myMessageTheme,
-        UrlPreview,
-        URLPreviewCompact,
         urlPreviewType,
-        UnsupportedAttachment,
       }}
     />
   );

package/src/components/Attachment/Audio/AudioAttachment.tsx

@@ -15,6 +15,7 @@ import {
 import { PlayPauseButton } from './PlayPauseButton';
 
 import { useTheme } from '../../../contexts';
+import { useStableCallback } from '../../../hooks';
 import { useStateStore } from '../../../hooks';
 import { useAudioPlayer } from '../../../hooks/useAudioPlayer';
 import {
@@ -28,6 +29,7 @@ import { AudioPlayerState } from '../../../state-store/audio-player';
 import { primitives } from '../../../theme';
 import { AudioConfig } from '../../../types/types';
 import { ProgressControl } from '../../ProgressControl/ProgressControl';
+import { StableDurationLabel } from '../../ProgressControl/StableDurationLabel';
 import { WaveProgressBar } from '../../ProgressControl/WaveProgressBar';
 import { SpeedSettingsButton } from '../../ui/SpeedSettingsButton';
 
@@ -36,6 +38,16 @@ const ONE_SECOND_IN_MILLISECONDS = 1000;
 
 dayjs.extend(duration);
 
+const getAudioDurationLabel = (durationInMilliseconds: number) => {
+  if (!durationInMilliseconds) {
+    return '00:00';
+  }
+
+  return durationInMilliseconds / ONE_HOUR_IN_MILLISECONDS >= 1
+    ? dayjs.duration(durationInMilliseconds, 'milliseconds').format('HH:mm:ss')
+    : dayjs.duration(durationInMilliseconds, 'milliseconds').format('mm:ss');
+};
+
 export type AudioAttachmentType = AudioConfig &
   Pick<
     StreamAudioAttachment | StreamVoiceRecordingAttachment,
@@ -131,7 +143,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
 
   /** This is for Native CLI Apps */
   const handleLoad = (payload: VideoPayloadData) => {
-    // If the attachment is a voice recording, we rely on the duration from the attachment as the one from the react-native-video is incorrect.
+    // Voice recordings already carry the canonical duration in the attachment payload.
     if (isVoiceRecording) {
       return;
     }
@@ -157,18 +169,14 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     await audioPlayer.stop();
   };
 
-  const dragStart = () => {
+  const dragStart = useStableCallback(() => {
     audioPlayer.pause();
-  };
-
-  const dragProgress = (currentProgress: number) => {
-    audioPlayer.progress = currentProgress;
-  };
+  });
 
-  const dragEnd = async (currentProgress: number) => {
+  const dragEnd = useStableCallback(async (currentProgress: number) => {
     const positionInSeconds = (currentProgress * duration) / ONE_SECOND_IN_MILLISECONDS;
     await audioPlayer.seek(positionInSeconds);
-  };
+  });
 
   const onSpeedChangeHandler = async () => {
     await audioPlayer.changePlaybackRate();
@@ -192,14 +200,13 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     },
   } = useTheme();
 
+  const maxDurationLabel = useMemo(() => getAudioDurationLabel(duration), [duration]);
+
+  const remainingDuration = useMemo(() => Math.max(duration - position, 0), [duration, position]);
+
   const progressDuration = useMemo(
-    () =>
-      position
-        ? position / ONE_HOUR_IN_MILLISECONDS >= 1
-          ? dayjs.duration(position, 'milliseconds').format('HH:mm:ss')
-          : dayjs.duration(position, 'milliseconds').format('mm:ss')
-        : dayjs.duration(duration, 'milliseconds').format('mm:ss'),
-    [duration, position],
+    () => getAudioDurationLabel(remainingDuration || duration),
+    [duration, remainingDuration],
   );
 
   return (
@@ -246,23 +253,21 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
           indicator
         ) : (
           <View style={[styles.audioInfo, audioInfo]}>
-            <Text
-              style={[
-                styles.progressDurationText,
-                { color: isPlaying ? semantics.accentPrimary : semantics.textSecondary },
-                progressDurationText,
-                stylesProps?.durationText,
-              ]}
-            >
-              {progressDuration}
-            </Text>
+            <StableDurationLabel
+              accessibilityLabel='Progress Duration'
+              reserveLabel={maxDurationLabel}
+              label={progressDuration}
+              style={[styles.progressDurationText, progressDurationText, stylesProps?.durationText]}
+              visibleStyle={{
+                color: isPlaying ? semantics.accentPrimary : semantics.textSecondary,
+              }}
+            />
             {!hideProgressBar && (
               <View style={[styles.progressControlContainer, progressControlContainer]}>
                 {item.waveform_data ? (
                   <WaveProgressBar
                     isPlaying={isPlaying}
                     onEndDrag={dragEnd}
-                    onProgressDrag={dragProgress}
                     onStartDrag={dragStart}
                     progress={progress}
                     waveformData={item.waveform_data}
@@ -344,6 +349,7 @@ const useStyles = () => {
       },
       progressDurationText: {
         color: semantics.textPrimary,
+        fontVariant: ['tabular-nums'],
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,

package/src/components/Attachment/Audio/PlayPauseButton.tsx

@@ -2,8 +2,8 @@ import React, { useMemo } from 'react';
 import { Pressable, PressableProps, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Pause } from '../../../icons/Pause';
-import { Play } from '../../../icons/Play';
+import { Pause } from '../../../icons/pause-fill';
+import { Play } from '../../../icons/play-fill';
 import { primitives } from '../../../theme';
 import { buttonSizes } from '../../ui/Button/constants';