stream-chat-react-native-core 4.8.0-beta.1 → 4.9.0-beta.2

package/src/components/Attachment/__tests__/Giphy.test.js

@@ -1,22 +1,28 @@
 import React from 'react';
 
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import {
+  cleanup,
+  fireEvent,
+  render,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '@testing-library/react-native';
 
 import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
+import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext';
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import {
-  generateGiphyAttachment,
-  generateImgurAttachment,
-} from '../../../mock-builders/generator/attachment';
+import { generateGiphyAttachment } from '../../../mock-builders/generator/attachment';
 import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { ImageLoadingFailedIndicator } from '../../Attachment/ImageLoadingFailedIndicator';
+import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../../MessageList/MessageList';
@@ -27,15 +33,66 @@ describe('Giphy', () => {
     const message = generateMessage();
     return (
       <ThemeProvider>
-        <MessageProvider value={{ message }}>
-          <Giphy {...props} />
-        </MessageProvider>
+        <MessagesProvider value={{ ImageLoadingFailedIndicator, ImageLoadingIndicator }}>
+          <MessageProvider value={{ message }}>
+            <Giphy {...props} />
+          </MessageProvider>
+        </MessagesProvider>
       </ThemeProvider>
     );
   };
+  let chatClient;
+  let channel;
+  let attachment;
+
+  const actions = [
+    { name: 'image_action', text: 'Send', value: 'send' },
+    { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
+    {
+      name: 'image_action',
+      text: 'Cancel',
+      value: 'cancel',
+    },
+  ];
+
+  const giphy = {
+    fixed_height: {
+      height: '200',
+      url: 'https://media1.giphy.com/media/test/fixed_height.gif',
+      width: '375',
+    },
+    original: {
+      height: '256',
+      url: 'https://media1.giphy.com/media/test/original.gif',
+      width: '480',
+    },
+  };
+  const initChannel = async () => {
+    const user1 = generateUser();
+    attachment = generateGiphyAttachment();
+
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [
+        generateMessage({ user: user1 }),
+        generateMessage({ type: 'system', user: undefined }),
+        generateMessage({ attachments: [{ ...attachment }], user: user1 }),
+      ],
+    });
+
+    chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+  };
+
+  beforeEach(async () => {
+    await initChannel();
+  });
+
+  afterEach(cleanup);
 
   it('should render Card component for "imgur" type attachment', async () => {
-    const attachment = generateImgurAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
     await waitFor(() => {
@@ -44,7 +101,6 @@ describe('Giphy', () => {
   });
 
   it('should render Card component for "giphy" type attachment', async () => {
-    const attachment = generateGiphyAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
     await waitFor(() => {
@@ -53,19 +109,7 @@ describe('Giphy', () => {
   });
 
   it('"giphy" attachment size should be customisable', async () => {
-    const attachment = generateGiphyAttachment();
-    attachment.giphy = {
-      fixed_height: {
-        height: '200',
-        url: 'https://media1.giphy.com/media/test/fixed_height.gif',
-        width: '375',
-      },
-      original: {
-        height: '256',
-        url: 'https://media1.giphy.com/media/test/original.gif',
-        width: '480',
-      },
-    };
+    attachment.giphy = giphy;
     const { getByTestId: getByTestIdFixedHeight } = render(
       getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }),
     );
@@ -94,16 +138,7 @@ describe('Giphy', () => {
   });
 
   it('show render giphy action UI and all the 3 action buttons', async () => {
-    const attachment = generateGiphyAttachment();
-    attachment.actions = [
-      { name: 'image_action', text: 'Send', value: 'send' },
-      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
-      {
-        name: 'image_action',
-        text: 'Cancel',
-        value: 'cancel',
-      },
-    ];
+    attachment.actions = actions;
     const { getByTestId } = render(
       getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }),
     );
@@ -117,17 +152,8 @@ describe('Giphy', () => {
   });
 
   it('should trigger the cancel giphy action', async () => {
-    const attachment = generateGiphyAttachment();
     const handleAction = jest.fn();
-    attachment.actions = [
-      { name: 'image_action', text: 'Send', value: 'send' },
-      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
-      {
-        name: 'image_action',
-        text: 'Cancel',
-        value: 'cancel',
-      },
-    ];
+    attachment.actions = actions;
     const { getByTestId } = render(
       getAttachmentComponent({
         attachment,
@@ -150,17 +176,8 @@ describe('Giphy', () => {
   });
 
   it('should trigger the shuffle giphy action', async () => {
-    const attachment = generateGiphyAttachment();
     const handleAction = jest.fn();
-    attachment.actions = [
-      { name: 'image_action', text: 'Send', value: 'send' },
-      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
-      {
-        name: 'image_action',
-        text: 'Cancel',
-        value: 'cancel',
-      },
-    ];
+    attachment.actions = actions;
     const { getByTestId } = render(
       getAttachmentComponent({
         attachment,
@@ -183,17 +200,8 @@ describe('Giphy', () => {
   });
 
   it('should trigger the send giphy action', async () => {
-    const attachment = generateGiphyAttachment();
     const handleAction = jest.fn();
-    attachment.actions = [
-      { name: 'image_action', text: 'Send', value: 'send' },
-      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
-      {
-        name: 'image_action',
-        text: 'Cancel',
-        value: 'cancel',
-      },
-    ];
+    attachment.actions = actions;
     const { getByTestId } = render(
       getAttachmentComponent({
         attachment,
@@ -217,16 +225,7 @@ describe('Giphy', () => {
 
   it('giphy attachment UI should render within the message list with actions', async () => {
     const user1 = generateUser();
-    const attachment = generateGiphyAttachment();
-    attachment.actions = [
-      { name: 'image_action', text: 'Send', value: 'send' },
-      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
-      {
-        name: 'image_action',
-        text: 'Cancel',
-        value: 'cancel',
-      },
-    ];
+    attachment.actions = actions;
     const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [
@@ -260,23 +259,6 @@ describe('Giphy', () => {
   });
 
   it('giphy attachment UI should render within the message list', async () => {
-    const user1 = generateUser();
-    const attachment = generateGiphyAttachment();
-
-    const mockedChannel = generateChannelResponse({
-      members: [generateMember({ user: user1 })],
-      messages: [
-        generateMessage({ user: user1 }),
-        generateMessage({ type: 'system', user: undefined }),
-        generateMessage({ attachments: [{ ...attachment }], user: user1 }),
-      ],
-    });
-
-    const chatClient = await getTestClientWithUser({ id: 'testID' });
-    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.watch();
-
     const { queryByTestId } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
@@ -291,4 +273,42 @@ describe('Giphy', () => {
       expect(queryByTestId('giphy-attachment')).toBeTruthy();
     });
   });
+
+  it('should render a error indicator in giphy image', () => {
+    const { getByA11yLabel, getByAccessibilityHint } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    fireEvent(getByA11yLabel('giphy-attachment-image'), 'error');
+    expect(getByAccessibilityHint('image-loading-error')).toBeTruthy();
+  });
+
+  it('should render a loading indicator in giphy image and when successful render the image', () => {
+    const { getByA11yLabel, getByAccessibilityHint } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    expect(getByAccessibilityHint('image-loading')).toBeTruthy();
+
+    fireEvent(getByA11yLabel('giphy-attachment-image'), 'onLoadStart');
+
+    expect(getByAccessibilityHint('image-loading')).toBeTruthy();
+
+    fireEvent(getByA11yLabel('giphy-attachment-image'), 'onLoadFinish');
+
+    waitForElementToBeRemoved(() => getByAccessibilityHint('image-loading'));
+    expect(getByA11yLabel('giphy-attachment-image')).toBeTruthy();
+  });
 });

package/src/components/Attachment/hooks/useLoadingImage.tsx

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+
+export const useLoadingImage = () => {
+  const [isLoadingImage, setLoadingImage] = useState(true);
+  const [isLoadingImageError, setLoadingImageError] = useState(false);
+
+  return { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError };
+};

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { StyleSheet, TextInput, TextInputProps } from 'react-native';
+import { I18nManager, StyleSheet, TextInput, TextInputProps } from 'react-native';
 
 import throttle from 'lodash/throttle';
 
@@ -417,6 +417,7 @@ const AutoCompleteInputWithContext = <
         {
           color: black,
           maxHeight: (textHeight || 17) * numberOfLines,
+          textAlign: I18nManager.isRTL ? 'right' : 'left',
         },
         inputBox,
       ]}

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -51,7 +51,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 14,
     fontWeight: 'bold',
-    paddingRight: 8,
+    paddingHorizontal: 8,
   },
 });
 

package/src/components/Channel/Channel.tsx

@@ -82,6 +82,8 @@ import { FileAttachmentGroup as FileAttachmentGroupDefault } from '../Attachment
 import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
 import { Gallery as GalleryDefault } from '../Attachment/Gallery';
 import { Giphy as GiphyDefault } from '../Attachment/Giphy';
+import { ImageLoadingFailedIndicator as ImageLoadingFailedIndicatorDefault } from '../Attachment/ImageLoadingFailedIndicator';
+import { ImageLoadingIndicator as ImageLoadingIndicatorDefault } from '../Attachment/ImageLoadingIndicator';
 import { VideoThumbnail as VideoThumbnailDefault } from '../Attachment/VideoThumbnail';
 import { AutoCompleteSuggestionHeader as AutoCompleteSuggestionHeaderDefault } from '../AutoCompleteInput/AutoCompleteSuggestionHeader';
 import { AutoCompleteSuggestionItem as AutoCompleteSuggestionItemDefault } from '../AutoCompleteInput/AutoCompleteSuggestionItem';
@@ -258,6 +260,8 @@ export type ChannelPropsWithContext<
       | 'InlineUnreadIndicator'
       | 'isAttachmentEqual'
       | 'legacyImageViewerSwipeBehaviour'
+      | 'ImageLoadingFailedIndicator'
+      | 'ImageLoadingIndicator'
       | 'markdownRules'
       | 'Message'
       | 'messageActions'
@@ -470,6 +474,8 @@ const ChannelWithContext = <
     LoadingIndicator = LoadingIndicatorDefault,
     loadingMore: loadingMoreProp,
     loadingMoreRecent: loadingMoreRecentProp,
+    ImageLoadingFailedIndicator = ImageLoadingFailedIndicatorDefault,
+    ImageLoadingIndicator = ImageLoadingIndicatorDefault,
     markdownRules,
     maxMessageLength: maxMessageLengthProp,
     maxNumberOfFiles = 10,
@@ -1700,6 +1706,8 @@ const ChannelWithContext = <
     handleReaction,
     handleRetry,
     handleThreadReply,
+    ImageLoadingFailedIndicator,
+    ImageLoadingIndicator,
     initialScrollToFirstUnreadMessage,
     InlineDateSeparator,
     InlineUnreadIndicator,

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

@@ -39,6 +39,8 @@ export const useCreateMessagesContext = <
   handleReaction,
   handleRetry,
   handleThreadReply,
+  ImageLoadingFailedIndicator,
+  ImageLoadingIndicator,
   initialScrollToFirstUnreadMessage,
   InlineDateSeparator,
   InlineUnreadIndicator,
@@ -126,6 +128,8 @@ export const useCreateMessagesContext = <
       handleReaction,
       handleRetry,
       handleThreadReply,
+      ImageLoadingFailedIndicator,
+      ImageLoadingIndicator,
       initialScrollToFirstUnreadMessage,
       InlineDateSeparator,
       InlineUnreadIndicator,

package/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js

@@ -71,7 +71,6 @@ describe('ChannelPreviewMessenger', () => {
     fireEvent.press(getByTestId('channel-preview-button'));
 
     await waitFor(() => {
-      // eslint-disable-next-line jest/prefer-called-with
       expect(onSelect).toHaveBeenCalledTimes(1);
     });
   });

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

@@ -0,0 +1,145 @@
+import React, { FC } from 'react';
+
+import { renderHook } from '@testing-library/react-hooks/native';
+import { waitFor } from '@testing-library/react-native';
+
+import type { DefaultStreamChatGenerics } from 'src/types/types';
+
+import type { DefaultGenerics, 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,
+  CHANNEL_WITH_MESSAGES_ATTACHMENTS,
+  CHANNEL_WITH_MESSAGES_COMMAND,
+  CHANNEL_WITH_MESSAGES_TEXT,
+  CHANNEL_WITH_NO_MESSAGES,
+  LATEST_MESSAGE,
+} from '../../../../mock-builders/api/channelMocks';
+
+import { generateUser } from '../../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../../mock-builders/mock';
+
+import { useLatestMessagePreview } from '../useLatestMessagePreview';
+
+describe('useLatestMessagePreview', () => {
+  const FORCE_UPDATE = 15;
+  const clientUser = generateUser();
+  let chatClient: StreamChat<DefaultGenerics> | StreamChat<DefaultStreamChatGenerics>;
+
+  beforeEach(async () => {
+    chatClient = await getTestClientWithUser(clientUser);
+  });
+
+  const ChatProvider: FC<{ children: React.ReactNode }> = ({ children }) => (
+    <ChatContext.Provider
+      value={
+        {
+          auto_translation_enabled: true,
+          client: chatClient,
+        } as unknown as ChatContextValue
+      }
+    >
+      {children}
+    </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', async () => {
+    const { result } = renderHook(
+      () => useLatestMessagePreview(CHANNEL_WITH_DELETED_MESSAGES, FORCE_UPDATE, LATEST_MESSAGE),
+      { wrapper: ChatProvider },
+    );
+    await waitFor(() => {
+      expect(result.current.previews).toEqual([{ bold: false, text: 'Message deleted' }]);
+    });
+  });
+
+  it('should return an "Nothing yet..." message preview', async () => {
+    const { result } = renderHook(
+      () => useLatestMessagePreview(CHANNEL_WITH_NO_MESSAGES, FORCE_UPDATE, LATEST_MESSAGE),
+      { wrapper: ChatProvider },
+    );
+    await waitFor(() => {
+      expect(result.current.previews).toEqual([{ bold: false, text: 'Nothing yet...' }]);
+    });
+  });
+
+  it('should return latest message preview', 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: ' },
+        { bold: false, text: 'jkbkbiubicbi' },
+      ]);
+    });
+  });
+
+  it('should return a channel with an empty message preview', async () => {
+    const { result } = renderHook(
+      () => useLatestMessagePreview(CHANNEL_WITH_EMPTY_MESSAGE, FORCE_UPDATE, LATEST_MESSAGE),
+      { wrapper: ChatProvider },
+    );
+    await waitFor(() => {
+      expect(result.current.previews).toEqual([
+        { bold: false, text: '' },
+        { bold: false, text: 'Empty message...' },
+      ]);
+    });
+  });
+
+  it('should return a mentioned user (@Max) message preview', async () => {
+    const { result } = renderHook(
+      () => useLatestMessagePreview(CHANNEL_WITH_MENTIONED_USERS, FORCE_UPDATE, LATEST_MESSAGE),
+      { wrapper: ChatProvider },
+    );
+    await waitFor(() => {
+      expect(result.current.previews).toEqual([
+        { bold: false, text: '' },
+        { bold: false, text: 'Max' },
+      ]);
+    });
+  });
+
+  it('should return the latest command preview', async () => {
+    const { result } = renderHook(
+      () => useLatestMessagePreview(CHANNEL_WITH_MESSAGES_COMMAND, FORCE_UPDATE, LATEST_MESSAGE),
+      { wrapper: ChatProvider },
+    );
+    await waitFor(() => {
+      expect(result.current.previews).toEqual([
+        { bold: true, text: '@okechukwu: ' },
+        { bold: false, text: '/giphy' },
+      ]);
+    });
+  });
+
+  it('should return an attachment preview', async () => {
+    const { result } = renderHook(
+      () =>
+        useLatestMessagePreview(CHANNEL_WITH_MESSAGES_ATTACHMENTS, FORCE_UPDATE, LATEST_MESSAGE),
+      { wrapper: ChatProvider },
+    );
+    await waitFor(() => {
+      expect(result.current.previews).toEqual([
+        { bold: true, text: '@okechukwu: ' },
+        { bold: false, text: '🏙 Attachment...' },
+      ]);
+    });
+  });
+});

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import type { Channel, ChannelState, MessageResponse, StreamChat } from 'stream-chat';
+import type { Channel, ChannelState, MessageResponse, StreamChat, UserResponse } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import {
@@ -29,6 +29,43 @@ export type LatestMessagePreview<
   status: number;
 };
 
+const getMessageSenderName = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  message: LatestMessage<StreamChatGenerics> | undefined,
+  currentUserId: string | undefined,
+  t: (key: string) => string,
+  membersLength: number,
+) => {
+  if (message?.user?.id === currentUserId) {
+    return t('You');
+  }
+
+  if (membersLength > 2) {
+    return message?.user?.name || message?.user?.username || message?.user?.id || '';
+  }
+
+  return '';
+};
+
+const getMentionUsers = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  mentionedUser: UserResponse<StreamChatGenerics>[] | undefined,
+) => {
+  if (Array.isArray(mentionedUser)) {
+    const mentionUserString = mentionedUser.reduce((acc, cur) => {
+      const userName = cur.name || cur.id || '';
+      if (userName) {
+        acc += `${acc.length ? '|' : ''}@${userName}`;
+      }
+      return acc;
+    }, '');
+    return mentionUserString;
+  }
+  return '';
+};
+
 const getLatestMessageDisplayText = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -40,32 +77,21 @@ const getLatestMessageDisplayText = <
   if (!message) return [{ bold: false, text: t('Nothing yet...') }];
   const isMessageTypeDeleted = message.type === 'deleted';
   if (isMessageTypeDeleted) return [{ bold: false, text: t('Message deleted') }];
-  const currentUserId = client.userID;
-  const messageOwnerId = message.user?.id;
+  const currentUserId = client?.userID;
   const members = Object.keys(channel.state.members);
-  const owner =
-    messageOwnerId === currentUserId
-      ? t('You')
-      : members.length > 2
-      ? message.user?.name || message.user?.username || message.user?.id || ''
-      : '';
-  const ownerText = owner ? `${owner === t('You') ? '' : '@'}${owner}: ` : '';
-  const boldOwner = ownerText.includes('@');
+
+  const messageSender = getMessageSenderName(message, currentUserId, t, members.length);
+  const messageSenderText = messageSender
+    ? `${messageSender === t('You') ? '' : '@'}${messageSender}: `
+    : '';
+  const boldOwner = messageSenderText.includes('@');
   if (message.text) {
     // rough guess optimization to limit string preview to max 100 characters
     const shortenedText = message.text.substring(0, 100).replace(/\n/g, ' ');
-    const mentionedUsers = Array.isArray(message.mentioned_users)
-      ? message.mentioned_users.reduce((acc, cur) => {
-          const userName = cur.name || cur.id || '';
-          if (userName) {
-            acc += `${acc.length ? '|' : ''}@${userName}`;
-          }
-          return acc;
-        }, '')
-      : '';
+    const mentionedUsers = getMentionUsers(message.mentioned_users);
     const regEx = new RegExp(`^(${mentionedUsers})`);
     return [
-      { bold: boldOwner, text: ownerText },
+      { bold: boldOwner, text: messageSenderText },
       ...shortenedText.split('').reduce(
         (acc, cur, index) => {
           if (cur === '@' && mentionedUsers && regEx.test(shortenedText.substring(index))) {
@@ -83,18 +109,18 @@ const getLatestMessageDisplayText = <
   }
   if (message.command) {
     return [
-      { bold: boldOwner, text: ownerText },
+      { bold: boldOwner, text: messageSenderText },
       { bold: false, text: `/${message.command}` },
     ];
   }
   if (message.attachments?.length) {
     return [
-      { bold: boldOwner, text: ownerText },
+      { bold: boldOwner, text: messageSenderText },
       { bold: false, text: t('🏙 Attachment...') },
     ];
   }
   return [
-    { bold: boldOwner, text: ownerText },
+    { bold: boldOwner, text: messageSenderText },
     { bold: false, text: t('Empty message...') },
   ];
 };

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -45,11 +45,11 @@ const styles = StyleSheet.create({
   filenameText: {
     fontSize: 14,
     fontWeight: 'bold',
-    paddingLeft: 10,
+    paddingHorizontal: 10,
   },
   fileSizeText: {
     fontSize: 12,
-    paddingLeft: 10,
+    paddingHorizontal: 10,
   },
   fileTextContainer: {
     height: '100%',
@@ -66,11 +66,12 @@ const styles = StyleSheet.create({
     paddingLeft: 10,
   },
   unsupportedFileText: {
-    fontSize: 16,
+    fontSize: 12,
+    marginHorizontal: 4,
   },
   warningIconStyle: {
     borderRadius: 24,
-    marginTop: 4,
+    marginTop: 3,
   },
 });