@sendbird/uikit-react-native 2.0.3 → 2.2.0

package/src/components/TypedPlaceholder.tsx

@@ -6,11 +6,11 @@ import { useLocalization } from '../hooks/useContext';
 
 type Props = {
   type:
-    | 'no-banned-members'
+    | 'no-muted-members'
+    | 'no-banned-users'
     | 'no-channels'
     | 'no-messages'
     | 'no-users'
-    | 'no-muted-members'
     | 'no-results-found'
     | 'error-wrong'
     | 'loading';
@@ -19,8 +19,8 @@ type Props = {
 const TypedPlaceholder = ({ type, onPressRetry }: Props) => {
   const { STRINGS } = useLocalization();
   switch (type) {
-    case 'no-banned-members':
-      return <Placeholder icon={'ban'} message={STRINGS.PLACEHOLDER.NO_BANNED_MEMBERS} />;
+    case 'no-banned-users':
+      return <Placeholder icon={'ban'} message={STRINGS.PLACEHOLDER.NO_BANNED_USERS} />;
     case 'no-channels':
       return <Placeholder icon={'chat'} message={STRINGS.PLACEHOLDER.NO_CHANNELS} />;
     case 'no-messages':

package/src/components/UserActionBar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { Pressable, TouchableOpacity, View } from 'react-native';
+import type { GestureResponderEvent } from 'react-native';
 
 import { Avatar, Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { conditionChaining } from '@sendbird/uikit-utils';
@@ -8,18 +9,23 @@ type Props = {
   uri: string;
   name: string;
   label?: string;
+
   muted: boolean;
   disabled: boolean;
-  onPressActionMenu?: () => void;
+
+  onPressActionMenu?: (ev: GestureResponderEvent) => void;
+  onPressAvatar?: (ev: GestureResponderEvent) => void;
 };
-const UserActionBar = ({ muted, uri, name, disabled, onPressActionMenu, label }: Props) => {
+const UserActionBar = ({ muted, uri, name, disabled, label, onPressActionMenu, onPressAvatar }: Props) => {
   const { colors } = useUIKitTheme();
 
   const iconColor = conditionChaining([disabled], [colors.onBackground04, colors.onBackground01]);
 
   return (
     <View style={styles.container}>
-      <Avatar muted={muted} size={36} uri={uri} containerStyle={styles.avatar} />
+      <Pressable onPress={onPressAvatar} style={styles.avatar}>
+        <Avatar muted={muted} size={36} uri={uri} />
+      </Pressable>
       <View style={[styles.infoContainer, { borderBottomColor: colors.onBackground04 }]}>
         <Text subtitle2 numberOfLines={1} style={styles.name} color={colors.onBackground01}>
           {name}

package/src/constants.ts

@@ -4,3 +4,5 @@ export const DEPRECATION_WARNING = {
     ON_PRESS_IMAGE_MESSAGE: '`onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead',
   },
 } as const;
+
+export const UNKNOWN_USER_ID = '##__USER_ID_IS_NOT_PROVIDED__##';

package/src/containers/GroupChannelPreviewContainer.tsx

@@ -32,7 +32,7 @@ type Props = {
   onLongPress: () => void;
 };
 const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props) => {
-  const { currentUser, sdk, features } = useSendbirdChat();
+  const { currentUser, sdk, features, mentionManager } = useSendbirdChat();
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
 
@@ -100,8 +100,11 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
         body={bodyText}
         bodyIcon={bodyIcon}
         badgeCount={channel.unreadMessageCount}
+        mentioned={channel.unreadMentionCount > 0}
+        mentionTrigger={mentionManager.config.trigger}
         memberCount={channel.memberCount > 2 ? channel.memberCount : undefined}
         frozen={channel.isFrozen}
+        broadcast={channel.isBroadcast}
         notificationOff={channel.myPushTriggerOption === 'off'}
       />
     </Pressable>
@@ -112,6 +115,10 @@ const styles = createStyleSheet({
   titleCaptionIcon: {
     marginRight: 4,
   },
+  broadcastCover: {
+    padding: 12,
+    borderRadius: 28,
+  },
 });
 
 export default GroupChannelPreviewContainer;

package/src/containers/SendbirdUIKitContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Platform } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
@@ -14,13 +14,25 @@ import {
   ToastProvider,
   UIKitThemeProvider,
 } from '@sendbird/uikit-react-native-foundation';
-import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
+import type {
+  SendbirdBaseChannel,
+  SendbirdChatSDK,
+  SendbirdGroupChannelCreateParams,
+  SendbirdMember,
+  SendbirdUser,
+} from '@sendbird/uikit-utils';
+import { useIsFirstMount } from '@sendbird/uikit-utils';
 
-import { LocalizationProvider } from '../contexts/Localization';
-import { PlatformServiceProvider } from '../contexts/PlatformService';
-import { SendbirdChatProvider } from '../contexts/SendbirdChat';
-import { useLocalization } from '../hooks/useContext';
+import { LocalizationContext, LocalizationProvider } from '../contexts/LocalizationCtx';
+import { PlatformServiceProvider } from '../contexts/PlatformServiceCtx';
+import { ReactionProvider } from '../contexts/ReactionCtx';
+import type { UIKitFeaturesInSendbirdChatContext } from '../contexts/SendbirdChatCtx';
+import { SendbirdChatProvider } from '../contexts/SendbirdChatCtx';
+import { UserProfileProvider } from '../contexts/UserProfileCtx';
+import EmojiManager from '../libs/EmojiManager';
 import InternalLocalCacheStorage from '../libs/InternalLocalCacheStorage';
+import MentionConfig, { MentionConfigInterface } from '../libs/MentionConfig';
+import MentionManager from '../libs/MentionManager';
 import StringSetEn from '../localization/StringSet.en';
 import type { StringSet } from '../localization/StringSet.type';
 import SBUDynamicModule from '../platform/dynamicModule';
@@ -39,6 +51,13 @@ const NetInfo = SBUDynamicModule.get('@react-native-community/netinfo', 'warn');
 export const SendbirdUIKit = Object.freeze({
   VERSION,
   PLATFORM: Platform.OS.toLowerCase(),
+  DEFAULT: {
+    AUTO_PUSH_TOKEN_REGISTRATION: true,
+    CHANNEL_LIST_TYPING_INDICATOR: false,
+    CHANNEL_LIST_MESSAGE_RECEIPT_STATUS: false,
+    USE_USER_ID_FOR_NICKNAME: false,
+    USER_MENTION: false,
+  },
 });
 
 export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
@@ -52,10 +71,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
   chatOptions?: {
     localCacheStorage?: LocalCacheStorage;
     onInitialized?: (sdkInstance: SendbirdChatSDK) => SendbirdChatSDK;
-    enableAutoPushTokenRegistration?: boolean;
-    enableChannelListTypingIndicator?: boolean;
-    enableChannelListMessageReceiptStatus?: boolean;
-  };
+  } & Partial<UIKitFeaturesInSendbirdChatContext>;
   localization?: {
     stringSet?: StringSet;
   };
@@ -69,6 +85,14 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
   toast?: {
     dismissTimeout?: number;
   };
+  userProfile?: {
+    onCreateChannel: (channel: SendbirdBaseChannel) => void;
+    onBeforeCreateChannel?: (
+      channelParams: SendbirdGroupChannelCreateParams,
+      users: SendbirdUser[] | SendbirdMember[],
+    ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
+  };
+  userMention?: Pick<Partial<MentionConfigInterface>, 'mentionLimit' | 'suggestionLimit' | 'debounceMills'>;
   errorBoundary?: {
     onError?: (props: ErrorBoundaryProps) => void;
     ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
@@ -83,72 +107,76 @@ const SendbirdUIKitContainer = ({
   localization,
   styles,
   toast,
+  userProfile,
+  userMention,
   errorBoundary,
 }: SendbirdUIKitContainerProps) => {
-  const unsubscribes = useRef<(() => void)[]>([]).current;
-  const getSendbirdSDK = () => {
-    let sdk: SendbirdChatSDK;
-
-    sdk = Sendbird.init({
-      appId,
-      modules: [new GroupChannelModule(), new OpenChannelModule()],
-      localCacheEnabled: Boolean(chatOptions?.localCacheStorage),
-      // @ts-ignore
-      useAsyncStorageStore: chatOptions?.localCacheStorage
-        ? new InternalLocalCacheStorage(chatOptions.localCacheStorage)
-        : undefined,
-    });
-
-    if (chatOptions?.onInitialized) {
-      sdk = chatOptions?.onInitialized(sdk);
-    }
+  const defaultStringSet = localization?.stringSet ?? StringSetEn;
 
-    if (SendbirdUIKit.VERSION) {
-      sdk.addExtension('sb_uikit', SendbirdUIKit.VERSION);
-    }
+  const isFirstMount = useIsFirstMount();
+  const unsubscribes = useRef<Array<() => void>>([]);
+  const internalStorage = useMemo(
+    () => (chatOptions?.localCacheStorage ? new InternalLocalCacheStorage(chatOptions.localCacheStorage) : undefined),
+    [chatOptions?.localCacheStorage],
+  );
 
-    if (SendbirdUIKit.PLATFORM) {
-      sdk.addExtension('device-os-platform', SendbirdUIKit.PLATFORM);
-    }
+  const [sdkInstance, setSdkInstance] = useState<SendbirdChatSDK>(() => {
+    const sendbird = initializeSendbird(appId, internalStorage, chatOptions?.onInitialized);
+    unsubscribes.current = sendbird.unsubscribes;
+    return sendbird.chatSDK;
+  });
+  const emojiManager = useMemo(() => new EmojiManager(internalStorage), [internalStorage]);
+  const mentionManager = useMemo(() => {
+    const config = new MentionConfig({
+      mentionLimit: userMention?.mentionLimit || MentionConfig.DEFAULT.MENTION_LIMIT,
+      suggestionLimit: userMention?.suggestionLimit || MentionConfig.DEFAULT.SUGGESTION_LIMIT,
+      debounceMills: userMention?.debounceMills ?? MentionConfig.DEFAULT.DEBOUNCE_MILLS,
+      delimiter: MentionConfig.DEFAULT.DELIMITER,
+      trigger: MentionConfig.DEFAULT.TRIGGER,
+    });
+    return new MentionManager(config, chatOptions?.enableUserMention ?? SendbirdUIKit.DEFAULT.USER_MENTION);
+  }, [userMention?.mentionLimit, userMention?.suggestionLimit, userMention?.debounceMills]);
 
-    if (NetInfo?.addEventListener) {
-      const listener = (callback: () => void, callbackType: 'online' | 'offline') => {
-        const unsubscribe = NetInfo.addEventListener((state) => {
-          const online = Boolean(state.isConnected) || Boolean(state.isInternetReachable);
-          if (online && callbackType === 'online') callback();
-          if (!online && callbackType === 'offline') callback();
-        });
-        unsubscribes.push(unsubscribe);
-        return unsubscribe;
-      };
-      sdk.setOnlineListener?.((onOnline) => listener(onOnline, 'online'));
-      sdk.setOfflineListener?.((onOffline) => listener(onOffline, 'offline'));
+  useLayoutEffect(() => {
+    if (!isFirstMount) {
+      const sendbird = initializeSendbird(appId, internalStorage, chatOptions?.onInitialized);
+      setSdkInstance(sendbird.chatSDK);
+      unsubscribes.current = sendbird.unsubscribes;
     }
-    return sdk;
-  };
 
-  const [sdkInstance, setSdkInstance] = useState<SendbirdChatSDK>(getSendbirdSDK);
-
-  useEffect(() => {
-    setSdkInstance(getSendbirdSDK);
     return () => {
-      unsubscribes.forEach((u) => {
-        try {
-          u();
-        } catch {}
-      });
+      if (!isFirstMount) {
+        unsubscribes.current.forEach((u) => {
+          try {
+            u();
+          } catch {}
+        });
+      }
     };
-  }, [appId, chatOptions?.localCacheStorage]);
+  }, [appId, internalStorage]);
 
   return (
     <SafeAreaProvider>
       <SendbirdChatProvider
         sdkInstance={sdkInstance}
-        enableAutoPushTokenRegistration={chatOptions?.enableAutoPushTokenRegistration ?? true}
-        enableChannelListTypingIndicator={chatOptions?.enableChannelListTypingIndicator ?? false}
-        enableChannelListMessageReceiptStatus={chatOptions?.enableChannelListMessageReceiptStatus ?? false}
+        emojiManager={emojiManager}
+        mentionManager={mentionManager}
+        enableAutoPushTokenRegistration={
+          chatOptions?.enableAutoPushTokenRegistration ?? SendbirdUIKit.DEFAULT.AUTO_PUSH_TOKEN_REGISTRATION
+        }
+        enableChannelListTypingIndicator={
+          chatOptions?.enableChannelListTypingIndicator ?? SendbirdUIKit.DEFAULT.CHANNEL_LIST_TYPING_INDICATOR
+        }
+        enableChannelListMessageReceiptStatus={
+          chatOptions?.enableChannelListMessageReceiptStatus ??
+          SendbirdUIKit.DEFAULT.CHANNEL_LIST_MESSAGE_RECEIPT_STATUS
+        }
+        enableUseUserIdForNickname={
+          chatOptions?.enableUseUserIdForNickname ?? SendbirdUIKit.DEFAULT.USE_USER_ID_FOR_NICKNAME
+        }
+        enableUserMention={chatOptions?.enableUserMention ?? SendbirdUIKit.DEFAULT.USER_MENTION}
       >
-        <LocalizationProvider stringSet={localization?.stringSet ?? StringSetEn}>
+        <LocalizationProvider stringSet={defaultStringSet}>
           <PlatformServiceProvider
             fileService={platformServices.file}
             notificationService={platformServices.notification}
@@ -161,11 +189,36 @@ const SendbirdUIKitContainer = ({
                 defaultTitleAlign={styles?.defaultHeaderTitleAlign ?? 'left'}
                 statusBarTranslucent={styles?.statusBarTranslucent ?? true}
               >
-                <LocalizedDialogProvider>
-                  <ToastProvider dismissTimeout={toast?.dismissTimeout}>
-                    <InternalErrorBoundaryContainer {...errorBoundary}>{children}</InternalErrorBoundaryContainer>
-                  </ToastProvider>
-                </LocalizedDialogProvider>
+                <ToastProvider dismissTimeout={toast?.dismissTimeout}>
+                  <UserProfileProvider
+                    onCreateChannel={userProfile?.onCreateChannel}
+                    onBeforeCreateChannel={userProfile?.onBeforeCreateChannel}
+                  >
+                    <ReactionProvider>
+                      <LocalizationContext.Consumer>
+                        {(value) => {
+                          const STRINGS = value?.STRINGS || defaultStringSet;
+                          return (
+                            <DialogProvider
+                              defaultLabels={{
+                                alert: { ok: STRINGS.DIALOG.ALERT_DEFAULT_OK },
+                                prompt: {
+                                  ok: STRINGS.DIALOG.PROMPT_DEFAULT_OK,
+                                  cancel: STRINGS.DIALOG.PROMPT_DEFAULT_CANCEL,
+                                  placeholder: STRINGS.DIALOG.PROMPT_DEFAULT_PLACEHOLDER,
+                                },
+                              }}
+                            >
+                              <InternalErrorBoundaryContainer {...errorBoundary}>
+                                {children}
+                              </InternalErrorBoundaryContainer>
+                            </DialogProvider>
+                          );
+                        }}
+                      </LocalizationContext.Consumer>
+                    </ReactionProvider>
+                  </UserProfileProvider>
+                </ToastProvider>
               </HeaderStyleProvider>
             </UIKitThemeProvider>
           </PlatformServiceProvider>
@@ -175,24 +228,48 @@ const SendbirdUIKitContainer = ({
   );
 };
 
-const LocalizedDialogProvider = ({ children }: React.PropsWithChildren) => {
-  const { STRINGS } = useLocalization();
-  return (
-    <DialogProvider
-      defaultLabels={{
-        alert: {
-          ok: STRINGS.DIALOG.ALERT_DEFAULT_OK,
-        },
-        prompt: {
-          ok: STRINGS.DIALOG.PROMPT_DEFAULT_OK,
-          cancel: STRINGS.DIALOG.PROMPT_DEFAULT_CANCEL,
-          placeholder: STRINGS.DIALOG.PROMPT_DEFAULT_PLACEHOLDER,
-        },
-      }}
-    >
-      {children}
-    </DialogProvider>
-  );
+const initializeSendbird = (
+  appId: string,
+  internalStorage?: InternalLocalCacheStorage,
+  onInitialized?: (sdk: SendbirdChatSDK) => SendbirdChatSDK,
+) => {
+  const unsubscribes: Array<() => void> = [];
+  let chatSDK: SendbirdChatSDK;
+
+  chatSDK = Sendbird.init({
+    appId,
+    modules: [new GroupChannelModule(), new OpenChannelModule()],
+    localCacheEnabled: Boolean(internalStorage),
+    useAsyncStorageStore: internalStorage as never,
+    newInstance: true,
+  });
+
+  if (onInitialized) {
+    chatSDK = onInitialized(chatSDK);
+  }
+
+  if (SendbirdUIKit.VERSION) {
+    chatSDK.addExtension('sb_uikit', SendbirdUIKit.VERSION);
+  }
+
+  if (SendbirdUIKit.PLATFORM) {
+    chatSDK.addExtension('device-os-platform', SendbirdUIKit.PLATFORM);
+  }
+
+  if (NetInfo?.addEventListener) {
+    const listener = (callback: () => void, callbackType: 'online' | 'offline') => {
+      const unsubscribe = NetInfo.addEventListener((state) => {
+        const online = Boolean(state.isConnected) || Boolean(state.isInternetReachable);
+        if (online && callbackType === 'online') callback();
+        if (!online && callbackType === 'offline') callback();
+      });
+      unsubscribes.push(unsubscribe);
+      return unsubscribe;
+    };
+    chatSDK.setOnlineListener?.((onOnline) => listener(onOnline, 'online'));
+    chatSDK.setOfflineListener?.((onOffline) => listener(onOffline, 'offline'));
+  }
+  return { chatSDK, unsubscribes };
 };
 
 export default SendbirdUIKitContainer;

package/src/contexts/ReactionCtx.tsx

@@ -0,0 +1,102 @@
+import React, { useCallback, useContext, useReducer, useRef, useState } from 'react';
+
+import type { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';
+import { NOOP } from '@sendbird/uikit-utils';
+
+import { ReactionBottomSheets } from '../components/ReactionBottomSheets';
+import { LocalizationContext } from '../contexts/LocalizationCtx';
+import { SendbirdChatContext } from '../contexts/SendbirdChatCtx';
+import { UserProfileContext } from '../contexts/UserProfileCtx';
+
+type State = {
+  message?: SendbirdBaseMessage;
+  channel?: SendbirdBaseChannel;
+};
+export type ReactionContextType = {
+  openReactionList(param: Required<State>): void;
+  openReactionUserList(param: Required<State> & { focusIndex?: number }): void;
+  updateReactionFocusedItem(param?: State): void;
+  focusIndex: number;
+} & State;
+
+type Props = React.PropsWithChildren<{}>;
+
+export const ReactionContext = React.createContext<ReactionContextType | null>(null);
+export const ReactionProvider = ({ children }: Props) => {
+  const chatCtx = useContext(SendbirdChatContext);
+  const localizationCtx = useContext(LocalizationContext);
+  const userProfileCtx = useContext(UserProfileContext);
+  if (!chatCtx) throw new Error('SendbirdChatContext is not provided');
+  if (!localizationCtx) throw new Error('LocalizationContext is not provided');
+  if (!userProfileCtx) throw new Error('UserProfileContext is not provided');
+
+  const [state, setState] = useReducer((prev: State, next: State) => ({ ...prev, ...next }), {});
+  const [reactionListVisible, setReactionListVisible] = useState(false);
+  const [reactionUserListVisible, setReactionUserListVisible] = useState(false);
+  const [reactionUserListFocusIndex, setReactionUserListFocusIndex] = useState(0);
+
+  const closeResolver = useRef<() => void>(NOOP);
+
+  const openReactionList: ReactionContextType['openReactionList'] = useCallback((params) => {
+    setState(params);
+    setReactionListVisible(true);
+  }, []);
+
+  const openReactionUserList: ReactionContextType['openReactionUserList'] = useCallback(
+    ({ channel, message, focusIndex = 0 }) => {
+      setState({ channel, message });
+      setReactionUserListFocusIndex(focusIndex);
+      setReactionUserListVisible(true);
+    },
+    [],
+  );
+
+  const updateReactionFocusedItem: ReactionContextType['updateReactionFocusedItem'] = useCallback((params) => {
+    if (params) setState(params);
+    else setState({});
+  }, []);
+
+  const createOnCloseWithResolver = (callback: () => void) => {
+    return () => {
+      return new Promise<void>((resolve) => {
+        closeResolver.current = resolve;
+        callback();
+      });
+    };
+  };
+
+  const reactionCtx = {
+    ...state,
+    openReactionList,
+    openReactionUserList,
+    updateReactionFocusedItem,
+    focusIndex: reactionUserListFocusIndex,
+  };
+
+  const sheetProps = {
+    chatCtx,
+    reactionCtx,
+    localizationCtx,
+    userProfileCtx,
+    onDismiss: () => {
+      setState({});
+      closeResolver.current?.();
+    },
+  };
+
+  return (
+    <ReactionContext.Provider value={reactionCtx}>
+      {children}
+      <ReactionBottomSheets.UserList
+        {...sheetProps}
+        visible={reactionUserListVisible}
+        onClose={createOnCloseWithResolver(() => setReactionUserListVisible(false))}
+      />
+      <ReactionBottomSheets.ReactionList
+        {...sheetProps}
+        visible={reactionListVisible}
+        onClose={createOnCloseWithResolver(() => setReactionListVisible(false))}
+      />
+    </ReactionContext.Provider>
+  );
+};

package/src/contexts/{SendbirdChat.tsx → SendbirdChatCtx.tsx}

@@ -10,18 +10,28 @@ import type {
 } from '@sendbird/uikit-utils';
 import { confirmAndMarkAsDelivered, useForceUpdate } from '@sendbird/uikit-utils';
 
+import type EmojiManager from '../libs/EmojiManager';
+import type MentionManager from '../libs/MentionManager';
 import type { FileType } from '../platform/types';
 
-type Props = React.PropsWithChildren<{
-  sdkInstance: SendbirdChatSDK;
-
+export interface UIKitFeaturesInSendbirdChatContext {
   enableAutoPushTokenRegistration: boolean;
   enableChannelListTypingIndicator: boolean;
   enableChannelListMessageReceiptStatus: boolean;
-}>;
+  enableUseUserIdForNickname: boolean;
+  enableUserMention: boolean;
+}
+
+interface Props extends UIKitFeaturesInSendbirdChatContext, React.PropsWithChildren {
+  sdkInstance: SendbirdChatSDK;
+  emojiManager: EmojiManager;
+  mentionManager: MentionManager;
+}
 
 type Context = {
   sdk: SendbirdChatSDK;
+  emojiManager: EmojiManager;
+  mentionManager: MentionManager;
   currentUser?: SendbirdUser;
   setCurrentUser: React.Dispatch<React.SetStateAction<SendbirdUser | undefined>>;
 
@@ -34,6 +44,8 @@ type Context = {
     autoPushTokenRegistrationEnabled: boolean;
     channelListTypingIndicatorEnabled: boolean;
     channelListMessageReceiptStatusEnabled: boolean;
+    useUserIdForNicknameEnabled: boolean;
+    userMentionEnabled: boolean;
 
     // Sendbird application features
     deliveryReceiptEnabled: boolean;
@@ -47,9 +59,13 @@ export const SendbirdChatContext = React.createContext<Context | null>(null);
 export const SendbirdChatProvider = ({
   children,
   sdkInstance,
+  emojiManager,
+  mentionManager,
   enableAutoPushTokenRegistration,
   enableChannelListMessageReceiptStatus,
   enableChannelListTypingIndicator,
+  enableUseUserIdForNickname,
+  enableUserMention,
 }: Props) => {
   const [currentUser, _setCurrentUser] = useState<SendbirdUser>();
   const forceUpdate = useForceUpdate();
@@ -67,9 +83,17 @@ export const SendbirdChatProvider = ({
 
       if (!user) throw new Error('Current user is not defined, please connect using `useConnection()` hook first');
 
-      const params: SendbirdUserUpdateParams = { nickname };
+      const params: SendbirdUserUpdateParams = {};
+
+      if (!nickname) {
+        params.nickname = user.nickname;
+      } else {
+        params.nickname = nickname;
+      }
 
-      if (typeof profile === 'string') {
+      if (!profile) {
+        params.profileUrl = user.profileUrl;
+      } else if (typeof profile === 'string') {
         params.profileUrl = profile;
       } else if (typeof profile === 'object') {
         params.profileImage = profile;
@@ -105,6 +129,8 @@ export const SendbirdChatProvider = ({
 
   const value: Context = {
     sdk: sdkInstance,
+    emojiManager,
+    mentionManager,
     currentUser,
     setCurrentUser,
 
@@ -116,6 +142,8 @@ export const SendbirdChatProvider = ({
       autoPushTokenRegistrationEnabled: enableAutoPushTokenRegistration,
       channelListTypingIndicatorEnabled: enableChannelListTypingIndicator,
       channelListMessageReceiptStatusEnabled: enableChannelListMessageReceiptStatus,
+      useUserIdForNicknameEnabled: enableUseUserIdForNickname,
+      userMentionEnabled: enableUserMention,
     },
   };