@sendbird/uikit-react-native 2.0.3 → 2.2.0

package/src/contexts/UserProfileCtx.tsx

@@ -0,0 +1,135 @@
+import React, { useCallback, useContext, useState } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Modal, OutlinedButton, ProfileCard, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import type {
+  SendbirdGroupChannel,
+  SendbirdGroupChannelCreateParams,
+  SendbirdMember,
+  SendbirdUser,
+} from '@sendbird/uikit-utils';
+import { Logger, PASS, useIIFE } from '@sendbird/uikit-utils';
+
+import { LocalizationContext } from '../contexts/LocalizationCtx';
+import { SendbirdChatContext } from '../contexts/SendbirdChatCtx';
+
+type OnCreateChannel = (channel: SendbirdGroupChannel) => void;
+type OnBeforeCreateChannel = (
+  channelParams: SendbirdGroupChannelCreateParams,
+  users: SendbirdUser[] | SendbirdMember[],
+) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
+
+export type UserProfileContextType = {
+  show(user: SendbirdUser | SendbirdMember): void;
+  hide(): void;
+};
+
+type Props = React.PropsWithChildren<{
+  onCreateChannel?: OnCreateChannel;
+  onBeforeCreateChannel?: OnBeforeCreateChannel;
+}>;
+
+let WARN_onCreateChannel = false;
+
+export const UserProfileContext = React.createContext<UserProfileContextType | null>(null);
+export const UserProfileProvider = ({ children, onCreateChannel, onBeforeCreateChannel = PASS }: Props) => {
+  const chatContext = useContext(SendbirdChatContext);
+  const localizationContext = useContext(LocalizationContext);
+
+  if (!chatContext) throw new Error('SendbirdChatContext is not provided');
+  if (!localizationContext) throw new Error('LocalizationContext is not provided');
+
+  if (__DEV__ && !WARN_onCreateChannel && !onCreateChannel) {
+    Logger.warn(
+      'You should pass `userProfile.onCreateChannel` prop to SendbirdUIKitContainer if want to use message in a user profile',
+    );
+    WARN_onCreateChannel = true;
+  }
+
+  const { bottom, left, right } = useSafeAreaInsets();
+
+  const [user, setUser] = useState<SendbirdUser | SendbirdMember>();
+  const [visible, setVisible] = useState(false);
+
+  const show: UserProfileContextType['show'] = useCallback((user) => {
+    setUser(user);
+    setVisible(true);
+  }, []);
+
+  const hide: UserProfileContextType['hide'] = useCallback(() => {
+    setVisible(false);
+  }, []);
+
+  const userProfileButton = useIIFE(() => {
+    const isMe = chatContext.currentUser && user?.userId === chatContext.currentUser.userId;
+    if (isMe) return undefined;
+
+    const onPressMessageButton = async () => {
+      if (user) {
+        const params: SendbirdGroupChannelCreateParams = {
+          invitedUserIds: [user.userId],
+          name: '',
+          coverUrl: '',
+          isDistinct: false,
+        };
+
+        if (chatContext.currentUser) params.operatorUserIds = [chatContext.currentUser.userId];
+        const processedParams = await onBeforeCreateChannel(params, [user]);
+
+        hide();
+        const channel = await chatContext.sdk.groupChannel.createChannel(processedParams);
+
+        if (onCreateChannel) {
+          onCreateChannel(channel);
+        } else {
+          Logger.warn(
+            'Please set `onCreateChannel` before message to user from profile card, see `userProfile` prop in the `SendbirdUIKitContainer` props',
+          );
+        }
+      }
+    };
+
+    return (
+      <OutlinedButton onPress={onPressMessageButton}>
+        {localizationContext.STRINGS.PROFILE_CARD.BUTTON_MESSAGE}
+      </OutlinedButton>
+    );
+  });
+
+  return (
+    <UserProfileContext.Provider value={{ show, hide }}>
+      {children}
+      <Modal
+        type={'slide'}
+        onClose={hide}
+        onDismiss={() => setUser(undefined)}
+        visible={visible && Boolean(user)}
+        backgroundStyle={styles.modal}
+      >
+        {user && (
+          <ProfileCard
+            containerStyle={[
+              styles.profileCardContainer,
+              { paddingLeft: left, paddingRight: right, paddingBottom: bottom },
+            ]}
+            uri={user.profileUrl}
+            username={user.nickname || localizationContext.STRINGS.LABELS.USER_NO_NAME}
+            bodyLabel={localizationContext.STRINGS.PROFILE_CARD.BODY_LABEL}
+            body={localizationContext.STRINGS.PROFILE_CARD.BODY(user)}
+            button={userProfileButton}
+          />
+        )}
+      </Modal>
+    </UserProfileContext.Provider>
+  );
+};
+
+const styles = createStyleSheet({
+  modal: {
+    justifyContent: 'flex-end',
+  },
+  profileCardContainer: {
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+});

package/src/domain/groupChannel/component/GroupChannelInput/EditInput.tsx

@@ -1,58 +1,86 @@
-import React, { useEffect, useRef } from 'react';
-import { Platform, TextInput as RNTextInput, View } from 'react-native';
+import React, { forwardRef } from 'react';
+import {
+  NativeSyntheticEvent,
+  Platform,
+  TextInput as RNTextInput,
+  TextInputSelectionChangeEventData,
+  View,
+} from 'react-native';
 
+import { MentionType } from '@sendbird/chat/message';
 import { Button, TextInput, createStyleSheet, useToast } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdFileMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
 
-import { useLocalization } from '../../../../hooks/useContext';
+import { useLocalization, useSendbirdChat } from '../../../../hooks/useContext';
+import type { MentionedUser } from '../../../../types';
 import type { GroupChannelProps } from '../../types';
 
 type EditInputProps = GroupChannelProps['Input'] & {
   text: string;
-  setText: (val: string) => void;
-  editMessage: SendbirdUserMessage | SendbirdFileMessage;
-  setEditMessage: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
+  onChangeText: (val: string) => void;
+  messageToEdit: SendbirdUserMessage | SendbirdFileMessage;
+  setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
+  onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
+  disabled: boolean;
+  autoFocus: boolean;
+  mentionedUsers: MentionedUser[];
 };
 
-const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
-const EditInput = ({ text, setText, editMessage, setEditMessage, onUpdateUserMessage }: EditInputProps) => {
+const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
+  {
+    text,
+    onChangeText,
+    messageToEdit,
+    setMessageToEdit,
+    onUpdateUserMessage,
+    onSelectionChange,
+    disabled,
+    autoFocus,
+    mentionedUsers,
+  },
+  ref,
+) {
+  const { mentionManager } = useSendbirdChat();
   const { STRINGS } = useLocalization();
-  const inputRef = useRef<RNTextInput>(null);
   const toast = useToast();
 
-  useEffect(() => {
-    if (editMessage.isUserMessage()) {
-      setText(editMessage.message ?? '');
-
-      if (!AUTO_FOCUS) setTimeout(() => inputRef.current?.focus(), 500);
-    }
-  }, [editMessage]);
-
   const onPressCancel = () => {
-    setEditMessage();
-    setText('');
+    setMessageToEdit();
+    onChangeText('');
   };
 
   const onPressSave = () => {
-    if (editMessage.isUserMessage()) {
-      onUpdateUserMessage(text, editMessage).catch(() => toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error'));
+    if (messageToEdit.isUserMessage()) {
+      const mention = {
+        userIds: mentionedUsers.map((it) => it.user.userId),
+        messageTemplate: mentionManager.textToMentionedMessageTemplate(text, mentionedUsers),
+        type: MentionType.USERS,
+      };
+
+      onUpdateUserMessage(text, messageToEdit, mention).catch(() =>
+        toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error'),
+      );
     }
-    setEditMessage();
-    setText('');
+    setMessageToEdit();
+    onChangeText('');
   };
 
   return (
     <View style={styles.editInputContainer}>
       <View style={styles.inputWrapper}>
         <TextInput
-          autoFocus={AUTO_FOCUS}
-          ref={inputRef}
+          ref={ref}
           multiline
-          value={text}
-          onChangeText={setText}
+          disableFullscreenUI
+          editable={!disabled}
+          autoFocus={autoFocus}
+          onChangeText={onChangeText}
           style={styles.input}
           placeholder={STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE}
-        />
+          onSelectionChange={onSelectionChange}
+        >
+          {mentionManager.textToMentionedComponents(text, mentionedUsers)}
+        </TextInput>
       </View>
       <View style={{ marginTop: 8, flexDirection: 'row' }}>
         <Button variant={'text'} onPress={onPressCancel}>
@@ -65,7 +93,7 @@ const EditInput = ({ text, setText, editMessage, setEditMessage, onUpdateUserMes
       </View>
     </View>
   );
-};
+});
 
 const styles = createStyleSheet({
   editInputContainer: {

package/src/domain/groupChannel/component/GroupChannelInput/SendInput.tsx

@@ -1,6 +1,14 @@
-import React from 'react';
-import { Platform, TouchableOpacity, View } from 'react-native';
+import React, { forwardRef } from 'react';
+import {
+  NativeSyntheticEvent,
+  Platform,
+  TextInput as RNTextInput,
+  TextInputSelectionChangeEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 
+import { MentionType } from '@sendbird/chat/message';
 import {
   Icon,
   TextInput,
@@ -12,17 +20,36 @@ import {
 } from '@sendbird/uikit-react-native-foundation';
 import { conditionChaining } from '@sendbird/uikit-utils';
 
-import { useLocalization, usePlatformService } from '../../../../hooks/useContext';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../../../hooks/useContext';
 import SBUError from '../../../../libs/SBUError';
 import SBUUtils from '../../../../libs/SBUUtils';
+import type { MentionedUser } from '../../../../types';
 import type { GroupChannelProps } from '../../types';
 
 type SendInputProps = GroupChannelProps['Input'] & {
   text: string;
-  setText: (val: string) => void;
+  onChangeText: (val: string) => void;
+  frozen: boolean;
+  muted: boolean;
   disabled: boolean;
+  onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
+  mentionedUsers: MentionedUser[];
 };
-const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabled }: SendInputProps) => {
+const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
+  {
+    onSendUserMessage,
+    onSendFileMessage,
+    text,
+    onChangeText,
+    disabled,
+    frozen,
+    muted,
+    onSelectionChange,
+    mentionedUsers,
+  },
+  ref,
+) {
+  const { mentionManager } = useSendbirdChat();
   const { STRINGS } = useLocalization();
   const { fileService } = usePlatformService();
   const { colors } = useUIKitTheme();
@@ -31,9 +58,16 @@ const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabl
   const toast = useToast();
 
   const onPressSend = () => {
-    onSendUserMessage(text).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
-    setText('');
+    const mention = {
+      userIds: mentionedUsers.map((it) => it.user.userId),
+      messageTemplate: mentionManager.textToMentionedMessageTemplate(text, mentionedUsers),
+      type: MentionType.USERS,
+    };
+
+    onSendUserMessage(text, mention).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+    onChangeText('');
   };
+
   const onPressAttachment = () => {
     openSheet({
       sheetItems: [
@@ -114,16 +148,25 @@ const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabl
         />
       </TouchableOpacity>
       <TextInput
+        ref={ref}
         multiline
+        disableFullscreenUI
+        onSelectionChange={onSelectionChange}
         editable={!disabled}
-        value={text}
-        onChangeText={setText}
+        onChangeText={onChangeText}
         style={styles.input}
         placeholder={conditionChaining(
-          [disabled],
-          [STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_DISABLED, STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE],
+          [frozen, muted],
+          [
+            STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_DISABLED,
+            STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_MUTED,
+            STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE,
+          ],
         )}
-      />
+      >
+        {mentionManager.textToMentionedComponents(text, mentionedUsers)}
+      </TextInput>
+
       {Boolean(text.trim()) && (
         <TouchableOpacity onPress={onPressSend} disabled={disabled}>
           <Icon
@@ -136,7 +179,7 @@ const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabl
       )}
     </View>
   );
-};
+});
 
 const styles = createStyleSheet({
   sendInputContainer: {

package/src/domain/groupChannel/component/GroupChannelInput/index.tsx

@@ -1,72 +1,169 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import { KeyboardAvoidingView, Platform, View } from 'react-native';
+import React, { MutableRefObject, useContext, useEffect, useRef, useState } from 'react';
+import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { isGroupChannelChatUnavailable, useIIFE } from '@sendbird/uikit-utils';
+import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import {
+  SendbirdFileMessage,
+  SendbirdGroupChannel,
+  SendbirdUserMessage,
+  getGroupChannelChatAvailableState,
+  replace,
+  useIIFE,
+} from '@sendbird/uikit-utils';
 
+import { useSendbirdChat } from '../../../../hooks/useContext';
+import useMentionTextInput from '../../../../hooks/useMentionTextInput';
 import { GroupChannelContexts } from '../../module/moduleContext';
 import type { GroupChannelProps } from '../../types';
 import EditInput from './EditInput';
 import SendInput from './SendInput';
 
+const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
 const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const, default: undefined });
-const GroupChannelInput = (props: GroupChannelProps['Input']) => {
-  const { channel } = props;
 
-  const { left, right, bottom } = useSafeAreaInsets();
+// FIXME(iOS): Dynamic style does not work properly when typing the CJK. (https://github.com/facebook/react-native/issues/26107)
+//  To workaround temporarily, change the key for re-mount the component.
+const GET_INPUT_KEY = (shouldReset: boolean) => (shouldReset ? 'uikit-input-clear' : 'uikit-input');
+
+// TODO: Refactor 'Edit' mode to clearly
+const GroupChannelInput = (props: GroupChannelProps['Input']) => {
+  const { top, left, right, bottom } = useSafeAreaInsets();
   const { colors } = useUIKitTheme();
-  const { editMessage, setEditMessage, keyboardAvoidOffset = 0 } = useContext(GroupChannelContexts.Fragment);
+  const { features, mentionManager } = useSendbirdChat();
+  const {
+    channel,
+    messageToEdit,
+    setMessageToEdit,
+    keyboardAvoidOffset = 0,
+  } = useContext(GroupChannelContexts.Fragment);
 
-  const [text, setText] = useState('');
-  const textTmpRef = useRef('');
-  const isChatUnavailable = isGroupChannelChatUnavailable(channel);
+  const chatAvailableState = getGroupChannelChatAvailableState(channel);
+  const mentionAvailable = features.userMentionEnabled && channel.isGroupChannel() && !channel.isBroadcast;
+  const inputMode = useIIFE(() => {
+    if (!messageToEdit) return 'send';
+    if (messageToEdit.isFileMessage()) return 'send';
+    return 'edit';
+  });
+
+  const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
+
+  const { selection, onSelectionChange, textInputRef, text, onChangeText, mentionedUsers } = useMentionTextInput({
+    messageToEdit: messageToEdit,
+  });
+
+  useTypingTrigger(text, channel);
+  useTextPersistenceOnDisabled(text, onChangeText, chatAvailableState.disabled);
+  useAutoFocusOnEditMode(textInputRef, messageToEdit);
+
+  const onPressToMention: GroupChannelProps['SuggestedMentionList']['onPressToMention'] = (user, searchStringRange) => {
+    const mentionedMessageText = mentionManager.asMentionedMessageText(user, true);
+    const range = { start: searchStringRange.start, end: searchStringRange.start + mentionedMessageText.length - 1 };
+
+    onChangeText(replace(text, searchStringRange.start, searchStringRange.end, mentionedMessageText), { user, range });
+  };
+
+  if (!props.shouldRenderInput) {
+    return <SafeAreaBottom height={bottom} />;
+  }
+
+  return (
+    <>
+      <KeyboardAvoidingView
+        keyboardVerticalOffset={-bottom + keyboardAvoidOffset}
+        behavior={KEYBOARD_AVOID_VIEW_BEHAVIOR}
+      >
+        <View style={{ paddingLeft: left, paddingRight: right, backgroundColor: colors.background }}>
+          <View onLayout={(e) => setInputHeight(e.nativeEvent.layout.height)} style={styles.inputContainer}>
+            {inputMode === 'send' && (
+              <SendInput
+                {...props}
+                {...chatAvailableState}
+                key={GET_INPUT_KEY(mentionedUsers.length === 0)}
+                ref={textInputRef as never}
+                text={text}
+                onChangeText={onChangeText}
+                onSelectionChange={onSelectionChange}
+                mentionedUsers={mentionedUsers}
+              />
+            )}
+            {inputMode === 'edit' && messageToEdit && (
+              <EditInput
+                {...props}
+                key={GET_INPUT_KEY(mentionedUsers.length === 0)}
+                ref={textInputRef as never}
+                autoFocus={AUTO_FOCUS}
+                text={text}
+                onChangeText={onChangeText}
+                messageToEdit={messageToEdit}
+                setMessageToEdit={setMessageToEdit}
+                disabled={chatAvailableState.disabled}
+                onSelectionChange={onSelectionChange}
+                mentionedUsers={mentionedUsers}
+              />
+            )}
+          </View>
+          <SafeAreaBottom height={bottom} />
+        </View>
+      </KeyboardAvoidingView>
+      {mentionAvailable && (
+        <props.SuggestedMentionList
+          text={text}
+          selection={selection}
+          inputHeight={inputHeight}
+          topInset={top}
+          bottomInset={bottom}
+          onPressToMention={onPressToMention}
+          mentionedUsers={mentionedUsers}
+        />
+      )}
+    </>
+  );
+};
 
+const useTypingTrigger = (text: string, channel: SendbirdGroupChannel) => {
   useEffect(() => {
     if (text.length === 0) channel.endTyping();
     else channel.startTyping();
   }, [text]);
+};
+
+const useTextPersistenceOnDisabled = (text: string, setText: (val: string) => void, chatDisabled: boolean) => {
+  const textTmpRef = useRef('');
 
   useEffect(() => {
-    if (isChatUnavailable) {
+    if (chatDisabled) {
       textTmpRef.current = text;
       setText('');
     } else {
       setText(textTmpRef.current);
     }
-  }, [isChatUnavailable]);
-
-  const inputMode = useIIFE(() => {
-    if (!editMessage) return 'send';
-    if (editMessage.isFileMessage()) return 'send';
-    return 'edit';
-  });
+  }, [chatDisabled]);
+};
 
-  return (
-    <KeyboardAvoidingView
-      keyboardVerticalOffset={-bottom + keyboardAvoidOffset}
-      behavior={KEYBOARD_AVOID_VIEW_BEHAVIOR}
-    >
-      <View style={{ paddingLeft: left, paddingRight: right, backgroundColor: colors.background }}>
-        <View style={{ justifyContent: 'center', width: '100%' }}>
-          {inputMode === 'send' && <SendInput {...props} text={text} setText={setText} disabled={isChatUnavailable} />}
-          {inputMode === 'edit' && editMessage && (
-            <EditInput
-              {...props}
-              text={text}
-              setText={setText}
-              editMessage={editMessage}
-              setEditMessage={setEditMessage}
-            />
-          )}
-        </View>
-        <SafeAreaBottom height={bottom} />
-      </View>
-    </KeyboardAvoidingView>
-  );
+const useAutoFocusOnEditMode = (
+  textInputRef: MutableRefObject<TextInput | undefined>,
+  messageToEdit?: SendbirdUserMessage | SendbirdFileMessage,
+) => {
+  useEffect(() => {
+    if (messageToEdit?.isUserMessage()) {
+      if (!AUTO_FOCUS) setTimeout(() => textInputRef.current?.focus(), 500);
+    }
+  }, [messageToEdit]);
 };
+
 const SafeAreaBottom = ({ height }: { height: number }) => {
   return <View style={{ height }} />;
 };
 
+const styles = createStyleSheet({
+  inputContainer: {
+    justifyContent: 'center',
+    width: '100%',
+  },
+  inputDefault: {
+    height: 56,
+  },
+});
+
 export default React.memo(GroupChannelInput);

package/src/domain/groupChannel/component/GroupChannelMessageList.tsx

@@ -19,14 +19,16 @@ import {
   getFileType,
   isMyMessage,
   messageKeyExtractor,
+  shouldRenderReaction,
   toMegabyte,
   useFreshCallback,
 } from '@sendbird/uikit-utils';
 
 import type { ChatFlatListRef } from '../../../components/ChatFlatList';
 import ChatFlatList from '../../../components/ChatFlatList';
+import { ReactionAddons } from '../../../components/ReactionAddons';
 import { DEPRECATION_WARNING } from '../../../constants';
-import { useLocalization, usePlatformService } from '../../../hooks/useContext';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
 
@@ -57,11 +59,12 @@ const GroupChannelMessageList = ({
   const scrollRef = useRef<ChatFlatListRef>(null);
   const [newMessagesInternalBuffer, setNewMessagesInternalBuffer] = useState(() => newMessagesFromMembers);
   const getMessagePressActions = useGetMessagePressActions({
+    channel,
+    currentUserId,
     onDeleteMessage,
+    onResendFailedMessage,
     onPressImageMessage,
     onPressMediaMessage,
-    currentUserId,
-    onResendFailedMessage,
   });
 
   const safeAreaLayout = { paddingLeft: left, paddingRight: right };
@@ -140,14 +143,20 @@ const GroupChannelMessageList = ({
 
 type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
 const useGetMessagePressActions = ({
+  channel,
+  currentUserId,
+  onResendFailedMessage,
+  onDeleteMessage,
   onPressImageMessage,
   onPressMediaMessage,
-  onDeleteMessage,
-  onResendFailedMessage,
-  currentUserId,
 }: Pick<
   GroupChannelProps['MessageList'],
-  'onDeleteMessage' | 'onResendFailedMessage' | 'currentUserId' | 'onPressImageMessage' | 'onPressMediaMessage'
+  | 'channel'
+  | 'currentUserId'
+  | 'onResendFailedMessage'
+  | 'onDeleteMessage'
+  | 'onPressImageMessage'
+  | 'onPressMediaMessage'
 >) => {
   const { colors } = useUIKitTheme();
   const { STRINGS } = useLocalization();
@@ -155,7 +164,8 @@ const useGetMessagePressActions = ({
   const { openSheet } = useBottomSheet();
   const { alert } = useAlert();
   const { clipboardService, fileService } = usePlatformService();
-  const { setEditMessage } = useContext(GroupChannelContexts.Fragment);
+  const { features } = useSendbirdChat();
+  const { setMessageToEdit } = useContext(GroupChannelContexts.Fragment);
 
   const handleFailedMessage = (message: HandleableMessage) => {
     openSheet({
@@ -215,7 +225,7 @@ const useGetMessagePressActions = ({
           {
             icon: 'edit',
             title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_EDIT,
-            onPress: () => setEditMessage(msg),
+            onPress: () => setMessageToEdit(msg),
           },
           {
             icon: 'delete',
@@ -278,7 +288,14 @@ const useGetMessagePressActions = ({
     }
 
     if (sheetItems.length > 0) {
-      response.onLongPress = () => openSheet({ sheetItems });
+      response.onLongPress = () => {
+        openSheet({
+          sheetItems,
+          HeaderComponent: shouldRenderReaction(channel, features.reactionEnabled)
+            ? ({ onClose }) => <ReactionAddons.BottomSheet message={msg} channel={channel} onClose={onClose} />
+            : undefined,
+        });
+      };
     }
 
     if (msg.sendingStatus === 'failed') {