@sendbird/ai-agent-messenger-react 1.22.0 → 1.24.0

package/dist/index.d.ts

@@ -12,7 +12,6 @@ import { Conversation as Conversation_2 } from '@sendbird/chat/aiAgent';
 import { ConversationStatus } from '@sendbird/chat/aiAgent';
 import { CSSProperties } from 'react';
 import { DeskChannelFilter } from '@sendbird/chat/aiAgent';
-import { FC } from 'react';
 import { FileMessage } from '@sendbird/chat/message';
 import { FileMessageCreateParams } from '@sendbird/chat/message';
 import { format } from 'date-fns';
@@ -23,7 +22,6 @@ import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
 import { GroupChannelListOrder } from '@sendbird/chat/groupChannel';
 import { GroupChannelModule } from '@sendbird/chat/groupChannel';
 import { JSX } from 'react/jsx-runtime';
-import { LazyExoticComponent } from 'react';
 import type { Locale } from 'date-fns';
 import { LogLevel as LogLevel_2 } from '@sendbird/chat';
 import { MultipleFilesMessage } from '@sendbird/chat/message';
@@ -36,7 +34,6 @@ import { SendbirdChatParams } from '@sendbird/chat';
 import { SendbirdChatWith } from '@sendbird/chat';
 import { SendbirdError } from '@sendbird/chat';
 import { SessionHandler } from '@sendbird/chat';
-import { SVGProps } from 'react';
 import { UIEvent as UIEvent_2 } from 'react';
 import { User } from '@sendbird/chat';
 import { UserMessage } from '@sendbird/chat/message';
@@ -203,6 +200,11 @@ userSessionInfo?: ManualSessionInfo | AnonymousSessionInfo | UserSessionInfo;
 stringSet?: Partial<StringSet>;
 /**
 * @public
+* @description Custom icon registry for the ai agent client.
+* */
+icons?: IconRegistry;
+/**
+* @public
 * @description dir of the widget.
 * */
 dir?: "ltr" | "rtl";
@@ -288,7 +290,7 @@ __internalVariables?: InternalMessageTemplateVariables;
 children?: ReactNode | undefined;
 } & RefAttributes<MessengerSessionRef>>;
 
-export declare function AgentUIProviderContainer({ appearance, rootElement, logger, language, languageCode, stringSet, children, messageTemplate, theme, }: Props): JSX.Element;
+export declare function AgentUIProviderContainer({ appearance, rootElement, logger, language, languageCode, stringSet, children, messageTemplate, icons, theme, }: Props): JSX.Element;
 
 declare abstract class AIAgentBaseStats {
     protected timers: Map<string, TimerData> = new Map();
@@ -383,6 +385,36 @@ declare interface AIAgentCache {
     messenger: MessengerSessionCache;
 }
 
+declare type AIAgentCommonIconName =
+| 'close'
+| 'send'
+| 'menu'
+| 'spinner'
+| 'chat'
+| 'message'
+| 'error'
+| 'refresh'
+| 'chevron-down'
+| 'done'
+| 'done-circle'
+| 'stop'
+| 'stop-circle'
+| 'user'
+| 'file-document'
+| 'agent'
+| 'radio-on'
+| 'radio-off'
+| 'source'
+| 'copy'
+| 'good'
+| 'bad'
+| 'good-filled'
+| 'bad-filled'
+| 'delight'
+| 'photo'
+| 'add'
+| 'document';
+
 export declare interface AIAgentConfig {
     conversation?: {
         /**
@@ -557,6 +589,22 @@ declare interface AIAgentGroupChannelFilter {
     copilotSupportChannelUrl?: string;
 }
 
+declare type AIAgentIconComponent = ComponentType<AIAgentIconComponentProps>;
+
+declare type AIAgentIconComponentProps = {
+    size?: number | string;
+    color?: string;
+    /**
+     * Metadata flag. When true, this icon is a direction-sensitive glyph and should be
+     * horizontally flipped by the implementation when rendered in an RTL layout.
+     * The value does not reflect the current layout direction — it only marks the icon
+     * as eligible for flipping.
+     */
+    flipInRtl?: boolean;
+};
+
+declare type AIAgentIconRegistry<T extends string = AIAgentCommonIconName> = Partial<Record<T, AIAgentIconComponent>>;
+
 declare interface AIAgentInfo {
     userId: string;
     nickname: string;
@@ -775,6 +823,11 @@ export declare type AIAgentProps = PropsWithChildren<{
      * @description Localization string set for the ai agent client.
      * */
     stringSet?: Partial<StringSet>;
+    /**
+     * @public
+     * @description Custom icon registry for the ai agent client.
+     * */
+    icons?: IconRegistry;
     /**
      * @public
      * @description dir of the widget.
@@ -973,6 +1026,8 @@ declare interface AIAgentStringSet {
         failed_message_remove: string;
 
         file_upload_no_supported_files: string;
+        file_upload_replace_alert_title: string;
+        file_upload_replace_alert_description: string;
 
         // Accessibility
         a11y_message_list: string;
@@ -1008,6 +1063,7 @@ declare interface AIAgentStringSet {
         a11y_screen_conversation: string;
         a11y_screen_conversation_with_agent: (name: string) => string;
         a11y_screen_conversation_list_no_count: string;
+        a11y_screen_conversation_list_with_count: (count: number) => string;
         a11y_csat_displayed: string;
         a11y_empty_conversation: string;
         a11y_input_disabled: string;
@@ -1068,6 +1124,8 @@ declare interface AIAgentStringSet {
         placeholder_no_messages: string;
         placeholder_no_conversations: string;
         placeholder_something_went_wrong_retry_label: string;
+        button_ok: string;
+        button_cancel: string;
     };
 
     feedback: {
@@ -2404,64 +2462,13 @@ export declare interface GroundednessInfo {
  */
 declare type HexColor = `#${string}`;
 
-/**
- * frequently used icons are imported statically, and others are imported dynamically.
- * */
-declare const icons: {
-    readonly close: FC<SVGProps<SVGElement>>;
-    readonly send: FC<SVGProps<SVGElement>>;
-    readonly menu: FC<SVGProps<SVGElement>>;
-    readonly expand: FC<SVGProps<SVGElement>>;
-    readonly collapse: FC<SVGProps<SVGElement>>;
-    readonly spinner: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly chat: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly message: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly error: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly info: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly refresh: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly 'chevron-down': LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly 'chevron-right': LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly done: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly 'done-circle': LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly stop: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly 'stop-circle': LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly user: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly 'file-document': LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly download: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly attach: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly delete: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly 'close-filled': LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly agent: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly question: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly actionbook: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly function: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly 'radio-on': LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly 'radio-off': LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly confluence: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly zendesk: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly salesforce: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly sprinklr: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly website: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly snippet: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly template: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly source: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly bot: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly 'bot-filled': LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly copy: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly show: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly mute: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly good: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly bad: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly 'good-filled': LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly 'bad-filled': LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly delight: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly photo: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly 'arrow-left': LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly add: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-    readonly document: LazyExoticComponent<FC<SVGProps<SVGElement>>>;
-};
+export declare type IconComponent = AIAgentIconComponent;
+
+export declare type IconComponentProps = AIAgentIconComponentProps;
+
+export declare type IconRegistry = AIAgentIconRegistry<IconType>;
 
-declare type IconType = keyof typeof icons;
+export declare type IconType = AIAgentCommonIconName | ReactOnlyIconName;
 
 declare type IncomingBaseMessageProps<T> = T &
 BaseMessageProps<{
@@ -2511,12 +2518,13 @@ declare type IncomingMessageBodyProps<T extends MessageType = MessageType> = Inc
         bubbleContentColor?: string;
         bubbleBackgroundColor?: string;
     };
+    surface?: 'bubble' | 'plain';
 };
 
 export declare const IncomingMessageLayout: {
     (props: PropsWithChildren): ReactNode;
     defaults: {
-        template: ComponentType<IncomingMessageProps>;
+        template: ComponentType<IncomingMessageTemplateProps>;
         components: {
             SenderName: ({ sender }: Pick<IncomingMessageProps, "sender">) => ReactNode;
             SenderAvatar: ({ sender, isBotMessage, }: Pick<IncomingMessageProps, "sender" | "isBotMessage">) => ReactNode;
@@ -2764,10 +2772,10 @@ export declare const IncomingMessageLayout: {
         };
     };
     Template: ({ template, children }: {
-        template?: ComponentType<IncomingMessageProps> | undefined;
+        template?: ComponentType<IncomingMessageTemplateProps> | undefined;
         children?: ReactNode;
     }) => JSX.Element;
-    Context: Context<LayoutContextValue<IncomingMessageProps, {
+    Context: Context<LayoutContextValue<IncomingMessageTemplateProps, {
     SenderName: ({ sender }: Pick<IncomingMessageProps, "sender">) => ReactNode;
     SenderAvatar: ({ sender, isBotMessage, }: Pick<IncomingMessageProps, "sender" | "isBotMessage">) => ReactNode;
     SentTime: ({ createdAt }: Pick<IncomingMessageProps, "createdAt">) => ReactNode;
@@ -3012,7 +3020,7 @@ export declare const IncomingMessageLayout: {
     Feedback: ({ isBotMessage, isConversationClosed, isStreaming, isFeedbackEnabled, isFeedbackCommentEnabled, extendedMessagePayload, onFeedbackUpdate, }: IncomingMessageProps) => ReactNode;
     MessageLogs: (_: IncomingMessageProps) => ReactNode;
     }>>;
-    useContext: () => LayoutContextValue<IncomingMessageProps, {
+    useContext: () => LayoutContextValue<IncomingMessageTemplateProps, {
     SenderName: ({ sender }: Pick<IncomingMessageProps, "sender">) => ReactNode;
     SenderAvatar: ({ sender, isBotMessage, }: Pick<IncomingMessageProps, "sender" | "isBotMessage">) => ReactNode;
     SentTime: ({ createdAt }: Pick<IncomingMessageProps, "createdAt">) => ReactNode;
@@ -3540,6 +3548,8 @@ export declare const IncomingMessageLayout: {
 export declare type IncomingMessageProps<T extends IncomingMessageUnion['messageType'] = IncomingMessageUnion['messageType']> =
 PickMessageProps<IncomingMessageUnion, T>;
 
+declare type IncomingMessageTemplateProps = IncomingMessageProps & Partial<InternalExtraProps>;
+
 declare type IncomingMessageUnion =
 | IncomingBaseMessageProps<{
     messageType: 'user';
@@ -3566,7 +3576,10 @@ declare type IncomingMessageUnion =
 
 declare function IncomingTextBody(props: IncomingMessageBodyProps): JSX.Element | null;
 
+declare type InputMode = 'enabled' | 'readOnly' | 'disabled';
+
 declare type InputState = {
+    _mode: InputMode;
     disabled: boolean;
     disabledBy:
     | 'unavailable'
@@ -3581,6 +3594,11 @@ declare type InputState = {
     | (string & {});
 };
 
+declare type InternalExtraProps = {
+    maxBodyWidth?: number;
+    testerMode?: boolean;
+};
+
 declare interface InternalMessageTemplateVariables {
     carousel_padding_left?: number;
     carousel_padding_right?: number;
@@ -3682,7 +3700,7 @@ export declare const MessageListUILayout: {
         template: ComponentType<unknown>;
         components: {
             DateSeparator: ({ className, date, style }: DateSeparatorProps) => ReactNode;
-            ScrollToBottomButton: ({ className, style, onClick, ariaLabel, }: ScrollToBottomButtonProps) => ReactNode;
+            ScrollToBottomButton: ({ className, style, onClick }: ScrollToBottomButtonProps) => ReactNode;
         };
     };
     Template: ({ template, children }: {
@@ -3691,18 +3709,18 @@ export declare const MessageListUILayout: {
     }) => JSX.Element;
     Context: Context<LayoutContextValue<unknown, {
     DateSeparator: ({ className, date, style }: DateSeparatorProps) => ReactNode;
-    ScrollToBottomButton: ({ className, style, onClick, ariaLabel, }: ScrollToBottomButtonProps) => ReactNode;
+    ScrollToBottomButton: ({ className, style, onClick }: ScrollToBottomButtonProps) => ReactNode;
     }>>;
     useContext: () => LayoutContextValue<unknown, {
     DateSeparator: ({ className, date, style }: DateSeparatorProps) => ReactNode;
-    ScrollToBottomButton: ({ className, style, onClick, ariaLabel, }: ScrollToBottomButtonProps) => ReactNode;
+    ScrollToBottomButton: ({ className, style, onClick }: ScrollToBottomButtonProps) => ReactNode;
     }>;
 } & {
     DateSeparator: (props: {
         component: ({ className, date, style }: DateSeparatorProps) => ReactNode;
     }) => null;
     ScrollToBottomButton: (props: {
-        component: ({ className, style, onClick, ariaLabel, }: ScrollToBottomButtonProps) => ReactNode;
+        component: ({ className, style, onClick }: ScrollToBottomButtonProps) => ReactNode;
     }) => null;
 };
 
@@ -4177,6 +4195,7 @@ declare type Props = {
     language?: string;
     /** @internal DO NOT USE THIS **/
     languageCode?: string;
+    icons?: IconRegistry;
     theme?: {
         palette?: Partial<PaletteShape>;
         typography?: Partial<{
@@ -4236,6 +4255,8 @@ declare type Props_4 = PropsWithChildren<{
     style?: CSSProperties;
 }>;
 
+declare type ReactOnlyIconName = 'expand' | 'collapse' | 'chevron-right' | 'download' | 'attach' | 'close-filled' | 'actionbook' | 'function' | 'confluence' | 'zendesk' | 'salesforce' | 'sprinklr' | 'website' | 'snippet' | 'template' | 'show' | 'mute';
+
 declare type SBUFoundationProps<T = NonNullable<unknown>> = T & {
     className?: string;
     children?: ReactNode;
@@ -4246,7 +4267,6 @@ declare type SBUFoundationProps<T = NonNullable<unknown>> = T & {
 
 export declare type ScrollToBottomButtonProps = SBUFoundationProps<{
     onClick: () => void;
-    ariaLabel?: string;
 }>;
 
 declare interface SearchConversationParams {
@@ -4315,6 +4335,7 @@ declare type StringSet = {
     MESSAGE_INPUT__PLACE_HOLDER__DISABLED: string;
     MESSAGE_INPUT__PLACE_HOLDER__STEWARD: string;
     MESSAGE_INPUT__PLACE_HOLDER__RECONNECTING: string;
+    BUTTON__OK: string;
     BUTTON__CANCEL: string;
     BUTTON__SUBMIT: string;
     RETRY: string;
@@ -4334,6 +4355,8 @@ declare type StringSet = {
     FILE_UPLOAD_NO_SUPPORTED_FILES: string;
     FILE_UPLOAD_PHOTOS: string;
     FILE_UPLOAD_FILES: string;
+    FILE_UPLOAD_REPLACE_ALERT__TITLE: string;
+    FILE_UPLOAD_REPLACE_ALERT__DESCRIPTION: string;
     FILE_VIEWER__UNSUPPORT: string;
     IMAGE_VIEWER__DEFAULT_TITLE: string;
     CSAT_TITLE_UNSUBMITTED: string;
@@ -4413,6 +4436,7 @@ declare type StringSet = {
     A11Y_FILE_UPLOAD_OPTIONS: string;
     A11Y_FAILED_MESSAGE_OPTIONS: string;
     A11Y_FEEDBACK_OPTIONS: string;
+    A11Y_CSAT_TEXT_INPUT_LABEL: string;
     A11Y_TYPING_FORMAT: (name: string) => string;
     A11Y_MESSAGE_FAILED: string;
     A11Y_NEW_MESSAGES_RECEIVED: (count: number) => string;
@@ -4427,6 +4451,7 @@ declare type StringSet = {
     A11Y_SCREEN_CONVERSATION: string;
     A11Y_SCREEN_CONVERSATION_WITH_AGENT: (name: string) => string;
     A11Y_SCREEN_CONVERSATION_LIST_NO_COUNT: string;
+    A11Y_SCREEN_CONVERSATION_LIST_WITH_COUNT: (count: number) => string;
     A11Y_CSAT_DISPLAYED: string;
     A11Y_EMPTY_CONVERSATION: string;
     A11Y_INPUT_DISABLED: string;
@@ -4470,8 +4495,6 @@ declare type StringSet = {
     /** @deprecated Unused string **/
     BUTTON__SAVE: string;
     /** @deprecated Unused string **/
-    BUTTON__OK: string;
-    /** @deprecated Unused string **/
     NO_NAME: string;
     /** @deprecated Unused string **/
     CHANNEL_FROZEN: string;