@sendbird/uikit-react-native 2.4.2 → 2.5.0-rc.1

package/src/containers/SendbirdUIKitContainer.tsx

@@ -60,6 +60,7 @@ export const SendbirdUIKit = Object.freeze({
     USE_USER_ID_FOR_NICKNAME: false,
     USER_MENTION: false,
     IMAGE_COMPRESSION: true,
+    MESSAGE_SEARCH: false,
   },
 });
 
@@ -206,6 +207,7 @@ const SendbirdUIKitContainer = ({
         }
         enableUserMention={chatOptions?.enableUserMention ?? SendbirdUIKit.DEFAULT.USER_MENTION}
         enableImageCompression={chatOptions?.enableImageCompression ?? SendbirdUIKit.DEFAULT.IMAGE_COMPRESSION}
+        enableMessageSearch={chatOptions?.enableMessageSearch ?? SendbirdUIKit.DEFAULT.MESSAGE_SEARCH}
       >
         <LocalizationProvider stringSet={defaultStringSet}>
           <PlatformServiceProvider

package/src/contexts/SendbirdChatCtx.tsx

@@ -21,6 +21,7 @@ export interface UIKitFeaturesInSendbirdChatContext {
   enableUseUserIdForNickname: boolean;
   enableUserMention: boolean;
   enableImageCompression: boolean;
+  enableMessageSearch: boolean;
 }
 
 interface Props extends UIKitFeaturesInSendbirdChatContext, React.PropsWithChildren {
@@ -43,13 +44,16 @@ export type SendbirdChatContextType = {
   markAsDeliveredWithChannel: (channel: SendbirdGroupChannel) => void;
 
   features: {
-    // UIKit features
+    // RN UIKit features
     autoPushTokenRegistrationEnabled: boolean;
+
+    // UIKit features
     channelListTypingIndicatorEnabled: boolean;
     channelListMessageReceiptStatusEnabled: boolean;
     useUserIdForNicknameEnabled: boolean;
     userMentionEnabled: boolean;
     imageCompressionEnabled: boolean;
+    messageSearchEnabled: boolean;
 
     // Sendbird application features
     deliveryReceiptEnabled: boolean;
@@ -72,6 +76,7 @@ export const SendbirdChatProvider = ({
   enableUseUserIdForNickname,
   enableUserMention,
   enableImageCompression,
+  enableMessageSearch,
 }: Props) => {
   const [currentUser, _setCurrentUser] = useState<SendbirdUser>();
   const forceUpdate = useForceUpdate();
@@ -147,6 +152,7 @@ export const SendbirdChatProvider = ({
       useUserIdForNicknameEnabled: enableUseUserIdForNickname,
       userMentionEnabled: enableUserMention,
       imageCompressionEnabled: enableImageCompression,
+      messageSearchEnabled: enableMessageSearch,
     },
   };
 

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

@@ -8,13 +8,19 @@ import { useLocalization } from '../../../hooks/useContext';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
 
-const GroupChannelHeader = ({ onPressHeaderLeft, onPressHeaderRight }: GroupChannelProps['Header']) => {
+const GroupChannelHeader = ({
+  shouldHideRight,
+  onPressHeaderLeft,
+  onPressHeaderRight,
+}: GroupChannelProps['Header']) => {
   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 isHidden = shouldHideRight();
+
   return (
     <HeaderComponent
       clearTitleMargin
@@ -29,8 +35,8 @@ const GroupChannelHeader = ({ onPressHeaderLeft, onPressHeaderRight }: GroupChan
       }
       left={<Icon icon={'arrow-left'} />}
       onPressLeft={onPressHeaderLeft}
-      right={<Icon icon={'info'} />}
-      onPressRight={onPressHeaderRight}
+      right={isHidden ? null : <Icon icon={'info'} />}
+      onPressRight={isHidden ? undefined : onPressHeaderRight}
     />
   );
 };

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

@@ -1,342 +1,99 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { ListRenderItem, Platform, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import React, { useContext, useEffect, useRef } from 'react';
+import type { FlatList } from 'react-native';
 
-import type { BottomSheetItem } from '@sendbird/uikit-react-native-foundation';
-import {
-  ChannelFrozenBanner,
-  createStyleSheet,
-  useAlert,
-  useBottomSheet,
-  useToast,
-  useUIKitTheme,
-} from '@sendbird/uikit-react-native-foundation';
-import type { SendbirdFileMessage, SendbirdMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
-import {
-  Logger,
-  getAvailableUriFromFileMessage,
-  getFileExtension,
-  getFileType,
-  isMyMessage,
-  messageKeyExtractor,
-  shouldRenderReaction,
-  toMegabyte,
-  useFreshCallback,
-} from '@sendbird/uikit-utils';
+import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+import { isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
 
-import type { ChatFlatListRef } from '../../../components/ChatFlatList';
-import ChatFlatList from '../../../components/ChatFlatList';
-import { ReactionAddons } from '../../../components/ReactionAddons';
-import { DEPRECATION_WARNING } from '../../../constants';
-import { useLocalization, usePlatformService, useSendbirdChat } from '../../../hooks/useContext';
-import SBUUtils from '../../../libs/SBUUtils';
+import ChannelMessageList from '../../../components/ChannelMessageList';
+import { MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../../../constants';
+import { useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
 
-const HANDLE_NEXT_MSG_SEPARATELY = Platform.select({ default: true });
-
-const GroupChannelMessageList = ({
-  currentUserId,
-  channel,
-  messages,
-  renderMessage,
-  nextMessages,
-  newMessagesFromMembers,
-  onBottomReached,
-  onTopReached,
-  renderNewMessagesButton,
-  renderScrollToBottomButton,
-  onResendFailedMessage,
-  onDeleteMessage,
-  onPressImageMessage,
-  onPressMediaMessage,
-  flatListProps,
-  enableMessageGrouping,
-}: GroupChannelProps['MessageList']) => {
-  const { STRINGS } = useLocalization();
-  const { colors } = useUIKitTheme();
-  const { left, right } = useSafeAreaInsets();
-  const [scrollLeaveBottom, setScrollLeaveBottom] = useState(false);
-  const scrollRef = useRef<ChatFlatListRef>(null);
-  const [newMessagesInternalBuffer, setNewMessagesInternalBuffer] = useState(() => newMessagesFromMembers);
-  const getMessagePressActions = useGetMessagePressActions({
-    channel,
-    currentUserId,
-    onDeleteMessage,
-    onResendFailedMessage,
-    onPressImageMessage,
-    onPressMediaMessage,
-  });
-
-  const safeAreaLayout = { paddingLeft: left, paddingRight: right };
-
-  const renderItem: ListRenderItem<SendbirdMessage> = useFreshCallback(({ item, index }) => {
-    const { onPress, onLongPress } = getMessagePressActions(item);
-    return renderMessage({
-      message: item,
-      prevMessage: messages[index + 1],
-      nextMessage: messages[index - 1],
-      onPress,
-      onLongPress,
-      enableMessageGrouping,
-      channel,
-      currentUserId,
-    });
-  });
-
-  if (!HANDLE_NEXT_MSG_SEPARATELY) {
-    useEffect(() => {
-      if (newMessagesInternalBuffer.length !== 0) {
-        setNewMessagesInternalBuffer((prev) => prev.concat(newMessagesFromMembers));
-      }
-      onBottomReached();
-    }, [newMessagesFromMembers]);
-  }
-
-  const onLeaveScrollBottom = useCallback((val: boolean) => {
-    if (!HANDLE_NEXT_MSG_SEPARATELY) setNewMessagesInternalBuffer([]);
-    setScrollLeaveBottom(val);
-  }, []);
-
-  return (
-    <View style={[{ flex: 1, backgroundColor: colors.background }, safeAreaLayout]}>
-      {channel.isFrozen && (
-        <ChannelFrozenBanner style={styles.frozenBanner} text={STRINGS.GROUP_CHANNEL.LIST_BANNER_FROZEN} />
-      )}
-      <ChatFlatList
-        nextMessages={nextMessages}
-        onBottomReached={onBottomReached}
-        onTopReached={onTopReached}
-        onLeaveScrollBottom={onLeaveScrollBottom}
-        currentUserId={currentUserId}
-        {...flatListProps}
-        ref={scrollRef}
-        data={messages}
-        renderItem={renderItem}
-        keyExtractor={messageKeyExtractor}
-        contentContainerStyle={[
-          // { minHeight: '100%', justifyContent: 'flex-end' },
-          channel.isFrozen && styles.frozenListPadding,
-          flatListProps?.contentContainerStyle,
-        ]}
-      />
-      {renderNewMessagesButton && (
-        <View style={[styles.newMsgButton, safeAreaLayout]}>
-          {renderNewMessagesButton({
-            visible: scrollLeaveBottom,
-            onPress: () => scrollRef.current?.scrollToBottom(false),
-            newMessages: !HANDLE_NEXT_MSG_SEPARATELY ? newMessagesInternalBuffer : newMessagesFromMembers,
-          })}
-        </View>
-      )}
-      {renderScrollToBottomButton && (
-        <View pointerEvents={scrollLeaveBottom ? 'auto' : 'none'} style={[styles.scrollButton, safeAreaLayout]}>
-          {renderScrollToBottomButton({
-            visible: scrollLeaveBottom,
-            onPress: () => scrollRef.current?.scrollToBottom(false),
-          })}
-        </View>
-      )}
-    </View>
-  );
-};
-
-type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
-const useGetMessagePressActions = ({
-  channel,
-  currentUserId,
-  onResendFailedMessage,
-  onDeleteMessage,
-  onPressImageMessage,
-  onPressMediaMessage,
-}: Pick<
-  GroupChannelProps['MessageList'],
-  | 'channel'
-  | 'currentUserId'
-  | 'onResendFailedMessage'
-  | 'onDeleteMessage'
-  | 'onPressImageMessage'
-  | 'onPressMediaMessage'
->) => {
-  const { colors } = useUIKitTheme();
-  const { STRINGS } = useLocalization();
-  const toast = useToast();
-  const { openSheet } = useBottomSheet();
-  const { alert } = useAlert();
-  const { clipboardService, fileService } = usePlatformService();
-  const { features } = useSendbirdChat();
+const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
+  const { sdk } = useSendbirdChat();
   const { setMessageToEdit } = useContext(GroupChannelContexts.Fragment);
+  const { subscribe } = useContext(GroupChannelContexts.PubSub);
 
-  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')),
-        },
-        {
-          title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_REMOVE,
-          titleColor: colors.ui.dialog.default.none.destructive,
-          onPress: () => confirmDelete(message),
-        },
-      ],
-    });
-  };
-  const confirmDelete = (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_OK,
-          style: 'destructive',
-          onPress: () => onDeleteMessage(message).catch(() => toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error')),
-        },
-      ],
-    });
-  };
-
-  return (msg: SendbirdMessage) => {
-    if (!msg.isUserMessage() && !msg.isFileMessage()) {
-      return { onPress: undefined, onLongPress: undefined };
-    }
+  const id = useUniqHandlerId('GroupChannelMessageList');
+  const ref = useRef<FlatList<SendbirdMessage>>(null);
 
-    const sheetItems: BottomSheetItem['sheetItems'] = [];
-    const response: { onPress?: () => void; onLongPress?: () => void } = {
-      onPress: undefined,
-      onLongPress: undefined,
-    };
+  // FIXME: Workaround, should run after data has been applied to UI.
+  const lazyScrollToBottom = (animated = false, timeout = 0) => {
+    setTimeout(() => {
+      ref.current?.scrollToOffset({ offset: 0, animated });
+    }, timeout);
+  };
 
-    if (msg.isUserMessage()) {
-      sheetItems.push({
-        icon: 'copy',
-        title: STRINGS.LABELS.CHANNEL_MESSAGE_COPY,
-        onPress: () => {
-          clipboardService.setString(msg.message || '');
-          toast.show(STRINGS.TOAST.COPY_OK, 'success');
-        },
-      });
+  // FIXME: Workaround, should run after data has been applied to UI.
+  const lazyScrollToIndex = (index = 0, animated = false, timeout = 0) => {
+    setTimeout(() => {
+      ref.current?.scrollToIndex({ index, animated, viewPosition: 0.5 });
+    }, timeout);
+  };
 
-      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
-        sheetItems.push(
-          {
-            icon: 'edit',
-            title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
-            onPress: () => setMessageToEdit(msg),
-          },
-          {
-            icon: 'delete',
-            title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
-            onPress: () => confirmDelete(msg),
-          },
-        );
+  useEffect(() => {
+    if (props.searchItem) {
+      const createdAt = props.searchItem.startingPoint;
+      const foundMessageIndex = props.messages.findIndex((it) => it.createdAt === createdAt);
+      const isIncludedInList = foundMessageIndex > -1;
+      if (isIncludedInList) {
+        lazyScrollToIndex(foundMessageIndex, true, MESSAGE_SEARCH_SAFE_SCROLL_DELAY);
       }
     }
+  }, [props.searchItem]);
 
-    if (msg.isFileMessage()) {
-      sheetItems.push({
-        icon: 'download',
-        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);
-            });
-        },
+  const scrollToBottom = useFreshCallback((animated = false) => {
+    if (props.hasNext()) {
+      props.onResetMessageList(() => {
+        lazyScrollToBottom(animated);
+        props.onScrolledAwayFromBottom(false);
       });
+    } else {
+      lazyScrollToBottom(animated);
+    }
+  });
 
-      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
-        sheetItems.push({
-          icon: 'delete',
-          title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
-          onPress: () => confirmDelete(msg),
-        });
+  useChannelHandler(sdk, id, {
+    onReactionUpdated(channel, event) {
+      if (isDifferentChannel(channel, props.channel)) return;
+      const recentMessage = props.messages[0];
+      const isRecentMessage = recentMessage && recentMessage.messageId === event.messageId;
+      const scrollReachedBottomAndCanScroll = !props.scrolledAwayFromBottom && !props.hasNext();
+      if (isRecentMessage && scrollReachedBottomAndCanScroll) {
+        lazyScrollToBottom(true, 250);
       }
+    },
+  });
 
-      const fileType = getFileType(msg.type || getFileExtension(msg.name));
-      switch (fileType) {
-        case 'image':
-        case 'video':
-        case 'audio': {
-          response.onPress = () => {
-            if (onPressImageMessage && fileType === 'image') {
-              Logger.warn(DEPRECATION_WARNING.GROUP_CHANNEL.ON_PRESS_IMAGE_MESSAGE);
-              onPressImageMessage(msg, getAvailableUriFromFileMessage(msg));
-            }
-            onPressMediaMessage?.(msg, () => onDeleteMessage(msg), getAvailableUriFromFileMessage(msg));
-          };
+  useEffect(() => {
+    return subscribe(({ type }) => {
+      switch (type) {
+        case 'MESSAGES_RECEIVED': {
+          if (!props.scrolledAwayFromBottom) {
+            scrollToBottom(true);
+          }
           break;
         }
-        default: {
-          response.onPress = () => SBUUtils.openURL(msg.url);
+        case 'MESSAGE_SENT_SUCCESS':
+        case 'MESSAGE_SENT_PENDING': {
+          scrollToBottom(false);
           break;
         }
       }
-    }
-
-    if (sheetItems.length > 0) {
-      response.onLongPress = () => {
-        openSheet({
-          sheetItems,
-          HeaderComponent: shouldRenderReaction(channel, features.reactionEnabled)
-            ? ({ onClose }) => <ReactionAddons.BottomSheet message={msg} channel={channel} onClose={onClose} />
-            : undefined,
-        });
-      };
-    }
-
-    if (msg.sendingStatus === 'failed') {
-      response.onLongPress = () => handleFailedMessage(msg);
-      response.onPress = () => {
-        onResendFailedMessage(msg).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error'));
-      };
-    }
-
-    if (msg.sendingStatus === 'pending') {
-      response.onLongPress = undefined;
-      response.onPress = undefined;
-    }
+    });
+  }, [props.scrolledAwayFromBottom]);
 
-    return response;
-  };
+  return (
+    <ChannelMessageList
+      {...props}
+      ref={ref}
+      onEditMessage={setMessageToEdit}
+      onPressNewMessagesButton={scrollToBottom}
+      onPressScrollToBottomButton={scrollToBottom}
+    />
+  );
 };
 
-const styles = createStyleSheet({
-  frozenBanner: {
-    position: 'absolute',
-    zIndex: 999,
-    top: 8,
-    left: 8,
-    right: 8,
-  },
-  frozenListPadding: {
-    paddingBottom: 32,
-  },
-  newMsgButton: {
-    position: 'absolute',
-    zIndex: 999,
-    bottom: 10,
-    alignSelf: 'center',
-  },
-  scrollButton: {
-    position: 'absolute',
-    zIndex: 998,
-    bottom: 10,
-    right: 16,
-  },
-});
-
 export default React.memo(GroupChannelMessageList);

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

@@ -29,7 +29,7 @@ const GroupChannelSuggestedMentionList = ({
 }: GroupChannelProps['SuggestedMentionList']) => {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
   const { channel } = useContext(GroupChannelContexts.Fragment);
-  const { mentionManager } = useSendbirdChat();
+  const { sdk, mentionManager } = useSendbirdChat();
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const { topInset } = useHeaderStyle();
@@ -38,6 +38,7 @@ const GroupChannelSuggestedMentionList = ({
   const keyboard = useKeyboardStatus();
 
   const { members, reset, searchStringRange, searchLimited } = useMentionSuggestion({
+    sdk,
     text,
     selection,
     channel,

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

@@ -13,7 +13,8 @@ import {
 
 import ProviderLayout from '../../../components/ProviderLayout';
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
-import type { GroupChannelContextsType, GroupChannelModule } from '../types';
+import type { PubSub } from '../../../utils/pubsub';
+import type { GroupChannelContextsType, GroupChannelModule, GroupChannelPubSubContextPayload } from '../types';
 
 export const GroupChannelContexts: GroupChannelContextsType = {
   Fragment: createContext({
@@ -24,6 +25,10 @@ export const GroupChannelContexts: GroupChannelContextsType = {
   TypingIndicator: createContext({
     typingUsers: [] as SendbirdUser[],
   }),
+  PubSub: createContext({
+    publish: NOOP,
+    subscribe: () => NOOP,
+  } as PubSub<GroupChannelPubSubContextPayload>),
 };
 
 export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
@@ -31,6 +36,7 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
   channel,
   enableTypingIndicator,
   keyboardAvoidOffset = 0,
+  groupChannelPubSub,
 }) => {
   if (!channel) throw new Error('GroupChannel is not provided to GroupChannelModule');
 
@@ -61,7 +67,9 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
         }}
       >
         <GroupChannelContexts.TypingIndicator.Provider value={{ typingUsers }}>
-          {children}
+          <GroupChannelContexts.PubSub.Provider value={groupChannelPubSub}>
+            {children}
+          </GroupChannelContexts.PubSub.Provider>
         </GroupChannelContexts.TypingIndicator.Provider>
       </GroupChannelContexts.Fragment.Provider>
     </ProviderLayout>