@sendbird/uikit-react-native 3.1.1 → 3.2.0

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

@@ -1,20 +1,28 @@
-import React, { createContext, useCallback, useState } from 'react';
+import React, { createContext, useCallback, useRef, useState } from 'react';
+import type { FlatList } from 'react-native';
 
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import {
+  ContextValue,
+  Logger,
   NOOP,
   SendbirdFileMessage,
   SendbirdGroupChannel,
+  SendbirdMessage,
   SendbirdUser,
   SendbirdUserMessage,
+  getGroupChannelChatAvailableState,
   isDifferentChannel,
+  useFreshCallback,
   useUniqHandlerId,
 } from '@sendbird/uikit-utils';
 
 import ProviderLayout from '../../../components/ProviderLayout';
+import { MESSAGE_FOCUS_ANIMATION_DELAY } from '../../../constants';
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import type { PubSub } from '../../../utils/pubsub';
 import type { GroupChannelContextsType, GroupChannelModule, GroupChannelPubSubContextPayload } from '../types';
+import { GroupChannelProps } from '../types';
 
 export const GroupChannelContexts: GroupChannelContextsType = {
   Fragment: createContext({
@@ -30,6 +38,16 @@ export const GroupChannelContexts: GroupChannelContextsType = {
     publish: NOOP,
     subscribe: () => NOOP,
   } as PubSub<GroupChannelPubSubContextPayload>),
+  MessageList: createContext({
+    flatListRef: { current: null },
+    scrollToMessage: () => false,
+    lazyScrollToBottom: () => {
+      // noop
+    },
+    lazyScrollToIndex: () => {
+      // noop
+    },
+  } as MessageListContextValue),
 };
 
 export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
@@ -38,6 +56,8 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
   enableTypingIndicator,
   keyboardAvoidOffset = 0,
   groupChannelPubSub,
+  messages,
+  onUpdateSearchItem,
 }) => {
   if (!channel) throw new Error('GroupChannel is not provided to GroupChannelModule');
 
@@ -49,6 +69,11 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
   const [messageToEdit, setMessageToEdit] = useState<SendbirdUserMessage | SendbirdFileMessage>();
   const [messageToReply, setMessageToReply] = useState<SendbirdUserMessage | SendbirdFileMessage>();
 
+  const { flatListRef, lazyScrollToIndex, lazyScrollToBottom, scrollToMessage } = useScrollActions({
+    messages,
+    onUpdateSearchItem,
+  });
+
   const updateInputMode = (mode: 'send' | 'edit' | 'reply', message?: SendbirdUserMessage | SendbirdFileMessage) => {
     if (mode === 'send' || !message) {
       setMessageToEdit(undefined);
@@ -73,7 +98,9 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
     },
     onChannelFrozen(frozenChannel) {
       if (frozenChannel.url === channel.url) {
-        setMessageToReply(undefined);
+        if (frozenChannel.isGroupChannel() && getGroupChannelChatAvailableState(channel).frozen) {
+          setMessageToReply(undefined);
+        }
       }
     },
     onUserMuted(mutedChannel, user) {
@@ -101,12 +128,97 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
           setMessageToReply: useCallback((message) => updateInputMode('reply', message), []),
         }}
       >
-        <GroupChannelContexts.TypingIndicator.Provider value={{ typingUsers }}>
-          <GroupChannelContexts.PubSub.Provider value={groupChannelPubSub}>
-            {children}
-          </GroupChannelContexts.PubSub.Provider>
-        </GroupChannelContexts.TypingIndicator.Provider>
+        <GroupChannelContexts.PubSub.Provider value={groupChannelPubSub}>
+          <GroupChannelContexts.TypingIndicator.Provider value={{ typingUsers }}>
+            <GroupChannelContexts.MessageList.Provider
+              value={{
+                flatListRef,
+                scrollToMessage,
+                lazyScrollToIndex,
+                lazyScrollToBottom,
+              }}
+            >
+              {children}
+            </GroupChannelContexts.MessageList.Provider>
+          </GroupChannelContexts.TypingIndicator.Provider>
+        </GroupChannelContexts.PubSub.Provider>
       </GroupChannelContexts.Fragment.Provider>
     </ProviderLayout>
   );
 };
+
+type MessageListContextValue = ContextValue<GroupChannelContextsType['MessageList']>;
+const useScrollActions = (params: Pick<GroupChannelProps['Provider'], 'messages' | 'onUpdateSearchItem'>) => {
+  const { messages, onUpdateSearchItem } = params;
+  const flatListRef = useRef<FlatList<SendbirdMessage>>(null);
+
+  // FIXME: Workaround, should run after data has been applied to UI.
+  const lazyScrollToBottom = useFreshCallback<MessageListContextValue['lazyScrollToIndex']>((params) => {
+    if (!flatListRef.current) {
+      logFlatListRefWarning();
+      return;
+    }
+
+    setTimeout(() => {
+      flatListRef.current?.scrollToOffset({ offset: 0, animated: params?.animated ?? false });
+    }, params?.timeout ?? 0);
+  });
+
+  // FIXME: Workaround, should run after data has been applied to UI.
+  const lazyScrollToIndex = useFreshCallback<MessageListContextValue['lazyScrollToIndex']>((params) => {
+    if (!flatListRef.current) {
+      logFlatListRefWarning();
+      return;
+    }
+
+    setTimeout(() => {
+      flatListRef.current?.scrollToIndex({
+        index: params?.index ?? 0,
+        animated: params?.animated ?? false,
+        viewPosition: params?.viewPosition ?? 0.5,
+      });
+    }, params?.timeout ?? 0);
+  });
+
+  const scrollToMessage = useFreshCallback<MessageListContextValue['scrollToMessage']>((messageId, options) => {
+    if (!flatListRef.current) {
+      logFlatListRefWarning();
+      return false;
+    }
+
+    const foundMessageIndex = messages.findIndex((it) => it.messageId === messageId);
+    const isIncludedInList = foundMessageIndex > -1;
+
+    if (isIncludedInList) {
+      if (options?.focusAnimated) {
+        setTimeout(
+          () => onUpdateSearchItem({ startingPoint: messages[foundMessageIndex].createdAt }),
+          MESSAGE_FOCUS_ANIMATION_DELAY,
+        );
+      }
+      lazyScrollToIndex({
+        index: foundMessageIndex,
+        animated: true,
+        timeout: 0,
+        viewPosition: options?.viewPosition,
+      });
+      return true;
+    } else {
+      return false;
+    }
+  });
+
+  return {
+    flatListRef,
+    lazyScrollToIndex,
+    lazyScrollToBottom,
+    scrollToMessage,
+  };
+};
+
+const logFlatListRefWarning = () => {
+  Logger.warn(
+    'Cannot find flatListRef.current, please render FlatList and pass the flatListRef' +
+      'or please try again after FlatList has been rendered.',
+  );
+};

package/src/domain/groupChannel/types.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { FlatList } from 'react-native';
 
 import type { UseGroupChannelMessagesOptions } from '@sendbird/uikit-chat-hooks';
 import type {
@@ -95,6 +96,10 @@ export interface GroupChannelProps {
     enableTypingIndicator: boolean;
     keyboardAvoidOffset?: number;
     groupChannelPubSub: PubSub<GroupChannelPubSubContextPayload>;
+
+    messages: SendbirdMessage[];
+    // Changing the search item will trigger the focus animation on messages.
+    onUpdateSearchItem: (searchItem?: GroupChannelProps['MessageList']['searchItem']) => void;
   };
 }
 
@@ -117,6 +122,42 @@ export interface GroupChannelContextsType {
     typingUsers: SendbirdUser[];
   }>;
   PubSub: React.Context<PubSub<GroupChannelPubSubContextPayload>>;
+  MessageList: React.Context<{
+    /**
+     * ref object for FlatList of MessageList
+     * */
+    flatListRef: React.MutableRefObject<FlatList | null>;
+    /**
+     * Function that scrolls to a message within a group channel.
+     * @param messageId {number} - The id of the message to scroll.
+     * @param options {object} - Scroll options (optional).
+     * @param options.focusAnimated {boolean} - Enable a shake animation on the message component upon completion of scrolling.
+     * @param options.viewPosition {number} - Position information to adjust the visible area during scrolling. bottom(0) ~ top(1.0)
+     *
+     * @example
+     * ```
+     *   const { scrollToMessage } = useContext(GroupChannelContexts.MessageList);
+     *   const messageIncludedInMessageList = scrollToMessage(lastMessage.messageId, { focusAnimated: true, viewPosition: 1 });
+     *   if (!messageIncludedInMessageList) console.warn('Message not found in the message list.');
+     * ```
+     * */
+    scrollToMessage: (messageId: number, options?: { focusAnimated?: boolean; viewPosition?: number }) => boolean;
+    /**
+     * Call the FlatList function asynchronously to scroll to bottom lazily
+     * to avoid scrolling before data rendering has been committed.
+     * */
+    lazyScrollToBottom: (params?: { animated?: boolean; timeout?: number }) => void;
+    /**
+     * Call the FlatList function asynchronously to scroll to index lazily.
+     * to avoid scrolling before data rendering has been committed.
+     * */
+    lazyScrollToIndex: (params?: {
+      index?: number;
+      animated?: boolean;
+      timeout?: number;
+      viewPosition?: number;
+    }) => void;
+  }>;
 }
 export interface GroupChannelModule {
   Provider: CommonComponent<GroupChannelProps['Provider']>;

package/src/domain/userList/types.ts

@@ -7,8 +7,8 @@ import type { CommonComponent } from '../../types';
 export interface UserListProps<User> {
   /** Props for `UserListModule.Header` **/
   Header: {
-    right?: React.ReactElement;
-    left?: React.ReactElement;
+    right?: React.ReactNode;
+    left?: React.ReactNode;
     onPressHeaderLeft: () => void;
     onPressHeaderRight: (selectedUsers: User[]) => Promise<void>;
     shouldActivateHeaderRight?: (selectedUsers: User[]) => boolean;

package/src/fragments/createGroupChannelFragment.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { ReplyType } from '@sendbird/chat/message';
 import { useGroupChannelMessages } from '@sendbird/uikit-chat-hooks';
@@ -25,7 +25,7 @@ import type {
   GroupChannelProps,
   GroupChannelPubSubContextPayload,
 } from '../domain/groupChannel/types';
-import { useSendbirdChat } from '../hooks/useContext';
+import { usePlatformService, useSendbirdChat } from '../hooks/useContext';
 import pubsub from '../utils/pubsub';
 
 const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): GroupChannelFragment => {
@@ -52,6 +52,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     sortComparator = messageComparator,
     flatListProps,
   }) => {
+    const { playerService, recorderService } = usePlatformService();
     const { sdk, currentUser, sbOptions } = useSendbirdChat();
 
     const [internalSearchItem, setInternalSearchItem] = useState(searchItem);
@@ -97,6 +98,30 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       enableCollectionWithoutLocalCache: true,
     });
 
+    const onBlurFragment = () => {
+      return Promise.allSettled([playerService.reset(), recorderService.reset()]);
+    };
+    const _onPressHeaderLeft = useFreshCallback(async () => {
+      await onBlurFragment();
+      onPressHeaderLeft();
+    });
+    const _onPressHeaderRight = useFreshCallback(async () => {
+      await onBlurFragment();
+      onPressHeaderRight();
+    });
+    const _onPressMediaMessage: NonNullable<GroupChannelProps['MessageList']['onPressMediaMessage']> = useFreshCallback(
+      async (message, deleteMessage, uri) => {
+        await onBlurFragment();
+        onPressMediaMessage(message, deleteMessage, uri);
+      },
+    );
+
+    useEffect(() => {
+      return () => {
+        onBlurFragment();
+      };
+    }, []);
+
     const renderItem: GroupChannelProps['MessageList']['renderMessage'] = useFreshCallback((props) => {
       if (renderMessage) return renderMessage(props);
       return <GroupChannelMessageRenderer {...props} />;
@@ -171,11 +196,13 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
         groupChannelPubSub={groupChannelPubSub}
         enableTypingIndicator={enableTypingIndicator ?? sbOptions.uikit.groupChannel.channel.enableTypingIndicator}
         keyboardAvoidOffset={keyboardAvoidOffset}
+        messages={messages}
+        onUpdateSearchItem={onUpdateSearchItem}
       >
         <GroupChannelModule.Header
           shouldHideRight={navigateFromMessageSearch}
-          onPressHeaderLeft={onPressHeaderLeft}
-          onPressHeaderRight={onPressHeaderRight}
+          onPressHeaderLeft={_onPressHeaderLeft}
+          onPressHeaderRight={_onPressHeaderRight}
         />
         <StatusComposition loading={loading} LoadingComponent={<GroupChannelModule.StatusLoading />}>
           <GroupChannelModule.MessageList
@@ -198,7 +225,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
             renderScrollToBottomButton={renderScrollToBottomButton}
             onResendFailedMessage={resendMessage}
             onDeleteMessage={deleteMessage}
-            onPressMediaMessage={onPressMediaMessage}
+            onPressMediaMessage={_onPressMediaMessage}
             flatListProps={memoizedFlatListProps}
           />
           <GroupChannelModule.Input

package/src/fragments/createMessageSearchFragment.tsx

@@ -104,7 +104,7 @@ const useMessageSearch = (
     const query = getMessageSearchQuery(sdk, {
       keyword,
       channelUrl: channel.url,
-      messageTimestampFrom: Math.max(channel.joinedAt, channel.invitedAt),
+      messageTimestampFrom: channel.messageOffsetTimestamp,
       order: MessageSearchOrder.TIMESTAMP,
       queryCreator,
     });

package/src/hooks/useChannelInputItems.ts

@@ -0,0 +1,215 @@
+import { BottomSheetItem, useAlert, useToast } from '@sendbird/uikit-react-native-foundation';
+import { SendbirdChannel, isImage, shouldCompressImage, useIIFE } from '@sendbird/uikit-utils';
+
+import SBUError from '../libs/SBUError';
+import SBUUtils from '../libs/SBUUtils';
+import { FileType } from '../platform/types';
+import { useLocalization, usePlatformService, useSendbirdChat } from './useContext';
+
+export const useChannelInputItems = (channel: SendbirdChannel, sendFileMessage: (file: FileType) => void) => {
+  const { sbOptions, imageCompressionConfig } = useSendbirdChat();
+  const { STRINGS } = useLocalization();
+  const { fileService, mediaService } = usePlatformService();
+  const { alert } = useAlert();
+  const toast = useToast();
+
+  const sheetItems: BottomSheetItem['sheetItems'] = [];
+  const input = useIIFE(() => {
+    switch (true) {
+      case channel.isOpenChannel():
+        return sbOptions.uikit.openChannel.channel.input;
+      case channel.isGroupChannel():
+        return sbOptions.uikit.groupChannel.channel.input;
+      default:
+        return {
+          enableDocument: true,
+          camera: { enablePhoto: true, enableVideo: true },
+          gallery: { enablePhoto: true, enableVideo: true },
+        };
+    }
+  });
+
+  if (input.camera.enablePhoto) {
+    sheetItems.push({
+      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA_PHOTO,
+      icon: 'camera',
+      onPress: async () => {
+        const mediaFile = await fileService.openCamera({
+          mediaType: 'photo',
+          onOpenFailure: (error) => {
+            if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+              alert({
+                title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                  STRINGS.LABELS.PERMISSION_CAMERA,
+                  STRINGS.LABELS.PERMISSION_APP_NAME,
+                ),
+                buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+              });
+            } else {
+              toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
+            }
+          },
+        });
+
+        if (mediaFile) {
+          // Image compression
+          if (
+            isImage(mediaFile.uri, mediaFile.type) &&
+            shouldCompressImage(mediaFile.type, sbOptions.chat.imageCompressionEnabled)
+          ) {
+            await SBUUtils.safeRun(async () => {
+              const compressed = await mediaService.compressImage({
+                uri: mediaFile.uri,
+                maxWidth: imageCompressionConfig.width,
+                maxHeight: imageCompressionConfig.height,
+                compressionRate: imageCompressionConfig.compressionRate,
+              });
+
+              if (compressed) {
+                mediaFile.uri = compressed.uri;
+                mediaFile.size = compressed.size;
+              }
+            });
+          }
+
+          sendFileMessage(mediaFile);
+        }
+      },
+    });
+  }
+
+  if (input.camera.enableVideo) {
+    sheetItems.push({
+      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA_VIDEO,
+      icon: 'camera',
+      onPress: async () => {
+        const mediaFile = await fileService.openCamera({
+          mediaType: 'video',
+          onOpenFailure: (error) => {
+            if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+              alert({
+                title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                  STRINGS.LABELS.PERMISSION_CAMERA,
+                  STRINGS.LABELS.PERMISSION_APP_NAME,
+                ),
+                buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+              });
+            } else {
+              toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
+            }
+          },
+        });
+
+        if (mediaFile) {
+          sendFileMessage(mediaFile);
+        }
+      },
+    });
+  }
+
+  if (input.gallery.enablePhoto || input.gallery.enableVideo) {
+    const mediaType = (() => {
+      switch (true) {
+        case input.gallery.enablePhoto && input.gallery.enableVideo:
+          return 'all';
+        case input.gallery.enablePhoto && !input.gallery.enableVideo:
+          return 'photo';
+        case !input.gallery.enablePhoto && input.gallery.enableVideo:
+          return 'video';
+        default:
+          return 'all';
+      }
+    })();
+
+    sheetItems.push({
+      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY,
+      icon: 'photo',
+      onPress: async () => {
+        const mediaFiles = await fileService.openMediaLibrary({
+          selectionLimit: 1,
+          mediaType,
+          onOpenFailure: (error) => {
+            if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+              alert({
+                title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                  STRINGS.LABELS.PERMISSION_DEVICE_STORAGE,
+                  STRINGS.LABELS.PERMISSION_APP_NAME,
+                ),
+                buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+              });
+            } else {
+              toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
+            }
+          },
+        });
+
+        if (mediaFiles && mediaFiles[0]) {
+          const mediaFile = mediaFiles[0];
+
+          // Image compression
+          if (
+            isImage(mediaFile.uri, mediaFile.type) &&
+            shouldCompressImage(mediaFile.type, sbOptions.chat.imageCompressionEnabled)
+          ) {
+            await SBUUtils.safeRun(async () => {
+              const compressed = await mediaService.compressImage({
+                uri: mediaFile.uri,
+                maxWidth: imageCompressionConfig.width,
+                maxHeight: imageCompressionConfig.height,
+                compressionRate: imageCompressionConfig.compressionRate,
+              });
+
+              if (compressed) {
+                mediaFile.uri = compressed.uri;
+                mediaFile.size = compressed.size;
+              }
+            });
+          }
+
+          sendFileMessage(mediaFile);
+        }
+      },
+    });
+  }
+
+  if (input.enableDocument) {
+    sheetItems.push({
+      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_FILES,
+      icon: 'document',
+      onPress: async () => {
+        const documentFile = await fileService.openDocument({
+          onOpenFailure: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error'),
+        });
+
+        if (documentFile) {
+          // Image compression
+          if (
+            isImage(documentFile.uri, documentFile.type) &&
+            shouldCompressImage(documentFile.type, sbOptions.chat.imageCompressionEnabled)
+          ) {
+            await SBUUtils.safeRun(async () => {
+              const compressed = await mediaService.compressImage({
+                uri: documentFile.uri,
+                maxWidth: imageCompressionConfig.width,
+                maxHeight: imageCompressionConfig.height,
+                compressionRate: imageCompressionConfig.compressionRate,
+              });
+
+              if (compressed) {
+                documentFile.uri = compressed.uri;
+                documentFile.size = compressed.size;
+              }
+            });
+          }
+
+          sendFileMessage(documentFile);
+        }
+      },
+    });
+  }
+
+  return sheetItems;
+};

package/src/hooks/useConnection.ts

@@ -67,7 +67,7 @@ const useConnection = () => {
             Logger.warn('[useConnection]', 'clear cached-data');
             await sdk.clearCachedData().catch((e) => Logger.warn('[useConnection]', 'clear cached-data failure', e));
           } else if (sdk.currentUser) {
-            await initEmoji(sdk, emojiManager);
+            await Promise.allSettled([initEmoji(sdk, emojiManager), initDashboardConfigs(sdk)]);
 
             Logger.debug('[useConnection]', 'connected! (offline)');
             setCurrentUser(sdk.currentUser);

package/src/hooks/useMentionSuggestion.ts

@@ -93,7 +93,8 @@ const useMentionSuggestion = (params: {
         .filter(
           (member) =>
             member.nickname?.toLowerCase().startsWith(searchString.toLowerCase()) &&
-            member.userId !== currentUser?.userId,
+            member.userId !== currentUser?.userId &&
+            member.isActive,
         )
         .slice(0, mentionManager.config.suggestionLimit);
     }