stream-chat-react-native-core 5.28.1 → 5.29.0

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -19,23 +19,6 @@ import { isAudioPackageAvailable } from '../../native';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
-const FILE_PREVIEW_HEIGHT = 60;
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 4,
-  },
-  fileContainer: {
-    borderRadius: 12,
-    borderWidth: 1,
-    flexDirection: 'row',
-    height: FILE_PREVIEW_HEIGHT,
-    justifyContent: 'space-between',
-    paddingLeft: 8,
-    paddingRight: 8,
-  },
-});
-
 export type FileAttachmentGroupPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageContextValue<StreamChatGenerics>, 'files'> &
@@ -67,7 +50,9 @@ const FileAttachmentGroupWithContext = <
   const [filesToDisplay, setFilesToDisplay] = useState<FilesToDisplayType[]>([]);
 
   useEffect(() => {
-    setFilesToDisplay(files.map((file) => ({ ...file, duration: 0, paused: true, progress: 0 })));
+    setFilesToDisplay(
+      files.map((file) => ({ ...file, duration: file.duration || 0, paused: true, progress: 0 })),
+    );
   }, [files]);
 
   // Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here and the duration is set.
@@ -82,17 +67,17 @@ const FileAttachmentGroupWithContext = <
 
   // The handler which is triggered when the audio progresses/ the thumb is dragged in the progress control. The progressed duration is set here.
   const onProgress = (index: string, currentTime?: number, hasEnd?: boolean) => {
-    setFilesToDisplay((prevFileUploads) =>
-      prevFileUploads.map((fileUpload, id) => ({
-        ...fileUpload,
+    setFilesToDisplay((prevFilesToDisplay) =>
+      prevFilesToDisplay.map((filesToDisplay, id) => ({
+        ...filesToDisplay,
         progress:
           id.toString() === index
             ? hasEnd
               ? 1
               : currentTime
-              ? currentTime / (fileUpload.duration as number)
+              ? currentTime / (filesToDisplay.duration as number)
               : 0
-            : fileUpload.progress,
+            : filesToDisplay.progress,
       })),
     );
   };
@@ -120,9 +105,8 @@ const FileAttachmentGroupWithContext = <
 
   const {
     theme: {
-      colors: { grey_whisper, white },
       messageSimple: {
-        fileAttachmentGroup: { container },
+        fileAttachmentGroup: { attachmentContainer, container },
       },
     },
   } = useTheme();
@@ -135,39 +119,29 @@ const FileAttachmentGroupWithContext = <
           style={[
             { paddingBottom: index !== files.length - 1 ? 4 : 0 },
             stylesProp.attachmentContainer,
+            attachmentContainer,
           ]}
         >
-          {file.type === 'audio' && isAudioPackageAvailable() ? (
-            <View
-              accessibilityLabel='audio-attachment-preview'
-              style={[
-                styles.fileContainer,
-                index === filesToDisplay.length - 1
-                  ? {
-                      marginBottom: 0,
-                    }
-                  : {},
-                {
-                  backgroundColor: white,
-                  borderColor: grey_whisper,
-                  width: -16,
+          {(file.type === 'audio' || file.type === 'voiceRecording') &&
+          isAudioPackageAvailable() ? (
+            <AudioAttachment
+              item={{
+                duration: file.duration,
+                file: {
+                  name: file.title as string,
+                  uri: file.asset_url,
+                  waveform_data: file.waveform_data,
                 },
-              ]}
-            >
-              <AudioAttachment
-                item={{
-                  duration: file.duration,
-                  file: { name: file.title as string, uri: file.asset_url },
-                  id: index.toString(),
-                  paused: file.paused,
-                  progress: file.progress,
-                }}
-                onLoad={onLoad}
-                onPlayPause={onPlayPause}
-                onProgress={onProgress}
-                testID='audio-attachment-preview'
-              />
-            </View>
+                id: index.toString(),
+                paused: file.paused,
+                progress: file.progress,
+              }}
+              onLoad={onLoad}
+              onPlayPause={onPlayPause}
+              onProgress={onProgress}
+              showSpeedSettings={true}
+              testID='audio-attachment-preview'
+            />
           ) : (
             <Attachment attachment={file} />
           )}
@@ -225,4 +199,10 @@ export const FileAttachmentGroup = <
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    padding: 4,
+  },
+});
+
 FileAttachmentGroup.displayName = 'FileAttachmentGroup{messageSimple{fileAttachmentGroup}}';

package/src/components/Attachment/VideoThumbnail.tsx

@@ -55,7 +55,7 @@ export const VideoThumbnail = (props: VideoThumbnailProps) => {
       style={[styles.container, container, style]}
     >
       <View style={[styles.roundedView, roundedView, { backgroundColor: static_white }]}>
-        <Play height={24} pathFill={static_black} width={24} />
+        <Play fill={static_black} height={32} width={32} />
       </View>
     </ImageBackground>
   );

package/src/components/Channel/Channel.tsx

@@ -128,6 +128,12 @@ import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/
 import { ReactionList as ReactionListDefault } from '../Message/MessageSimple/ReactionList';
 import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
 import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
+import { AudioRecorder as AudioRecorderDefault } from '../MessageInput/components/AudioRecorder/AudioRecorder';
+import { AudioRecordingButton as AudioRecordingButtonDefault } from '../MessageInput/components/AudioRecorder/AudioRecordingButton';
+import { AudioRecordingInProgress as AudioRecordingInProgressDefault } from '../MessageInput/components/AudioRecorder/AudioRecordingInProgress';
+import { AudioRecordingLockIndicator as AudioRecordingLockIndicatorDefault } from '../MessageInput/components/AudioRecorder/AudioRecordingLockIndicator';
+import { AudioRecordingPreview as AudioRecordingPreviewDefault } from '../MessageInput/components/AudioRecorder/AudioRecordingPreview';
+import { AudioRecordingWaveform as AudioRecordingWaveformDefault } from '../MessageInput/components/AudioRecorder/AudioRecordingWaveform';
 import { InputEditingStateHeader as InputEditingStateHeaderDefault } from '../MessageInput/components/InputEditingStateHeader';
 import { InputGiphySearch as InputGiphyCommandInputDefault } from '../MessageInput/components/InputGiphySearch';
 import { InputReplyStateHeader as InputReplyStateHeaderDefault } from '../MessageInput/components/InputReplyStateHeader';
@@ -411,10 +417,21 @@ const ChannelWithContext = <
     additionalTextInputProps,
     additionalTouchableProps,
     allowThreadMessagesInChannel = true,
+    asyncMessagesLockDistance = 50,
+    asyncMessagesMinimumPressDuration = 500,
+    asyncMessagesMultiSendEnabled = true,
+    asyncMessagesSlideToCancelDistance = 100,
     AttachButton = AttachButtonDefault,
     Attachment = AttachmentDefault,
     AttachmentActions = AttachmentActionsDefault,
     AudioAttachment = AudioAttachmentDefault,
+    AudioAttachmentUploadPreview = AudioAttachmentDefault,
+    AudioRecorder = AudioRecorderDefault,
+    audioRecordingEnabled = false,
+    AudioRecordingInProgress = AudioRecordingInProgressDefault,
+    AudioRecordingLockIndicator = AudioRecordingLockIndicatorDefault,
+    AudioRecordingPreview = AudioRecordingPreviewDefault,
+    AudioRecordingWaveform = AudioRecordingWaveformDefault,
     AutoCompleteSuggestionHeader = AutoCompleteSuggestionHeaderDefault,
     AutoCompleteSuggestionItem = AutoCompleteSuggestionItemDefault,
     AutoCompleteSuggestionList = AutoCompleteSuggestionListDefault,
@@ -552,6 +569,7 @@ const ChannelWithContext = <
     setWatchers,
     shouldSyncChannel,
     ShowThreadMessageInChannelButton = ShowThreadMessageInChannelButtonDefault,
+    StartAudioRecordingButton = AudioRecordingButtonDefault,
     stateUpdateThrottleInterval = defaultThrottleInterval,
     StickyHeader,
     supportedReactions = reactionData,
@@ -1575,6 +1593,7 @@ const ChannelWithContext = <
         if (
           (attachment.type === 'file' ||
             attachment.type === 'audio' ||
+            attachment.type === 'voiceRecording' ||
             attachment.type === 'video') &&
           attachment.asset_url &&
           isLocalUrl(attachment.asset_url) &&
@@ -1593,6 +1612,7 @@ const ChannelWithContext = <
           if (response.thumb_url) {
             attachment.thumb_url = response.thumb_url;
           }
+
           delete attachment.originalFile;
           dbApi.updateMessage({
             message: { ...updatedMessage, cid: channel.cid },
@@ -2183,7 +2203,18 @@ const ChannelWithContext = <
 
   const inputMessageInputContext = useCreateInputMessageInputContext<StreamChatGenerics>({
     additionalTextInputProps,
+    asyncMessagesLockDistance,
+    asyncMessagesMinimumPressDuration,
+    asyncMessagesMultiSendEnabled,
+    asyncMessagesSlideToCancelDistance,
     AttachButton,
+    AudioAttachmentUploadPreview,
+    AudioRecorder,
+    audioRecordingEnabled,
+    AudioRecordingInProgress,
+    AudioRecordingLockIndicator,
+    AudioRecordingPreview,
+    AudioRecordingWaveform,
     autoCompleteSuggestionsLimit,
     autoCompleteTriggerSettings,
     channelId,
@@ -2224,6 +2255,7 @@ const ChannelWithContext = <
     setInputRef,
     setQuotedMessageState,
     ShowThreadMessageInChannelButton,
+    StartAudioRecordingButton,
     UploadProgressIndicator,
   });
 

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

@@ -7,7 +7,18 @@ export const useCreateInputMessageInputContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   additionalTextInputProps,
+  asyncMessagesLockDistance,
+  asyncMessagesMinimumPressDuration,
+  asyncMessagesMultiSendEnabled,
+  asyncMessagesSlideToCancelDistance,
   AttachButton,
+  AudioAttachmentUploadPreview,
+  AudioRecorder,
+  audioRecordingEnabled,
+  AudioRecordingInProgress,
+  AudioRecordingLockIndicator,
+  AudioRecordingPreview,
+  AudioRecordingWaveform,
   autoCompleteSuggestionsLimit,
   autoCompleteTriggerSettings,
   channelId,
@@ -48,6 +59,7 @@ export const useCreateInputMessageInputContext = <
   setInputRef,
   setQuotedMessageState,
   ShowThreadMessageInChannelButton,
+  StartAudioRecordingButton,
   UploadProgressIndicator,
 }: InputMessageInputContextValue<StreamChatGenerics> & {
   /**
@@ -65,7 +77,18 @@ export const useCreateInputMessageInputContext = <
   const inputMessageInputContext: InputMessageInputContextValue<StreamChatGenerics> = useMemo(
     () => ({
       additionalTextInputProps,
+      asyncMessagesLockDistance,
+      asyncMessagesMinimumPressDuration,
+      asyncMessagesMultiSendEnabled,
+      asyncMessagesSlideToCancelDistance,
       AttachButton,
+      AudioAttachmentUploadPreview,
+      AudioRecorder,
+      audioRecordingEnabled,
+      AudioRecordingInProgress,
+      AudioRecordingLockIndicator,
+      AudioRecordingPreview,
+      AudioRecordingWaveform,
       autoCompleteSuggestionsLimit,
       autoCompleteTriggerSettings,
       clearEditingState,
@@ -105,6 +128,7 @@ export const useCreateInputMessageInputContext = <
       setInputRef,
       setQuotedMessageState,
       ShowThreadMessageInChannelButton,
+      StartAudioRecordingButton,
       UploadProgressIndicator,
     }),
     [

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

@@ -209,7 +209,7 @@ describe('ImageGallery', () => {
 
     const progressDurationComponent = screen.getByLabelText('Progress Duration');
     await waitFor(() => {
-      expect(screen.getByLabelText('Play Icon')).not.toBeUndefined();
+      expect(screen.queryAllByLabelText('Play Icon').length).toBeGreaterThan(0);
       expect(progressDurationComponent.children[0]).toBe('00:10');
     });
   });

package/src/components/ImageGallery/__tests__/ImageGalleryVideoControl.test.tsx

@@ -42,10 +42,10 @@ describe('ImageGalleryOverlay', () => {
   it('should render the play icon when paused prop is true', async () => {
     render(getComponent({ paused: true }));
 
-    const component = screen.queryByLabelText('Play Icon') as ReactTestInstance;
+    const components = screen.queryAllByLabelText('Play Icon').length;
 
     await waitFor(() => {
-      expect(component).not.toBeUndefined();
+      expect(components).toBeGreaterThan(0);
     });
   });
 

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -75,14 +75,9 @@ export const ImageGalleryVideoControl = React.memo(
         <TouchableOpacity accessibilityLabel='Play Pause Button' onPress={handlePlayPause}>
           <View style={[styles.roundedView, roundedView, { backgroundColor: static_white }]}>
             {paused ? (
-              <Play accessibilityLabel='Play Icon' height={24} pathFill={static_black} width={24} />
+              <Play accessibilityLabel='Play Icon' fill={static_black} height={32} width={32} />
             ) : (
-              <Pause
-                accessibilityLabel='Pause Icon'
-                height={24}
-                pathFill={static_black}
-                width={24}
-              />
+              <Pause accessibilityLabel='Pause Icon' fill={static_black} height={32} width={32} />
             )}
           </View>
         </TouchableOpacity>

package/src/components/Message/Message.tsx

@@ -386,7 +386,7 @@ const MessageWithContext = <
             } else if (cur.type === 'video' && !cur.og_scrape_url) {
               acc.files.push(cur);
               acc.other = []; // remove other attachments if a file exists
-            } else if (cur.type === 'audio') {
+            } else if (cur.type === 'audio' || cur.type === 'voiceRecording') {
               acc.files.push(cur);
             } else if (cur.type === 'image' && !cur.title_link && !cur.og_scrape_url) {
               /**

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

@@ -510,7 +510,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
           const attachmentKeysEqual =
             attachment.image_url === nextMessageAttachments[index].image_url &&
             attachment.og_scrape_url === nextMessageAttachments[index].og_scrape_url &&
-            attachment.thumb_url === nextMessageAttachments[index].thumb_url;
+            attachment.thumb_url === nextMessageAttachments[index].thumb_url &&
+            attachment.type === nextMessageAttachments[index].type;
 
           if (isAttachmentEqual)
             return (

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -177,7 +177,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
           const attachmentKeysEqual =
             attachment.image_url === nextMessageAttachments[index].image_url &&
             attachment.og_scrape_url === nextMessageAttachments[index].og_scrape_url &&
-            attachment.thumb_url === nextMessageAttachments[index].thumb_url;
+            attachment.thumb_url === nextMessageAttachments[index].thumb_url &&
+            attachment.type === nextMessageAttachments[index].type;
 
           return attachmentKeysEqual;
         })

package/src/components/Message/hooks/useMessageActions.tsx

@@ -196,7 +196,7 @@ export const useMessageActions = <
       }
     },
     actionType: 'deleteMessage',
-    icon: <Delete pathFill={accent_red} />,
+    icon: <Delete fill={accent_red} size={32} />,
     title: t('Delete Message'),
     titleStyle: { color: accent_red },
   };
@@ -345,7 +345,7 @@ export const useMessageActions = <
       await handleResendMessage();
     },
     actionType: 'retry',
-    icon: <SendUp pathFill={accent_blue} />,
+    icon: <SendUp fill={accent_blue} size={32} />,
     title: t('Resend'),
   };
 

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -20,7 +20,8 @@ import { Close } from '../../icons/Close';
 import { Warning } from '../../icons/Warning';
 import { isAudioPackageAvailable } from '../../native';
 import type { DefaultStreamChatGenerics, FileUpload } from '../../types/types';
-import { FileState, getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
+import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle';
+import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
 import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
 import { WritingDirectionAwareText } from '../RTLComponents/WritingDirectionAwareText';
 
@@ -40,13 +41,8 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     borderWidth: 1,
     flexDirection: 'row',
-    height: FILE_PREVIEW_HEIGHT,
-    justifyContent: 'space-between',
-    marginBottom: 8,
-    paddingLeft: 8,
-    paddingRight: 8,
+    paddingHorizontal: 8,
   },
-  fileContentContainer: { flexDirection: 'row' },
   fileIcon: {
     alignItems: 'center',
     alignSelf: 'center',
@@ -59,17 +55,17 @@ const styles = StyleSheet.create({
   },
   fileSizeText: {
     fontSize: 12,
+    marginTop: 10,
     paddingHorizontal: 10,
   },
   fileTextContainer: {
-    height: '100%',
     justifyContent: 'space-around',
+    marginVertical: 10,
   },
   flatList: { marginBottom: 12, maxHeight: FILE_PREVIEW_HEIGHT * 2.5 + 16 },
   overlay: {
     borderRadius: 12,
-    marginLeft: 8,
-    marginRight: 8,
+    marginHorizontal: 8,
     marginTop: 2,
   },
   unsupportedFile: {
@@ -140,9 +136,9 @@ type FileUploadPreviewPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
   MessageInputContextValue<StreamChatGenerics>,
-  'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads'
+  'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads' | 'AudioAttachmentUploadPreview'
 > &
-  Pick<MessagesContextValue<StreamChatGenerics>, 'AudioAttachment' | 'FileAttachmentIcon'> &
+  Pick<MessagesContextValue<StreamChatGenerics>, 'FileAttachmentIcon'> &
   Pick<ChatContextValue<StreamChatGenerics>, 'enableOfflineSupport'>;
 
 const FileUploadPreviewWithContext = <
@@ -151,7 +147,7 @@ const FileUploadPreviewWithContext = <
   props: FileUploadPreviewPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
-    AudioAttachment,
+    AudioAttachmentUploadPreview,
     enableOfflineSupport,
     FileAttachmentIcon,
     fileUploads,
@@ -163,12 +159,27 @@ const FileUploadPreviewWithContext = <
   const flatListRef = useRef<FlatList<FileUpload> | null>(null);
   const [flatListWidth, setFlatListWidth] = useState(0);
 
+  useEffect(() => {
+    setFileUploads(
+      fileUploads.map((file) => ({
+        ...file,
+        duration: file.duration || 0,
+        paused: true,
+        progress: 0,
+      })),
+    );
+  }, [fileUploads.length]);
+
   // Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here and the duration is set.
   const onLoad = (index: string, duration: number) => {
     setFileUploads((prevFileUploads) =>
       prevFileUploads.map((fileUpload) => ({
         ...fileUpload,
         duration: fileUpload.id === index ? duration : fileUpload.duration,
+        file: {
+          ...fileUpload.file,
+          duration: fileUpload.id === index ? duration : fileUpload.duration,
+        },
       })),
     );
   };
@@ -213,26 +224,16 @@ const FileUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { black, grey_dark, grey_gainsboro, grey_whisper, white },
+      colors: { black, grey_dark, grey_gainsboro, grey_whisper },
       messageInput: {
-        fileUploadPreview: {
-          audioAttachmentFileContainer,
-          dismiss,
-          fileContainer,
-          fileContentContainer,
-          filenameText,
-          fileTextContainer,
-          flatList,
-        },
+        fileUploadPreview: { dismiss, fileContainer, filenameText, fileTextContainer, flatList },
       },
     },
   } = useTheme();
 
-  const renderItem = ({ index, item }: { index: number; item: FileUpload }) => {
+  const renderItem = ({ item }: { item: FileUpload }) => {
     const indicatorType = getIndicatorTypeForFileState(item.state, enableOfflineSupport);
 
-    const lastIndexOfDot = item.file.name.lastIndexOf('.');
-
     return (
       <>
         <UploadProgressIndicator
@@ -243,85 +244,53 @@ const FileUploadPreviewWithContext = <
           type={indicatorType}
         >
           {item.file.mimeType?.startsWith('audio/') && isAudioPackageAvailable() ? (
-            <View
-              style={[
-                { marginBottom: item.state === FileState.UPLOADED ? 8 : 0 },
-                audioAttachmentFileContainer,
-              ]}
-            >
-              <View
-                style={[
-                  styles.fileContainer,
-                  index === fileUploads.length - 1
-                    ? {
-                        marginBottom: 0,
-                      }
-                    : {},
-                  {
-                    backgroundColor: white,
-                    borderColor: grey_whisper,
-                    width: -16,
-                  },
-                  fileContainer,
-                ]}
-                testID='audio-attachment-upload-preview'
-              >
-                <AudioAttachment
-                  item={item}
-                  onLoad={onLoad}
-                  onPlayPause={onPlayPause}
-                  onProgress={onProgress}
-                  testID='audio-attachment-upload-preview'
-                />
-              </View>
-            </View>
+            <AudioAttachmentUploadPreview
+              hideProgressBar={true}
+              item={item}
+              onLoad={onLoad}
+              onPlayPause={onPlayPause}
+              onProgress={onProgress}
+              testID='audio-attachment-upload-preview'
+            />
           ) : (
             <View
               style={[
                 styles.fileContainer,
-                index === fileUploads.length - 1
-                  ? {
-                      marginBottom: 0,
-                    }
-                  : {},
                 {
                   borderColor: grey_whisper,
-                  width: flatListWidth - 16,
                 },
                 fileContainer,
               ]}
             >
-              <View style={[styles.fileContentContainer, fileContentContainer]}>
-                <View style={styles.fileIcon}>
-                  <FileAttachmentIcon mimeType={item.file.mimeType} />
-                </View>
-                <View style={[styles.fileTextContainer, fileTextContainer]}>
-                  <Text
-                    numberOfLines={1}
-                    style={[
-                      styles.filenameText,
-                      {
-                        color: black,
-                        width:
-                          flatListWidth -
-                          16 - // 16 = horizontal padding
-                          40 - // 40 = file icon size
-                          24 - // 24 = close icon size
-                          24, // 24 = internal padding
-                      },
-                      I18nManager.isRTL ? { writingDirection: 'rtl' } : { writingDirection: 'ltr' },
-                      filenameText,
-                    ]}
-                  >
-                    {item.file.name.slice(0, 12) + '...' + item.file.name.slice(lastIndexOfDot)}
-                  </Text>
-                  {indicatorType !== null && (
-                    <UnsupportedFileTypeOrFileSizeIndicator
-                      indicatorType={indicatorType}
-                      item={item}
-                    />
-                  )}
-                </View>
+              <View style={styles.fileIcon}>
+                <FileAttachmentIcon mimeType={item.file.mimeType} />
+              </View>
+              <View style={[styles.fileTextContainer, fileTextContainer]}>
+                <Text
+                  numberOfLines={1}
+                  style={[
+                    styles.filenameText,
+                    {
+                      color: black,
+                      width:
+                        flatListWidth -
+                        16 - // 16 = horizontal padding
+                        40 - // 40 = file icon size
+                        24 - // 24 = close icon size
+                        24, // 24 = internal padding
+                    },
+                    I18nManager.isRTL ? { writingDirection: 'rtl' } : { writingDirection: 'ltr' },
+                    filenameText,
+                  ]}
+                >
+                  {getTrimmedAttachmentTitle(item.file.name)}
+                </Text>
+                {indicatorType !== null && (
+                  <UnsupportedFileTypeOrFileSizeIndicator
+                    indicatorType={indicatorType}
+                    item={item}
+                  />
+                )}
               </View>
             </View>
           )}
@@ -408,14 +377,14 @@ export const FileUploadPreview = <
   props: FileUploadPreviewProps<StreamChatGenerics>,
 ) => {
   const { enableOfflineSupport } = useChatContext<StreamChatGenerics>();
-  const { fileUploads, removeFile, setFileUploads, uploadFile } =
+  const { AudioAttachmentUploadPreview, fileUploads, removeFile, setFileUploads, uploadFile } =
     useMessageInputContext<StreamChatGenerics>();
-  const { AudioAttachment, FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();
+  const { FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();
 
   return (
     <MemoizedFileUploadPreview
       {...{
-        AudioAttachment,
+        AudioAttachmentUploadPreview,
         FileAttachmentIcon,
         fileUploads,
         removeFile,

package/src/components/MessageInput/InputButtons.tsx

@@ -11,7 +11,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 const styles = StyleSheet.create({
-  attachButtonContainer: { paddingRight: 10 },
+  attachButtonContainer: { paddingRight: 5 },
 });
 
 export type InputButtonsProps<
@@ -88,6 +88,7 @@ export const InputButtonsWithContext = <
     </>
   );
 };
+
 const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
   prevProps: InputButtonsWithContextProps<StreamChatGenerics>,
   nextProps: InputButtonsWithContextProps<StreamChatGenerics>,