stream-chat-react-native-core 4.12.0-beta.1 → 4.12.0-beta.4

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -1,17 +1,24 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
+import type { Attachment } from 'stream-chat';
+
 import { Attachment as AttachmentDefault } from './Attachment';
 
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../contexts/messageContext/MessageContext';
+import {
+  MessageInputContextValue,
+  useMessageInputContext,
+} from '../../contexts/messageInputContext/MessageInputContext';
 import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { isAudioPackageAvailable } from '../../native';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
@@ -24,6 +31,7 @@ const styles = StyleSheet.create({
 export type FileAttachmentGroupPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageContextValue<StreamChatGenerics>, 'files'> &
+  Pick<MessageInputContextValue<StreamChatGenerics>, 'AudioAttachment'> &
   Pick<MessagesContextValue<StreamChatGenerics>, 'Attachment'> & {
     /**
      * The unique id for the message with file attachments
@@ -35,12 +43,73 @@ export type FileAttachmentGroupPropsWithContext<
     }>;
   };
 
+type FilesToDisplayType<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Attachment<StreamChatGenerics> & {
+  duration: number;
+  paused: boolean;
+  progress: number;
+};
+
 const FileAttachmentGroupWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { Attachment, files, messageId, styles: stylesProp = {} } = props;
+  const { Attachment, AudioAttachment, files, messageId, styles: stylesProp = {} } = props;
+  const [filesToDisplay, setFilesToDisplay] = useState<FilesToDisplayType[]>([]);
+
+  useEffect(() => {
+    setFilesToDisplay(files.map((file) => ({ ...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.
+  const onLoad = (index: string, duration: number) => {
+    setFilesToDisplay((prevFilesToDisplay) =>
+      prevFilesToDisplay.map((fileToDisplay, id) => ({
+        ...fileToDisplay,
+        duration: id.toString() === index ? duration : fileToDisplay.duration,
+      })),
+    );
+  };
+
+  // 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,
+        progress:
+          id.toString() === index
+            ? hasEnd
+              ? 1
+              : currentTime
+              ? currentTime / (fileUpload.duration as number)
+              : 0
+            : fileUpload.progress,
+      })),
+    );
+  };
+
+  // The handler which controls or sets the paused/played state of the audio.
+  const onPlayPause = (index: string, pausedStatus?: boolean) => {
+    if (pausedStatus === false) {
+      // If the status is false we set the audio with the index as playing and the others as paused.
+      setFilesToDisplay((prevFileUploads) =>
+        prevFileUploads.map((fileUpload, id) => ({
+          ...fileUpload,
+          paused: id.toString() === index ? false : true,
+        })),
+      );
+    } else {
+      // If the status is true we simply set all the audio's paused state as true.
+      setFilesToDisplay((prevFileUploads) =>
+        prevFileUploads.map((fileUpload) => ({
+          ...fileUpload,
+          paused: true,
+        })),
+      );
+    }
+  };
 
   const {
     theme: {
@@ -52,7 +121,7 @@ const FileAttachmentGroupWithContext = <
 
   return (
     <View style={[styles.container, container, stylesProp.container]}>
-      {files.map((file, index) => (
+      {filesToDisplay.map((file, index) => (
         <View
           key={`${messageId}-${index}`}
           style={[
@@ -60,7 +129,26 @@ const FileAttachmentGroupWithContext = <
             stylesProp.attachmentContainer,
           ]}
         >
-          <Attachment attachment={file} />
+          {file.type === 'audio' && isAudioPackageAvailable() ? (
+            <View accessibilityLabel='audio-attachment-preview'>
+              <AudioAttachment
+                index={index}
+                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>
+          ) : (
+            <Attachment attachment={file} />
+          )}
         </View>
       ))}
     </View>
@@ -74,9 +162,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const { files: prevFiles } = prevProps;
   const { files: nextFiles } = nextProps;
 
-  const filesEqual = prevFiles.length === nextFiles.length;
-
-  return filesEqual;
+  return prevFiles.length === nextFiles.length;
 };
 
 const MemoizedFileAttachmentGroup = React.memo(
@@ -100,6 +186,8 @@ export const FileAttachmentGroup = <
 
   const { Attachment = AttachmentDefault } = useMessagesContext<StreamChatGenerics>();
 
+  const { AudioAttachment } = useMessageInputContext<StreamChatGenerics>();
+
   const files = propFiles || contextFiles;
 
   if (!files.length) return null;
@@ -108,6 +196,7 @@ export const FileAttachmentGroup = <
     <MemoizedFileAttachmentGroup
       {...{
         Attachment,
+        AudioAttachment,
         files,
         messageId,
       }}

package/src/components/Attachment/Gallery.tsx

@@ -62,6 +62,12 @@ const styles = StyleSheet.create({
     left: 4,
     position: 'absolute',
   },
+  imageLoadingIndicatorContainer: {
+    height: '100%',
+    justifyContent: 'center',
+    position: 'absolute',
+    width: '100%',
+  },
   imageLoadingIndicatorStyle: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -490,7 +496,7 @@ const GalleryImageThumbnail = <
             uri={thumbnail.url}
           />
           {isLoadingImage && (
-            <View style={{ position: 'absolute' }}>
+            <View style={[styles.imageLoadingIndicatorContainer]}>
               <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
             </View>
           )}

package/src/components/Attachment/VideoThumbnail.tsx

@@ -40,6 +40,7 @@ export type VideoThumbnailProps = {
 export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
   const {
     theme: {
+      colors: { static_black, static_white },
       messageSimple: {
         videoThumbnail: { container, roundedView },
       },
@@ -53,8 +54,8 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
       source={{ uri: thumb_url }}
       style={[styles.container, container, style]}
     >
-      <View style={[styles.roundedView, roundedView]}>
-        <Play height={24} pathFill={'#000'} width={24} />
+      <View style={[styles.roundedView, roundedView, { backgroundColor: static_white }]}>
+        <Play height={24} pathFill={static_black} width={24} />
       </View>
     </ImageBackground>
   );

package/src/components/Channel/Channel.tsx

@@ -76,6 +76,7 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import { generateRandomId, MessageStatusTypes, ReactionData } from '../../utils/utils';
 import { Attachment as AttachmentDefault } from '../Attachment/Attachment';
 import { AttachmentActions as AttachmentActionsDefault } from '../Attachment/AttachmentActions';
+import { AudioAttachment as AudioAttachmentDefault } from '../Attachment/AudioAttachment';
 import { Card as CardDefault } from '../Attachment/Card';
 import { FileAttachment as FileAttachmentDefault } from '../Attachment/FileAttachment';
 import { FileAttachmentGroup as FileAttachmentGroupDefault } from '../Attachment/FileAttachmentGroup';
@@ -107,7 +108,6 @@ import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/
 import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/MessageStatus';
 import { ReactionList as ReactionListDefault } from '../Message/MessageSimple/ReactionList';
 import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
-import { AudioAttachmentUploadPreview as AudioAttachmentUploadPreviewDefault } from '../MessageInput/AudioAttachmentUploadPreview';
 import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
 import { InputEditingStateHeader as InputEditingStateHeaderDefault } from '../MessageInput/components/InputEditingStateHeader';
 import { InputGiphySearch as InputGiphyCommandInputDefault } from '../MessageInput/components/InputGiphySearch';
@@ -399,7 +399,7 @@ const ChannelWithContext = <
     AttachButton = AttachButtonDefault,
     Attachment = AttachmentDefault,
     AttachmentActions = AttachmentActionsDefault,
-    AudioAttachmentUploadPreview = AudioAttachmentUploadPreviewDefault,
+    AudioAttachment = AudioAttachmentDefault,
     AutoCompleteSuggestionHeader = AutoCompleteSuggestionHeaderDefault,
     AutoCompleteSuggestionItem = AutoCompleteSuggestionItemDefault,
     AutoCompleteSuggestionList = AutoCompleteSuggestionListDefault,
@@ -1620,7 +1620,7 @@ const ChannelWithContext = <
   const inputMessageInputContext = useCreateInputMessageInputContext<StreamChatGenerics>({
     additionalTextInputProps,
     AttachButton,
-    AudioAttachmentUploadPreview,
+    AudioAttachment,
     autoCompleteSuggestionsLimit,
     autoCompleteTriggerSettings,
     channelId,

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

@@ -8,7 +8,7 @@ export const useCreateInputMessageInputContext = <
 >({
   additionalTextInputProps,
   AttachButton,
-  AudioAttachmentUploadPreview,
+  AudioAttachment,
   autoCompleteSuggestionsLimit,
   autoCompleteTriggerSettings,
   channelId,
@@ -65,7 +65,7 @@ export const useCreateInputMessageInputContext = <
     () => ({
       additionalTextInputProps,
       AttachButton,
-      AudioAttachmentUploadPreview,
+      AudioAttachment,
       autoCompleteSuggestionsLimit,
       autoCompleteTriggerSettings,
       clearEditingState,

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

@@ -53,7 +53,7 @@ export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlPr
 
     const {
       theme: {
-        colors: { black, white_snow },
+        colors: { static_black, static_white },
         imageGallery: {
           videoControl: { durationTextStyle, roundedView, videoContainer },
         },
@@ -68,23 +68,28 @@ export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlPr
             onPlayPause();
           }}
         >
-          <View style={[styles.roundedView, roundedView, { backgroundColor: white_snow }]}>
+          <View style={[styles.roundedView, roundedView, { backgroundColor: static_white }]}>
             {paused ? (
-              <Play accessibilityLabel='Play Icon' height={24} pathFill={black} width={24} />
+              <Play accessibilityLabel='Play Icon' height={24} pathFill={static_black} width={24} />
             ) : (
-              <Pause accessibilityLabel='Pause Icon' height={24} width={24} />
+              <Pause
+                accessibilityLabel='Pause Icon'
+                height={24}
+                pathFill={static_black}
+                width={24}
+              />
             )}
           </View>
         </TouchableOpacity>
         <Text
           accessibilityLabel='Progress Duration'
-          style={[styles.durationTextStyle, durationTextStyle, { color: white_snow }]}
+          style={[styles.durationTextStyle, durationTextStyle, { color: static_white }]}
         >
           {progressDuration ? progressDuration : '00:00'}
         </Text>
         <ProgressControl
           duration={duration}
-          filledColor={white_snow}
+          filledColor={static_white}
           onPlayPause={onPlayPause}
           onProgressDrag={onProgressDrag}
           progress={progress}
@@ -93,7 +98,7 @@ export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlPr
         />
         <Text
           accessibilityLabel='Video Duration'
-          style={[styles.durationTextStyle, durationTextStyle, { color: white_snow }]}
+          style={[styles.durationTextStyle, durationTextStyle, { color: static_white }]}
         >
           {videoDuration ? videoDuration : '00:00'}
         </Text>

package/src/components/Message/MessageSimple/__tests__/MessageContent.test.js

@@ -196,13 +196,15 @@ describe('MessageContent', () => {
       user,
     });
 
-    const { getByTestId, queryAllByTestId } = renderMessage({ message });
+    const { getByTestId, queryAllByA11yLabel, queryAllByTestId } = renderMessage({ message });
 
     const fileAttachments = queryAllByTestId('file-attachment');
+    const audioAttachments = queryAllByA11yLabel('audio-attachment-preview');
 
     await waitFor(() => {
       expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(fileAttachments).toHaveLength(2);
+      expect(fileAttachments).toHaveLength(1);
+      expect(audioAttachments).toHaveLength(1);
     });
   });
 

package/src/components/Message/MessageSimple/utils/parseLinks.test.ts

@@ -22,6 +22,10 @@ describe('parseLinksFromText', () => {
     ],
     ['127.0.0.1/local_(development)_server', '127.0.0.1/local_(development)_server'],
     ['https://a.co:8999/ab.php?p=12', 'a.co:8999/ab.php?p=12'],
+    [
+      'http://help.apple.com/xcode/mac/current/#/devba7f53ad4',
+      'help.apple.com/xcode/mac/current/#/devba7f53ad4',
+    ],
   ])('Returns the encoded value of %p as %p', (link, expected) => {
     const result = parseLinksFromText(link);
 

package/src/components/Message/MessageSimple/utils/parseLinks.ts

@@ -11,7 +11,7 @@ const schema = `(\\w{2,15}:\\/\\/)`;
 // something.tld OR 123.123.123.123
 const domain = `((?:\\w+\\.[a-zA-Z]+)+(?:[^:\\/\\s]+)|(?:\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}))`;
 const port = `(:[0-9]{1,5})`;
-const path = `((?:\\/)?[^?#\\s]+)`;
+const path = `((?:\\/)?[^?\\s]+)`;
 const queryString = `(\\?[^#\\s]+)`;
 const fragment = `(#[\\w_-]+)`;
 

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -123,7 +123,7 @@ type FileUploadPreviewPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
   MessageInputContextValue<StreamChatGenerics>,
-  'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads' | 'AudioAttachmentUploadPreview'
+  'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads' | 'AudioAttachment'
 > &
   Pick<MessagesContextValue<StreamChatGenerics>, 'FileAttachmentIcon'>;
 
@@ -133,7 +133,7 @@ const FileUploadPreviewWithContext = <
   props: FileUploadPreviewPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
-    AudioAttachmentUploadPreview,
+    AudioAttachment,
     FileAttachmentIcon,
     fileUploads,
     removeFile,
@@ -172,8 +172,8 @@ const FileUploadPreviewWithContext = <
   };
 
   // The handler which controls or sets the paused/played state of the audio.
-  const onPlayPause = (index: string, status?: boolean) => {
-    if (status === false) {
+  const onPlayPause = (index: string, pausedStatus?: boolean) => {
+    if (pausedStatus === false) {
       // If the status is false we set the audio with the index as playing and the others as paused.
       setFileUploads((prevFileUploads) =>
         prevFileUploads.map((fileUpload) => ({
@@ -230,7 +230,7 @@ const FileUploadPreviewWithContext = <
                 audioAttachmentFileContainer,
               ]}
             >
-              <AudioAttachmentUploadPreview
+              <AudioAttachment
                 index={index}
                 item={item}
                 onLoad={onLoad}
@@ -296,18 +296,9 @@ const FileUploadPreviewWithContext = <
             style={[styles.dismiss, { backgroundColor: grey_gainsboro }, dismiss]}
             testID='remove-file-upload-preview'
           >
-            <Close />
+            <Close pathFill={grey_dark} />
           </TouchableOpacity>
         </UploadProgressIndicator>
-        <TouchableOpacity
-          onPress={() => {
-            removeFile(item.id);
-          }}
-          style={[styles.dismiss, { backgroundColor: grey_gainsboro }, dismiss]}
-          testID='remove-file-upload-preview'
-        >
-          <Close pathFill={grey_dark} />
-        </TouchableOpacity>
       </>
     );
   };
@@ -380,14 +371,14 @@ export const FileUploadPreview = <
 >(
   props: FileUploadPreviewProps<StreamChatGenerics>,
 ) => {
-  const { AudioAttachmentUploadPreview, fileUploads, removeFile, setFileUploads, uploadFile } =
+  const { AudioAttachment, fileUploads, removeFile, setFileUploads, uploadFile } =
     useMessageInputContext<StreamChatGenerics>();
   const { FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();
 
   return (
     <MemoizedFileUploadPreview
       {...{
-        AudioAttachmentUploadPreview,
+        AudioAttachment,
         FileAttachmentIcon,
         fileUploads,
         removeFile,

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

@@ -9,10 +9,7 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 
 import { generateFileUploadPreview } from '../../../mock-builders/generator/attachment';
-import {
-  AudioAttachmentUploadPreview,
-  AudioAttachmentUploadPreviewProps,
-} from '../AudioAttachmentUploadPreview';
+import { AudioAttachment, AudioAttachmentProps } from '../../Attachment/AudioAttachment';
 
 jest.mock('../../../native.ts', () => ({
   isAudioPackageAvailable: jest.fn(() => true),
@@ -29,13 +26,13 @@ jest.mock('react-native/Libraries/ReactNative/I18nManager', () => ({
   isRTL: true,
 }));
 
-const getComponent = (props: Partial<AudioAttachmentUploadPreviewProps>) => (
+const getComponent = (props: Partial<AudioAttachmentProps>) => (
   <ThemeProvider theme={defaultTheme}>
-    <AudioAttachmentUploadPreview {...(props as unknown as AudioAttachmentUploadPreviewProps)} />,
+    <AudioAttachment {...(props as unknown as AudioAttachmentProps)} />,
   </ThemeProvider>
 );
 
-describe('AudioAttachmentUploadPreviewExpo', () => {
+describe('AudioAttachmentExpo', () => {
   it('handle play pause button when isPausedStatusAvailable unavailable and progress 1', () => {
     const setPositionAsyncMock = jest.fn();
     jest.spyOn(React, 'useRef').mockReturnValue({

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

@@ -9,10 +9,7 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 
 import { generateFileUploadPreview } from '../../../mock-builders/generator/attachment';
-import {
-  AudioAttachmentUploadPreview,
-  AudioAttachmentUploadPreviewProps,
-} from '../AudioAttachmentUploadPreview';
+import { AudioAttachment, AudioAttachmentProps } from '../../Attachment/AudioAttachment';
 
 jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
@@ -28,13 +25,13 @@ jest.mock('../../../native.ts', () => {
   };
 });
 
-const getComponent = (props: Partial<AudioAttachmentUploadPreviewProps>) => (
+const getComponent = (props: Partial<AudioAttachmentProps>) => (
   <ThemeProvider theme={defaultTheme}>
-    <AudioAttachmentUploadPreview {...(props as unknown as AudioAttachmentUploadPreviewProps)} />,
+    <AudioAttachment {...(props as unknown as AudioAttachmentProps)} />,
   </ThemeProvider>
 );
 
-describe('AudioAttachmentUploadPreview', () => {
+describe('AudioAttachment', () => {
   it('handle play pause button when isPausedStatusAvailable unavailable and progress 1', () => {
     const seekMock = jest.fn();
     jest.spyOn(React, 'useRef').mockReturnValue({

package/src/components/MessageInput/__tests__/FileUploadPreview.test.js

@@ -351,13 +351,13 @@ describe('FileUploadPreview', () => {
       </OverlayProvider>,
     );
 
-    const audioAttachmentUploadPreviewComponent = getByTestId('audio-attachment-upload-preview');
+    const AudioAttachmentComponent = getByTestId('audio-attachment-upload-preview');
 
     await waitFor(() => {
-      fireEvent(audioAttachmentUploadPreviewComponent, 'onLoad');
-      fireEvent(audioAttachmentUploadPreviewComponent, 'onProgress');
-      fireEvent(audioAttachmentUploadPreviewComponent, 'onPlayPause');
-      fireEvent(audioAttachmentUploadPreviewComponent, 'onPlayPause', {
+      fireEvent(AudioAttachmentComponent, 'onLoad');
+      fireEvent(AudioAttachmentComponent, 'onProgress');
+      fireEvent(AudioAttachmentComponent, 'onPlayPause');
+      fireEvent(AudioAttachmentComponent, 'onPlayPause', {
         status: false,
       });
     });

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './Attachment/Attachment';
 export * from './Attachment/AttachmentActions';
+export * from './Attachment/AudioAttachment';
 export * from './Attachment/Card';
 export * from './Attachment/FileAttachment';
 export * from './Attachment/FileAttachmentGroup';
@@ -113,7 +114,6 @@ export * from './MessageInput/AttachButton';
 export * from './MessageInput/CommandsButton';
 export * from './MessageInput/CooldownTimer';
 export * from './MessageInput/FileUploadPreview';
-export * from './MessageInput/AudioAttachmentUploadPreview';
 export * from './MessageInput/ImageUploadPreview';
 export * from './MessageInput/InputButtons';
 export * from './MessageInput/MessageInput';

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -21,8 +21,8 @@ import {
 import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
 import { isEditingBoolean, useMessageDetailsForState } from './hooks/useMessageDetailsForState';
 
+import type { AudioAttachmentProps } from '../../components/Attachment/AudioAttachment';
 import type { AttachButtonProps } from '../../components/MessageInput/AttachButton';
-import type { AudioAttachmentUploadPreviewProps } from '../../components/MessageInput/AudioAttachmentUploadPreview';
 import type { CommandsButtonProps } from '../../components/MessageInput/CommandsButton';
 import type { InputEditingStateHeaderProps } from '../../components/MessageInput/components/InputEditingStateHeader';
 import type { InputGiphySearchProps } from '../../components/MessageInput/components/InputGiphySearch';
@@ -225,10 +225,8 @@ export type InputMessageInputContextValue<
    */
   AttachButton: React.ComponentType<AttachButtonProps<StreamChatGenerics>>;
 
-  /** Custom UI component for AudioAttachmentUploadPreview. */
-  AudioAttachmentUploadPreview: React.ComponentType<
-    AudioAttachmentUploadPreviewProps<StreamChatGenerics>
-  >;
+  /** Custom UI component for AudioAttachment. */
+  AudioAttachment: React.ComponentType<AudioAttachmentProps<StreamChatGenerics>>;
 
   clearEditingState: () => void;
   clearQuotedMessageState: () => void;

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -12,7 +12,7 @@ export const useCreateMessageInputContext = <
   asyncIds,
   asyncUploads,
   AttachButton,
-  AudioAttachmentUploadPreview,
+  AudioAttachment,
   autoCompleteSuggestionsLimit,
   clearEditingState,
   clearQuotedMessageState,
@@ -116,7 +116,7 @@ export const useCreateMessageInputContext = <
       asyncIds,
       asyncUploads,
       AttachButton,
-      AudioAttachmentUploadPreview,
+      AudioAttachment,
       autoCompleteSuggestionsLimit,
       clearEditingState,
       clearQuotedMessageState,

package/src/contexts/themeContext/utils/theme.ts

@@ -247,12 +247,12 @@ export type Theme = {
       editingBoxHeaderTitle: TextStyle;
     };
     fileUploadPreview: {
-      audioAttachmentFileContainer: ViewStyle;
-      audioAttachmentUploadPreview: {
+      audioAttachment: {
         progressControlView: ViewStyle;
         progressDurationText: TextStyle;
         roundedView: ViewStyle;
       };
+      audioAttachmentFileContainer: ViewStyle;
       dismiss: ViewStyle;
       fileContainer: ViewStyle;
       fileContentContainer: ViewStyle;
@@ -746,12 +746,12 @@ export const defaultTheme: Theme = {
       editingBoxHeaderTitle: {},
     },
     fileUploadPreview: {
-      audioAttachmentFileContainer: {},
-      audioAttachmentUploadPreview: {
+      audioAttachment: {
         progressControlView: {},
         progressDurationText: {},
         roundedView: {},
       },
+      audioAttachmentFileContainer: {},
       dismiss: {},
       fileContainer: {},
       fileContentContainer: {},

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.12.0-beta.1"
+  "version": "4.12.0-beta.4"
 }