@sendbird/uikit-react-native 3.2.0 → 3.3.0

package/src/components/ChannelMessageList/index.tsx

@@ -36,8 +36,9 @@ import type { CommonComponent } from '../../types';
 import ChatFlatList from '../ChatFlatList';
 import { ReactionAddons } from '../ReactionAddons';
 
-type PressActions = { onPress?: () => void; onLongPress?: () => void };
+type PressActions = { onPress?: () => void; onLongPress?: () => void; bottomSheetItem?: BottomSheetItem };
 type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
+type CreateMessagePressActions = (params: { message: SendbirdMessage }) => PressActions;
 export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpenChannel> = {
   enableMessageGrouping: boolean;
   currentUserId?: string;
@@ -74,6 +75,8 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
     channel: T;
     currentUserId?: ChannelMessageListProps<T>['currentUserId'];
     enableMessageGrouping: ChannelMessageListProps<T>['enableMessageGrouping'];
+    bottomSheetItem?: BottomSheetItem;
+    isFirstItem: boolean;
   }) => React.ReactElement | null;
   renderNewMessagesButton: null | CommonComponent<{
     visible: boolean;
@@ -121,7 +124,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
   const { colors } = useUIKitTheme();
   const { show } = useUserProfile();
   const { left, right } = useSafeAreaInsets();
-  const getMessagePressActions = useGetMessagePressActions({
+  const createMessagePressActions = useCreateMessagePressActions({
     channel,
     currentUserId,
     onEditMessage,
@@ -134,7 +137,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
   const safeAreaLayout = { paddingLeft: left, paddingRight: right };
 
   const renderItem: ListRenderItem<SendbirdMessage> = useFreshCallback(({ item, index }) => {
-    const { onPress, onLongPress } = getMessagePressActions(item);
+    const { onPress, onLongPress, bottomSheetItem } = createMessagePressActions({ message: item });
     return renderMessage({
       message: item,
       prevMessage: messages[index + 1],
@@ -147,6 +150,8 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
       channel,
       currentUserId,
       focused: (searchItem?.startingPoint ?? -1) === item.createdAt,
+      bottomSheetItem,
+      isFirstItem: index === 0,
     });
   });
 
@@ -191,7 +196,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
   );
 };
 
-const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpenChannel>({
+const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpenChannel>({
   channel,
   currentUserId,
   onResendFailedMessage,
@@ -208,7 +213,7 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
   | 'onDeleteMessage'
   | 'onResendFailedMessage'
   | 'onPressMediaMessage'
->) => {
+>): CreateMessagePressActions => {
   const { colors } = useUIKitTheme();
   const { STRINGS } = useLocalization();
   const toast = useToast();
@@ -217,161 +222,186 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
   const { clipboardService, fileService } = usePlatformService();
   const { sbOptions } = useSendbirdChat();
 
-  const onFailureToReSend = (error: Error) => {
+  const onResendFailure = (error: Error) => {
     toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error');
     Logger.error(STRINGS.TOAST.RESEND_MSG_ERROR, error);
   };
 
-  const handleFailedMessage = (message: HandleableMessage) => {
+  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 openSheetForFailedMessage = (message: HandleableMessage) => {
     openSheet({
       sheetItems: [
         {
           title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_RETRY,
-          onPress: () => {
-            onResendFailedMessage(message).catch(onFailureToReSend);
-          },
+          onPress: () => onResendFailedMessage(message).catch(onResendFailure),
         },
         {
           title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_REMOVE,
           titleColor: colors.ui.dialog.default.none.destructive,
-          onPress: () => confirmDelete(message),
+          onPress: () => alertForMessageDelete(message),
         },
       ],
     });
   };
-  const confirmDelete = (message: HandleableMessage) => {
+
+  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_CANCEL },
         {
           text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
           style: 'destructive',
           onPress: () => {
-            onDeleteMessage(message).catch(() => toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error'));
+            onDeleteMessage(message).catch(onDeleteFailure);
           },
         },
       ],
     });
   };
 
-  return (msg: SendbirdMessage) => {
-    if (!msg.isUserMessage() && !msg.isFileMessage()) {
-      return { onPress: undefined, onLongPress: undefined };
-    }
+  return ({ message }) => {
+    if (!message.isUserMessage() && !message.isFileMessage()) return {};
 
     const sheetItems: BottomSheetItem['sheetItems'] = [];
-    const response: PressActions = {
-      onPress: undefined,
-      onLongPress: undefined,
-    };
-
-    if (msg.isUserMessage()) {
-      sheetItems.push({
-        icon: 'copy',
+    const menu = {
+      copy: (message: HandleableMessage) => ({
+        icon: 'copy' as const,
         title: STRINGS.LABELS.CHANNEL_MESSAGE_COPY,
-        onPress: () => {
-          clipboardService.setString(msg.message || '');
-          toast.show(STRINGS.TOAST.COPY_OK, 'success');
-        },
-      });
-    }
-    if (!isVoiceMessage(msg) && msg.isFileMessage()) {
-      sheetItems.push({
-        icon: 'download',
+        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),
+      }),
+      reply: (message: HandleableMessage) => ({
+        disabled: Boolean(message.parentMessageId),
+        icon: 'reply' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_REPLY,
+        onPress: () => onReplyMessage?.(message),
+      }),
+      download: (message: HandleableMessage) => ({
+        icon: 'download' as const,
         title: STRINGS.LABELS.CHANNEL_MESSAGE_SAVE,
-        onPress: async () => {
-          if (toMegabyte(msg.size) > 4) {
-            toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
-          }
-
-          fileService
-            .save({ fileUrl: msg.url, fileName: msg.name, fileType: msg.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);
-            });
-        },
-      });
-    }
+        onPress: () => onDownloadFile(message),
+      }),
+    };
 
-    if (!channel.isEphemeral) {
-      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
-        if (msg.isUserMessage()) {
-          sheetItems.push({
-            icon: 'edit',
-            title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
-            onPress: () => onEditMessage(msg),
-          });
+    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 (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
+          sheetItems.push(menu.reply(message));
         }
-        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':
-        case 'video':
-        case 'audio': {
-          response.onPress = () => {
-            onPressMediaMessage?.(msg, () => onDeleteMessage(msg), getAvailableUriFromFileMessage(msg));
-          };
-          break;
+    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));
         }
-        default: {
-          response.onPress = () => SBUUtils.openURL(msg.url);
-          break;
+        if (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
+          sheetItems.push(menu.reply(message));
         }
       }
     }
 
-    if (sheetItems.length > 0) {
-      response.onLongPress = () => {
-        openSheet({
-          sheetItems,
-          HeaderComponent: shouldRenderReaction(
-            channel,
-            sbOptions.uikitWithAppInfo.groupChannel.channel.enableReactions,
-          )
-            ? ({ onClose }) => <ReactionAddons.BottomSheet message={msg} channel={channel} onClose={onClose} />
-            : undefined,
-        });
-      };
-    }
+    const bottomSheetItem: BottomSheetItem = {
+      sheetItems,
+      HeaderComponent: shouldRenderReaction(channel, sbOptions.uikitWithAppInfo.groupChannel.channel.enableReactions)
+        ? ({ onClose }) => <ReactionAddons.BottomSheet message={message} channel={channel} onClose={onClose} />
+        : undefined,
+    };
 
-    if (msg.sendingStatus === 'failed') {
-      response.onLongPress = () => handleFailedMessage(msg);
-      response.onPress = () => {
-        onResendFailedMessage(msg).catch(onFailureToReSend);
-      };
-    }
+    switch (true) {
+      case message.sendingStatus === 'pending': {
+        return {
+          onPress: undefined,
+          onLongPress: undefined,
+          bottomSheetItem: undefined,
+        };
+      }
 
-    if (msg.sendingStatus === 'pending') {
-      response.onLongPress = undefined;
-      response.onPress = undefined;
-    }
+      case message.sendingStatus === 'failed': {
+        return {
+          onPress: () => onResendFailedMessage(message).catch(onResendFailure),
+          onLongPress: () => openSheetForFailedMessage(message),
+          bottomSheetItem,
+        };
+      }
+
+      case message.isFileMessage(): {
+        return {
+          onPress: () => onOpenFile(message),
+          onLongPress: () => openSheet(bottomSheetItem),
+          bottomSheetItem,
+        };
+      }
 
-    return response;
+      default: {
+        return {
+          onPress: undefined,
+          onLongPress: () => openSheet(bottomSheetItem),
+          bottomSheetItem,
+        };
+      }
+    }
   };
 };
 

package/src/components/GroupChannelMessageRenderer/index.tsx

@@ -1,7 +1,13 @@
-import React, { useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 
 import type { GroupChannelMessageProps, RegexTextPattern } from '@sendbird/uikit-react-native-foundation';
-import { Box, GroupChannelMessage, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import {
+  Box,
+  GroupChannelMessage,
+  Text,
+  TypingIndicatorBubble,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
 import {
   SendbirdAdminMessage,
   SendbirdFileMessage,
@@ -17,9 +23,11 @@ import {
 } from '@sendbird/uikit-utils';
 
 import { VOICE_MESSAGE_META_ARRAY_DURATION_KEY } from '../../constants';
+import { GroupChannelContexts } from '../../domain/groupChannel/module/moduleContext';
 import type { GroupChannelProps } from '../../domain/groupChannel/types';
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
 import SBUUtils from '../../libs/SBUUtils';
+import { TypingIndicatorType } from '../../types';
 import { ReactionAddons } from '../ReactionAddons';
 import GroupChannelMessageDateSeparator from './GroupChannelMessageDateSeparator';
 import GroupChannelMessageFocusAnimation from './GroupChannelMessageFocusAnimation';
@@ -292,4 +300,28 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
   );
 };
 
+export const GroupChannelTypingIndicatorBubble = () => {
+  const { sbOptions } = useSendbirdChat();
+  const { publish } = useContext(GroupChannelContexts.PubSub);
+  const { typingUsers } = useContext(GroupChannelContexts.TypingIndicator);
+
+  const shouldRenderBubble = useIIFE(() => {
+    if (typingUsers.length === 0) return false;
+    if (!sbOptions.uikit.groupChannel.channel.enableTypingIndicator) return false;
+    if (!sbOptions.uikit.groupChannel.channel.typingIndicatorTypes.has(TypingIndicatorType.Bubble)) return false;
+    return true;
+  });
+
+  useEffect(() => {
+    if (shouldRenderBubble) publish({ type: 'TYPING_BUBBLE_RENDERED' });
+  }, [shouldRenderBubble]);
+
+  if (!shouldRenderBubble) return null;
+  return (
+    <Box paddingHorizontal={16} marginTop={4} marginBottom={16}>
+      <TypingIndicatorBubble typingUsers={typingUsers} />
+    </Box>
+  );
+};
+
 export default React.memo(GroupChannelMessageRenderer);

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

@@ -4,7 +4,8 @@ import { View } from 'react-native';
 import { Header, Icon, createStyleSheet, useHeaderStyle } from '@sendbird/uikit-react-native-foundation';
 
 import ChannelCover from '../../../components/ChannelCover';
-import { useLocalization } from '../../../hooks/useContext';
+import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
+import { TypingIndicatorType } from '../../../types';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
 
@@ -13,11 +14,21 @@ const GroupChannelHeader = ({
   onPressHeaderLeft,
   onPressHeaderRight,
 }: GroupChannelProps['Header']) => {
+  const { sbOptions } = useSendbirdChat();
   const { headerTitle, channel } = useContext(GroupChannelContexts.Fragment);
   const { typingUsers } = useContext(GroupChannelContexts.TypingIndicator);
   const { STRINGS } = useLocalization();
   const { HeaderComponent } = useHeaderStyle();
-  const subtitle = STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers);
+
+  const renderSubtitle = () => {
+    const subtitle = STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers);
+
+    if (!subtitle) return null;
+    if (!sbOptions.uikit.groupChannel.channel.enableTypingIndicator) return null;
+    if (!sbOptions.uikit.groupChannel.channel.typingIndicatorTypes.has(TypingIndicatorType.Text)) return null;
+
+    return <Header.Subtitle style={styles.subtitle}>{subtitle}</Header.Subtitle>;
+  };
 
   const isHidden = shouldHideRight();
 
@@ -29,7 +40,7 @@ const GroupChannelHeader = ({
           <ChannelCover channel={channel} size={34} containerStyle={styles.avatarGroup} />
           <View style={{ flexShrink: 1 }}>
             <Header.Title h2>{headerTitle}</Header.Title>
-            {Boolean(subtitle) && subtitle && <Header.Subtitle style={styles.subtitle}>{subtitle}</Header.Subtitle>}
+            {renderSubtitle()}
           </View>
         </View>
       }

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

@@ -73,6 +73,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   useEffect(() => {
     return subscribe(({ type }) => {
       switch (type) {
+        case 'TYPING_BUBBLE_RENDERED':
         case 'MESSAGES_RECEIVED': {
           if (!props.scrolledAwayFromBottom) {
             scrollToBottom(true);

package/src/domain/groupChannel/types.ts

@@ -183,4 +183,8 @@ export type GroupChannelPubSubContextPayload =
       data: {
         messages: SendbirdMessage[];
       };
+    }
+  | {
+      type: 'TYPING_BUBBLE_RENDERED';
+      data?: undefined;
     };

package/src/fragments/createGroupChannelFragment.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { ReplyType } from '@sendbird/chat/message';
 import { useGroupChannelMessages } from '@sendbird/uikit-chat-hooks';
+import { Box } from '@sendbird/uikit-react-native-foundation';
 import {
   NOOP,
   PASS,
@@ -14,7 +15,9 @@ import {
   useRefTracker,
 } from '@sendbird/uikit-utils';
 
-import GroupChannelMessageRenderer from '../components/GroupChannelMessageRenderer';
+import GroupChannelMessageRenderer, {
+  GroupChannelTypingIndicatorBubble,
+} from '../components/GroupChannelMessageRenderer';
 import NewMessagesButton from '../components/NewMessagesButton';
 import ScrollToBottomButton from '../components/ScrollToBottomButton';
 import StatusComposition from '../components/StatusComposition';
@@ -123,8 +126,13 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     }, []);
 
     const renderItem: GroupChannelProps['MessageList']['renderMessage'] = useFreshCallback((props) => {
-      if (renderMessage) return renderMessage(props);
-      return <GroupChannelMessageRenderer {...props} />;
+      const content = renderMessage ? renderMessage(props) : <GroupChannelMessageRenderer {...props} />;
+      return (
+        <Box>
+          {content}
+          {props.isFirstItem && !hasNext() && <GroupChannelTypingIndicatorBubble />}
+        </Box>
+      );
     });
 
     const memoizedFlatListProps = useMemo(

package/src/index.ts

@@ -2,6 +2,8 @@ import { Platform } from 'react-native';
 
 import { Logger } from '@sendbird/uikit-utils';
 
+import { PromisePolyfill } from './utils/promise';
+
 /** Components **/
 export { default as ChannelInput } from './components/ChannelInput';
 export { default as ChannelMessageList } from './components/ChannelMessageList';
@@ -132,8 +134,10 @@ export { default as SendbirdUIKitContainer, SendbirdUIKit } from './containers/S
 export type { SendbirdUIKitContainerProps } from './containers/SendbirdUIKitContainer';
 export { default as SBUError } from './libs/SBUError';
 export { default as SBUUtils } from './libs/SBUUtils';
-
 export * from './types';
 
 Logger.setLogLevel(__DEV__ ? 'warn' : 'none');
 Logger.setTitle(`[UIKIT_${Platform.OS}]`);
+
+// NOTE: In Hermes, not all implementations of Promise are included
+PromisePolyfill.apply();

package/src/types.ts

@@ -28,3 +28,8 @@ export type Range = {
   start: number;
   end: number;
 };
+
+export enum TypingIndicatorType {
+  Text = 'text',
+  Bubble = 'bubble',
+}