stream-chat-react-native-core 4.9.0 → 4.10.1-beta.1

package/src/components/ChannelPreview/__tests__/{ChannelPreview.test.js → ChannelPreview.test.tsx}

@@ -1,9 +1,14 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { Text } from 'react-native';
 
 import { act, render, waitFor } from '@testing-library/react-native';
 
-import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import type { Channel, StreamChat } from 'stream-chat';
+
+import {
+  getOrCreateChannelApi,
+  GetOrCreateChannelApiParams,
+} from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import dispatchMessageNewEvent from '../../../mock-builders/event/messageNew';
 import dispatchMessageReadEvent from '../../../mock-builders/event/messageRead';
@@ -13,8 +18,23 @@ import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Chat } from '../../Chat/Chat';
 import { ChannelPreview } from '../ChannelPreview';
+import type { ChannelPreviewMessengerProps } from '../ChannelPreviewMessenger';
+
+import '@testing-library/jest-native/extend-expect';
+
+type ChannelPreviewUIComponentProps = {
+  channel: {
+    id: string;
+  };
+  latestMessagePreview: {
+    messageObject: {
+      text: string;
+    };
+  };
+  unread: number;
+};
 
-const ChannelPreviewUIComponent = (props) => (
+const ChannelPreviewUIComponent = (props: ChannelPreviewUIComponentProps) => (
   <>
     <Text testID='channel-id'>{props.channel.id}</Text>
     <Text testID='unread-count'>{props.unread}</Text>
@@ -28,21 +48,27 @@ const ChannelPreviewUIComponent = (props) => (
 
 describe('ChannelPreview', () => {
   const clientUser = generateUser();
-  let chatClient;
-  let channel;
-
-  const getComponent = (props = {}) => (
-    <Chat client={chatClient}>
-      <ChannelPreview
-        {...props}
-        channel={channel}
-        client={chatClient}
-        Preview={ChannelPreviewUIComponent}
-      />
-    </Chat>
-  );
-
-  const initializeChannel = async (c) => {
+  let chatClient: StreamChat;
+  let channel: Channel | null;
+
+  const TestComponent = (props = {}) => {
+    if (channel === null) {
+      return null;
+    }
+
+    return (
+      <Chat client={chatClient}>
+        <ChannelPreview
+          {...props}
+          channel={channel}
+          client={chatClient}
+          Preview={ChannelPreviewUIComponent as ComponentType<ChannelPreviewMessengerProps>}
+        />
+      </Chat>
+    );
+  };
+
+  const useInitializeChannel = async (c: GetOrCreateChannelApiParams) => {
     useMockedApis(chatClient, [getOrCreateChannelApi(c)]);
 
     channel = chatClient.channel('messaging');
@@ -58,31 +84,22 @@ describe('ChannelPreview', () => {
     channel = null;
   });
 
-  it('should render with latest message on channel', async () => {
-    const message = generateMessage({
-      user: clientUser,
-    });
-    const c = generateChannelResponse({
-      messages: [message],
-    });
-    await initializeChannel(c);
-    const { queryByText } = render(getComponent());
-    await waitFor(() => queryByText(message.text));
-  });
-
   it('should mark channel as read, when message.read event is received for current user', async () => {
     const c = generateChannelResponse();
-    await initializeChannel(c);
-    channel.countUnread = () => 20;
+    await useInitializeChannel(c);
+
+    if (channel !== null) {
+      channel.countUnread = () => 20;
+    }
 
-    const { getByTestId } = render(getComponent());
+    const { getByTestId } = render(<TestComponent />);
 
     await waitFor(() => getByTestId('channel-id'));
 
     expect(getByTestId('unread-count')).toHaveTextContent('20');
 
     act(() => {
-      dispatchMessageReadEvent(chatClient, clientUser, channel);
+      dispatchMessageReadEvent(chatClient, clientUser, channel || {});
     });
 
     await waitFor(() => {
@@ -92,9 +109,9 @@ describe('ChannelPreview', () => {
 
   it('should update the lastest message on "message.new" event', async () => {
     const c = generateChannelResponse();
-    await initializeChannel(c);
+    await useInitializeChannel(c);
 
-    const { getByTestId } = render(getComponent());
+    const { getByTestId } = render(<TestComponent />);
 
     await waitFor(() => getByTestId('channel-id'));
 
@@ -103,7 +120,7 @@ describe('ChannelPreview', () => {
     });
 
     act(() => {
-      dispatchMessageNewEvent(chatClient, message, channel);
+      dispatchMessageNewEvent(chatClient, message, channel || {});
     });
 
     await waitFor(() => {
@@ -113,9 +130,9 @@ describe('ChannelPreview', () => {
 
   it('should update the unread count on "message.new" event', async () => {
     const c = generateChannelResponse();
-    await initializeChannel(c);
+    await useInitializeChannel(c);
 
-    const { getByTestId } = render(getComponent());
+    const { getByTestId } = render(<TestComponent />);
 
     await waitFor(() => getByTestId('channel-id'));
 
@@ -123,14 +140,35 @@ describe('ChannelPreview', () => {
       user: clientUser,
     });
 
-    channel.countUnread = () => 10;
+    if (channel !== null) {
+      channel.countUnread = () => 10;
+    }
 
     act(() => {
-      dispatchMessageNewEvent(chatClient, message, channel);
+      dispatchMessageNewEvent(chatClient, message, channel || {});
     });
 
     await waitFor(() => {
       expect(getByTestId('unread-count')).toHaveTextContent('10');
     });
   });
+
+  it('displays messages translated if applicable', async () => {
+    chatClient = await getTestClientWithUser({ id: 'mads', language: 'no' });
+
+    const message = {
+      i18n: {
+        no_text: 'Hallo verden!',
+      },
+      text: 'Hello world!',
+    };
+    const channel = generateChannelResponse({ messages: [message] });
+    await useInitializeChannel(channel);
+
+    const { getByText } = render(<TestComponent />);
+
+    await waitFor(() => {
+      expect(getByText(message.i18n.no_text)).toBeTruthy();
+    });
+  });
 });

package/src/components/ChannelPreview/hooks/__tests__/useLatestMessagePreview.test.tsx

@@ -5,11 +5,10 @@ import { waitFor } from '@testing-library/react-native';
 
 import type { DefaultStreamChatGenerics } from 'src/types/types';
 
-import type { DefaultGenerics, StreamChat } from 'stream-chat';
+import type { DefaultGenerics, MessageResponse, StreamChat } from 'stream-chat';
 
 import { ChatContext, ChatContextValue } from '../../../../contexts/chatContext/ChatContext';
 import {
-  CHANNEL,
   CHANNEL_WITH_DELETED_MESSAGES,
   CHANNEL_WITH_EMPTY_MESSAGE,
   CHANNEL_WITH_MENTIONED_USERS,
@@ -47,19 +46,11 @@ describe('useLatestMessagePreview', () => {
     </ChatContext.Provider>
   );
 
-  it('should return a channel latest message', async () => {
-    const { result } = renderHook(
-      () => useLatestMessagePreview(CHANNEL, FORCE_UPDATE, LATEST_MESSAGE),
-      { wrapper: ChatProvider },
-    );
-    await waitFor(() => {
-      expect(result.current.previews).toBeTruthy();
-    });
-  });
+  it('should return a deleted message preview if the latest message is deleted', async () => {
+    const latestMessage = { type: 'deleted' } as unknown as MessageResponse;
 
-  it('should return a deleted message preview', async () => {
     const { result } = renderHook(
-      () => useLatestMessagePreview(CHANNEL_WITH_DELETED_MESSAGES, FORCE_UPDATE, LATEST_MESSAGE),
+      () => useLatestMessagePreview(CHANNEL_WITH_DELETED_MESSAGES, FORCE_UPDATE, latestMessage),
       { wrapper: ChatProvider },
     );
     await waitFor(() => {
@@ -67,9 +58,11 @@ describe('useLatestMessagePreview', () => {
     });
   });
 
-  it('should return an "Nothing yet..." message preview', async () => {
+  it('should return an "Nothing yet..." message preview if channel has no messages', async () => {
+    const latestMessage = undefined;
+
     const { result } = renderHook(
-      () => useLatestMessagePreview(CHANNEL_WITH_NO_MESSAGES, FORCE_UPDATE, LATEST_MESSAGE),
+      () => useLatestMessagePreview(CHANNEL_WITH_NO_MESSAGES, FORCE_UPDATE, latestMessage),
       { wrapper: ChatProvider },
     );
     await waitFor(() => {
@@ -77,11 +70,12 @@ describe('useLatestMessagePreview', () => {
     });
   });
 
-  it('should return latest message preview', async () => {
+  it('should use latestMessage if provided', async () => {
     const { result } = renderHook(
       () => useLatestMessagePreview(CHANNEL_WITH_MESSAGES_TEXT, FORCE_UPDATE, LATEST_MESSAGE),
       { wrapper: ChatProvider },
     );
+
     await waitFor(() => {
       expect(result.current.previews).toEqual([
         { bold: true, text: '@okechukwu: ' },
@@ -91,10 +85,13 @@ describe('useLatestMessagePreview', () => {
   });
 
   it('should return a channel with an empty message preview', async () => {
+    const latestMessage = {} as unknown as MessageResponse;
+
     const { result } = renderHook(
-      () => useLatestMessagePreview(CHANNEL_WITH_EMPTY_MESSAGE, FORCE_UPDATE, LATEST_MESSAGE),
+      () => useLatestMessagePreview(CHANNEL_WITH_EMPTY_MESSAGE, FORCE_UPDATE, latestMessage),
       { wrapper: ChatProvider },
     );
+
     await waitFor(() => {
       expect(result.current.previews).toEqual([
         { bold: false, text: '' },
@@ -104,8 +101,16 @@ describe('useLatestMessagePreview', () => {
   });
 
   it('should return a mentioned user (@Max) message preview', async () => {
+    const latestMessage = {
+      mentioned_users: [{ id: 'Max', name: 'Max' }],
+      text: 'Max',
+      user: {
+        id: 'okechukwu',
+      },
+    } as unknown as MessageResponse;
+
     const { result } = renderHook(
-      () => useLatestMessagePreview(CHANNEL_WITH_MENTIONED_USERS, FORCE_UPDATE, LATEST_MESSAGE),
+      () => useLatestMessagePreview(CHANNEL_WITH_MENTIONED_USERS, FORCE_UPDATE, latestMessage),
       { wrapper: ChatProvider },
     );
     await waitFor(() => {
@@ -117,8 +122,15 @@ describe('useLatestMessagePreview', () => {
   });
 
   it('should return the latest command preview', async () => {
+    const latestMessage = {
+      command: 'giphy',
+      user: {
+        id: 'okechukwu',
+      },
+    } as unknown as MessageResponse;
+
     const { result } = renderHook(
-      () => useLatestMessagePreview(CHANNEL_WITH_MESSAGES_COMMAND, FORCE_UPDATE, LATEST_MESSAGE),
+      () => useLatestMessagePreview(CHANNEL_WITH_MESSAGES_COMMAND, FORCE_UPDATE, latestMessage),
       { wrapper: ChatProvider },
     );
     await waitFor(() => {
@@ -130,11 +142,18 @@ describe('useLatestMessagePreview', () => {
   });
 
   it('should return an attachment preview', async () => {
+    const latestMessage = {
+      attachments: ['arbitrary value'],
+      user: {
+        id: 'okechukwu',
+      },
+    } as unknown as MessageResponse;
+
     const { result } = renderHook(
-      () =>
-        useLatestMessagePreview(CHANNEL_WITH_MESSAGES_ATTACHMENTS, FORCE_UPDATE, LATEST_MESSAGE),
+      () => useLatestMessagePreview(CHANNEL_WITH_MESSAGES_ATTACHMENTS, FORCE_UPDATE, latestMessage),
       { wrapper: ChatProvider },
     );
+
     await waitFor(() => {
       expect(result.current.previews).toEqual([
         { bold: true, text: '@okechukwu: ' },
@@ -142,4 +161,20 @@ describe('useLatestMessagePreview', () => {
       ]);
     });
   });
+
+  it('should default to messages from the channel state if latestMessage is undefined', async () => {
+    const latestMessage = undefined;
+
+    const { result } = renderHook(
+      () => useLatestMessagePreview(CHANNEL_WITH_MESSAGES_TEXT, FORCE_UPDATE, latestMessage),
+      { wrapper: ChatProvider },
+    );
+
+    await waitFor(() => {
+      expect(result.current.previews).toEqual([
+        { bold: true, text: '@okechukwu: ' },
+        { bold: false, text: 'jkbkbiubicbi' },
+      ]);
+    });
+  });
 });

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -207,7 +207,10 @@ const getLatestMessagePreview = <
       status: MessageReadStatus.NOT_SENT_BY_CURRENT_USER,
     };
   }
-  const message = lastMessage || messages.length ? messages[messages.length - 1] : undefined;
+
+  const channelStateLastMessage = messages.length ? messages[messages.length - 1] : undefined;
+
+  const message = lastMessage !== undefined ? lastMessage : channelStateLastMessage;
 
   return {
     created_at: getLatestMessageDisplayDate(message, tDateTimeParser),

package/src/components/Chat/Chat.tsx

@@ -15,8 +15,9 @@ import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext'
 import { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';
 import type { Theme } from '../../contexts/themeContext/utils/theme';
 import {
-  TranslationContextValue,
+  DEFAULT_USER_LANGUAGE,
   TranslationProvider,
+  TranslatorFunctions,
 } from '../../contexts/translationContext/TranslationContext';
 import { useStreami18n } from '../../hooks/useStreami18n';
 import init from '../../init';
@@ -129,7 +130,7 @@ const ChatWithContext = <
   const { children, client, closeConnectionOnBackground = true, i18nInstance, style } = props;
 
   const [channel, setChannel] = useState<Channel<StreamChatGenerics>>();
-  const [translators, setTranslators] = useState<TranslationContextValue>({
+  const [translators, setTranslators] = useState<TranslatorFunctions>({
     t: (key: string) => key,
     tDateTimeParser: (input?: string | number | Date) => Dayjs(input),
   });
@@ -178,7 +179,9 @@ const ChatWithContext = <
 
   return (
     <ChatProvider<StreamChatGenerics> value={chatContext}>
-      <TranslationProvider value={translators}>
+      <TranslationProvider
+        value={{ ...translators, userLanguage: client.user?.language || DEFAULT_USER_LANGUAGE }}
+      >
         <ThemeProvider style={style}>{children}</ThemeProvider>
       </TranslationProvider>
     </ChatProvider>

package/src/components/ImageGallery/ImageGallery.tsx

@@ -273,21 +273,25 @@ export const ImageGallery = <
 
     const attachmentPhotos = attachmentImages.map((a) => {
       const imageUrl = getUrlOfImageAttachment(a) as string;
+      const giphyURL = a.giphy?.[giphyVersion]?.url || a.thumb_url || a.image_url;
 
       return {
         channelId: cur.cid,
         created_at: cur.created_at,
         id: `photoId-${cur.id}-${imageUrl}`,
         messageId: cur.id,
-        mime_type: a.mime_type,
+        mime_type: a.type === 'giphy' ? 'image/gif' : a.mime_type,
         original_height: a.original_height,
         original_width: a.original_width,
         type: a.type,
-        uri: getResizedImageUrl({
-          height: screenHeight,
-          url: imageUrl,
-          width: screenWidth,
-        }),
+        uri:
+          a.type === 'giphy'
+            ? giphyURL
+            : getResizedImageUrl({
+                height: screenHeight,
+                url: imageUrl,
+                width: screenWidth,
+              }),
         user: cur.user,
         user_id: cur.user_id,
       };

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -171,7 +171,8 @@ export const ImageGalleryFooterWithContext = <
         }-${selectedIndex}.${extension}`,
         fromUrl: photo.uri,
       });
-      await shareImage({ type: photo.mime_type, url: localFile });
+      // `image/jpeg` is added for the case where the mime_type isn't available for a file/image
+      await shareImage({ type: photo.mime_type ?? 'image/jpeg', url: localFile });
       await deleteFile({ uri: localFile });
     } catch (error) {
       console.log(error);

package/src/components/Message/Message.tsx

@@ -503,6 +503,8 @@ const MessageWithContext = <
     updateMessage,
   });
 
+  const { userLanguage } = useTranslationContext();
+
   const showMessageOverlay = async (messageReactions = false, error = errorOrFailed) => {
     await dismissKeyboard();
 
@@ -552,6 +554,7 @@ const MessageWithContext = <
       ownCapabilities,
       supportedReactions,
       threadList,
+      userLanguage,
       videos: attachments.videos,
     });
 

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

@@ -14,7 +14,9 @@ import {
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import type { MarkdownStyle, Theme } from '../../../contexts/themeContext/utils/theme';
+import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
 const styles = StyleSheet.create({
   textContainer: { maxWidth: 250, paddingHorizontal: 16 },
@@ -75,6 +77,10 @@ const MessageTextContainerWithContext = <
     },
   } = theme;
 
+  const translatedMessage = useTranslatedMessage<StreamChatGenerics>(
+    message,
+  ) as MessageType<StreamChatGenerics>;
+
   if (!message.text) return null;
 
   const markdownStyles = { ...markdown, ...markdownStylesProp };
@@ -94,7 +100,7 @@ const MessageTextContainerWithContext = <
             ...markdownStyles,
             ...(onlyEmojis ? onlyEmojiMarkdown : {}),
           },
-          message,
+          message: translatedMessage,
           messageOverlay,
           messageTextNumberOfLines,
           onLongPress,

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { cleanup, render, waitFor } from '@testing-library/react-native';
+
+import { OverlayProvider } from '../../../../contexts/overlayContext/OverlayProvider';
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
+import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
+import { generateChannelResponse } from '../../../../mock-builders/generator/channel';
+import {
+  generateMessage,
+  generateStaticMessage,
+} from '../../../../mock-builders/generator/message';
+import { generateStaticUser } from '../../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import { Channel } from '../../../Channel/Channel';
+import { Chat } from '../../../Chat/Chat';
+import type { MessageType } from '../../../MessageList/hooks/useMessageList';
+import { MessageList } from '../../../MessageList/MessageList';
+import { MessageTextContainer } from '../MessageTextContainer';
+
+afterEach(cleanup);
+
+describe('MessageTextContainer', () => {
+  it('should render message text container', async () => {
+    const staticUser = generateStaticUser(1);
+    const message = generateMessage({
+      user: { ...staticUser, image: undefined },
+    });
+    const { getByTestId, getByText, rerender, toJSON } = render(
+      <ThemeProvider style={defaultTheme}>
+        <MessageTextContainer message={message as unknown as MessageType} />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('message-text-container')).toBeTruthy();
+      expect(getByText(message.text)).toBeTruthy();
+    });
+
+    rerender(
+      <ThemeProvider style={defaultTheme}>
+        <MessageTextContainer
+          message={message as unknown as MessageType}
+          MessageText={({ message }) => <Text testID='message-text'>{message?.text}</Text>}
+        />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('message-text-container')).toBeTruthy();
+      expect(getByTestId('message-text')).toBeTruthy();
+      expect(getByText(message.text)).toBeTruthy();
+    });
+
+    const staticMessage = generateStaticMessage('Hello World', {
+      user: staticUser,
+    });
+
+    rerender(
+      <ThemeProvider style={defaultTheme}>
+        <MessageTextContainer message={staticMessage as unknown as MessageType} />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+
+  it('should display a translated message if applicable', async () => {
+    const chatClient = await getTestClientWithUser({ id: 'mads', language: 'no' });
+
+    const message = {
+      i18n: {
+        no_text: 'Hallo verden!',
+      },
+      text: 'Hello world!',
+    };
+
+    const mockedChannel = generateChannelResponse({
+      id: 'chans',
+      messages: [message],
+    });
+
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', 'chans');
+    await channel.watch();
+
+    const TestComponent = () => (
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>
+    );
+
+    const { getByText } = render(<TestComponent />);
+
+    await waitFor(() => {
+      expect(getByText(message.i18n.no_text)).toBeTruthy();
+    });
+  });
+});

package/src/components/MessageList/MessageList.tsx

@@ -639,7 +639,7 @@ const MessageListWithContext = <
    * 2. Ensures that we call `loadMoreRecent`, once per content length
    * 3. If the call to `loadMore` is in progress, we wait for it to finish to make sure scroll doesn't jump.
    */
-  const maybeCallOnStartReached = (limit?: number) => {
+  const maybeCallOnStartReached = async (limit?: number) => {
     // If onStartReached has already been called for given data length, then ignore.
     if (messageList?.length && onStartReachedTracker.current[messageList.length]) {
       return;
@@ -664,9 +664,8 @@ const MessageListWithContext = <
 
     // If onEndReached is in progress, better to wait for it to finish for smooth UX
     if (onEndReachedInPromise.current) {
-      onEndReachedInPromise.current.finally(() => {
-        onStartReachedInPromise.current = loadMoreRecent(limit).then(callback).catch(onError);
-      });
+      await onEndReachedInPromise.current;
+      onStartReachedInPromise.current = loadMoreRecent(limit).then(callback).catch(onError);
     } else {
       onStartReachedInPromise.current = loadMoreRecent(limit).then(callback).catch(onError);
     }
@@ -677,7 +676,7 @@ const MessageListWithContext = <
    * 2. Ensures that we call `loadMore`, once per content length
    * 3. If the call to `loadMoreRecent` is in progress, we wait for it to finish to make sure scroll doesn't jump.
    */
-  const maybeCallOnEndReached = () => {
+  const maybeCallOnEndReached = async () => {
     // If onEndReached has already been called for given messageList length, then ignore.
     if (messageList?.length && onEndReachedTracker.current[messageList.length]) {
       return;
@@ -701,11 +700,10 @@ const MessageListWithContext = <
 
     // If onStartReached is in progress, better to wait for it to finish for smooth UX
     if (onStartReachedInPromise.current) {
-      onStartReachedInPromise.current.finally(() => {
-        onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
-          .then(callback)
-          .catch(onError);
-      });
+      await onStartReachedInPromise.current;
+      onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
+        .then(callback)
+        .catch(onError);
     } else {
       onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
         .then(callback)

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -669,10 +669,14 @@ export const MessageInputProvider = <
         }
       }
 
+      // To get the mime type of the image from the file name and send it as an response for an image
+      const mime_type: string | boolean = lookup(image.file.filename as string);
+
       if (image.state === FileState.UPLOADED || image.state === FileState.FINISHED) {
         attachments.push({
           fallback: image.file.name,
           image_url: image.url,
+          mime_type,
           original_height: image.height,
           original_width: image.width,
           type: 'image',
@@ -689,11 +693,14 @@ export const MessageInputProvider = <
         sending.current = false;
         return;
       }
+      const mime_type: string | boolean = lookup(file.file.name as string);
+
       if (file.state === FileState.UPLOADED || file.state === FileState.FINISHED) {
         if (file.file.type?.startsWith('image/')) {
           attachments.push({
             fallback: file.file.name,
             image_url: file.url,
+            mime_type,
             type: 'image',
           } as Attachment<StreamChatGenerics>);
         } else if (file.file.type?.startsWith('audio/')) {