@sendbird/uikit-react-native 3.5.3 → 3.6.0

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

@@ -0,0 +1,165 @@
+import React, { createContext, useRef, useState } from 'react';
+import type { FlatList } from 'react-native';
+
+import {
+  ContextValue,
+  Logger,
+  NOOP,
+  SendbirdFileMessage,
+  SendbirdGroupChannel,
+  SendbirdMessage,
+  SendbirdUserMessage,
+  useFreshCallback,
+} from '@sendbird/uikit-utils';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import { useLocalization } from '../../../hooks/useContext';
+import type { PubSub } from '../../../utils/pubsub';
+import type {
+  GroupChannelThreadContextsType,
+  GroupChannelThreadModule,
+  GroupChannelThreadPubSubContextPayload,
+} from '../types';
+import { GroupChannelThreadProps } from '../types';
+
+export const GroupChannelThreadContexts: GroupChannelThreadContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+    channel: {} as SendbirdGroupChannel,
+    parentMessage: {} as SendbirdUserMessage | SendbirdFileMessage,
+    setMessageToEdit: NOOP,
+  }),
+  PubSub: createContext({
+    publish: NOOP,
+    subscribe: () => NOOP,
+  } as PubSub<GroupChannelThreadPubSubContextPayload>),
+  MessageList: createContext({
+    flatListRef: { current: null },
+    scrollToMessage: () => false,
+    lazyScrollToBottom: () => {
+      // noop
+    },
+    lazyScrollToIndex: () => {
+      // noop
+    },
+  } as MessageListContextValue),
+};
+
+export const GroupChannelThreadContextsProvider: GroupChannelThreadModule['Provider'] = ({
+  children,
+  channel,
+  parentMessage,
+  keyboardAvoidOffset = 0,
+  groupChannelThreadPubSub,
+  threadedMessages,
+}) => {
+  if (!channel) throw new Error('GroupChannel is not provided to GroupChannelThreadModule');
+
+  const { STRINGS } = useLocalization();
+  const [messageToEdit, setMessageToEdit] = useState<SendbirdUserMessage | SendbirdFileMessage>();
+  const { flatListRef, lazyScrollToIndex, lazyScrollToBottom, scrollToMessage } = useScrollActions({
+    threadedMessages: threadedMessages,
+  });
+
+  return (
+    <ProviderLayout>
+      <GroupChannelThreadContexts.Fragment.Provider
+        value={{
+          headerTitle: STRINGS.GROUP_CHANNEL_THREAD.HEADER_TITLE,
+          channel,
+          parentMessage,
+          keyboardAvoidOffset,
+          messageToEdit: messageToEdit,
+          setMessageToEdit,
+        }}
+      >
+        <GroupChannelThreadContexts.PubSub.Provider value={groupChannelThreadPubSub}>
+          <GroupChannelThreadContexts.MessageList.Provider
+            value={{
+              flatListRef,
+              scrollToMessage,
+              lazyScrollToIndex,
+              lazyScrollToBottom,
+            }}
+          >
+            {children}
+          </GroupChannelThreadContexts.MessageList.Provider>
+        </GroupChannelThreadContexts.PubSub.Provider>
+      </GroupChannelThreadContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};
+
+type MessageListContextValue = ContextValue<GroupChannelThreadContextsType['MessageList']>;
+const useScrollActions = (params: Pick<GroupChannelThreadProps['Provider'], 'threadedMessages'>) => {
+  const { threadedMessages } = 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(() => {
+      if (flatListRef.current) {
+        flatListRef.current.scrollToEnd({ 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(() => {
+      if (flatListRef.current) {
+        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 = threadedMessages.findIndex((it) => it.messageId === messageId);
+    const isIncludedInList = foundMessageIndex > -1;
+
+    if (isIncludedInList) {
+      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/groupChannelThread/types.ts

@@ -0,0 +1,184 @@
+import type React from 'react';
+import type { FlatList } from 'react-native';
+
+import type { UseGroupChannelMessagesOptions } from '@sendbird/uikit-chat-hooks';
+import type {
+  OnBeforeHandler,
+  PickPartial,
+  SendbirdFileMessage,
+  SendbirdFileMessageCreateParams,
+  SendbirdFileMessageUpdateParams,
+  SendbirdGroupChannel,
+  SendbirdMessage,
+  SendbirdUserMessage,
+  SendbirdUserMessageCreateParams,
+  SendbirdUserMessageUpdateParams,
+} from '@sendbird/uikit-utils';
+
+import type { ChannelInputProps, SuggestedMentionListProps } from '../../components/ChannelInput';
+import type { ChannelThreadMessageListProps } from '../../components/ChannelThreadMessageList';
+import type { CommonComponent } from '../../types';
+import type { PubSub } from '../../utils/pubsub';
+
+export interface GroupChannelThreadProps {
+  Fragment: {
+    channel: SendbirdGroupChannel;
+    parentMessage: SendbirdUserMessage | SendbirdFileMessage;
+    startingPoint?: number;
+    onParentMessageDeleted: () => void;
+    onChannelDeleted: () => void;
+    onPressHeaderLeft: GroupChannelThreadProps['Header']['onPressLeft'];
+    onPressHeaderSubtitle?: GroupChannelThreadProps['Header']['onPressSubtitle'];
+    onPressMediaMessage?: GroupChannelThreadProps['MessageList']['onPressMediaMessage'];
+
+    onBeforeSendUserMessage?: OnBeforeHandler<SendbirdUserMessageCreateParams>;
+    onBeforeSendFileMessage?: OnBeforeHandler<SendbirdFileMessageCreateParams>;
+    onBeforeUpdateUserMessage?: OnBeforeHandler<SendbirdUserMessageUpdateParams>;
+    onBeforeUpdateFileMessage?: OnBeforeHandler<SendbirdFileMessageUpdateParams>;
+
+    renderMessage?: GroupChannelThreadProps['MessageList']['renderMessage'];
+
+    enableMessageGrouping?: GroupChannelThreadProps['MessageList']['enableMessageGrouping'];
+
+    keyboardAvoidOffset?: GroupChannelThreadProps['Provider']['keyboardAvoidOffset'];
+    flatListProps?: GroupChannelThreadProps['MessageList']['flatListProps'];
+    sortComparator?: UseGroupChannelMessagesOptions['sortComparator'];
+  };
+  Header: {
+    onPressLeft: () => void;
+    onPressSubtitle: () => void;
+  };
+  ParentMessageInfo: {
+    channel: SendbirdGroupChannel;
+    currentUserId?: string;
+    onDeleteMessage: (message: SendbirdUserMessage | SendbirdFileMessage) => Promise<void>;
+    onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
+  };
+  MessageList: Pick<
+    ChannelThreadMessageListProps<SendbirdGroupChannel>,
+    | 'enableMessageGrouping'
+    | 'currentUserId'
+    | 'channel'
+    | 'messages'
+    | 'newMessages'
+    | 'scrolledAwayFromBottom'
+    | 'onScrolledAwayFromBottom'
+    | 'onTopReached'
+    | 'onBottomReached'
+    | 'onResendFailedMessage'
+    | 'onDeleteMessage'
+    | 'onPressMediaMessage'
+    | 'renderMessage'
+    | 'flatListProps'
+    | 'hasNext'
+    | 'searchItem'
+  > & {
+    onResetMessageList: () => Promise<void>;
+    onResetMessageListWithStartingPoint: (startingPoint: number) => Promise<void>;
+    startingPoint?: number;
+  };
+  Input: PickPartial<
+    ChannelInputProps,
+    | 'shouldRenderInput'
+    | 'onPressSendUserMessage'
+    | 'onPressSendFileMessage'
+    | 'onPressUpdateUserMessage'
+    | 'onPressUpdateFileMessage'
+    | 'SuggestedMentionList'
+    | 'AttachmentsButton',
+    'inputDisabled'
+  >;
+
+  SuggestedMentionList: SuggestedMentionListProps;
+  Provider: {
+    channel: SendbirdGroupChannel;
+    keyboardAvoidOffset?: number;
+    groupChannelThreadPubSub: PubSub<GroupChannelThreadPubSubContextPayload>;
+    parentMessage: SendbirdUserMessage | SendbirdFileMessage;
+    threadedMessages: SendbirdMessage[];
+  };
+}
+
+/**
+ * Internal context for GroupChannelThread
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export interface GroupChannelThreadContextsType {
+  Fragment: React.Context<{
+    headerTitle: string;
+    keyboardAvoidOffset?: number;
+    channel: SendbirdGroupChannel;
+    parentMessage: SendbirdUserMessage | SendbirdFileMessage;
+    messageToEdit?: SendbirdUserMessage | SendbirdFileMessage;
+    setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
+  }>;
+  PubSub: React.Context<PubSub<GroupChannelThreadPubSubContextPayload>>;
+  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(GroupChannelThreadContexts.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 GroupChannelThreadModule {
+  Provider: CommonComponent<GroupChannelThreadProps['Provider']>;
+  Header: CommonComponent<GroupChannelThreadProps['Header']>;
+  ParentMessageInfo: CommonComponent<GroupChannelThreadProps['ParentMessageInfo']>;
+  MessageList: CommonComponent<GroupChannelThreadProps['MessageList']>;
+  Input: CommonComponent<GroupChannelThreadProps['Input']>;
+  SuggestedMentionList: CommonComponent<GroupChannelThreadProps['SuggestedMentionList']>;
+  StatusEmpty: CommonComponent;
+  StatusLoading: CommonComponent;
+}
+
+export type GroupChannelThreadFragment = React.FC<GroupChannelThreadProps['Fragment']>;
+
+export type GroupChannelThreadPubSubContextPayload =
+  | {
+      type: 'MESSAGE_SENT_PENDING' | 'MESSAGE_SENT_SUCCESS';
+      data: {
+        message: SendbirdUserMessage | SendbirdFileMessage;
+      };
+    }
+  | {
+      type: 'MESSAGES_RECEIVED' | 'MESSAGES_UPDATED';
+      data: {
+        messages: SendbirdMessage[];
+      };
+    }
+  | {
+      type: 'TYPING_BUBBLE_RENDERED';
+      data?: undefined;
+    };

package/src/fragments/createGroupChannelFragment.tsx

@@ -2,9 +2,15 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { MessageCollection, MessageFilter } from '@sendbird/chat/groupChannel';
 import { ReplyType } from '@sendbird/chat/message';
-import { Box } from '@sendbird/uikit-react-native-foundation';
+import { Box, useToast } from '@sendbird/uikit-react-native-foundation';
 import { useGroupChannelMessages } from '@sendbird/uikit-tools';
-import type { SendbirdFileMessage, SendbirdGroupChannel, SendbirdUserMessage } from '@sendbird/uikit-utils';
+import {
+  SendbirdFileMessage,
+  SendbirdGroupChannel,
+  SendbirdSendableMessage,
+  SendbirdUserMessage,
+  getReadableFileSize,
+} from '@sendbird/uikit-utils';
 import {
   NOOP,
   PASS,
@@ -28,7 +34,8 @@ import type {
   GroupChannelProps,
   GroupChannelPubSubContextPayload,
 } from '../domain/groupChannel/types';
-import { usePlatformService, useSendbirdChat } from '../hooks/useContext';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../hooks/useContext';
+import { FileType } from '../platform/types';
 import pubsub from '../utils/pubsub';
 
 const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): GroupChannelFragment => {
@@ -45,6 +52,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     onPressHeaderRight = NOOP,
     onPressMediaMessage = NOOP,
     onChannelDeleted = NOOP,
+    onPressReplyMessageInThread = NOOP,
     onBeforeSendUserMessage = PASS,
     onBeforeSendFileMessage = PASS,
     onBeforeUpdateUserMessage = PASS,
@@ -57,7 +65,9 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     collectionCreator,
   }) => {
     const { playerService, recorderService } = usePlatformService();
-    const { sdk, currentUser, sbOptions } = useSendbirdChat();
+    const { sdk, currentUser, sbOptions, voiceMessageStatusManager } = useSendbirdChat();
+    const toast = useToast();
+    const { STRINGS } = useLocalization();
 
     const [internalSearchItem, setInternalSearchItem] = useState(searchItem);
     const navigateFromMessageSearch = useCallback(() => Boolean(searchItem), []);
@@ -67,8 +77,11 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     const scrolledAwayFromBottomRef = useRefTracker(scrolledAwayFromBottom);
 
     const replyType = useIIFE(() => {
-      if (sbOptions.uikit.groupChannel.channel.replyType === 'none') return ReplyType.NONE;
-      else return ReplyType.ONLY_REPLY_TO_CHANNEL;
+      if (sbOptions.uikit.groupChannel.channel.replyType === 'none') {
+        return ReplyType.NONE;
+      } else {
+        return ReplyType.ONLY_REPLY_TO_CHANNEL;
+      }
     });
 
     const {
@@ -107,6 +120,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       return Promise.allSettled([playerService.reset(), recorderService.reset()]);
     };
     const _onPressHeaderLeft = useFreshCallback(async () => {
+      voiceMessageStatusManager.clear();
       await onBlurFragment();
       onPressHeaderLeft();
     });
@@ -120,6 +134,12 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
         onPressMediaMessage(message, deleteMessage, uri);
       },
     );
+    const _onPressReplyMessageInThread = useFreshCallback(
+      async (message: SendbirdSendableMessage, startingPoint?: number) => {
+        await onBlurFragment();
+        onPressReplyMessageInThread(message, startingPoint);
+      },
+    );
 
     useEffect(() => {
       return () => {
@@ -179,8 +199,17 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     const onPressSendFileMessage: GroupChannelProps['Input']['onPressSendFileMessage'] = useFreshCallback(
       async (params) => {
         const processedParams = await onBeforeSendFileMessage(params);
-        const message = await sendFileMessage(processedParams, onPending);
-        onSent(message);
+        const fileSize = (processedParams.file as FileType)?.size ?? processedParams.fileSize;
+        const uploadSizeLimit = sbOptions.appInfo.uploadSizeLimit;
+
+        if (fileSize && uploadSizeLimit && fileSize > uploadSizeLimit) {
+          const sizeLimitString = `${getReadableFileSize(uploadSizeLimit)} MB`;
+          toast.show(STRINGS.TOAST.FILE_UPLOAD_SIZE_LIMIT_EXCEEDED_ERROR(sizeLimitString), 'error');
+          return;
+        } else {
+          const message = await sendFileMessage(processedParams, onPending);
+          onSent(message);
+        }
       },
     );
     const onPressUpdateUserMessage: GroupChannelProps['Input']['onPressUpdateUserMessage'] = useFreshCallback(
@@ -208,6 +237,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
         keyboardAvoidOffset={keyboardAvoidOffset}
         messages={messages}
         onUpdateSearchItem={onUpdateSearchItem}
+        onPressReplyMessageInThread={_onPressReplyMessageInThread}
       >
         <GroupChannelModule.Header
           shouldHideRight={navigateFromMessageSearch}