@sendbird/uikit-react 3.12.0 → 3.13.0

package/types/lib/types.d.ts

@@ -18,6 +18,8 @@ import { SdkActionTypes } from './dux/sdk/actionTypes';
 import { ReconnectType } from './hooks/useConnect/types';
 import { SBUGlobalPubSub } from './pubSub/topics';
 import { EmojiManager } from './emojiManager';
+import { MessageTemplatesInfo, ProcessedMessageTemplate, WaitingTemplateKeyData } from './dux/appInfo/initialState';
+import { AppInfoActionTypes } from './dux/appInfo/actionTypes';
 export declare const Role: {
     readonly OPERATOR: "operator";
     readonly NONE: "none";
@@ -82,6 +84,7 @@ export interface SendBirdStateConfig {
         typingIndicatorTypes: SBUConfig['groupChannel']['channel']['typingIndicatorTypes'];
         enableFeedback: SBUConfig['groupChannel']['channel']['enableFeedback'];
         enableSuggestedReplies: SBUConfig['groupChannel']['channel']['enableSuggestedReplies'];
+        showSuggestedRepliesFor: SBUConfig['groupChannel']['channel']['showSuggestedRepliesFor'];
     };
     openChannel: {
         enableOgtag: SBUConfig['openChannel']['channel']['enableOgtag'];
@@ -100,9 +103,14 @@ export interface UserStore {
     loading: boolean;
     user: User;
 }
+export interface AppInfoStore {
+    messageTemplatesInfo?: MessageTemplatesInfo;
+    waitingTemplateKeysMap: Record<string, WaitingTemplateKeyData>;
+}
 export interface SendBirdStateStore {
     sdkStore: SdkStore;
     userStore: UserStore;
+    appInfoStore: AppInfoStore;
 }
 export type SendBirdState = {
     config: SendBirdStateConfig;
@@ -110,10 +118,12 @@ export type SendBirdState = {
     dispatchers: {
         sdkDispatcher: React.Dispatch<SdkActionTypes>;
         userDispatcher: React.Dispatch<UserActionTypes>;
+        appInfoDispatcher: React.Dispatch<AppInfoActionTypes>;
         reconnect: ReconnectType;
     };
     eventHandlers?: SBUEventHandlers;
     emojiManager?: EmojiManager;
+    utils: SendbirdProviderUtils;
 };
 type GetSdk = SendbirdChat | undefined;
 type GetConnect = (userId: string, accessToken?: string) => Promise<User>;
@@ -174,4 +184,8 @@ export type UIKitOptions = PartialDeep<{
 }>;
 export type SendbirdChatInitParams = Omit<SendbirdChatParams<Module[]>, 'appId'>;
 export type CustomExtensionParams = Record<string, string>;
+export type SendbirdProviderUtils = {
+    updateMessageTemplatesInfo: (templateKey: string, createdAt: number) => Promise<void>;
+    getCachedTemplate: (key: string) => ProcessedMessageTemplate | null;
+};
 export {};

package/types/modules/Channel/components/ChannelUI/index.d.ts

@@ -2,6 +2,10 @@ import React from 'react';
 import { GroupChannelUIBasicProps } from '../../../GroupChannel/components/GroupChannelUI/GroupChannelUIView';
 export interface ChannelUIProps extends GroupChannelUIBasicProps {
     isLoading?: boolean;
+    /**
+     * Customizes all child components of the message component.
+     * */
+    renderMessage?: GroupChannelUIBasicProps['renderMessage'];
 }
 declare const ChannelUI: (props: ChannelUIProps) => React.JSX.Element;
 export default ChannelUI;

package/types/modules/Channel/components/MessageInputWrapper/index.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
+import { GroupChannelUIBasicProps } from '../../../GroupChannel/components/GroupChannelUI/GroupChannelUIView';
 export interface MessageInputWrapperProps {
     value?: string;
     disabled?: boolean;
-    renderFileUploadIcon?: () => React.ReactElement;
-    renderVoiceMessageIcon?: () => React.ReactElement;
-    renderSendMessageIcon?: () => React.ReactElement;
     acceptableMimeTypes?: string[];
+    renderFileUploadIcon?: GroupChannelUIBasicProps['renderFileUploadIcon'];
+    renderVoiceMessageIcon?: GroupChannelUIBasicProps['renderVoiceMessageIcon'];
+    renderSendMessageIcon?: GroupChannelUIBasicProps['renderSendMessageIcon'];
 }
 export declare const MessageInputWrapper: (props: MessageInputWrapperProps) => React.JSX.Element;
 export default MessageInputWrapper;

package/types/modules/Channel/components/MessageList/index.d.ts

@@ -1,6 +1,12 @@
 import '../../../GroupChannel/components/MessageList/index.scss';
 import React from 'react';
 import { GroupChannelMessageListProps } from '../../../GroupChannel/components/MessageList';
-export type MessageListProps = GroupChannelMessageListProps;
-export declare const MessageList: ({ className, renderMessage, renderMessageContent, renderPlaceholderEmpty, renderCustomSeparator, renderPlaceholderLoader, renderFrozenNotification, }: MessageListProps) => React.JSX.Element;
+import { GroupChannelUIBasicProps } from '../../../GroupChannel/components/GroupChannelUI/GroupChannelUIView';
+export interface MessageListProps extends GroupChannelMessageListProps {
+    /**
+     * Customizes all child components of the message component.
+     * */
+    renderMessage?: GroupChannelUIBasicProps['renderMessage'];
+}
+export declare const MessageList: ({ className, renderMessage, renderMessageContent, renderSuggestedReplies, renderCustomSeparator, renderPlaceholderLoader, renderPlaceholderEmpty, renderFrozenNotification, }: MessageListProps) => React.JSX.Element;
 export default MessageList;

package/types/modules/Channel/context/ChannelProvider.d.ts

@@ -1,27 +1,19 @@
 import React from 'react';
 import type { GroupChannel, Member } from '@sendbird/chat/groupChannel';
-import type { BaseMessage, FileMessage, FileMessageCreateParams, MultipleFilesMessage, MultipleFilesMessageCreateParams, UserMessage, UserMessageCreateParams, UserMessageUpdateParams } from '@sendbird/chat/message';
+import type { BaseMessage, FileMessage, FileMessageCreateParams, MultipleFilesMessage, MultipleFilesMessageCreateParams, UserMessage, UserMessageCreateParams, UserMessageUpdateParams, MessageListParams as SDKMessageListParams } from '@sendbird/chat/message';
 import type { EmojiContainer, SendbirdError, User } from '@sendbird/chat';
 import { ReplyType, RenderUserProfileProps, Nullable } from '../../../types';
 import { CoreMessageType, SendableMessageType } from '../../../utils';
 import { ThreadReplySelectType } from './const';
 import * as channelActions from './dux/actionTypes';
 import { ChannelActionTypes } from './dux/actionTypes';
-export type MessageListParams = {
-    replyType?: string;
-    messageType?: string;
-    prevResultSize?: number;
-    nextResultSize?: number;
+export interface MessageListParams extends Partial<SDKMessageListParams> {
+    /**
+     * @deprecated
+     * It won't work even if you activate this props
+     */
     reverse?: boolean;
-    isInclusive?: boolean;
-    includeMetaArray?: boolean;
-    includeReactions?: boolean;
-    includeThreadInfo?: boolean;
-    includeParentMessageInfo?: boolean;
-    showSubchannelMessagesOnly?: boolean;
-    customTypes?: Array<string>;
-    senderUserIds?: Array<string>;
-};
+}
 export type ChannelQueries = {
     messageListParams?: MessageListParams;
 };

package/types/modules/Channel/context/const.d.ts

@@ -1,9 +1,3 @@
+export * from '../../GroupChannel/context/const';
 export declare const PREV_RESULT_SIZE = 30;
 export declare const NEXT_RESULT_SIZE = 15;
-export declare const MAX_USER_MENTION_COUNT = 10;
-export declare const MAX_USER_SUGGESTION_COUNT = 15;
-export declare const USER_MENTION_TEMP_CHAR = "@";
-export declare enum ThreadReplySelectType {
-    PARENT = "PARENT",
-    THREAD = "THREAD"
-}

package/types/modules/Channel/context/dux/actionTypes.d.ts

@@ -1,11 +1,10 @@
+import type { EmojiContainer } from '@sendbird/chat';
+import type { GroupChannel, Member } from '@sendbird/chat/groupChannel';
+import type { ReactionEvent } from '@sendbird/chat/message';
+import type { MessageListParams } from '../ChannelProvider';
+import type { CoreMessageType, SendableMessageType } from '../../../../utils';
+import type { FileUploadedPayload } from '../hooks/useSendMultipleFilesMessage';
 import { CreateAction } from '../../../../utils/typeHelpers/reducers/createAction';
-import { GroupChannel } from '@sendbird/chat/groupChannel';
-import { CoreMessageType, SendableMessageType } from '../../../../utils';
-import { EmojiContainer } from '@sendbird/chat';
-import { ReactionEvent } from '@sendbird/chat/message';
-import { MessageListParams } from '../ChannelProvider';
-import { FileUploadedPayload } from '../hooks/useSendMultipleFilesMessage';
-import { Member } from '@sendbird/chat/lib/__definition';
 export declare const RESET_MESSAGES = "RESET_MESSAGES";
 export declare const FETCH_INITIAL_MESSAGES_START = "FETCH_INITIAL_MESSAGES_START";
 export declare const FETCH_INITIAL_MESSAGES_SUCCESS = "FETCH_INITIAL_MESSAGES_SUCCESS";

package/types/modules/ChannelSettings/components/ChannelSettingsUI/index.d.ts

@@ -1,10 +1,11 @@
 import './channel-settings-ui.scss';
 import React from 'react';
 export interface ChannelSettingsUIProps {
-    renderPlaceholderError?: () => React.ReactElement;
     renderChannelProfile?: () => React.ReactElement;
     renderModerationPanel?: () => React.ReactElement;
     renderLeaveChannel?: () => React.ReactElement;
+    renderPlaceholderError?: () => React.ReactElement;
+    renderPlaceholderLoading?: () => React.ReactElement;
 }
 declare const ChannelSettingsUI: React.FC<ChannelSettingsUIProps>;
 export default ChannelSettingsUI;

package/types/modules/ChannelSettings/context/ChannelSettingsProvider.d.ts

@@ -38,10 +38,10 @@ interface ChannelSettingsProviderInterface {
     queries?: ChannelSettingsQueries;
     setChannelUpdateId(uniqId: string): void;
     forceUpdateUI(): void;
-    channel: GroupChannel;
+    channel: GroupChannel | null;
+    loading: boolean;
     invalidChannel: boolean;
 }
-declare const ChannelSettingsProvider: React.FC<ChannelSettingsContextProps>;
-export type UseChannelSettingsType = () => ChannelSettingsProviderInterface;
-declare const useChannelSettingsContext: UseChannelSettingsType;
-export { ChannelSettingsProvider, useChannelSettingsContext, };
+declare const ChannelSettingsProvider: ({ children, className, channelUrl, onCloseClick, onLeaveChannel, onChannelModified, overrideInviteUser, onBeforeUpdateChannel, queries, renderUserProfile, disableUserProfile, }: ChannelSettingsContextProps) => React.JSX.Element;
+declare const useChannelSettingsContext: () => ChannelSettingsProviderInterface;
+export { ChannelSettingsProvider, useChannelSettingsContext };

package/types/modules/GroupChannel/components/GroupChannelUI/GroupChannelUIView.d.ts

@@ -4,20 +4,67 @@ import type { RenderCustomSeparatorProps, RenderMessageParamsType } from '../../
 import type { GroupChannelHeaderProps } from '../GroupChannelHeader';
 import type { GroupChannelMessageListProps } from '../MessageList';
 import type { MessageContentProps } from '../../../../ui/MessageContent';
+import { SuggestedRepliesProps } from '../SuggestedReplies';
 export interface GroupChannelUIBasicProps {
+    /**
+     * A function that customizes the rendering of a loading placeholder component.
+     */
     renderPlaceholderLoader?: () => React.ReactElement;
+    /**
+     * A function that customizes the rendering of a invalid placeholder component.
+     */
     renderPlaceholderInvalid?: () => React.ReactElement;
+    /**
+     * A function that customizes the rendering of an empty placeholder component when there are no messages in the channel.
+     */
     renderPlaceholderEmpty?: () => React.ReactElement;
+    /**
+     * A function that customizes the rendering of a header component.
+     */
     renderChannelHeader?: (props: GroupChannelHeaderProps) => React.ReactElement;
+    /**
+     * A function that customizes the rendering of a message list component.
+     */
     renderMessageList?: (props: GroupChannelMessageListProps) => React.ReactElement;
+    /**
+     * A function that customizes the rendering of a message input component.
+     */
     renderMessageInput?: () => React.ReactElement;
+    /**
+     * A function that customizes the rendering of each message component in the message list component.
+     */
     renderMessage?: (props: RenderMessageParamsType) => React.ReactElement;
+    /**
+     * A function that customizes the rendering of the content portion of each message component.
+     */
     renderMessageContent?: (props: MessageContentProps) => React.ReactElement;
+    /**
+     * A function that customizes the rendering of the suggested replies of each message component.
+     */
+    renderSuggestedReplies?: (props: SuggestedRepliesProps) => React.ReactElement;
+    /**
+     * A function that customizes the rendering of a separator component between messages.
+     */
     renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
+    /**
+     * A function that customizes the rendering of a frozen notification component when the channel is frozen.
+     */
     renderFrozenNotification?: () => React.ReactElement;
+    /**
+     * A function that customizes the rendering of the file upload icon in the message input component.
+     */
     renderFileUploadIcon?: () => React.ReactElement;
+    /**
+     * A function that customizes the rendering of the voice message icon in the message input component.
+     */
     renderVoiceMessageIcon?: () => React.ReactElement;
+    /**
+     * A function that customizes the rendering of the send message icon in the message input component.
+     */
     renderSendMessageIcon?: () => React.ReactElement;
+    /**
+     * A function that customizes the rendering of the typing indicator component.
+     */
     renderTypingIndicator?: () => React.ReactElement;
 }
 export interface GroupChannelUIViewProps extends GroupChannelUIBasicProps {

package/types/modules/GroupChannel/components/Message/MessageView.d.ts

@@ -6,16 +6,38 @@ import type { FileMessage, UserMessageCreateParams, UserMessageUpdateParams } fr
 import { ThreadReplySelectType } from '../../context/const';
 import { CoreMessageType, SendableMessageType } from '../../../../utils';
 import { MessageContentProps } from '../../../../ui/MessageContent';
+import { SuggestedRepliesProps } from '../SuggestedReplies';
 export interface MessageProps {
     message: EveryMessage;
     hasSeparator?: boolean;
     chainTop?: boolean;
     chainBottom?: boolean;
     handleScroll?: (isBottomMessageAffected?: boolean) => void;
-    renderMessage?: (props: RenderMessageParamsType) => React.ReactElement;
+    /**
+     * Customizes all child components of the message.
+     * */
+    children?: React.ReactNode;
+    /**
+     * A function that customizes the rendering of the content portion of message component.
+     */
     renderMessageContent?: (props: MessageContentProps) => React.ReactElement;
+    /**
+     * A function that customizes the rendering of suggested replies component of messages.
+     */
+    renderSuggestedReplies?: (props: SuggestedRepliesProps) => React.ReactElement;
+    /**
+     * A function that customizes the rendering of a separator between messages.
+     */
     renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
+    /**
+     * A function that customizes the rendering of the edit input portion of the message component.
+     * */
     renderEditInput?: () => React.ReactElement;
+    /**
+     * @deprecated Please use `children` instead
+     * @description Customizes all child components of the message.
+     * */
+    renderMessage?: (props: RenderMessageParamsType) => React.ReactElement;
 }
 export interface MessageViewProps extends MessageProps {
     channel: GroupChannel;

package/types/modules/GroupChannel/components/MessageInputWrapper/index.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
+import { GroupChannelUIBasicProps } from '../GroupChannelUI/GroupChannelUIView';
 export interface MessageInputWrapperProps {
     value?: string;
     disabled?: boolean;
-    renderFileUploadIcon?: () => React.ReactElement;
-    renderVoiceMessageIcon?: () => React.ReactElement;
-    renderSendMessageIcon?: () => React.ReactElement;
+    acceptableMimeTypes?: string[];
+    renderFileUploadIcon?: GroupChannelUIBasicProps['renderFileUploadIcon'];
+    renderVoiceMessageIcon?: GroupChannelUIBasicProps['renderVoiceMessageIcon'];
+    renderSendMessageIcon?: GroupChannelUIBasicProps['renderSendMessageIcon'];
 }
 export declare const MessageInputWrapper: (props: MessageInputWrapperProps) => React.JSX.Element;
 export { VoiceMessageInputWrapper, VoiceMessageInputWrapperProps, } from './VoiceMessageInputWrapper';

package/types/modules/GroupChannel/components/MessageList/index.d.ts

@@ -1,15 +1,36 @@
 import './index.scss';
 import React from 'react';
-import { RenderCustomSeparatorProps, RenderMessageParamsType } from '../../../../types';
-import type { MessageContentProps } from '../../../../ui/MessageContent';
+import { GroupChannelUIBasicProps } from '../GroupChannelUI/GroupChannelUIView';
 export interface GroupChannelMessageListProps {
     className?: string;
-    renderMessage?: (props: RenderMessageParamsType) => React.ReactElement;
-    renderMessageContent?: (props: MessageContentProps) => React.ReactElement;
-    renderPlaceholderEmpty?: () => React.ReactElement;
-    renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
-    renderPlaceholderLoader?: () => React.ReactElement;
-    renderFrozenNotification?: () => React.ReactElement;
+    /**
+     * A function that customizes the rendering of each message component in the message list component.
+     */
+    renderMessage?: GroupChannelUIBasicProps['renderMessage'];
+    /**
+     * A function that customizes the rendering of the content portion of each message component.
+     */
+    renderMessageContent?: GroupChannelUIBasicProps['renderMessageContent'];
+    /**
+     * A function that customizes the rendering of a separator component between messages.
+     */
+    renderCustomSeparator?: GroupChannelUIBasicProps['renderCustomSeparator'];
+    /**
+     * A function that customizes the rendering of a loading placeholder component.
+     */
+    renderPlaceholderLoader?: GroupChannelUIBasicProps['renderPlaceholderLoader'];
+    /**
+     * A function that customizes the rendering of an empty placeholder component when there are no messages in the channel.
+     */
+    renderPlaceholderEmpty?: GroupChannelUIBasicProps['renderPlaceholderEmpty'];
+    /**
+     * A function that customizes the rendering of a frozen notification component when the channel is frozen.
+     */
+    renderFrozenNotification?: GroupChannelUIBasicProps['renderFrozenNotification'];
+    /**
+     * A function that customizes the rendering of a suggested replies component.
+     */
+    renderSuggestedReplies?: GroupChannelUIBasicProps['renderSuggestedReplies'];
 }
-export declare const MessageList: ({ className, renderMessage, renderPlaceholderEmpty, renderCustomSeparator, renderPlaceholderLoader, renderFrozenNotification, }: GroupChannelMessageListProps) => React.JSX.Element;
+export declare const MessageList: ({ className, renderMessage, renderMessageContent, renderSuggestedReplies, renderCustomSeparator, renderPlaceholderLoader, renderPlaceholderEmpty, renderFrozenNotification, }: GroupChannelMessageListProps) => React.JSX.Element;
 export default MessageList;

package/types/modules/GroupChannel/components/MessageTemplateWrapper/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BaseMessage } from '@sendbird/chat/message';
+import { MessageTemplateProps } from '../../../../ui/MessageTemplate';
+export interface MessageTemplateWrapperProps extends MessageTemplateProps {
+    message: BaseMessage;
+}
+export declare const MessageTemplateWrapper: ({ message, templateItems }: MessageTemplateWrapperProps) => React.JSX.Element;
+export default MessageTemplateWrapper;

package/types/modules/GroupChannel/components/SuggestedReplies/index.d.ts

@@ -1,10 +1,12 @@
 import './index.scss';
 import React from 'react';
-interface Props {
+import { BaseMessage } from '@sendbird/chat/message';
+export interface SuggestedRepliesProps {
     replyOptions: string[];
     onSendMessage: ({ message }: {
         message: string;
     }) => void;
+    message: BaseMessage;
 }
-export declare const SuggestedReplies: ({ replyOptions, onSendMessage }: Props) => React.JSX.Element;
+declare const SuggestedReplies: ({ replyOptions, onSendMessage }: SuggestedRepliesProps) => React.JSX.Element;
 export default SuggestedReplies;

package/types/modules/GroupChannel/context/GroupChannelProvider.d.ts

@@ -13,7 +13,7 @@ import { useMessageActions } from './hooks/useMessageActions';
 type OnBeforeHandler<T> = (params: T) => T | Promise<T>;
 type MessageListQueryParamsType = Omit<MessageCollectionParams, 'filter'> & MessageFilterParams;
 type MessageActions = ReturnType<typeof useMessageActions>;
-type MessageListDataSourceWithoutActions = Omit<ReturnType<typeof useGroupChannelMessages>, keyof MessageActions>;
+type MessageListDataSourceWithoutActions = Omit<ReturnType<typeof useGroupChannelMessages>, keyof MessageActions | `_dangerous_${string}`>;
 interface ContextBaseType {
     channelUrl: string;
     isReactionEnabled?: boolean;

package/types/types.d.ts

@@ -69,3 +69,4 @@ export interface UploadedFileInfoWithUpload {
     url?: string;
     isUploaded?: boolean;
 }
+export type SendbirdTheme = 'light' | 'dark';

package/types/ui/Icon/colors.d.ts

@@ -5,6 +5,7 @@ export declare const Colors: {
     readonly SECONDARY: "SECONDARY";
     readonly CONTENT: "CONTENT";
     readonly CONTENT_INVERSE: "CONTENT_INVERSE";
+    readonly CONTENT_INVERSE_5: "CONTENT_INVERSE_5";
     readonly WHITE: "WHITE";
     readonly GRAY: "GRAY";
     readonly THUMBNAIL_ICON: "THUMBNAIL_ICON";
@@ -26,6 +27,7 @@ declare const _default: {
         readonly SECONDARY: "SECONDARY";
         readonly CONTENT: "CONTENT";
         readonly CONTENT_INVERSE: "CONTENT_INVERSE";
+        readonly CONTENT_INVERSE_5: "CONTENT_INVERSE_5";
         readonly WHITE: "WHITE";
         readonly GRAY: "GRAY";
         readonly THUMBNAIL_ICON: "THUMBNAIL_ICON";

package/types/ui/Icon/index.d.ts

@@ -83,6 +83,7 @@ export declare const IconColors: {
     readonly SECONDARY: "SECONDARY";
     readonly CONTENT: "CONTENT";
     readonly CONTENT_INVERSE: "CONTENT_INVERSE";
+    readonly CONTENT_INVERSE_5: "CONTENT_INVERSE_5";
     readonly WHITE: "WHITE";
     readonly GRAY: "GRAY";
     readonly THUMBNAIL_ICON: "THUMBNAIL_ICON";

package/types/ui/Label/index.d.ts

@@ -30,6 +30,8 @@ declare const LabelColors: {
     readonly ONBACKGROUND_4: "ONBACKGROUND_4";
     readonly ONCONTENT_1: "ONCONTENT_1";
     readonly ONCONTENT_2: "ONCONTENT_2";
+    readonly ONCONTENT_INVERSE_1: "ONCONTENT_INVERSE_1";
+    readonly ONCONTENT_INVERSE_5: "ONCONTENT_INVERSE_5";
     readonly PRIMARY: "PRIMARY";
     readonly ERROR: "ERROR";
     readonly SECONDARY_3: "SECONDARY_3";

package/types/ui/Label/stringSet.d.ts

@@ -92,6 +92,8 @@ declare const stringSet: {
         TOOLTIP__UNKNOWN_USER: string;
         UNKNOWN__UNKNOWN_MESSAGE_TYPE: string;
         UNKNOWN__CANNOT_READ_MESSAGE: string;
+        UNKNOWN__TEMPLATE_ERROR: string;
+        UNKNOWN__CANNOT_READ_TEMPLATE: string;
         MESSAGE_EDITED: string;
         MODAL__DELETE_MESSAGE__TITLE: string;
         MODAL__CHANNEL_INFORMATION__TITLE: string;
@@ -184,6 +186,7 @@ declare const stringSet: {
         CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_AUDIO: string;
         CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_VOICE_MESSAGE: string;
         CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_GENERAL: string;
+        CHANNEL_PREVIEW_LAST_MESSAGE_TEMPLATE_MESSAGE: string;
         DATE_FORMAT__MESSAGE_LIST__NOTIFICATION__UNREAD_SINCE: string;
         DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR: string;
         DATE_FORMAT__THREAD_LIST__DATE_SEPARATOR: string;

package/types/ui/Label/types.d.ts

@@ -19,6 +19,8 @@ export declare const Colors: {
     readonly ONBACKGROUND_4: "ONBACKGROUND_4";
     readonly ONCONTENT_1: "ONCONTENT_1";
     readonly ONCONTENT_2: "ONCONTENT_2";
+    readonly ONCONTENT_INVERSE_1: "ONCONTENT_INVERSE_1";
+    readonly ONCONTENT_INVERSE_5: "ONCONTENT_INVERSE_5";
     readonly PRIMARY: "PRIMARY";
     readonly ERROR: "ERROR";
     readonly SECONDARY_3: "SECONDARY_3";

package/types/ui/Label/utils.d.ts

@@ -1,4 +1,4 @@
 import { Typography, Colors } from './types';
 import { ObjectValues } from '../../utils/typeHelpers/objectValues';
 export declare function changeTypographyToClassName(type?: ObjectValues<typeof Typography>): "" | "sendbird-label--h-1" | "sendbird-label--h-2" | "sendbird-label--subtitle-1" | "sendbird-label--subtitle-2" | "sendbird-label--body-1" | "sendbird-label--body-2" | "sendbird-label--button-1" | "sendbird-label--button-2" | "sendbird-label--button-3" | "sendbird-label--caption-1" | "sendbird-label--caption-2" | "sendbird-label--caption-3";
-export declare function changeColorToClassName(color?: ObjectValues<typeof Colors>): "" | "sendbird-label--color-onbackground-1" | "sendbird-label--color-onbackground-2" | "sendbird-label--color-onbackground-3" | "sendbird-label--color-onbackground-4" | "sendbird-label--color-oncontent-1" | "sendbird-label--color-oncontent-2" | "sendbird-label--color-primary" | "sendbird-label--color-error" | "sendbird-label--color-secondary-3";
+export declare function changeColorToClassName(color?: ObjectValues<typeof Colors>): "" | "sendbird-label--color-onbackground-1" | "sendbird-label--color-onbackground-2" | "sendbird-label--color-onbackground-3" | "sendbird-label--color-onbackground-4" | "sendbird-label--color-oncontent-1" | "sendbird-label--color-oncontent-2" | "sendbird-label--color-oncontent-inverse-1" | "sendbird-label--color-oncontent-inverse-5" | "sendbird-label--color-primary" | "sendbird-label--color-error" | "sendbird-label--color-secondary-3";

package/types/ui/LinkLabel/index.d.ts

@@ -31,6 +31,8 @@ export declare const LinkLabelColors: {
     readonly ONBACKGROUND_4: "ONBACKGROUND_4";
     readonly ONCONTENT_1: "ONCONTENT_1";
     readonly ONCONTENT_2: "ONCONTENT_2";
+    readonly ONCONTENT_INVERSE_1: "ONCONTENT_INVERSE_1";
+    readonly ONCONTENT_INVERSE_5: "ONCONTENT_INVERSE_5";
     readonly PRIMARY: "PRIMARY";
     readonly ERROR: "ERROR";
     readonly SECONDARY_3: "SECONDARY_3";

package/types/ui/MessageContent/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import './index.scss';
 import { MessageMenuProps } from '../MessageItemMenu';
 import { MessageEmojiMenuProps } from '../MessageItemReactionMenu';
@@ -11,6 +11,7 @@ import { Nullable, ReplyType } from '../../types';
 import { MessageProfileProps } from './MessageProfile';
 import { MessageBodyProps } from './MessageBody';
 import { MessageHeaderProps } from './MessageHeader';
+import { MobileBottomSheetProps } from '../MobileMenu/types';
 export interface MessageContentProps {
     className?: string | Array<string>;
     userId: string;
@@ -46,5 +47,6 @@ export interface MessageContentProps {
     renderMessageMenu?: (props: MessageMenuProps) => ReactNode;
     renderEmojiMenu?: (props: MessageEmojiMenuProps) => ReactNode;
     renderEmojiReactions?: (props: EmojiReactionsProps) => ReactNode;
+    renderMobileMenuOnLongPress?: (props: MobileBottomSheetProps) => React.ReactElement;
 }
 export default function MessageContent(props: MessageContentProps): ReactElement;

package/types/ui/MessageInput/index.d.ts

@@ -11,6 +11,7 @@ type MessageInputProps = {
     className?: string | string[];
     messageFieldId?: string;
     isEdit?: boolean;
+    isMobile?: boolean;
     isMentionEnabled?: boolean;
     isVoiceMessageEnabled?: boolean;
     isSelectingMultipleFilesEnabled?: boolean;

package/types/ui/MessageInput/utils.d.ts

@@ -7,3 +7,7 @@ export declare const sanitizeString: (str?: string) => string;
  */
 export declare const nodeListToArray: (childNodes?: Node['childNodes'] | null) => ChildNode[];
 export declare function isChannelTypeSupportsMultipleFilesMessage(channel: BaseChannel): boolean;
+export declare function extractTextAndMentions(childNodes: NodeListOf<ChildNode>): {
+    messageText: string;
+    mentionTemplate: string;
+};

package/types/ui/MessageTemplate/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MessageTemplateItem } from '../TemplateMessageItemBody/types';
+import './index.scss';
+export interface MessageTemplateProps {
+    templateItems: MessageTemplateItem[];
+}
+export declare function MessageTemplate({ templateItems }: MessageTemplateProps): React.JSX.Element;
+export default MessageTemplate;

package/types/ui/TemplateMessageItemBody/FallbackTemplateMessageItemBody.d.ts

@@ -0,0 +1,9 @@
+import type { BaseMessage } from '@sendbird/chat/message';
+import { ReactElement } from 'react';
+export interface FallbackTemplateMessageItemBodyProps {
+    className?: string | Array<string>;
+    message: BaseMessage;
+    isByMe?: boolean;
+}
+export declare function FallbackTemplateMessageItemBody({ className, message, isByMe, }: FallbackTemplateMessageItemBodyProps): ReactElement;
+export default FallbackTemplateMessageItemBody;

package/types/ui/TemplateMessageItemBody/LoadingTemplateMessageItemBody.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+export interface LoadingTemplateMessageItemBodyProps {
+    className?: string | Array<string>;
+    isByMe?: boolean;
+}
+export declare function LoadingTemplateMessageItemBody({ className, isByMe, }: LoadingTemplateMessageItemBodyProps): ReactElement;
+export default LoadingTemplateMessageItemBody;

package/types/ui/TemplateMessageItemBody/index.d.ts

@@ -0,0 +1,12 @@
+import './index.scss';
+import { ReactElement } from 'react';
+import type { BaseMessage } from '@sendbird/chat/message';
+import { SendbirdTheme } from '../../types';
+interface TemplateMessageItemBodyProps {
+    className?: string | Array<string>;
+    message: BaseMessage;
+    isByMe?: boolean;
+    theme?: SendbirdTheme;
+}
+export declare function TemplateMessageItemBody({ className, message, isByMe, theme, }: TemplateMessageItemBodyProps): ReactElement;
+export default TemplateMessageItemBody;