@sendbird/uikit-react-native 3.0.4 → 3.1.1

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

@@ -2,22 +2,26 @@ import React, { useContext, useEffect, useRef } from 'react';
 import type { FlatList } from 'react-native';
 
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { useToast } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
-import { isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { isDifferentChannel, useFreshCallback, useIsFirstMount, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import ChannelMessageList from '../../../components/ChannelMessageList';
-import { MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../../../constants';
-import { useSendbirdChat } from '../../../hooks/useContext';
+import { MESSAGE_FOCUS_ANIMATION_DELAY, MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../../../constants';
+import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
 
 const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
+  const toast = useToast();
+  const { STRINGS } = useLocalization();
   const { sdk } = useSendbirdChat();
-  const { setMessageToEdit } = useContext(GroupChannelContexts.Fragment);
+  const { setMessageToEdit, setMessageToReply } = useContext(GroupChannelContexts.Fragment);
   const { subscribe } = useContext(GroupChannelContexts.PubSub);
 
   const id = useUniqHandlerId('GroupChannelMessageList');
   const ref = useRef<FlatList<SendbirdMessage>>(null);
+  const isFirstMount = useIsFirstMount();
 
   // FIXME: Workaround, should run after data has been applied to UI.
   const lazyScrollToBottom = (animated = false, timeout = 0) => {
@@ -33,22 +37,35 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     }, timeout);
   };
 
-  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);
+  const scrollToMessage = useFreshCallback((createdAt: number, focusAnimated = false): boolean => {
+    const foundMessageIndex = props.messages.findIndex((it) => it.createdAt === createdAt);
+    const isIncludedInList = foundMessageIndex > -1;
+
+    if (isIncludedInList) {
+      if (focusAnimated) {
+        setTimeout(() => props.onUpdateSearchItem({ startingPoint: createdAt }), MESSAGE_FOCUS_ANIMATION_DELAY);
+      }
+      lazyScrollToIndex(foundMessageIndex, true, isFirstMount ? MESSAGE_SEARCH_SAFE_SCROLL_DELAY : 0);
+    } else {
+      if (props.channel.messageOffsetTimestamp <= createdAt) {
+        if (focusAnimated) props.onUpdateSearchItem({ startingPoint: createdAt });
+        props.onResetMessageListWithStartingPoint(createdAt);
+      } else {
+        return false;
       }
     }
-  }, [props.searchItem]);
+
+    return true;
+  });
 
   const scrollToBottom = useFreshCallback((animated = false) => {
     if (props.hasNext()) {
+      props.onUpdateSearchItem(undefined);
+      props.onScrolledAwayFromBottom(false);
+
       props.onResetMessageList(() => {
-        lazyScrollToBottom(animated);
         props.onScrolledAwayFromBottom(false);
+        lazyScrollToBottom(animated);
       });
     } else {
       lazyScrollToBottom(animated);
@@ -85,11 +102,27 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     });
   }, [props.scrolledAwayFromBottom]);
 
+  // Only trigger once when message list mount with initial props.searchItem
+  // - Search screen + searchItem > mount message list
+  // - Reset message list + searchItem > re-mount message list
+  useEffect(() => {
+    if (isFirstMount && props.searchItem) {
+      scrollToMessage(props.searchItem.startingPoint);
+    }
+  }, [isFirstMount]);
+
+  const onPressParentMessage = useFreshCallback((message: SendbirdMessage) => {
+    const canScrollToParent = scrollToMessage(message.createdAt, true);
+    if (!canScrollToParent) toast.show(STRINGS.TOAST.FIND_PARENT_MSG_ERROR, 'error');
+  });
+
   return (
     <ChannelMessageList
       {...props}
       ref={ref}
+      onReplyMessage={setMessageToReply}
       onEditMessage={setMessageToEdit}
+      onPressParentMessage={onPressParentMessage}
       onPressNewMessagesButton={scrollToBottom}
       onPressScrollToBottomButton={scrollToBottom}
     />

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

@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'react';
+import React, { createContext, useCallback, useState } from 'react';
 
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import {
@@ -21,6 +21,7 @@ export const GroupChannelContexts: GroupChannelContextsType = {
     headerTitle: '',
     channel: {} as SendbirdGroupChannel,
     setMessageToEdit: NOOP,
+    setMessageToReply: NOOP,
   }),
   TypingIndicator: createContext({
     typingUsers: [] as SendbirdUser[],
@@ -46,8 +47,40 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
 
   const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);
   const [messageToEdit, setMessageToEdit] = useState<SendbirdUserMessage | SendbirdFileMessage>();
+  const [messageToReply, setMessageToReply] = useState<SendbirdUserMessage | SendbirdFileMessage>();
+
+  const updateInputMode = (mode: 'send' | 'edit' | 'reply', message?: SendbirdUserMessage | SendbirdFileMessage) => {
+    if (mode === 'send' || !message) {
+      setMessageToEdit(undefined);
+      setMessageToReply(undefined);
+      return;
+    } else if (mode === 'edit') {
+      setMessageToEdit(message);
+      setMessageToReply(undefined);
+      return;
+    } else if (mode === 'reply') {
+      setMessageToEdit(undefined);
+      setMessageToReply(message);
+      return;
+    }
+  };
 
   useChannelHandler(sdk, handlerId, {
+    onMessageDeleted(_, messageId) {
+      if (messageToReply?.messageId === messageId) {
+        setMessageToReply(undefined);
+      }
+    },
+    onChannelFrozen(frozenChannel) {
+      if (frozenChannel.url === channel.url) {
+        setMessageToReply(undefined);
+      }
+    },
+    onUserMuted(mutedChannel, user) {
+      if (mutedChannel.url === channel.url && user.userId === sdk.currentUser?.userId) {
+        setMessageToReply(undefined);
+      }
+    },
     onTypingStatusUpdated(eventChannel) {
       if (isDifferentChannel(channel, eventChannel)) return;
       if (!enableTypingIndicator) return;
@@ -61,9 +94,11 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
         value={{
           headerTitle: STRINGS.GROUP_CHANNEL.HEADER_TITLE(currentUser?.userId ?? '', channel),
           channel,
-          messageToEdit,
-          setMessageToEdit,
           keyboardAvoidOffset,
+          messageToEdit,
+          setMessageToEdit: useCallback((message) => updateInputMode('edit', message), []),
+          messageToReply,
+          setMessageToReply: useCallback((message) => updateInputMode('reply', message), []),
         }}
       >
         <GroupChannelContexts.TypingIndicator.Provider value={{ typingUsers }}>

package/src/domain/groupChannel/types.ts

@@ -73,6 +73,10 @@ export interface GroupChannelProps {
     | 'searchItem'
   > & {
     onResetMessageList: (callback?: () => void) => void;
+    onResetMessageListWithStartingPoint: (startingPoint: number, callback?: () => void) => void;
+
+    // Changing the search item will trigger the focus animation on messages.
+    onUpdateSearchItem: (searchItem?: GroupChannelProps['MessageList']['searchItem']) => void;
   };
   Input: Pick<
     ChannelInputProps,
@@ -102,10 +106,12 @@ export interface GroupChannelProps {
 export interface GroupChannelContextsType {
   Fragment: React.Context<{
     headerTitle: string;
+    keyboardAvoidOffset?: number;
     channel: SendbirdGroupChannel;
     messageToEdit?: SendbirdUserMessage | SendbirdFileMessage;
     setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
-    keyboardAvoidOffset?: number;
+    messageToReply?: SendbirdUserMessage | SendbirdFileMessage;
+    setMessageToReply: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
   }>;
   TypingIndicator: React.Context<{
     typingUsers: SendbirdUser[];
@@ -132,7 +138,7 @@ export type GroupChannelPubSubContextPayload =
       };
     }
   | {
-      type: 'MESSAGES_RECEIVED';
+      type: 'MESSAGES_RECEIVED' | 'MESSAGES_UPDATED';
       data: {
         messages: SendbirdMessage[];
       };

package/src/domain/openChannel/types.ts

@@ -18,7 +18,6 @@ import type { ChannelInputProps } from '../../components/ChannelInput';
 import type { ChannelMessageListProps } from '../../components/ChannelMessageList';
 import type { CommonComponent } from '../../types';
 import type { PubSub } from '../../utils/pubsub';
-import type { GroupChannelPubSubContextPayload } from '../groupChannel/types';
 
 export type OpenChannelProps = {
   Fragment: {
@@ -101,7 +100,7 @@ export type OpenChannelContextsType = {
     setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
     keyboardAvoidOffset?: number;
   }>;
-  PubSub: React.Context<PubSub<GroupChannelPubSubContextPayload>>;
+  PubSub: React.Context<PubSub<OpenChannelPubSubContextPayload>>;
 };
 export interface OpenChannelModule {
   Provider: CommonComponent<OpenChannelProps['Provider']>;

package/src/fragments/createGroupChannelFragment.tsx

@@ -86,6 +86,9 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       onMessagesReceived(messages) {
         groupChannelPubSub.publish({ type: 'MESSAGES_RECEIVED', data: { messages } });
       },
+      onMessagesUpdated(messages) {
+        groupChannelPubSub.publish({ type: 'MESSAGES_UPDATED', data: { messages } });
+      },
       collectionCreator,
       sortComparator,
       onChannelDeleted,
@@ -110,7 +113,17 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
 
     const onResetMessageList = useCallback((callback?: () => void) => {
       resetWithStartingPoint(Number.MAX_SAFE_INTEGER, callback);
+    }, []);
+
+    const onResetMessageListWithStartingPoint = useCallback((startingPoint: number, callback?: () => void) => {
+      resetWithStartingPoint(startingPoint, callback);
+    }, []);
+
+    // Changing the search item will trigger the focus animation on messages.
+    const onUpdateSearchItem: GroupChannelProps['MessageList']['onUpdateSearchItem'] = useCallback((searchItem) => {
+      // Clean up for animation trigger with useEffect
       setInternalSearchItem(undefined);
+      setInternalSearchItem(searchItem);
     }, []);
 
     const onPending = (message: SendbirdFileMessage | SendbirdUserMessage) => {
@@ -169,6 +182,8 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
             channel={channel}
             searchItem={internalSearchItem}
             onResetMessageList={onResetMessageList}
+            onResetMessageListWithStartingPoint={onResetMessageListWithStartingPoint}
+            onUpdateSearchItem={onUpdateSearchItem}
             enableMessageGrouping={enableMessageGrouping}
             currentUserId={currentUser?.userId}
             renderMessage={renderItem}

package/src/hooks/useConnection.ts

@@ -16,7 +16,7 @@ function isCacheRestrictedError(error: SendbirdError) {
 
 async function initEmoji(sdk: SendbirdChatSDK, emojiManager: EmojiManager) {
   await emojiManager.init();
-  if (sdk.appInfo.emojiHash !== emojiManager.emojiHash) {
+  if (sdk.appInfo?.emojiHash !== emojiManager.emojiHash) {
     try {
       const container = await sdk.getAllEmoji();
       await emojiManager.init(container);

package/src/hooks/useMentionSuggestion.ts

@@ -85,7 +85,8 @@ const useMentionSuggestion = (params: {
           limit: mentionManager.config.suggestionLimit + 1,
         })
         .next()
-        .then((members) => members.filter((member) => member.userId !== currentUser?.userId));
+        .then((members) => members.filter((member) => member.userId !== currentUser?.userId))
+        .then((members) => members.slice(0, mentionManager.config.suggestionLimit));
     } else {
       return freshChannel.members
         .sort((a, b) => a.nickname?.localeCompare(b.nickname))

package/src/hooks/useMentionTextInput.ts

@@ -25,8 +25,8 @@ const useMentionTextInput = (params: { messageToEdit?: SendbirdUserMessage | Sen
       )
     ) {
       const result = mentionManager.templateToTextAndMentionedUsers(
-        params.messageToEdit.mentionedMessageTemplate,
-        params.messageToEdit.mentionedUsers,
+        params.messageToEdit?.mentionedMessageTemplate ?? '',
+        params.messageToEdit?.mentionedUsers ?? [],
       );
 
       mentionedUsersRef.current = result.mentionedUsers;

package/src/libs/MentionManager.tsx

@@ -217,10 +217,7 @@ class MentionManager {
   public shouldUseMentionedMessageTemplate = (
     message?: SendbirdUserMessage | SendbirdFileMessage,
     mentionEnabled?: boolean,
-  ): message is RequiredSpecific<
-    SendbirdUserMessage | SendbirdFileMessage,
-    'mentionedMessageTemplate' | 'mentionedUsers' | 'mentionedUserIds' | 'mentionType'
-  > => {
+  ): boolean => {
     return Boolean(
       mentionEnabled &&
         message?.mentionedMessageTemplate &&
@@ -230,10 +227,6 @@ class MentionManager {
   };
 }
 
-type RequiredSpecific<T, K extends keyof T> = T & {
-  [P in K]-?: T[P];
-};
-
 const styles = createStyleSheet({
   mentionedText: { fontWeight: '700' },
 });

package/src/localization/StringSet.type.ts

@@ -9,6 +9,7 @@ import type {
   SendbirdOpenChannel,
   SendbirdParticipant,
   SendbirdUser,
+  SendbirdUserMessage,
 } from '@sendbird/uikit-utils';
 
 /**
@@ -243,6 +244,11 @@ export interface StringSet {
     USER_NO_NAME: string;
     CHANNEL_NO_MEMBERS: string;
     TYPING_INDICATOR_TYPINGS: (users: SendbirdUser[]) => string | undefined;
+    REPLY_FROM_SENDER_TO_RECEIVER: (
+      replyMessage: SendbirdUserMessage | SendbirdFileMessage,
+      parentMessage: SendbirdUserMessage | SendbirdFileMessage,
+      currentUserId?: string,
+    ) => string;
 
     USER_BAR_ME_POSTFIX: string;
     USER_BAR_OPERATOR: string;
@@ -261,6 +267,7 @@ export interface StringSet {
     CHANNEL_INPUT_PLACEHOLDER_ACTIVE: string;
     CHANNEL_INPUT_PLACEHOLDER_DISABLED: string;
     CHANNEL_INPUT_PLACEHOLDER_MUTED: string;
+    CHANNEL_INPUT_PLACEHOLDER_REPLY: string;
     CHANNEL_INPUT_EDIT_OK: string;
     CHANNEL_INPUT_EDIT_CANCEL: string;
     /** ChannelInput > Attachments **/
@@ -268,12 +275,15 @@ export interface StringSet {
     CHANNEL_INPUT_ATTACHMENT_CAMERA_VIDEO: string;
     CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY: string;
     CHANNEL_INPUT_ATTACHMENT_FILES: string;
+    CHANNEL_INPUT_REPLY_PREVIEW_TITLE: (user: SendbirdUser) => string;
+    CHANNEL_INPUT_REPLY_PREVIEW_BODY: (message: SendbirdUserMessage | SendbirdFileMessage) => string;
 
     /** Channel > Message **/
     CHANNEL_MESSAGE_COPY: string;
     CHANNEL_MESSAGE_EDIT: string;
     CHANNEL_MESSAGE_SAVE: string;
     CHANNEL_MESSAGE_DELETE: string;
+    CHANNEL_MESSAGE_REPLY: string;
     /** Channel > Message > Delete confirm **/
     CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE: string;
     CHANNEL_MESSAGE_DELETE_CONFIRM_OK: string;
@@ -327,6 +337,7 @@ export interface StringSet {
     LEAVE_CHANNEL_ERROR: string;
     UNKNOWN_ERROR: string;
     GET_CHANNEL_ERROR: string;
+    FIND_PARENT_MSG_ERROR: string;
   };
   PROFILE_CARD: {
     BUTTON_MESSAGE: string;

package/src/localization/createBaseStringSet.ts

@@ -3,6 +3,7 @@ import type { Locale } from 'date-fns';
 import type { PartialDeep } from '@sendbird/uikit-utils';
 import {
   getDateSeparatorFormat,
+  getFileTypeFromMessage,
   getGroupChannelLastMessage,
   getGroupChannelPreviewTime,
   getGroupChannelTitle,
@@ -14,6 +15,7 @@ import {
   getOpenChannelTitle,
 } from '@sendbird/uikit-utils';
 
+import { UNKNOWN_USER_ID } from '../constants';
 import type { StringSet } from './StringSet.type';
 
 type StringSetCreateOptions = {
@@ -248,6 +250,12 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
         if (users.length === 2) return `${userNames.join(' and ')} are typing...`;
         return 'Several people are typing...';
       },
+      REPLY_FROM_SENDER_TO_RECEIVER: (reply, parent, currentUserId = UNKNOWN_USER_ID) => {
+        const senderNickname = reply.sender.nickname || USER_NO_NAME;
+        const receiverNickname = parent.sender.nickname || USER_NO_NAME;
+        return `${reply.sender.userId !== currentUserId ? senderNickname : 'You'} replied to ${receiverNickname}`;
+      },
+
       USER_BAR_ME_POSTFIX: ' (You)',
       USER_BAR_OPERATOR: 'Operator',
       REGISTER_AS_OPERATOR: 'Register as operator',
@@ -261,6 +269,7 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       CHANNEL_MESSAGE_EDIT: 'Edit',
       CHANNEL_MESSAGE_SAVE: 'Save',
       CHANNEL_MESSAGE_DELETE: 'Delete',
+      CHANNEL_MESSAGE_REPLY: 'Reply',
       CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE: 'Delete message?',
       CHANNEL_MESSAGE_DELETE_CONFIRM_OK: 'Delete',
       CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL: 'Cancel',
@@ -273,8 +282,28 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       CHANNEL_INPUT_PLACEHOLDER_ACTIVE: 'Enter message',
       CHANNEL_INPUT_PLACEHOLDER_DISABLED: 'Chat not available in this channel.',
       CHANNEL_INPUT_PLACEHOLDER_MUTED: "You're muted by the operator.",
+      CHANNEL_INPUT_PLACEHOLDER_REPLY: 'Reply to message',
       CHANNEL_INPUT_EDIT_OK: 'Save',
       CHANNEL_INPUT_EDIT_CANCEL: 'Cancel',
+      CHANNEL_INPUT_REPLY_PREVIEW_TITLE: (user) => `Reply to ${user.nickname || USER_NO_NAME}`,
+      CHANNEL_INPUT_REPLY_PREVIEW_BODY: (message) => {
+        if (message.isFileMessage()) {
+          const fileType = getFileTypeFromMessage(message);
+          switch (fileType) {
+            case 'image':
+              return message.type.toLowerCase().includes('gif') ? 'GIF' : 'Photo';
+            case 'video':
+              return 'Video';
+            case 'audio':
+              return 'Audio';
+            default:
+              return message.name;
+          }
+        } else if (message.isUserMessage()) {
+          return message.message;
+        }
+        return 'Unknown message type.';
+      },
       ...overrides?.LABELS,
     },
     FILE_VIEWER: {
@@ -325,6 +354,7 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       LEAVE_CHANNEL_ERROR: "Couldn't leave channel.",
       UNKNOWN_ERROR: 'Something went wrong.',
       GET_CHANNEL_ERROR: "Couldn't retrieve channel.",
+      FIND_PARENT_MSG_ERROR: "Couldn't find the original message for this reply.",
       ...overrides?.TOAST,
     },
     PROFILE_CARD: {

package/src/platform/createMediaService.native.tsx

@@ -29,7 +29,7 @@ const createNativeMediaService = ({
           url,
           format: 'jpeg',
           timeStamp: timeMills,
-          cacheName: hash(url),
+          cacheName: hash(url.split('?')[0]),
         });
         return { path };
       } catch {

package/src/platform/types.ts

@@ -61,18 +61,20 @@ export interface FileSystemServiceInterface {
 }
 
 // ---------- MediaService ---------- //
-interface VideoProps {
+export type VideoProps = {
   source: { uri: string } | number;
   resizeMode?: 'cover' | 'contain' | 'stretch';
   onLoad?: () => void;
-}
-interface GetVideoThumbnailOptions {
+};
+
+export type GetVideoThumbnailOptions = {
   url: string;
   timeMills?: number;
   quality?: number;
-}
+};
+export type GetVideoThumbnailResult = Promise<{ path: string } | null>;
 
-interface CompressImageOptions {
+export type CompressImageOptions = {
   /**
    * A uri of image file to compress
    * */
@@ -93,10 +95,8 @@ interface CompressImageOptions {
    * 1 means highest quality and 0 the lowest quality.
    * */
   compressionRate?: number;
-}
-
-type GetVideoThumbnailResult = Promise<{ path: string } | null>;
-type CompressImageResult = Promise<{ uri: string; size: number } | null>;
+};
+export type CompressImageResult = Promise<{ uri: string; size: number } | null>;
 
 export interface MediaServiceInterface {
   VideoComponent<Props = {}>(props: VideoProps & Props): JSX.Element;

package/src/utils/pubsub.ts

@@ -8,7 +8,9 @@ const pubsub = <T>(): PubSub<T> => {
 
   return {
     publish: (data: unknown) => {
-      subscribers.forEach((subscriber) => subscriber(data));
+      subscribers.forEach((subscriber) => {
+        setTimeout(() => subscriber(data), 0);
+      });
     },
     subscribe: (subscriber: Function) => {
       subscribers.add(subscriber);

package/src/version.ts

@@ -1,2 +1,2 @@
-const VERSION = '3.0.4';
+const VERSION = '3.1.1';
 export default VERSION;