@sendbird/uikit-react-native 3.0.4-rc.1 → 3.1.0

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/createFileService.native.ts

@@ -7,6 +7,7 @@ import type * as Permissions from 'react-native-permissions';
 import type { Permission } from 'react-native-permissions';
 
 import {
+  Logger,
   getFileExtension,
   getFileExtensionFromMime,
   getFileExtensionFromUri,
@@ -206,7 +207,10 @@ const createNativeFileService = ({
       if (Platform.OS === 'android') {
         const externalDirMap = { 'file': 'downloads', 'audio': 'audio', 'image': 'images', 'video': 'video' } as const;
         const externalDir = externalDirMap[file.type];
-        await fsModule.FileSystem.cpExternal(downloadedPath, file.name, externalDir);
+        await fsModule.FileSystem.cpExternal(downloadedPath, file.name, externalDir).catch(() => {
+          Logger.error('Failed to save file to external storage. Retry saving to downloads directory instead.');
+          return fsModule.FileSystem.cpExternal(downloadedPath, file.name, 'downloads');
+        });
       }
 
       return downloadedPath;

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-rc.1';
+const VERSION = '3.1.0';
 export default VERSION;