@sendbird/uikit-react-native 3.0.4 → 3.1.1

package/lib/typescript/src/containers/SendbirdUIKitContainer.d.ts

@@ -10,7 +10,7 @@ import type { ClipboardServiceInterface, FileServiceInterface, MediaServiceInter
 import type { ErrorBoundaryProps, LocalCacheStorage } from '../types';
 type UnimplementedFeatures = 'enableVoiceMessage' | 'threadReplySelectType' | 'replyType';
 export declare const SendbirdUIKit: Readonly<{
-    VERSION: "3.0.4";
+    VERSION: "3.1.1";
     PLATFORM: string;
     DEFAULT: {
         AUTO_PUSH_TOKEN_REGISTRATION: boolean;
@@ -32,7 +32,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'];

package/lib/typescript/src/domain/groupChannel/component/GroupChannelMessageList.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<(props: Pick<import("../../../components/ChannelMessageList").ChannelMessageListProps<import("@sendbird/chat/groupChannel").GroupChannel>, "channel" | "onTopReached" | "onBottomReached" | "onScrolledAwayFromBottom" | "currentUserId" | "enableMessageGrouping" | "searchItem" | "hasNext" | "onDeleteMessage" | "onResendFailedMessage" | "onPressMediaMessage" | "renderNewMessagesButton" | "renderScrollToBottomButton" | "renderMessage" | "messages" | "newMessages" | "scrolledAwayFromBottom" | "flatListProps"> & {
     onResetMessageList: (callback?: (() => void) | undefined) => void;
+    onResetMessageListWithStartingPoint: (startingPoint: number, callback?: (() => void) | undefined) => void;
+    onUpdateSearchItem: (searchItem?: {
+        startingPoint: number;
+    } | undefined) => void;
 }) => JSX.Element>;
 export default _default;

package/lib/typescript/src/domain/groupChannel/types.d.ts

@@ -34,6 +34,8 @@ export interface GroupChannelProps {
     };
     MessageList: Pick<ChannelMessageListProps<SendbirdGroupChannel>, 'enableMessageGrouping' | 'currentUserId' | 'channel' | 'messages' | 'newMessages' | 'scrolledAwayFromBottom' | 'onScrolledAwayFromBottom' | 'onTopReached' | 'onBottomReached' | 'onResendFailedMessage' | 'onDeleteMessage' | 'onPressMediaMessage' | 'renderMessage' | 'renderNewMessagesButton' | 'renderScrollToBottomButton' | 'flatListProps' | 'hasNext' | 'searchItem'> & {
         onResetMessageList: (callback?: () => void) => void;
+        onResetMessageListWithStartingPoint: (startingPoint: number, callback?: () => void) => void;
+        onUpdateSearchItem: (searchItem?: GroupChannelProps['MessageList']['searchItem']) => void;
     };
     Input: Pick<ChannelInputProps, 'shouldRenderInput' | 'onPressSendUserMessage' | 'onPressSendFileMessage' | 'onPressUpdateUserMessage' | 'onPressUpdateFileMessage' | 'SuggestedMentionList' | 'AttachmentsButton'>;
     SuggestedMentionList: SuggestedMentionListProps;
@@ -52,10 +54,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[];
@@ -78,7 +82,7 @@ export type GroupChannelPubSubContextPayload = {
         message: SendbirdUserMessage | SendbirdFileMessage;
     };
 } | {
-    type: 'MESSAGES_RECEIVED';
+    type: 'MESSAGES_RECEIVED' | 'MESSAGES_UPDATED';
     data: {
         messages: SendbirdMessage[];
     };

package/lib/typescript/src/domain/openChannel/component/OpenChannelHeader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<({ onPressHeaderLeft, onPressHeaderRight, rightIconName }: {
-    rightIconName: "search" | "photo" | "message" | "user" | "document" | "done" | "add" | "chat-hide" | "chat-show" | "archive" | "arrow-left" | "ban" | "broadcast" | "camera" | "channels" | "chat-filled" | "chat" | "checkbox-off" | "checkbox-on" | "chevron-down" | "chevron-right" | "close" | "copy" | "create" | "delete" | "done-all" | "download" | "edit" | "emoji-more" | "error" | "file-audio" | "file-document" | "freeze" | "gif" | "info" | "leave" | "members" | "moderation" | "more" | "mute" | "notifications-filled" | "notifications-off-filled" | "notifications" | "operator" | "play" | "plus" | "question" | "radio-off" | "radio-on" | "refresh" | "remove" | "reply-filled" | "reply" | "send" | "settings-filled" | "spinner" | "streaming" | "supergroup" | "theme" | "thumbnail-none" | "unarchive";
+    rightIconName: "search" | "photo" | "user" | "document" | "done" | "message" | "add" | "chat-hide" | "chat-show" | "archive" | "arrow-left" | "ban" | "broadcast" | "camera" | "channels" | "chat-filled" | "chat" | "checkbox-off" | "checkbox-on" | "chevron-down" | "chevron-right" | "close" | "copy" | "create" | "delete" | "done-all" | "download" | "edit" | "emoji-more" | "error" | "file-audio" | "file-document" | "freeze" | "gif" | "info" | "leave" | "members" | "moderation" | "more" | "mute" | "notifications-filled" | "notifications-off-filled" | "notifications" | "operator" | "play" | "plus" | "question" | "radio-off" | "radio-on" | "refresh" | "remove" | "reply-filled" | "reply" | "send" | "settings-filled" | "spinner" | "streaming" | "supergroup" | "theme" | "thumbnail-none" | "unarchive";
     onPressHeaderLeft: () => void;
     onPressHeaderRight: () => void;
 }) => JSX.Element>;

package/lib/typescript/src/domain/openChannel/types.d.ts

@@ -6,7 +6,6 @@ import type { ChannelInputProps } from '../../components/ChannelInput';
 import type { ChannelMessageListProps } from '../../components/ChannelMessageList';
 import type { CommonComponent } from '../../types';
 import type { PubSub } from '../../utils/pubsub';
-import type { GroupChannelPubSubContextPayload } from '../groupChannel/types';
 export type OpenChannelProps = {
     Fragment: {
         channel: SendbirdOpenChannel;
@@ -54,7 +53,7 @@ export type OpenChannelContextsType = {
         setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
         keyboardAvoidOffset?: number;
     }>;
-    PubSub: React.Context<PubSub<GroupChannelPubSubContextPayload>>;
+    PubSub: React.Context<PubSub<OpenChannelPubSubContextPayload>>;
 };
 export interface OpenChannelModule {
     Provider: CommonComponent<OpenChannelProps['Provider']>;

package/lib/typescript/src/libs/MentionManager.d.ts

@@ -52,9 +52,6 @@ declare class MentionManager {
         mentionedText: string;
         mentionedUsers: MentionedUser[];
     };
-    shouldUseMentionedMessageTemplate: (message?: SendbirdUserMessage | SendbirdFileMessage, mentionEnabled?: boolean) => message is RequiredSpecific<import("@sendbird/chat/message").FileMessage | import("@sendbird/chat/message").UserMessage, "mentionedMessageTemplate" | "mentionedUsers" | "mentionedUserIds" | "mentionType">;
+    shouldUseMentionedMessageTemplate: (message?: SendbirdUserMessage | SendbirdFileMessage, mentionEnabled?: boolean) => boolean;
 }
-type RequiredSpecific<T, K extends keyof T> = T & {
-    [P in K]-?: T[P];
-};
 export default MentionManager;

package/lib/typescript/src/localization/StringSet.type.d.ts

@@ -1,5 +1,5 @@
 import type { Locale } from 'date-fns';
-import type { SendbirdBaseMessage, SendbirdFileMessage, SendbirdGroupChannel, SendbirdMember, SendbirdMessage, SendbirdOpenChannel, SendbirdParticipant, SendbirdUser } from '@sendbird/uikit-utils';
+import type { SendbirdBaseMessage, SendbirdFileMessage, SendbirdGroupChannel, SendbirdMember, SendbirdMessage, SendbirdOpenChannel, SendbirdParticipant, SendbirdUser, SendbirdUserMessage } from '@sendbird/uikit-utils';
 /**
  * StringSet interface
  * Do not configure over 3 depths (for overrides easy)
@@ -218,6 +218,7 @@ export interface StringSet {
         USER_NO_NAME: string;
         CHANNEL_NO_MEMBERS: string;
         TYPING_INDICATOR_TYPINGS: (users: SendbirdUser[]) => string | undefined;
+        REPLY_FROM_SENDER_TO_RECEIVER: (replyMessage: SendbirdUserMessage | SendbirdFileMessage, parentMessage: SendbirdUserMessage | SendbirdFileMessage, currentUserId?: string) => string;
         USER_BAR_ME_POSTFIX: string;
         USER_BAR_OPERATOR: string;
         REGISTER_AS_OPERATOR: string;
@@ -232,6 +233,7 @@ export interface StringSet {
         CHANNEL_INPUT_PLACEHOLDER_ACTIVE: string;
         CHANNEL_INPUT_PLACEHOLDER_DISABLED: string;
         CHANNEL_INPUT_PLACEHOLDER_MUTED: string;
+        CHANNEL_INPUT_PLACEHOLDER_REPLY: string;
         CHANNEL_INPUT_EDIT_OK: string;
         CHANNEL_INPUT_EDIT_CANCEL: string;
         /** ChannelInput > Attachments **/
@@ -239,11 +241,14 @@ export interface StringSet {
         CHANNEL_INPUT_ATTACHMENT_CAMERA_VIDEO: string;
         CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY: string;
         CHANNEL_INPUT_ATTACHMENT_FILES: string;
+        CHANNEL_INPUT_REPLY_PREVIEW_TITLE: (user: SendbirdUser) => string;
+        CHANNEL_INPUT_REPLY_PREVIEW_BODY: (message: SendbirdUserMessage | SendbirdFileMessage) => string;
         /** Channel > Message **/
         CHANNEL_MESSAGE_COPY: string;
         CHANNEL_MESSAGE_EDIT: string;
         CHANNEL_MESSAGE_SAVE: string;
         CHANNEL_MESSAGE_DELETE: string;
+        CHANNEL_MESSAGE_REPLY: string;
         /** Channel > Message > Delete confirm **/
         CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE: string;
         CHANNEL_MESSAGE_DELETE_CONFIRM_OK: string;
@@ -295,6 +300,7 @@ export interface StringSet {
         LEAVE_CHANNEL_ERROR: string;
         UNKNOWN_ERROR: string;
         GET_CHANNEL_ERROR: string;
+        FIND_PARENT_MSG_ERROR: string;
     };
     PROFILE_CARD: {
         BUTTON_MESSAGE: string;

package/lib/typescript/src/platform/types.d.ts

@@ -50,19 +50,22 @@ export interface FilePickerServiceInterface {
 export interface FileSystemServiceInterface {
     save(options?: SaveOptions): Promise<DownloadedPath | null>;
 }
-interface VideoProps {
+export type VideoProps = {
     source: {
         uri: string;
     } | number;
     resizeMode?: 'cover' | 'contain' | 'stretch';
     onLoad?: () => void;
-}
-interface GetVideoThumbnailOptions {
+};
+export type GetVideoThumbnailOptions = {
     url: string;
     timeMills?: number;
     quality?: number;
-}
-interface CompressImageOptions {
+};
+export type GetVideoThumbnailResult = Promise<{
+    path: string;
+} | null>;
+export type CompressImageOptions = {
     /**
      * A uri of image file to compress
      * */
@@ -80,11 +83,8 @@ interface CompressImageOptions {
      * 1 means highest quality and 0 the lowest quality.
      * */
     compressionRate?: number;
-}
-type GetVideoThumbnailResult = Promise<{
-    path: string;
-} | null>;
-type CompressImageResult = Promise<{
+};
+export type CompressImageResult = Promise<{
     uri: string;
     size: number;
 } | null>;
@@ -93,4 +93,3 @@ export interface MediaServiceInterface {
     getVideoThumbnail(options: GetVideoThumbnailOptions): GetVideoThumbnailResult;
     compressImage(options: CompressImageOptions): CompressImageResult;
 }
-export {};

package/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const VERSION = "3.0.4";
+declare const VERSION = "3.1.1";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "3.0.4",
+  "version": "3.1.1",
   "description": "Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.",
   "keywords": [
     "sendbird",
@@ -58,10 +58,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-chat-hooks": "3.0.4",
-    "@sendbird/uikit-react-native-foundation": "3.0.4",
+    "@sendbird/uikit-chat-hooks": "3.1.1",
+    "@sendbird/uikit-react-native-foundation": "3.1.1",
     "@sendbird/uikit-tools": "^0.0.1-alpha.38",
-    "@sendbird/uikit-utils": "3.0.4"
+    "@sendbird/uikit-utils": "3.1.1"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
@@ -105,7 +105,7 @@
     "@react-native-clipboard/clipboard": ">=1.8.5",
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
-    "@sendbird/chat": "^4.9.2",
+    "@sendbird/chat": "^4.9.8",
     "@sendbird/react-native-scrollview-enhancer": "*",
     "date-fns": ">=2.28.0",
     "expo-av": ">=12.0.4",
@@ -204,5 +204,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native"
   },
-  "gitHead": "bf8ff3723f82f75ccf994938d6e5468e6fb669be"
+  "gitHead": "cc1e2d626a4a3278e80d523b4c63fd3719c82441"
 }

package/src/components/ChannelInput/SendInput.tsx

@@ -9,17 +9,31 @@ import {
 } from 'react-native';
 
 import { MentionType } from '@sendbird/chat/message';
+import type { BottomSheetItem } from '@sendbird/uikit-react-native-foundation';
 import {
   Icon,
+  ImageWithPlaceholder,
+  Text,
   TextInput,
+  VideoThumbnail,
   createStyleSheet,
   useAlert,
   useBottomSheet,
   useToast,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
-import type { BottomSheetItem } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdChannel, isImage, shouldCompressImage, useIIFE } from '@sendbird/uikit-utils';
+import {
+  FileIcon,
+  Logger,
+  SendbirdBaseMessage,
+  SendbirdChannel,
+  getFileIconFromMessageType,
+  getMessageType,
+  getThumbnailUriFromFileMessage,
+  isImage,
+  shouldCompressImage,
+  useIIFE,
+} from '@sendbird/uikit-utils';
 
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
 import SBUError from '../../libs/SBUError';
@@ -48,81 +62,192 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
     inputFrozen,
     inputMuted,
     channel,
+    messageToReply,
+    setMessageToReply,
   },
   ref,
 ) {
   const { mentionManager, sbOptions } = useSendbirdChat();
+  const { select, colors, palette } = useUIKitTheme();
   const { STRINGS } = useLocalization();
-  const { colors } = useUIKitTheme();
   const { openSheet } = useBottomSheet();
   const toast = useToast();
+  const { mediaService } = usePlatformService();
+
+  const messageReplyParams = useIIFE(() => {
+    const { groupChannel } = sbOptions.uikit;
+    if (!channel.isGroupChannel() || groupChannel.channel.replyType === 'none' || !messageToReply) return {};
+    return {
+      parentMessageId: messageToReply.messageId,
+      isReplyToChannel: true,
+    };
+  });
 
-  const onFailureToSend = () => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error');
+  const messageMentionParams = useIIFE(() => {
+    const { groupChannel } = sbOptions.uikit;
+    if (!channel.isGroupChannel() || !groupChannel.channel.enableMention) return {};
+    return {
+      mentionType: MentionType.USERS,
+      mentionedUserIds: mentionedUsers.map((it) => it.user.userId),
+      mentionedMessageTemplate: mentionManager.textToMentionedMessageTemplate(
+        text,
+        mentionedUsers,
+        groupChannel.channel.enableMention,
+      ),
+    };
+  });
 
-  const sendUserMessage = () => {
-    const mentionType = MentionType.USERS;
-    const mentionedUserIds = mentionedUsers.map((it) => it.user.userId);
-    const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(
-      text,
-      mentionedUsers,
-      sbOptions.uikit.groupChannel.channel.enableMention,
-    );
+  const onFailureToSend = (error: Error) => {
+    toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error');
+    Logger.error(STRINGS.TOAST.SEND_MSG_ERROR, error);
+  };
 
+  const sendUserMessage = () => {
     onPressSendUserMessage({
       message: text,
-      mentionType,
-      mentionedUserIds,
-      mentionedMessageTemplate,
+      ...messageMentionParams,
+      ...messageReplyParams,
     }).catch(onFailureToSend);
 
     onChangeText('');
+    setMessageToReply?.();
   };
 
-  const sheetItems = useChannelInputItems(channel, (file) => {
-    onPressSendFileMessage({ file }).catch(onFailureToSend);
-  });
+  const sendFileMessage = (file: FileType) => {
+    onPressSendFileMessage({
+      file,
+      ...messageReplyParams,
+    }).catch(onFailureToSend);
+
+    setMessageToReply?.();
+  };
+
+  const sheetItems = useChannelInputItems(channel, sendFileMessage);
   const onPressAttachment = () => openSheet({ sheetItems });
 
   const getPlaceholder = () => {
-    if (!inputDisabled) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE;
-    if (inputFrozen) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
     if (inputMuted) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_MUTED;
+    if (inputFrozen) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
+    if (inputDisabled) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
+    if (messageToReply) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_REPLY;
 
-    return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
+    return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE;
   };
 
-  return (
-    <View style={styles.sendInputContainer}>
-      {AttachmentsButton && <AttachmentsButton onPress={onPressAttachment} disabled={inputDisabled} />}
-      <TextInput
-        ref={ref}
-        multiline
-        disableFullscreenUI
-        onSelectionChange={onSelectionChange}
-        editable={!inputDisabled}
-        onChangeText={onChangeText}
-        style={styles.input}
-        placeholder={getPlaceholder()}
-      >
-        {mentionManager.textToMentionedComponents(
-          text,
-          mentionedUsers,
-          sbOptions.uikit.groupChannel.channel.enableMention,
-        )}
-      </TextInput>
+  const getFileIconAsImage = (url: string) => {
+    return <ImageWithPlaceholder source={{ uri: url }} style={styles.previewImage} />;
+  };
 
-      {Boolean(text.trim()) && (
-        <TouchableOpacity onPress={sendUserMessage} disabled={inputDisabled}>
-          <Icon
-            color={
-              inputDisabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight
-            }
-            icon={'send'}
-            size={24}
-            containerStyle={styles.iconSend}
-          />
-        </TouchableOpacity>
+  const getFileIconAsVideoThumbnail = (url: string) => {
+    return (
+      <VideoThumbnail
+        style={styles.previewImage}
+        iconSize={0}
+        source={url}
+        fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}
+      />
+    );
+  };
+
+  const getFileIconAsSymbol = (icon: FileIcon) => {
+    return (
+      <Icon
+        icon={icon}
+        size={20}
+        color={colors.onBackground02}
+        containerStyle={{
+          backgroundColor: select({
+            light: palette.background100,
+            dark: palette.background500,
+          }),
+          width: 36,
+          height: 36,
+          borderRadius: 10,
+          marginRight: 10,
+          marginTop: 2,
+        }}
+      />
+    );
+  };
+
+  const getFileIcon = (messageToReply: SendbirdBaseMessage) => {
+    if (messageToReply?.isFileMessage()) {
+      const messageType = getMessageType(messageToReply);
+      switch (messageType) {
+        case 'file.image':
+          return getFileIconAsImage(getThumbnailUriFromFileMessage(messageToReply));
+        case 'file.video':
+          return getFileIconAsVideoThumbnail(getThumbnailUriFromFileMessage(messageToReply));
+        default:
+          return getFileIconAsSymbol(getFileIconFromMessageType(messageType));
+      }
+    }
+    return null;
+  };
+
+  return (
+    <View>
+      {messageToReply && (
+        <View
+          style={{
+            flexDirection: 'row',
+            paddingLeft: 18,
+            paddingRight: 16,
+            paddingTop: 10,
+            paddingBottom: 8,
+            alignItems: 'center',
+            borderTopWidth: 1,
+            borderColor: colors.onBackground04,
+          }}
+        >
+          <View style={{ flex: 1, flexDirection: 'row' }}>
+            {getFileIcon(messageToReply)}
+            <View style={{ flex: 1, flexDirection: 'column' }}>
+              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '900', marginBottom: 4 }}>
+                {STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_TITLE(messageToReply.sender)}
+              </Text>
+              <Text numberOfLines={1} style={{ fontSize: 13, color: colors.onBackground03 }}>
+                {STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_BODY(messageToReply)}
+              </Text>
+            </View>
+          </View>
+          <TouchableOpacity onPress={() => setMessageToReply?.(undefined)}>
+            <Icon icon={'close'} size={24} color={colors.onBackground01} containerStyle={styles.iconSend} />
+          </TouchableOpacity>
+        </View>
       )}
+      <View style={styles.sendInputContainer}>
+        {AttachmentsButton && <AttachmentsButton onPress={onPressAttachment} disabled={inputDisabled} />}
+        <TextInput
+          ref={ref}
+          multiline
+          disableFullscreenUI
+          onSelectionChange={onSelectionChange}
+          editable={!inputDisabled}
+          onChangeText={onChangeText}
+          style={styles.input}
+          placeholder={getPlaceholder()}
+        >
+          {mentionManager.textToMentionedComponents(
+            text,
+            mentionedUsers,
+            sbOptions.uikit.groupChannel.channel.enableMention,
+          )}
+        </TextInput>
+
+        {Boolean(text.trim()) && (
+          <TouchableOpacity onPress={sendUserMessage} disabled={inputDisabled}>
+            <Icon
+              color={
+                inputDisabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight
+              }
+              icon={'send'}
+              size={24}
+              containerStyle={styles.iconSend}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
     </View>
   );
 });
@@ -353,6 +478,14 @@ const styles = createStyleSheet({
     marginLeft: 4,
     padding: 4,
   },
+  previewImage: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    marginTop: 2,
+    marginRight: 10,
+    overflow: 'hidden',
+  },
 });
 
 export default SendInput;

package/src/components/ChannelInput/index.tsx

@@ -1,4 +1,4 @@
-import React, { MutableRefObject, useEffect, useRef, useState } from 'react';
+import React, { MutableRefObject, useEffect, useState } from 'react';
 import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -56,6 +56,10 @@ export type ChannelInputProps = {
   messageToEdit: undefined | SendbirdUserMessage | SendbirdFileMessage;
   setMessageToEdit: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
 
+  // reply - only available on group channel
+  messageToReply?: undefined | SendbirdUserMessage | SendbirdFileMessage;
+  setMessageToReply?: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
+
   // mention
   SuggestedMentionList?: (props: SuggestedMentionListProps) => JSX.Element | null;
 
@@ -83,9 +87,8 @@ const ChannelInput = (props: ChannelInputProps) => {
     messageToEdit,
   });
   const inputMode = useIIFE(() => {
-    if (!messageToEdit) return 'send';
-    if (messageToEdit.isFileMessage()) return 'send';
-    return 'edit';
+    if (messageToEdit && !messageToEdit.isFileMessage()) return 'edit';
+    else return 'send';
   });
 
   const mentionAvailable =
@@ -95,7 +98,7 @@ const ChannelInput = (props: ChannelInputProps) => {
   const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
 
   useTypingTrigger(text, channel);
-  useTextPersistenceOnDisabled(text, onChangeText, props.inputDisabled);
+  useTextClearOnDisabled(onChangeText, props.inputDisabled);
   useAutoFocusOnEditMode(textInputRef, messageToEdit);
 
   const onPressToMention = (user: SendbirdMember, searchStringRange: Range) => {
@@ -138,8 +141,8 @@ const ChannelInput = (props: ChannelInputProps) => {
                 onChangeText={onChangeText}
                 autoFocus={AUTO_FOCUS}
                 onSelectionChange={onSelectionChange}
-                messageToEdit={messageToEdit}
                 mentionedUsers={mentionedUsers}
+                messageToEdit={messageToEdit}
                 setMessageToEdit={setMessageToEdit}
               />
             )}
@@ -171,16 +174,9 @@ const useTypingTrigger = (text: string, channel: SendbirdBaseChannel) => {
   }
 };
 
-const useTextPersistenceOnDisabled = (text: string, setText: (val: string) => void, chatDisabled: boolean) => {
-  const textTmpRef = useRef('');
-
+const useTextClearOnDisabled = (setText: (val: string) => void, chatDisabled: boolean) => {
   useEffect(() => {
-    if (chatDisabled) {
-      textTmpRef.current = text;
-      setText('');
-    } else {
-      setText(textTmpRef.current);
-    }
+    if (chatDisabled) setText('');
   }, [chatDisabled]);
 };