chore(CLNP-2919): fixed issues from message threading QA

packages/uikit-chat-hooks/src/common/useAppFeatures.ts

@@ -1,11 +1,12 @@
 import { ApplicationAttributes, PremiumFeatures, SendbirdChatSDK } from '@sendbird/uikit-utils';
 
 export const useAppFeatures = (sdk: SendbirdChatSDK) => {
-  const { premiumFeatureList = [], applicationAttributes = [] } = sdk.appInfo ?? {};
+  const { premiumFeatureList = [], applicationAttributes = [], uploadSizeLimit } = sdk.appInfo ?? {};
   return {
     deliveryReceiptEnabled: premiumFeatureList.includes(PremiumFeatures.delivery_receipt),
     broadcastChannelEnabled: applicationAttributes.includes(ApplicationAttributes.allow_broadcast_channel),
     superGroupChannelEnabled: applicationAttributes.includes(ApplicationAttributes.allow_super_group_channel),
     reactionEnabled: applicationAttributes.includes(ApplicationAttributes.reactions),
+    uploadSizeLimit: uploadSizeLimit,
   };
 };

packages/uikit-react-native-foundation/src/ui/GroupChannelMessage/Message.file.voice.tsx

@@ -25,6 +25,9 @@ type Props = GroupChannelMessageProps<
   {
     durationMetaArrayKey?: string;
     onUnmount: () => void;
+    initialCurrentTime?: number;
+    onSubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
+    onUnsubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
   }
 >;
 const VoiceFileMessage = (props: Props) => {
@@ -35,6 +38,9 @@ const VoiceFileMessage = (props: Props) => {
     message,
     durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
     onUnmount,
+    initialCurrentTime,
+    onSubscribeStatus,
+    onUnsubscribeStatus,
   } = props;
 
   const { colors } = useUIKitTheme();
@@ -45,7 +51,7 @@ const VoiceFileMessage = (props: Props) => {
     const initialDuration = value ? parseInt(value, 10) : 0;
     return {
       status: 'paused',
-      currentTime: 0,
+      currentTime: initialCurrentTime || 0,
       duration: initialDuration,
     };
   });
@@ -56,6 +62,16 @@ const VoiceFileMessage = (props: Props) => {
     };
   }, []);
 
+  useEffect(() => {
+    const updateCurrentTime = (currentTime: number) => {
+      setState((prev) => ({ ...prev, currentTime }));
+    };
+    onSubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);
+    return () => {
+      onUnsubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);
+    };
+  }, []);
+
   const uiColors = colors.ui.groupChannelMessage[variant];
   const remainingTime = state.duration - state.currentTime;
 

packages/uikit-react-native-foundation/src/ui/GroupChannelMessage/MessageContainer.tsx

@@ -46,7 +46,7 @@ MessageContainer.Incoming = function MessageContainerIncoming({
         </Box>
         <Box flexShrink={1}>
           {parentMessage}
-          {!groupedWithPrev && !message.parentMessage && (
+          {!groupedWithPrev && !parentMessage && (
             <Box marginLeft={12} marginBottom={4}>
               {(message.isFileMessage() || message.isUserMessage()) && (
                 <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>

packages/uikit-react-native/package.json

@@ -62,7 +62,7 @@
     "@openspacelabs/react-native-zoomable-view": "^2.1.5",
     "@sendbird/uikit-chat-hooks": "3.5.4",
     "@sendbird/uikit-react-native-foundation": "3.5.4",
-    "@sendbird/uikit-tools": "0.0.1-alpha.76",
+    "@sendbird/uikit-tools": "0.0.1-alpha.77",
     "@sendbird/uikit-utils": "3.5.4"
   },
   "devDependencies": {

packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx

@@ -164,7 +164,13 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
     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;
-    if (messageForThread) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_THREAD;
+    if (messageForThread) {
+      if (messageForThread.threadInfo && messageForThread.threadInfo.replyCount > 0) {
+        return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_REPLY_TO_THREAD;
+      } else {
+        return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_REPLY_IN_THREAD;
+      }
+    }
 
     return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE;
   };

packages/uikit-react-native/src/components/ChannelThreadMessageList/index.tsx

@@ -32,8 +32,8 @@ import {
 import type { UserProfileContextType } from '../../contexts/UserProfileCtx';
 import { useLocalization, usePlatformService, useSendbirdChat, useUserProfile } from '../../hooks/useContext';
 import SBUUtils from '../../libs/SBUUtils';
-import ChatFlatList from '../ChatFlatList';
 import { ReactionAddons } from '../ReactionAddons';
+import ThreadChatFlatList from '../ThreadChatFlatList';
 
 type PressActions = { onPress?: () => void; onLongPress?: () => void; bottomSheetItem?: BottomSheetItem };
 type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
@@ -147,7 +147,7 @@ const ChannelThreadMessageList = <T extends SendbirdGroupChannel | SendbirdOpenC
       {channel.isFrozen && (
         <ChannelFrozenBanner style={styles.frozenBanner} text={STRINGS.LABELS.CHANNEL_MESSAGE_LIST_FROZEN} />
       )}
-      <ChatFlatList
+      <ThreadChatFlatList
         {...flatListProps}
         onTopReached={onTopReached}
         onBottomReached={onBottomReached}

packages/uikit-react-native/src/components/ChatFlatList/index.tsx

@@ -32,30 +32,19 @@ const ChatFlatList = forwardRef<RNFlatList, Props>(function ChatFlatList(
 ) {
   const { select } = useUIKitTheme();
   const contentOffsetY = useRef(0);
-  // FIXME: inverted list of ListEmptyComponent is reversed {@link https://github.com/facebook/react-native/issues/21196#issuecomment-836937743}
-  const inverted = useRef(props.inverted ?? Boolean(props.data?.length));
 
   const _onScroll = useFreshCallback<NonNullable<Props['onScroll']>>((event) => {
     onScroll?.(event);
 
-    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+    const { contentOffset } = event.nativeEvent;
 
     const prevOffsetY = contentOffsetY.current;
     const currOffsetY = contentOffset.y;
 
-    if (inverted.current) {
-      if (BOTTOM_DETECT_THRESHOLD < prevOffsetY && currOffsetY <= BOTTOM_DETECT_THRESHOLD) {
-        onScrolledAwayFromBottom(false);
-      } else if (BOTTOM_DETECT_THRESHOLD < currOffsetY && prevOffsetY <= BOTTOM_DETECT_THRESHOLD) {
-        onScrolledAwayFromBottom(true);
-      }
-    } else {
-      const bottomDetectThreshold = contentSize.height - layoutMeasurement.height - BOTTOM_DETECT_THRESHOLD;
-      if (bottomDetectThreshold < prevOffsetY && currOffsetY <= bottomDetectThreshold) {
-        onScrolledAwayFromBottom(true);
-      } else if (bottomDetectThreshold < currOffsetY && prevOffsetY <= bottomDetectThreshold) {
-        onScrolledAwayFromBottom(false);
-      }
+    if (BOTTOM_DETECT_THRESHOLD < prevOffsetY && currOffsetY <= BOTTOM_DETECT_THRESHOLD) {
+      onScrolledAwayFromBottom(false);
+    } else if (BOTTOM_DETECT_THRESHOLD < currOffsetY && prevOffsetY <= BOTTOM_DETECT_THRESHOLD) {
+      onScrolledAwayFromBottom(true);
     }
 
     contentOffsetY.current = contentOffset.y;
@@ -79,7 +68,8 @@ const ChatFlatList = forwardRef<RNFlatList, Props>(function ChatFlatList(
       keyboardShouldPersistTaps={'handled'}
       indicatorStyle={select({ light: 'black', dark: 'white' })}
       {...props}
-      inverted={inverted.current}
+      // FIXME: inverted list of ListEmptyComponent is reversed {@link https://github.com/facebook/react-native/issues/21196#issuecomment-836937743}
+      inverted={Boolean(props.data?.length)}
       ref={ref}
       onEndReached={onTopReached}
       onScrollToIndexFailed={NOOP}

packages/uikit-react-native/src/components/GroupChannelMessageRenderer/GroupChannelMessageReplyInfo.tsx

@@ -53,7 +53,7 @@ const GroupChannelMessageReplyInfo = ({ channel, message, onPress }: Props) => {
 
   if (!channel || !message.threadInfo || !message.threadInfo.replyCount) return null;
 
-  const replyCountText = STRINGS.GROUP_CHANNEL_THREAD.REPLAY_COUNT(message.threadInfo.replyCount || 0);
+  const replyCountText = STRINGS.GROUP_CHANNEL_THREAD.REPLY_COUNT(message.threadInfo.replyCount || 0, 99);
   const onPressReply = () => {
     onPress?.(message as SendbirdUserMessage | SendbirdFileMessage);
   };

packages/uikit-react-native/src/components/GroupChannelMessageRenderer/index.tsx

@@ -51,7 +51,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
 }) => {
   const playerUnsubscribes = useRef<(() => void)[]>([]);
   const { palette } = useUIKitTheme();
-  const { sbOptions, currentUser, mentionManager } = useSendbirdChat();
+  const { sbOptions, currentUser, mentionManager, voiceMessageStatusManager } = useSendbirdChat();
   const { STRINGS } = useLocalization();
   const { mediaService, playerService } = usePlatformService();
   const { groupWithPrev, groupWithNext } = calcMessageGrouping(
@@ -62,6 +62,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     sbOptions.uikit.groupChannel.channel.replyType === 'thread',
     shouldRenderParentMessage(message, hideParentMessage),
   );
+
   const variant = isMyMessage(message, currentUser?.userId) ? 'outgoing' : 'incoming';
 
   const reactionChildren = useIIFE(() => {
@@ -121,6 +122,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
           let seekFinished = !shouldSeekToTime;
 
           const forPlayback = playerService.addPlaybackListener(({ stopped, currentTime, duration }) => {
+            voiceMessageStatusManager.setCurrentTime(message.channelUrl, message.messageId, currentTime);
             if (seekFinished) {
               setState((prevState) => ({ ...prevState, currentTime: stopped ? 0 : currentTime, duration }));
             }
@@ -272,6 +274,9 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
           <GroupChannelMessage.VoiceFile
             message={message as SendbirdFileMessage}
             durationMetaArrayKey={VOICE_MESSAGE_META_ARRAY_DURATION_KEY}
+            initialCurrentTime={voiceMessageStatusManager.getCurrentTime(message.channelUrl, message.messageId)}
+            onSubscribeStatus={voiceMessageStatusManager.subscribe}
+            onUnsubscribeStatus={voiceMessageStatusManager.unsubscribe}
             onUnmount={() => {
               if (isVoiceMessage(message) && playerService.uri === message.url) {
                 resetPlayer();

packages/uikit-react-native/src/components/ThreadChatFlatList/index.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef, useRef } from 'react';
+import { FlatListProps, FlatList as RNFlatList, StyleSheet } from 'react-native';
+
+import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { NOOP, SendbirdMessage, getMessageUniqId, useFreshCallback } from '@sendbird/uikit-utils';
+
+import FlatListInternal from '../ChatFlatList/FlatListInternal';
+
+const BOTTOM_DETECT_THRESHOLD = 50;
+const UNREACHABLE_THRESHOLD = Number.MIN_SAFE_INTEGER;
+
+type Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {
+  onBottomReached: () => void;
+  onTopReached: () => void;
+  onScrolledAwayFromBottom: (value: boolean) => void;
+};
+const ThreadChatFlatList = forwardRef<RNFlatList, Props>(function ThreadChatFlatList(
+  { onTopReached, onBottomReached, onScrolledAwayFromBottom, onScroll, ...props },
+  ref,
+) {
+  const { select } = useUIKitTheme();
+  const contentOffsetY = useRef(0);
+
+  const _onScroll = useFreshCallback<NonNullable<Props['onScroll']>>((event) => {
+    onScroll?.(event);
+
+    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+
+    const prevOffsetY = contentOffsetY.current;
+    const currOffsetY = contentOffset.y;
+
+    const bottomDetectThreshold = contentSize.height - layoutMeasurement.height - BOTTOM_DETECT_THRESHOLD;
+    if (bottomDetectThreshold < prevOffsetY && currOffsetY <= bottomDetectThreshold) {
+      onScrolledAwayFromBottom(true);
+    } else if (bottomDetectThreshold < currOffsetY && prevOffsetY <= bottomDetectThreshold) {
+      onScrolledAwayFromBottom(false);
+    }
+
+    contentOffsetY.current = contentOffset.y;
+  });
+
+  return (
+    <FlatListInternal
+      bounces={false}
+      removeClippedSubviews
+      keyboardDismissMode={'on-drag'}
+      keyboardShouldPersistTaps={'handled'}
+      indicatorStyle={select({ light: 'black', dark: 'white' })}
+      {...props}
+      ref={ref}
+      onEndReached={onBottomReached}
+      onScrollToIndexFailed={NOOP}
+      onStartReached={onTopReached}
+      scrollEventThrottle={16}
+      onScroll={_onScroll}
+      keyExtractor={getMessageUniqId}
+      style={{ flex: 1, ...StyleSheet.flatten(props.style) }}
+      maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: UNREACHABLE_THRESHOLD }}
+    />
+  );
+});
+
+export default ThreadChatFlatList;

packages/uikit-react-native/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';
@@ -179,6 +180,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) {
@@ -226,6 +228,7 @@ const SendbirdUIKitContainer = (props: SendbirdUIKitContainerProps) => {
           mentionManager={mentionManager}
           imageCompressionConfig={imageCompressionConfig}
           voiceMessageConfig={voiceMessageConfig}
+          voiceMessageStatusManager={voiceMessageStatusManager}
           enableAutoPushTokenRegistration={
             chatOptions.enableAutoPushTokenRegistration ?? SendbirdUIKit.DEFAULT.AUTO_PUSH_TOKEN_REGISTRATION
           }

packages/uikit-react-native/src/contexts/SendbirdChatCtx.tsx

@@ -14,6 +14,7 @@ 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';
 
 export interface ChatRelatedFeaturesInUIKit {
@@ -27,6 +28,7 @@ interface Props extends ChatRelatedFeaturesInUIKit, React.PropsWithChildren {
 
   emojiManager: EmojiManager;
   mentionManager: MentionManager;
+  voiceMessageStatusManager: VoiceMessageStatusManager;
   imageCompressionConfig: ImageCompressionConfig;
   voiceMessageConfig: VoiceMessageConfig;
 }
@@ -39,6 +41,7 @@ export type SendbirdChatContextType = {
   // feature related instances
   emojiManager: EmojiManager;
   mentionManager: MentionManager;
+  voiceMessageStatusManager: VoiceMessageStatusManager;
   imageCompressionConfig: ImageCompressionConfig;
   voiceMessageConfig: VoiceMessageConfig;
 
@@ -80,6 +83,7 @@ export type SendbirdChatContextType = {
       broadcastChannelEnabled: boolean;
       superGroupChannelEnabled: boolean;
       reactionEnabled: boolean;
+      uploadSizeLimit: number | undefined;
     };
   };
 };
@@ -90,6 +94,7 @@ export const SendbirdChatProvider = ({
   sdkInstance,
   emojiManager,
   mentionManager,
+  voiceMessageStatusManager,
   imageCompressionConfig,
   voiceMessageConfig,
   enableAutoPushTokenRegistration,
@@ -164,6 +169,7 @@ export const SendbirdChatProvider = ({
     mentionManager,
     imageCompressionConfig,
     voiceMessageConfig,
+    voiceMessageStatusManager,
     currentUser,
     setCurrentUser,
 

packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelMessageList.tsx

@@ -1,9 +1,9 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { useToast } from '@sendbird/uikit-react-native-foundation';
 import { SendbirdMessage, SendbirdSendableMessage } from '@sendbird/uikit-utils';
-import { isDifferentChannel, useFreshCallback, useIsFirstMount, useUniqHandlerId } 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';
@@ -22,7 +22,9 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   );
 
   const id = useUniqHandlerId('GroupChannelMessageList');
-  const isFirstMount = useIsFirstMount();
+  const isChangedSearchItem = useMemo(() => {
+    return !!props.searchItem;
+  }, [props.searchItem?.startingPoint]);
 
   const scrollToMessageWithCreatedAt = useFreshCallback(
     (createdAt: number, focusAnimated: boolean, timeout: number): boolean => {
@@ -93,13 +95,10 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   }, [props.scrolledAwayFromBottom]);
 
   useEffect(() => {
-    // Only trigger once when message list mount with initial props.searchItem
-    // - Search screen + searchItem > mount message list
-    // - Reset message list + searchItem > re-mount message list
-    if (isFirstMount && props.searchItem) {
+    if (isChangedSearchItem && props.searchItem) {
       scrollToMessageWithCreatedAt(props.searchItem.startingPoint, false, MESSAGE_SEARCH_SAFE_SCROLL_DELAY);
     }
-  }, [isFirstMount]);
+  }, [isChangedSearchItem]);
 
   const onPressParentMessage = useFreshCallback(
     (parentMessage: SendbirdMessage, childMessage: SendbirdSendableMessage) => {
@@ -108,7 +107,11 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
         sbOptions.uikit.groupChannel.channel.replyType === 'thread' &&
         sbOptions.uikit.groupChannel.channel.threadReplySelectType === 'thread'
       ) {
-        onPressReplyMessageInThread(parentMessage as SendbirdSendableMessage, childMessage.createdAt);
+        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');