@sendbird/uikit-react-native 2.3.0 → 2.4.1

package/src/contexts/UserProfileCtx.tsx

@@ -8,7 +8,7 @@ import type {
   SendbirdMember,
   SendbirdUser,
 } from '@sendbird/uikit-utils';
-import { Logger, PASS, useIIFE } from '@sendbird/uikit-utils';
+import { Logger, PASS, getDefaultGroupChannelCreateParams, useIIFE } from '@sendbird/uikit-utils';
 
 import { LocalizationContext } from '../contexts/LocalizationCtx';
 import { SendbirdChatContext } from '../contexts/SendbirdChatCtx';
@@ -19,20 +19,30 @@ type OnBeforeCreateChannel = (
   users: SendbirdUser[] | SendbirdMember[],
 ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
 
+type ShowOptions = {
+  hideMessageButton?: boolean;
+};
+
 export type UserProfileContextType = {
-  show(user: SendbirdUser | SendbirdMember): void;
+  show(user: SendbirdUser | SendbirdMember, options?: ShowOptions): void;
   hide(): void;
 };
 
 type Props = React.PropsWithChildren<{
   onCreateChannel?: OnCreateChannel;
   onBeforeCreateChannel?: OnBeforeCreateChannel;
+  statusBarTranslucent?: boolean;
 }>;
 
 let WARN_onCreateChannel = false;
 
 export const UserProfileContext = React.createContext<UserProfileContextType | null>(null);
-export const UserProfileProvider = ({ children, onCreateChannel, onBeforeCreateChannel = PASS }: Props) => {
+export const UserProfileProvider = ({
+  children,
+  onCreateChannel,
+  onBeforeCreateChannel = PASS,
+  statusBarTranslucent = true,
+}: Props) => {
   const chatContext = useContext(SendbirdChatContext);
   const localizationContext = useContext(LocalizationContext);
 
@@ -50,32 +60,36 @@ export const UserProfileProvider = ({ children, onCreateChannel, onBeforeCreateC
 
   const [user, setUser] = useState<SendbirdUser | SendbirdMember>();
   const [visible, setVisible] = useState(false);
+  const [hideMessageButton, setHideMessageButton] = useState(false);
 
-  const show: UserProfileContextType['show'] = useCallback((user) => {
+  const show: UserProfileContextType['show'] = useCallback((user, options) => {
     setUser(user);
     setVisible(true);
+    setHideMessageButton(Boolean(options?.hideMessageButton));
   }, []);
 
   const hide: UserProfileContextType['hide'] = useCallback(() => {
     setVisible(false);
   }, []);
 
+  const onDismiss = () => {
+    setUser(undefined);
+    setHideMessageButton(false);
+  };
+
   const userProfileButton = useIIFE(() => {
     const isMe = chatContext.currentUser && user?.userId === chatContext.currentUser.userId;
     if (isMe) return undefined;
+    if (hideMessageButton) return undefined;
 
     const onPressMessageButton = async () => {
       if (user) {
-        const params: SendbirdGroupChannelCreateParams = {
+        const params = getDefaultGroupChannelCreateParams({
           invitedUserIds: [user.userId],
-          name: '',
-          coverUrl: '',
-          isDistinct: false,
-        };
+          currentUserId: chatContext.currentUser?.userId,
+        });
 
-        if (chatContext.currentUser) params.operatorUserIds = [chatContext.currentUser.userId];
         const processedParams = await onBeforeCreateChannel(params, [user]);
-
         hide();
         const channel = await chatContext.sdk.groupChannel.createChannel(processedParams);
 
@@ -102,9 +116,10 @@ export const UserProfileProvider = ({ children, onCreateChannel, onBeforeCreateC
       <Modal
         type={'slide'}
         onClose={hide}
-        onDismiss={() => setUser(undefined)}
+        onDismiss={onDismiss}
         visible={visible && Boolean(user)}
         backgroundStyle={styles.modal}
+        statusBarTranslucent={statusBarTranslucent}
       >
         {user && (
           <ProfileCard

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

@@ -0,0 +1,42 @@
+import React, { useContext } from 'react';
+
+import { getGroupChannelChatAvailableState } from '@sendbird/uikit-utils';
+
+import ChannelInput from '../../../components/ChannelInput';
+import { GroupChannelContexts } from '../module/moduleContext';
+import type { GroupChannelProps } from '../types';
+
+const GroupChannelInput = (props: GroupChannelProps['Input']) => {
+  const {
+    channel,
+    messageToEdit,
+    setMessageToEdit,
+    keyboardAvoidOffset = 0,
+  } = useContext(GroupChannelContexts.Fragment);
+
+  const chatAvailableState = getGroupChannelChatAvailableState(channel);
+
+  return (
+    <ChannelInput
+      channel={channel}
+      messageToEdit={messageToEdit}
+      setMessageToEdit={setMessageToEdit}
+      inputMuted={chatAvailableState.muted}
+      inputFrozen={chatAvailableState.frozen}
+      inputDisabled={chatAvailableState.disabled}
+      keyboardAvoidOffset={keyboardAvoidOffset}
+      shouldRenderInput={props.shouldRenderInput}
+      onPressSendUserMessage={props.onPressSendUserMessage}
+      onPressSendFileMessage={props.onPressSendFileMessage}
+      onPressUpdateUserMessage={props.onPressUpdateUserMessage}
+      onPressUpdateFileMessage={props.onPressUpdateFileMessage}
+      SuggestedMentionList={props.SuggestedMentionList}
+      onSendFileMessage={props.onSendFileMessage}
+      onSendUserMessage={props.onSendUserMessage}
+      onUpdateFileMessage={props.onUpdateFileMessage}
+      onUpdateUserMessage={props.onUpdateUserMessage}
+    />
+  );
+};
+
+export default React.memo(GroupChannelInput);

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

@@ -172,12 +172,12 @@ const useGetMessagePressActions = ({
     openSheet({
       sheetItems: [
         {
-          title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_FAILED_RETRY,
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_RETRY,
           onPress: () =>
             onResendFailedMessage(message).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error')),
         },
         {
-          title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_FAILED_REMOVE,
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_REMOVE,
           titleColor: colors.ui.dialog.default.none.destructive,
           onPress: () => confirmDelete(message),
         },
@@ -186,13 +186,13 @@ const useGetMessagePressActions = ({
   };
   const confirmDelete = (message: HandleableMessage) => {
     alert({
-      title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_TITLE,
+      title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,
       buttons: [
         {
-          text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL,
+          text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL,
         },
         {
-          text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_OK,
+          text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
           style: 'destructive',
           onPress: () => onDeleteMessage(message).catch(() => toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error')),
         },
@@ -214,7 +214,7 @@ const useGetMessagePressActions = ({
     if (msg.isUserMessage()) {
       sheetItems.push({
         icon: 'copy',
-        title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_COPY,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_COPY,
         onPress: () => {
           clipboardService.setString(msg.message || '');
           toast.show(STRINGS.TOAST.COPY_OK, 'success');
@@ -225,12 +225,12 @@ const useGetMessagePressActions = ({
         sheetItems.push(
           {
             icon: 'edit',
-            title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_EDIT,
+            title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
             onPress: () => setMessageToEdit(msg),
           },
           {
             icon: 'delete',
-            title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE,
+            title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
             onPress: () => confirmDelete(msg),
           },
         );
@@ -240,7 +240,7 @@ const useGetMessagePressActions = ({
     if (msg.isFileMessage()) {
       sheetItems.push({
         icon: 'download',
-        title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_SAVE,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_SAVE,
         onPress: async () => {
           if (toMegabyte(msg.size) > 4) {
             toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
@@ -262,7 +262,7 @@ const useGetMessagePressActions = ({
       if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
         sheetItems.push({
           icon: 'delete',
-          title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE,
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
           onPress: () => confirmDelete(msg),
         });
       }

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

@@ -8,7 +8,7 @@ import {
   SendbirdUser,
   SendbirdUserMessage,
   isDifferentChannel,
-  useUniqId,
+  useUniqHandlerId,
 } from '@sendbird/uikit-utils';
 
 import ProviderLayout from '../../../components/ProviderLayout';
@@ -34,14 +34,14 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
 }) => {
   if (!channel) throw new Error('GroupChannel is not provided to GroupChannelModule');
 
-  const id = useUniqId('GroupChannelContextsProvider');
+  const handlerId = useUniqHandlerId('GroupChannelContextsProvider');
   const { STRINGS } = useLocalization();
   const { currentUser, sdk } = useSendbirdChat();
 
   const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);
   const [messageToEdit, setMessageToEdit] = useState<SendbirdUserMessage | SendbirdFileMessage>();
 
-  useChannelHandler(sdk, `GroupChannelContextsProvider_${id}`, {
+  useChannelHandler(sdk, handlerId, {
     onTypingStatusUpdated(eventChannel) {
       if (isDifferentChannel(channel, eventChannel)) return;
       if (!enableTypingIndicator) return;

package/src/domain/groupChannel/types.ts

@@ -3,24 +3,20 @@ import type { FlatListProps } from 'react-native';
 
 import type { UseGroupChannelMessagesOptions } from '@sendbird/uikit-chat-hooks';
 import type {
+  OnBeforeHandler,
   SendbirdFileMessage,
   SendbirdFileMessageCreateParams,
+  SendbirdFileMessageUpdateParams,
   SendbirdGroupChannel,
-  SendbirdMember,
   SendbirdMessage,
   SendbirdUser,
   SendbirdUserMessage,
   SendbirdUserMessageCreateParams,
+  SendbirdUserMessageUpdateParams,
 } from '@sendbird/uikit-utils';
 
-import type { FileType } from '../../platform/types';
-import type { CommonComponent, MentionedUser, Range } from '../../types';
-
-type UserMessageMentionParams = Required<{
-  messageTemplate: SendbirdUserMessageCreateParams['mentionedMessageTemplate'];
-  userIds: SendbirdUserMessageCreateParams['mentionedUserIds'];
-  type: SendbirdUserMessageCreateParams['mentionType'];
-}>;
+import type { ChannelInputProps, SuggestedMentionListProps } from '../../components/ChannelInput';
+import type { CommonComponent } from '../../types';
 
 export interface GroupChannelProps {
   Fragment: {
@@ -28,15 +24,13 @@ export interface GroupChannelProps {
     onChannelDeleted: () => void;
     onPressHeaderLeft: GroupChannelProps['Header']['onPressHeaderLeft'];
     onPressHeaderRight: GroupChannelProps['Header']['onPressHeaderRight'];
-
-    onBeforeSendFileMessage?: (
-      params: SendbirdFileMessageCreateParams,
-    ) => SendbirdFileMessageCreateParams | Promise<SendbirdFileMessageCreateParams>;
-    onBeforeSendUserMessage?: (
-      params: SendbirdUserMessageCreateParams,
-    ) => SendbirdUserMessageCreateParams | Promise<SendbirdUserMessageCreateParams>;
     onPressMediaMessage?: GroupChannelProps['MessageList']['onPressMediaMessage'];
 
+    onBeforeSendUserMessage?: OnBeforeHandler<SendbirdUserMessageCreateParams>;
+    onBeforeSendFileMessage?: OnBeforeHandler<SendbirdFileMessageCreateParams>;
+    onBeforeUpdateUserMessage?: OnBeforeHandler<SendbirdUserMessageUpdateParams>;
+    onBeforeUpdateFileMessage?: OnBeforeHandler<SendbirdFileMessageUpdateParams>;
+
     renderMessage?: GroupChannelProps['MessageList']['renderMessage'];
     renderNewMessagesButton?: GroupChannelProps['MessageList']['renderNewMessagesButton'];
     renderScrollToBottomButton?: GroupChannelProps['MessageList']['renderScrollToBottomButton'];
@@ -95,28 +89,21 @@ export interface GroupChannelProps {
     /** @deprecated `onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead **/
     onPressImageMessage?: (message: SendbirdFileMessage, uri: string) => void;
   };
-  Input: {
-    shouldRenderInput: boolean;
-    onSendFileMessage: (file: FileType) => Promise<void>;
-    onSendUserMessage: (text: string, mention?: UserMessageMentionParams) => Promise<void>;
-    onUpdateFileMessage: (editedFile: FileType, message: SendbirdFileMessage) => Promise<void>;
-    onUpdateUserMessage: (
-      editedText: string,
-      message: SendbirdUserMessage,
-      mention?: UserMessageMentionParams,
-    ) => Promise<void>;
-    SuggestedMentionList: (props: GroupChannelProps['SuggestedMentionList']) => JSX.Element | null;
-  };
+  Input: Pick<
+    ChannelInputProps,
+    | 'shouldRenderInput'
+    | 'onPressSendUserMessage'
+    | 'onPressSendFileMessage'
+    | 'onPressUpdateUserMessage'
+    | 'onPressUpdateFileMessage'
+    | 'SuggestedMentionList'
+    | 'onSendFileMessage'
+    | 'onSendUserMessage'
+    | 'onUpdateFileMessage'
+    | 'onUpdateUserMessage'
+  >;
 
-  SuggestedMentionList: {
-    text: string;
-    selection: Range;
-    topInset: number;
-    bottomInset: number;
-    inputHeight: number;
-    onPressToMention: (user: SendbirdMember, searchStringRange: Range) => void;
-    mentionedUsers: MentionedUser[];
-  };
+  SuggestedMentionList: SuggestedMentionListProps;
   Provider: {
     channel: SendbirdGroupChannel;
     enableTypingIndicator: boolean;

package/src/domain/groupChannelBannedUsers/index.ts

@@ -2,5 +2,6 @@ export { default as GroupChannelBannedUsersList } from './component/GroupChannel
 export { default as GroupChannelBannedUsersHeader } from './component/GroupChannelBannedUsersHeader';
 export { default as GroupChannelBannedUsersStatusLoading } from './component/GroupChannelBannedUsersStatusLoading';
 export { default as GroupChannelBannedUsersStatusEmpty } from './component/GroupChannelBannedUsersStatusEmpty';
+export { default as GroupChannelBannedUsersStatusError } from './component/GroupChannelBannedUsersStatusError';
 export { default as createGroupChannelBannedUsersModule } from './module/createGroupChannelBannedUsersModule';
 export { GroupChannelBannedUsersContextsProvider, GroupChannelBannedUsersContexts } from './module/moduleContext';

package/src/domain/groupChannelList/component/GroupChannelListList.tsx

@@ -4,7 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { PushTriggerOption } from '@sendbird/chat';
 import { useActionMenu, useToast } from '@sendbird/uikit-react-native-foundation';
-import { PASS, SendbirdGroupChannel, getChannelUniqId, useFreshCallback } from '@sendbird/uikit-utils';
+import { NOOP, PASS, SendbirdGroupChannel, getChannelUniqId, useFreshCallback } from '@sendbird/uikit-utils';
 
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import type { GroupChannelListProps } from '../types';
@@ -45,7 +45,7 @@ const GroupChannelListList = ({
         {
           title: STRINGS.GROUP_CHANNEL_LIST.DIALOG_CHANNEL_LEAVE,
           onPress: async () => {
-            channel.leave().then(() => sdk.clearCachedMessages([channel.url]).catch());
+            channel.leave().then(() => sdk.clearCachedMessages([channel.url]).catch(NOOP));
           },
           onError: () => toast.show(STRINGS.TOAST.LEAVE_CHANNEL_ERROR, 'error'),
         },

package/src/domain/groupChannelMutedMembers/component/GroupChannelMutedMembersList.tsx

@@ -10,6 +10,7 @@ const GroupChannelMutedMembersList = ({
   renderUser,
   mutedMembers,
   ListEmptyComponent,
+  onLoadNext,
 }: GroupChannelMutedMembersProps['List']) => {
   const renderItem: ListRenderItem<SendbirdRestrictedUser> = useFreshCallback(({ item }) =>
     renderUser?.({ user: item }),
@@ -24,6 +25,7 @@ const GroupChannelMutedMembersList = ({
       ListEmptyComponent={ListEmptyComponent}
       bounces={false}
       keyExtractor={getUserUniqId}
+      onEndReached={onLoadNext}
     />
   );
 };

package/src/domain/groupChannelOperators/component/GroupChannelOperatorsList.tsx

@@ -11,6 +11,7 @@ const GroupChannelOperatorsList = ({
   operators,
   renderUser,
   ListEmptyComponent,
+  onLoadNext,
 }: GroupChannelOperatorsProps['List']) => {
   const renderItem: ListRenderItem<SendbirdUser> = useFreshCallback(({ item }) => renderUser?.({ user: item }));
   const { left, right } = useSafeAreaInsets();
@@ -23,6 +24,7 @@ const GroupChannelOperatorsList = ({
       ListEmptyComponent={ListEmptyComponent}
       bounces={false}
       keyExtractor={getUserUniqId}
+      onEndReached={onLoadNext}
     />
   );
 };

package/src/domain/groupChannelSettings/component/GroupChannelSettingsInfo.tsx

@@ -24,7 +24,7 @@ const GroupChannelSettingsInfo = (_: GroupChannelSettingsProps['Info']) => {
             channel,
             STRINGS.LABELS.USER_NO_NAME,
             STRINGS.LABELS.CHANNEL_NO_MEMBERS,
-          )}
+          ) || ' '}
         </Text>
       </View>
       <Divider />

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

@@ -9,7 +9,7 @@ import {
   SendbirdGroupChannelUpdateParams,
   isDifferentChannel,
   useForceUpdate,
-  useUniqId,
+  useUniqHandlerId,
 } from '@sendbird/uikit-utils';
 
 import ProviderLayout from '../../../components/ProviderLayout';
@@ -27,9 +27,8 @@ export const GroupChannelSettingsContexts: GroupChannelSettingsContextsType = {
   }),
 };
 
-const HOOK_NAME = 'GroupChannelSettingsContextsProvider';
 export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['Provider'] = ({ children, channel }) => {
-  const uniqId = useUniqId(HOOK_NAME);
+  const handlerId = useUniqHandlerId('GroupChannelSettingsContextsProvider');
   const forceUpdate = useForceUpdate();
   const { STRINGS } = useLocalization();
   const { sdk } = useSendbirdChat();
@@ -41,7 +40,7 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
     forceUpdate();
   };
 
-  useChannelHandler(sdk, `${HOOK_NAME}_${uniqId}`, {
+  useChannelHandler(sdk, handlerId, {
     onChannelChanged: onChannelChanged,
     onChannelFrozen: onChannelChanged,
     onChannelUnfrozen: onChannelChanged,

package/src/domain/openChannel/component/OpenChannelHeader.tsx

@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+
+import { Box, Header, Icon, createStyleSheet, useHeaderStyle } from '@sendbird/uikit-react-native-foundation';
+
+import { useLocalization } from '../../..//hooks/useContext';
+import ChannelCover from '../../../components/ChannelCover';
+import { OpenChannelContexts } from '../module/moduleContext';
+import type { OpenChannelProps } from '../types';
+
+const OpenChannelHeader = ({ onPressHeaderLeft, onPressHeaderRight, rightIconName }: OpenChannelProps['Header']) => {
+  const { headerTitle, channel } = useContext(OpenChannelContexts.Fragment);
+  const { HeaderComponent } = useHeaderStyle();
+  const { STRINGS } = useLocalization();
+
+  return (
+    <HeaderComponent
+      clearTitleMargin
+      title={
+        <Box flexDirection={'row'} alignItems={'center'} style={styles.titleContainer}>
+          <ChannelCover channel={channel} size={34} containerStyle={styles.avatarGroup} />
+          <Box flexShrink={1}>
+            <Header.Title h2>{headerTitle}</Header.Title>
+            <Header.Subtitle style={styles.subtitle}>{STRINGS.OPEN_CHANNEL.HEADER_SUBTITLE(channel)}</Header.Subtitle>
+          </Box>
+        </Box>
+      }
+      left={<Icon icon={'arrow-left'} />}
+      onPressLeft={onPressHeaderLeft}
+      right={<Icon icon={rightIconName} />}
+      onPressRight={onPressHeaderRight}
+    />
+  );
+};
+
+const styles = createStyleSheet({
+  titleContainer: {
+    maxWidth: '100%',
+  },
+  avatarGroup: {
+    marginRight: 8,
+  },
+  subtitle: {
+    marginTop: 2,
+  },
+});
+
+export default React.memo(OpenChannelHeader);

package/src/domain/openChannel/component/OpenChannelInput.tsx

@@ -0,0 +1,80 @@
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+
+import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { SendbirdBaseChannel, getOpenChannelChatAvailableState, useUniqHandlerId } from '@sendbird/uikit-utils';
+
+import ChannelInput from '../../../components/ChannelInput';
+import { UNKNOWN_USER_ID } from '../../../constants';
+import { useSendbirdChat } from '../../../hooks/useContext';
+import { OpenChannelContexts } from '../module/moduleContext';
+import type { OpenChannelProps } from '../types';
+
+const OpenChannelInput = (props: OpenChannelProps['Input']) => {
+  const { sdk, currentUser } = useSendbirdChat();
+
+  const {
+    channel,
+    messageToEdit,
+    setMessageToEdit,
+    keyboardAvoidOffset = 0,
+  } = useContext(OpenChannelContexts.Fragment);
+
+  const [chatAvailableState, setChatAvailableState] = useState({ frozen: false, muted: false, disabled: false });
+
+  const updateChatAvailableState = useCallback(
+    (baseChannel: SendbirdBaseChannel) => {
+      if (baseChannel.isOpenChannel()) {
+        const userId = currentUser?.userId ?? UNKNOWN_USER_ID;
+        getOpenChannelChatAvailableState(baseChannel, userId).then(setChatAvailableState);
+      }
+    },
+    [currentUser?.userId],
+  );
+
+  useEffect(() => {
+    updateChatAvailableState(channel);
+  }, [channel, updateChatAvailableState]);
+
+  const handlerId = useUniqHandlerId('OpenChannelInput');
+  useChannelHandler(
+    sdk,
+    handlerId,
+    {
+      onChannelFrozen(channel) {
+        updateChatAvailableState(channel);
+      },
+      onChannelUnfrozen(channel) {
+        updateChatAvailableState(channel);
+      },
+      onUserMuted(channel) {
+        updateChatAvailableState(channel);
+      },
+      onUserUnmuted(channel) {
+        updateChatAvailableState(channel);
+      },
+      onOperatorUpdated(channel) {
+        updateChatAvailableState(channel);
+      },
+    },
+    'open',
+  );
+
+  return (
+    <ChannelInput
+      channel={channel}
+      messageToEdit={messageToEdit}
+      setMessageToEdit={setMessageToEdit}
+      inputMuted={chatAvailableState.muted}
+      inputFrozen={channel.isFrozen}
+      inputDisabled={chatAvailableState.disabled}
+      keyboardAvoidOffset={keyboardAvoidOffset}
+      shouldRenderInput={props.shouldRenderInput}
+      onPressSendUserMessage={props.onPressSendUserMessage}
+      onPressSendFileMessage={props.onPressSendFileMessage}
+      onPressUpdateUserMessage={props.onPressUpdateUserMessage}
+      onPressUpdateFileMessage={props.onPressUpdateFileMessage}
+    />
+  );
+};
+
+export default React.memo(OpenChannelInput);