stream-chat-react-native-core 9.10.1-beta.2 → 10.0.0-rc.1

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

@@ -2,7 +2,12 @@ import React, { useCallback, useMemo } from 'react';
 
 import { StyleSheet, View } from 'react-native';
 
-import { FileReference, LocalAudioAttachment, LocalVoiceRecordingAttachment } from 'stream-chat';
+import {
+  FileReference,
+  LocalAudioAttachment,
+  LocalVoiceRecordingAttachment,
+  resolveAttachmentFullByteSize,
+} from 'stream-chat';
 
 import { AttachmentRemoveControl } from './AttachmentRemoveControl';
 import {
@@ -14,7 +19,7 @@ import {
 import { AudioAttachment } from '../../../../components/Attachment/Audio';
 import { useTheme } from '../../../../contexts';
 import { useMessageComposer } from '../../../../contexts/messageInputContext/hooks/useMessageComposer';
-import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
+import { usePendingUploadsEnabled } from '../../../../contexts/messageInputContext/hooks/usePendingUploadsEnabled';
 import { primitives } from '../../../../theme';
 import { UploadAttachmentPreviewProps } from '../../../../types/types';
 import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../../../utils/utils';
@@ -30,10 +35,10 @@ export const AudioAttachmentUploadPreview = ({
   removeAttachments,
 }: AudioAttachmentUploadPreviewProps) => {
   const styles = useStyles();
-  const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
+  const pendingUploadsEnabled = usePendingUploadsEnabled();
   const indicatorType = getIndicatorTypeForFileState(
     attachment.localMetadata.uploadState,
-    !!allowSendBeforeAttachmentsUpload,
+    pendingUploadsEnabled,
   );
   const messageComposer = useMessageComposer();
   const isDraft = messageComposer.draftId;
@@ -67,7 +72,7 @@ export const AudioAttachmentUploadPreview = ({
         <FileUploadInProgressIndicator
           localId={attachment.localMetadata.id}
           sourceUrl={assetUrl}
-          totalBytes={attachment.file_size}
+          totalBytes={resolveAttachmentFullByteSize(attachment)}
         />
       );
     }
@@ -78,7 +83,7 @@ export const AudioAttachmentUploadPreview = ({
       return <FileUploadNotSupportedIndicator localMetadata={attachment.localMetadata} />;
     }
     return null;
-  }, [assetUrl, attachment.file_size, attachment.localMetadata, indicatorType, onRetryHandler]);
+  }, [assetUrl, attachment, indicatorType, onRetryHandler]);
 
   return (
     <View style={styles.wrapper} testID={'audio-attachment-upload-preview'}>

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

@@ -7,13 +7,14 @@ import {
   LocalAudioAttachment,
   LocalFileAttachment,
   LocalVideoAttachment,
+  resolveAttachmentFullByteSize,
 } from 'stream-chat';
 
 import { AttachmentRemoveControl } from './AttachmentRemoveControl';
 
 import { FilePreview } from '../../../../components/Attachment/FilePreview';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
-import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
+import { usePendingUploadsEnabled } from '../../../../contexts/messageInputContext/hooks/usePendingUploadsEnabled';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../../theme';
 import { UploadAttachmentPreviewProps } from '../../../../types/types';
@@ -39,10 +40,10 @@ export const FileAttachmentUploadPreview = ({
     FileUploadRetryIndicator,
     FileUploadNotSupportedIndicator,
   } = useComponentsContext();
-  const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
+  const pendingUploadsEnabled = usePendingUploadsEnabled();
   const indicatorType = getIndicatorTypeForFileState(
     attachment.localMetadata.uploadState,
-    !!allowSendBeforeAttachmentsUpload,
+    pendingUploadsEnabled,
   );
 
   const {
@@ -67,7 +68,7 @@ export const FileAttachmentUploadPreview = ({
         <FileUploadInProgressIndicator
           localId={attachment.localMetadata.id}
           sourceUrl={sourceUrl}
-          totalBytes={attachment.file_size}
+          totalBytes={resolveAttachmentFullByteSize(attachment)}
         />
       );
     }
@@ -82,8 +83,7 @@ export const FileAttachmentUploadPreview = ({
     FileUploadInProgressIndicator,
     FileUploadNotSupportedIndicator,
     FileUploadRetryIndicator,
-    attachment.localMetadata,
-    attachment.file_size,
+    attachment,
     indicatorType,
     onRetryHandler,
     sourceUrl,

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

@@ -7,7 +7,7 @@ import { LocalImageAttachment } from 'stream-chat';
 import { AttachmentRemoveControl } from './AttachmentRemoveControl';
 
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
-import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
+import { usePendingUploadsEnabled } from '../../../../contexts/messageInputContext/hooks/usePendingUploadsEnabled';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../../theme';
 import { UploadAttachmentPreviewProps } from '../../../../types/types';
@@ -24,7 +24,7 @@ export const ImageAttachmentUploadPreview = ({
   removeAttachments,
 }: ImageAttachmentUploadPreviewProps) => {
   const [loading, setLoading] = useState(true);
-  const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
+  const pendingUploadsEnabled = usePendingUploadsEnabled();
   const {
     ImageComponent,
     ImageLoadingIndicator,
@@ -34,7 +34,7 @@ export const ImageAttachmentUploadPreview = ({
   } = useComponentsContext();
   const indicatorType = getIndicatorTypeForFileState(
     attachment.localMetadata.uploadState,
-    !!allowSendBeforeAttachmentsUpload,
+    pendingUploadsEnabled,
   );
   const previewUri = attachment.localMetadata.previewUri ?? attachment.image_url;
   const shouldShowImageLoadingIndicator =

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

@@ -7,8 +7,8 @@ import { LocalImageAttachment, LocalVideoAttachment } from 'stream-chat';
 import { FileAttachmentUploadPreview } from './FileAttachmentUploadPreview';
 import { ImageAttachmentUploadPreview } from './ImageAttachmentUploadPreview';
 
-import { useMessageInputContext } from '../../../../contexts';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
+import { usePendingUploadsEnabled } from '../../../../contexts/messageInputContext/hooks/usePendingUploadsEnabled';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../../theme';
 import { UploadAttachmentPreviewProps } from '../../../../types/types';
@@ -23,9 +23,13 @@ export const VideoAttachmentUploadPreview = ({
   removeAttachments,
 }: VideoAttachmentUploadPreviewProps) => {
   const previewUri = attachment.thumb_url ?? attachment.localMetadata.previewUri;
-  const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
+  const pendingUploadsEnabled = usePendingUploadsEnabled();
   const shouldShowMetadataPill =
-    allowSendBeforeAttachmentsUpload || attachment.localMetadata.uploadState !== 'uploading';
+    pendingUploadsEnabled || attachment.localMetadata.uploadState !== 'uploading';
+  // `localMetadata.file` is `File | FileReference`; only the RN `FileReference` carries a
+  // `duration` (and a required `uri` to discriminate on), so read it through a guard.
+  const localFile = attachment.localMetadata.file;
+  const duration = 'uri' in localFile ? localFile.duration : undefined;
 
   return previewUri ? (
     <>
@@ -43,7 +47,7 @@ export const VideoAttachmentUploadPreview = ({
         removeAttachments={removeAttachments}
       />
       {shouldShowMetadataPill ? (
-        <VideoAttachmentMetadataPill duration={attachment.duration} format={'descriptive'} />
+        <VideoAttachmentMetadataPill duration={duration} format={'descriptive'} />
       ) : null}
     </>
   ) : (

package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx

@@ -57,7 +57,7 @@ const StopRecording = ({
 
   return (
     <Button
-      accessibilityLabelKey='a11y/Stop voice recording'
+      accessibilityLabelKey='messageInput.audioRecorder.stop.accessibilityLabel'
       variant='destructive'
       type='outline'
       size='sm'
@@ -83,7 +83,7 @@ const UploadRecording = ({
 
   return (
     <Button
-      accessibilityLabelKey='a11y/Send voice recording'
+      accessibilityLabelKey='messageInput.audioRecorder.send.accessibilityLabel'
       variant='primary'
       type='solid'
       onPress={onUploadVoiceRecording}
@@ -106,14 +106,14 @@ const DeleteRecording = ({
     NativeHandlers.triggerHaptic('impactMedium');
     await deleteVoiceRecordingHandler();
     addNotification({
-      message: t('Voice message deleted'),
+      message: t('messageInput.audioRecorder.recordingDeleted.text', 'Voice message deleted'),
       options: { severity: 'info', type: 'audioRecording:cancel:success' },
       origin: { emitter: 'AudioRecorder' },
     });
   };
   return (
     <Button
-      accessibilityLabelKey='a11y/Delete voice recording'
+      accessibilityLabelKey='messageInput.audioRecorder.delete.accessibilityLabel'
       variant='secondary'
       type='outline'
       size='sm'
@@ -185,7 +185,7 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
           style={[styles.slideToCancelContainer, slideToCancelStyle, slideToCancelContainer]}
         >
           <Text style={[styles.slideToCancel, { color: semantics.textPrimary }]}>
-            {t('Slide to Cancel')}
+            {t('messageInput.audioRecorder.slideToCancel.text', 'Slide to Cancel')}
           </Text>
           <icons.ChevronLeft
             stroke={semantics.textTertiary}

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -86,7 +86,9 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
   const pressed = useSharedValue(false);
 
   const { t } = useTranslationContext();
-  const startVoiceRecordingAccessibilityLabel = useA11yLabel('a11y/Start voice recording');
+  const startVoiceRecordingAccessibilityLabel = useA11yLabel(
+    'messageInput.audioRecorder.start.accessibilityLabel',
+  );
   const {
     theme: {
       messageComposer: { micButtonContainer },
@@ -103,7 +105,10 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
     if (!recording) {
       NativeHandlers.triggerHaptic('notificationError');
       addNotification({
-        message: 'Hold to record. Release to save.',
+        message: t(
+          'messageInput.audioRecorder.holdToRecord.text',
+          'Hold to record. Release to save.',
+        ),
         options: {
           severity: 'info',
           type: 'validation:audio:recording:hold-required',
@@ -126,14 +131,17 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
       const permissionsGranted = await startVoiceRecording();
       if (!permissionsGranted) {
         addNotification({
-          message: 'Please allow Audio permissions in settings.',
+          message: t(
+            'messageInput.audioRecorder.permissionDenied.text',
+            'Please allow Audio permissions in settings.',
+          ),
           options: {
             actions: [
               {
                 handler: () => {
                   Linking.openSettings();
                 },
-                label: t('Open Settings'),
+                label: t('common.openSettings.label', 'Open Settings'),
               },
             ],
             duration: 0,

package/src/components/MessageInput/components/InputButtons/AttachButton.tsx

@@ -50,7 +50,9 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
   return (
     <Button
       accessibilityLabelKey={
-        isAttachmentPickerOpen ? 'a11y/Close attachments' : 'a11y/Add attachment'
+        isAttachmentPickerOpen
+          ? 'messageInput.closeAttachments.accessibilityLabel'
+          : 'messageInput.addAttachment.accessibilityLabel'
       }
       variant='secondary'
       type='outline'

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

@@ -77,16 +77,24 @@ const areEqual = (
 ) => {
   const {
     hasCameraPicker: prevHasCameraPicker,
+    hasCommands: prevHasCommands,
     hasFilePicker: prevHasFilePicker,
     hasImagePicker: prevHasImagePicker,
+    uploadFile: prevUploadFile,
   } = prevProps;
 
   const {
     hasCameraPicker: nextHasCameraPicker,
+    hasCommands: nextHasCommands,
     hasFilePicker: nextHasFilePicker,
     hasImagePicker: nextHasImagePicker,
+    uploadFile: nextUploadFile,
   } = nextProps;
 
+  if (prevHasCommands !== nextHasCommands || prevUploadFile !== nextUploadFile) {
+    return false;
+  }
+
   if (prevHasCameraPicker !== nextHasCameraPicker) {
     return false;
   }

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

@@ -27,7 +27,7 @@ export const EditButton = (props: EditButtonProps) => {
 
   return (
     <Button
-      accessibilityLabelKey='a11y/Save edited message'
+      accessibilityLabelKey='messageInput.saveEdit.accessibilityLabel'
       variant='primary'
       type='solid'
       LeadingIcon={icons.Tick}

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

@@ -27,7 +27,7 @@ export const SendButton = (props: SendButtonProps) => {
 
   return (
     <Button
-      accessibilityLabelKey='a11y/Send message'
+      accessibilityLabelKey='messageInput.sendMessage.accessibilityLabel'
       variant='primary'
       type='solid'
       disabled={disabled}

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

@@ -8,9 +8,7 @@ import { EditButton } from './EditButton';
 
 import {
   ChannelContextValue,
-  ChatContextValue,
   useChannelContext,
-  useChatContext,
   useMessageComposerHasSendableData,
   useTheme,
 } from '../../../../contexts';
@@ -24,12 +22,15 @@ import {
 import { useStateStore } from '../../../../hooks/useStateStore';
 import { transitions } from '../../../../utils/animations/transitions';
 import { AIStates, useAIState } from '../../../AITypingIndicatorView';
+import { useSettledWSConnectionHealth } from '../../../Chat/hooks/useWSConnectionState';
 import { useIsCooldownActive } from '../../hooks/useIsCooldownActive';
 
 export type OutputButtonsProps = Partial<OutputButtonsWithContextProps>;
 
-export type OutputButtonsWithContextProps = Pick<ChatContextValue, 'isOnline'> &
-  Pick<ChannelContextValue, 'channel'> &
+export type OutputButtonsWithContextProps = { isOnline: boolean } & Pick<
+  ChannelContextValue,
+  'channel'
+> &
   Pick<
     MessageInputContextValue,
     | 'asyncMessagesMinimumPressDuration'
@@ -71,7 +72,8 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   const { aiState } = useAIState(channel);
   const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);
   const shouldDisplayStopAIGeneration =
-    [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopMessageStreamingButton;
+    [AIStates.Thinking, AIStates.Generating].some((state) => state === aiState) &&
+    !!StopMessageStreamingButton;
 
   if (shouldDisplayStopAIGeneration) {
     return <StopMessageStreamingButton onPress={stopGenerating} />;
@@ -161,7 +163,8 @@ const MemoizedOutputButtonsWithContext = React.memo(
 ) as typeof OutputButtonsWithContext;
 
 export const OutputButtons = (props: OutputButtonsProps) => {
-  const { isOnline } = useChatContext();
+  // The socket, not the device network: a command round-trips through the server.
+  const isOnline = useSettledWSConnectionHealth();
   const { channel } = useChannelContext();
   const {
     audioRecordingEnabled,

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

@@ -87,17 +87,19 @@ export const useAudioRecorder = ({
         const audioFile: LocalVoiceRecordingAttachment = {
           asset_url:
             typeof recording !== 'string' ? (recording?.getURI() as string) : (recording as string),
-          duration: durationInSeconds,
-          file_size: 0,
+          custom: {
+            duration: durationInSeconds,
+            file_size: 0,
+            mime_type: 'audio/aac',
+            waveform_data: resampledWaveformData,
+          },
           localMetadata: {
             file,
             id: generateRandomId(),
             uploadState: 'pending',
           },
-          mime_type: 'audio/aac',
           title: `audio_recording_${date}.aac`,
           type: FileTypes.VoiceRecording,
-          waveform_data: resampledWaveformData,
         };
 
         audioRecorderManager.reset();

package/src/components/MessageList/InlineDateSeparator.tsx

@@ -3,8 +3,8 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { getCalendarDateStringForA11y, getDateString } from '../../i18n/utils';
 import { primitives } from '../../theme';
-import { getDateString, getDateStringForA11y } from '../../utils/i18n/getDateString';
 
 /**
  * Props for the `InlineDateSeparator` component.
@@ -23,16 +23,16 @@ export const InlineDateSeparator = ({ date }: InlineDateSeparatorProps) => {
   const dateString = useMemo(
     () =>
       getDateString({
-        date,
+        messageCreatedAt: date,
         t,
         tDateTimeParser,
-        timestampTranslationKey: 'timestamp/InlineDateSeparator',
+        timestampTranslationKey: 'timestamp.InlineDateSeparator',
       }),
     [date, t, tDateTimeParser],
   );
 
   const a11yDateString = useMemo(
-    () => getDateStringForA11y({ date, tDateTimeParser, userLanguage }),
+    () => getCalendarDateStringForA11y({ messageCreatedAt: date, tDateTimeParser, userLanguage }),
     [date, tDateTimeParser, userLanguage],
   );
 

package/src/components/MessageList/InlineLoadingMoreIndicator.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
 
-import { usePaginatedMessageListContext } from '../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 const styles = StyleSheet.create({
@@ -53,8 +52,8 @@ const MemoizedInlineLoadingMoreIndicator = React.memo(
   areEqual,
 ) as typeof InlineLoadingMoreIndicatorWithContext;
 
-export const InlineLoadingMoreIndicator = () => {
-  const { loadingMore } = usePaginatedMessageListContext();
-
-  return <MemoizedInlineLoadingMoreIndicator loadingMore={loadingMore} />;
-};
+export const InlineLoadingMoreIndicator = ({
+  loadingMore,
+}: InlineLoadingMoreIndicatorPropsWithContext) => (
+  <MemoizedInlineLoadingMoreIndicator loadingMore={loadingMore} />
+);

package/src/components/MessageList/InlineLoadingMoreRecentIndicator.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
 
-import { usePaginatedMessageListContext } from '../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
 
@@ -54,8 +53,8 @@ const MemoizedInlineLoadingMoreRecentIndicator = React.memo(
   areEqual,
 ) as typeof InlineLoadingMoreRecentIndicatorWithContext;
 
-export const InlineLoadingMoreRecentIndicator = () => {
-  const { loadingMoreRecent } = usePaginatedMessageListContext();
-
-  return <MemoizedInlineLoadingMoreRecentIndicator loadingMoreRecent={loadingMoreRecent} />;
-};
+export const InlineLoadingMoreRecentIndicator = ({
+  loadingMoreRecent,
+}: InlineLoadingMoreRecentIndicatorPropsWithContext) => (
+  <MemoizedInlineLoadingMoreRecentIndicator loadingMoreRecent={loadingMoreRecent} />
+);

package/src/components/MessageList/InlineUnreadIndicator.tsx

@@ -17,7 +17,13 @@ export const InlineUnreadIndicator = (props: InlineUnreadIndicatorProps) => {
   return (
     <View accessibilityLabel='Inline unread indicator' style={styles.container}>
       <Text style={styles.text}>
-        {unreadCount ? t('{{count}} new messages', { count: unreadCount }) : t('Unread Messages')}
+        {unreadCount
+          ? t('messageList.newMessages.text', {
+              count: unreadCount,
+              defaultValue_one: '{{count}} new message',
+              defaultValue_other: '{{count}} new messages',
+            })
+          : t('messageList.unreadMessages.label', 'Unread Messages')}
       </Text>
     </View>
   );