@sendbird/uikit-react-native 3.5.3 → 3.6.0

package/src/domain/groupChannelThread/component/GroupChannelThreadMessageList.tsx

@@ -0,0 +1,105 @@
+import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
+
+import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+
+import ChannelThreadMessageList from '../../../components/ChannelThreadMessageList';
+import { useSendbirdChat } from '../../../hooks/useContext';
+import { GroupChannelThreadContexts } from '../module/moduleContext';
+import type { GroupChannelThreadProps } from '../types';
+
+const GroupChannelThreadMessageList = (props: GroupChannelThreadProps['MessageList']) => {
+  const { sdk } = useSendbirdChat();
+  const { setMessageToEdit } = useContext(GroupChannelThreadContexts.Fragment);
+  const { subscribe } = useContext(GroupChannelThreadContexts.PubSub);
+  const { flatListRef, lazyScrollToBottom, lazyScrollToIndex } = useContext(GroupChannelThreadContexts.MessageList);
+
+  const id = useUniqHandlerId('GroupChannelThreadMessageList');
+  const ignorePropReached = useRef(false);
+
+  const _onTopReached = () => {
+    if (!ignorePropReached.current) {
+      props.onTopReached();
+    }
+  };
+
+  const _onBottomReached = () => {
+    if (!ignorePropReached.current) {
+      props.onBottomReached();
+    }
+  };
+
+  const scrollToBottom = useFreshCallback(async (animated = false) => {
+    if (props.hasNext()) {
+      props.onScrolledAwayFromBottom(false);
+
+      await props.onResetMessageList();
+      props.onScrolledAwayFromBottom(false);
+      lazyScrollToBottom({ animated });
+    } else {
+      lazyScrollToBottom({ animated });
+    }
+  });
+
+  useLayoutEffect(() => {
+    if (props.startingPoint) {
+      const foundMessageIndex = props.messages.findIndex((it) => it.createdAt === props.startingPoint);
+      const isIncludedInList = foundMessageIndex > -1;
+      if (isIncludedInList) {
+        ignorePropReached.current = true;
+        const timeout = 300;
+        lazyScrollToIndex({ index: foundMessageIndex, animated: true, timeout: timeout });
+        setTimeout(() => {
+          ignorePropReached.current = false;
+        }, timeout + 50);
+      }
+    }
+  }, [props.startingPoint]);
+
+  useChannelHandler(sdk, id, {
+    onReactionUpdated(channel, event) {
+      if (isDifferentChannel(channel, props.channel)) return;
+      const recentMessage = props.messages[0];
+      const isRecentMessage = recentMessage && recentMessage.messageId === event.messageId;
+      const scrollReachedBottomAndCanScroll = !props.scrolledAwayFromBottom && !props.hasNext();
+      if (isRecentMessage && scrollReachedBottomAndCanScroll) {
+        lazyScrollToBottom({ animated: true, timeout: 250 });
+      }
+    },
+  });
+
+  useEffect(() => {
+    return subscribe(({ type }) => {
+      switch (type) {
+        case 'TYPING_BUBBLE_RENDERED':
+        case 'MESSAGES_RECEIVED': {
+          if (!props.scrolledAwayFromBottom) {
+            scrollToBottom(true);
+          }
+          break;
+        }
+        case 'MESSAGE_SENT_SUCCESS':
+        case 'MESSAGE_SENT_PENDING': {
+          scrollToBottom(false);
+          break;
+        }
+      }
+    });
+  }, [props.scrolledAwayFromBottom]);
+
+  return (
+    <ChannelThreadMessageList
+      {...props}
+      ref={flatListRef}
+      onTopReached={_onTopReached}
+      onBottomReached={_onBottomReached}
+      onEditMessage={setMessageToEdit}
+      onPressNewMessagesButton={scrollToBottom}
+      onPressScrollToBottomButton={scrollToBottom}
+      renderNewMessagesButton={null}
+      renderScrollToBottomButton={null}
+    />
+  );
+};
+
+export default React.memo(GroupChannelThreadMessageList);

package/src/domain/groupChannelThread/component/GroupChannelThreadParentMessageInfo.tsx

@@ -0,0 +1,326 @@
+import React, { useContext } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import {
+  Avatar,
+  BottomSheetItem,
+  Divider,
+  Icon,
+  Text,
+  createStyleSheet,
+  useAlert,
+  useBottomSheet,
+  useToast,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import {
+  Logger,
+  SendbirdFileMessage,
+  SendbirdMessage,
+  SendbirdUserMessage,
+  getAvailableUriFromFileMessage,
+  getFileExtension,
+  getFileType,
+  isMyMessage,
+  isVoiceMessage,
+  shouldRenderReaction,
+  toMegabyte,
+} from '@sendbird/uikit-utils';
+
+import ThreadParentMessageRenderer, {
+  ThreadParentMessageRendererProps,
+} from '../../../components/ThreadParentMessageRenderer';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../../hooks/useContext';
+import SBUUtils from '../../../libs/SBUUtils';
+import { GroupChannelThreadContexts } from '../module/moduleContext';
+import type { GroupChannelThreadProps } from '../types';
+import { ReactionAddons } from './../../../components/ReactionAddons';
+
+type PressActions = { onPress?: () => void; onLongPress?: () => void; bottomSheetItem?: BottomSheetItem };
+type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
+type CreateMessagePressActions = (params: { message: SendbirdMessage }) => PressActions;
+
+const GroupChannelThreadParentMessageInfo = (props: GroupChannelThreadProps['ParentMessageInfo']) => {
+  const { channel, parentMessage, setMessageToEdit } = useContext(GroupChannelThreadContexts.Fragment);
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+  const { sbOptions } = useSendbirdChat();
+
+  const nickName = parentMessage.sender?.nickname || STRINGS.LABELS.USER_NO_NAME;
+  const messageTimestamp = STRINGS.GROUP_CHANNEL_THREAD.PARENT_MESSAGE_TIME(parentMessage);
+  const replyCountText = STRINGS.GROUP_CHANNEL_THREAD.REPLY_COUNT(parentMessage.threadInfo?.replyCount || 0);
+  const createMessagePressActions = useCreateMessagePressActions({
+    channel: props.channel,
+    currentUserId: props.currentUserId,
+    onDeleteMessage: props.onDeleteMessage,
+    onPressMediaMessage: props.onPressMediaMessage,
+    onEditMessage: setMessageToEdit,
+  });
+  const { onPress, onLongPress, bottomSheetItem } = createMessagePressActions({ message: parentMessage });
+
+  const renderMessageInfoAndMenu = () => {
+    return (
+      <View style={styles.infoAndMenuContainer}>
+        <Avatar size={34} uri={parentMessage.sender?.profileUrl} />
+        <View style={styles.userNickAndTimeContainer}>
+          <Text h2 color={colors.onBackground01} numberOfLines={1} style={styles.userNickname}>
+            {nickName}
+          </Text>
+          <Text caption2 color={colors.onBackground03} style={styles.messageTime}>
+            {messageTimestamp}
+          </Text>
+        </View>
+        <TouchableOpacity activeOpacity={0.7} onPress={bottomSheetItem ? onLongPress : undefined}>
+          <Icon icon={'more'} color={colors.onBackground02} />
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
+  const renderReplyCount = (replyCountText: string) => {
+    if (replyCountText) {
+      return (
+        <View style={styles.replyContainer}>
+          <Text caption3 color={colors.onBackground03} style={styles.replyText}>
+            {replyCountText}
+          </Text>
+          <Divider />
+        </View>
+      );
+    } else {
+      return null;
+    }
+  };
+
+  const renderReactionAddons = () => {
+    const configs = sbOptions.uikitWithAppInfo.groupChannel.channel;
+    if (shouldRenderReaction(channel, channel.isSuper ? configs.enableReactionsSupergroup : configs.enableReactions)) {
+      return (
+        <View style={styles.reactionButtonContainer}>
+          <ReactionAddons.Message
+            channel={props.channel}
+            message={parentMessage}
+            reactionAddonType={'thread_parent_message'}
+          />
+        </View>
+      );
+    } else {
+      return null;
+    }
+  };
+
+  const messageProps: ThreadParentMessageRendererProps = {
+    parentMessage,
+    onPress,
+    onLongPress,
+  };
+
+  return (
+    <View>
+      <View style={styles.container}>{renderMessageInfoAndMenu()}</View>
+      <View style={styles.messageContainer}>
+        <ThreadParentMessageRenderer {...messageProps}></ThreadParentMessageRenderer>
+      </View>
+      {renderReactionAddons()}
+      <Divider />
+      {renderReplyCount(replyCountText)}
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    flexDirection: 'column',
+  },
+  infoAndMenuContainer: {
+    flexDirection: 'row',
+    height: 50,
+    padding: 16,
+    paddingBottom: 0,
+  },
+  userNickAndTimeContainer: {
+    flexDirection: 'column',
+    flex: 1,
+    marginLeft: 8,
+  },
+  userNickname: {
+    marginBottom: 2,
+  },
+  messageTime: {
+    marginTop: 2,
+  },
+  contextMenuButton: {
+    width: 34,
+    height: 34,
+    justifyContent: 'flex-end',
+  },
+  messageContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  reactionButtonContainer: {
+    paddingLeft: 16,
+    marginBottom: 16,
+  },
+  replyContainer: {
+    flexDirection: 'column',
+  },
+  replyText: {
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+});
+
+const useCreateMessagePressActions = ({
+  channel,
+  currentUserId,
+  onDeleteMessage,
+  onPressMediaMessage,
+  onEditMessage,
+}: Pick<
+  GroupChannelThreadProps['ParentMessageInfo'],
+  'channel' | 'currentUserId' | 'onDeleteMessage' | 'onPressMediaMessage'
+> & { onEditMessage: (message: HandleableMessage) => void }): CreateMessagePressActions => {
+  const { STRINGS } = useLocalization();
+  const toast = useToast();
+  const { openSheet } = useBottomSheet();
+  const { alert } = useAlert();
+  const { clipboardService, fileService } = usePlatformService();
+  const { sbOptions } = useSendbirdChat();
+
+  const onDeleteFailure = (error: Error) => {
+    toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error');
+    Logger.error(STRINGS.TOAST.DELETE_MSG_ERROR, error);
+  };
+
+  const onCopyText = (message: HandleableMessage) => {
+    if (message.isUserMessage()) {
+      clipboardService.setString(message.message || '');
+      toast.show(STRINGS.TOAST.COPY_OK, 'success');
+    }
+  };
+
+  const onDownloadFile = (message: HandleableMessage) => {
+    if (message.isFileMessage()) {
+      if (toMegabyte(message.size) > 4) {
+        toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
+      }
+
+      fileService
+        .save({ fileUrl: message.url, fileName: message.name, fileType: message.type })
+        .then((response) => {
+          toast.show(STRINGS.TOAST.DOWNLOAD_OK, 'success');
+          Logger.log('File saved to', response);
+        })
+        .catch((err) => {
+          toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');
+          Logger.log('File save failure', err);
+        });
+    }
+  };
+
+  const onOpenFile = (message: HandleableMessage) => {
+    if (message.isFileMessage()) {
+      const fileType = getFileType(message.type || getFileExtension(message.name));
+      if (['image', 'video', 'audio'].includes(fileType)) {
+        onPressMediaMessage?.(message, () => onDeleteMessage?.(message), getAvailableUriFromFileMessage(message));
+      } else {
+        SBUUtils.openURL(message.url);
+      }
+    }
+  };
+
+  const alertForMessageDelete = (message: HandleableMessage) => {
+    alert({
+      title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,
+      buttons: [
+        { text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL },
+        {
+          text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
+          style: 'destructive',
+          onPress: () => {
+            onDeleteMessage?.(message).catch(onDeleteFailure);
+          },
+        },
+      ],
+    });
+  };
+
+  return ({ message }) => {
+    if (!message.isUserMessage() && !message.isFileMessage()) return {};
+
+    const sheetItems: BottomSheetItem['sheetItems'] = [];
+    const menu = {
+      copy: (message: HandleableMessage) => ({
+        icon: 'copy' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_COPY,
+        onPress: () => onCopyText(message),
+      }),
+      edit: (message: HandleableMessage) => ({
+        icon: 'edit' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
+        onPress: () => onEditMessage?.(message),
+      }),
+      delete: (message: HandleableMessage) => ({
+        disabled: message.threadInfo ? message.threadInfo.replyCount > 0 : undefined,
+        icon: 'delete' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
+        onPress: () => alertForMessageDelete(message),
+      }),
+      download: (message: HandleableMessage) => ({
+        icon: 'download' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_SAVE,
+        onPress: () => onDownloadFile(message),
+      }),
+    };
+
+    if (message.isUserMessage()) {
+      sheetItems.push(menu.copy(message));
+      if (!channel.isEphemeral) {
+        if (isMyMessage(message, currentUserId) && message.sendingStatus === 'succeeded') {
+          sheetItems.push(menu.edit(message));
+          sheetItems.push(menu.delete(message));
+        }
+      }
+    }
+
+    if (message.isFileMessage()) {
+      if (!isVoiceMessage(message)) {
+        sheetItems.push(menu.download(message));
+      }
+      if (!channel.isEphemeral) {
+        if (isMyMessage(message, currentUserId) && message.sendingStatus === 'succeeded') {
+          sheetItems.push(menu.delete(message));
+        }
+      }
+    }
+
+    const configs = sbOptions.uikitWithAppInfo.groupChannel.channel;
+    const bottomSheetItem: BottomSheetItem = {
+      sheetItems,
+      HeaderComponent: shouldRenderReaction(
+        channel,
+        channel.isGroupChannel() && (channel.isSuper ? configs.enableReactionsSupergroup : configs.enableReactions),
+      )
+        ? ({ onClose }) => <ReactionAddons.BottomSheet message={message} channel={channel} onClose={onClose} />
+        : undefined,
+    };
+
+    if (message.isFileMessage()) {
+      return {
+        onPress: () => onOpenFile(message),
+        onLongPress: () => openSheet(bottomSheetItem),
+        bottomSheetItem,
+      };
+    } else {
+      return {
+        onPress: undefined,
+        onLongPress: () => openSheet(bottomSheetItem),
+        bottomSheetItem,
+      };
+    }
+  };
+};
+
+export default React.memo(GroupChannelThreadParentMessageInfo);

package/src/domain/groupChannelThread/component/GroupChannelThreadStatusEmpty.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+
+const GroupChannelThreadStatusEmpty = () => {
+  return (
+    <View style={styles.container}>
+      <TypedPlaceholder type={'no-messages'} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});
+
+export default GroupChannelThreadStatusEmpty;

package/src/domain/groupChannelThread/component/GroupChannelThreadStatusLoading.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+
+const GroupChannelThreadStatusLoading = () => {
+  return (
+    <View style={styles.container}>
+      <TypedPlaceholder type={'loading'} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});
+
+export default GroupChannelThreadStatusLoading;

package/src/domain/groupChannelThread/component/GroupChannelThreadSuggestedMentionList.tsx

@@ -0,0 +1,174 @@
+import React, { useContext } from 'react';
+import { Pressable, ScrollView, View, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  Avatar,
+  Divider,
+  Icon,
+  Text,
+  createStyleSheet,
+  useHeaderStyle,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import { conditionChaining } from '@sendbird/uikit-utils';
+
+import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
+import useKeyboardStatus from '../../../hooks/useKeyboardStatus';
+import useMentionSuggestion from '../../../hooks/useMentionSuggestion';
+import { GroupChannelThreadContexts } from '../module/moduleContext';
+import type { GroupChannelThreadProps } from '../types';
+
+const GroupChannelThreadSuggestedMentionList = ({
+  text,
+  selection,
+  inputHeight,
+  bottomInset,
+  onPressToMention,
+  mentionedUsers,
+}: GroupChannelThreadProps['SuggestedMentionList']) => {
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+  const { channel } = useContext(GroupChannelThreadContexts.Fragment);
+  const { sdk, mentionManager } = useSendbirdChat();
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+  const { topInset } = useHeaderStyle();
+  const { left, right } = useSafeAreaInsets();
+
+  const keyboard = useKeyboardStatus();
+
+  const { members, reset, searchStringRange, searchLimited } = useMentionSuggestion({
+    sdk,
+    text,
+    selection,
+    channel,
+    mentionedUsers,
+  });
+
+  const isLandscape = screenWidth > screenHeight;
+  const isShortened = isLandscape && keyboard.visible;
+  const canRenderMembers = members.length > 0;
+  const maxHeight = isShortened ? screenHeight - (topInset + inputHeight + keyboard.height) : styles.suggestion.height;
+
+  const renderLimitGuide = () => {
+    return (
+      <View style={[styles.searchLimited, { borderTopColor: colors.onBackground04 }]}>
+        <Icon icon={'info'} size={20} containerStyle={{ marginRight: 4 }} color={colors.onBackground02} />
+        <Text body3 color={colors.onBackground02}>
+          {STRINGS.GROUP_CHANNEL_THREAD.MENTION_LIMITED(mentionManager.config.mentionLimit)}
+        </Text>
+      </View>
+    );
+  };
+
+  const renderMembers = () => {
+    return (
+      <View>
+        {members.map((member) => {
+          return (
+            <Pressable
+              onPress={() => {
+                onPressToMention(member, searchStringRange);
+                reset();
+              }}
+              key={member.userId}
+              style={styles.userContainer}
+            >
+              <Avatar size={28} uri={member.profileUrl} containerStyle={styles.userAvatar} />
+              <View style={styles.userInfo}>
+                <Text body2 color={colors.onBackground01} numberOfLines={1} style={styles.userNickname}>
+                  {member.nickname || STRINGS.LABELS.USER_NO_NAME}
+                </Text>
+                <Text body3 color={colors.onBackground03} numberOfLines={1} style={styles.userId}>
+                  {member.userId}
+                </Text>
+                <Divider style={{ position: 'absolute', bottom: 0 }} />
+              </View>
+            </Pressable>
+          );
+        })}
+      </View>
+    );
+  };
+
+  return (
+    <Pressable
+      onPress={reset}
+      pointerEvents={canRenderMembers ? 'auto' : 'none'}
+      style={[styles.container, { bottom: inputHeight + bottomInset }]}
+    >
+      <ScrollView
+        bounces={false}
+        keyboardDismissMode={'none'}
+        keyboardShouldPersistTaps={'always'}
+        style={[
+          styles.scrollView,
+          {
+            maxHeight,
+            backgroundColor: colors.background,
+            bottom: keyboard.bottomSpace,
+          },
+          canRenderMembers && {
+            borderTopWidth: 1,
+            borderTopColor: colors.onBackground04,
+          },
+        ]}
+        contentContainerStyle={{ paddingLeft: left, paddingRight: right }}
+      >
+        {conditionChaining([searchLimited, canRenderMembers], [renderLimitGuide(), renderMembers(), null])}
+      </ScrollView>
+    </Pressable>
+  );
+};
+
+const styles = createStyleSheet({
+  suggestion: {
+    height: 196,
+  },
+  container: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+  },
+  scrollView: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+  userContainer: {
+    paddingLeft: 16,
+    flexDirection: 'row',
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  userAvatar: {
+    marginRight: 16,
+  },
+  userInfo: {
+    flexDirection: 'row',
+    flex: 1,
+  },
+  userNickname: {
+    flexShrink: 1,
+    lineHeight: 44,
+    textAlignVertical: 'center',
+    marginRight: 6,
+  },
+  userId: {
+    lineHeight: 44,
+    textAlignVertical: 'center',
+    minWidth: 32,
+    flexShrink: 1,
+    marginRight: 16,
+  },
+  searchLimited: {
+    borderTopWidth: 1,
+    paddingHorizontal: 16,
+    height: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+export default GroupChannelThreadSuggestedMentionList;

package/src/domain/groupChannelThread/index.ts

@@ -0,0 +1,8 @@
+export { default as GroupChannelThreadHeader } from './component/GroupChannelThreadHeader';
+export { default as GroupChannelThreadMessageList } from './component/GroupChannelThreadMessageList';
+export { default as GroupChannelThreadInput } from './component/GroupChannelThreadInput';
+export { default as GroupChannelThreadSuggestedMentionList } from './component/GroupChannelThreadSuggestedMentionList';
+export { default as GroupChannelThreadStatusEmpty } from './component/GroupChannelThreadStatusEmpty';
+export { default as GroupChannelThreadStatusLoading } from './component/GroupChannelThreadStatusLoading';
+export { default as createGroupChannelThreadModule } from './module/createGroupChannelThreadModule';
+export { GroupChannelThreadContextsProvider, GroupChannelThreadContexts } from './module/moduleContext';

package/src/domain/groupChannelThread/module/createGroupChannelThreadModule.tsx

@@ -0,0 +1,35 @@
+import GroupChannelThreadHeader from '../component/GroupChannelThreadHeader';
+import GroupChannelThreadInput from '../component/GroupChannelThreadInput';
+import GroupChannelThreadMessageList from '../component/GroupChannelThreadMessageList';
+import GroupChannelThreadParentMessageInfo from '../component/GroupChannelThreadParentMessageInfo';
+import GroupChannelThreadStatusEmpty from '../component/GroupChannelThreadStatusEmpty';
+import GroupChannelThreadStatusLoading from '../component/GroupChannelThreadStatusLoading';
+import GroupChannelThreadSuggestedMentionList from '../component/GroupChannelThreadSuggestedMentionList';
+import type { GroupChannelThreadModule } from '../types';
+import { GroupChannelThreadContextsProvider } from './moduleContext';
+
+const createGroupChannelThreadModule = ({
+  Header = GroupChannelThreadHeader,
+  ParentMessageInfo = GroupChannelThreadParentMessageInfo,
+  MessageList = GroupChannelThreadMessageList,
+  Input = GroupChannelThreadInput,
+  SuggestedMentionList = GroupChannelThreadSuggestedMentionList,
+  StatusLoading = GroupChannelThreadStatusLoading,
+  StatusEmpty = GroupChannelThreadStatusEmpty,
+  Provider = GroupChannelThreadContextsProvider,
+  ...module
+}: Partial<GroupChannelThreadModule> = {}): GroupChannelThreadModule => {
+  return {
+    Header,
+    ParentMessageInfo,
+    MessageList,
+    Input,
+    SuggestedMentionList,
+    StatusEmpty,
+    StatusLoading,
+    Provider,
+    ...module,
+  };
+};
+
+export default createGroupChannelThreadModule;