@sendbird/uikit-react-native 3.0.4-rc.1 → 3.1.0

package/src/components/ChannelInput/SendInput.tsx

@@ -9,17 +9,31 @@ import {
 } from 'react-native';
 
 import { MentionType } from '@sendbird/chat/message';
+import type { BottomSheetItem } from '@sendbird/uikit-react-native-foundation';
 import {
   Icon,
+  ImageWithPlaceholder,
+  Text,
   TextInput,
+  VideoThumbnail,
   createStyleSheet,
   useAlert,
   useBottomSheet,
   useToast,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
-import type { BottomSheetItem } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdChannel, isImage, shouldCompressImage, useIIFE } from '@sendbird/uikit-utils';
+import {
+  FileIcon,
+  Logger,
+  SendbirdBaseMessage,
+  SendbirdChannel,
+  getAvailableUriFromFileMessage,
+  getFileIconFromMessageType,
+  getMessageType,
+  isImage,
+  shouldCompressImage,
+  useIIFE,
+} from '@sendbird/uikit-utils';
 
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
 import SBUError from '../../libs/SBUError';
@@ -48,81 +62,192 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
     inputFrozen,
     inputMuted,
     channel,
+    messageToReply,
+    setMessageToReply,
   },
   ref,
 ) {
   const { mentionManager, sbOptions } = useSendbirdChat();
+  const { select, colors, palette } = useUIKitTheme();
   const { STRINGS } = useLocalization();
-  const { colors } = useUIKitTheme();
   const { openSheet } = useBottomSheet();
   const toast = useToast();
+  const { mediaService } = usePlatformService();
+
+  const messageReplyParams = useIIFE(() => {
+    const { groupChannel } = sbOptions.uikit;
+    if (!channel.isGroupChannel() || groupChannel.channel.replyType === 'none' || !messageToReply) return {};
+    return {
+      parentMessageId: messageToReply.messageId,
+      isReplyToChannel: true,
+    };
+  });
 
-  const onFailureToSend = () => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error');
+  const messageMentionParams = useIIFE(() => {
+    const { groupChannel } = sbOptions.uikit;
+    if (!channel.isGroupChannel() || !groupChannel.channel.enableMention) return {};
+    return {
+      mentionType: MentionType.USERS,
+      mentionedUserIds: mentionedUsers.map((it) => it.user.userId),
+      mentionedMessageTemplate: mentionManager.textToMentionedMessageTemplate(
+        text,
+        mentionedUsers,
+        groupChannel.channel.enableMention,
+      ),
+    };
+  });
 
-  const sendUserMessage = () => {
-    const mentionType = MentionType.USERS;
-    const mentionedUserIds = mentionedUsers.map((it) => it.user.userId);
-    const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(
-      text,
-      mentionedUsers,
-      sbOptions.uikit.groupChannel.channel.enableMention,
-    );
+  const onFailureToSend = (error: Error) => {
+    toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error');
+    Logger.error(STRINGS.TOAST.SEND_MSG_ERROR, error);
+  };
 
+  const sendUserMessage = () => {
     onPressSendUserMessage({
       message: text,
-      mentionType,
-      mentionedUserIds,
-      mentionedMessageTemplate,
+      ...messageMentionParams,
+      ...messageReplyParams,
     }).catch(onFailureToSend);
 
     onChangeText('');
+    setMessageToReply?.();
   };
 
-  const sheetItems = useChannelInputItems(channel, (file) => {
-    onPressSendFileMessage({ file }).catch(onFailureToSend);
-  });
+  const sendFileMessage = (file: FileType) => {
+    onPressSendFileMessage({
+      file,
+      ...messageReplyParams,
+    }).catch(onFailureToSend);
+
+    setMessageToReply?.();
+  };
+
+  const sheetItems = useChannelInputItems(channel, sendFileMessage);
   const onPressAttachment = () => openSheet({ sheetItems });
 
   const getPlaceholder = () => {
-    if (!inputDisabled) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE;
-    if (inputFrozen) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
     if (inputMuted) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_MUTED;
+    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;
 
-    return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
+    return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE;
   };
 
-  return (
-    <View style={styles.sendInputContainer}>
-      {AttachmentsButton && <AttachmentsButton onPress={onPressAttachment} disabled={inputDisabled} />}
-      <TextInput
-        ref={ref}
-        multiline
-        disableFullscreenUI
-        onSelectionChange={onSelectionChange}
-        editable={!inputDisabled}
-        onChangeText={onChangeText}
-        style={styles.input}
-        placeholder={getPlaceholder()}
-      >
-        {mentionManager.textToMentionedComponents(
-          text,
-          mentionedUsers,
-          sbOptions.uikit.groupChannel.channel.enableMention,
-        )}
-      </TextInput>
+  const getFileIconAsImage = (url: string) => {
+    return <ImageWithPlaceholder source={{ uri: url }} style={styles.previewImage} />;
+  };
 
-      {Boolean(text.trim()) && (
-        <TouchableOpacity onPress={sendUserMessage} disabled={inputDisabled}>
-          <Icon
-            color={
-              inputDisabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight
-            }
-            icon={'send'}
-            size={24}
-            containerStyle={styles.iconSend}
-          />
-        </TouchableOpacity>
+  const getFileIconAsVideoThumbnail = (url: string) => {
+    return (
+      <VideoThumbnail
+        style={styles.previewImage}
+        iconSize={0}
+        videoSource={url}
+        fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}
+      />
+    );
+  };
+
+  const getFileIconAsSymbol = (icon: FileIcon) => {
+    return (
+      <Icon
+        icon={icon}
+        size={20}
+        color={colors.onBackground02}
+        containerStyle={{
+          backgroundColor: select({
+            light: palette.background100,
+            dark: palette.background500,
+          }),
+          width: 36,
+          height: 36,
+          borderRadius: 10,
+          marginRight: 10,
+          marginTop: 2,
+        }}
+      />
+    );
+  };
+
+  const getFileIcon = (messageToReply: SendbirdBaseMessage) => {
+    if (messageToReply?.isFileMessage()) {
+      const messageType = getMessageType(messageToReply);
+      switch (messageType) {
+        case 'file.image':
+          return getFileIconAsImage(getAvailableUriFromFileMessage(messageToReply));
+        case 'file.video':
+          return getFileIconAsVideoThumbnail(getAvailableUriFromFileMessage(messageToReply));
+        default:
+          return getFileIconAsSymbol(getFileIconFromMessageType(messageType));
+      }
+    }
+    return null;
+  };
+
+  return (
+    <View>
+      {messageToReply && (
+        <View
+          style={{
+            flexDirection: 'row',
+            paddingLeft: 18,
+            paddingRight: 16,
+            paddingTop: 10,
+            paddingBottom: 8,
+            alignItems: 'center',
+            borderTopWidth: 1,
+            borderColor: colors.onBackground04,
+          }}
+        >
+          <View style={{ flex: 1, flexDirection: 'row' }}>
+            {getFileIcon(messageToReply)}
+            <View style={{ flex: 1, flexDirection: 'column' }}>
+              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '900', marginBottom: 4 }}>
+                {STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_TITLE(messageToReply.sender)}
+              </Text>
+              <Text numberOfLines={1} style={{ fontSize: 13, color: colors.onBackground03 }}>
+                {STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_BODY(messageToReply)}
+              </Text>
+            </View>
+          </View>
+          <TouchableOpacity onPress={() => setMessageToReply?.(undefined)}>
+            <Icon icon={'close'} size={24} color={colors.onBackground01} containerStyle={styles.iconSend} />
+          </TouchableOpacity>
+        </View>
       )}
+      <View style={styles.sendInputContainer}>
+        {AttachmentsButton && <AttachmentsButton onPress={onPressAttachment} disabled={inputDisabled} />}
+        <TextInput
+          ref={ref}
+          multiline
+          disableFullscreenUI
+          onSelectionChange={onSelectionChange}
+          editable={!inputDisabled}
+          onChangeText={onChangeText}
+          style={styles.input}
+          placeholder={getPlaceholder()}
+        >
+          {mentionManager.textToMentionedComponents(
+            text,
+            mentionedUsers,
+            sbOptions.uikit.groupChannel.channel.enableMention,
+          )}
+        </TextInput>
+
+        {Boolean(text.trim()) && (
+          <TouchableOpacity onPress={sendUserMessage} disabled={inputDisabled}>
+            <Icon
+              color={
+                inputDisabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight
+              }
+              icon={'send'}
+              size={24}
+              containerStyle={styles.iconSend}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
     </View>
   );
 });
@@ -353,6 +478,14 @@ const styles = createStyleSheet({
     marginLeft: 4,
     padding: 4,
   },
+  previewImage: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    marginTop: 2,
+    marginRight: 10,
+    overflow: 'hidden',
+  },
 });
 
 export default SendInput;

package/src/components/ChannelInput/index.tsx

@@ -1,4 +1,4 @@
-import React, { MutableRefObject, useEffect, useRef, useState } from 'react';
+import React, { MutableRefObject, useEffect, useState } from 'react';
 import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -56,6 +56,10 @@ export type ChannelInputProps = {
   messageToEdit: undefined | SendbirdUserMessage | SendbirdFileMessage;
   setMessageToEdit: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
 
+  // reply - only available on group channel
+  messageToReply?: undefined | SendbirdUserMessage | SendbirdFileMessage;
+  setMessageToReply?: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
+
   // mention
   SuggestedMentionList?: (props: SuggestedMentionListProps) => JSX.Element | null;
 
@@ -83,9 +87,8 @@ const ChannelInput = (props: ChannelInputProps) => {
     messageToEdit,
   });
   const inputMode = useIIFE(() => {
-    if (!messageToEdit) return 'send';
-    if (messageToEdit.isFileMessage()) return 'send';
-    return 'edit';
+    if (messageToEdit && !messageToEdit.isFileMessage()) return 'edit';
+    else return 'send';
   });
 
   const mentionAvailable =
@@ -95,7 +98,7 @@ const ChannelInput = (props: ChannelInputProps) => {
   const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
 
   useTypingTrigger(text, channel);
-  useTextPersistenceOnDisabled(text, onChangeText, props.inputDisabled);
+  useTextClearOnDisabled(onChangeText, props.inputDisabled);
   useAutoFocusOnEditMode(textInputRef, messageToEdit);
 
   const onPressToMention = (user: SendbirdMember, searchStringRange: Range) => {
@@ -138,8 +141,8 @@ const ChannelInput = (props: ChannelInputProps) => {
                 onChangeText={onChangeText}
                 autoFocus={AUTO_FOCUS}
                 onSelectionChange={onSelectionChange}
-                messageToEdit={messageToEdit}
                 mentionedUsers={mentionedUsers}
+                messageToEdit={messageToEdit}
                 setMessageToEdit={setMessageToEdit}
               />
             )}
@@ -171,16 +174,9 @@ const useTypingTrigger = (text: string, channel: SendbirdBaseChannel) => {
   }
 };
 
-const useTextPersistenceOnDisabled = (text: string, setText: (val: string) => void, chatDisabled: boolean) => {
-  const textTmpRef = useRef('');
-
+const useTextClearOnDisabled = (setText: (val: string) => void, chatDisabled: boolean) => {
   useEffect(() => {
-    if (chatDisabled) {
-      textTmpRef.current = text;
-      setText('');
-    } else {
-      setText(textTmpRef.current);
-    }
+    if (chatDisabled) setText('');
   }, [chatDisabled]);
 };
 

package/src/components/ChannelMessageList/index.tsx

@@ -55,8 +55,10 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
   onPressScrollToBottomButton: (animated?: boolean) => void;
 
   onEditMessage: (message: HandleableMessage) => void;
+  onReplyMessage?: (message: HandleableMessage) => void; // only available on group channel
   onDeleteMessage: (message: HandleableMessage) => Promise<void>;
   onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<void>;
+  onPressParentMessage?: (parentMessage: SendbirdMessage) => void;
   onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
 
   renderMessage: (props: {
@@ -66,6 +68,7 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
     nextMessage?: SendbirdMessage;
     onPress?: () => void;
     onLongPress?: () => void;
+    onPressParentMessage?: ChannelMessageListProps<T>['onPressParentMessage'];
     onShowUserProfile?: UserProfileContextType['show'];
     channel: T;
     currentUserId?: ChannelMessageListProps<T>['currentUserId'];
@@ -91,9 +94,11 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
     hasNext,
     channel,
     onEditMessage,
+    onReplyMessage,
     onDeleteMessage,
     onResendFailedMessage,
     onPressMediaMessage,
+    onPressParentMessage,
     currentUserId,
     renderNewMessagesButton,
     renderScrollToBottomButton,
@@ -119,6 +124,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
     channel,
     currentUserId,
     onEditMessage,
+    onReplyMessage,
     onDeleteMessage,
     onResendFailedMessage,
     onPressMediaMessage,
@@ -134,6 +140,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
       nextMessage: messages[index - 1],
       onPress,
       onLongPress,
+      onPressParentMessage,
       onShowUserProfile: show,
       enableMessageGrouping,
       channel,
@@ -188,11 +195,18 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
   currentUserId,
   onResendFailedMessage,
   onEditMessage,
+  onReplyMessage,
   onDeleteMessage,
   onPressMediaMessage,
 }: Pick<
   ChannelMessageListProps<T>,
-  'channel' | 'currentUserId' | 'onEditMessage' | 'onDeleteMessage' | 'onResendFailedMessage' | 'onPressMediaMessage'
+  | 'channel'
+  | 'currentUserId'
+  | 'onEditMessage'
+  | 'onReplyMessage'
+  | 'onDeleteMessage'
+  | 'onResendFailedMessage'
+  | 'onPressMediaMessage'
 >) => {
   const { colors } = useUIKitTheme();
   const { STRINGS } = useLocalization();
@@ -202,13 +216,18 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
   const { clipboardService, fileService } = usePlatformService();
   const { sbOptions } = useSendbirdChat();
 
+  const onFailureToReSend = (error: Error) => {
+    toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error');
+    Logger.error(STRINGS.TOAST.RESEND_MSG_ERROR, error);
+  };
+
   const handleFailedMessage = (message: HandleableMessage) => {
     openSheet({
       sheetItems: [
         {
           title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_RETRY,
           onPress: () => {
-            onResendFailedMessage(message).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error'));
+            onResendFailedMessage(message).catch(onFailureToReSend);
           },
         },
         {
@@ -257,25 +276,7 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
           toast.show(STRINGS.TOAST.COPY_OK, 'success');
         },
       });
-
-      if (!channel.isEphemeral) {
-        if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
-          sheetItems.push(
-            {
-              icon: 'edit',
-              title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
-              onPress: () => onEditMessage(msg),
-            },
-            {
-              icon: 'delete',
-              title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
-              onPress: () => confirmDelete(msg),
-            },
-          );
-        }
-      }
     }
-
     if (msg.isFileMessage()) {
       sheetItems.push({
         icon: 'download',
@@ -297,17 +298,34 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
             });
         },
       });
-
-      if (!channel.isEphemeral) {
-        if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+    }
+    if (!channel.isEphemeral) {
+      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+        if (msg.isUserMessage()) {
           sheetItems.push({
-            icon: 'delete',
-            title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
-            onPress: () => confirmDelete(msg),
+            icon: 'edit',
+            title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
+            onPress: () => onEditMessage(msg),
           });
         }
+        sheetItems.push({
+          disabled: msg.threadInfo ? msg.threadInfo.replyCount > 0 : undefined,
+          icon: 'delete',
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
+          onPress: () => confirmDelete(msg),
+        });
+      }
+      if (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
+        sheetItems.push({
+          disabled: Boolean(msg.parentMessageId),
+          icon: 'reply',
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_REPLY,
+          onPress: () => onReplyMessage?.(msg),
+        });
       }
+    }
 
+    if (msg.isFileMessage()) {
       const fileType = getFileType(msg.type || getFileExtension(msg.name));
       switch (fileType) {
         case 'image':
@@ -342,7 +360,7 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
     if (msg.sendingStatus === 'failed') {
       response.onLongPress = () => handleFailedMessage(msg);
       response.onPress = () => {
-        onResendFailedMessage(msg).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error'));
+        onResendFailedMessage(msg).catch(onFailureToReSend);
       };
     }
 

package/src/components/ChatFlatList/index.tsx

@@ -7,7 +7,7 @@ import { NOOP, SendbirdMessage, getMessageUniqId, useFreshCallback } from '@send
 import FlatListInternal from './FlatListInternal';
 
 let ANDROID_BUG_ALERT_SHOWED = Platform.OS !== 'android';
-const BOTTOM_DETECT_THRESHOLD = 25;
+const BOTTOM_DETECT_THRESHOLD = 50;
 const UNREACHABLE_THRESHOLD = Number.MIN_SAFE_INTEGER;
 
 type Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {

package/src/components/GroupChannelMessageRenderer/GroupChannelMessageFocusAnimation.tsx

@@ -1,13 +1,17 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated, Easing } from 'react-native';
 
+import { useIsFirstMount } from '@sendbird/uikit-utils';
+
 import { MESSAGE_FOCUS_ANIMATION_DELAY, MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../../constants';
 
 const GroupChannelMessageFocusAnimation = (props: React.PropsWithChildren<{ focused: boolean }>) => {
+  const isFirstMount = useIsFirstMount();
   const translateY = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
     if (props.focused) {
+      const delay = MESSAGE_FOCUS_ANIMATION_DELAY + (isFirstMount ? MESSAGE_SEARCH_SAFE_SCROLL_DELAY : 0);
       setTimeout(() => {
         Animated.sequence(
           [
@@ -19,7 +23,7 @@ const GroupChannelMessageFocusAnimation = (props: React.PropsWithChildren<{ focu
             Animated.timing(translateY, { ...value, useNativeDriver: true, easing: Easing.inOut(Easing.ease) }),
           ),
         ).start();
-      }, MESSAGE_SEARCH_SAFE_SCROLL_DELAY + MESSAGE_FOCUS_ANIMATION_DELAY);
+      }, delay);
     }
   }, [props.focused]);