@sendbird/uikit-react-native 3.0.4 → 3.1.0

package/src/components/ChannelMessageList/index.tsx

@@ -55,8 +55,10 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
   onPressScrollToBottomButton: (animated?: boolean) => void;
 
   onEditMessage: (message: HandleableMessage) => void;
+  onReplyMessage?: (message: HandleableMessage) => void; // only available on group channel
   onDeleteMessage: (message: HandleableMessage) => Promise<void>;
   onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<void>;
+  onPressParentMessage?: (parentMessage: SendbirdMessage) => void;
   onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
 
   renderMessage: (props: {
@@ -66,6 +68,7 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
     nextMessage?: SendbirdMessage;
     onPress?: () => void;
     onLongPress?: () => void;
+    onPressParentMessage?: ChannelMessageListProps<T>['onPressParentMessage'];
     onShowUserProfile?: UserProfileContextType['show'];
     channel: T;
     currentUserId?: ChannelMessageListProps<T>['currentUserId'];
@@ -91,9 +94,11 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
     hasNext,
     channel,
     onEditMessage,
+    onReplyMessage,
     onDeleteMessage,
     onResendFailedMessage,
     onPressMediaMessage,
+    onPressParentMessage,
     currentUserId,
     renderNewMessagesButton,
     renderScrollToBottomButton,
@@ -119,6 +124,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
     channel,
     currentUserId,
     onEditMessage,
+    onReplyMessage,
     onDeleteMessage,
     onResendFailedMessage,
     onPressMediaMessage,
@@ -134,6 +140,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
       nextMessage: messages[index - 1],
       onPress,
       onLongPress,
+      onPressParentMessage,
       onShowUserProfile: show,
       enableMessageGrouping,
       channel,
@@ -188,11 +195,18 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
   currentUserId,
   onResendFailedMessage,
   onEditMessage,
+  onReplyMessage,
   onDeleteMessage,
   onPressMediaMessage,
 }: Pick<
   ChannelMessageListProps<T>,
-  'channel' | 'currentUserId' | 'onEditMessage' | 'onDeleteMessage' | 'onResendFailedMessage' | 'onPressMediaMessage'
+  | 'channel'
+  | 'currentUserId'
+  | 'onEditMessage'
+  | 'onReplyMessage'
+  | 'onDeleteMessage'
+  | 'onResendFailedMessage'
+  | 'onPressMediaMessage'
 >) => {
   const { colors } = useUIKitTheme();
   const { STRINGS } = useLocalization();
@@ -202,13 +216,18 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
   const { clipboardService, fileService } = usePlatformService();
   const { sbOptions } = useSendbirdChat();
 
+  const onFailureToReSend = (error: Error) => {
+    toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error');
+    Logger.error(STRINGS.TOAST.RESEND_MSG_ERROR, error);
+  };
+
   const handleFailedMessage = (message: HandleableMessage) => {
     openSheet({
       sheetItems: [
         {
           title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_RETRY,
           onPress: () => {
-            onResendFailedMessage(message).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error'));
+            onResendFailedMessage(message).catch(onFailureToReSend);
           },
         },
         {
@@ -257,25 +276,7 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
           toast.show(STRINGS.TOAST.COPY_OK, 'success');
         },
       });
-
-      if (!channel.isEphemeral) {
-        if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
-          sheetItems.push(
-            {
-              icon: 'edit',
-              title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
-              onPress: () => onEditMessage(msg),
-            },
-            {
-              icon: 'delete',
-              title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
-              onPress: () => confirmDelete(msg),
-            },
-          );
-        }
-      }
     }
-
     if (msg.isFileMessage()) {
       sheetItems.push({
         icon: 'download',
@@ -297,17 +298,34 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
             });
         },
       });
-
-      if (!channel.isEphemeral) {
-        if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+    }
+    if (!channel.isEphemeral) {
+      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+        if (msg.isUserMessage()) {
           sheetItems.push({
-            icon: 'delete',
-            title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
-            onPress: () => confirmDelete(msg),
+            icon: 'edit',
+            title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
+            onPress: () => onEditMessage(msg),
           });
         }
+        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':
@@ -342,7 +360,7 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
     if (msg.sendingStatus === 'failed') {
       response.onLongPress = () => handleFailedMessage(msg);
       response.onPress = () => {
-        onResendFailedMessage(msg).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error'));
+        onResendFailedMessage(msg).catch(onFailureToReSend);
       };
     }
 

package/src/components/ChatFlatList/index.tsx

@@ -7,7 +7,7 @@ import { NOOP, SendbirdMessage, getMessageUniqId, useFreshCallback } from '@send
 import FlatListInternal from './FlatListInternal';
 
 let ANDROID_BUG_ALERT_SHOWED = Platform.OS !== 'android';
-const BOTTOM_DETECT_THRESHOLD = 25;
+const BOTTOM_DETECT_THRESHOLD = 50;
 const UNREACHABLE_THRESHOLD = Number.MIN_SAFE_INTEGER;
 
 type Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {

package/src/components/GroupChannelMessageRenderer/GroupChannelMessageFocusAnimation.tsx

@@ -1,13 +1,17 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated, Easing } from 'react-native';
 
+import { useIsFirstMount } from '@sendbird/uikit-utils';
+
 import { MESSAGE_FOCUS_ANIMATION_DELAY, MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../../constants';
 
 const GroupChannelMessageFocusAnimation = (props: React.PropsWithChildren<{ focused: boolean }>) => {
+  const isFirstMount = useIsFirstMount();
   const translateY = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
     if (props.focused) {
+      const delay = MESSAGE_FOCUS_ANIMATION_DELAY + (isFirstMount ? MESSAGE_SEARCH_SAFE_SCROLL_DELAY : 0);
       setTimeout(() => {
         Animated.sequence(
           [
@@ -19,7 +23,7 @@ const GroupChannelMessageFocusAnimation = (props: React.PropsWithChildren<{ focu
             Animated.timing(translateY, { ...value, useNativeDriver: true, easing: Easing.inOut(Easing.ease) }),
           ),
         ).start();
-      }, MESSAGE_SEARCH_SAFE_SCROLL_DELAY + MESSAGE_FOCUS_ANIMATION_DELAY);
+      }, delay);
     }
   }, [props.focused]);
 

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}