stream-chat-react-native-core 9.0.0-beta.2 → 9.0.0-beta.21

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

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { Pressable, PressableProps, StyleSheet } from 'react-native';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { NewClose } from '../../../../icons/NewClose';
+import { NewClose } from '../../../../icons/xmark';
 import { primitives } from '../../../../theme';
 
 type AttachmentRemoveControlProps = PressableProps;

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

@@ -1,6 +1,7 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   FlatList,
+  I18nManager,
   LayoutChangeEvent,
   NativeScrollEvent,
   NativeSyntheticEvent,
@@ -93,20 +94,29 @@ const UnMemoizedAttachmentUploadPreviewList = (
     ImageAttachmentUploadPreview,
     VideoAttachmentUploadPreview,
   } = props;
+  const { audioRecordingSendOnComplete } = useMessageInputContext();
   const { attachmentManager } = useMessageComposer();
   const { attachments } = useAttachmentManagerState();
+  const isRTL = I18nManager.isRTL;
   const attachmentListRef = useRef<FlatList<LocalAttachment>>(null);
   const soundPackageAvailable = isSoundPackageAvailable();
   const isAudioAttachmentPreview = getIsAudioAttachmentPreview(soundPackageAvailable);
   const previousNonAudioAttachmentsLengthRef = useRef(0);
   const contentWidthRef = useRef(0);
+  const itemsContentWidthRef = useRef(0);
   const viewportWidthRef = useRef(0);
   const scrollOffsetXRef = useRef(0);
+  const rtlLeadingSpacerWidthRef = useRef(0);
   const endShrinkCompensationX = useSharedValue(0);
-  const audioAttachments = attachments.filter(isAudioAttachmentPreview);
-  const nonAudioAttachments = attachments.filter(
+  const [rtlLeadingSpacerWidth, setRtlLeadingSpacerWidth] = useState(0);
+  const previewAttachments = attachments.filter(
+    (attachment) => !(audioRecordingSendOnComplete && isLocalVoiceRecordingAttachment(attachment)),
+  );
+  const audioAttachments = previewAttachments.filter(isAudioAttachmentPreview);
+  const nonAudioAttachments = previewAttachments.filter(
     (attachment) => !isAudioAttachmentPreview(attachment),
   );
+  const data = isRTL ? nonAudioAttachments.toReversed() : nonAudioAttachments;
 
   const {
     theme: {
@@ -116,6 +126,27 @@ const UnMemoizedAttachmentUploadPreviewList = (
     },
   } = useTheme();
 
+  const updateRtlLeadingSpacerWidth = useCallback(
+    (itemsWidth: number, viewportWidth: number) => {
+      if (!isRTL || !viewportWidth) {
+        if (rtlLeadingSpacerWidthRef.current !== 0) {
+          rtlLeadingSpacerWidthRef.current = 0;
+          setRtlLeadingSpacerWidth(0);
+        }
+        return;
+      }
+
+      const nextSpacerWidth = Math.max(0, viewportWidth - itemsWidth);
+      if (rtlLeadingSpacerWidthRef.current === nextSpacerWidth) {
+        return;
+      }
+
+      rtlLeadingSpacerWidthRef.current = nextSpacerWidth;
+      setRtlLeadingSpacerWidth(nextSpacerWidth);
+    },
+    [isRTL],
+  );
+
   const renderItem = useCallback(
     ({ item }: { item: LocalAttachment }) => {
       if (isLocalImageAttachment(item)) {
@@ -196,21 +227,31 @@ const UnMemoizedAttachmentUploadPreviewList = (
     scrollOffsetXRef.current = event.nativeEvent.contentOffset.x;
   }, []);
 
-  const onLayoutHandler = useCallback((event: LayoutChangeEvent) => {
-    viewportWidthRef.current = event.nativeEvent.layout.width;
-  }, []);
+  const onLayoutHandler = useCallback(
+    (event: LayoutChangeEvent) => {
+      const viewportWidth = event.nativeEvent.layout.width;
+      viewportWidthRef.current = viewportWidth;
+      updateRtlLeadingSpacerWidth(itemsContentWidthRef.current, viewportWidth);
+    },
+    [updateRtlLeadingSpacerWidth],
+  );
 
   const onContentSizeChangeHandler = useCallback(
     (width: number) => {
+      const itemsContentWidth = isRTL
+        ? Math.max(0, width - rtlLeadingSpacerWidthRef.current)
+        : width;
       const previousContentWidth = contentWidthRef.current;
-      contentWidthRef.current = width;
+      contentWidthRef.current = itemsContentWidth;
+      itemsContentWidthRef.current = itemsContentWidth;
+      updateRtlLeadingSpacerWidth(itemsContentWidth, viewportWidthRef.current);
 
-      if (!previousContentWidth || width >= previousContentWidth) {
+      if (!previousContentWidth || itemsContentWidth >= previousContentWidth) {
         return;
       }
 
       const oldMaxOffset = Math.max(0, previousContentWidth - viewportWidthRef.current);
-      const newMaxOffset = Math.max(0, width - viewportWidthRef.current);
+      const newMaxOffset = Math.max(0, itemsContentWidth - viewportWidthRef.current);
       const offsetBefore = scrollOffsetXRef.current;
       const wasNearEnd = oldMaxOffset - offsetBefore <= END_ANCHOR_THRESHOLD;
       const overshoot = Math.max(0, offsetBefore - newMaxOffset);
@@ -228,6 +269,10 @@ const UnMemoizedAttachmentUploadPreviewList = (
         scrollOffsetXRef.current = newMaxOffset;
       }
 
+      if (isRTL) {
+        return;
+      }
+
       const compensation = newMaxOffset - oldMaxOffset;
       if (compensation !== 0) {
         cancelAnimation(endShrinkCompensationX);
@@ -237,7 +282,7 @@ const UnMemoizedAttachmentUploadPreviewList = (
         });
       }
     },
-    [endShrinkCompensationX],
+    [endShrinkCompensationX, isRTL, updateRtlLeadingSpacerWidth],
   );
 
   useEffect(() => {
@@ -253,15 +298,19 @@ const UnMemoizedAttachmentUploadPreviewList = (
     cancelAnimation(endShrinkCompensationX);
     endShrinkCompensationX.value = 0;
     requestAnimationFrame(() => {
+      if (isRTL) {
+        return;
+      }
+
       attachmentListRef.current?.scrollToEnd({ animated: true });
     });
-  }, [endShrinkCompensationX, nonAudioAttachments.length]);
+  }, [endShrinkCompensationX, isRTL, nonAudioAttachments.length]);
 
   const animatedListWrapperStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: endShrinkCompensationX.value }],
   }));
 
-  if (!attachments.length) {
+  if (!previewAttachments.length) {
     return null;
   }
 
@@ -286,7 +335,7 @@ const UnMemoizedAttachmentUploadPreviewList = (
         </Animated.View>
       ) : null}
 
-      {nonAudioAttachments.length ? (
+      {data.length ? (
         <Animated.View
           entering={ZoomIn.duration(200)}
           exiting={ZoomOut.duration(200)}
@@ -294,10 +343,15 @@ const UnMemoizedAttachmentUploadPreviewList = (
         >
           <Animated.View style={animatedListWrapperStyle}>
             <FlatList
-              data={nonAudioAttachments}
+              data={data}
               horizontal
               ItemSeparatorComponent={ItemSeparatorComponent}
               keyExtractor={(item) => item.localMetadata.id}
+              ListHeaderComponent={
+                isRTL && rtlLeadingSpacerWidth > 0 ? (
+                  <View style={{ width: rtlLeadingSpacerWidth }} />
+                ) : null
+              }
               onContentSizeChange={onContentSizeChangeHandler}
               onLayout={onLayoutHandler}
               onScroll={onScrollHandler}
@@ -353,6 +407,7 @@ const styles = StyleSheet.create({
   },
   flatList: {
     overflow: 'visible',
+    direction: 'ltr',
   },
   itemSeparator: {
     width: primitives.spacingXs,

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

@@ -4,8 +4,8 @@ import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-nati
 import { LocalAttachmentUploadMetadata } from 'stream-chat';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { ExclamationCircle } from '../../../../icons/ExclamationCircle';
-import { Warning } from '../../../../icons/Warning';
+import { ExclamationCircle } from '../../../../icons/exclamation-circle-fill';
+import { Warning } from '../../../../icons/exclamation-triangle-fill';
 import { primitives } from '../../../../theme';
 import { RetryBadge } from '../../../ui/Badge/RetryBadge';
 

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { ImageBackground, StyleSheet, View } from 'react-native';
+import { Image, StyleSheet, View } from 'react-native';
 
 import { LocalImageAttachment } from 'stream-chat';
 
@@ -61,13 +61,14 @@ export const ImageAttachmentUploadPreview = ({
 
   return (
     <View style={[styles.wrapper, wrapper]} testID={'image-attachment-upload-preview'}>
-      <ImageBackground
-        onError={onErrorHandler}
-        onLoadEnd={onLoadEndHandler}
-        source={{ uri: attachment.localMetadata.previewUri ?? attachment.image_url }}
-        style={[styles.image, upload]}
-        testID={'image-attachment-upload-preview-image'}
-      >
+      <View style={[styles.image, upload]}>
+        <Image
+          onError={onErrorHandler}
+          onLoadEnd={onLoadEndHandler}
+          source={{ uri: attachment.localMetadata.previewUri ?? attachment.image_url }}
+          style={StyleSheet.absoluteFillObject}
+          testID={'image-attachment-upload-preview-image'}
+        />
         {indicatorType === ProgressIndicatorTypes.IN_PROGRESS && <ImageUploadInProgressIndicator />}
         {indicatorType === ProgressIndicatorTypes.RETRY && (
           <ImageUploadRetryIndicator onRetryHandler={onRetryHandler} />
@@ -75,7 +76,7 @@ export const ImageAttachmentUploadPreview = ({
         {indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED && (
           <ImageUploadNotSupportedIndicator />
         )}
-      </ImageBackground>
+      </View>
 
       <View style={styles.dismissWrapper}>
         <AttachmentRemoveControl onPress={onDismissHandler} />

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

@@ -21,10 +21,20 @@ export const VideoAttachmentUploadPreview = ({
   handleRetry,
   removeAttachments,
 }: VideoAttachmentUploadPreviewProps) => {
-  return attachment.localMetadata.previewUri ? (
+  const previewUri = attachment.thumb_url ?? attachment.localMetadata.previewUri;
+
+  return previewUri ? (
     <>
       <ImageAttachmentUploadPreview
-        attachment={attachment as unknown as LocalImageAttachment}
+        attachment={
+          {
+            ...attachment,
+            localMetadata: {
+              ...attachment.localMetadata,
+              previewUri,
+            },
+          } as unknown as LocalImageAttachment
+        }
         handleRetry={handleRetry}
         removeAttachments={removeAttachments}
       />
@@ -65,7 +75,7 @@ export const VideoAttachmentMetadataPill = ({
 
   return durationLabel ? (
     <View style={styles.durationContainer}>
-      <Recorder height={12} width={12} pathFill={semantics.textInverse} />
+      <Recorder height={12} width={12} pathFill={semantics.textOnInverse} />
       <Text style={styles.durationText}>{durationLabel}</Text>
     </View>
   ) : null;
@@ -81,7 +91,7 @@ const useStyles = () => {
     },
   } = useTheme();
 
-  const { badgeBgInverse, textInverse } = semantics;
+  const { badgeBgInverse, textOnInverse } = semantics;
 
   return useMemo(
     () =>
@@ -101,11 +111,11 @@ const useStyles = () => {
         durationText: {
           fontSize: primitives.typographyFontSizeXxs,
           fontWeight: primitives.typographyFontWeightBold,
-          color: textInverse,
+          color: textOnInverse,
           marginLeft: primitives.spacingXxs,
           ...durationText,
         },
       }),
-    [badgeBgInverse, textInverse, durationContainer, durationText],
+    [badgeBgInverse, textOnInverse, durationContainer, durationText],
   );
 };

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

@@ -14,12 +14,12 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../../hooks/useStateStore';
 
-import { ChevronLeft } from '../../../../icons/ChevronLeft';
-import { Mic } from '../../../../icons/Mic';
-import { Stop } from '../../../../icons/Stop';
-import { Tick } from '../../../../icons/Tick';
-import { Trash } from '../../../../icons/Trash';
+import { Tick } from '../../../../icons/checkmark';
+import { ChevronLeft } from '../../../../icons/chevron-left';
+import { Delete } from '../../../../icons/delete';
+import { Stop } from '../../../../icons/stop-fill';
 import { IconProps } from '../../../../icons/utils/base';
+import { Mic } from '../../../../icons/voice';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
@@ -27,7 +27,7 @@ import { primitives } from '../../../../theme';
 type AudioRecorderPropsWithContext = Pick<
   MessageInputContextValue,
   | 'audioRecorderManager'
-  | 'asyncMessagesMultiSendEnabled'
+  | 'audioRecordingSendOnComplete'
   | 'stopVoiceRecording'
   | 'deleteVoiceRecording'
   | 'uploadVoiceRecording'
@@ -70,15 +70,15 @@ const StopRecording = ({
 };
 
 const UploadRecording = ({
-  asyncMessagesMultiSendEnabled,
+  audioRecordingSendOnComplete,
   uploadVoiceRecordingHandler,
 }: {
-  asyncMessagesMultiSendEnabled: boolean;
-  uploadVoiceRecordingHandler: (multiSendEnabled: boolean) => Promise<void>;
+  audioRecordingSendOnComplete: boolean;
+  uploadVoiceRecordingHandler: (sendOnComplete: boolean) => Promise<void>;
 }) => {
   const onUploadVoiceRecording = () => {
     NativeHandlers.triggerHaptic('impactMedium');
-    uploadVoiceRecordingHandler(asyncMessagesMultiSendEnabled);
+    uploadVoiceRecordingHandler(audioRecordingSendOnComplete);
   };
 
   return (
@@ -109,14 +109,14 @@ const DeleteRecording = ({
       size='sm'
       iconOnly
       onPress={onDeleteVoiceRecording}
-      LeadingIcon={Trash}
+      LeadingIcon={Delete}
     />
   );
 };
 
 const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
   const {
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     slideToCancelStyle,
     deleteVoiceRecording,
     stopVoiceRecording,
@@ -144,7 +144,7 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
         <View style={styles.container}>
           <DeleteRecording deleteVoiceRecordingHandler={deleteVoiceRecording} />
           <UploadRecording
-            asyncMessagesMultiSendEnabled={asyncMessagesMultiSendEnabled}
+            audioRecordingSendOnComplete={audioRecordingSendOnComplete}
             uploadVoiceRecordingHandler={uploadVoiceRecording}
           />
         </View>
@@ -155,7 +155,7 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
           <DeleteRecording deleteVoiceRecordingHandler={deleteVoiceRecording} />
           <StopRecording stopVoiceRecordingHandler={stopVoiceRecording} />
           <UploadRecording
-            asyncMessagesMultiSendEnabled={asyncMessagesMultiSendEnabled}
+            audioRecordingSendOnComplete={audioRecordingSendOnComplete}
             uploadVoiceRecordingHandler={uploadVoiceRecording}
           />
         </View>
@@ -201,7 +201,7 @@ const audioRecorderSelector = (state: AudioRecorderManagerState) => ({
 export const AudioRecorder = (props: AudioRecorderProps) => {
   const {
     audioRecorderManager,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     stopVoiceRecording,
     deleteVoiceRecording,
     uploadVoiceRecording,
@@ -216,7 +216,7 @@ export const AudioRecorder = (props: AudioRecorderProps) => {
     <MemoizedAudioRecorder
       {...{
         audioRecorderManager,
-        asyncMessagesMultiSendEnabled,
+        audioRecordingSendOnComplete,
         stopVoiceRecording,
         deleteVoiceRecording,
         uploadVoiceRecording,

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

@@ -19,7 +19,7 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../../hooks';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Mic } from '../../../../icons/Mic';
+import { Mic } from '../../../../icons/voice';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
@@ -31,7 +31,7 @@ export type AudioRecordingButtonPropsWithContext = Pick<
   | 'asyncMessagesMinimumPressDuration'
   | 'asyncMessagesSlideToCancelDistance'
   | 'asyncMessagesLockDistance'
-  | 'asyncMessagesMultiSendEnabled'
+  | 'audioRecordingSendOnComplete'
   | 'audioRecorderManager'
   | 'startVoiceRecording'
   | 'deleteVoiceRecording'
@@ -67,7 +67,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
     asyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     startVoiceRecording,
     deleteVoiceRecording,
     uploadVoiceRecording,
@@ -156,7 +156,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
       return;
     }
     if (status === 'recording') {
-      uploadVoiceRecording(asyncMessagesMultiSendEnabled);
+      uploadVoiceRecording(audioRecordingSendOnComplete);
     } else {
       resetAudioRecording();
     }
@@ -263,7 +263,7 @@ export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
     asyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     startVoiceRecording,
     deleteVoiceRecording,
     uploadVoiceRecording,
@@ -281,7 +281,7 @@ export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
         asyncMessagesMinimumPressDuration,
         asyncMessagesSlideToCancelDistance,
         asyncMessagesLockDistance,
-        asyncMessagesMultiSendEnabled,
+        audioRecordingSendOnComplete,
         startVoiceRecording,
         deleteVoiceRecording,
         uploadVoiceRecording,

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

@@ -9,7 +9,7 @@ import {
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Mic } from '../../../../icons/Mic';
+import { Mic } from '../../../../icons/voice';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
 

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

@@ -4,9 +4,9 @@ import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 import Animated, { LinearTransition } from 'react-native-reanimated';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { ChevronTop } from '../../../../icons/ChevronTop';
-import { Lock } from '../../../../icons/Lock';
-import { Unlock } from '../../../../icons/Unlock';
+import { ChevronUp } from '../../../../icons/chevron-up';
+import { Lock } from '../../../../icons/lock';
+import { Unlock } from '../../../../icons/unlock';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
 
@@ -69,7 +69,7 @@ export const AudioRecordingLockIndicator = ({
         <Unlock stroke={semantics.textPrimary} height={20} width={20} {...lockIcon} />
       )}
       {!micLocked && (
-        <ChevronTop stroke={semantics.textPrimary} height={20} width={20} {...arrowUpIcon} />
+        <ChevronUp stroke={semantics.textPrimary} height={20} width={20} {...arrowUpIcon} />
       )}
     </Animated.View>
   );

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 
 import dayjs from 'dayjs';
 
@@ -9,17 +9,27 @@ import { useStableCallback } from '../../../../hooks';
 import { useAudioPlayer } from '../../../../hooks/useAudioPlayer';
 import { useStateStore } from '../../../../hooks/useStateStore';
 
-import { Pause } from '../../../../icons/Pause';
-import { Play } from '../../../../icons/Play';
-import { NativeHandlers } from '../../../../native';
+import { Pause } from '../../../../icons/pause-fill';
+import { Play } from '../../../../icons/play-fill';
 import { AudioPlayerState } from '../../../../state-store/audio-player';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
+import { StableDurationLabel } from '../../../ProgressControl/StableDurationLabel';
 import { WaveProgressBar } from '../../../ProgressControl/WaveProgressBar';
 
 const ONE_SECOND_IN_MILLISECONDS = 1000;
 const ONE_HOUR_IN_MILLISECONDS = 3600 * 1000;
 
+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');
+};
+
 const audioPlayerSelector = (state: AudioPlayerState) => ({
   duration: state.duration,
   isPlaying: state.isPlaying,
@@ -52,8 +62,8 @@ export const AudioRecordingPreview = () => {
   const audioPlayer = useAudioPlayer({
     duration: recordingDuration / ONE_SECOND_IN_MILLISECONDS,
     mimeType: 'audio/aac',
-    // This is a temporary flag to manage audio player for voice recording in preview as the one in message list uses react-native-video.
-    previewVoiceRecording: !(NativeHandlers.SDK === 'stream-chat-expo'),
+    // The preview still uses the recorder-backed player until both playback paths are unified.
+    previewVoiceRecording: false,
     type: 'voiceRecording',
     uri,
   });
@@ -91,13 +101,10 @@ export const AudioRecordingPreview = () => {
     audioPlayer.toggle();
   };
 
+  const maxDurationLabel = useMemo(() => getAudioDurationLabel(duration), [duration]);
+
   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'),
+    () => getAudioDurationLabel(position || duration),
     [duration, position],
   );
 
@@ -108,7 +115,6 @@ export const AudioRecordingPreview = () => {
   const dragEnd = useStableCallback(async (currentProgress: number) => {
     const positionInSeconds = (currentProgress * duration) / ONE_SECOND_IN_MILLISECONDS;
     await audioPlayer.seek(positionInSeconds);
-    audioPlayer.play();
   });
 
   return (
@@ -122,15 +128,15 @@ export const AudioRecordingPreview = () => {
           )}
         </Pressable>
         {/* `durationMillis` is for Expo apps, `currentPosition` is for Native CLI apps. */}
-        <Text
-          style={[
-            styles.durationText,
-            currentTime,
-            { color: isPlaying ? semantics.accentPrimary : semantics.textPrimary },
-          ]}
-        >
-          {progressDuration}
-        </Text>
+        <StableDurationLabel
+          accessibilityLabel='Progress Duration'
+          reserveLabel={maxDurationLabel}
+          label={progressDuration}
+          style={[styles.durationText, currentTime]}
+          visibleStyle={{
+            color: isPlaying ? semantics.accentPrimary : semantics.textPrimary,
+          }}
+        />
       </View>
       <View style={[styles.progressBar, progressBar]}>
         {/* Since the progress is in range 0-1 we convert it in terms of 100% */}
@@ -160,6 +166,7 @@ const useStyles = () => {
           gap: primitives.spacingMd,
         },
         durationText: {
+          fontVariant: ['tabular-nums'],
           fontSize: primitives.typographyFontSizeMd,
           fontWeight: primitives.typographyFontWeightSemiBold,
           lineHeight: primitives.typographyLineHeightNormal,

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

@@ -10,7 +10,7 @@ import {
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useStableCallback } from '../../../../hooks';
-import { Plus } from '../../../../icons/Plus';
+import { Plus } from '../../../../icons/plus';
 import { Button } from '../../../ui/';
 
 type AttachButtonPropsWithContext = Pick<MessageInputContextValue, 'handleAttachButtonPress'> &

package/src/components/MessageInput/components/LinkPreviewList.tsx

@@ -10,7 +10,7 @@ import { LinkPreviewsManager } from 'stream-chat';
 import { AttachmentRemoveControl } from './AttachmentPreview/AttachmentRemoveControl';
 
 import { useChatContext, useMessageComposer, useTheme } from '../../../contexts';
-import { Link } from '../../../icons/Link';
+import { Link } from '../../../icons/link';
 import { components, primitives } from '../../../theme';
 import { useLinkPreviews } from '../hooks/useLinkPreviews';
 

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

@@ -4,7 +4,7 @@ import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
-import { Tick } from '../../../../icons/Tick';
+import { Tick } from '../../../../icons/checkmark';
 import { Button } from '../../../ui';
 
 export type EditButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {

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

@@ -4,7 +4,7 @@ import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
-import { SendRight } from '../../../../icons/SendRight';
+import { SendRight } from '../../../../icons/send';
 import { Button } from '../../../ui';
 
 export type SendButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {