@sendbird/uikit-react 3.6.7 → 3.6.8-rc.0

package/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Type Definitions for @sendbird/uikit-react@3.6.7
+ * Type Definitions for @sendbird/uikit-react@3.6.8-rc.0
  * homepage: https://sendbird.com/
  * git: https://github.com/sendbird/sendbird-uikit-react
 */
@@ -33,6 +33,7 @@ declare module "SendbirdUIKitGlobal" {
     MessageListParams,
     MessageSearchQuery,
     MessageSearchQueryParams,
+    MultipleFilesMessage,
     UserMessage,
     UserMessageCreateParams,
     UserMessageUpdateParams,
@@ -45,12 +46,12 @@ declare module "SendbirdUIKitGlobal" {
   } from '@sendbird/chat/openChannel';
 
   export type PartialDeep<T> = T extends object
-  ? T extends (...args: any[]) => any
+    ? T extends (...args: any[]) => any
     ? T
     : {
-        [P in keyof T]?: PartialDeep<T[P]>;
-      }
-  : T;
+      [P in keyof T]?: PartialDeep<T[P]>;
+    }
+    : T;
 
   export interface CommonUIKitConfigProps {
     replyType?: 'NONE' | 'QUOTE_REPLY' | 'THREAD';
@@ -95,6 +96,8 @@ declare module "SendbirdUIKitGlobal" {
     useReaction?: boolean;
     useMessageGrouping?: boolean;
     isVoiceMessageEnabled?: boolean;
+    // UIKIT-4298
+    // uikitMultipleFilesMessageLimit?: number;
     voiceRecord?: {
       maxRecordingTime?: number,
       minRecordingTime?: number,
@@ -128,11 +131,11 @@ declare module "SendbirdUIKitGlobal" {
     getQueue: () => GroupChannel[];
   };
 
-  export type MessageHandler = (message: UserMessage | FileMessage) => void;
+  export type MessageHandler = (message: SendableMessageType) => void;
 
   export interface UikitMessageHandler {
     onPending: (handler: MessageHandler) => UikitMessageHandler;
-    onFailed: (handler: FailedMessageHandler) => UikitMessageHandler;
+    onFailed: (handler: FailedMessageHandler<SendableMessageType>) => UikitMessageHandler;
     onSucceeded: (handler: MessageHandler) => UikitMessageHandler;
   }
 
@@ -169,7 +172,7 @@ declare module "SendbirdUIKitGlobal" {
     chainBottom: boolean;
   }
   export interface RenderCustomSeparatorProps {
-    message: AdminMessage | UserMessage | FileMessage;
+    message: CoreMessageType;
   }
 
   export interface ClientUserMessage extends UserMessage, ClientMessage { }
@@ -222,7 +225,7 @@ declare module "SendbirdUIKitGlobal" {
   // ) => Promise<FileMessage>;
   export type GetDeleteMessage = (
     channel: GroupChannel | OpenChannel,
-    message: UserMessage | FileMessage
+    message: SendableMessageType
   ) => Promise<void>;
   export type GetResendUserMessage = (
     channel: GroupChannel | OpenChannel,
@@ -285,6 +288,8 @@ declare module "SendbirdUIKitGlobal" {
       resizingWidth?: number | string,
       resizingHeight?: number | string,
     };
+    // UIKIT-4298
+    // uikitMultipleFilesMessageLimit?: number;
     isMentionEnabled?: boolean;
     isVoiceMessageEnabled?: boolean;
     voiceRecord?: {
@@ -316,6 +321,8 @@ declare module "SendbirdUIKitGlobal" {
     theme: string;
     pubSub: any;
     logger: Logger;
+    // UIKIT-4298
+    // uikitMultipleFilesMessageLimit?: number;
     setCurrenttheme: (theme: string) => void;
     userListQuery?(): UserListQuery;
     imageCompression?: {
@@ -571,8 +578,8 @@ declare module "SendbirdUIKitGlobal" {
     animatedMessage?: number;
     highlightedMessage?: number;
     startingPoint?: number;
-    onBeforeSendUserMessage?(text: string, quotedMessage?: UserMessage | FileMessage): UserMessageCreateParams;
-    onBeforeSendFileMessage?(file: File, quotedMessage?: UserMessage | FileMessage): FileMessageCreateParams;
+    onBeforeSendUserMessage?(text: string, quotedMessage?: SendableMessageType): UserMessageCreateParams;
+    onBeforeSendFileMessage?(file: File, quotedMessage?: SendableMessageType): FileMessageCreateParams;
     onBeforeUpdateUserMessage?(text: string): UserMessageUpdateParams;
     onChatHeaderActionClick?(event: React.MouseEvent<HTMLElement>): void;
     onSearchClick?(): void;
@@ -584,8 +591,8 @@ declare module "SendbirdUIKitGlobal" {
     renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
     disableUserProfile?: boolean;
     disableMarkAsRead?: boolean;
-    onReplyInThread?: (props: { message: UserMessage | FileMessage }) => void;
-    onQuoteMessageClick?: (props: { message: UserMessage | FileMessage }) => void;
+    onReplyInThread?: (props: { message: SendableMessageType }) => void;
+    onQuoteMessageClick?: (props: { message: SendableMessageType }) => void;
     onMessageAnimated?: () => void;
     onMessageHighlighted?: () => void;
     scrollBehavior?: 'smooth' | 'auto';
@@ -607,7 +614,8 @@ declare module "SendbirdUIKitGlobal" {
     renderSendMessageIcon?: () => React.ReactElement;
   }
 
-  export type CoreMessageType = AdminMessage | UserMessage | FileMessage;
+  export type CoreMessageType = AdminMessage | UserMessage | FileMessage | MultipleFilesMessage;
+  export type SendableMessageType = UserMessage | FileMessage | MultipleFilesMessage;
 
   export interface MessageStoreInterface {
     allMessages: CoreMessageType[];
@@ -628,7 +636,7 @@ declare module "SendbirdUIKitGlobal" {
     scrollToMessage?(createdAt: number, messageId: number): void;
     messageActionTypes: Record<string, string>;
     quoteMessage: CoreMessageType;
-    setQuoteMessage: React.Dispatch<React.SetStateAction<CoreMessageType>>;
+    setQuoteMessage: React.Dispatch<React.SetStateAction<SendableMessageType>>;
     initialTimeStamp: number;
     setInitialTimeStamp: React.Dispatch<React.SetStateAction<number>>;
     animatedMessageId: number;
@@ -638,13 +646,32 @@ declare module "SendbirdUIKitGlobal" {
     setAnimatedMessageId: React.Dispatch<React.SetStateAction<number>>;
     setHighLightedMessageId: React.Dispatch<React.SetStateAction<number>>;
     messageInputRef: React.MutableRefObject<HTMLInputElement>,
-    toggleReaction(message: UserMessage | FileMessage, emojiKey: string, isReacted: boolean): void,
+    toggleReaction(message: SendableMessageType, emojiKey: string, isReacted: boolean): void,
   }
 
-  export type FileViewerProps = {
+  export type FileViewerComponentProps = {
+    // sender
+    profileUrl: string;
+    nickname: string;
+    // file
+    name: string;
+    type: string;
+    url: string;
+    // others
+    isByMe: boolean;
     onCancel: () => void;
-    message: ClientFileMessage;
-  }
+    onDelete: () => void;
+    disableDelete: boolean;
+  };
+  export type FileViewerProps = {
+    message: FileMessage | MultipleFilesMessage;
+    onClose: (e: MouseEvent) => void;
+    isByMe?: boolean;
+    onDelete?: (e: MouseEvent) => void;
+    currentIndex?: number;
+    onClickLeft?: () => void;
+    onClickRight?: () => void;
+  };
 
   export type MessageUIProps = {
     message: EveryMessage;
@@ -947,7 +974,7 @@ declare module "SendbirdUIKitGlobal" {
 
   export type MessageSearchScrollCallbackReturn = (
     callback: (
-      messages: Array<UserMessage | FileMessage | AdminMessage>,
+      messages: Array<SendableMessageType>,
       /* eslint-disable @typescript-eslint/no-explicit-any*/
       error: any,
     ) => void
@@ -1033,24 +1060,24 @@ declare module "SendbirdUIKitGlobal" {
     fetchNextThreads: (callback?: (messages?: Array<BaseMessage>) => void) => void;
     toggleReaction: (message, key, isReacted) => void;
     sendMessage: (props: {
-      message: UserMessage,
-      quoteMessage?: UserMessage | FileMessage,
+      message: string,
+      quoteMessage?: SendableMessageType,
       mentionTemplate?: string,
       mentionedUsers?: Array<User>,
     }) => void;
-    sendFileMessage: (file: File, quoteMessage: UserMessage | FileMessage) => void;
-    resendMessage: (failedMessage: UserMessage | FileMessage) => void;
+    sendFileMessage: (file: File, quoteMessage: SendableMessageType) => void;
+    resendMessage: (failedMessage: SendableMessageType) => void;
     updateMessage: (props, callback?: () => void) => void;
-    deleteMessage: (message: UserMessage | FileMessage) => Promise<UserMessage | FileMessage>;
+    deleteMessage: (message: SendableMessageType) => Promise<SendableMessageType>;
     nicknamesMap: Map<string, string>;
   }
 
   export type ThreadProviderProps = {
     children?: React.ReactElement;
     channelUrl: string;
-    message: UserMessage | FileMessage;
+    message: SendableMessageType;
     onHeaderActionClick?: () => void;
-    onMoveToParentMessage?: (props: { message: UserMessage | FileMessage, channel: GroupChannel }) => void;
+    onMoveToParentMessage?: (props: { message: SendableMessageType, channel: GroupChannel }) => void;
     disableUserProfile?: boolean;
     renderUserProfile?: (props: { user: User, close: () => void }) => React.ReactElement;
   }
@@ -1058,7 +1085,7 @@ declare module "SendbirdUIKitGlobal" {
   export interface ThreadContextInitialState {
     currentChannel: GroupChannel;
     allThreadMessages: Array<BaseMessage>;
-    parentMessage: UserMessage | FileMessage;
+    parentMessage: SendableMessageType;
     channelState: ChannelStateTypes;
     parentMessageState: ParentMessageStateTypes;
     threadListState: ThreadListStateTypes;
@@ -1074,7 +1101,7 @@ declare module "SendbirdUIKitGlobal" {
     renderHeader?: () => React.ReactElement;
     renderParentMessageInfo?: () => React.ReactElement;
     renderMessage?: (props: {
-      message: UserMessage | FileMessage,
+      message: SendableMessageType,
       chainTop: boolean,
       chainBottom: boolean,
       hasSeparator: boolean,
@@ -1103,30 +1130,30 @@ declare module "SendbirdUIKitGlobal" {
 
   export interface ParentMessageInfoItemProps {
     className?: string;
-    message: UserMessage | FileMessage;
+    message: SendableMessageType;
     showFileViewer?: (bool: boolean) => void;
   }
 
   export interface ThreadListProps {
     className?: string;
-    allThreadMessages: Array<UserMessage | FileMessage | BaseMessage>;
+    allThreadMessages: Array<SendableMessageType>;
     renderMessage?: (props: {
-      message: UserMessage | FileMessage,
+      message: SendableMessageType,
       chainTop: boolean,
       chainBottom: boolean,
       hasSeparator: boolean,
     }) => React.ReactElement;
-    renderCustomSeparator?: (props: { message: UserMessage | FileMessage }) => React.ReactElement;
+    renderCustomSeparator?: (props: { message: SendableMessageType }) => React.ReactElement;
     scrollRef?: React.RefObject<HTMLDivElement>;
     scrollBottom?: number;
   }
   export interface ThreadListItemProps {
     className?: string;
-    message: UserMessage | FileMessage;
+    message: SendableMessageType;
     chainTop?: boolean;
     chainBottom?: boolean;
     hasSeparator?: boolean;
-    renderCustomSeparator?: (props: { message: UserMessage | FileMessage }) => React.ReactElement;
+    renderCustomSeparator?: (props: { message: SendableMessageType }) => React.ReactElement;
     handleScroll?: () => void;
   }
 
@@ -1214,34 +1241,34 @@ declare module '@sendbird/uikit-react' {
 }
 
 declare module '@sendbird/uikit-react/App' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const App: React.FunctionComponent<SendbirdUIKitGlobal.AppProps>
+  import type { AppProps } from 'SendbirdUIKitGlobal';
+  const App: React.FunctionComponent<AppProps>
   export default App;
 }
 
 declare module '@sendbird/uikit-react/SendbirdProvider' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const SendbirdProvider: React.FunctionComponent<SendbirdUIKitGlobal.SendbirdProviderProps>;
+  import type { SendbirdProviderProps } from 'SendbirdUIKitGlobal';
+  const SendbirdProvider: React.FunctionComponent<SendbirdProviderProps>;
   export default SendbirdProvider;
 }
 
 declare module '@sendbird/uikit-react/sendbirdSelectors' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const sendBirdSelectors: SendbirdUIKitGlobal.sendbirdSelectorsInterface;
+  import type { sendbirdSelectorsInterface } from 'SendbirdUIKitGlobal';
+  const sendBirdSelectors: sendbirdSelectorsInterface;
   export default sendBirdSelectors;
 }
 
 declare module '@sendbird/uikit-react/useSendbirdStateContext' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  function useSendbirdStateContext(): SendbirdUIKitGlobal.SendBirdState;
+  import type { SendBirdState } from 'SendbirdUIKitGlobal';
+  function useSendbirdStateContext(): SendBirdState;
   export default useSendbirdStateContext;
 }
 
 declare module '@sendbird/uikit-react/withSendbird' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  import type { SendBirdState } from 'SendbirdUIKitGlobal';
   function withSendbird(
     ChildComp: React.Component | React.ElementType | React.ReactNode | React.ReactElement,
-    mapStoreToProps?: (store: SendbirdUIKitGlobal.SendBirdState) => unknown
+    mapStoreToProps?: (store: SendBirdState) => unknown
   ): (props: unknown) => React.ReactNode | React.ReactElement;
   export default withSendbird;
 }
@@ -1270,9 +1297,9 @@ declare module '@sendbird/uikit-react/handlers/UserEventHandler' {
 
 /** utils */
 declare module '@sendbird/uikit-react/utils/message/getOutgoingMessageState' {
-  import { GroupChannel } from '@sendbird/chat/groupChannel';
-  import { OpenChannel } from '@sendbird/chat/openChannel';
-  import { UserMessage, FileMessage } from '@sendbird/chat/message';
+  import type { GroupChannel } from '@sendbird/chat/groupChannel';
+  import type { OpenChannel } from '@sendbird/chat/openChannel';
+  import type { SendableMessageType } from 'SendbirdUIKitGlobal';
   export enum OutgoingMessageStates {
     NONE = 'NONE',
     PENDING = 'PENDING',
@@ -1283,7 +1310,7 @@ declare module '@sendbird/uikit-react/utils/message/getOutgoingMessageState' {
   }
   export function getOutgoingMessageState(
     channel: GroupChannel | OpenChannel,
-    message: UserMessage | FileMessage,
+    message: SendableMessageType,
   ): OutgoingMessageStates;
 }
 
@@ -1294,16 +1321,16 @@ declare module '@sendbird/uikit-react/utils/message/isVoiceMessage' {
 
 /** ChannelList */
 declare module '@sendbird/uikit-react/ChannelList' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const ChannelList: React.FunctionComponent<SendbirdUIKitGlobal.ChannelListProps>;
+  import type { ChannelListProps } from 'SendbirdUIKitGlobal';
+  const ChannelList: React.FunctionComponent<ChannelListProps>;
   export default ChannelList;
 }
 
 declare module '@sendbird/uikit-react/ChannelList/context' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  export const ChannelListProvider: React.FunctionComponent<SendbirdUIKitGlobal.ChannelListProviderProps>;
-  export function useChannelListContext(): SendbirdUIKitGlobal.ChannelListProviderInterface;
-  export function useChannelList(): SendbirdUIKitGlobal.ChannelListProviderInterface;
+  import type { ChannelListProviderProps, ChannelListProviderInterface } from 'SendbirdUIKitGlobal';
+  export const ChannelListProvider: React.FunctionComponent<ChannelListProviderProps>;
+  export function useChannelListContext(): ChannelListProviderInterface;
+  export function useChannelList(): ChannelListProviderInterface;
 }
 
 declare module '@sendbird/uikit-react/ChannelList/components/AddChannel' {
@@ -1312,39 +1339,39 @@ declare module '@sendbird/uikit-react/ChannelList/components/AddChannel' {
 }
 
 declare module '@sendbird/uikit-react/ChannelList/components/ChannelListUI' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const ChannelListUI: React.FunctionComponent<SendbirdUIKitGlobal.ChannelListUIProps>;
+  import type { ChannelListUIProps } from 'SendbirdUIKitGlobal';
+  const ChannelListUI: React.FunctionComponent<ChannelListUIProps>;
   export default ChannelListUI;
 }
 
 declare module '@sendbird/uikit-react/ChannelList/components/ChannelListHeader' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const ChannelListHeader: React.FunctionComponent<SendbirdUIKitGlobal.ChannelListHeaderInterface>;
+  import { ChannelListHeaderInterface } from 'SendbirdUIKitGlobal';
+  const ChannelListHeader: React.FunctionComponent<ChannelListHeaderInterface>;
   export default ChannelListHeader;
 }
 
 declare module '@sendbird/uikit-react/ChannelList/components/ChannelPreview' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const ChannelPreview: React.FunctionComponent<SendbirdUIKitGlobal.ChannelPreviewInterface>;
+  import type { ChannelPreviewInterface } from 'SendbirdUIKitGlobal';
+  const ChannelPreview: React.FunctionComponent<ChannelPreviewInterface>;
   export default ChannelPreview;
 }
 
 declare module '@sendbird/uikit-react/ChannelList/components/ChannelPreviewAction' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const ChannelPreviewAction: React.FunctionComponent<SendbirdUIKitGlobal.ChannelPreviewActionInterface>;
+  import type { ChannelPreviewActionInterface } from 'SendbirdUIKitGlobal';
+  const ChannelPreviewAction: React.FunctionComponent<ChannelPreviewActionInterface>;
   export default ChannelPreviewAction;
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const ChannelSettings: React.FunctionComponent<SendbirdUIKitGlobal.ChannelSettingsProps>;
+  import type { ChannelSettingsProps } from 'SendbirdUIKitGlobal';
+  const ChannelSettings: React.FunctionComponent<ChannelSettingsProps>;
   export default ChannelSettings;
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings/context' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  export const ChannelSettingsProvider: React.FC<SendbirdUIKitGlobal.ChannelSettingsContextProps>;
-  export const useChannelSettingsContext: () => SendbirdUIKitGlobal.ChannelSettingsProviderInterface;
+  import type { ChannelSettingsContextProps, ChannelSettingsProviderInterface } from 'SendbirdUIKitGlobal';
+  export const ChannelSettingsProvider: React.FC<ChannelSettingsContextProps>;
+  export const useChannelSettingsContext: () => ChannelSettingsProviderInterface;
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings/components/ModerationPanel' {
@@ -1358,26 +1385,26 @@ declare module '@sendbird/uikit-react/ChannelSettings/components/ChannelProfile'
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings/components/ChannelSettingsUI' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const ChannelSettingsUI: React.FC<SendbirdUIKitGlobal.ChannelSettingsUIProps>;
+  import type { ChannelSettingsUIProps } from 'SendbirdUIKitGlobal';
+  const ChannelSettingsUI: React.FC<ChannelSettingsUIProps>;
   export default ChannelSettingsUI;
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings/components/EditDetailsModal' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const EditDetailsModal: React.FC<SendbirdUIKitGlobal.ChannelSettingsEditDetailsProps>;
+  import type { ChannelSettingsEditDetailsProps } from 'SendbirdUIKitGlobal';
+  const EditDetailsModal: React.FC<ChannelSettingsEditDetailsProps>;
   export default EditDetailsModal;
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings/components/LeaveChannel' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const LeaveChannel: React.FC<SendbirdUIKitGlobal.LeaveChannelProps>;
+  import type { LeaveChannelProps } from 'SendbirdUIKitGlobal';
+  const LeaveChannel: React.FC<LeaveChannelProps>;
   export default LeaveChannel;
 }
 
 declare module '@sendbird/uikit-react/ChannelSettings/components/UserListItem' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const UserListItem: React.FC<SendbirdUIKitGlobal.UserListItemProps>;
+  import type { UserListItemProps } from 'SendbirdUIKitGlobal';
+  const UserListItem: React.FC<UserListItemProps>;
   export default UserListItem;
 }
 
@@ -1390,18 +1417,55 @@ declare module '@sendbird/uikit-react/ChannelSettings/components/UserPanel' {
  * Channel
  */
 declare module '@sendbird/uikit-react/Channel' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const Channel: React.FC<SendbirdUIKitGlobal.ChannelProps>;
+  import type { ChannelProps } from 'SendbirdUIKitGlobal';
+  const Channel: React.FC<ChannelProps>;
   export default Channel;
 }
 
 declare module '@sendbird/uikit-react/Channel/context' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  export const ChannelProvider: React.FunctionComponent<SendbirdUIKitGlobal.ChannelContextProps>;
-  export function useChannelContext(): SendbirdUIKitGlobal.ChannelProviderInterface;
+  import type { ChannelContextProps, ChannelProviderInterface } from 'SendbirdUIKitGlobal';
+  export const ChannelProvider: React.FunctionComponent<ChannelContextProps>;
+  export function useChannelContext(): ChannelProviderInterface;
   export enum ThreadReplySelectType { PARENT, THREAD }
 }
 
+declare module '@sendbird/uikit-react/Channel/utils/getMessagePartsInfo' {
+  import type { CoreMessageType } from 'SendbirdUIKitGlobal'
+  import type { GroupChannel } from '@sendbird/chat/groupChannel';
+  export interface GetMessagePartsInfoProps {
+    allMessages: Array<CoreMessageType>;
+    isMessageGroupingEnabled: boolean;
+    currentIndex: number;
+    currentMessage: CoreMessageType;
+    currentChannel: GroupChannel;
+    replyType: string;
+  }
+  interface OutPuts {
+    chainTop: boolean,
+    chainBottom: boolean,
+    hasSeparator: boolean,
+  }
+  export function getMessagePartsInfo(args: GetMessagePartsInfoProps): OutPuts;
+}
+
+declare module '@sendbird/uikit-react/Channel/utils/compareMessagesForGrouping' {
+  import type { CoreMessageType } from 'SendbirdUIKitGlobal';
+  import type { GroupChannel } from '@sendbird/chat/groupChannel';
+
+  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+
+  export function compareMessagesForGrouping(
+    prevMessage: CoreMessageType,
+    currMessage: CoreMessageType,
+    nextMessage: CoreMessageType,
+    currentChannel: GroupChannel,
+    replyType: SendbirdUIKitGlobal.ReplyType,
+  ): [
+      chainTop: boolean,
+      chainBottom: boolean,
+    ]
+}
+
 declare module '@sendbird/uikit-react/Channel/components/ChannelHeader' {
   const ChannelHeader: React.FunctionComponent;
   export default ChannelHeader;
@@ -1415,6 +1479,8 @@ declare module '@sendbird/uikit-react/Channel/components/ChannelUI' {
 
 declare module '@sendbird/uikit-react/Channel/components/FileViewer' {
   import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  export const FileViewerComponent: React.FunctionComponent<SendbirdUIKitGlobal.FileViewerComponentProps>
+
   const FileViewer: React.FunctionComponent<SendbirdUIKitGlobal.FileViewerProps>;
   export default FileViewer;
 }
@@ -1630,6 +1696,19 @@ declare module '@sendbird/uikit-react/Message/context' {
   export const MessageProvider: React.FC<SendbirdUIKitGlobal.MessageProviderProps>;
 }
 
+declare module '@sendbird/uikit-react/Message/hooks/useDirtyGetMentions' {
+  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  interface DynamicParams {
+    ref: React.RefObject<HTMLElement>;
+  }
+
+  interface StaticParams {
+    logger: SendbirdUIKitGlobal.Logger;
+  }
+
+  export function useDirtyGetMentions({ ref }: DynamicParams, { logger }: StaticParams): Element[];
+}
+
 /**
  * Thread
  */
@@ -1913,7 +1992,7 @@ declare module '@sendbird/uikit-react/ui/Dropdown' {
 
 declare module '@sendbird/uikit-react/ui/EmojiReactions' {
   import type { EmojiCategory } from '@sendbird/chat';
-  import type { FileMessage, UserMessage } from '@sendbird/chat/message';
+  import type { SendableMessageType } from 'SendbirdUIKitGlobal';
   import type { GroupChannel } from '@sendbird/chat/groupChannel';
 
   interface EmojiContainer {
@@ -1923,13 +2002,13 @@ declare module '@sendbird/uikit-react/ui/EmojiReactions' {
   interface EmojiReactionsProps {
     className?: string | Array<string>;
     userId: string;
-    message: UserMessage | FileMessage;
+    message: SendableMessageType;
     channel: GroupChannel;
     emojiContainer: EmojiContainer;
     memberNicknamesMap: Map<string, string>;
     spaceFromTrigger?: Record<string, unknown>;
     isByMe?: boolean;
-    toggleReaction?: (message: UserMessage | FileMessage, key: string, byMe: boolean) => void;
+    toggleReaction?: (message: SendableMessageType, key: string, byMe: boolean) => void;
   }
   const EmojiReactions: React.FC<EmojiReactionsProps>;
   export default EmojiReactions;
@@ -1969,16 +2048,55 @@ declare module '@sendbird/uikit-react/ui/VoiceMessageItemBody' {
 }
 
 declare module '@sendbird/uikit-react/ui/FileViewer' {
-  import type { FileMessage } from '@sendbird/chat/message';
+  import type { FileMessage, MultipleFilesMessage } from '@sendbird/chat/message';
 
-  interface FileViewerBodyProps {
-    message: FileMessage;
+  /**
+   * This FileViwer is `ui/FileViewer`
+   * it's different from the `Channel/component/FileViwer`
+   */
+  export enum ViewerTypes {
+    SINGLE = 'SINGLE',
+    MULTI = 'MULTI',
+  }
+  interface SenderInfo {
+    profileUrl: string;
+    nickname: string;
+  }
+  interface FileInfo {
+    name: string;
+    type: string;
+    url: string;
+  }
+  interface BaseViewer {
+    onClose: (e: React.MouseEvent) => void;
+  }
+  interface SingleFileViewer extends SenderInfo, FileInfo, BaseViewer {
+    viewerType?: typeof ViewerTypes.SINGLE;
     isByMe?: boolean;
-    onClose?: () => void,
-    onDelete?: () => void,
+    disableDelete?: boolean;
+    onDelete: (e: React.MouseEvent) => void;
   }
-  const FileViewerBody: React.FC<FileViewerBodyProps>;
-  export default FileViewerBody;
+  interface MultiFilesViewer extends SenderInfo, BaseViewer {
+    viewerType: typeof ViewerTypes.MULTI;
+    fileInfoList: FileInfo[];
+    currentIndex: number;
+    onClickLeft: () => void;
+    onClickRight: () => void;
+  }
+  export type FileViewerComponentProps = SingleFileViewer | MultiFilesViewer;
+  export const FileViewerComponent: React.FC<FileViewerComponentProps>
+
+  interface FileViewerProps {
+    message: FileMessage | MultipleFilesMessage;
+    isByMe?: boolean;
+    currentIndex?: number;
+    onClose: (e: MouseEvent) => void;
+    onDelete?: (e: MouseEvent) => void;
+    onClickLeft?: () => void;
+    onClickRight?: () => void;
+  }
+  const FileViewer: React.FC<FileViewerProps>;
+  export default FileViewer;
 }
 
 declare module '@sendbird/uikit-react/ui/Icon' {
@@ -2096,10 +2214,10 @@ declare module '@sendbird/uikit-react/ui/MentionLabel' {
 }
 
 declare module '@sendbird/uikit-react/ui/MessageContent' {
-  import type { GroupChannel, Member } from '@sendbird/chat/groupChannel';
+  import type { GroupChannel } from '@sendbird/chat/groupChannel';
   import type { EmojiContainer } from '@sendbird/chat';
   import type { AdminMessage, FileMessage, UserMessage } from '@sendbird/chat/message';
-  import type SenbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  import type { ReplyType, SendableMessageType } from 'SendbirdUIKitGlobal';
   interface MessageContentProps {
     className?: string | Array<string>;
     userId: string;
@@ -2109,16 +2227,16 @@ declare module '@sendbird/uikit-react/ui/MessageContent' {
     chainTop?: boolean;
     chainBottom?: boolean;
     useReaction?: boolean;
-    replyType?: SenbirdUIKitGlobal.ReplyType;
+    replyType?: ReplyType;
     nicknamesMap?: Map<string, string>;
     emojiContainer?: EmojiContainer;
     scrollToMessage?: (createdAt: number, messageId: number) => void;
     showEdit?: (bool: boolean) => void;
     showRemove?: (bool: boolean) => void;
     showFileViewer?: (bool: boolean) => void;
-    resendMessage?: (message: UserMessage | FileMessage) => void;
-    toggleReaction?: (message: UserMessage | FileMessage, reactionKey: string, isReacted: boolean) => void;
-    setQuoteMessage?: (message: UserMessage | FileMessage) => void;
+    resendMessage?: (message: SendableMessageType) => void;
+    toggleReaction?: (message: SendableMessageType, reactionKey: string, isReacted: boolean) => void;
+    setQuoteMessage?: (message: SendableMessageType) => void;
   }
   const MessageContent: React.FC<MessageContentProps>;
   export default MessageContent;
@@ -2161,6 +2279,32 @@ declare module '@sendbird/uikit-react/ui/MessageInput' {
   export default MessageInput;
 }
 
+declare module '@sendbird/uikit-react/ui/MessageInput/hooks/usePaste' {
+  import type { GroupChannel } from '@sendbird/chat/groupChannel';
+  import type { User } from '@sendbird/chat';
+
+  export type DynamicProps = {
+    // reference to the div element(content editable)
+    ref: React.RefObject<HTMLDivElement>;
+    channel: GroupChannel;
+    // a function that keeps track of the unique user ids
+    setUniqueUserIds: React.Dispatch<React.SetStateAction<string[]>>;
+    // a function that keeps track of the mentioned users
+    setMentionedUsers: React.Dispatch<React.SetStateAction<User[]>>;
+    setIsInput: React.Dispatch<React.SetStateAction<boolean>>;
+    // sets the height of the input div
+    setHeight: () => void;
+  };
+
+  export function usePaste({
+    ref,
+    setIsInput,
+    setHeight,
+    channel,
+    setMentionedUsers,
+  }: DynamicProps): (e: React.ClipboardEvent<HTMLDivElement>) => void
+}
+
 declare module '@sendbird/uikit-react/ui/VoiceMessageInput' {
   export enum VoiceMessageInputStatus {
     READY_TO_RECORD = 'READY_TO_RECORD',
@@ -2186,13 +2330,13 @@ declare module '@sendbird/uikit-react/ui/VoiceMessageInput' {
 
 declare module '@sendbird/uikit-react/ui/MessageItemMenu' {
   import type { GroupChannel } from '@sendbird/chat/groupChannel';
-  import type { FileMessage, UserMessage } from '@sendbird/chat/message';
   import type { OpenChannel } from '@sendbird/chat/openChannel';
+  import type { SendableMessageType } from 'SendbirdUIKitGlobal';
   type ReplyType = "NONE" | "QUOTE_REPLY" | "THREAD";
 
   interface MessageItemMenuProps {
     className?: string | Array<string>;
-    message: UserMessage | FileMessage;
+    message: SendableMessageType;
     channel: GroupChannel | OpenChannel;
     isByMe?: boolean;
     disabled?: boolean;
@@ -2200,10 +2344,10 @@ declare module '@sendbird/uikit-react/ui/MessageItemMenu' {
     disableDeleteMessage?: boolean;
     showEdit?: (bool: boolean) => void;
     showRemove?: (bool: boolean) => void;
-    resendMessage?: (message: UserMessage | FileMessage) => void;
-    setQuoteMessage?: (message: UserMessage | FileMessage) => void;
+    resendMessage?: (message: SendableMessageType) => void;
+    setQuoteMessage?: (message: SendableMessageType) => void;
     setSupposedHover?: (bool: boolean) => void;
-    onReplyInThread?: (props: { message: UserMessage | FileMessage }) => void;
+    onReplyInThread?: (props: { message: SendableMessageType }) => void;
     onMoveToParentMessage?: () => void;
   }
   const MessageItemMenu: React.FC<MessageItemMenuProps>;
@@ -2213,15 +2357,15 @@ declare module '@sendbird/uikit-react/ui/MessageItemMenu' {
 
 declare module '@sendbird/uikit-react/ui/MessageItemReactionMenu' {
   import type { EmojiContainer } from '@sendbird/chat';
-  import type { FileMessage, UserMessage } from '@sendbird/chat/message';
+  import type { SendableMessageType } from 'SendbirdUIKitGlobal';
 
   interface MessageItemReactionMenuProps {
     className?: string | Array<string>;
-    message: UserMessage | FileMessage;
+    message: SendableMessageType;
     userId: string;
     spaceFromTrigger?: Record<string, unknown>;
     emojiContainer?: EmojiContainer;
-    toggleReaction?: (message: UserMessage | FileMessage, reactionKey: string, isReacted: boolean) => void;
+    toggleReaction?: (message: SendableMessageType, reactionKey: string, isReacted: boolean) => void;
     setSupposedHover?: (bool: boolean) => void;
   }
   const MessageItemReactionMenu: React.FC<MessageItemReactionMenuProps>;
@@ -2229,13 +2373,13 @@ declare module '@sendbird/uikit-react/ui/MessageItemReactionMenu' {
 }
 
 declare module '@sendbird/uikit-react/ui/MessageSearchFileItem' {
-  import type SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  import type { ClientFileMessage } from 'SendbirdUIKitGlobal';
 
   interface MessageSearchFileItemProps {
     className?: string | Array<string>;
-    message: SendbirdUIKitGlobal.ClientFileMessage;
+    message: ClientFileMessage;
     selected?: boolean;
-    onClick?: (message: SendbirdUIKitGlobal.ClientFileMessage) => void;
+    onClick?: (message: ClientFileMessage) => void;
   }
   const MessageSearchFileItem: React.FC<MessageSearchFileItemProps>;
   export default MessageSearchFileItem;
@@ -2243,13 +2387,13 @@ declare module '@sendbird/uikit-react/ui/MessageSearchFileItem' {
 }
 
 declare module '@sendbird/uikit-react/ui/MessageSearchItem' {
-  import type SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  import type { ClientUserMessage, ClientMessage } from 'SendbirdUIKitGlobal';
 
   interface MessageSearchItemProps {
     className?: string | Array<string>;
-    message: SendbirdUIKitGlobal.ClientUserMessage;
+    message: ClientUserMessage;
     selected?: boolean;
-    onClick?: (message: SendbirdUIKitGlobal.ClientMessage) => void;
+    onClick?: (message: ClientMessage) => void;
   }
   const MessageSearchItem: React.FC<MessageSearchItemProps>;
   export default MessageSearchItem;
@@ -2257,12 +2401,12 @@ declare module '@sendbird/uikit-react/ui/MessageSearchItem' {
 }
 
 declare module '@sendbird/uikit-react/ui/MessageStatus' {
-  import type { UserMessage, FileMessage } from '@sendbird/chat/message';
+  import type { SendableMessageType } from 'SendbirdUIKitGlobal';
   import type { GroupChannel } from '@sendbird/chat/groupChannel';
 
   interface MessageStatusProps {
     className?: string;
-    message: UserMessage | FileMessage;
+    message: SendableMessageType;
     channel: GroupChannel;
     isDateSeparatorConsidered?: boolean;
   }
@@ -2325,10 +2469,10 @@ declare module '@sendbird/uikit-react/ui/OpenChannelConversationHeader' {
 }
 
 declare module '@sendbird/uikit-react/ui/OpenChannelFileMessage' {
-  import type SenbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  import type { ClientFileMessage } from 'SendbirdUIKitGlobal';
   interface OpenChannelFileMessageProps {
     className?: string | Array<string>;
-    message: SenbirdUIKitGlobal.ClientFileMessage;
+    message: ClientFileMessage;
     isOperator?: boolean;
     isEphemeral?: boolean;
     userId: string;
@@ -2336,23 +2480,23 @@ declare module '@sendbird/uikit-react/ui/OpenChannelFileMessage' {
     chainTop?: boolean;
     chainBottom?: boolean;
     showRemove(bool: boolean): void;
-    resendMessage(message: SenbirdUIKitGlobal.ClientFileMessage): void;
+    resendMessage(message: ClientFileMessage): void;
   }
   const OpenChannelFileMessage: React.FC<OpenChannelFileMessageProps>;
   export default OpenChannelFileMessage;
 }
 
 declare module '@sendbird/uikit-react/ui/OpenChannelOGMessage' {
-  import type SenbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  import type { ClientUserMessage } from 'SendbirdUIKitGlobal';
   interface OpenChannelOGMessageProps {
-    message: SenbirdUIKitGlobal.ClientUserMessage;
+    message: ClientUserMessage;
     isOperator?: boolean;
     isEphemeral?: boolean;
     className?: string | Array<string>;
     disabled?: boolean;
     showEdit(bool: boolean): void;
     showRemove(bool: boolean): void;
-    resendMessage(message: SenbirdUIKitGlobal.ClientUserMessage): void;
+    resendMessage(message: ClientUserMessage): void;
     chainTop?: boolean;
     chainBottom?: boolean;
     userId: string;
@@ -2362,10 +2506,10 @@ declare module '@sendbird/uikit-react/ui/OpenChannelOGMessage' {
 }
 
 declare module '@sendbird/uikit-react/ui/OpenChannelThumbnailMessage' {
-  import type SenbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  import type { ClientFileMessage } from 'SendbirdUIKitGlobal';
   interface OpenChannelThumbnailMessageProps {
     className?: string | Array<string>;
-    message: SenbirdUIKitGlobal.ClientFileMessage;
+    message: ClientFileMessage;
     isOperator?: boolean;
     isEphemeral?: boolean;
     disabled: boolean;
@@ -2374,24 +2518,24 @@ declare module '@sendbird/uikit-react/ui/OpenChannelThumbnailMessage' {
     chainBottom: boolean;
     onClick(bool: boolean): void,
     showRemove(bool: boolean): void,
-    resendMessage(message: SenbirdUIKitGlobal.ClientFileMessage): void;
+    resendMessage(message: ClientFileMessage): void;
   }
   const OpenChannelThumbnailMessage: React.FC<OpenChannelThumbnailMessageProps>;
   export default OpenChannelThumbnailMessage;
 }
 
 declare module '@sendbird/uikit-react/ui/OpenChannelUserMessage' {
-  import type SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  import type { ClientUserMessage } from 'SendbirdUIKitGlobal';
   interface OpenChannelUserMessageProps {
     className?: string | Array<string>;
-    message: SendbirdUIKitGlobal.ClientUserMessage;
+    message: ClientUserMessage;
     isOperator?: boolean;
     isEphemeral?: boolean;
     userId: string;
     disabled?: boolean;
     showEdit(bool: boolean): void;
     showRemove(bool: boolean): void;
-    resendMessage(message: SendbirdUIKitGlobal.ClientUserMessage): void;
+    resendMessage(message: ClientUserMessage): void;
     chainTop?: boolean;
     chainBottom?: boolean;
   }
@@ -2412,9 +2556,9 @@ declare module '@sendbird/uikit-react/ui/PlaceHolder' {
 }
 
 declare module '@sendbird/uikit-react/ui/QuoteMessage' {
-  import type { UserMessage, FileMessage } from '@sendbird/chat/message';
+  import type { SendableMessageType } from 'SendbirdUIKitGlobal';
   interface QuoteMessageProps {
-    message?: UserMessage | FileMessage;
+    message?: SendableMessageType;
     userId?: string;
     isByMe?: boolean;
     className?: string | Array<string>;
@@ -2425,11 +2569,11 @@ declare module '@sendbird/uikit-react/ui/QuoteMessage' {
 }
 
 declare module '@sendbird/uikit-react/ui/QuoteMessageInput' {
-  import type SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  import type { CoreMessageType } from 'SendbirdUIKitGlobal';
   interface QuoteMessageInputProps {
     className?: string | Array<string>;
-    replyingMessage: SendbirdUIKitGlobal.CoreMessageType;
-    onClose?: (message: SendbirdUIKitGlobal.CoreMessageType) => void;
+    replyingMessage: CoreMessageType;
+    onClose?: (message: CoreMessageType) => void;
   }
   const QuoteMessageInput: React.FC<QuoteMessageInputProps>;
   export default QuoteMessageInput;
@@ -2586,11 +2730,11 @@ declare module '@sendbird/uikit-react/ui/TooltipWrapper' {
 }
 
 declare module '@sendbird/uikit-react/ui/UnknownMessageItemBody' {
-  import type SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  import type { CoreMessageType } from 'SendbirdUIKitGlobal';
   interface UnknownMessageItemBodyProps {
     className?: string | Array<string>;
     isByMe?: boolean;
-    message: SendbirdUIKitGlobal.CoreMessageType;
+    message: CoreMessageType;
     mouseHover?: boolean;
     isReactionEnabled?: boolean;
   }
@@ -2618,12 +2762,12 @@ declare module '@sendbird/uikit-react/ui/UserProfile' {
   import type { User } from '@sendbird/chat';
   import type { SendbirdGroupChat, GroupChannelCreateParams, GroupChannel } from '@sendbird/chat/groupChannel';
   import type { SendbirdOpenChat } from '@sendbird/chat/openChannel';
-  import type SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  import type { Logger } from 'SendbirdUIKitGlobal';
   interface UserProfileProps {
     user: User;
     currentUserId?: string;
     sdk?: SendbirdGroupChat | SendbirdOpenChat;
-    logger?: SendbirdUIKitGlobal.Logger;
+    logger?: Logger;
     disableMessaging?: boolean;
     createChannel?(params: GroupChannelCreateParams): Promise<GroupChannel>;
     onSuccess?(): void;