@sendbird/uikit-react 3.0.0-beta → 3.0.0-beta.2

package/index.d.ts

@@ -3,11 +3,6 @@
  * homepage: https://sendbird.com/
  * git: https://github.com/sendbird/sendbird-uikit-react
  */
-import type React from 'react';
-import Sendbird from 'sendbird';
-import type { Locale } from 'date-fns';
-import SendBird from 'sendbird';
-
 type ReplyType = "NONE" | "QUOTE_REPLY" | "THREAD";
 
 type Logger = {
@@ -29,6 +24,10 @@ interface RenderUserProfileProps {
 
 interface SendBirdProviderConfig {
   logLevel?: 'debug' | 'warning' | 'error' | 'info' | 'all' | Array<string>;
+  userMention?: {
+    maxMentionCount?: number,
+    maxSuggestionCount?: number,
+  };
 }
 
 interface ClientMessage {
@@ -50,7 +49,6 @@ interface ClientAdminMessage extends SendBird.AdminMessage, ClientMessage { }
 type EveryMessage = ClientUserMessage | ClientFileMessage | ClientAdminMessage;
 type ClientSentMessages = ClientUserMessage | ClientFileMessage;
 
-
 interface SendBirdProviderProps {
   userId: string;
   appId: string;
@@ -67,6 +65,7 @@ interface SendBirdProviderProps {
   config?: SendBirdProviderConfig;
   stringSet?: Record<string, string>;
   colorSet?: Record<string, string>;
+  isMentionEnabled?: boolean;
   imageCompression?: {
     compressionRate?: number,
     resizingWidth?: number | string,
@@ -79,6 +78,11 @@ interface SendBirdStateConfig {
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode;
   allowProfileEdit: boolean;
   isOnline: boolean;
+  isMentionEnabled: boolean;
+  userMention: {
+    maxMentionCount: number;
+    maxSuggestionCount: number;
+  };
   userId: string;
   appId: string;
   accessToken: string;
@@ -93,7 +97,7 @@ interface SendBirdStateConfig {
     resizingHeight?: number | string,
   };
 }
-export interface SdkStore {
+interface SdkStore {
   error: boolean;
   initialized: boolean;
   loading: boolean;
@@ -109,12 +113,12 @@ interface SendBirdStateStore {
   userStore: UserStore;
 }
 
-export interface MessageSearchQueryType extends Sendbird.MessageSearchQueryOptions {
+interface MessageSearchQueryType extends SendBird.MessageSearchQueryOptions {
   key: string;
   hasNext?: boolean;
 }
 
-export type SendBirdState = {
+type SendBirdState = {
   config: SendBirdStateConfig;
   stores: SendBirdStateStore;
   dispatchers: {
@@ -286,13 +290,13 @@ interface ChannelListQueries {
   channelListQuery?: GroupChannelListQuery;
 }
 
-export interface ChannelListProviderProps {
+interface ChannelListProviderProps {
   allowProfileEdit?: boolean;
-  onBeforeCreateChannel?(users: Array<string>): Sendbird.GroupChannelParams;
+  onBeforeCreateChannel?(users: Array<string>): SendBird.GroupChannelParams;
   onThemeChange?(theme: string): void;
-  onProfileEditSuccess?(user: Sendbird.User): void;
-  onChannelSelect?(channel: Sendbird.GroupChannel): void;
-  sortChannelList?: (channels: Sendbird.GroupChannel[]) => Sendbird.GroupChannel[];
+  onProfileEditSuccess?(user: SendBird.User): void;
+  onChannelSelect?(channel: SendBird.GroupChannel): void;
+  sortChannelList?: (channels: SendBird.GroupChannel[]) => SendBird.GroupChannel[];
   queries?: ChannelListQueries;
   children?: React.ReactNode;
   className?: string | string[];
@@ -301,16 +305,16 @@ export interface ChannelListProviderProps {
   disableAutoSelect?: boolean;
 }
 
-export interface ChannelListProviderInterface extends ChannelListProviderProps {
+interface ChannelListProviderInterface extends ChannelListProviderProps {
   initialized: boolean;
   loading: boolean;
-  allChannels: Sendbird.GroupChannel[];
-  currentChannel: Sendbird.GroupChannel;
+  allChannels: SendBird.GroupChannel[];
+  currentChannel: SendBird.GroupChannel;
   showSettings: boolean;
   channelListQuery: GroupChannelListQuery;
   currentUserId: string;
   // channelListDispatcher: CustomUseReducerDispatcher;
-  channelSource: Sendbird.GroupChannelListQuery;
+  channelSource: SendBird.GroupChannelListQuery;
 }
 
 interface RenderChannelPreviewProps {
@@ -355,11 +359,11 @@ interface ChannelPreviewActionInterface {
 interface ChannelSettingsProviderInterface {
   channelUrl: string;
   onCloseClick?(): void;
-  onChannelModified?(channel: Sendbird.GroupChannel): void;
-  onBeforeUpdateChannel?(currentTitle: string, currentImg: File, data: string): Sendbird.GroupChannelParams;
+  onChannelModified?(channel: SendBird.GroupChannel): void;
+  onBeforeUpdateChannel?(currentTitle: string, currentImg: File, data: string): SendBird.GroupChannelParams;
   queries?: ChannelSettingsQueries;
   forceUpdateUI(): void;
-  channel: Sendbird.GroupChannel;
+  channel: SendBird.GroupChannel;
   invalidChannel: boolean;
 }
 
@@ -386,8 +390,8 @@ type ChannelSettingsContextProps = {
   channelUrl: string;
   className?: string;
   onCloseClick?(): void;
-  onChannelModified?(channel: Sendbird.GroupChannel): void;
-  onBeforeUpdateChannel?(currentTitle: string, currentImg: File, data: string): Sendbird.GroupChannelParams;
+  onChannelModified?(channel: SendBird.GroupChannel): void;
+  onBeforeUpdateChannel?(currentTitle: string, currentImg: File, data: string): SendBird.GroupChannelParams;
   queries?: ChannelSettingsQueries;
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode;
   disableUserProfile?: boolean;
@@ -424,15 +428,15 @@ type LeaveChannelProps = {
 };
 
 declare module '@sendbird/uikit-react'  {
-  export type App = React.FunctionComponent<AppProps>;
-  export type SendBirdProvider = React.FunctionComponent<SendBirdProviderProps>;
-  export type sendBirdSelectors = sendBirdSelectorsInterface;
-  export type ChannelList = React.FunctionComponent<ChannelListProps>;
-  export type ChannelSettings = React.FunctionComponent<ChannelSettingsProps>;
-  export type Channel = React.FunctionComponent<ChannelProps>
-  export type OpenChannel = React.FunctionComponent<OpenChannelProps>
-  export type OpenChannelSettings = React.FunctionComponent<OpenChannelSettingsProps>
-  export type MessageSearch = React.FunctionComponent<MessageSearchProps>
+  export const App: React.FunctionComponent<AppProps>;
+  export const SendBirdProvider: React.FunctionComponent<SendBirdProviderProps>;
+  export const sendBirdSelectors: sendBirdSelectorsInterface;
+  export const ChannelList: React.FunctionComponent<ChannelListProps>;
+  export const ChannelSettings: React.FunctionComponent<ChannelSettingsProps>;
+  export const Channel: React.FunctionComponent<ChannelProps>
+  export const OpenChannel: React.FunctionComponent<OpenChannelProps>
+  export const OpenChannelSettings: React.FunctionComponent<OpenChannelSettingsProps>
+  export const MessageSearch: React.FunctionComponent<MessageSearchProps>
   export function withSendBird(
     ChildComp: React.Component | React.ElementType,
     mapStoreToProps?: (store: SendBirdState) => unknown
@@ -441,17 +445,17 @@ declare module '@sendbird/uikit-react'  {
 }
 
 declare module '@sendbird/uikit-react/App' {
-  type App = React.FunctionComponent<AppProps>;
+  const App: React.FunctionComponent<AppProps>
   export default App;
 }
 
 declare module '@sendbird/uikit-react/SendbirdProvider' {
-  type SendbirdProvider = React.FunctionComponent<SendBirdProviderProps>;
+  const SendbirdProvider: React.FunctionComponent<SendBirdProviderProps>;
   export default SendbirdProvider;
 }
 
 declare module '@sendbird/uikit-react/sendBirdSelectors' {
-  type sendBirdSelectors = sendBirdSelectorsInterface;
+  const sendBirdSelectors: sendBirdSelectorsInterface;
   export default sendBirdSelectors;
 }
 
@@ -469,82 +473,82 @@ declare module '@sendbird/uikit-react/withSendBird' {
 }
 
 declare module '@sendbird/uikit-react/ChannelList' {
-  type ChannelList = React.FunctionComponent<ChannelListProps>;
+  const ChannelList: React.FunctionComponent<ChannelListProps>;
   export default ChannelList;
 }
 
 declare module '@sendbird/uikit-react/ChannelList/context' {
-  export type ChannelListProvider = React.FunctionComponent<ChannelListProviderProps>;
+  export const ChannelListProvider: React.FunctionComponent<ChannelListProviderProps>;
   export function useChannelListContext (): ChannelListProviderInterface;
 }
 
 declare module '@sendbird/uikit-react/ChannelList/components/AddChannel' {
-  type AddChannel = React.VoidFunctionComponent;
+  const AddChannel: React.VoidFunctionComponent;
   export default AddChannel;
 }
 
 declare module '@sendbird/uikit-react/ChannelList/components/ChannelListUI' {
-  type ChannelListUI = React.FunctionComponent<ChannelListUIProps>;
+  const ChannelListUI: React.FunctionComponent<ChannelListUIProps>;
   export default ChannelListUI;
 }
 
 declare module '@sendbird/uikit-react/ChannelList/components/ChannelListHeader' {
-  type ChannelListHeader = React.FunctionComponent<ChannelListUIProps>;
+  const ChannelListHeader: React.FunctionComponent<ChannelListUIProps>;
   export default ChannelListHeader;
 }
 
 declare module '@sendbird/uikit-react/ChannelList/components/ChannelPreview' {
-  type ChannelPreview = React.FunctionComponent<ChannelPreviewInterface>;
+  const ChannelPreview: React.FunctionComponent<ChannelPreviewInterface>;
   export default ChannelPreview;
 }
 
 declare module '@sendbird/uikit-react/ChannelList/components/ChannelPreviewAction' {
-  type ChannelPreviewAction = React.FunctionComponent<ChannelPreviewActionInterface>;
+  const ChannelPreviewAction: React.FunctionComponent<ChannelPreviewActionInterface>;
   export default ChannelPreviewAction;
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings' {
-  type ChannelSettings = React.FunctionComponent<ChannelSettingsProps>;
+  const ChannelSettings: React.FunctionComponent<ChannelSettingsProps>;
   export default ChannelSettings;
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings/context' {
-  export type ChannelSettingsProvider = React.FC<ChannelSettingsContextProps>;
-  export type UseChannelSettingsType = () => ChannelSettingsProviderInterface;
+  export const ChannelSettingsProvider: React.FC<ChannelSettingsContextProps>;
+  export const UseChannelSettingsType: () => ChannelSettingsProviderInterface;
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings/components/AdminPanel' {
-  type AdminPanel = React.VoidFunctionComponent;
+  const AdminPanel: React.VoidFunctionComponent;
   export default AdminPanel;
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings/components/ChannelProfile' {
-  type ChannelProfile = React.VoidFunctionComponent;
+  const ChannelProfile: React.VoidFunctionComponent;
   export default ChannelProfile;
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings/components/ChannelSettingsUI' {
-  type ChannelSettingsUI = React.FC<ChannelSettingsUIProps>;
+  const ChannelSettingsUI: React.FC<ChannelSettingsUIProps>;
   export default ChannelSettingsUI;
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings/components/EditDetailsModal' {
-  type EditDetailsModal = React.FC<ChannelSettingsEditDetailsProps>;
+  const EditDetailsModal: React.FC<ChannelSettingsEditDetailsProps>;
   export default EditDetailsModal;
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings/components/LeaveChannel' {
-  type LeaveChannel = React.FC<LeaveChannelProps>;
+  const LeaveChannel: React.FC<LeaveChannelProps>;
   export default LeaveChannel;
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings/components/UserListItem' {
-  type UserListItem = React.FC<UserListItemProps>;
+  const UserListItem: React.FC<UserListItemProps>;
   export default UserListItem;
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings/components/UserPanel' {
-  type UserPanel = React.VoidFunctionComponent;
+  const UserPanel: React.VoidFunctionComponent;
   export default UserPanel;
 }
 
@@ -591,7 +595,7 @@ interface ChannelUIProps {
   renderCustomSeperator?: () => React.ReactNode;
 }
 
-type CoreMessageType = Sendbird.AdminMessage | Sendbird.UserMessage | Sendbird.FileMessage;
+type CoreMessageType = SendBird.AdminMessage | SendBird.UserMessage | SendBird.FileMessage;
 
 interface MessageStoreInterface {
   allMessages: CoreMessageType[];
@@ -649,6 +653,27 @@ type MessageListProps = {
   renderCustomSeperator?: () => React.ReactNode;
 };
 
+type SuggestedMentionListProps = {
+  targetNickname: string;
+  memberListQuery?: Record<string, string>;
+  onUserItemClick?: (member: SendBird.User) => void;
+  onFocusItemChange?: (member: SendBird.User) => void;
+  onFetchUsers?: (users: Array<SendBird.User>) => void;
+  renderUserMentionItem?: (props: { user: SendBird.User }) => JSX.Element;
+  ableAddMention: boolean;
+  maxMentionCount?: number;
+  maxSuggestionCount?: number;
+  inputEvent?: React.KeyboardEvent<HTMLDivElement>;
+};
+
+type SuggestedUserMentionItemProps = {
+  member: SendBird.User;
+  isFocused?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  onMouseOver?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  renderUserMentionItem?: (props: { user: SendBird.User }) => JSX.Element;
+};
+
 interface UnreadCountProps {
   count: number;
   time: string;
@@ -664,62 +689,67 @@ interface RemoveMessageProps {
 }
 
 declare module '@sendbird/uikit-react/Channel' {
-  type Channel = React.FC<ChannelProps>;
+  const Channel: React.FC<ChannelProps>;
   export default Channel;
 }
 
 declare module '@sendbird/uikit-react/Channel/context' {
-  export type ChannelProvider = React.FunctionComponent<ChannelContextProps>;
+  export const ChannelProvider: React.FunctionComponent<ChannelContextProps>;
   export function useChannel(): ChannelProviderInterface;
 }
 
 declare module '@sendbird/uikit-react/Channel/components/ChannelHeader' {
-  type ChannelHeader = React.VoidFunctionComponent;
+  const ChannelHeader: React.VoidFunctionComponent;
   export default ChannelHeader;
 }
 
 declare module '@sendbird/uikit-react/Channel/components/ChannelUI' {
-  type ChannelUI = React.FunctionComponent<ChannelUIProps>;
+  const ChannelUI: React.FunctionComponent<ChannelUIProps>;
   export default ChannelUI;
 }
 
 declare module '@sendbird/uikit-react/Channel/components/FileViewer' {
-  type FileViewer = React.FunctionComponent<FileViewerProps>;
+  const FileViewer: React.FunctionComponent<FileViewerProps>;
   export default FileViewer;
 }
 
 declare module '@sendbird/uikit-react/Channel/components/FrozenNotification' {
-  type FrozenNotification = React.VoidFunctionComponent;
+  const FrozenNotification: React.VoidFunctionComponent;
   export default FrozenNotification;
 }
 
 declare module '@sendbird/uikit-react/Channel/components/Message' {
-  type Message = React.FunctionComponent<MessageUIProps>;
+  const Message: React.FunctionComponent<MessageUIProps>;
   export default Message;
 }
 
 declare module '@sendbird/uikit-react/Channel/components/MessageInput' {
-  type MessageInput = React.VoidFunctionComponent;
+  const MessageInput: React.VoidFunctionComponent;
   export default MessageInput;
 }
 
 declare module '@sendbird/uikit-react/Channel/components/MessageList' {
-  type MessageList = React.FunctionComponent<MessageListProps>;
+  const MessageList: React.FunctionComponent<MessageListProps>;
   export default MessageList;
 }
 
+declare module '@sendbird/uikit-react/Channel/components/SuggestedMentionList' {
+  const SuggestedMentionList: React.FunctionComponent<SuggestedMentionListProps>;
+  export default SuggestedMentionList;
+}
+
 declare module '@sendbird/uikit-react/Channel/components/RemoveMessageModal' {
-  type RemoveMessageModal = React.FunctionComponent<RemoveMessageProps>;
+  const RemoveMessageModal: React.FunctionComponent<RemoveMessageProps>;
   export default RemoveMessageModal;
 }
 
 declare module '@sendbird/uikit-react/Channel/components/TypingIndicator' {
-  type TypingIndicator = React.VoidFunctionComponent;
+  const TypingIndicator: React.VoidFunctionComponent;
   export default TypingIndicator;
 }
 
 declare module '@sendbird/uikit-react/Channel/components/UnreadCount' {
-  type UnreadCount = React.FunctionComponent<UnreadCountProps>;
+  const UnreadCount: React.FunctionComponent<UnreadCountProps>;
   export default UnreadCount;
 }
 
@@ -762,13 +792,13 @@ interface OpenChannelMessagesState {
   allMessages: Array<EveryMessage>;
   loading: boolean;
   initialized: boolean;
-  currentOpenChannel: Sendbird.OpenChannel;
+  currentOpenChannel: SendBird.OpenChannel;
   isInvalid: boolean;
   hasMore: boolean;
   lastMessageTimestamp: number;
   frozen: boolean;
-  operators: Array<Sendbird.User>;
-  participants: Array<Sendbird.User>;
+  operators: Array<SendBird.User>;
+  participants: Array<SendBird.User>;
   bannedParticipantIds: Array<string>;
   mutedParticipantIds: Array<string>;
 }
@@ -813,44 +843,44 @@ type OpenChannelMessageProps = {
 };
 
 declare module '@sendbird/uikit-react/OpenChannel' {
-  type OpenChannel = React.FC<OpenChannelProps>;
+  const OpenChannel: React.FC<OpenChannelProps>;
   export default OpenChannel;
 }
 
 declare module '@sendbird/uikit-react/OpenChannel/context' {
-  export type OpenChannelProvider = React.FunctionComponent<OpenChannelProviderProps>;
+  export const OpenChannelProvider: React.FunctionComponent<OpenChannelProviderProps>;
   export function useOpenChannel(): OpenChannelInterface;
 }
 
 declare module '@sendbird/uikit-react/OpenChannel/components/FrozenChannelNotification' {
-  type FrozenChannelNotification = React.VoidFunctionComponent;
+  const FrozenChannelNotification: React.VoidFunctionComponent;
   export default FrozenChannelNotification;
 }
 
 declare module '@sendbird/uikit-react/OpenChannel/components/OpenChannelHeader' {
-  type OpenChannelHeader = React.VoidFunctionComponent;
+  const OpenChannelHeader: React.VoidFunctionComponent;
   export default OpenChannelHeader;
 }
 
 declare module '@sendbird/uikit-react/OpenChannel/components/OpenChannelInput' {
-  type OpenChannelInput = React.VoidFunctionComponent;
+  const OpenChannelInput: React.VoidFunctionComponent;
   export default OpenChannelInput;
 
 }
 
 declare module '@sendbird/uikit-react/OpenChannel/components/OpenChannelMessage' {
-  type OpenChannelMessage = React.FC<OpenChannelMessageProps>;
+  const OpenChannelMessage: React.FC<OpenChannelMessageProps>;
   export default OpenChannelMessage;
 
 }
 
 declare module '@sendbird/uikit-react/OpenChannel/components/OpenChannelMessageList' {
-  type OpenChannelMessageList = React.FC<OpenchannelMessageListProps>;
+  const OpenChannelMessageList: React.FC<OpenchannelMessageListProps>;
   export default OpenChannelMessageList;
 }
 
 declare module '@sendbird/uikit-react/OpenChannel/components/OpenChannelUI' {
-  type OpenChannelUI = React.FC<OpenChannelUIProps>;
+  const OpenChannelUI: React.FC<OpenChannelUIProps>;
   export default OpenChannelUI;
 }
 
@@ -858,9 +888,9 @@ interface OpenChannelSettingsContextProps {
   channelUrl: string;
   children?: React.ReactNode;
   onCloseClick?(): void;
-  onBeforeUpdateChannel?(currentTitle: string, currentImg: File, data: string): Sendbird.OpenChannelParams;
-  onChannelModified?(channel: Sendbird.OpenChannel): void;
-  onDeleteChannel?(channel: Sendbird.OpenChannel): void;
+  onBeforeUpdateChannel?(currentTitle: string, currentImg: File, data: string): SendBird.OpenChannelParams;
+  onChannelModified?(channel: SendBird.OpenChannel): void;
+  onDeleteChannel?(channel: SendBird.OpenChannel): void;
   disableUserProfile?: boolean;
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode;
 }
@@ -875,8 +905,8 @@ interface OpenChannelSettingsProps extends OpenChannelSettingsContextProps, Open
 
 interface OpenChannelSettingsContextType extends OpenChannelSettingsContextProps {
   channelUrl: string;
-  channel?: Sendbird.OpenChannel;
-  setChannel?: React.Dispatch<React.SetStateAction<Sendbird.OpenChannel>>;
+  channel?: SendBird.OpenChannel;
+  setChannel?: React.Dispatch<React.SetStateAction<SendBird.OpenChannel>>;
 }
 
 interface OperatorUIProps {
@@ -888,36 +918,36 @@ interface OpenChannelEditDetailsProps {
 }
 
 declare module '@sendbird/uikit-react/OpenChannelSettings' {
-  type OpenChannelSettings = React.FC<OpenChannelSettingsProps>;
+  const OpenChannelSettings: React.FC<OpenChannelSettingsProps>;
   export default OpenChannelSettings;
 }
 
 declare module '@sendbird/uikit-react/OpenChannelSettings/context' {
-  export type useOpenChannelSettings = () => OpenChannelSettingsContextType;
-  export type OpenChannelSettingsProvider = React.FC<OpenChannelSettingsContextProps>;
+  export const useOpenChannelSettings: () => OpenChannelSettingsContextType;
+  export const OpenChannelSettingsProvider: React.FC<OpenChannelSettingsContextProps>;
 }
 
 declare module '@sendbird/uikit-react/OpenChannelSettings/components/EditDetailsModal' {
-  type EditDetailsModal = React.FC<OpenChannelEditDetailsProps>;
+  const EditDetailsModal: React.FC<OpenChannelEditDetailsProps>;
   export default EditDetailsModal;
 }
 
 declare module '@sendbird/uikit-react/OpenChannelSettings/components/OpenChannelSettingsUI' {
-  type OpenChannelSettingsUI = React.FC<OpenChannelSettingsUIProps>;
+  const OpenChannelSettingsUI: React.FC<OpenChannelSettingsUIProps>;
   export default OpenChannelSettingsUI;
 }
 
 declare module '@sendbird/uikit-react/OpenChannelSettings/components/OperatorUI' {
-  type OperatorUI = React.FC<OperatorUIProps>;
+  const OperatorUI: React.FC<OperatorUIProps>;
   export default OperatorUI;
 }
 
 declare module '@sendbird/uikit-react/OpenChannelSettings/components/ParticipantUI' {
-  type ParticipantUI = React.VoidFunctionComponent;
+  const ParticipantUI: React.VoidFunctionComponent;
   export default ParticipantUI;
 }
 
-export interface MessageSearchProviderProps {
+interface MessageSearchProviderProps {
   channelUrl: string;
   children?: React.ReactNode;
   searchString?: string;
@@ -972,34 +1002,34 @@ interface MessageSearchUIProps {
 interface MessageSearchProps extends MessageSearchUIProps, MessageSearchProviderProps {}
 
 declare module '@sendbird/uikit-react/MessageSearch' {
-  type MessageSearch = React.FC<MessageSearchProps>;
+  const MessageSearch: React.FC<MessageSearchProps>;
   export default MessageSearch;
 }
 
 declare module '@sendbird/uikit-react/MessageSearch/context' {
-  export type useMessageSearch = () => MessageSearchProviderInterface;
-  export type MessageSearchProvider = React.FC<MessageSearchProviderProps>;
+  export const useMessageSearch: () => MessageSearchProviderInterface;
+  export const MessageSearchProvider: React.FC<MessageSearchProviderProps>;
 }
 
 declare module '@sendbird/uikit-react/MessageSearch/components/MessageSearchUI' {
-  type MessageSearchUI = React.FC<MessageSearchUIProps>;
+  const MessageSearchUI: React.FC<MessageSearchUIProps>;
   export default MessageSearchUI;
 }
 
 interface CreateChannelProviderProps {
   children?: React.ReactNode;
-  onCreateChannel(channel: Sendbird.GroupChannel): void;
-  onBeforeCreateChannel?(users: Array<string>): Sendbird.GroupChannelParams;
+  onCreateChannel(channel: SendBird.GroupChannel): void;
+  onBeforeCreateChannel?(users: Array<string>): SendBird.GroupChannelParams;
   userListQuery?(): UserListQuery;
 }
 
 
 interface CreateChannelContextInterface {
-  onBeforeCreateChannel?(users: Array<string>): Sendbird.GroupChannelParams;
-  createChannel: (channelParams: Sendbird.GroupChannelParams) => Promise<Sendbird.GroupChannel>;
-  sdk: Sendbird.SendBirdInstance;
+  onBeforeCreateChannel?(users: Array<string>): SendBird.GroupChannelParams;
+  createChannel: (channelParams: SendBird.GroupChannelParams) => Promise<SendBird.GroupChannel>;
+  sdk: SendBird.SendBirdInstance;
   userListQuery?(): UserListQuery;
-  onCreateChannel?(channel: Sendbird.GroupChannel): void;
+  onCreateChannel?(channel: SendBird.GroupChannel): void;
   step: number,
   setStep: React.Dispatch<React.SetStateAction<number>>,
   type: 'group' | 'supergroup' | 'broadcast',
@@ -1022,27 +1052,27 @@ interface SelectChannelTypeProps {
 }
 
 declare module '@sendbird/uikit-react/CreateChannel' {
-  type CreateChannel = React.FC<CreateChannelProps>;
+  const CreateChannel: React.FC<CreateChannelProps>;
   export default CreateChannel;
 }
 
 declare module '@sendbird/uikit-react/CreateChannel/context' {
-  export type CreateChannelProvider = React.FC<CreateChannelProviderProps>;
+  export const CreateChannelProvider: React.FC<CreateChannelProviderProps>;
   export function useCreateChannelContext (): CreateChannelContextInterface;
 }
 
 declare module '@sendbird/uikit-react/CreateChannel/components/CreateChannelUI' {
-  type CreateChannelUI = React.FC<CreateChannelUIProps>;
+  const CreateChannelUI: React.FC<CreateChannelUIProps>;
   export default CreateChannelUI;
 }
 
 declare module '@sendbird/uikit-react/CreateChannel/components/InviteMembers' {
-  type InviteMembers = React.FC<InviteMembersProps>;
+  const InviteMembers: React.FC<InviteMembersProps>;
   export default InviteMembers;
 }
 
 declare module '@sendbird/uikit-react/CreateChannel/components/SelectChannelType' {
-  type SelectChannelType = React.FC<SelectChannelTypeProps>;
+  const SelectChannelType: React.FC<SelectChannelTypeProps>;
   export default SelectChannelType;
 }
 
@@ -1050,27 +1080,27 @@ interface EditUserProfileProps {
   children?: React.ReactNode;
   onCancel?(): void;
   onThemeChange?(theme: string): void;
-  onEditProfile?(updatedUser: Sendbird.User): void;
+  onEditProfile?(updatedUser: SendBird.User): void;
 }
 
 interface EditUserProfileProviderInterface {
   onCancel?(): void;
   onThemeChange?(theme: string): void;
-  onEditProfile?(updatedUser: Sendbird.User): void;
+  onEditProfile?(updatedUser: SendBird.User): void;
 }
 
 declare module '@sendbird/uikit-react/EditUserProfile' {
-  type EditProfile = React.FC<EditUserProfileProps>;
+  const EditProfile: React.FC<EditUserProfileProps>;
   export default EditProfile;
 }
 
 declare module '@sendbird/uikit-react/EditUserProfile/context' {
-  export type EditUserProfileProvider = React.FC<EditUserProfileProps>;
+  export const EditUserProfileProvider: React.FC<EditUserProfileProps>;
   export function useEditUserProfileProvider (): EditUserProfileProviderInterface;
 }
 
 declare module '@sendbird/uikit-react/EditUserProfile/components/EditUserProfileUI' {
-  type EditUserProfileUI = React.VoidFunctionComponent;
+  const EditUserProfileUI: React.VoidFunctionComponent;
   export default EditUserProfileUI;
 }
 
@@ -1082,7 +1112,7 @@ declare module '@sendbird/uikit-react/ui/Accordion' {
     renderContent(): React.ReactElement;
     renderFooter?(): React.ReactElement;
   }
-  type Accordion = React.FC<AccordionProps>;
+  const Accordion: React.FC<AccordionProps>;
   export default Accordion;
 }
 
@@ -1092,7 +1122,7 @@ declare module '@sendbird/uikit-react/ui/AccordionGroup' {
     defaultOpened?: string;
     className?: string;
   }
-  type AccordionGroup = React.FC<AccordionTypeProps>;
+  const AccordionGroup: React.FC<AccordionTypeProps>;
   export default AccordionGroup;
 }
 
@@ -1101,7 +1131,7 @@ declare module '@sendbird/uikit-react/ui/AdminMessage' {
     className?: string,
     message: SendBird.AdminMessage,
   }
-  type AdminMessage = React.FC<AdminMessageProps>;
+  const AdminMessage: React.FC<AdminMessageProps>;
   export default AdminMessage;
 }
 
@@ -1113,9 +1143,9 @@ declare module '@sendbird/uikit-react/ui/Avatar' {
     src?: string | Array<string>,
     alt?: string,
     onClick?(): void,
-    customDefaultComponent?({ width, height }: { width: number | string, height: number | string }): ReactElement;
+    customDefaultComponent?({ width, height }: { width: number | string, height: number | string }): React.ReactElement;
   }
-  type Avatar = React.FC<AvatarProps>;
+  const Avatar: React.FC<AvatarProps>;
   export default Avatar;
 }
 
@@ -1124,7 +1154,7 @@ declare module '@sendbird/uikit-react/ui/MutedAvatarOverlay' {
     height?: number;
     width?: number;
   }
-  type MutedAvatarOverlay = React.FC<MutedAvatarOverlayProps>;
+  const MutedAvatarOverlay: React.FC<MutedAvatarOverlayProps>;
   export default MutedAvatarOverlay;
 }
 
@@ -1134,7 +1164,7 @@ declare module '@sendbird/uikit-react/ui/Badge' {
     maxLevel?: number,
     className?: string | string [],
   }
-  type Badge = React.FC<BadgeProps>;
+  const Badge: React.FC<BadgeProps>;
   export default Badge;
 }
 
@@ -1147,7 +1177,7 @@ declare module '@sendbird/uikit-react/ui/Button' {
     disabled?: boolean;
     onClick?: () => void;
   }
-  type Button = React.FC<ButtonProps>;
+  const Button: React.FC<ButtonProps>;
   export default Button;
 }
 
@@ -1159,7 +1189,7 @@ declare module '@sendbird/uikit-react/ui/ChannelAvatar' {
     width?: number,
     height?: number,
   }
-  type ChannelAvatar = React.FC<ChannelAvatarProps>;
+  const ChannelAvatar: React.FC<ChannelAvatarProps>;
   export default ChannelAvatar;
 }
 
@@ -1170,7 +1200,7 @@ declare module '@sendbird/uikit-react/ui/OpenChannelAvatar' {
     height?: number;
     width?: number;
   }
-  type OpenChannelAvatar = React.FC<OpenChannelAvatarProps>;
+  const OpenChannelAvatar: React.FC<OpenChannelAvatarProps>;
   export default OpenChannelAvatar;
 }
 
@@ -1184,7 +1214,7 @@ declare module '@sendbird/uikit-react/ui/ChannelPreview' {
     onClick?: () => void,
     tabIndex?: number,
   }
-  type ChannelPreview = React.FC<ChannelPreviewProps>;
+  const ChannelPreview: React.FC<ChannelPreviewProps>;
   export default ChannelPreview;
 }
 
@@ -1200,7 +1230,7 @@ declare module '@sendbird/uikit-react/ui/ChatHeader' {
     onSearchClick?: () => void;
     onActionClick?: () => void;
   }
-  type ChatHeader = React.FC<ChatHeaderProps>;
+  const ChatHeader: React.FC<ChatHeaderProps>;
   export default ChatHeader;
 }
 
@@ -1210,12 +1240,12 @@ declare module '@sendbird/uikit-react/ui/Checkbox' {
     checked?: boolean,
     onChange?: () => void,
   }
-  type Checkbox = React.FC<CheckboxProps>;
+  const Checkbox: React.FC<CheckboxProps>;
   export default Checkbox;
 }
 
 declare module '@sendbird/uikit-react/ui/ConnectionStatus' {
-  type ConnectionStatus = React.VoidFunctionComponent;
+  const ConnectionStatus: React.VoidFunctionComponent;
   export default ConnectionStatus;
 }
 
@@ -1224,7 +1254,7 @@ declare module '@sendbird/uikit-react/ui/ContextMenu' {
     menuTrigger: () => void;
     menuItems: () => void;
   }
-  type ContextMenu = React.FC<ContextMenuProps>;
+  const ContextMenu: React.FC<ContextMenuProps>;
   export default ContextMenu;
 }
 
@@ -1245,7 +1275,7 @@ declare module '@sendbird/uikit-react/ui/DateSeparator' {
     children?: string | React.ReactElement,
     separatorColor: COLORS,
   }
-  type DateSeparator = React.FC<DateSeparatorProps>;
+  const DateSeparator: React.FC<DateSeparatorProps>;
   export default DateSeparator;
 }
 
@@ -1254,13 +1284,13 @@ declare module '@sendbird/uikit-react/ui/Dropdown' {
     renderButton: () => React.ReactElement,
     renderItems: () => React.ReactElement,
   }
-  type Dropdown = React.FC<DropdownProps>;
+  const Dropdown: React.FC<DropdownProps>;
   export default Dropdown;
 }
 
 declare module '@sendbird/uikit-react/ui/EmojiReactions' {
   interface EmojiContainer {
-    emojiCategories: Array<Sendbird.EmojiCategory>;
+    emojiCategories: Array<SendBird.EmojiCategory>;
     emojiHash: string;
   }
   interface EmojiReactionsProps {
@@ -1273,7 +1303,7 @@ declare module '@sendbird/uikit-react/ui/EmojiReactions' {
     isByMe?: boolean;
     toggleReaction?: (message: SendBird.UserMessage | SendBird.FileMessage, key: string, byMe: boolean) => void;
   }
-  type EmojiReactions = React.FC<EmojiReactionsProps>;
+  const EmojiReactions: React.FC<EmojiReactionsProps>;
   export default EmojiReactions;
 
 }
@@ -1285,7 +1315,7 @@ declare module '@sendbird/uikit-react/ui/FileMessageItemBody' {
     isByMe?: boolean;
     mouseHover?: boolean;
   }
-  type FileMessageItemBody = React.FC<FileMessageItemBodyProps>;
+  const FileMessageItemBody: React.FC<FileMessageItemBodyProps>;
   export default FileMessageItemBody;
 
 }
@@ -1297,7 +1327,7 @@ declare module '@sendbird/uikit-react/ui/FileViewer' {
     onClose?: () => void,
     onDelete?: () => void,
   }
-  type FileViewerBody = React.FC<FileViewerBodyProps>;
+  const FileViewerBody: React.FC<FileViewerBodyProps>;
   export default FileViewerBody;
 }
 
@@ -1310,7 +1340,7 @@ declare module '@sendbird/uikit-react/ui/Icon' {
     height?: number,
     onClick?: () => void,
   }
-  type Icon = React.FC<IconProps>;
+  const Icon: React.FC<IconProps>;
   export default Icon;
 }
 
@@ -1325,7 +1355,7 @@ declare module '@sendbird/uikit-react/ui/IconButton' {
     onClick?: () => void,
     onBlur?: () => void,
   }
-  type IconButton = React.FC<IconButtonProps>;
+  const IconButton: React.FC<IconButtonProps>;
   export default IconButton;
 }
 
@@ -1342,7 +1372,7 @@ declare module '@sendbird/uikit-react/ui/ImageRenderer' {
     onLoad?: () => void,
     onError?: () => void,
   }
-  type ImageRenderer = React.FC<ImageRendererProps>;
+  const ImageRenderer: React.FC<ImageRendererProps>;
   export default ImageRenderer;
 }
 
@@ -1354,7 +1384,7 @@ declare module '@sendbird/uikit-react/ui/Input' {
     placeHolder?: string,
     value?: string,
   }
-  type Input = React.FC<InputProps>;
+  const Input: React.FC<InputProps>;
   export default Input;
 }
 
@@ -1365,7 +1395,7 @@ declare module '@sendbird/uikit-react/ui/Label' {
     color: string,
     children: React.ReactElement,
   }
-  type Label = React.FC<LabelProps>;
+  const Label: React.FC<LabelProps>;
   export default Label;
 }
 
@@ -1377,7 +1407,7 @@ declare module '@sendbird/uikit-react/ui/LinkLabel' {
     color?: string,
     children: React.ReactElement | string,
   }
-  type LinkLabel = React.FC<LinkLabelProps>;
+  const LinkLabel: React.FC<LinkLabelProps>;
   export default LinkLabel;
 }
 
@@ -1388,15 +1418,27 @@ declare module '@sendbird/uikit-react/ui/Loader' {
     height?: number,
     children: React.ReactElement | string,
   }
-  type Loader = React.FC<LoaderProps>;
+  const Loader: React.FC<LoaderProps>;
   export default Loader;
 }
 
+declare module '@sendbird/uikit-react/ui/MentionUserLabel' {
+  interface MentionUserLabelProps {
+    className?: string
+    children?: string;
+    isReverse?: boolean;
+    color?: string;
+    userId?: string;
+  }
+  const MentionUserLabel: React.FC<MentionUserLabelProps>;
+  export default MentionUserLabel;
+}
+
 declare module '@sendbird/uikit-react/ui/MessageContent' {
   interface MessageContentProps {
     className?: string | Array<string>;
     userId: string;
-    channel: Sendbird.GroupChannel;
+    channel: SendBird.GroupChannel;
     message: CoreMessageType;
     disabled?: boolean;
     chainTop?: boolean;
@@ -1404,16 +1446,16 @@ declare module '@sendbird/uikit-react/ui/MessageContent' {
     useReaction?: boolean;
     replyType?: ReplyType;
     nicknamesMap?: Map<string, string>;
-    emojiContainer?: Sendbird.EmojiContainer;
+    emojiContainer?: SendBird.EmojiContainer;
     scrollToMessage?: (createdAt: number, messageId: number) => void;
     showEdit?: (bool: boolean) => void;
     showRemove?: (bool: boolean) => void;
     showFileViewer?: (bool: boolean) => void;
-    resendMessage?: (message: Sendbird.UserMessage | Sendbird.FileMessage) => void;
-    toggleReaction?: (message: Sendbird.UserMessage | Sendbird.FileMessage, reactionKey: string, isReacted: boolean) => void;
-    setQuoteMessage?: (message: Sendbird.UserMessage | Sendbird.FileMessage) => void;
+    resendMessage?: (message: SendBird.UserMessage | SendBird.FileMessage) => void;
+    toggleReaction?: (message: SendBird.UserMessage | SendBird.FileMessage, reactionKey: string, isReacted: boolean) => void;
+    setQuoteMessage?: (message: SendBird.UserMessage | SendBird.FileMessage) => void;
   }
-  type MessageContent = React.FC<MessageContentProps>;
+  const MessageContent: React.FC<MessageContentProps>;
   export default MessageContent;
 }
 
@@ -1421,6 +1463,7 @@ declare module '@sendbird/uikit-react/ui/MessageInput' {
   interface MessageInputProps {
     className?: string[],
     isEdit?: boolean,
+    isMentionEnabled?: boolean;
     disabled?: boolean,
     value?: string,
     name: string,
@@ -1431,27 +1474,32 @@ declare module '@sendbird/uikit-react/ui/MessageInput' {
     onCancelEdit?: () => void,
     onStartTyping?: () => void,
     channelUrl: string,
+    mentionSelectedUser?: Array<SendBird.User>,
+    onUserMentioned?: (user: SendBird.User) => void,
+    onMentionStringChange?: (str: string) => void,
+    onMentionedUserIdsUpdated?: (userIds: Array<string>) => void,
+    onKeyUp?: (e: React.KeyboardEvent<HTMLDivElement>) => void,
+    onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void,
   }
-  type MessageInput = React.FC<MessageInputProps>;
+  const MessageInput: React.FC<MessageInputProps>;
   export default MessageInput;
-
 }
 
 declare module '@sendbird/uikit-react/ui/MessageItemMenu' {
   interface MessageItemMenuProps {
     className?: string | Array<string>;
-    message: Sendbird.UserMessage | Sendbird.FileMessage;
-    channel: Sendbird.GroupChannel | Sendbird.OpenChannel;
+    message: SendBird.UserMessage | SendBird.FileMessage;
+    channel: SendBird.GroupChannel | SendBird.OpenChannel;
     isByMe?: boolean;
     disabled?: boolean;
     replyType?: ReplyType;
     showEdit?: (bool: boolean) => void;
     showRemove?: (bool: boolean) => void;
-    resendMessage?: (message: Sendbird.UserMessage | Sendbird.FileMessage) => void;
-    setQuoteMessage?: (message: Sendbird.UserMessage | Sendbird.FileMessage) => void;
+    resendMessage?: (message: SendBird.UserMessage | SendBird.FileMessage) => void;
+    setQuoteMessage?: (message: SendBird.UserMessage | SendBird.FileMessage) => void;
     setSupposedHover?: (bool: boolean) => void;
   }
-  type MessageItemMenu = React.FC<MessageItemMenuProps>;
+  const MessageItemMenu: React.FC<MessageItemMenuProps>;
   export default MessageItemMenu;
 
 }
@@ -1459,14 +1507,14 @@ declare module '@sendbird/uikit-react/ui/MessageItemMenu' {
 declare module '@sendbird/uikit-react/ui/MessageItemReactionMenu' {
   interface MessageItemReactionMenuProps {
     className?: string | Array<string>;
-    message: Sendbird.UserMessage | Sendbird.FileMessage;
+    message: SendBird.UserMessage | SendBird.FileMessage;
     userId: string;
     spaceFromTrigger?: Record<string, unknown>;
-    emojiContainer?: Sendbird.EmojiContainer;
-    toggleReaction?: (message: Sendbird.UserMessage | Sendbird.FileMessage, reactionKey: string, isReacted: boolean) => void;
+    emojiContainer?: SendBird.EmojiContainer;
+    toggleReaction?: (message: SendBird.UserMessage | SendBird.FileMessage, reactionKey: string, isReacted: boolean) => void;
     setSupposedHover?: (bool: boolean) => void;
   }
-  type MessageItemReactionMenu = React.FC<MessageItemReactionMenuProps>;
+  const MessageItemReactionMenu: React.FC<MessageItemReactionMenuProps>;
   export default MessageItemReactionMenu;
 }
 
@@ -1477,7 +1525,7 @@ declare module '@sendbird/uikit-react/ui/MessageSearchFileItem' {
     selected?: boolean;
     onClick?: (message: ClientFileMessage) => void;
   }
-  type MessageSearchFileItem = React.FC<MessageSearchFileItemProps>;
+  const MessageSearchFileItem: React.FC<MessageSearchFileItemProps>;
   export default MessageSearchFileItem;
 
 }
@@ -1489,7 +1537,7 @@ declare module '@sendbird/uikit-react/ui/MessageSearchItem' {
     selected?: boolean;
     onClick?: (message: ClientMessage) => void;
     }
-  type MessageSearchItem = React.FC<MessageSearchItemProps>;
+  const MessageSearchItem: React.FC<MessageSearchItemProps>;
   export default MessageSearchItem;
 
 }
@@ -1497,10 +1545,10 @@ declare module '@sendbird/uikit-react/ui/MessageSearchItem' {
 declare module '@sendbird/uikit-react/ui/MessageStatus' {
   interface MessageStatusProps {
     className?: string;
-    message: Sendbird.UserMessage | Sendbird.FileMessage;
-    channel: Sendbird.GroupChannel;
+    message: SendBird.UserMessage | SendBird.FileMessage;
+    channel: SendBird.GroupChannel;
   }
-  type MessageStatus = React.FC<MessageStatusProps>;
+  const MessageStatus: React.FC<MessageStatusProps>;
   export default MessageStatus;
 
 }
@@ -1515,21 +1563,19 @@ declare module '@sendbird/uikit-react/ui/Modal' {
     type?: string,
     children: React.ReactElement | string,
   }
-  type Modal = React.FC<ModalProps>;
+  const Modal: React.FC<ModalProps>;
   export default Modal;
-
 }
 
 declare module '@sendbird/uikit-react/ui/OGMessageItemBody' {
   interface OGMessageItemBodyProps {
     className?: string | Array<string>;
-    message: Sendbird.UserMessage;
+    message: SendBird.UserMessage;
     isByMe?: boolean;
     mouseHover?: boolean;
   }
-  type OGMessageItemBody = React.FC<OGMessageItemBodyProps>;
+  const OGMessageItemBody: React.FC<OGMessageItemBodyProps>;
   export default OGMessageItemBody;
-
 }
 
 declare module '@sendbird/uikit-react/ui/OpenChannelAdminMessage' {
@@ -1537,7 +1583,7 @@ declare module '@sendbird/uikit-react/ui/OpenChannelAdminMessage' {
     className?: string | Array<string>;
     message: ClientAdminMessage;
   }
-  type OpenChannelAdminMessage = React.FC<OpenChannelAdminMessageProps>;
+  const OpenChannelAdminMessage: React.FC<OpenChannelAdminMessageProps>;
   export default OpenChannelAdminMessage;
 }
 
@@ -1549,9 +1595,8 @@ declare module '@sendbird/uikit-react/ui/OpenChannelConversationHeader' {
     amIOperator?: boolean;
     onActionClick?(): void;
   }
-  type OpenChannelConversationHeader = React.FC<OpenChannelConversationHeaderProps>;
+  const OpenChannelConversationHeader: React.FC<OpenChannelConversationHeaderProps>;
   export default OpenChannelConversationHeader;
-
 }
 
 declare module '@sendbird/uikit-react/ui/OpenChannelFileMessage' {
@@ -1565,9 +1610,8 @@ declare module '@sendbird/uikit-react/ui/OpenChannelFileMessage' {
     showRemove(bool: boolean): void;
     resendMessage(message: ClientFileMessage): void;
   }
-  type OpenChannelFileMessage = React.FC<OpenChannelFileMessageProps>;
+  const OpenChannelFileMessage: React.FC<OpenChannelFileMessageProps>;
   export default OpenChannelFileMessage;
-
 }
 
 declare module '@sendbird/uikit-react/ui/OpenChannelOGMessage' {
@@ -1582,9 +1626,8 @@ declare module '@sendbird/uikit-react/ui/OpenChannelOGMessage' {
     chainBottom?: boolean;
     userId: string;
   }
-  type OOpenChannelOGMessage = React.FC<OOpenChannelOGMessageProps>;
+  const OOpenChannelOGMessage: React.FC<OOpenChannelOGMessageProps>;
   export default OOpenChannelOGMessage;
-
 }
 
 declare module '@sendbird/uikit-react/ui/OpenChannelThumbnailMessage' {
@@ -1599,9 +1642,8 @@ declare module '@sendbird/uikit-react/ui/OpenChannelThumbnailMessage' {
     showRemove(bool: boolean): void,
     resendMessage(message: ClientFileMessage): void;
   }
-  type OpenChannelThumbnailMessage = React.FC<OpenChannelThumbnailMessageProps>;
+  const OpenChannelThumbnailMessage: React.FC<OpenChannelThumbnailMessageProps>;
   export default OpenChannelThumbnailMessage;
-
 }
 
 declare module '@sendbird/uikit-react/ui/OpenChannelUserMessage' {
@@ -1616,9 +1658,8 @@ declare module '@sendbird/uikit-react/ui/OpenChannelUserMessage' {
     chainTop?: boolean;
     chainBottom?: boolean;
   }
-  type OpenChannelUserMessage = React.FC<OpenChannelUserMessageProps>;
+  const OpenChannelUserMessage: React.FC<OpenChannelUserMessageProps>;
   export default OpenChannelUserMessage;
-
 }
 
 declare module '@sendbird/uikit-react/ui/PlaceHolder' {
@@ -1628,22 +1669,20 @@ declare module '@sendbird/uikit-react/ui/PlaceHolder' {
     retryToConnect?: () => void,
     searchInString?: string,
   }
-  type PlaceHolder = React.FC<PlaceHolderProps>;
+  const PlaceHolder: React.FC<PlaceHolderProps>;
   export default PlaceHolder;
-
 }
 
 declare module '@sendbird/uikit-react/ui/QuoteMessage' {
   interface QuoteMessageProps {
-    message?: Sendbird.UserMessage | Sendbird.FileMessage;
+    message?: SendBird.UserMessage | SendBird.FileMessage;
     userId?: string;
     isByMe?: boolean;
     className?: string | Array<string>;
     onClick?: () => void;
   }
-  type QuoteMessage = React.FC<QuoteMessageProps>;
+  const QuoteMessage: React.FC<QuoteMessageProps>;
   export default QuoteMessage;
-
 }
 
 declare module '@sendbird/uikit-react/ui/QuoteMessageInput' {
@@ -1652,9 +1691,8 @@ declare module '@sendbird/uikit-react/ui/QuoteMessageInput' {
     replyingMessage: CoreMessageType;
     onClose?: (message: CoreMessageType) => void;
   }
-  type QuoteMessageInput = React.FC<QuoteMessageInputProps>;
+  const QuoteMessageInput: React.FC<QuoteMessageInputProps>;
   export default QuoteMessageInput;
-
 }
 
 declare module '@sendbird/uikit-react/ui/ReactionBadge' {
@@ -1666,9 +1704,8 @@ declare module '@sendbird/uikit-react/ui/ReactionBadge' {
     isAdd?: boolean,
     onClick?: () => void,
   }
-  type ReactionBadge = React.FC<ReactionBadgeProps>;
+  const ReactionBadge: React.FC<ReactionBadgeProps>;
   export default ReactionBadge;
-
 }
 
 declare module '@sendbird/uikit-react/ui/ReactionButton' {
@@ -1680,9 +1717,8 @@ declare module '@sendbird/uikit-react/ui/ReactionButton' {
     onClick?: () => void,
     children?: React.ReactElement;
   }
-  type ReactionButton = React.FC<ReactionButtonProps>;
+  const ReactionButton: React.FC<ReactionButtonProps>;
   export default ReactionButton;
-
 }
 
 declare module '@sendbird/uikit-react/ui/SortByRow' {
@@ -1693,9 +1729,8 @@ declare module '@sendbird/uikit-react/ui/SortByRow' {
     children?: React.ReactElement;
     className?: string | Array<string>;
   }
-  type SortByRow = React.FC<SortByRowProps>;
+  const SortByRow: React.FC<SortByRowProps>;
   export default SortByRow;
-
 }
 
 declare module '@sendbird/uikit-react/ui/TextButton' {
@@ -1707,34 +1742,31 @@ declare module '@sendbird/uikit-react/ui/TextButton' {
     notUnderline?: boolean,
     onClick?: () => void,
   }
-  type TextButton = React.FC<TextButtonProps>;
+  const TextButton: React.FC<TextButtonProps>;
   export default TextButton;
-
 }
 
 declare module '@sendbird/uikit-react/ui/TextMessageItemBody' {
   interface TextMessageItemBodyProps {
     className?: string | Array<string>;
-    message: Sendbird.UserMessage;
+    message: SendBird.UserMessage;
     isByMe?: boolean;
     mouseHover?: boolean;
   }
-  type TextMessageItemBody = React.FC<TextMessageItemBodyProps>;
+  const TextMessageItemBody: React.FC<TextMessageItemBodyProps>;
   export default TextMessageItemBody;
-
 }
 
 declare module '@sendbird/uikit-react/ui/ThumbnailMessageItemBody' {
   interface ThumbnailMessageItemBodyProps {
     className?: string | Array<string>;
-    message: Sendbird.FileMessage;
+    message: SendBird.FileMessage;
     isByMe?: boolean;
     mouseHover?: boolean;
     showFileViewer?: (bool: boolean) => void;
   }
-  type ThumbnailMessageItemBody = React.FC<ThumbnailMessageItemBodyProps>;
+  const ThumbnailMessageItemBody: React.FC<ThumbnailMessageItemBodyProps>;
   export default ThumbnailMessageItemBody;
-
 }
 
 declare module '@sendbird/uikit-react/ui/Tooltip' {
@@ -1742,9 +1774,8 @@ declare module '@sendbird/uikit-react/ui/Tooltip' {
     children?: React.ReactElement;
     className?: string | Array<string>;
   }
-  type Tooltip = React.FC<TooltipProps>;
+  const Tooltip: React.FC<TooltipProps>;
   export default Tooltip;
-
 }
 
 declare module '@sendbird/uikit-react/ui/TooltipWrapper' {
@@ -1753,9 +1784,8 @@ declare module '@sendbird/uikit-react/ui/TooltipWrapper' {
     children?: React.ReactElement;
     className?: string | Array<string>;
   }
-  type OpenChannelFileMessage = React.FC<OpenChannelFileMessageProps>;
+  const OpenChannelFileMessage: React.FC<OpenChannelFileMessageProps>;
   export default OpenChannelFileMessage;
-
 }
 
 declare module '@sendbird/uikit-react/ui/UnknownMessageItemBody' {
@@ -1765,15 +1795,14 @@ declare module '@sendbird/uikit-react/ui/UnknownMessageItemBody' {
     message: CoreMessageType;
     mouseHover?: boolean;
   }
-  type UnknownMessageItemBody = React.FC<UnknownMessageItemBodyProps>;
+  const UnknownMessageItemBody: React.FC<UnknownMessageItemBodyProps>;
   export default UnknownMessageItemBody;
-
 }
 
 declare module '@sendbird/uikit-react/ui/UserListItem' {
   interface UserListItemProps {
     className?: string | Array<string>;
-    user?: Sendbird.User,
+    user?: SendBird.User,
     checkBox?: boolean,
     disableMessaging?: boolean,
     currentUser?: string,
@@ -1781,21 +1810,20 @@ declare module '@sendbird/uikit-react/ui/UserListItem' {
     onChange?: () => void,
     action?: () => React.ReactElement,
   }
-  type UserListItem = React.FC<UserListItemProps>;
+  const UserListItem: React.FC<UserListItemProps>;
   export default UserListItem;
-
 }
 
 declare module '@sendbird/uikit-react/ui/UserProfile' {
   interface UserProfileProps {
-    user: Sendbird.User;
+    user: SendBird.User;
     currentUserId?: string;
-    sdk?: Sendbird.SendBirdInstance;
+    sdk?: SendBird.SendBirdInstance;
     logger?: Logger;
     disableMessaging?: boolean;
-    createChannel?(params: Sendbird.GroupChannelParams): Promise<Sendbird.GroupChannel>;
+    createChannel?(params: SendBird.GroupChannelParams): Promise<SendBird.GroupChannel>;
     onSuccess?(): void;
   }
-  type UserProfile = React.FC<UserProfileProps>;
+  const UserProfile: React.FC<UserProfileProps>;
   export default UserProfile;
 }