feat: added thread type in GroupChannel

fixed issue with mention suggestion list sorting
fixed issue with file upload size limit exceeded

Author: OnestarLee

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/assets/icon/icon-thread.png

@@ -64,6 +64,7 @@ const IconAssets = {
   'streaming': require('./icon-streaming.png'),
   'supergroup': require('./icon-supergroup.png'),
   'theme': require('./icon-theme.png'),
+  'thread': require('./icon-thread.png'),
   'thumbnail-none': require('./icon-thumbnail-none.png'),
   'unarchive': require('./icon-unarchive.png'),
   'user': require('./icon-user.png'),

packages/uikit-react-native-foundation/src/assets/icon/[email protected]

@@ -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/assets/icon/[email protected]

@@ -23,6 +23,7 @@ const MessageContainer = (props: Props) => {
 
 MessageContainer.Incoming = function MessageContainerIncoming({
   children,
+  replyInfo,
   groupedWithNext,
   groupedWithPrev,
   message,
@@ -34,43 +35,49 @@ MessageContainer.Incoming = function MessageContainerIncoming({
   const color = colors.ui.groupChannelMessage.incoming;
 
   return (
-    <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>
-      <Box width={26} marginRight={12}>
-        {(message.isFileMessage() || message.isUserMessage()) && !groupedWithNext && (
-          <Pressable onPress={onPressAvatar}>
-            <Avatar size={26} uri={message.sender?.profileUrl} />
-          </Pressable>
-        )}
-      </Box>
-      <Box flexShrink={1}>
-        {parentMessage}
-        {!groupedWithPrev && !message.parentMessage && (
-          <Box marginLeft={12} marginBottom={4}>
-            {(message.isFileMessage() || message.isUserMessage()) && (
-              <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>
-                {strings?.senderName ?? message.sender.nickname}
-              </Text>
-            )}
-          </Box>
-        )}
-
-        <Box flexDirection={'row'} alignItems={'flex-end'}>
-          <Box style={styles.bubble}>{children}</Box>
-          {!groupedWithNext && (
-            <Box marginLeft={4}>
-              <Text caption4 color={color.enabled.textTime}>
-                {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
-              </Text>
+    <Box flexDirection={'column'} justifyContent={'flex-start'} alignItems={'flex-start'}>
+      <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>
+        <Box width={26} marginRight={12}>
+          {(message.isFileMessage() || message.isUserMessage()) && !groupedWithNext && (
+            <Pressable onPress={onPressAvatar}>
+              <Avatar size={26} uri={message.sender?.profileUrl} />
+            </Pressable>
+          )}
+        </Box>
+        <Box flexShrink={1}>
+          {parentMessage}
+          {!groupedWithPrev && !parentMessage && (
+            <Box marginLeft={12} marginBottom={4}>
+              {(message.isFileMessage() || message.isUserMessage()) && (
+                <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>
+                  {strings?.senderName ?? message.sender.nickname}
+                </Text>
+              )}
             </Box>
           )}
+          <Box flexDirection={'row'} alignItems={'flex-end'}>
+            <Box style={styles.bubble}>{children}</Box>
+            {!groupedWithNext && (
+              <Box marginLeft={4}>
+                <Text caption4 color={color.enabled.textTime}>
+                  {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
+                </Text>
+              </Box>
+            )}
+          </Box>
         </Box>
       </Box>
+      <Box flexDirection={'row'} marginTop={4}>
+        <Box width={26} marginRight={12} justifyContent={'flex-start'} />
+        {replyInfo}
+      </Box>
     </Box>
   );
 };
 
 MessageContainer.Outgoing = function MessageContainerOutgoing({
   children,
+  replyInfo,
   message,
   groupedWithNext,
   strings,
@@ -96,6 +103,9 @@ MessageContainer.Outgoing = function MessageContainerOutgoing({
         </Box>
         <Box style={styles.bubble}>{children}</Box>
       </Box>
+      <Box flexDirection={'row'} justifyContent={'flex-end'} marginTop={4}>
+        {replyInfo}
+      </Box>
     </Box>
   );
 };

packages/uikit-react-native-foundation/src/assets/icon/index.ts

@@ -28,6 +28,7 @@ export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps
   children?: React.ReactNode;
   sendingStatus?: React.ReactNode;
   parentMessage?: React.ReactNode;
+  replyInfo?: React.ReactNode;
 
   groupedWithPrev: boolean;
   groupedWithNext: boolean;

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

@@ -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-foundation/src/ui/GroupChannelMessage/MessageContainer.tsx

@@ -53,6 +53,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
     channel,
     messageToReply,
     setMessageToReply,
+    messageForThread,
   },
   ref,
 ) {
@@ -71,11 +72,22 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
 
   const messageReplyParams = useIIFE(() => {
     const { groupChannel } = sbOptions.uikit;
-    if (!channel.isGroupChannel() || groupChannel.channel.replyType === 'none' || !messageToReply) return {};
-    return {
-      parentMessageId: messageToReply.messageId,
-      isReplyToChannel: true,
-    };
+
+    if (channel.isGroupChannel()) {
+      if (groupChannel.channel.replyType === 'quote_reply' && messageToReply) {
+        return {
+          parentMessageId: messageToReply.messageId,
+          isReplyToChannel: true,
+        };
+      } else if (groupChannel.channel.replyType === 'thread' && messageForThread) {
+        return {
+          parentMessageId: messageForThread.messageId,
+          isReplyToChannel: true,
+        };
+      }
+    }
+
+    return {};
   });
 
   const messageMentionParams = useIIFE(() => {
@@ -152,6 +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) {
+      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;
   };