@sendbird/uikit-react-native 3.0.4-rc.1 → 3.1.0

package/src/components/GroupChannelMessageRenderer/GroupChannelMessageParentMessage.tsx

@@ -0,0 +1,177 @@
+import React, { useContext, useEffect, useState } from 'react';
+
+import {
+  Box,
+  Icon,
+  ImageWithPlaceholder,
+  PressBox,
+  Text,
+  VideoThumbnail,
+  createStyleSheet,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import {
+  SendbirdFileMessage,
+  SendbirdMessage,
+  SendbirdUserMessage,
+  getAvailableUriFromFileMessage,
+  getFileIconFromMessageType,
+  getMessageType,
+  truncate,
+  useIIFE,
+} from '@sendbird/uikit-utils';
+
+import { GroupChannelContexts } from '../../domain/groupChannel/module/moduleContext';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
+
+type Props = {
+  variant: 'outgoing' | 'incoming';
+  message: SendbirdUserMessage | SendbirdFileMessage;
+  childMessage: SendbirdUserMessage | SendbirdFileMessage;
+  onPress?: (message: SendbirdMessage) => void;
+};
+
+const GroupChannelMessageParentMessage = ({ variant, message, childMessage, onPress }: Props) => {
+  const { currentUser } = useSendbirdChat();
+  const groupChannelPubSub = useContext(GroupChannelContexts.PubSub);
+  const { select, colors, palette } = useUIKitTheme();
+  const { STRINGS } = useLocalization();
+  const { mediaService } = usePlatformService();
+
+  const [parentMessage, setParentMessage] = useState(() => message);
+  const type = getMessageType(parentMessage);
+
+  useEffect(() => {
+    return groupChannelPubSub.subscribe(({ type, data }) => {
+      if (type === 'MESSAGES_UPDATED') {
+        const updatedParent = data.messages.find((it): it is SendbirdUserMessage | SendbirdFileMessage => {
+          return it.messageId === parentMessage.messageId;
+        });
+        if (updatedParent) setParentMessage(updatedParent);
+      }
+    });
+  }, []);
+
+  const renderFileMessageAsVideoThumbnail = (url: string) => {
+    return (
+      <VideoThumbnail
+        style={styles.image}
+        iconSize={18}
+        videoSource={url}
+        fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}
+      />
+    );
+  };
+  const renderFileMessageAsPreview = (url: string) => {
+    return <ImageWithPlaceholder style={styles.image} source={{ uri: url }} />;
+  };
+  const renderFileMessageAsDownloadable = (name: string) => {
+    return (
+      <Box
+        style={styles.bubbleContainer}
+        backgroundColor={select({ light: palette.background100, dark: palette.background400 })}
+      >
+        <Icon
+          icon={getFileIconFromMessageType(type)}
+          size={16}
+          color={colors.onBackground03}
+          containerStyle={styles.fileIcon}
+        />
+        <Text body3 color={colors.onBackground03} numberOfLines={1} ellipsizeMode={'middle'}>
+          {truncate(name, { mode: 'mid', maxLen: 20 })}
+        </Text>
+      </Box>
+    );
+  };
+
+  const parentMessageComponent = useIIFE(() => {
+    switch (type) {
+      case 'user':
+      case 'user.opengraph': {
+        return (
+          <Box
+            style={styles.bubbleContainer}
+            backgroundColor={select({ light: palette.background100, dark: palette.background400 })}
+          >
+            <Text body3 color={colors.onBackground03} suppressHighlighting numberOfLines={2} ellipsizeMode={'tail'}>
+              {(parentMessage as SendbirdUserMessage).message}
+            </Text>
+          </Box>
+        );
+      }
+      case 'file':
+      case 'file.audio': {
+        return renderFileMessageAsDownloadable((parentMessage as SendbirdFileMessage).name);
+      }
+      case 'file.video': {
+        return renderFileMessageAsVideoThumbnail(getAvailableUriFromFileMessage(parentMessage as SendbirdFileMessage));
+      }
+      case 'file.image': {
+        return renderFileMessageAsPreview(getAvailableUriFromFileMessage(parentMessage as SendbirdFileMessage));
+      }
+      default: {
+        return null;
+      }
+    }
+  });
+
+  return (
+    <Box>
+      <Box
+        alignItems={variant === 'outgoing' ? 'flex-end' : 'flex-start'}
+        paddingLeft={variant === 'outgoing' ? 0 : 12}
+        paddingRight={variant === 'outgoing' ? 12 : 0}
+      >
+        <PressBox onPress={() => onPress?.(parentMessage)} style={styles.senderLabel}>
+          <Icon icon={'reply-filled'} size={13} color={colors.onBackground03} containerStyle={{ marginRight: 4 }} />
+          <Text caption1 color={colors.onBackground03}>
+            {STRINGS.LABELS.REPLY_FROM_SENDER_TO_RECEIVER(childMessage, parentMessage, currentUser?.userId)}
+          </Text>
+        </PressBox>
+      </Box>
+      <Box
+        flexDirection={'row'}
+        justifyContent={variant === 'outgoing' ? 'flex-end' : 'flex-start'}
+        style={styles.messageContainer}
+      >
+        <PressBox onPress={() => onPress?.(parentMessage)}>{parentMessageComponent}</PressBox>
+      </Box>
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  messageContainer: {
+    opacity: 0.5,
+    marginTop: 4,
+    marginBottom: -6,
+  },
+  bubbleContainer: {
+    maxWidth: 220,
+    overflow: 'hidden',
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 16,
+    paddingHorizontal: 12,
+    paddingBottom: 12,
+    paddingTop: 6,
+  },
+  image: {
+    width: 156,
+    height: 104,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  fileIcon: {
+    width: 16,
+    height: 16,
+    borderRadius: 10,
+    marginRight: 4,
+    marginTop: 2,
+  },
+  senderLabel: {
+    flexDirection: 'row',
+  },
+});
+
+export default GroupChannelMessageParentMessage;

package/src/components/GroupChannelMessageRenderer/index.tsx

@@ -10,6 +10,7 @@ import {
   calcMessageGrouping,
   getMessageType,
   isMyMessage,
+  shouldRenderParentMessage,
   shouldRenderReaction,
   useIIFE,
 } from '@sendbird/uikit-utils';
@@ -21,12 +22,14 @@ import { ReactionAddons } from '../ReactionAddons';
 import GroupChannelMessageDateSeparator from './GroupChannelMessageDateSeparator';
 import GroupChannelMessageFocusAnimation from './GroupChannelMessageFocusAnimation';
 import GroupChannelMessageOutgoingStatus from './GroupChannelMessageOutgoingStatus';
+import GroupChannelMessageParentMessage from './GroupChannelMessageParentMessage';
 
 const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({
   channel,
   message,
   onPress,
   onLongPress,
+  onPressParentMessage,
   onShowUserProfile,
   enableMessageGrouping,
   focused,
@@ -55,9 +58,11 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     return null;
   });
 
+  const variant = isMyMessage(message, currentUser?.userId) ? 'outgoing' : 'incoming';
+
   const messageProps: Omit<GroupChannelMessageProps<SendbirdMessage>, 'message'> = {
     channel,
-    variant: isMyMessage(message, currentUser?.userId) ? 'outgoing' : 'incoming',
+    variant,
     onPress,
     onLongPress,
     onPressURL: (url) => SBUUtils.openURL(url),
@@ -73,6 +78,14 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     sendingStatus: isMyMessage(message, currentUser?.userId) ? (
       <GroupChannelMessageOutgoingStatus channel={channel} message={message} />
     ) : null,
+    parentMessage: shouldRenderParentMessage(message) ? (
+      <GroupChannelMessageParentMessage
+        variant={variant}
+        childMessage={message}
+        message={message.parentMessage}
+        onPress={onPressParentMessage}
+      />
+    ) : null,
     strings: {
       edited: STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX,
       senderName: ('sender' in message && message.sender.nickname) || STRINGS.LABELS.USER_NO_NAME,
@@ -185,6 +198,8 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
       } else {
         return 16;
       }
+    } else if (nextMessage && shouldRenderParentMessage(nextMessage)) {
+      return 16;
     } else if (groupWithNext) {
       return 2;
     } else {

package/src/components/MessageSearchResultItem.tsx

@@ -10,20 +10,18 @@ import {
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdBaseMessage } from '@sendbird/uikit-utils';
-import { getFileExtension, getFileType, useIIFE } from '@sendbird/uikit-utils';
+import { getFileIconFromMessage, useIIFE } from '@sendbird/uikit-utils';
 
 import type { MessageSearchProps } from '../domain/messageSearch/types';
 import { useLocalization } from '../hooks/useContext';
 
-const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
-
 const MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultItem'] = ({ onPress, message }) => {
   const { colors, select, palette } = useUIKitTheme();
   const { STRINGS } = useLocalization();
 
   const fileIcon = useIIFE(() => {
     if (!message?.isFileMessage()) return undefined;
-    return iconMapper[getFileType(message.type || getFileExtension(message.name))];
+    return getFileIconFromMessage(message);
   });
 
   return (
@@ -49,8 +47,8 @@ const MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultIte
             <Box alignItems={'center'} flexDirection={'row'}>
               {fileIcon && (
                 <Icon
-                  size={18}
                   icon={fileIcon}
+                  size={18}
                   color={colors.onBackground02}
                   containerStyle={[
                     styles.bodyIcon,

package/src/components/ReactionAddons/BottomSheetReactionAddon.tsx

@@ -24,14 +24,13 @@ const BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {
   useChannelHandler(sdk, handlerId, {
     async onReactionUpdated(eventChannel, event) {
       if (channel?.url === eventChannel.url && event.messageId === message?.messageId) {
-        updateReactionFocusedItem({
-          message: await sdk.message.getMessage({
-            includeReactions: true,
-            messageId: message.messageId,
-            channelUrl: message.channelUrl,
-            channelType: message.channelType,
-          }),
+        const msg = await sdk.message.getMessage({
+          includeReactions: true,
+          messageId: message.messageId,
+          channelUrl: message.channelUrl,
+          channelType: message.channelType,
         });
+        if (msg) updateReactionFocusedItem({ message: msg });
       }
     },
   });

package/src/containers/GroupChannelPreviewContainer.tsx

@@ -12,8 +12,9 @@ import {
 import {
   SendbirdGroupChannel,
   SendbirdUser,
-  getFileExtension,
-  getFileType,
+  convertFileTypeToMessageType,
+  getFileIconFromMessageType,
+  getFileTypeFromMessage,
   isDifferentChannel,
   isMyMessage,
   useIIFE,
@@ -24,8 +25,6 @@ import ChannelCover from '../components/ChannelCover';
 import { DEFAULT_LONG_PRESS_DELAY } from '../constants';
 import { useLocalization, useSendbirdChat } from '../hooks/useContext';
 
-const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
-
 type Props = {
   channel: SendbirdGroupChannel;
   onPress: () => void;
@@ -54,10 +53,10 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
     else return STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_BODY(channel);
   });
 
-  const fileIcon = useIIFE(() => {
+  const fileType = useIIFE(() => {
     if (!channel.lastMessage?.isFileMessage()) return undefined;
     if (typingUsers.length > 0) return undefined;
-    return iconMapper[getFileType(channel.lastMessage.type || getFileExtension(channel.lastMessage.name))];
+    return getFileTypeFromMessage(channel.lastMessage);
   });
 
   const titleCaptionIcon = useIIFE(() => {
@@ -99,7 +98,7 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
         titleCaptionLeft={titleCaptionIcon}
         titleCaption={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE_CAPTION(channel)}
         body={bodyText}
-        bodyIcon={fileIcon}
+        bodyIcon={fileType && getFileIconFromMessageType(convertFileTypeToMessageType(fileType))}
         badgeCount={unreadMessageCount}
         mentioned={channel.unreadMentionCount > 0}
         mentionTrigger={mentionManager.config.trigger}

package/src/containers/SendbirdUIKitContainer.tsx

@@ -2,7 +2,7 @@ import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Platform } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
-import Sendbird from '@sendbird/chat';
+import Sendbird, { DeviceOsPlatform, SendbirdPlatform, SendbirdProduct } from '@sendbird/chat';
 import { GroupChannelModule } from '@sendbird/chat/groupChannel';
 import { OpenChannelModule } from '@sendbird/chat/openChannel';
 import type { HeaderStyleContextType, UIKitTheme } from '@sendbird/uikit-react-native-foundation';
@@ -76,7 +76,9 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
   } & Partial<ChatRelatedFeaturesInUIKit>;
   uikitOptions?: PartialDeep<{
     common: SBUConfig['common'];
-    groupChannel: Omit<SBUConfig['groupChannel']['channel'], UnimplementedFeatures>;
+    groupChannel: Omit<SBUConfig['groupChannel']['channel'], UnimplementedFeatures> & {
+      replyType: Extract<SBUConfig['groupChannel']['channel']['replyType'], 'none' | 'quote_reply'>;
+    };
     groupChannelList: SBUConfig['groupChannel']['channelList'];
     groupChannelSettings: SBUConfig['groupChannel']['setting'];
     openChannel: SBUConfig['openChannel']['channel'];
@@ -169,13 +171,11 @@ const SendbirdUIKitContainer = ({
     }
 
     return () => {
-      if (!isFirstMount) {
-        unsubscribes.current.forEach((u) => {
-          try {
-            u();
-          } catch {}
-        });
-      }
+      unsubscribes.current.forEach((u) => {
+        try {
+          u();
+        } catch {}
+      });
     };
   }, [appId, internalStorage]);
 
@@ -288,7 +288,17 @@ const initializeSendbird = (
     chatSDK = onInitialized(chatSDK);
   }
 
-  if (SendbirdUIKit.VERSION) {
+  const platform = getDeviceOSPlatform();
+  if (SendbirdUIKit.VERSION && platform) {
+    const deviceOSInfo = { platform, version: String(Platform.Version) };
+    const customData = { platform_version: getReactNativeVersion() };
+    const uikitExtension = {
+      product: SendbirdProduct.UIKIT_CHAT,
+      version: SendbirdUIKit.VERSION,
+      platform: SendbirdPlatform.REACT_NATIVE,
+    };
+
+    chatSDK.addSendbirdExtensions([uikitExtension], deviceOSInfo, customData);
     chatSDK.addExtension('sb_uikit', SendbirdUIKit.VERSION);
   }
 
@@ -331,4 +341,24 @@ const initializeSendbird = (
   return { chatSDK, unsubscribes };
 };
 
+function getDeviceOSPlatform() {
+  switch (Platform.OS) {
+    case 'android':
+      return DeviceOsPlatform.ANDROID;
+    case 'ios':
+      return DeviceOsPlatform.IOS;
+    case 'web':
+      return DeviceOsPlatform.WEB;
+    case 'windows':
+      return DeviceOsPlatform.WINDOWS;
+    default:
+      return undefined;
+  }
+}
+
+function getReactNativeVersion() {
+  const { major, minor, patch } = Platform.constants.reactNativeVersion;
+  return `${major}.${minor}.${patch}`;
+}
+
 export default SendbirdUIKitContainer;

package/src/contexts/SendbirdChatCtx.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { useAppFeatures } from '@sendbird/uikit-chat-hooks';
 import { SBUConfig, useUIKitConfig } from '@sendbird/uikit-tools';
@@ -144,6 +144,12 @@ export const SendbirdChatProvider = ({
     else if (status === 'background') sdkInstance.connectionState === 'OPEN' && sdkInstance.setBackgroundState();
   });
 
+  useEffect(() => {
+    return () => {
+      sdkInstance.disconnect().then(() => _setCurrentUser(undefined));
+    };
+  }, [sdkInstance]);
+
   const value: SendbirdChatContextType = {
     sdk: sdkInstance,
     emojiManager,

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

@@ -9,9 +9,11 @@ import type { GroupChannelProps } from '../types';
 const GroupChannelInput = (props: GroupChannelProps['Input']) => {
   const {
     channel,
+    keyboardAvoidOffset = 0,
     messageToEdit,
     setMessageToEdit,
-    keyboardAvoidOffset = 0,
+    messageToReply,
+    setMessageToReply,
   } = useContext(GroupChannelContexts.Fragment);
 
   const chatAvailableState = getGroupChannelChatAvailableState(channel);
@@ -21,6 +23,8 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
       channel={channel}
       messageToEdit={messageToEdit}
       setMessageToEdit={setMessageToEdit}
+      messageToReply={messageToReply}
+      setMessageToReply={setMessageToReply}
       inputMuted={chatAvailableState.muted}
       inputFrozen={chatAvailableState.frozen}
       inputDisabled={chatAvailableState.disabled}

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

@@ -2,22 +2,26 @@ import React, { useContext, useEffect, useRef } from 'react';
 import type { FlatList } from 'react-native';
 
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { useToast } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
-import { isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { isDifferentChannel, useFreshCallback, useIsFirstMount, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import ChannelMessageList from '../../../components/ChannelMessageList';
-import { MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../../../constants';
-import { useSendbirdChat } from '../../../hooks/useContext';
+import { MESSAGE_FOCUS_ANIMATION_DELAY, MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../../../constants';
+import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
 
 const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
+  const toast = useToast();
+  const { STRINGS } = useLocalization();
   const { sdk } = useSendbirdChat();
-  const { setMessageToEdit } = useContext(GroupChannelContexts.Fragment);
+  const { setMessageToEdit, setMessageToReply } = useContext(GroupChannelContexts.Fragment);
   const { subscribe } = useContext(GroupChannelContexts.PubSub);
 
   const id = useUniqHandlerId('GroupChannelMessageList');
   const ref = useRef<FlatList<SendbirdMessage>>(null);
+  const isFirstMount = useIsFirstMount();
 
   // FIXME: Workaround, should run after data has been applied to UI.
   const lazyScrollToBottom = (animated = false, timeout = 0) => {
@@ -33,22 +37,35 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     }, timeout);
   };
 
-  useEffect(() => {
-    if (props.searchItem) {
-      const createdAt = props.searchItem.startingPoint;
-      const foundMessageIndex = props.messages.findIndex((it) => it.createdAt === createdAt);
-      const isIncludedInList = foundMessageIndex > -1;
-      if (isIncludedInList) {
-        lazyScrollToIndex(foundMessageIndex, true, MESSAGE_SEARCH_SAFE_SCROLL_DELAY);
+  const scrollToMessage = useFreshCallback((createdAt: number, focusAnimated = false): boolean => {
+    const foundMessageIndex = props.messages.findIndex((it) => it.createdAt === createdAt);
+    const isIncludedInList = foundMessageIndex > -1;
+
+    if (isIncludedInList) {
+      if (focusAnimated) {
+        setTimeout(() => props.onUpdateSearchItem({ startingPoint: createdAt }), MESSAGE_FOCUS_ANIMATION_DELAY);
+      }
+      lazyScrollToIndex(foundMessageIndex, true, isFirstMount ? MESSAGE_SEARCH_SAFE_SCROLL_DELAY : 0);
+    } else {
+      if (props.channel.messageOffsetTimestamp <= createdAt) {
+        if (focusAnimated) props.onUpdateSearchItem({ startingPoint: createdAt });
+        props.onResetMessageListWithStartingPoint(createdAt);
+      } else {
+        return false;
       }
     }
-  }, [props.searchItem]);
+
+    return true;
+  });
 
   const scrollToBottom = useFreshCallback((animated = false) => {
     if (props.hasNext()) {
+      props.onUpdateSearchItem(undefined);
+      props.onScrolledAwayFromBottom(false);
+
       props.onResetMessageList(() => {
-        lazyScrollToBottom(animated);
         props.onScrolledAwayFromBottom(false);
+        lazyScrollToBottom(animated);
       });
     } else {
       lazyScrollToBottom(animated);
@@ -85,11 +102,27 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     });
   }, [props.scrolledAwayFromBottom]);
 
+  // Only trigger once when message list mount with initial props.searchItem
+  // - Search screen + searchItem > mount message list
+  // - Reset message list + searchItem > re-mount message list
+  useEffect(() => {
+    if (isFirstMount && props.searchItem) {
+      scrollToMessage(props.searchItem.startingPoint);
+    }
+  }, [isFirstMount]);
+
+  const onPressParentMessage = useFreshCallback((message: SendbirdMessage) => {
+    const canScrollToParent = scrollToMessage(message.createdAt, true);
+    if (!canScrollToParent) toast.show(STRINGS.TOAST.FIND_PARENT_MSG_ERROR, 'error');
+  });
+
   return (
     <ChannelMessageList
       {...props}
       ref={ref}
+      onReplyMessage={setMessageToReply}
       onEditMessage={setMessageToEdit}
+      onPressParentMessage={onPressParentMessage}
       onPressNewMessagesButton={scrollToBottom}
       onPressScrollToBottomButton={scrollToBottom}
     />

package/src/domain/groupChannel/module/moduleContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'react';
+import React, { createContext, useCallback, useState } from 'react';
 
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import {
@@ -21,6 +21,7 @@ export const GroupChannelContexts: GroupChannelContextsType = {
     headerTitle: '',
     channel: {} as SendbirdGroupChannel,
     setMessageToEdit: NOOP,
+    setMessageToReply: NOOP,
   }),
   TypingIndicator: createContext({
     typingUsers: [] as SendbirdUser[],
@@ -46,8 +47,40 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
 
   const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);
   const [messageToEdit, setMessageToEdit] = useState<SendbirdUserMessage | SendbirdFileMessage>();
+  const [messageToReply, setMessageToReply] = useState<SendbirdUserMessage | SendbirdFileMessage>();
+
+  const updateInputMode = (mode: 'send' | 'edit' | 'reply', message?: SendbirdUserMessage | SendbirdFileMessage) => {
+    if (mode === 'send' || !message) {
+      setMessageToEdit(undefined);
+      setMessageToReply(undefined);
+      return;
+    } else if (mode === 'edit') {
+      setMessageToEdit(message);
+      setMessageToReply(undefined);
+      return;
+    } else if (mode === 'reply') {
+      setMessageToEdit(undefined);
+      setMessageToReply(message);
+      return;
+    }
+  };
 
   useChannelHandler(sdk, handlerId, {
+    onMessageDeleted(_, messageId) {
+      if (messageToReply?.messageId === messageId) {
+        setMessageToReply(undefined);
+      }
+    },
+    onChannelFrozen(frozenChannel) {
+      if (frozenChannel.url === channel.url) {
+        setMessageToReply(undefined);
+      }
+    },
+    onUserMuted(mutedChannel, user) {
+      if (mutedChannel.url === channel.url && user.userId === sdk.currentUser?.userId) {
+        setMessageToReply(undefined);
+      }
+    },
     onTypingStatusUpdated(eventChannel) {
       if (isDifferentChannel(channel, eventChannel)) return;
       if (!enableTypingIndicator) return;
@@ -61,9 +94,11 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
         value={{
           headerTitle: STRINGS.GROUP_CHANNEL.HEADER_TITLE(currentUser?.userId ?? '', channel),
           channel,
-          messageToEdit,
-          setMessageToEdit,
           keyboardAvoidOffset,
+          messageToEdit,
+          setMessageToEdit: useCallback((message) => updateInputMode('edit', message), []),
+          messageToReply,
+          setMessageToReply: useCallback((message) => updateInputMode('reply', message), []),
         }}
       >
         <GroupChannelContexts.TypingIndicator.Provider value={{ typingUsers }}>

package/src/domain/groupChannel/types.ts

@@ -73,6 +73,10 @@ export interface GroupChannelProps {
     | 'searchItem'
   > & {
     onResetMessageList: (callback?: () => void) => void;
+    onResetMessageListWithStartingPoint: (startingPoint: number, callback?: () => void) => void;
+
+    // Changing the search item will trigger the focus animation on messages.
+    onUpdateSearchItem: (searchItem?: GroupChannelProps['MessageList']['searchItem']) => void;
   };
   Input: Pick<
     ChannelInputProps,
@@ -102,10 +106,12 @@ export interface GroupChannelProps {
 export interface GroupChannelContextsType {
   Fragment: React.Context<{
     headerTitle: string;
+    keyboardAvoidOffset?: number;
     channel: SendbirdGroupChannel;
     messageToEdit?: SendbirdUserMessage | SendbirdFileMessage;
     setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
-    keyboardAvoidOffset?: number;
+    messageToReply?: SendbirdUserMessage | SendbirdFileMessage;
+    setMessageToReply: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
   }>;
   TypingIndicator: React.Context<{
     typingUsers: SendbirdUser[];
@@ -132,7 +138,7 @@ export type GroupChannelPubSubContextPayload =
       };
     }
   | {
-      type: 'MESSAGES_RECEIVED';
+      type: 'MESSAGES_RECEIVED' | 'MESSAGES_UPDATED';
       data: {
         messages: SendbirdMessage[];
       };