stream-chat-react-native-core 5.0.0-offline-support.12 → 5.0.0

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -107,7 +107,7 @@ export type ImageGridType<
 > = ImageGalleryGridImageComponents<StreamChatGenerics> & {
   closeGridView: () => void;
   photos: Photo<StreamChatGenerics>[];
-  setImage: React.Dispatch<
+  setSelectedMessage: React.Dispatch<
     React.SetStateAction<
       | {
           messageId?: string | undefined;
@@ -130,7 +130,7 @@ export const ImageGrid = <
     imageComponent,
     numberOfImageGalleryGridColumns,
     photos,
-    setImage,
+    setSelectedMessage,
   } = props;
 
   const {
@@ -148,7 +148,7 @@ export const ImageGrid = <
     imageComponent,
     numberOfImageGalleryGridColumns,
     selectAndClose: () => {
-      setImage({ messageId: photo.messageId, url: photo.uri });
+      setSelectedMessage({ messageId: photo.messageId, url: photo.uri });
       closeGridView();
     },
   }));

package/src/components/ImageGallery/hooks/useImageGalleryGestures.tsx

@@ -42,6 +42,7 @@ export const useImageGalleryGestures = ({
   scale,
   screenHeight,
   screenWidth,
+  selectedIndex,
   setSelectedIndex,
   translateX,
   translateY,
@@ -57,6 +58,7 @@ export const useImageGalleryGestures = ({
   scale: SharedValue<number>;
   screenHeight: number;
   screenWidth: number;
+  selectedIndex: number;
   setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;
   translateX: SharedValue<number>;
   translateY: SharedValue<number>;
@@ -82,6 +84,20 @@ export const useImageGalleryGestures = ({
   const focalY = useSharedValue(0);
   const index = useSharedValue(0);
 
+  /**
+   * if a specific image index > 0 has been passed in
+   * while creating the hook, set the value of the index
+   * reference to its value.
+   *
+   * This makes it possible to seelct an image in the list,
+   * and scroll/pan as normal. Prior to this,
+   * it was always assumed that one started at index 0 in the
+   * gallery.
+   * */
+  if (index.value !== selectedIndex) {
+    index.value = selectedIndex;
+  }
+
   /**
    * Shared values for movement
    */

package/src/components/Message/Message.tsx

@@ -73,15 +73,23 @@ export type UrlTouchableHandlerPayload = {
   additionalInfo?: { url?: string };
 };
 
+export type FileAttachmentTouchableHandlerPayload<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  emitter: 'fileAttachment';
+  additionalInfo?: { attachment?: Attachment<StreamChatGenerics> };
+};
+
 export type TouchableHandlerPayload = {
   defaultHandler?: () => void;
   event?: GestureResponderEvent;
 } & (
   | {
-      emitter?: TouchableEmitter;
+      emitter?: Exclude<TouchableEmitter, 'textMention' | 'textLink' | 'card' | 'fileAttachment'>;
     }
   | TextMentionTouchableHandlerPayload
   | UrlTouchableHandlerPayload
+  | FileAttachmentTouchableHandlerPayload
 );
 
 export type MessageTouchableHandlerPayload<
@@ -763,7 +771,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&
     prevMessage.pinned === nextMessage.pinned &&
-    prevMessage.updated_at === nextMessage.updated_at;
+    `${prevMessage?.updated_at}` === `${nextMessage?.updated_at}`;
 
   if (!messageEqual) return false;
 

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

@@ -117,8 +117,16 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: MessageTextContainerPropsWithContext<StreamChatGenerics>,
   nextProps: MessageTextContainerPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { message: prevMessage, onlyEmojis: prevOnlyEmojis } = prevProps;
-  const { message: nextMessage, onlyEmojis: nextOnlyEmojis } = nextProps;
+  const {
+    markdownStyles: prevMarkdownStyles,
+    message: prevMessage,
+    onlyEmojis: prevOnlyEmojis,
+  } = prevProps;
+  const {
+    markdownStyles: nextMarkdownStyles,
+    message: nextMessage,
+    onlyEmojis: nextOnlyEmojis,
+  } = nextProps;
 
   const messageTextEqual = prevMessage.text === nextMessage.text;
   if (!messageTextEqual) return false;
@@ -134,6 +142,18 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
         prevMessage.mentioned_users[0].name === nextMessage.mentioned_users[0].name));
   if (!mentionedUsersEqual) return false;
 
+  // stringify could be an expensive operation, so lets rule out the obvious
+  // possibilities first such as different object reference or empty objects etc.
+  // Also keeping markdown equality check at the last to make sure other less
+  // expensive equality checks get executed first and markdown check will be skipped if returned
+  // false from previous checks.
+  const markdownStylesEqual =
+    prevMarkdownStyles === nextMarkdownStyles ||
+    (Object.keys(prevMarkdownStyles || {}).length === 0 &&
+      Object.keys(nextMarkdownStyles || {}).length === 0) ||
+    JSON.stringify(prevMarkdownStyles) === JSON.stringify(nextMarkdownStyles);
+  if (!markdownStylesEqual) return false;
+
   return true;
 };
 

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/__tests__/__snapshots__/MessageAvatar.test.js.snap

@@ -47,6 +47,7 @@ exports[`MessageAvatar should render message avatar 1`] = `
               "width": 32,
             },
             Object {
+              "backgroundColor": "#ececec",
               "borderRadius": 16,
               "height": 32,
               "width": 32,

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/Message/MessageSimple/utils/renderText.tsx

@@ -261,7 +261,7 @@ export const renderText = <
   );
 
   const customRules = {
-    link: { link },
+    link: { react: link },
     list: { react: list },
     // Truncate long text content in the message overlay
     paragraph: messageTextNumberOfLines ? { react: paragraphText } : {},

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -123,9 +123,9 @@ type FileUploadPreviewPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
   MessageInputContextValue<StreamChatGenerics>,
-  'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads' | 'AudioAttachmentUploadPreview'
+  'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads'
 > &
-  Pick<MessagesContextValue<StreamChatGenerics>, 'FileAttachmentIcon'>;
+  Pick<MessagesContextValue<StreamChatGenerics>, 'AudioAttachment' | 'FileAttachmentIcon'>;
 
 const FileUploadPreviewWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -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) => ({
@@ -194,7 +194,7 @@ const FileUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { black, grey_dark, grey_gainsboro, grey_whisper },
+      colors: { black, grey_dark, grey_gainsboro, grey_whisper, white },
       messageInput: {
         fileUploadPreview: {
           audioAttachmentFileContainer,
@@ -230,14 +230,31 @@ const FileUploadPreviewWithContext = <
                 audioAttachmentFileContainer,
               ]}
             >
-              <AudioAttachmentUploadPreview
-                index={index}
-                item={item}
-                onLoad={onLoad}
-                onPlayPause={onPlayPause}
-                onProgress={onProgress}
+              <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>
           ) : (
             <View
@@ -296,18 +313,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 +388,14 @@ export const FileUploadPreview = <
 >(
   props: FileUploadPreviewProps<StreamChatGenerics>,
 ) => {
-  const { AudioAttachmentUploadPreview, fileUploads, removeFile, setFileUploads, uploadFile } =
+  const { fileUploads, removeFile, setFileUploads, uploadFile } =
     useMessageInputContext<StreamChatGenerics>();
-  const { FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();
+  const { AudioAttachment, FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();
 
   return (
     <MemoizedFileUploadPreview
       {...{
-        AudioAttachmentUploadPreview,
+        AudioAttachment,
         FileAttachmentIcon,
         fileUploads,
         removeFile,

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

@@ -4,15 +4,16 @@ import { act } from 'react-test-renderer';
 
 import { fireEvent, render } from '@testing-library/react-native';
 
-import type { FileUpload } from '../../../contexts/messageInputContext/MessageInputContext';
+import {
+  FileUpload,
+  MessageInputContext,
+  MessageInputContextValue,
+} from '../../../contexts/messageInputContext/MessageInputContext';
 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 +30,19 @@ jest.mock('react-native/Libraries/ReactNative/I18nManager', () => ({
   isRTL: true,
 }));
 
-const getComponent = (props: Partial<AudioAttachmentUploadPreviewProps>) => (
+const getComponent = (
+  props: Partial<AudioAttachmentProps & Pick<MessageInputContextValue, 'fileUploads'>>,
+) => (
   <ThemeProvider theme={defaultTheme}>
-    <AudioAttachmentUploadPreview {...(props as unknown as AudioAttachmentUploadPreviewProps)} />,
+    <MessageInputContext.Provider
+      value={{ fileUploads: props.fileUploads } as unknown as MessageInputContextValue}
+    >
+      <AudioAttachment {...(props as unknown as AudioAttachmentProps)} />,
+    </MessageInputContext.Provider>
   </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

@@ -4,15 +4,16 @@ import { act } from 'react-test-renderer';
 
 import { fireEvent, render } from '@testing-library/react-native';
 
-import type { FileUpload } from '../../../contexts/messageInputContext/MessageInputContext';
+import {
+  FileUpload,
+  MessageInputContext,
+  MessageInputContextValue,
+} from '../../../contexts/messageInputContext/MessageInputContext';
 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 +29,19 @@ jest.mock('../../../native.ts', () => {
   };
 });
 
-const getComponent = (props: Partial<AudioAttachmentUploadPreviewProps>) => (
+const getComponent = (
+  props: Partial<AudioAttachmentProps & Pick<MessageInputContextValue, 'fileUploads'>>,
+) => (
   <ThemeProvider theme={defaultTheme}>
-    <AudioAttachmentUploadPreview {...(props as unknown as AudioAttachmentUploadPreviewProps)} />,
+    <MessageInputContext.Provider
+      value={{ fileUploads: props.fileUploads } as unknown as MessageInputContextValue}
+    >
+      <AudioAttachment {...(props as unknown as AudioAttachmentProps)} />,
+    </MessageInputContext.Provider>
   </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/MessageList/MessageList.tsx

@@ -124,7 +124,7 @@ type MessageListPropsWithContext<
     | 'targetedMessage'
   > &
   Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
-  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImages'> &
+  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setMessages'> &
   Pick<
     PaginatedMessageListContextValue<StreamChatGenerics>,
     'hasNoMoreRecentMessagesToLoad' | 'loadMore' | 'loadMoreRecent'
@@ -270,7 +270,7 @@ const MessageListWithContext = <
     scrollToFirstUnreadThreshold,
     selectedPicker,
     setFlatListRef,
-    setImages,
+    setMessages,
     setSelectedPicker,
     setTargetedMessage,
     StickyHeader,
@@ -530,7 +530,7 @@ const MessageListWithContext = <
     index: number;
     item: MessageType<StreamChatGenerics>;
   }) => {
-    if (!channel || (!channel.initialized && !channel.staticState)) return null;
+    if (!channel || (!channel.initialized && !channel.offlineMode)) return null;
 
     const lastRead = channel.lastRead();
 
@@ -898,7 +898,7 @@ const MessageListWithContext = <
       isListActive &&
       ((threadList && thread) || (!threadList && !thread))
     ) {
-      setImages(messagesWithImages as MessageType<StreamChatGenerics>[]);
+      setMessages(messagesWithImages as MessageType<StreamChatGenerics>[]);
     }
   }, [
     imageString,
@@ -1044,7 +1044,7 @@ export const MessageList = <
     targetedMessage,
   } = useChannelContext<StreamChatGenerics>();
   const { client } = useChatContext<StreamChatGenerics>();
-  const { setImages } = useImageGalleryContext<StreamChatGenerics>();
+  const { setMessages } = useImageGalleryContext<StreamChatGenerics>();
   const {
     DateHeader,
     deletedMessagesVisibilityType,
@@ -1104,7 +1104,7 @@ export const MessageList = <
         ScrollToBottomButton,
         scrollToFirstUnreadThreshold,
         selectedPicker,
-        setImages,
+        setMessages,
         setSelectedPicker,
         setTargetedMessage,
         StickyHeader,

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -362,6 +362,7 @@ const MessageOverlayWithContext = <
                               <MessageAvatar {...{ alignment, message, showAvatar: true }} />
                             )}
                             <View
+                              pointerEvents='none'
                               style={[
                                 styles.containerInner,
                                 {

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -321,6 +321,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "width": 32,
                                   },
                                   Object {
+                                    "backgroundColor": "#ececec",
                                     "borderRadius": 16,
                                     "height": 32,
                                     "width": 32,
@@ -569,6 +570,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "width": 32,
                                   },
                                   Object {
+                                    "backgroundColor": "#ececec",
                                     "borderRadius": 16,
                                     "height": 32,
                                     "width": 32,
@@ -817,6 +819,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "width": 32,
                                   },
                                   Object {
+                                    "backgroundColor": "#ececec",
                                     "borderRadius": 16,
                                     "height": 32,
                                     "width": 32,
@@ -1108,6 +1111,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                       "width": 32,
                                     },
                                     Object {
+                                      "backgroundColor": "#ececec",
                                       "borderRadius": 16,
                                       "height": 32,
                                       "width": 32,

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';
@@ -114,7 +115,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/imageGalleryContext/ImageGalleryContext.md

@@ -8,7 +8,7 @@ can get access to context as following:
 import { useChannelsContext } from 'stream-chat-react-native';
 
 const SomeChildComponent = () => {
-  const { image, setImage, setImages } = useImageGalleryContext();
+  const { selectedMessage, setSelectedMessage, setMessages } = useImageGalleryContext();
 
   return (
     <View />

package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx

@@ -7,13 +7,18 @@ import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
+type SelectedMessage = {
+  messageId?: string;
+  url?: string;
+};
+
 export type ImageGalleryContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
-  images: MessageType<StreamChatGenerics>[];
-  setImage: React.Dispatch<React.SetStateAction<{ messageId?: string; url?: string } | undefined>>;
-  setImages: React.Dispatch<React.SetStateAction<MessageType<StreamChatGenerics>[]>>;
-  image?: { messageId?: string; url?: string };
+  messages: MessageType<StreamChatGenerics>[];
+  setMessages: React.Dispatch<React.SetStateAction<MessageType<StreamChatGenerics>[]>>;
+  setSelectedMessage: React.Dispatch<React.SetStateAction<SelectedMessage | undefined>>;
+  selectedMessage?: SelectedMessage;
 };
 
 export const ImageGalleryContext = React.createContext(
@@ -25,19 +30,19 @@ export const ImageGalleryProvider = <
 >({
   children,
 }: PropsWithChildren<UnknownType>) => {
-  const [images, setImages] = useState<MessageType<StreamChatGenerics>[]>([]);
-  const [image, setImage] = useState<{ messageId?: string; url?: string }>();
-
-  const imageGalleryContext = {
-    image,
-    images,
-    setImage,
-    setImages,
-  };
+  const [messages, setMessages] = useState<MessageType<StreamChatGenerics>[]>([]);
+  const [selectedMessage, setSelectedMessage] = useState<SelectedMessage>();
 
   return (
     <ImageGalleryContext.Provider
-      value={imageGalleryContext as unknown as ImageGalleryContextValue}
+      value={
+        {
+          messages,
+          selectedMessage,
+          setMessages,
+          setSelectedMessage,
+        } as unknown as ImageGalleryContextValue
+      }
     >
       {children}
     </ImageGalleryContext.Provider>

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -22,7 +22,6 @@ import { useCreateMessageInputContext } from './hooks/useCreateMessageInputConte
 import { isEditingBoolean, useMessageDetailsForState } from './hooks/useMessageDetailsForState';
 
 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,11 +224,6 @@ export type InputMessageInputContextValue<
    */
   AttachButton: React.ComponentType<AttachButtonProps<StreamChatGenerics>>;
 
-  /** Custom UI component for AudioAttachmentUploadPreview. */
-  AudioAttachmentUploadPreview: React.ComponentType<
-    AudioAttachmentUploadPreviewProps<StreamChatGenerics>
-  >;
-
   clearEditingState: () => void;
   clearQuotedMessageState: () => void;
   /**

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

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

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -11,6 +11,7 @@ import type { Attachment, ChannelState, MessageResponse } from 'stream-chat';
 
 import type { AttachmentProps } from '../../components/Attachment/Attachment';
 import type { AttachmentActionsProps } from '../../components/Attachment/AttachmentActions';
+import type { AudioAttachmentProps } from '../../components/Attachment/AudioAttachment';
 import type { CardProps } from '../../components/Attachment/Card';
 import type { FileAttachmentProps } from '../../components/Attachment/FileAttachment';
 import type { FileAttachmentGroupProps } from '../../components/Attachment/FileAttachmentGroup';
@@ -72,6 +73,8 @@ export type MessagesContextValue<
    * Defaults to: [AttachmentActions](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/AttachmentActions.tsx)
    */
   AttachmentActions: React.ComponentType<AttachmentActionsProps<StreamChatGenerics>>;
+  /** Custom UI component for AudioAttachment. */
+  AudioAttachment: React.ComponentType<AudioAttachmentProps>;
   /**
    * UI component to display generic media type e.g. giphy, url preview etc
    * Defaults to: [Card](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/Card.tsx)