feat: apply isMultipleFilesMessageEnabled to Channel&Thread (#817)

Author: HoonBaek

scripts/index.d.ts

@@ -1118,6 +1118,7 @@ declare module "SendbirdUIKitGlobal" {
     onBeforeSendMultipleFilesMessage?: (files: Array<File>, quotedMessage?: SendableMessageType) => MultipleFilesMessageCreateParams;
     disableUserProfile?: boolean;
     renderUserProfile?: (props: { user: User, close: () => void }) => React.ReactElement;
+    isMultipleFilesMessageEnabled?: boolean;
   }
 
   export interface ThreadContextInitialState {

src/modules/Channel/components/MessageInput/index.tsx

@@ -35,6 +35,7 @@ const MessageInputWrapper = (
     renderSendMessageIcon,
   } = props;
   const propDisabled = props.disabled;
+  const channelContext = useChannelContext();
   const {
     currentGroupChannel,
     initialized,
@@ -46,7 +47,7 @@ const MessageInputWrapper = (
     setQuoteMessage,
     messageInputRef,
     renderUserMentionItem,
-  } = useChannelContext();
+  } = channelContext;
   const globalStore = useSendbirdStateContext();
   const { isMobile } = useMediaQueryContext();
   const channel = currentGroupChannel;
@@ -57,8 +58,11 @@ const MessageInputWrapper = (
     userMention,
     isVoiceMessageEnabled,
     logger,
-    isMultipleFilesMessageEnabled,
   } = globalStore.config;
+  const isMultipleFilesMessageEnabled = (
+    channelContext.isMultipleFilesMessageEnabled
+    ?? globalStore.config.isMultipleFilesMessageEnabled
+  );
   const maxUserMentionCount = userMention?.maxMentionCount || 10;
   const maxUserSuggestionCount = userMention?.maxSuggestionCount || 15;
 

src/modules/Channel/index.tsx

@@ -15,6 +15,7 @@ const Channel: React.FC<ChannelProps> = (props: ChannelProps) => {
       channelUrl={props?.channelUrl}
       isReactionEnabled={props?.isReactionEnabled}
       isMessageGroupingEnabled={props?.isMessageGroupingEnabled}
+      isMultipleFilesMessageEnabled={props?.isMultipleFilesMessageEnabled}
       showSearchIcon={props?.showSearchIcon}
       animatedMessage={props?.animatedMessage}
       highlightedMessage={props?.highlightedMessage}

src/modules/Thread/components/ThreadMessageInput/index.tsx

@@ -42,8 +42,8 @@ const ThreadMessageInput = (
     userMention,
     isVoiceMessageEnabled,
     logger,
-    isMultipleFilesMessageEnabled,
   } = config;
+  const threadContext = useThreadContext();
   const {
     currentChannel,
     parentMessage,
@@ -54,8 +54,12 @@ const ThreadMessageInput = (
     isMuted,
     isChannelFrozen,
     allThreadMessages,
-  } = useThreadContext();
+  } = threadContext;
   const messageInputRef = useRef();
+  const isMultipleFilesMessageEnabled = (
+    threadContext.isMultipleFilesMessageEnabled
+    ?? config.isMultipleFilesMessageEnabled
+  );
 
   const disabled = propsDisabled
     || isMuted

src/modules/Thread/context/ThreadProvider.tsx

@@ -48,6 +48,7 @@ export type ThreadProviderProps = {
   // User Profile
   disableUserProfile?: boolean;
   renderUserProfile?: (props: { user: User, close: () => void }) => ReactElement;
+  isMultipleFilesMessageEnabled?: boolean;
 };
 export interface ThreadProviderInterface extends ThreadProviderProps, ThreadContextInitialState {
   // hooks for fetching threads

src/modules/Thread/index.tsx

@@ -19,6 +19,7 @@ const Thread: React.FC<ThreadProps> = (props: ThreadProps) => {
     message,
     onHeaderActionClick,
     onMoveToParentMessage,
+    isMultipleFilesMessageEnabled,
     // onBeforeSend~~~Message
     onBeforeSendUserMessage,
     onBeforeSendFileMessage,
@@ -47,6 +48,7 @@ const Thread: React.FC<ThreadProps> = (props: ThreadProps) => {
         onBeforeSendFileMessage={onBeforeSendFileMessage}
         onBeforeSendVoiceMessage={onBeforeSendVoiceMessage}
         onBeforeSendMultipleFilesMessage={onBeforeSendMultipleFilesMessage}
+        isMultipleFilesMessageEnabled={isMultipleFilesMessageEnabled}
       >
         <ThreadUI
           renderHeader={renderHeader}