@sendbird/uikit-react-native 3.1.2 → 3.3.0

package/src/components/ChannelInput/VoiceMessageInput.tsx

@@ -0,0 +1,206 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+
+import {
+  Box,
+  Icon,
+  PressBox,
+  ProgressBar,
+  Text,
+  createStyleSheet,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import { conditionChaining, millsToMMSS } from '@sendbird/uikit-utils';
+
+import { useLocalization } from '../../hooks/useContext';
+import useVoiceMessageInput from '../../hooks/useVoiceMessageInput';
+import type { FileType } from '../../platform/types';
+
+export type VoiceMessageInputProps = {
+  onClose: () => Promise<void>;
+  onSend: (params: { file: FileType; duration: number }) => void;
+};
+
+const VoiceMessageInput = ({ onClose, onSend }: VoiceMessageInputProps) => {
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+  const { actions, state } = useVoiceMessageInput({
+    onSend: (file, duration) => onSend({ file, duration }),
+    onClose,
+  });
+
+  const uiColors = colors.ui.voiceMessageInput.default[state.status !== 'idle' ? 'active' : 'inactive'];
+
+  const onPressCancel = async () => {
+    actions.cancel();
+    onClose();
+  };
+
+  const onPressSend = async () => {
+    actions.send();
+    onClose();
+  };
+
+  const onPressVoiceMessageAction = () => {
+    switch (state.status) {
+      case 'idle':
+        actions.startRecording();
+        break;
+      case 'recording':
+        if (lessThanMinimumDuration) {
+          actions.cancel();
+        } else {
+          actions.stopRecording();
+        }
+        break;
+      case 'recording_completed':
+      case 'playing_paused':
+        actions.playPlayer();
+        break;
+      case 'playing':
+        actions.pausePlayer();
+        break;
+    }
+  };
+  const renderActionIcon = () => {
+    switch (state.status) {
+      case 'idle':
+        return <Icon icon={'recording'} size={20} color={uiColors.recording} />;
+      case 'recording':
+        return <Icon icon={'stop'} size={20} color={uiColors.actionIcon} />;
+      case 'recording_completed':
+      case 'playing_paused':
+        return <Icon icon={'play'} size={20} color={uiColors.actionIcon} />;
+      case 'playing':
+        return <Icon icon={'pause'} size={20} color={uiColors.actionIcon} />;
+    }
+  };
+
+  const isRecorderState = state.status === 'recording' || state.status === 'recording_completed';
+  const lessThanMinimumDuration = state.recordingTime.currentTime < state.recordingTime.minDuration;
+  const remainingTime = state.playingTime.duration - state.playingTime.currentTime;
+
+  return (
+    <Box backgroundColor={uiColors.background} paddingVertical={24} paddingHorizontal={16} style={styles.container}>
+      {/** Progress bar **/}
+      <ProgressBar
+        style={styles.progressBar}
+        current={conditionChaining(
+          [state.status === 'recording', state.status === 'recording_completed'],
+          [state.recordingTime.currentTime, 0, state.playingTime.currentTime],
+        )}
+        total={(isRecorderState ? state.recordingTime.maxDuration : state.playingTime.duration) || 1}
+        trackColor={uiColors.progressTrack}
+        overlay={
+          <Box flex={1} flexDirection={'row'} alignItems={'center'} justifyContent={'flex-end'} paddingRight={16}>
+            <RecordingLight visible={state.status === 'recording'} />
+            <Text caption1 style={{ lineHeight: undefined, marginLeft: 6 }} color={uiColors.textTime}>
+              {millsToMMSS(isRecorderState ? state.recordingTime.currentTime : remainingTime)}
+            </Text>
+          </Box>
+        }
+      />
+
+      <Box height={34} alignItems={'center'} justifyContent={'center'}>
+        {/** Cancel / Send **/}
+        <Box flexDirection={'row'}>
+          <CancelButton label={STRINGS.LABELS.VOICE_MESSAGE_INPUT_CANCEL} onPress={onPressCancel} />
+          <Box flex={1} />
+          <SendButton disabled={state.status === 'idle' || lessThanMinimumDuration} onPress={onPressSend} />
+        </Box>
+
+        {/** Record / Stop / Play / Pause **/}
+        <Box style={{ position: 'absolute' }} alignItems={'center'} justifyContent={'center'}>
+          <PressBox activeOpacity={0.5} onPress={onPressVoiceMessageAction}>
+            <Box
+              width={34}
+              height={34}
+              borderRadius={17}
+              alignItems={'center'}
+              justifyContent={'center'}
+              backgroundColor={uiColors.actionIconBackground}
+            >
+              {renderActionIcon()}
+            </Box>
+          </PressBox>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+const RecordingLight = (props: { visible: boolean }) => {
+  const { colors } = useUIKitTheme();
+
+  const value = useRef(new Animated.Value(0)).current;
+  const animation = useRef(
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(value, { toValue: 1, duration: 500, useNativeDriver: true }),
+        Animated.timing(value, { toValue: 0, duration: 500, useNativeDriver: true }),
+      ]),
+    ),
+  ).current;
+
+  useEffect(() => {
+    if (props.visible) animation.start();
+    return () => {
+      animation.reset();
+    };
+  }, [props.visible]);
+
+  if (!props.visible) return null;
+  return (
+    <Animated.View
+      style={{
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        opacity: value,
+        backgroundColor: colors.ui.voiceMessageInput.default.active.recording,
+      }}
+    />
+  );
+};
+
+const CancelButton = (props: { onPress: () => void; label: string }) => {
+  const { colors } = useUIKitTheme();
+
+  return (
+    <PressBox activeOpacity={0.8} onPress={props.onPress}>
+      <Box paddingHorizontal={12} height={'100%'} alignItems={'center'} justifyContent={'center'}>
+        <Text button color={colors.ui.voiceMessageInput.default.active.textCancel} numberOfLines={1}>
+          {props.label}
+        </Text>
+      </Box>
+    </PressBox>
+  );
+};
+
+const SendButton = (props: { onPress: () => void; disabled: boolean }) => {
+  const { colors } = useUIKitTheme();
+
+  const uiColors = colors.ui.voiceMessageInput.default[props.disabled ? 'inactive' : 'active'];
+
+  return (
+    <PressBox disabled={props.disabled} activeOpacity={0.8} onPress={props.onPress}>
+      <Box backgroundColor={uiColors.sendIconBackground} padding={7} borderRadius={40}>
+        <Icon icon={'send'} size={20} color={uiColors.sendIcon} />
+      </Box>
+    </PressBox>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+  progressBar: {
+    height: 36,
+    marginBottom: 16,
+    borderRadius: 18,
+  },
+});
+
+export default VoiceMessageInput;

package/src/components/ChannelInput/index.tsx

@@ -1,5 +1,5 @@
-import React, { MutableRefObject, useEffect, useState } from 'react';
-import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
+import React, { useEffect, useMemo, useState } from 'react';
+import { KeyboardAvoidingView, Platform, StyleProp, StyleSheet, TextInput, TextStyle, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
@@ -23,7 +23,10 @@ import type { MentionedUser, Range } from '../../types';
 import type { AttachmentsButtonProps } from './AttachmentsButton';
 import AttachmentsButton from './AttachmentsButton';
 import EditInput from './EditInput';
+import type { MessageToReplyPreviewProps } from './MessageToReplyPreview';
+import { MessageToReplyPreview } from './MessageToReplyPreview';
 import SendInput from './SendInput';
+import VoiceMessageInput, { VoiceMessageInputProps } from './VoiceMessageInput';
 
 export type SuggestedMentionListProps = {
   text: string;
@@ -36,6 +39,9 @@ export type SuggestedMentionListProps = {
 };
 
 export type ChannelInputProps = {
+  // style
+  style?: StyleProp<TextStyle>;
+
   // default
   channel: SendbirdBaseChannel;
   shouldRenderInput: boolean;
@@ -61,10 +67,12 @@ export type ChannelInputProps = {
   setMessageToReply?: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
 
   // mention
-  SuggestedMentionList?: (props: SuggestedMentionListProps) => JSX.Element | null;
+  SuggestedMentionList?: (props: SuggestedMentionListProps) => React.ReactNode | null;
 
   // sub-components
-  AttachmentsButton?: (props: AttachmentsButtonProps) => JSX.Element | null;
+  AttachmentsButton?: (props: AttachmentsButtonProps) => React.ReactNode | null;
+  MessageToReplyPreview?: (props: MessageToReplyPreviewProps) => React.ReactNode | null;
+  VoiceMessageInput?: (props: VoiceMessageInputProps) => React.ReactNode | null;
 };
 
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
@@ -80,7 +88,7 @@ const ChannelInput = (props: ChannelInputProps) => {
   const { channel, keyboardAvoidOffset, messageToEdit, setMessageToEdit } = props;
 
   const { top, left, right, bottom } = useSafeAreaInsets();
-  const { colors } = useUIKitTheme();
+  const { colors, typography } = useUIKitTheme();
   const { sbOptions, mentionManager } = useSendbirdChat();
 
   const { selection, onSelectionChange, textInputRef, text, onChangeText, mentionedUsers } = useMentionTextInput({
@@ -97,6 +105,14 @@ const ChannelInput = (props: ChannelInputProps) => {
 
   const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
 
+  const fontStyle = useMemo(() => {
+    if (!typography.body3.fontSize) return typography.body3;
+    // NOTE: iOS does not support textAlignVertical, so we should adjust lineHeight to center the text in multiline TextInput.
+    return { ...typography.body3, lineHeight: typography.body3.fontSize * 1.275, textAlignVertical: 'center' };
+  }, [typography.body3.fontSize]);
+
+  const textInputStyle = StyleSheet.flatten([styles.input, fontStyle, props.style]);
+
   useTypingTrigger(text, channel);
   useTextClearOnDisabled(onChangeText, props.inputDisabled);
   useAutoFocusOnEditMode(textInputRef, messageToEdit);
@@ -129,7 +145,10 @@ const ChannelInput = (props: ChannelInputProps) => {
                 onChangeText={onChangeText}
                 onSelectionChange={onSelectionChange}
                 mentionedUsers={mentionedUsers}
+                VoiceMessageInput={props.VoiceMessageInput ?? VoiceMessageInput}
                 AttachmentsButton={props.AttachmentsButton ?? AttachmentsButton}
+                MessageToReplyPreview={props.MessageToReplyPreview ?? MessageToReplyPreview}
+                style={textInputStyle}
               />
             )}
             {inputMode === 'edit' && messageToEdit && (
@@ -144,6 +163,7 @@ const ChannelInput = (props: ChannelInputProps) => {
                 mentionedUsers={mentionedUsers}
                 messageToEdit={messageToEdit}
                 setMessageToEdit={setMessageToEdit}
+                style={textInputStyle}
               />
             )}
           </View>
@@ -181,7 +201,7 @@ const useTextClearOnDisabled = (setText: (val: string) => void, chatDisabled: bo
 };
 
 const useAutoFocusOnEditMode = (
-  textInputRef: MutableRefObject<TextInput | undefined>,
+  textInputRef: React.MutableRefObject<TextInput | undefined>,
   messageToEdit?: SendbirdBaseMessage,
 ) => {
   useEffect(() => {
@@ -203,6 +223,17 @@ const styles = createStyleSheet({
   inputDefault: {
     height: 56,
   },
+  input: {
+    flex: 1,
+    marginRight: 4,
+    borderRadius: 20,
+    paddingTop: 8,
+    paddingBottom: 8,
+    minHeight: 36,
+    // Android - padding area is hidden
+    // iOS - padding area is visible
+    maxHeight: Platform.select({ ios: 36 * 2 + 16, android: 36 * 2 }),
+  },
 });
 
 export default React.memo(ChannelInput);

package/src/components/ChannelMessageList/index.tsx

@@ -22,6 +22,7 @@ import {
   getFileExtension,
   getFileType,
   isMyMessage,
+  isVoiceMessage,
   messageKeyExtractor,
   shouldRenderReaction,
   toMegabyte,
@@ -35,8 +36,9 @@ import type { CommonComponent } from '../../types';
 import ChatFlatList from '../ChatFlatList';
 import { ReactionAddons } from '../ReactionAddons';
 
-type PressActions = { onPress?: () => void; onLongPress?: () => void };
+type PressActions = { onPress?: () => void; onLongPress?: () => void; bottomSheetItem?: BottomSheetItem };
 type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
+type CreateMessagePressActions = (params: { message: SendbirdMessage }) => PressActions;
 export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpenChannel> = {
   enableMessageGrouping: boolean;
   currentUserId?: string;
@@ -73,6 +75,8 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
     channel: T;
     currentUserId?: ChannelMessageListProps<T>['currentUserId'];
     enableMessageGrouping: ChannelMessageListProps<T>['enableMessageGrouping'];
+    bottomSheetItem?: BottomSheetItem;
+    isFirstItem: boolean;
   }) => React.ReactElement | null;
   renderNewMessagesButton: null | CommonComponent<{
     visible: boolean;
@@ -120,7 +124,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
   const { colors } = useUIKitTheme();
   const { show } = useUserProfile();
   const { left, right } = useSafeAreaInsets();
-  const getMessagePressActions = useGetMessagePressActions({
+  const createMessagePressActions = useCreateMessagePressActions({
     channel,
     currentUserId,
     onEditMessage,
@@ -133,7 +137,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
   const safeAreaLayout = { paddingLeft: left, paddingRight: right };
 
   const renderItem: ListRenderItem<SendbirdMessage> = useFreshCallback(({ item, index }) => {
-    const { onPress, onLongPress } = getMessagePressActions(item);
+    const { onPress, onLongPress, bottomSheetItem } = createMessagePressActions({ message: item });
     return renderMessage({
       message: item,
       prevMessage: messages[index + 1],
@@ -146,6 +150,8 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
       channel,
       currentUserId,
       focused: (searchItem?.startingPoint ?? -1) === item.createdAt,
+      bottomSheetItem,
+      isFirstItem: index === 0,
     });
   });
 
@@ -190,7 +196,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
   );
 };
 
-const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpenChannel>({
+const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpenChannel>({
   channel,
   currentUserId,
   onResendFailedMessage,
@@ -207,7 +213,7 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
   | 'onDeleteMessage'
   | 'onResendFailedMessage'
   | 'onPressMediaMessage'
->) => {
+>): CreateMessagePressActions => {
   const { colors } = useUIKitTheme();
   const { STRINGS } = useLocalization();
   const toast = useToast();
@@ -216,160 +222,186 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
   const { clipboardService, fileService } = usePlatformService();
   const { sbOptions } = useSendbirdChat();
 
-  const onFailureToReSend = (error: Error) => {
+  const onResendFailure = (error: Error) => {
     toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error');
     Logger.error(STRINGS.TOAST.RESEND_MSG_ERROR, error);
   };
 
-  const handleFailedMessage = (message: HandleableMessage) => {
+  const onDeleteFailure = (error: Error) => {
+    toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error');
+    Logger.error(STRINGS.TOAST.DELETE_MSG_ERROR, error);
+  };
+
+  const onCopyText = (message: HandleableMessage) => {
+    if (message.isUserMessage()) {
+      clipboardService.setString(message.message || '');
+      toast.show(STRINGS.TOAST.COPY_OK, 'success');
+    }
+  };
+
+  const onDownloadFile = (message: HandleableMessage) => {
+    if (message.isFileMessage()) {
+      if (toMegabyte(message.size) > 4) {
+        toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
+      }
+
+      fileService
+        .save({ fileUrl: message.url, fileName: message.name, fileType: message.type })
+        .then((response) => {
+          toast.show(STRINGS.TOAST.DOWNLOAD_OK, 'success');
+          Logger.log('File saved to', response);
+        })
+        .catch((err) => {
+          toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');
+          Logger.log('File save failure', err);
+        });
+    }
+  };
+
+  const onOpenFile = (message: HandleableMessage) => {
+    if (message.isFileMessage()) {
+      const fileType = getFileType(message.type || getFileExtension(message.name));
+      if (['image', 'video', 'audio'].includes(fileType)) {
+        onPressMediaMessage?.(message, () => onDeleteMessage(message), getAvailableUriFromFileMessage(message));
+      } else {
+        SBUUtils.openURL(message.url);
+      }
+    }
+  };
+
+  const openSheetForFailedMessage = (message: HandleableMessage) => {
     openSheet({
       sheetItems: [
         {
           title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_RETRY,
-          onPress: () => {
-            onResendFailedMessage(message).catch(onFailureToReSend);
-          },
+          onPress: () => onResendFailedMessage(message).catch(onResendFailure),
         },
         {
           title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_REMOVE,
           titleColor: colors.ui.dialog.default.none.destructive,
-          onPress: () => confirmDelete(message),
+          onPress: () => alertForMessageDelete(message),
         },
       ],
     });
   };
-  const confirmDelete = (message: HandleableMessage) => {
+
+  const alertForMessageDelete = (message: HandleableMessage) => {
     alert({
       title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,
       buttons: [
-        {
-          text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL,
-        },
+        { text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL },
         {
           text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
           style: 'destructive',
           onPress: () => {
-            onDeleteMessage(message).catch(() => toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error'));
+            onDeleteMessage(message).catch(onDeleteFailure);
           },
         },
       ],
     });
   };
 
-  return (msg: SendbirdMessage) => {
-    if (!msg.isUserMessage() && !msg.isFileMessage()) {
-      return { onPress: undefined, onLongPress: undefined };
-    }
+  return ({ message }) => {
+    if (!message.isUserMessage() && !message.isFileMessage()) return {};
 
     const sheetItems: BottomSheetItem['sheetItems'] = [];
-    const response: PressActions = {
-      onPress: undefined,
-      onLongPress: undefined,
-    };
-
-    if (msg.isUserMessage()) {
-      sheetItems.push({
-        icon: 'copy',
+    const menu = {
+      copy: (message: HandleableMessage) => ({
+        icon: 'copy' as const,
         title: STRINGS.LABELS.CHANNEL_MESSAGE_COPY,
-        onPress: () => {
-          clipboardService.setString(msg.message || '');
-          toast.show(STRINGS.TOAST.COPY_OK, 'success');
-        },
-      });
-    }
-    if (msg.isFileMessage()) {
-      sheetItems.push({
-        icon: 'download',
+        onPress: () => onCopyText(message),
+      }),
+      edit: (message: HandleableMessage) => ({
+        icon: 'edit' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
+        onPress: () => onEditMessage(message),
+      }),
+      delete: (message: HandleableMessage) => ({
+        disabled: message.threadInfo ? message.threadInfo.replyCount > 0 : undefined,
+        icon: 'delete' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
+        onPress: () => alertForMessageDelete(message),
+      }),
+      reply: (message: HandleableMessage) => ({
+        disabled: Boolean(message.parentMessageId),
+        icon: 'reply' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_REPLY,
+        onPress: () => onReplyMessage?.(message),
+      }),
+      download: (message: HandleableMessage) => ({
+        icon: 'download' as const,
         title: STRINGS.LABELS.CHANNEL_MESSAGE_SAVE,
-        onPress: async () => {
-          if (toMegabyte(msg.size) > 4) {
-            toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
-          }
+        onPress: () => onDownloadFile(message),
+      }),
+    };
 
-          fileService
-            .save({ fileUrl: msg.url, fileName: msg.name, fileType: msg.type })
-            .then((response) => {
-              toast.show(STRINGS.TOAST.DOWNLOAD_OK, 'success');
-              Logger.log('File saved to', response);
-            })
-            .catch((err) => {
-              toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');
-              Logger.log('File save failure', err);
-            });
-        },
-      });
-    }
-    if (!channel.isEphemeral) {
-      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
-        if (msg.isUserMessage()) {
-          sheetItems.push({
-            icon: 'edit',
-            title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
-            onPress: () => onEditMessage(msg),
-          });
+    if (message.isUserMessage()) {
+      sheetItems.push(menu.copy(message));
+      if (!channel.isEphemeral) {
+        if (isMyMessage(message, currentUserId) && message.sendingStatus === 'succeeded') {
+          sheetItems.push(menu.edit(message));
+          sheetItems.push(menu.delete(message));
+        }
+        if (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
+          sheetItems.push(menu.reply(message));
         }
-        sheetItems.push({
-          disabled: msg.threadInfo ? msg.threadInfo.replyCount > 0 : undefined,
-          icon: 'delete',
-          title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
-          onPress: () => confirmDelete(msg),
-        });
-      }
-      if (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
-        sheetItems.push({
-          disabled: Boolean(msg.parentMessageId),
-          icon: 'reply',
-          title: STRINGS.LABELS.CHANNEL_MESSAGE_REPLY,
-          onPress: () => onReplyMessage?.(msg),
-        });
       }
     }
 
-    if (msg.isFileMessage()) {
-      const fileType = getFileType(msg.type || getFileExtension(msg.name));
-      switch (fileType) {
-        case 'image':
-        case 'video':
-        case 'audio': {
-          response.onPress = () => {
-            onPressMediaMessage?.(msg, () => onDeleteMessage(msg), getAvailableUriFromFileMessage(msg));
-          };
-          break;
+    if (message.isFileMessage()) {
+      if (!isVoiceMessage(message)) {
+        sheetItems.push(menu.download(message));
+      }
+      if (!channel.isEphemeral) {
+        if (isMyMessage(message, currentUserId) && message.sendingStatus === 'succeeded') {
+          sheetItems.push(menu.delete(message));
         }
-        default: {
-          response.onPress = () => SBUUtils.openURL(msg.url);
-          break;
+        if (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
+          sheetItems.push(menu.reply(message));
         }
       }
     }
 
-    if (sheetItems.length > 0) {
-      response.onLongPress = () => {
-        openSheet({
-          sheetItems,
-          HeaderComponent: shouldRenderReaction(
-            channel,
-            sbOptions.uikitWithAppInfo.groupChannel.channel.enableReactions,
-          )
-            ? ({ onClose }) => <ReactionAddons.BottomSheet message={msg} channel={channel} onClose={onClose} />
-            : undefined,
-        });
-      };
-    }
+    const bottomSheetItem: BottomSheetItem = {
+      sheetItems,
+      HeaderComponent: shouldRenderReaction(channel, sbOptions.uikitWithAppInfo.groupChannel.channel.enableReactions)
+        ? ({ onClose }) => <ReactionAddons.BottomSheet message={message} channel={channel} onClose={onClose} />
+        : undefined,
+    };
 
-    if (msg.sendingStatus === 'failed') {
-      response.onLongPress = () => handleFailedMessage(msg);
-      response.onPress = () => {
-        onResendFailedMessage(msg).catch(onFailureToReSend);
-      };
-    }
+    switch (true) {
+      case message.sendingStatus === 'pending': {
+        return {
+          onPress: undefined,
+          onLongPress: undefined,
+          bottomSheetItem: undefined,
+        };
+      }
 
-    if (msg.sendingStatus === 'pending') {
-      response.onLongPress = undefined;
-      response.onPress = undefined;
-    }
+      case message.sendingStatus === 'failed': {
+        return {
+          onPress: () => onResendFailedMessage(message).catch(onResendFailure),
+          onLongPress: () => openSheetForFailedMessage(message),
+          bottomSheetItem,
+        };
+      }
+
+      case message.isFileMessage(): {
+        return {
+          onPress: () => onOpenFile(message),
+          onLongPress: () => openSheet(bottomSheetItem),
+          bottomSheetItem,
+        };
+      }
 
-    return response;
+      default: {
+        return {
+          onPress: undefined,
+          onLongPress: () => openSheet(bottomSheetItem),
+          bottomSheetItem,
+        };
+      }
+    }
   };
 };