@sendbird/uikit-react-native 3.5.4 → 3.6.0

package/src/components/ThreadParentMessageRenderer/ThreadParentMessage.user.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { type RegexTextPattern, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { RegexText, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import { SendbirdUserMessage, urlRegexStrict } from '@sendbird/uikit-utils';
+
+import { ThreadParentMessageRendererProps } from './index';
+
+type Props = ThreadParentMessageRendererProps<{
+  regexTextPatterns?: RegexTextPattern[];
+  renderRegexTextChildren?: (message: SendbirdUserMessage) => string;
+}>;
+
+const ThreadParentMessageUser = (props: Props) => {
+  const userMessage: SendbirdUserMessage = props.parentMessage as SendbirdUserMessage;
+  if (!userMessage) return null;
+
+  const { colors } = useUIKitTheme();
+
+  return (
+    <Text body3 color={colors.onBackground01} suppressHighlighting>
+      <RegexText
+        body3
+        color={colors.onBackground01}
+        patterns={[
+          ...(props.regexTextPatterns ?? []),
+          {
+            regex: urlRegexStrict,
+            replacer({ match, parentProps, keyPrefix, index }) {
+              return (
+                <Text
+                  {...parentProps}
+                  key={`${keyPrefix}-${index}`}
+                  onPress={() => props.onPressURL?.(match)}
+                  style={[parentProps?.style, styles.urlText]}
+                >
+                  {match}
+                </Text>
+              );
+            },
+          },
+        ]}
+      >
+        {props.renderRegexTextChildren?.(userMessage)}
+      </RegexText>
+      {Boolean(userMessage.updatedAt) && (
+        <Text body3 color={colors.onBackground02}>
+          {' (edited)'}
+        </Text>
+      )}
+    </Text>
+  );
+};
+
+const styles = createStyleSheet({
+  bubble: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  urlText: {
+    textDecorationLine: 'underline',
+  },
+});
+
+export default ThreadParentMessageUser;

package/src/components/ThreadParentMessageRenderer/index.tsx

@@ -0,0 +1,194 @@
+import React, { useRef } from 'react';
+
+import { RegexTextPattern, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import {
+  SendbirdFileMessage,
+  type SendbirdUser,
+  SendbirdUserMessage,
+  getMessageType,
+  isMyMessage,
+  isVoiceMessage,
+} from '@sendbird/uikit-utils';
+
+import { VOICE_MESSAGE_META_ARRAY_DURATION_KEY } from '../../constants';
+import SBUUtils from '../../libs/SBUUtils';
+import { usePlatformService, useSendbirdChat } from './../../hooks/useContext';
+import ThreadParentMessageFile from './ThreadParentMessage.file';
+import ThreadParentMessageFileImage from './ThreadParentMessage.file.image';
+import ThreadParentMessageFileVideo from './ThreadParentMessage.file.video';
+import ThreadParentMessageFileVoice, { VoiceFileMessageState } from './ThreadParentMessage.file.voice';
+import ThreadParentMessageUser from './ThreadParentMessage.user';
+import ThreadParentMessageUserOg from './ThreadParentMessage.user.og';
+
+export type ThreadParentMessageRendererProps<AdditionalProps = unknown> = {
+  parentMessage: SendbirdUserMessage | SendbirdFileMessage;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  onPressURL?: (url: string) => void;
+  onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;
+  onToggleVoiceMessage?: (
+    state: VoiceFileMessageState,
+    setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>,
+  ) => Promise<void>;
+} & AdditionalProps;
+
+const ThreadParentMessageRenderer = (props: ThreadParentMessageRendererProps) => {
+  const playerUnsubscribes = useRef<(() => void)[]>([]);
+  const { sbOptions, currentUser, mentionManager } = useSendbirdChat();
+  const { palette } = useUIKitTheme();
+  const { mediaService, playerService } = usePlatformService();
+  const parentMessage = props.parentMessage;
+
+  const resetPlayer = async () => {
+    playerUnsubscribes.current.forEach((unsubscribe) => {
+      try {
+        unsubscribe();
+      } catch {}
+    });
+    playerUnsubscribes.current.length = 0;
+    await playerService.reset();
+  };
+
+  const messageProps: ThreadParentMessageRendererProps = {
+    onPressURL: (url) => SBUUtils.openURL(url),
+    onToggleVoiceMessage: async (state, setState) => {
+      if (isVoiceMessage(parentMessage) && parentMessage.sendingStatus === 'succeeded') {
+        if (playerService.uri === parentMessage.url) {
+          if (playerService.state === 'playing') {
+            await playerService.pause();
+          } else {
+            await playerService.play(parentMessage.url);
+          }
+        } else {
+          if (playerService.state !== 'idle') {
+            await resetPlayer();
+          }
+
+          const shouldSeekToTime = state.duration > state.currentTime && state.currentTime > 0;
+          let seekFinished = !shouldSeekToTime;
+
+          const forPlayback = playerService.addPlaybackListener(({ stopped, currentTime, duration }) => {
+            if (seekFinished) {
+              setState((prevState) => ({ ...prevState, currentTime: stopped ? 0 : currentTime, duration }));
+            }
+          });
+          const forState = playerService.addStateListener((state) => {
+            switch (state) {
+              case 'preparing':
+                setState((prevState) => ({ ...prevState, status: 'preparing' }));
+                break;
+              case 'playing':
+                setState((prevState) => ({ ...prevState, status: 'playing' }));
+                break;
+              case 'idle':
+              case 'paused': {
+                setState((prevState) => ({ ...prevState, status: 'paused' }));
+                break;
+              }
+              case 'stopped':
+                setState((prevState) => ({ ...prevState, status: 'paused' }));
+                break;
+            }
+          });
+          playerUnsubscribes.current.push(forPlayback, forState);
+
+          await playerService.play(parentMessage.url);
+          if (shouldSeekToTime) {
+            await playerService.seek(state.currentTime);
+            seekFinished = true;
+          }
+        }
+      }
+    },
+    ...props,
+  };
+
+  const userMessageProps: {
+    renderRegexTextChildren: (message: SendbirdUserMessage) => string;
+    regexTextPatterns: RegexTextPattern[];
+  } = {
+    renderRegexTextChildren: (message) => {
+      if (
+        mentionManager.shouldUseMentionedMessageTemplate(message, sbOptions.uikit.groupChannel.channel.enableMention)
+      ) {
+        return message.mentionedMessageTemplate;
+      } else {
+        return message.message;
+      }
+    },
+    regexTextPatterns: [
+      {
+        regex: mentionManager.templateRegex,
+        replacer({ match, groups, parentProps, index, keyPrefix }) {
+          const user = parentMessage.mentionedUsers?.find((it) => it.userId === groups[2]);
+          if (user) {
+            const mentionColor =
+              !isMyMessage(parentMessage, currentUser?.userId) && user.userId === currentUser?.userId
+                ? palette.onBackgroundLight01
+                : parentProps?.color;
+
+            return (
+              <Text
+                {...parentProps}
+                key={`${keyPrefix}-${index}`}
+                color={mentionColor}
+                onPress={() => messageProps.onPressMentionedUser?.(user)}
+                onLongPress={messageProps.onLongPress}
+                style={[
+                  parentProps?.style,
+                  { fontWeight: '700' },
+                  user.userId === currentUser?.userId && { backgroundColor: palette.highlight },
+                ]}
+              >
+                {`${mentionManager.asMentionedMessageText(user)}`}
+              </Text>
+            );
+          }
+          return match;
+        },
+      },
+    ],
+  };
+
+  switch (getMessageType(props.parentMessage)) {
+    case 'user': {
+      return <ThreadParentMessageUser {...userMessageProps} {...messageProps} />;
+    }
+    case 'user.opengraph': {
+      return <ThreadParentMessageUserOg {...userMessageProps} {...messageProps} />;
+    }
+    case 'file':
+    case 'file.audio': {
+      return <ThreadParentMessageFile {...messageProps} />;
+    }
+    case 'file.video': {
+      return (
+        <ThreadParentMessageFileVideo
+          fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}
+          {...messageProps}
+        />
+      );
+    }
+    case 'file.image': {
+      return <ThreadParentMessageFileImage {...messageProps} />;
+    }
+    case 'file.voice': {
+      return (
+        <ThreadParentMessageFileVoice
+          durationMetaArrayKey={VOICE_MESSAGE_META_ARRAY_DURATION_KEY}
+          onUnmount={() => {
+            if (isVoiceMessage(parentMessage) && playerService.uri === parentMessage.url) {
+              resetPlayer();
+            }
+          }}
+          {...messageProps}
+        />
+      );
+    }
+    default: {
+      return null;
+    }
+  }
+};
+
+export default React.memo(ThreadParentMessageRenderer);

package/src/containers/SendbirdUIKitContainer.tsx

@@ -38,6 +38,7 @@ import InternalLocalCacheStorage from '../libs/InternalLocalCacheStorage';
 import MentionConfig, { MentionConfigInterface } from '../libs/MentionConfig';
 import MentionManager from '../libs/MentionManager';
 import VoiceMessageConfig, { VoiceMessageConfigInterface } from '../libs/VoiceMessageConfig';
+import VoiceMessageStatusManager from '../libs/VoiceMessageStatusManager';
 import StringSetEn from '../localization/StringSet.en';
 import type { StringSet } from '../localization/StringSet.type';
 import SBUDynamicModule from '../platform/dynamicModule';
@@ -64,7 +65,6 @@ export const SendbirdUIKit = Object.freeze({
   },
 });
 
-type UnimplementedFeatures = 'threadReplySelectType' | 'replyType' | 'enableReactionsSupergroup';
 export type ChatOmittedInitParams = Omit<
   SendbirdChatParams<[GroupChannelModule, OpenChannelModule]>,
   (typeof chatOmitKeys)[number]
@@ -102,8 +102,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     Partial<ChatRelatedFeaturesInUIKit>;
   uikitOptions?: PartialDeep<{
     common: SBUConfig['common'];
-    groupChannel: Omit<SBUConfig['groupChannel']['channel'], UnimplementedFeatures> & {
-      replyType: Extract<SBUConfig['groupChannel']['channel']['replyType'], 'none' | 'quote_reply'>;
+    groupChannel: Omit<SBUConfig['groupChannel']['channel'], 'enableReactionsSupergroup'> & {
       /**
        * @deprecated Currently, this feature is turned off by default. If you wish to use this feature, contact us: {@link https://dashboard.sendbird.com/settings/contact_us?category=feedback_and_feature_requests&product=UIKit}
        */
@@ -180,6 +179,7 @@ const SendbirdUIKitContainer = (props: SendbirdUIKitContainerProps) => {
   const { imageCompressionConfig, voiceMessageConfig, mentionConfig } = useConfigInstance(props);
   const emojiManager = useMemo(() => new EmojiManager(internalStorage), [internalStorage]);
   const mentionManager = useMemo(() => new MentionManager(mentionConfig), [mentionConfig]);
+  const voiceMessageStatusManager = useMemo(() => new VoiceMessageStatusManager(), []);
 
   useLayoutEffect(() => {
     if (!isFirstMount) {
@@ -227,6 +227,7 @@ const SendbirdUIKitContainer = (props: SendbirdUIKitContainerProps) => {
           mentionManager={mentionManager}
           imageCompressionConfig={imageCompressionConfig}
           voiceMessageConfig={voiceMessageConfig}
+          voiceMessageStatusManager={voiceMessageStatusManager}
           enableAutoPushTokenRegistration={
             chatOptions.enableAutoPushTokenRegistration ?? SendbirdUIKit.DEFAULT.AUTO_PUSH_TOKEN_REGISTRATION
           }

package/src/contexts/SendbirdChatCtx.tsx

@@ -14,7 +14,9 @@ import type EmojiManager from '../libs/EmojiManager';
 import type ImageCompressionConfig from '../libs/ImageCompressionConfig';
 import type MentionManager from '../libs/MentionManager';
 import type VoiceMessageConfig from '../libs/VoiceMessageConfig';
+import VoiceMessageStatusManager from '../libs/VoiceMessageStatusManager';
 import type { FileType } from '../platform/types';
+import pubsub, { type PubSub } from '../utils/pubsub';
 
 export interface ChatRelatedFeaturesInUIKit {
   enableAutoPushTokenRegistration: boolean;
@@ -27,10 +29,18 @@ interface Props extends ChatRelatedFeaturesInUIKit, React.PropsWithChildren {
 
   emojiManager: EmojiManager;
   mentionManager: MentionManager;
+  voiceMessageStatusManager: VoiceMessageStatusManager;
   imageCompressionConfig: ImageCompressionConfig;
   voiceMessageConfig: VoiceMessageConfig;
 }
 
+export type GroupChannelFragmentOptionsPubSubContextPayload = {
+  type: 'OVERRIDE_SEARCH_ITEM_STARTING_POINT';
+  data: {
+    startingPoint: number;
+  };
+};
+
 export type SendbirdChatContextType = {
   sdk: SendbirdChatSDK;
   currentUser?: SendbirdUser;
@@ -39,6 +49,7 @@ export type SendbirdChatContextType = {
   // feature related instances
   emojiManager: EmojiManager;
   mentionManager: MentionManager;
+  voiceMessageStatusManager: VoiceMessageStatusManager;
   imageCompressionConfig: ImageCompressionConfig;
   voiceMessageConfig: VoiceMessageConfig;
 
@@ -46,6 +57,9 @@ export type SendbirdChatContextType = {
   updateCurrentUserInfo: (nickname?: string, profile?: string | FileType) => Promise<SendbirdUser>;
   markAsDeliveredWithChannel: (channel: SendbirdGroupChannel) => void;
 
+  groupChannelFragmentOptions: {
+    pubsub: PubSub<GroupChannelFragmentOptionsPubSubContextPayload>;
+  };
   sbOptions: {
     // UIKit options
     uikit: SBUConfig;
@@ -80,6 +94,7 @@ export type SendbirdChatContextType = {
       broadcastChannelEnabled: boolean;
       superGroupChannelEnabled: boolean;
       reactionEnabled: boolean;
+      uploadSizeLimit: number | undefined;
     };
   };
 };
@@ -90,6 +105,7 @@ export const SendbirdChatProvider = ({
   sdkInstance,
   emojiManager,
   mentionManager,
+  voiceMessageStatusManager,
   imageCompressionConfig,
   voiceMessageConfig,
   enableAutoPushTokenRegistration,
@@ -164,11 +180,15 @@ export const SendbirdChatProvider = ({
     mentionManager,
     imageCompressionConfig,
     voiceMessageConfig,
+    voiceMessageStatusManager,
     currentUser,
     setCurrentUser,
 
     updateCurrentUserInfo,
     markAsDeliveredWithChannel,
+    groupChannelFragmentOptions: {
+      pubsub: pubsub<GroupChannelFragmentOptionsPubSubContextPayload>(),
+    },
 
     // TODO: Options should be moved to the common area at the higher level to be passed to the context of each product.
     //  For example, common -> chat context, common -> calls context

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

@@ -2,11 +2,12 @@ import React, { useContext, useEffect } from 'react';
 
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { useToast } from '@sendbird/uikit-react-native-foundation';
-import type { SendbirdMessage } from '@sendbird/uikit-utils';
-import { isDifferentChannel, useFreshCallback, useIsFirstMount, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { SendbirdMessage, SendbirdSendableMessage, useIsFirstMount } from '@sendbird/uikit-utils';
+import { isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import ChannelMessageList from '../../../components/ChannelMessageList';
 import { MESSAGE_FOCUS_ANIMATION_DELAY, MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../../../constants';
+import { GroupChannelFragmentOptionsPubSubContextPayload } from '../../../contexts/SendbirdChatCtx';
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
@@ -14,10 +15,12 @@ import type { GroupChannelProps } from '../types';
 const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   const toast = useToast();
   const { STRINGS } = useLocalization();
-  const { sdk } = useSendbirdChat();
+  const { sdk, sbOptions, groupChannelFragmentOptions } = useSendbirdChat();
   const { setMessageToEdit, setMessageToReply } = useContext(GroupChannelContexts.Fragment);
   const { subscribe } = useContext(GroupChannelContexts.PubSub);
-  const { flatListRef, lazyScrollToBottom, lazyScrollToIndex } = useContext(GroupChannelContexts.MessageList);
+  const { flatListRef, lazyScrollToBottom, lazyScrollToIndex, onPressReplyMessageInThread } = useContext(
+    GroupChannelContexts.MessageList,
+  );
 
   const id = useUniqHandlerId('GroupChannelMessageList');
   const isFirstMount = useIsFirstMount();
@@ -90,6 +93,17 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     });
   }, [props.scrolledAwayFromBottom]);
 
+  useEffect(() => {
+    return groupChannelFragmentOptions.pubsub.subscribe((payload: GroupChannelFragmentOptionsPubSubContextPayload) => {
+      switch (payload.type) {
+        case 'OVERRIDE_SEARCH_ITEM_STARTING_POINT': {
+          scrollToMessageWithCreatedAt(payload.data.startingPoint, false, MESSAGE_SEARCH_SAFE_SCROLL_DELAY);
+          break;
+        }
+      }
+    });
+  }, []);
+
   useEffect(() => {
     // Only trigger once when message list mount with initial props.searchItem
     // - Search screen + searchItem > mount message list
@@ -99,16 +113,31 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     }
   }, [isFirstMount]);
 
-  const onPressParentMessage = useFreshCallback((message: SendbirdMessage) => {
-    const canScrollToParent = scrollToMessageWithCreatedAt(message.createdAt, true, 0);
-    if (!canScrollToParent) toast.show(STRINGS.TOAST.FIND_PARENT_MSG_ERROR, 'error');
-  });
+  const onPressParentMessage = useFreshCallback(
+    (parentMessage: SendbirdMessage, childMessage: SendbirdSendableMessage) => {
+      if (
+        onPressReplyMessageInThread &&
+        sbOptions.uikit.groupChannel.channel.replyType === 'thread' &&
+        sbOptions.uikit.groupChannel.channel.threadReplySelectType === 'thread'
+      ) {
+        if (parentMessage.createdAt >= props.channel.messageOffsetTimestamp) {
+          onPressReplyMessageInThread(parentMessage as SendbirdSendableMessage, childMessage.createdAt);
+        } else {
+          toast.show(STRINGS.TOAST.FIND_PARENT_MSG_ERROR, 'error');
+        }
+      } else {
+        const canScrollToParent = scrollToMessageWithCreatedAt(parentMessage.createdAt, true, 0);
+        if (!canScrollToParent) toast.show(STRINGS.TOAST.FIND_PARENT_MSG_ERROR, 'error');
+      }
+    },
+  );
 
   return (
     <ChannelMessageList
       {...props}
       ref={flatListRef}
       onReplyMessage={setMessageToReply}
+      onReplyInThreadMessage={setMessageToReply}
       onEditMessage={setMessageToEdit}
       onPressParentMessage={onPressParentMessage}
       onPressNewMessagesButton={scrollToBottom}

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

@@ -58,12 +58,13 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
   groupChannelPubSub,
   messages,
   onUpdateSearchItem,
+  onPressReplyMessageInThread,
 }) => {
   if (!channel) throw new Error('GroupChannel is not provided to GroupChannelModule');
 
   const handlerId = useUniqHandlerId('GroupChannelContextsProvider');
   const { STRINGS } = useLocalization();
-  const { currentUser, sdk } = useSendbirdChat();
+  const { currentUser, sdk, sbOptions } = useSendbirdChat();
 
   const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);
   const [messageToEdit, setMessageToEdit] = useState<SendbirdUserMessage | SendbirdFileMessage>();
@@ -90,6 +91,14 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
     }
   };
 
+  const onPressMessageToReply = (parentMessage?: SendbirdUserMessage | SendbirdFileMessage) => {
+    if (sbOptions.uikit.groupChannel.channel.replyType === 'thread' && parentMessage) {
+      onPressReplyMessageInThread?.(parentMessage, Number.MAX_SAFE_INTEGER);
+    } else if (sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
+      updateInputMode('reply', parentMessage);
+    }
+  };
+
   useChannelHandler(sdk, handlerId, {
     onMessageDeleted(_, messageId) {
       if (messageToReply?.messageId === messageId) {
@@ -125,7 +134,7 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
           messageToEdit,
           setMessageToEdit: useCallback((message) => updateInputMode('edit', message), []),
           messageToReply,
-          setMessageToReply: useCallback((message) => updateInputMode('reply', message), []),
+          setMessageToReply: useCallback((message) => onPressMessageToReply(message), []),
         }}
       >
         <GroupChannelContexts.PubSub.Provider value={groupChannelPubSub}>
@@ -136,6 +145,7 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
                 scrollToMessage,
                 lazyScrollToIndex,
                 lazyScrollToBottom,
+                onPressReplyMessageInThread,
               }}
             >
               {children}

package/src/domain/groupChannel/types.ts

@@ -11,6 +11,7 @@ import type {
   SendbirdFileMessageUpdateParams,
   SendbirdGroupChannel,
   SendbirdMessage,
+  SendbirdSendableMessage,
   SendbirdUser,
   SendbirdUserMessage,
   SendbirdUserMessageCreateParams,
@@ -30,6 +31,7 @@ export interface GroupChannelProps {
     onPressHeaderLeft: GroupChannelProps['Header']['onPressHeaderLeft'];
     onPressHeaderRight: GroupChannelProps['Header']['onPressHeaderRight'];
     onPressMediaMessage?: GroupChannelProps['MessageList']['onPressMediaMessage'];
+    onPressReplyMessageInThread?: GroupChannelProps['Provider']['onPressReplyMessageInThread'];
 
     onBeforeSendUserMessage?: OnBeforeHandler<SendbirdUserMessageCreateParams>;
     onBeforeSendFileMessage?: OnBeforeHandler<SendbirdFileMessageCreateParams>;
@@ -114,6 +116,7 @@ export interface GroupChannelProps {
     messages: SendbirdMessage[];
     // Changing the search item will trigger the focus animation on messages.
     onUpdateSearchItem: (searchItem?: GroupChannelProps['MessageList']['searchItem']) => void;
+    onPressReplyMessageInThread: (parentMessage: SendbirdSendableMessage, startingPoint?: number) => void;
   };
 }
 
@@ -171,6 +174,8 @@ export interface GroupChannelContextsType {
       timeout?: number;
       viewPosition?: number;
     }) => void;
+
+    onPressReplyMessageInThread?: (parentMessage: SendbirdSendableMessage, startingPoint?: number) => void;
   }>;
 }
 export interface GroupChannelModule {

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

@@ -0,0 +1,63 @@
+import React, { useContext } from 'react';
+import { View } from 'react-native';
+
+import { Icon, Text, createStyleSheet, useHeaderStyle, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+
+import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
+import { GroupChannelThreadContexts } from '../module/moduleContext';
+import type { GroupChannelThreadProps } from '../types';
+
+const GroupChannelThreadHeader = ({ onPressLeft, onPressSubtitle }: GroupChannelThreadProps['Header']) => {
+  const { headerTitle, channel } = useContext(GroupChannelThreadContexts.Fragment);
+  const { HeaderComponent } = useHeaderStyle();
+  const { STRINGS } = useLocalization();
+  const { select, colors, palette } = useUIKitTheme();
+  const { currentUser } = useSendbirdChat();
+
+  const renderSubtitle = () => {
+    if (!currentUser) return null;
+
+    return (
+      <Text
+        onPress={onPressSubtitle}
+        caption2
+        style={styles.subtitle}
+        color={select({ light: palette.primary300, dark: palette.primary200 })}
+        numberOfLines={1}
+      >
+        {STRINGS.GROUP_CHANNEL_THREAD.HEADER_SUBTITLE(currentUser.userId, channel)}
+      </Text>
+    );
+  };
+
+  return (
+    <HeaderComponent
+      clearTitleMargin
+      title={
+        <View style={styles.titleContainer}>
+          <View style={{ flexShrink: 1 }}>
+            <Text h2 color={colors.onBackground01} numberOfLines={1}>
+              {headerTitle}
+            </Text>
+            {renderSubtitle()}
+          </View>
+        </View>
+      }
+      left={<Icon icon={'arrow-left'} size={24} />}
+      onPressLeft={onPressLeft}
+    />
+  );
+};
+
+const styles = createStyleSheet({
+  titleContainer: {
+    maxWidth: '100%',
+    flexDirection: 'row',
+    width: '100%',
+  },
+  subtitle: {
+    marginTop: 2,
+  },
+});
+
+export default GroupChannelThreadHeader;

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

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+
+import { getGroupChannelChatAvailableState } from '@sendbird/uikit-utils';
+
+import ChannelInput from '../../../components/ChannelInput';
+import { GroupChannelThreadContexts } from '../module/moduleContext';
+import type { GroupChannelThreadProps } from '../types';
+
+const GroupChannelThreadInput = ({ inputDisabled, ...props }: GroupChannelThreadProps['Input']) => {
+  const {
+    channel,
+    keyboardAvoidOffset = 0,
+    messageToEdit,
+    setMessageToEdit,
+    parentMessage,
+  } = useContext(GroupChannelThreadContexts.Fragment);
+
+  const chatAvailableState = getGroupChannelChatAvailableState(channel);
+
+  return (
+    <ChannelInput
+      channel={channel}
+      messageToEdit={messageToEdit}
+      setMessageToEdit={setMessageToEdit}
+      messageForThread={parentMessage}
+      keyboardAvoidOffset={keyboardAvoidOffset}
+      inputMuted={chatAvailableState.muted}
+      inputFrozen={chatAvailableState.frozen}
+      inputDisabled={inputDisabled ?? chatAvailableState.disabled}
+      MessageToReplyPreview={() => {
+        return null;
+      }}
+      {...props}
+    />
+  );
+};
+
+export default React.memo(GroupChannelThreadInput);