@cometchat/chat-uikit-react
Version:
Ready-to-use Chat UI Components for React(Javascript/Web)
6,039 lines • 240 kB
TypeScript
import * as React from 'react';
import React__default, { JSX as JSX$1, ReactNode, FC } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import * as _cometchat_chat_sdk_javascript from '@cometchat/chat-sdk-javascript';
import { CometChat as CometChat$1 } from '@cometchat/chat-sdk-javascript';
import { Subject } from 'rxjs';
/**
* Interface for the props of CometChatToast component
*/
interface CometChatToastProps {
/** The text to display in the toast message */
text: string;
/** Duration (in milliseconds) for which the toast is visible (default is 3000ms) */
duration?: number;
/** Optional callback function that executes when the toast closes */
onClose?: () => void;
}
/**
* CometChatToast Component
*
* This component displays a temporary toast message with a specified text and duration.
* The toast will automatically disappear after the specified duration and optionally trigger
* an `onClose` callback if provided.
*
* @param {string} text - The message text to display in the toast
* @param {number} duration - Duration for which the toast is visible
* @param {function} onClose - Callback function executed when the toast closes
*
* @returns {JSX.Element | null} - The JSX element for the toast message or null if no text is provided
*/
declare const CometChatToast: React__default.FC<CometChatToastProps>;
/**
* It is used for specifying the position of the auxiliary buttons.
* It is used in CometChatMessageComposer component.
*/
declare enum AuxiliaryButtonAlignment {
left = 0,
right = 1
}
/**
* It is used for specifying the function of enter button
* It is used in CometChatMessageComposer component.
*/
declare enum EnterKeyBehavior {
SendMessage = "sendMessage",
NewLine = "newLine",
None = "none"
}
/**
* It is used for describing the position of the element on the UI.
* It is used in CometChatContextualMenu, CometChatMessageBubble, CometChatUsers and CometChatGroupMembers components.
*/
declare enum Placement$1 {
top = "top",
right = "right",
bottom = "bottom",
left = "left"
}
/**
* It is used for specifying the alignment of the message list.
* It is used in CometChatMessageList component.
*/
declare enum MessageListAlignment {
left = 0,
standard = 1
}
/**
* This is used for specifying the position of the message bubble.
* It is used in various components where the message bubbles are used.
*/
declare enum MessageBubbleAlignment {
left = 0,
right = 1,
center = 2
}
/**
* This is used for specifying the position of the document icon.
* It is used in Decorators like CallingExtension, CollaborativeDocument, CollaborativeWhiteboard.
*/
declare enum DocumentIconAlignment {
left = 0,
right = 1
}
/**
* This is used to specify the alignment of the tabs.
* It is used in CometChatTabs and CometChatContacts components.
*/
declare enum TabAlignment {
top = 0,
bottom = 1,
left = 2,
right = 3
}
/**
* This is used to specify the status of the message delivery.
* It is used in components related to messages.
*/
declare enum MessageStatus {
inprogress = 0,
success = 1,
error = 2
}
/**
* This is used to specify the types of the read receipts for the message.
* It is used in Bubbles, CometChatMessageInformation components.
*/
declare enum Receipts {
wait = 0,
sent = 1,
delivered = 2,
read = 3,
error = 4
}
/**
* This is used for specifying the position of the title.
*/
declare enum TitleAlignment {
left = 0,
center = 1
}
/**
* It is used to specify the mode of selection for the list of items.
* It is used in components where there is a list of items involed, like users/groups etc.
*/
declare enum SelectionMode {
single = 0,
multiple = 1,
none = 2
}
/**
* This is used to specify the states of the operation on the UI.
* It has options like:
* loading: to be used while waiting for a particular operation,
* empty: when there is nothing to be displayed,
* error: when an error occurs in the operation, and
* loaded: when the operation is completed.
*/
declare enum States {
loading = 0,
empty = 1,
error = 2,
loaded = 3
}
/**
* This is used to specify the position for the time-stamp.
* It is used in CometChatMessageList component.
*/
declare enum TimestampAlignment {
top = 0,
bottom = 1
}
/**
* This is used to specify the alignment for the icon button.
* It is used in CometChatTabs, CometChatOutgoingCall components.
*/
declare enum IconButtonAlignment {
top = "column",
bottom = "column-reverse",
left = "row",
right = "row-reverse"
}
/**
* It is used to specify the type for the recording.
* It is used in CometChatMessageComposer component.
*/
declare enum RecordingType {
audio = 0,
video = 1
}
/**
* It is used to specify which tabs should be visible amongst user and group.
* It is used in CometChatContacts component.
*/
declare enum TabsVisibility {
usersAndGroups = 0,
users = 1,
groups = 2
}
/**
* This is used to specify the type of the call.
* It is used in CometChatCallLogs, CometChatOngoingCall components.
*/
declare enum CallWorkflow {
defaultCalling = 0,
directCalling = 1
}
/**
* This is used to provide the alignment for the panel.
* It is used in CometChatMessageList component and AI module components.
*/
declare enum PanelAlignment {
composerHeader = 0,
messageListHeader = 1,
messageListFooter = 2,
messages = 3
}
/**
* It is used to provide the alignment for the labels.
*/
declare enum LabelAlignment {
top = "column",
bottom = "column-reverse",
left = "row",
right = "row-reverse"
}
/**
* It is used to specify the type of the UI element.
* It is used in modal components.
*/
declare enum ElementType {
label = "label",
text = "textInput",
dropdown = "dropdown",
checkbox = "checkbox",
radio = "radio",
button = "button",
singleSelect = "singleSelect",
dateTime = "dateTime"
}
/**
* It is used to specify what action a button should perform.
* It is used in InteractiveMessageUtils function and in modal components.
*/
declare enum ButtonAction {
apiAction = "apiAction",
urlNavigation = "urlNavigation",
custom = "custom"
}
/**
* It is used to specify the type of the http request call.
* It is used in InteractiveMessageUtils function and APIAction inside modals.
*/
declare enum HTTPSRequestMethods {
POST = "POST",
PUT = "PUT",
PATCH = "PATCH",
DELETE = "DELETE"
}
/**
* It is used to select the mode for date time picker component.
* It is used in DateTimePickerElement component.
*/
declare enum DateTimePickerMode {
date = "date",
dateTime = "dateTime",
time = "time"
}
/**
* It is used for specifying the type of user/members list.
* It is used in CometChatMessageComposer and CometChatUserMemberWrapper components.
*/
declare enum UserMemberListType {
users = 0,
groupmembers = 1
}
/**
* This is used to specify the source for mouse event with mentions information.
* It is used in CometChatMentionsFormatter util.
*/
declare enum MouseEventSource {
mentions = 0
}
/**
* It is used to describe the mode for previewing message.
* It is used in CometChatMessageComposer component.
*/
declare enum PreviewMessageMode {
edit = 0,
none = 1
}
/**
* It is generally used for formatting the text by providing the required data.
* It is used in CometChatConversations, CometChatTextFormatter and CometChatMentionsFormatter.
*/
declare enum MentionsTargetElement {
textinput = 0,
textbubble = 1,
conversation = 2
}
/**
* It is used for providing the value for the mentions visibility.
* It is used in CometChatMentionsFormatter component.
*/
declare enum MentionsVisibility {
usersConversationOnly = 0,
groupConversationOnly = 1,
both = 2
}
interface MentionsProps {
userMemberListType?: UserMemberListType;
onItemClick?: (user: CometChat.User | CometChat.GroupMember) => void;
itemView?: (item?: CometChat.User | CometChat.GroupMember) => JSX.Element;
searchKeyword?: string;
group?: CometChat.Group;
subtitleView?: (item?: CometChat.User | CometChat.GroupMember) => JSX.Element;
usersRequestBuilder?: CometChat.UsersRequestBuilder;
onEmpty?: () => void;
groupMemberRequestBuilder?: CometChat.GroupMembersRequestBuilder;
onError?: () => void;
}
declare function CometChatUserMemberWrapper(props: MentionsProps): react_jsx_runtime.JSX.Element;
/**
* Abstract class representing a data source for extensions.
* Provides methods to enable and add extensions, and to get the extension ID.
*/
declare abstract class ExtensionsDataSource {
/**
* Abstract method to add an extension. Implementations must provide their own logic.
*
* @abstract
*/
abstract addExtension(): void;
/**
* Abstract method to get the unique identifier for the extension.
* Implementations must provide their own logic to return the extension ID.
*
* @abstract
* @returns {string} The unique identifier for the extension.
*/
abstract getExtensionId(): string;
/**
* Enables the extension if it is not already enabled.
* Checks if the extension is enabled using `CometChat.isExtensionEnabled()` and
* adds the extension if it is enabled.
*
* @returns {void}
*/
enable(): void;
}
declare var CometChatUIKitCalls: any;
/**
* Represents the configuration for a calendar object.
*/
declare class CalendarObject {
/** Custom formatting for dates that fall on the same day. */
today?: string;
/** Custom formatting for dates that fall on the previous day. */
yesterday?: string;
/** Custom formatting for dates within the last week. */
lastWeek?: string;
/** Custom formatting for dates that do not fit other categories. */
otherDays?: string;
/**
* Relative time formatting for specific time units.
*/
relativeTime?: {
/** Formatting for minutes (singular). */
minute?: string;
/** Formatting for minutes (plural). */
minutes?: string;
/** Formatting for hours (singular). */
hour?: string;
/** Formatting for hours (plural). */
hours?: string;
};
constructor(calendaObject: CalendarObject);
}
declare class OutgoingCallConfiguration {
disableSoundForCalls?: boolean;
customSoundForCalls?: string;
titleView?: (call: CometChat.Call) => JSX.Element;
subtitleView?: (call: CometChat.Call) => JSX.Element;
avatarView?: (call: CometChat.Call) => JSX.Element;
cancelButtonView?: (call: CometChat.Call) => JSX.Element;
onError?: (error: CometChat.CometChatException) => void;
onCallCanceled?: Function;
constructor(configuration: OutgoingCallConfiguration);
}
declare class CallButtonConfiguration {
callSettingsBuilder?: (isAudioOnlyCall: boolean, user?: CometChat.User, group?: CometChat.Group) => typeof CometChatUIKitCalls.CallSettingsBuilder;
onVoiceCallClick?: () => void;
onVideoCallClick?: () => void;
onError?: ((error: CometChat.CometChatException) => void) | null;
outgoingCallConfiguration?: OutgoingCallConfiguration;
constructor(configuration?: CallButtonConfiguration);
}
declare class CallingConfiguration {
groupCallSettingsBuilder?: (message: CometChat.CustomMessage) => typeof CometChatUIKitCalls.CallSettingsBuilder;
callButtonConfiguration?: CallButtonConfiguration;
callInitiatedDateTimeFormat?: CalendarObject;
constructor(configuration?: CallingConfiguration);
}
declare class CallingExtension extends ExtensionsDataSource {
private configuration?;
constructor(configuration?: CallingConfiguration);
enable(): void;
addExtension(): void;
getExtensionId(): string;
}
/**
* Represents the localization settings for an application or component.
*/
interface LocalizationSettings {
/** The language code (e.g., 'en', 'fr') for the current localization. */
language?: string;
/** Object containing key-value pairs for translations in the current language. */
translationsForLanguage?: {
[key: string]: any;
};
/** Whether to disable automatic language detection. */
disableAutoDetection?: boolean;
/** The fallback language code to use if the primary language is not available. */
fallbackLanguage?: string;
/** Whether to disable localization for date and time values. */
disableDateTimeLocalization?: boolean;
/** The timezone for date and time formatting. */
timezone?: string;
/** Custom calendar formatting defined using a CalendarObject. */
calendarObject?: CalendarObject;
/** Function to handle missing translation keys. */
missingKeyHandler?: (key: string) => void;
}
/**
* The `CometChatLocalize` class handles localization for the CometChat application.
* It provides functionality to detect the user's browser language settings and
* set the application's language accordingly.
*/
declare class CometChatLocalize {
/** Properties and constants */
static language: string;
static fallbackLanguage: string;
static timezone: string;
static translations: {
[key: string]: any;
};
static localizationSettings: LocalizationSettings;
static calendarObject: CalendarObject;
static disableAutoDetection: boolean;
static disableDateTimeLocalization: boolean;
private static defaultTimezones;
/**
* Adds custom translations to the default translations.
* @param {object} resources - Custom translations object.
*/
static addTranslation(resources: object): void;
/**
* Returns the browser language.
* @returns {string} Browser language (e.g., "en-US").
*/
static getBrowserLanguage(): string;
/**
* Localizes a given string based on the active language.
* @param {string} str - String to localize.
* @returns {string} Localized string.
*/
static getLocalizedString: (str: string) => any;
private static getDefaultTimeZone;
/**
* Initializes localization settings (v2).
* @param {LocalizationSettings} settings - Localization settings.
*/
static init(settings: LocalizationSettings): void;
/**
* Gets the current language.
* @returns {string} Current language.
*/
static getCurrentLanguage(): string;
/**
* Sets the current language.
* @param {string} language - Language code to set.
*/
static setCurrentLanguage(language: string): void;
/**
* @Returns the current language.
*/
static getDefaultLanguage(): string;
/**
* @Returns the language to localize date.
*/
static getDateLocaleLanguage(): string;
/**
* Formats a date using a given pattern.
* @param {Date} date - Date to format.
* @param {string} format - Format pattern.
* @returns {string} Formatted date.
*/
private static formatDateFromPattern;
/**
* Formats a timestamp based on the provided calendar configuration.
* @param {number} timestamp - Timestamp to format.
* @param {CalendarObject} calendarObject - Calendar configuration.
* @returns {string} Formatted date string.
*/
static formatDate(timestamp: number, calendarObject: CalendarObject): string;
private static isYesterday;
}
declare const getLocalizedString: (str: string) => any;
/**
* Represents the settings required to initialize the CometChat SDK.
* This class holds various configuration options, such as app credentials, socket connection settings, and feature toggles.
*
* @class UIKitSettings
*/
declare class UIKitSettings {
/**
* Unique ID for the app, available on the CometChat dashboard.
* @type {string}
*/
readonly appId?: string;
/**
* Region for the app, such as "us" or "eu".
* @type {string}
*/
readonly region?: string;
/**
* Sets the subscription type for presence.
* @type {string}
*/
readonly subscriptionType?: string;
/**
* Configures WebSocket connections. When set to true, establishes connection automatically on app initialization.
* @type {boolean}
* @default true
*/
readonly autoEstablishSocketConnection?: boolean;
/**
* Authentication key for the app, available on the CometChat dashboard.
* @type {string}
*/
readonly authKey?: string;
/**
* Token representing the device, used for push notifications.
* @type {string}
*/
readonly deviceToken?: string;
/**
* API key for Google services.
* @type {string}
*/
readonly googleApiKey?: string;
/**
* Flag to disable the calling feature.
* @type {boolean}
* @default false
*/
readonly disableCalling: boolean;
/**
* Subscribes to user presence for users having the specified roles.
* @type {string[]}
*/
readonly roles?: string[];
/**
* Custom admin URL, used instead of the default admin URL for dedicated deployments.
* @type {string}
*/
readonly adminHost?: string;
/**
* Custom client URL, used instead of the default client URL for dedicated deployments.
* @type {string}
*/
readonly clientHost?: string;
/**
* Data source for managing UI extensions.
* @type {ExtensionsDataSource[]}
*/
readonly extensions?: ExtensionsDataSource[];
/**
* Data source for managing calls.
* @type {ExtensionsDataSource}
*/
readonly callingExtension?: CallingExtension;
/**
* Private constructor to initialize the settings using the provided builder.
* @param {UIKitSettingsBuilder} builder - The builder instance containing the settings configuration.
*/
private constructor();
/**
* Creates an instance of UIKitSettings from the provided builder.
* @param {UIKitSettingsBuilder} builder - The builder instance containing the settings configuration.
* @returns {UIKitSettings} A new instance of UIKitSettings.
*/
static fromBuilder(builder: UIKitSettingsBuilder): UIKitSettings;
/**
* Retrieves the app ID.
* @returns {string} The unique ID of the app.
*/
getAppId(): string;
/**
* Retrieves the region.
* @returns {string} The region of the app.
*/
getRegion(): string;
/**
* Retrieves the roles for presence subscription.
* @returns {string[]} The list of roles subscribed to presence.
*/
getRoles(): string[];
/**
* Retrieves the subscription type for presence.
* @returns {string} The subscription type.
*/
getSubscriptionType(): string;
/**
* Retrieves the authentication key.
* @returns {string} The authentication key.
*/
getAuthKey(): string;
/**
* Checks if auto-establish socket connection is enabled.
* @returns {boolean} True if auto-establish is enabled, otherwise false.
*/
isAutoEstablishSocketConnection(): boolean;
/**
* Retrieves the custom admin host URL.
* @returns {string} The admin host URL.
*/
getAdminHost(): string;
/**
* Retrieves the custom client host URL.
* @returns {string} The client host URL.
*/
getClientHost(): string;
/**
* Retrieves the list of UI extensions.
* @returns {ExtensionsDataSource[]} The list of UI extensions.
*/
getExtensions(): ExtensionsDataSource[];
/**
* Retrieves the calling extension.
* @returns {ExtensionsDataSource[]}
*/
getCallsExtension(): ExtensionsDataSource;
}
declare class UIKitSettingsBuilder {
/**
* Unique ID for the app, available on the CometChat dashboard.
* @type {string}
*/
appId?: string;
/**
* Region for the app, such as "us" or "eu".
* @type {string}
*/
region?: string;
/**
* Sets the subscription type for presence.
* @type {string}
*/
subscriptionType?: string;
/**
* Subscribes to user presence for users having the specified roles.
* @type {string[]}
*/
roles?: string[];
/**
* Configures WebSocket connections.
* @type {boolean}
*/
autoEstablishSocketConnection?: boolean;
/**
* Authentication key for the app, available on the CometChat dashboard.
* @type {string}
*/
authKey?: string;
/**
* Token representing the device, used for push notifications.
* @type {string}
*/
deviceToken?: string;
/**
* API key for Google services.
* @type {string}
*/
googleApiKey?: string;
/**
* Data source for managing UI extensions.
* @type {ExtensionsDataSource[]}
*/
extensions?: ExtensionsDataSource[];
/**
* Data source for managing calls extension.
* @type {CallingExtension}
*/
callingExtension?: CallingExtension;
/**
* Flag to disable the calling feature.
* @type {boolean}
* @default false
*/
disableCalling: boolean;
/**
* Custom admin URL, used instead of the default admin URL for dedicated deployments.
* @type {string}
*/
adminHost?: string;
/**
* Custom client URL, used instead of the default client URL for dedicated deployments.
* @type {string}
*/
clientHost?: string;
/**
* Builds and returns an instance of UIKitSettings.
* @returns {UIKitSettings} A new instance of UIKitSettings with the specified configuration.
*/
build(): UIKitSettings;
/**
* Sets the app ID.
* @param {string} appId - The unique ID of the app.
* @returns {UIKitSettingsBuilder} The builder instance.
*/
setAppId(appId: string): UIKitSettingsBuilder;
/**
* Sets the region.
* @param {string} region - The region of the app.
* @returns {UIKitSettingsBuilder} The builder instance.
*/
setRegion(region: string): UIKitSettingsBuilder;
/**
* Subscribes to presence updates for all users.
* @returns {UIKitSettingsBuilder} The builder instance.
*/
subscribePresenceForAllUsers(): UIKitSettingsBuilder;
/**
* Subscribes to presence updates for specific roles.
* @param {string[]} roles - The roles to subscribe to.
* @returns {UIKitSettingsBuilder} The builder instance.
*/
subscribePresenceForRoles(roles: string[]): UIKitSettingsBuilder;
/**
* Subscribes to presence updates for specific roles.
* @param {string[]} roles - The roles to subscribe to.
* @returns {UIKitSettingsBuilder} The builder instance.
*/
subscribePresenceForFriends(): UIKitSettingsBuilder;
/**
* Sets the roles for presence subscription.
* @param {string[]} roles - The roles to subscribe to.
* @returns {UIKitSettingsBuilder} The builder instance.
*/
setRoles(roles: string[]): UIKitSettingsBuilder;
/**
* Enables or disables the auto-establish socket connection.
* @param {boolean} autoEstablishSocketConnection - True to enable, false to disable.
* @returns {UIKitSettingsBuilder} The builder instance.
*/
setAutoEstablishSocketConnection(autoEstablishSocketConnection: boolean): UIKitSettingsBuilder;
/**
* Sets the authentication key.
* @param {string} authKey - The authentication key.
* @returns {UIKitSettingsBuilder} The builder instance.
*/
setAuthKey(authKey: string): UIKitSettingsBuilder;
/**
* Sets the custom admin host URL.
* @param {string} adminHost - The admin host URL.
* @returns {UIKitSettingsBuilder} The builder instance.
*/
setAdminHost(adminHost: string): UIKitSettingsBuilder;
/**
* Sets the custom client host URL.
* @param {string} clientHost - The client host URL.
* @returns {UIKitSettingsBuilder} The builder instance.
*/
setClientHost(clientHost: string): UIKitSettingsBuilder;
/**
* Sets the list of UI extensions.
* @param {ExtensionsDataSource[]} extensions - The list of UI extensions.
* @returns {UIKitSettingsBuilder} The builder instance.
*/
setExtensions(extensions: ExtensionsDataSource[]): UIKitSettingsBuilder;
/**
* Sets the calling extension.
* @param {ExtensionsDataSource} calling.
* @returns {UIKitSettingsBuilder} The builder instance.
*/
setCallsExtension(callingExtension: CallingExtension): UIKitSettingsBuilder;
}
/**
* Manages and plays various types of audio for CometChat events.
* The class provides methods to play sounds for incoming and outgoing messages and calls.
* It is used in CometChatCallButtons, CometChatIncomingCall, CometChatConversations, CometChatMessageComposer components.
*/
declare class CometChatSoundManager {
static audio: string | null | HTMLAudioElement;
static Sound: sounds;
/**
* Plays the sound for an incoming message.
* @param {string|null} customSound - The custom sound URL or null to use the default.
*
* @example
* // Trigger the audio sound for an incoming message
* CometChatSoundManager.onIncomingMessage();
*
* @example
* // Trigger the audio sound of your choice for an incoming message
* CometChatSoundManager.onIncomingMessage("MP3_FILE_ASSET_PATH");
*/
static onIncomingMessage: (customSound?: string | null) => void;
/**
* Plays the sound for an incoming message from another user.
* @param {string|null} customSound - The custom sound URL or null to use the default.
*
* @example
* // Trigger the audio sound for an incoming message from another user
* CometChatSoundManager.onIncomingOtherMessage();
*
* @example
* // Trigger the audio sound of your choice for an incoming message from another user
* CometChatSoundManager.onIncomingOtherMessage("MP3_FILE_ASSET_PATH");
*/
static onIncomingOtherMessage: (customSound?: string | null) => void;
/**
* Plays the sound for an outgoing message.
* @param {string|null} customSound - The custom sound URL or null to use the default.
*
* @example
* // Trigger the audio sound for an outgoing message
* CometChatSoundManager.onOutgoingMessage();
*
* @example
* // Trigger the audio sound of your choice for an outgoing message
* CometChatSoundManager.onOutgoingMessage("MP3_FILE_ASSET_PATH");
*/
static onOutgoingMessage: (customSound?: string | null) => void;
/**
* Plays the sound for an incoming call.
* @param {string|null} customSound - The custom sound URL or null to use the default.
*
* @example
* // Trigger the audio sound for an incoming call
* CometChatSoundManager.onIncomingCall();
*
* @example
* // Trigger the audio sound of your choice for an incoming call
* CometChatSoundManager.onIncomingCall("MP3_FILE_ASSET_PATH");
*/
static onIncomingCall: (customSound?: string | null) => void;
/**
* Plays the sound for an outgoing call.
* @param {string|null} customSound - The custom sound URL or null to use the default.
*
* @example
* // Trigger the audio sound for an outgoing call
* CometChatSoundManager.onOutgoingCall();
*
* @example
* // Trigger the audio sound of your choice for an outgoing call
* CometChatSoundManager.onOutgoingCall("MP3_FILE_ASSET_PATH");
*/
static onOutgoingCall: (customSound?: string | null) => void;
/**
* Contains mappings of sound types to their respective handler functions.
*
* The handlers are functions that trigger the playback of sounds for different events.
*
* @type {Object}
* @property {Function} incomingCall - Handler function for playing the incoming call sound.
* @property {Function} outgoingCall - Handler function for playing the outgoing call sound.
* @property {Function} incomingMessage - Handler function for playing the incoming message sound.
* @property {Function} incomingMessageFromOther - Handler function for playing the incoming message from other sound.
* @property {Function} outgoingMessage - Handler function for playing the outgoing message sound.
*/
static handlers: {
incomingCall: (customSound?: string | null) => void;
outgoingCall: (customSound?: string | null) => void;
incomingMessage: (customSound?: string | null) => void;
incomingMessageFromOther: (customSound?: string | null) => void;
outgoingMessage: (customSound?: string | null) => void;
};
/**
* Plays a predefined sound based on the provided sound type.
* @param {"incomingCall" | "incomingMessage" | "incomingMessageFromOther" | "outgoingCall" | "outgoingMessage"} sound - The sound type to play.
* @param {string|null} customSound - The custom sound URL or null to use the default.
* @returns {boolean} - Returns false if the sound handler is not found.
*
* @example
* // Play the sound for incoming messages
* CometChatSoundManager.play("incomingMessage");
*
* @example
* // Play a custom sound for outgoing messages
* CometChatSoundManager.play("outgoingMessage", "MP3_FILE_ASSET_PATH");
*/
static play(sound: "incomingCall" | "incomingMessage" | "incomingMessageFromOther" | "outgoingCall" | "outgoingMessage", customSound?: string | null): false | void;
/**
* Pauses the currently playing sound and resets its position.
*
* @example
* // Pause the ongoing audio sound
* CometChatSoundManager.pause();
*/
static pause(): void;
/**
* Checks if the user has interacted with the page.
* @returns {boolean} True if the user has interacted, false otherwise.
*/
static hasInteracted(): boolean;
}
interface sounds {
incomingCall?: "incomingCall";
incomingMessage?: "incomingMessage";
incomingMessageFromOther: "incomingMessageFromOther";
outgoingCall?: "outgoingCall";
outgoingMessage?: "outgoingMessage";
}
/**
* CometChatActions is a pre-defined structure for creating actions
* that the user can perform on a message, with properties to customize
* the appearance and behavior of the action.
* It is used in CometChatActionsIcon and CometChatActionsView components.
*/
declare class CometChatActions {
/**
* Unique identifier for the message action.
* @type {string}
*/
id: string;
/**
* Heading text for the message action.
* @type {string}
*/
title: string;
/**
* Asset URL for the icon to symbolize a message action.
* @type {string | undefined}
*/
iconURL?: string;
/**
* Creates an instance of CometChatActions.
*
* @param {Object} options - Options to initialize the action.
* @param {string} options.id - Unique identifier for the message action.
* @param {string} options.title - Heading text for the message action.
* @param {string} [options.iconURL] - Asset URL for the icon to symbolize a message action.
*/
constructor(options: {
id: string;
title: string;
iconURL?: string;
});
}
/**
* CometChatActionsIcon is a pre-defined structure for creating actions
* that the user can perform on a message with an icon representation.
* It is used in CometChatContextMenu, CometChatMessageBubble, CometChatMessageList components.
*/
declare class CometChatActionsIcon extends CometChatActions {
/**
* Function invoked when the user clicks on the message action.
* @type {(id: number) => void}
*/
onClick: (id: number) => void;
/**
* Creates an instance of CometChatActionsIcon.
*/
constructor(options: {
/**
* Unique identifier for the message action.
* @type {string}
*/
id: string;
/**
* Heading text for the message action.
* @type {string}
*/
title: string;
/**
* Asset URL for the icon to symbolize a message action.
* @type {string}
*/
iconURL: string;
/**
* Function invoked when the user clicks on the message action. This function should handle the action related to the provided message id.
* @type {(id: number) => void}
*/
onClick: (id: number) => void;
});
}
/**
* CometChatActionsView is a pre-defined structure for creating actions
* that the user can perform on a message with a customized UI view representation.
* It is used in AI module, CometChatMessageBubble, CometChatMessageComposer, CometChatMessageList components.
*/
declare class CometChatActionsView extends CometChatActions {
/**
* User-defined component to customize the action view for each option in the template.
* @type {callbacks: any) => Element | JSX.Element | undefined}
*/
customView?: (callbacks: any) => Element | JSX.Element;
/**
* Creates an instance of CometChatActionsView.
*/
constructor(options: {
/**
* Unique identifier for the message action.
* @type {string}
*/
id: string;
/**
* Heading text for the message action.
* @type {string}
*/
title: string;
/**
* Asset URL for the icon to symbolize a message action. This is optional and can be omitted.
* @type {string}
*/
iconURL?: string;
/**
* User-defined component to customize the action view. This is optional and can be omitted.
* @type {Element | JSX.Element}
*/
customView?: (callbacks: any) => Element | JSX.Element;
});
}
/**
* CometChatMessageComposerAction is a pre-defined structure for creating an attachment option
* in the CometChatMessageComposer component that the user can perform in addition to composing a message.
* It is used in AI module, CometChatMessageComposer component and Poll extension.
*/
declare class CometChatMessageComposerAction {
/**
* Unique identifier for the attachment option.
* @type {string}
*/
id: string;
/**
* Asset URL for the icon to symbolize an attachment option.
* @type {string}
*/
iconURL: string;
/**
* Function invoked when the user clicks on the attachment option.
* @type {(() => void) | null}
*/
onClick: (() => void) | null;
/**
* Heading text for the attachment option.
* @type {string}
*/
title?: string;
/**
* Creates an instance of CometChatMessageComposerAction.
*
* @param {Partial<CometChatMessageComposerAction>} props - Partial properties to initialize the action item.
*/
constructor(props: Partial<CometChatMessageComposerAction>);
}
/**
* Defines an option for message actions like edit or delete.
* Allows customization of text, icon, and click behavior.
* It is used in CometChatConversations, CometChatGroupMembers, CometChatGroups, CometChatUsers components.
*/
declare class CometChatOption {
/** Unique identifier for the option. */
id?: string;
/** Text label for the option. */
title?: string;
/** URL of the icon representing the option. */
iconURL?: string;
/** Function to be called when the option is clicked. */
onClick?: any;
/**
* Creates a new CometChatOption instance.
* @param {Partial<CometChatOption>} props - Properties to initialize the option.
*/
constructor(props: Partial<CometChatOption>);
}
/**
* CometChatMessageOption is a pre-defined structure for creating an option
* that can be used to perform an action on a message, such as edit, delete, etc.
* It is used in CometChatMessageTemplate of modal.
*/
declare class CometChatMessageOption extends CometChatOption {
/**
* Creates an instance of CometChatMessageOption.
*/
constructor({
/**
* Unique identifier for each option.
* @type {string}
*/
id,
/**
* Heading text for each option.
* @type {string}
*/
title,
/**
* Sets the asset URL of the icon for each option.
* @type {string}
*/
iconURL,
/**
* Method to be invoked when user clicks on each option.
* @type {(any) => void}
*/
onClick, }: {
id?: string | undefined;
title?: string | undefined;
iconURL?: string | undefined;
onClick?: null | undefined;
});
}
/**
* CometChatMessageTemplate is a pre-defined structure for creating message views
* that can be used as a starting point or blueprint for creating message views,
* often known as message bubbles.
* It is used in CometChatMessageInformation, CometChatMessageList components and extensions like Polls, Stickers.
*/
declare class CometChatMessageTemplate {
/**
* Type of the CometChat message.
* @type {string}
*/
type: string;
/**
* Custom component to customize the content section for each message bubble.
* By default, it displays the Text bubble, Image bubble, File bubble, Audio bubble,
* and Video bubble based on the type of the message.
* @type {(message:CometChat.BaseMessage,alignment:MessageBubbleAlignment)=> Element | JSX.Element | null}
*/
contentView: ((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element | JSX.Element | null) | null;
/**
* Custom component to customize the complete message bubble.
* By default, headerView, contentView and footerView collectively form a message bubble.
* @type {(message:CometChat.BaseMessage,alignment:MessageBubbleAlignment)=> Element | JSX.Element | null}
*/
bubbleView: ((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element | JSX.Element | null) | null;
/**
* Custom component to customize the header section for each message bubble.
* By default, it displays the message sender's name.
* @type {(message:CometChat.BaseMessage,alignment:MessageBubbleAlignment)=> Element | JSX.Element | null}
*/
headerView: ((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element | JSX.Element | null) | null;
/**
* Custom component to customize the footer section for each message bubble.
* By default, it displays the reactions.
* @type {(message:CometChat.BaseMessage,alignment:MessageBubbleAlignment)=> Element | JSX.Element | null}
*/
footerView: ((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element | JSX.Element | null) | null;
/**
* Custom component to customize the bottom view section for each message bubble.
* @type {(message:CometChat.BaseMessage,alignment:MessageBubbleAlignment)=> Element | JSX.Element | null}
*/
bottomView: ((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element | JSX.Element | null) | null;
/**
* Custom component to customize the status info section for each message bubble.
* By default, it displays the receipt and the timestamp.
* @type {(message:CometChat.BaseMessage,alignment:MessageBubbleAlignment)=> Element | JSX.Element | null}
*/
statusInfoView: ((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, hideReceipt?: boolean, messageSentAtDateTimeFormat?: CalendarObject) => Element | JSX.Element | null) | null;
/**
* List of available actions that any user can perform on a message, like reacting,
* editing or deleting a message.
* @type {(loggedInUser: CometChat.User, message: CometChat.BaseMessage) => CometChatMessageOption[]}
*/
options: (loggedInUser: CometChat.User, message: CometChat.BaseMessage, group?: CometChat.Group) => CometChatMessageOption[];
/**
* Category of the CometChat message.
* @type {string}
*/
category: string;
/**
* Creates an instance of CometChatMessageTemplate.
*
* @param {Partial<CometChatMessageTemplate>} props - Properties to initialize the message template.
*/
constructor(props: Partial<CometChatMessageTemplate>);
}
interface additionalParams {
disableMentions?: boolean;
mentionsTargetElement?: number;
textFormatters?: [];
alignment?: MessageBubbleAlignment;
textFormattersList?: CometChatTextFormatter[];
}
interface lastConversationParams {
textFormatters: CometChatMentionsFormatter[];
disableMentions?: boolean;
mentionsTargetElement?: number;
alignment?: MessageBubbleAlignment;
textFormattersList?: CometChatTextFormatter[];
}
/**
* Utility class for handling conversations in CometChat.
* It is used in CometChatConversations component and dataSource utils.
*/
declare class ConversationUtils {
private static additionalParams?;
/**
* Returns the default conversation options.
*
* @returns {CometChatOption[]} - An array of default conversation options.
*/
static getDefaultOptions(): CometChatOption[];
/**
* Retrieves the last conversation message for a given conversation object.
*
* @param {CometChat.Conversation} conversationObject - The conversation object.
* @param {CometChat.User} loggedInUser - The logged-in user.
* @param {additionalParams} [additionalParams] - Additional parameters for message formatting.
* @returns {string} - The last conversation message as a string.
*/
static getLastConversationMessage(conversationObject: CometChat.Conversation, loggedInUser: CometChat.User, additionalParams?: lastConversationParams): string;
/**
* Retrieves the last message for a given conversation.
*
* @param {CometChat.Conversation} conversation - The conversation object.
* @returns {string} - The last message as a string.
*/
static getLastMessage(conversation: CometChat.Conversation): string;
/**
* Retrieves the last custom message for a given conversation.
*
* @param {CometChat.Conversation} conversation - The conversation object.
* @returns {string} - The custom message type as a string.
*/
static getLastMessageCustom(conversation: CometChat.Conversation): string;
/**
* Retrieves the last action message for a given conversation.
*
* @param {CometChat.Conversation} conversation - The conversation object.
* @returns {string} - The action message as a string.
*/
static getLastMessageAction(conversation: CometChat.Conversation): string;
/**
* Retrieves the last call message from a conversation.
* Differentiates between audio and video calls.
*
* @param {CometChat.Conversation} conversation - The conversation object to retrieve the last call message from.
* @returns {string} - A localized string indicating the type of call (audio or video).
*/
static getLastMessageCall(conversation: CometChat.Conversation): any;
}
/**
* Class that handles the text formatting for URLs in CometChat.
* CometChatUrlsFormatter is a child class of CometChatTextFormatter.
* It extends the functionality of text formatting to specifically handle URLs.
* It is used in extension decorators like link preview, message translation, and dataSource utils.
*/
declare class CometChatUrlsFormatter extends CometChatTextFormatter {
constructor(regexPatterns: Array<RegExp>);
protected onRegexMatch(inputText?: string | null): string;
registerEventListeners(element: HTMLElement, classList: DOMTokenList): HTMLElement;
}
type ComposerId = {
parentMessageId: number | null;
user: string | null;
group: string | null;
};
/**
* Utility class that extends DataSource and provides getters for message options.
* It is used in message and dataSource utils.
*/
interface additionalParamsOptions {
hideReplyInThreadOption?: boolean;
hideTranslateMessageOption?: boolean;
hideReactionOption?: boolean;
hideEditMessageOption?: boolean;
hideDeleteMessageOption?: boolean;
hideMessagePrivatelyOption?: boolean;
hideCopyMessageOption?: boolean;
hideMessageInfoOption?: boolean;
}
declare class MessagesDataSource implements DataSource {
getEditOption(): CometChatActionsIcon;
getDeleteOption(): CometChatActionsIcon;
getReactionOption(): CometChatActionsView;
getReplyInThreadOption(): CometChatActionsIcon;
getSendMessagePrivatelyOption(): CometChatActionsIcon;
getCopyOption(): CometChatActionsIcon;
getMessageInfoOption(): CometChatActionsIcon;
isSentByMe(loggedInUser: CometChat$1.User, message: CometChat$1.BaseMessage): boolean;
getTextMessageOptions(loggedInUser: CometChat$1.User, messageObject: CometChat$1.BaseMessage, group?: CometChat$1.Group, additionalParams?: additionalParamsOptions): Array<CometChatActionsIcon | CometChatActionsView>;
getIsSentByMe(message: CometChat$1.BaseMessage): boolean;
getImageMessageOptions(loggedInUser: CometChat$1.User, messageObject: CometChat$1.BaseMessage, group?: CometChat$1.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
getVideoMessageOptions(loggedInUser: CometChat$1.User, messageObject: CometChat$1.BaseMessage, group?: CometChat$1.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
getAudioMessageOptions(loggedInUser: CometChat$1.User, messageObject: CometChat$1.BaseMessage, group?: CometChat$1.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
getFileMessageOptions(loggedInUser: CometChat$1.User, messageObject: CometChat$1.BaseMessage, group?: CometChat$1.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
getReceiptClass(status?: number): "error" | "read" | "delivered" | "sent" | "wait" | undefined;
/**
* Function to get receipt for message bubble
* @param {CometChat.BaseMessage} item - The message bubble for which the receipt needs to be fetched
* @returns {JSX.Element | null} Returns JSX.Element for receipt of a message bubble or null
*/
getBubbleStatusInfoReceipt: (item: CometChat$1.BaseMessage, hideReceipt?: boolean) => JSX.Element | null;
/**
* Function for displaying the timestamp next to messages.
* @returns CalendarObject
*/
getMessageSentAtDateFormat(messageSentAtDateTimeFormat?: CalendarObject): {
today: string;
yesterday: string;
lastWeek?: string | undefined;
otherDays: string;
relativeTime?: {
minute?: string | undefined;
minutes?: string | undefined;
hour?: string | undefined;
hours?: string | undefined;
} | undefined;
};
/**
* Function to get status and date for message bubble
* @param {CometChat.BaseMessage} item - The message bubble for which the information needs to be fetched
* @returns {JSX.Element | null} Returns JSX.Element for status and date of a message bubble or null
*/
getBubbleStatusInfoDate: (item: CometChat$1.BaseMessage, messageSentAtDateTimeFormat?: CalendarObject) => JSX.Element | null;
getStatusInfoView: (_messageObject: CometChat$1.BaseMessage, _alignment: MessageBubbleAlignment, hideReceipt?: boolean, messageSentAtDateTimeFormat?: CalendarObject) => react_jsx_runtime.JSX.Element | null;
getBottomView(_messageObject: CometChat$1.BaseMessage, _alignment: MessageBubbleAlignment): null;
getTextMessageTemplate(additionalConfigurations?: additionalParams): CometChatMessageTemplate;
getAudioMessageTemplate(): CometChatMessageTemplate;
getVideoMessageTemplate(): CometChatMessageTemplate;
getImageMessageTemplate(): CometChatMessageTemplate;
getGroupActionTemplate(additionalConfigurations?: {
hideGroupActionMessages?: boolean;
}): CometChatMessageTemplate;
getFileMessageTemplate(): CometChatMessageTemplate;
getAllMessageTemplates(additionalConfigurations?: additionalParams): Array<CometChatMessageTemplate>;
getMessageTemplate(messageType: string, messageCategory: string, additionalConfigurations?: additionalParams): CometChatMessageTemplate | null;
getMessageOptions(loggedInUser: CometChat$1.User, messageObject: CometChat$1.BaseMessage, group?: CometChat$1.Group, additionalParams?: additionalParamsOptions): Array<CometChatActionsIcon | CometChatActionsView>;
getCommonOptions(loggedInUser: CometChat$1.User, messageObject: CometChat$1.BaseMessage, group?: CometChat$1.Group, additionalParams?: additionalParamsOptions): Array<CometChatActionsIcon | CometChatActionsView>;
getAllMessageTypes(): Array<string>;
addList(): string;
getAllMessageCategories(additionalConfigurations?: {
hideGroupActionMessages?: boolean;
}): Array<string>;
getStickerButton(id: ComposerId, user?: CometChat$1.User, group?: CometChat$1.Group): JSX.Element | undefined;
getId(): string;
getTextMessageContentView(message: CometChat$1.TextMessage, _alignment: MessageBubbleAlignment, additionalConfigurations?: additionalParams): JSX.Element | Element;
getAudioMessageContentView(message: CometChat$1.MediaMessage, _alignment: MessageBubbleAlignment): Element | JSX.Element;
getFileMessageContentView(message: CometChat$1.MediaMessage, _alignment: MessageBubbleAlignment): Element | JSX.Element;
getImageMessageContentView(message: CometChat$1.MediaMessage, _alignment: MessageBubbleAlignment): Element | JSX.Element;
getVideoMessageContentView(message: CometChat$1.MediaMessage, _alignment: MessageBubbleAlignment): Element | JSX.Element;
getActionMessage(message: any): string;
getDeleteMessageBubble(message: CometChat$1.BaseMessage, text?: string, alignment?: MessageBubbleAlignment): react_jsx_runtime.JSX.Element;
getGroupActionBubble(message: CometChat$1.BaseMessage): react_jsx_runtime.JSX.Element;
getTextMessageBubble(messageText: string, message: CometChat$1.TextMessage, alignment: MessageBubbleAlignment, additionalConfigurations?: additionalParams): Element | JSX.Element;
getAudioMessageBubble(audioUrl: string, message: CometChat$1.MediaMessage, title?: string, alignment?: MessageBubbleAlignment): Element | JSX.Element;
/**
* Function to check mimeType and return the iconUrl of that type
* @param mimeType
* @returns
*/
getFileType: (mimeType: string) => string;
/**
* Function to convert bites to human readable fromat eg. kb,mb,gb
* @param sizeInBytes
* @returns
*/
getFileSize: (sizeInBytes: number) => string;
getFileMessageBubble(fileUrl: string, message: CometChat$1.MediaMessage, title?: string, alignment?: MessageBubbleAlignment): Element | JSX.Element;
getImageMessageBubble(imageUrl: string, placeholderImage: string, message: CometChat$1.MediaMessage, onClick?: Function): react_jsx_runtime.JSX.Element;
getVideoMessageBubble(videoUrl: string, message: CometChat$1.MediaMessage, thumbnailUrl?: string, onClick?: Function): Element | JSX.Element;
imageAttachmentOption(): CometChatMessageComposerAction;
videoAttachmentOption(): CometChatMessageComposerAction;
audioAttachmentOption(): CometChatMessageComposerAction;
fileAttachmentOption(): CometChatMessageComposerAction;
getAttachmentOptions(id: ComposerId, additionalConfigurations?: any): Array<CometChatMessageComposerAction>;
getLastConversationMessage(conversation: CometChat$1.Conversation, loggedInUser: CometChat$1.User, additionalConfigurations: additionalParams): string;
getAuxiliaryHeaderMenu(user?: CometChat$1.User, group?: CometChat$1.Group, additionalConfigurations?: any): Element[] | JSX.Element[];
/**
* Adds styled @ for every mention in the text by matching uid
*
* @param {CometChat.TextMessage} message
* @param {string} subtitle
* @returns {void}
*/
getMentionsFormattedText(message: CometChat$1.TextMessage, subtitle: string, mentionsFormatterParams: {
mentionsTargetElement: MentionsTargetElement;
}): string;
getAllTextFormatters(formatterParams: additionalParams): CometChatTextFormatter[];
getMentionsTextFormatter(params: additionalParams): CometChatMentionsFormatter;
getUrlTextFormatter(params?: additionalParams): CometChatUrlsFormatter;
getFormMessageBubble(message: CometChat$1.InteractiveMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
getSchedulerMessageBubble(message: CometChat$1.InteractiveMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
getCardMessageBubble(message: CometChat$1.InteractiveMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
getFormMessageTemplate(): CometChatMessageTemplate;
getSchedulerMessageTemplate(): CometChatMessageTemplate;
getCardMessageTemplate(): CometChatMessageTemplate;
getFormMessageContentView(message: CometChat$1.InteractiveMessage, _alignment: MessageBubbleAlignment): Element | JSX.Element;
getSchedulerMessageContentView(message: CometChat$1.InteractiveMessage, _alignment: MessageBubbleAlignment): Element | JSX.Element;
getCardMessageContentView(message: CometChat$1.InteractiveMessage, _alignment: MessageBubbleAlignment): Element | JSX.Element;
}
/**
* Abstract class that provides methods for formatting text in CometChat.
* It is used in CometChatMessageComposer, CometChatConversations, CometChatMessageList components and extension decorators.
*/
declare abstract class CometChatTextFormatter {
/**
* An ID for tracking the timeout.
*/
protected timeoutID?: number;
/**
* A flag to start tracking once a specific keyboard event occurs.
*/
protected startTracking: boolean;
/**
* Current position/type of the text selection or cursor in the text input field.
*/
protected currentCaretPosition?: Selection;
/**
* Represents the text range that the user has selected or the cursor position in the text input field.
*/
protected currentRange?: Range;
/**
* Reference to the text input field DOM element.
*/
protected inputElementReference?: HTMLElement;
/**
* The regex patterns to find specific text pattern in the user input text.
*/
protected regexPatterns: RegExp[];
/**
* The regex patterns to replace text formatting in the user input text.
*/
protected regexToReplaceFormatting: RegExp[];
/**
* Mapping of CSS classes for styling the text.
*/
protected cssClassMapping: Array<string>;
/**
* The character to track once typed in the text input field.
*/
protected trackCharacter: string;
/**
* Callback function to be triggered on the 'keyup' event.
*/
protected keyUpCallBack: Function;
/**
* Callback function to be triggered on the 'keydown' event.
*/
protected keyDownCallBack: Function;
protected classes: string[];
/**
* Function reference to trigger a re-render of the component.
*/
reRender: Function;
messageBubbleAlignment: MessageBubbleAlignment;
/**
* The message object in context.
*/
protected messageObject: CometChat.BaseMessage;
user?: CometChat.User;
group?: CometChat.Group;
composerId?: ComposerId;
/**
* The user who is currently logged in.
*/
protected loggedInUser?: CometChat.User | null;
protected id?: string;
protected textStyle: {
[key: string]: string;
};
/**
* Sets the current caret position and selection range.
*
* @param {Selection} currentCaretPosition - The current caret position.
* @param {Range} currentRange - The current selection range.
*/
setCaretPositionAndRange(currentCaretPosition: Selection, currentRange: Range): void;
/**
* Set css class to be applied on format spans
*/
setClasses(classes: string[]): void;
/**
* Sets the regex patterns to match.
* @param regexPatterns - Array of regex patterns.
*/
setRegexPatterns(regexPatterns: Array<RegExp>): void;
/**
* Gets the regex patterns.
*/
getRegexPatterns(): RegExp[];
/**
* Sets the regex patterns to replace formatting.
* @param regexToReplaceFormatting - Array of regex patterns.
*/
setRegexToReplaceFormatting(regexToReplaceFormatting: Array<RegExp>): void;
/**
* Sets the tracking character.
* @param trackCharacter - The character to track.
*/
setTrackingCharacter(trackCharacter: string): void;
/**
* Sets the input element reference.
* @param inputElementReference - The reference to the input element.
*/
setInputElementReference(inputElementReference: HTMLElement): void;
/**
* Sets the re-render function.
* @param reRender - The function to call for re-rendering.
*/
setReRender(reRender: Function): void;
/**
* Retrieves the keydown callback function.
* @returns {Function} The keydown callback function.
*/
getKeyUpCallBack(): Function;
/**
* Sets the keydown callback function.
* @param {Function} keyUpCallBack - The callback function for handling key down events.
*/
setKeyUpCallBack(keyUpCallBack: Function): void;
/**
* Retrieves the keydown callback function.
* @returns {Function} The keydown callback function.
*/
getKeyDownCallBack(): Function;
/**
* Sets the keydown callback function.
* @param {Function} keyDownCallBack - The keydown callback function.
*/
setKeyDownCallBack(keyDownCallBack: Function): void;
/**
* Retrieves the currently logged in user.
* @returns The currently logged user.
*/
getLoggedInUser(): _cometchat_chat_sdk_javascript.User | null | undefined;
/**
* Sets the currently logged in user.
* @param {CometChat.User} loggedInUser - The user to set as currently logged in.
*/
setLoggedInUser(loggedInUser: CometChat.User): void;
/**
* Sets the mapping of CSS classes.
* @param cssClassesNames - Array of CSS class names.
*/
setCssClassMapping(cssClassesNames: string[]): void;
/**
* Sets the CSS style.
* @param {Object} styleObject - The CSS style object.
* @param {string} styleObject.formattedTextColor - The color to use for formatted text.
*/
setStyle(styleObject: {
formattedTextColor: string;
formattedTextFont: string;
}): void;
getStyle(): {
[key: string]: string;
};
setId(id: string): void;
getId(): string | undefined;
cleanup(): void;
/**
* If the input text is provided, it returns the formatted text. Otherwise, it edits the text using the current cursor position.
* @param {string|null} inputText - The text to format.
* @return {string|void} - The original or formatted input text, or void if editing was done based on cursor position.
*/
getFormattedText(inputText: string | null, params: {
mentionsTargetElement: MentionsTargetElement;
}): string | void;
/**
* Sets the message object.
*
* @param {CometChat.BaseMessage} messageObject - The message object to be set.
*/
setMessage(messageObject: CometChat.BaseMessage): void;
/**
* Retrieves the message object.
*
* @returns {CometChat.BaseMessage} - The current message object.
*/
getMessage(): _cometchat_chat_sdk_javascript.BaseMessage;
setMessageBubbleAlignment(messageBubbleAlignment: MessageBubbleAlignment): void;
getMessageBubbleAlignment(): MessageBubbleAlignment;
setComposerConfig(user?: CometChat.User, group?: CometChat.Group, composerId?: ComposerId): void;
getComposerConfig(): {
user: _cometchat_chat_sdk_javascript.User | undefined;
group: _cometchat_chat_sdk_javascript.Group | undefined;
composerId: ComposerId | undefined;
};
/**
* Formats the text on keyboard key down.
* @param {string|void} inputText - The text to format.
*/
protected formatTextOnKeyUp: (inputText: string | void) => void;
debouncedFormatTextOnKeyUp: (...args: Object[]) => void;
/**
* Retrieves the preceding text from the given caret position.
* @param {Selection} currentCaretPosition - The current caret position.
* @param {Range} currentRange - The current selection range.
* @return {string|null} - The preceding text or null.
*/
protected getPrecedingText(currentCaretPosition: Selection | undefined, currentRange: Range | undefined): string | null;
/**
* Returns true if previous character is previousCharacterToCheck or if there is just one character
* @param {string} previousCharacterToCheck
* @param {Range} currentRange
* @returns {boolean}
*/
protected checkPreviousCharacterUsingRange(previousCharacterToCheck?: string, currentRange?: Range): boolean;
/**
* Applies regex match on the input text and replaces matched instances.
* @param {string|null} inputText - The text to apply regex match.
* @return {string} - The replaced text.
*/
protected onRegexMatch(inputText?: string | null): string;
/**
* Debounce function.
* @param {Function} func - The function to debounce.
* @param {number} wait - The amount of delay before function invocation.
* @return {Function} - The debounced function.
*/
debounce(func: Function, wait: number): (...args: Object[]) => void;
/**
* Handles 'keydown' events.
* @param {KeyboardEvent} event - The keyboard event.
*/
onKeyUp(event: KeyboardEvent): void;
/**
* Handles 'keydown' events.
* @param {KeyboardEvent} event - The keyboard event.
*/
onKeyDown(event: KeyboardEvent): void;
/**
* Adds HTML at the current caret position.
* @param {string} newHtml - The HTML to insert.
* @param {Selection} currentCaretPosition - The current caret position.
* @param {Range} currentRange - The current selection range.
*/
protected addAtCaretPosition(newHtml: string, currentCaretPosition: Selection, currentRange: Range): void;
/**
* Returns the original unformatted text from the input text.
* @param {string|null|undefined} inputText - The input text to get original text from.
* @return {string} - The original text.
*/
getOriginalText(inputText: string | null | undefined): string;
/**
* To inform formatter to stop keeping a track of characters
*/
stopTracking(): void;
/**
* To reset the formatter properties
*/
reset(): void;
/**
* This will be called by composer before sending the message. This can be used to set metadata, tags on message
* @param {CometChat.BaseMessage} message
* @return {CometChat.BaseMessage} - message with metadata added
*/
formatMessageForSending(message: CometChat.BaseMessage): CometChat.BaseMessage;
/**
* Registers event listeners on the given element.
* @param {Element} span - The HTML element to register event listeners.
* @param {DOMTokenList} classList - The classList of the element.
* @return {Element} - The element with event listeners registered.
*/
registerEventListeners(span: Element, classList: DOMTokenList): Element;
}
/**
* Class that handles the text formatting for mentions in CometChat.
* CometChatMentionsFormatter is a child class of CometChatTextFormatter.
* It extends the functionality of text formatting to specifically handle user mentions
* in the text, it keeps track of the mentions in the text, format them for display and
* other functionalities.
* It is used in CometChatMessageComposer component and extension decorators like link preview, message translation, text moderator.
*
* @extends {CometChatTextFormatter}
*/
declare class CometChatMentionsFormatter extends CometChatTextFormatter {
/**
* List of users for mentions.
*/
private cometChatUserGroupMembers;
/**
* Mapping of CSS classes for mentions.
*/
private mentionsCssClassMapping;
/**
* Specifies the visibility of mentions.
*/
private visibleIn;
/**
* Regular expression for validating search input.
*
* The search input is considered valid if it meets all of the following conditions:
* - It starts with an "@" symbol.
* - After the "@" symbol, it can optionally contain alphanumeric characters or periods.
* - If there are spaces, they should not be immediately after the "@" symbol.
* - After a space, it can optionally contain alphanumeric characters or periods.
*
* If the search input does not meet these conditions, the regular expression match will fail, indicating invalid input.
*
* @type {RegExp}
* @private
*/
private invalidCharactersRegexForSearch;
/**
* Count of mentions in the text.
*/
private mentionsCount;
/**
* Map of mentions, linking user ids with their names.
*/
private mentionsMap?;
/**
* Observer for observing changes to the text.
*/
observer: MutationObserver;
/**
* Callback function for when a match is found by the regex used for search.
*/
keyUpCallBack: Function;
private warningDisplayed;
private allowMultipleSpaces;
private mouseOverEventDispatched;
constructor();
/**
* Observes changes in targetNode.
*
* @param {HTMLElement} targetNode - The HTML element to observe for changes.
*/
observeChange(targetNode: HTMLElement): void;
/**
* Retrieves the count of mentions.
*
* @returns {number} - The count of mentions.
*/
getMentionsCount(): number;
/**
* Sets the count of mentions.
*
* @param {number} mentionsCount - The count of mentions to be set.
*/
setMentionsCount(mentionsCount: number): void;
/**
* Set Regex for Checking Invalid Characters in Search Term
* @param pattern
*/
setInvalidCharactersRegexForSearch(pattern: RegExp): void;
/**
* Sets the current caret position and selection range.
*
* @param {Selection} currentCaretPosition - The current caret position.
* @param {Range} currentRange - The current selection range.
*/
setCaretPositionAndRange(currentCaretPosition: Selection, currentRange: Range): void;
/**
* Sets the reference to the input element.
*
* @param {HTMLElement} inputElementReference - The reference to the input element.
*/
setInputElementReference(inputElementReference: HTMLElement): void;
/**
* Sets the regex pattern for matching text.
*
* @param {Array<RegExp>} regexPatterns - The array of regex patterns.
*/
setRegexPattern(regexPatterns: Array<RegExp>): void;
/**
* Retrieves the CometChatUserGroupMembers.
*
* @returns {Array<CometChatUserGroupMembers>} - The current CometChatUserGroupMembers.
*/
getCometChatUserGroupMembers(): (_cometchat_chat_sdk_javascript.User | _cometchat_chat_sdk_javascript.GroupMember)[];
/**
* Sets the CometChatUserGroupMembers.
*
* @param {Array<CometChatUserGroupMembers>} CometChatUserGroupMembers - The CometChatUserGroupMembers to be set.
*/
setCometChatUserGroupMembers(CometChatUserGroupMembers: Array<CometChat.User | CometChat.GroupMember>): void;
resetCometChatUserGroupMembers(): void;
/**
* Sets the callback function for handling key down events.
*
* @param {Function} keyUpCallBack - The callback function for handling key up events.
*/
setKeyUpCallBack(keyUpCallBack: Function): void;
/**
* Sets the keydown callback function.
* @param {Function} keyDownCallBack - The keydown callback function.
*/
setKeyDownCallBack(keyDownCallBack: Function): void;
getAllowMultipleSpaces(): boolean;
setAllowMultipleSpaces(allowMultipleSpaces: boolean): void;
cleanup(): void;
/**
* This will be called by composer before sending the message. This can be used to set metadata, tags on message
* @param {CometChat.BaseMessage} message
* @return {CometChat.BaseMessage} - message with metadata added
*/
formatMessageForSending(message: CometChat.BaseMessage): CometChat.BaseMessage;
reset(): void;
stopTracking(): void;
/**
* Formats the input text if provided, otherwise edits the text at the cursor position.
* @param {string|null} inputText - The input text to be formatted.
* @returns {string|void} - The formatted input text, or void if inputText is not provided.
*/
getFormattedText(inputText: string | null, params?: {
mentionsTargetElement: MentionsTargetElement;
}): string | void;
/**
* This function adds the mention span to the input text.
* @param {string} inputText - The input text where the span needs to be added.
* @returns {string} - The modified input text.
*/
protected addMentionsSpan(inputText: string): string;
/**
* Registers event listeners for click, mouseover, mouseout on the element
* @param {HTMLElement} element - The element on which the events need to be registered
* @param {DOMTokenList} domTokenList - The classes to be added
* @return {HTMLElement} - The element with the registered event listeners
*/
registerEventListeners(element: HTMLElement, domTokenList: DOMTokenList): HTMLElement;
/**
* Replaces mentions which are span tags with corresponding user UIDs
*
* @param {string | null | undefined} inputText - The text in which the mentions need to be replaced
* @return {string} - The text after replacing the mentions with uids
*/
protected replaceMentionsSpanWithUid(inputText: string | null | undefined): string;
/**
* Handles the keydown events, updating the mention state as necessary
*
* @param {KeyboardEvent} event - The keydown event
*/
onKeyDown(event: KeyboardEvent): void;
/**
* Validates the text input based on the invalidCharactersRegexForSearch regular expression.
*
* @param {string | null} text - The text to validate. If null, the function will return null.
* @returns {string | null} - Returns the original text if valid, otherwise returns null.
*/
validateText(text: string | null): string | null;
/**
* Handles the keyup events, updating the mention state as necessary
*
* @param {KeyboardEvent} event - The keydown event
*/
onKeyUp(event: KeyboardEvent): null | undefined;
/**
* Adds the given HTML at the caret position.
*
* @param {string} newHtml - The HTML to be added.
* @param {Selection} currentCaretPosition - The current caret position
* @param {Range} currentRange - The current range
* @returns {void}
*/
protected addAtCaretPosition(newHtml: string, currentCaretPosition: Selection, currentRange: Range): void;
/**
* Matches the regex with the given inputText and replaces the matched text with respective spans
*
* @param {string | null} inputText - The text in which the regex patterns needs to be matched
* @return {string} - The text after replacing the matched text with spans
*/
onRegexMatch(inputText?: string | null): string;
/**
* Retrieves the original text after replacing mentions span with UIDs
*
* @param {string | null | undefined} inputText - The input text to be formatted.
* @returns {string} The original text after replacing mentions span with UIDs
*/
getOriginalText(inputText: string | null | undefined): string;
setVisibleIn(visibleIn: MentionsVisibility): void;
getVisibleIn(): MentionsVisibility;
}
/**
* Class for providing message options and views.
* It is used in AI and calling module and utils related to messages.
*/
declare abstract class DataSource {
abstract getTextMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
abstract getImageMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
abstract getVideoMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
abstract getAudioMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
abstract getFileMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
abstract getBottomView(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment): Element | JSX.Element | null;
abstract getStatusInfoView(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, hideReceipt?: boolean, messageSentAtDateTimeFormat?: CalendarObject): Element | JSX.Element | null;
abstract getTextMessageContentView(message: CometChat.TextMessage, alignment: MessageBubbleAlignment, otherParams: Object | undefined): Element | JSX.Element;
abstract getImageMessageContentView(message: CometChat.MediaMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
abstract getVideoMessageContentView(message: CometChat.MediaMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
abstract getAudioMessageContentView(message: CometChat.MediaMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
abstract getFileMessageContentView(message: CometChat.MediaMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
abstract getTextMessageTemplate(additionalConfigurations?: Object | undefined): CometChatMessageTemplate;
abstract getImageMessageTemplate(): CometChatMessageTemplate;
abstract getVideoMessageTemplate(): CometChatMessageTemplate;
abstract getAudioMessageTemplate(): CometChatMessageTemplate;
abstract getFileMessageTemplate(): CometChatMessageTemplate;
abstract getGroupActionTemplate(additionalConfigurations?: Object | undefined): CometChatMessageTemplate;
abstract getAllMessageTemplates(additionalConfigurations?: Object | undefined): Array<CometChatMessageTemplate>;
abstract getMessageTemplate(messageType: string, messageCategory: string): CometChatMessageTemplate | null;
abstract getMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
abstract getCommonOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
abstract getAttachmentOptions(id: ComposerId, additionalConfigurations?: any): CometChatMessageComposerAction[];
abstract getAllMessageTypes(): Array<string>;
abstract getAllMessageCategories(additionalConfigurations?: Object | undefined): Array<string>;
abstract getStickerButton(id: ComposerId, user?: CometChat.User, group?: CometChat.Group): JSX.Element | undefined;
abstract getId(): string;
abstract getDeleteMessageBubble(messageObject: CometChat.BaseMessage, text?: string, alignment?: MessageBubbleAlignment): Element | JSX.Element;
abstract getGroupActionBubble(message: CometChat.BaseMessage): Element | JSX.Element;
abstract getTextMessageBubble(messageText: string, message: CometChat.TextMessage, alignment: MessageBubbleAlignment, additionalConfigurations?: Object | undefined): Element | JSX.Element;
abstract getVideoMessageBubble(videoUrl: string, message: CometChat.MediaMessage, thumbnailUrl?: string, onClick?: Function, alignment?: MessageBubbleAlignment): Element | JSX.Element;
abstract getImageMessageBubble(imageUrl: string, placeholderImage: string, message: CometChat.MediaMessage, onClick?: Function, alignment?: MessageBubbleAlignment): Element | JSX.Element;
abstract getAudioMessageBubble(audioUrl: string, message: CometChat.MediaMessage, title?: string, alignment?: MessageBubbleAlignment): Element | JSX.Element;
abstract getFileMessageBubble(fileUrl: string, message: CometChat.MediaMessage, title?: string, alignment?: MessageBubbleAlignment): Element | JSX.Element;
abstract getLastConversationMessage(conversation: CometChat.Conversation, loggedInUser: CometChat.User, additionalConfigurations?: additionalParams): string;
abstract getAuxiliaryHeaderMenu(user?: CometChat.User, group?: CometChat.Group, additionalConfigurations?: any): Element[] | JSX.Element[];
abstract getAllTextFormatters(formatterParams: additionalParams): CometChatTextFormatter[];
abstract getMentionsTextFormatter(params: Object): CometChatMentionsFormatter;
abstract getUrlTextFormatter(params: Object): CometChatUrlsFormatter;
abstract getMentionsFormattedText(message: CometChat.TextMessage, subtitle: string, additionalConfigurations?: Object | undefined): string;
abstract getFormMessageContentView(message: CometChat.InteractiveMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
abstract getSchedulerMessageContentView(message: CometChat.InteractiveMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
abstract getCardMessageContentView(message: CometChat.InteractiveMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
abstract getFormMessageTemplate(): CometChatMessageTemplate;
abstract getSchedulerMessageTemplate(): CometChatMessageTemplate;
abstract getCardMessageTemplate(): CometChatMessageTemplate;
abstract getFormMessageBubble(message: CometChat.InteractiveMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
abstract getSchedulerMessageBubble(message: CometChat.InteractiveMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
abstract getCardMessageBubble(message: CometChat.InteractiveMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
}
interface CometChatUiKit {
name: string;
version: string;
}
declare global {
interface Window {
CometChatUiKit: CometChatUiKit;
}
}
/**
* `CometChatUIKit` is a class that provides an interface for initializing and interacting with the CometChat UI Kit.
* It handles various aspects of the UI Kit, including configuration, messaging, and extension management.
* It is used in Calling, Conversations, Groups and Users components.
* @class
*/
declare class CometChatUIKit {
/**
* `CometChatUIKit` is a class that provides an interface for initializing and interacting with the CometChat UI Kit.
* It handles various aspects of the UI Kit, including configuration, messaging, and extension management.
*
* @class
*/
static uiKitSettings: UIKitSettings | null;
/**
* The sound manager for handling sound-related functionalities in the UI Kit.
* @type {typeof CometChatSoundManager}
*/
static SoundManager: typeof CometChatSoundManager;
/**
* The localizer for internationalization.
* @type {typeof CometChatLocalize}
*/
static Localize: typeof CometChatLocalize;
/**
* Settings related to conversation updates.
* @type {CometChat.ConversationUpdateSettings}
*/
static conversationUpdateSettings: CometChat.ConversationUpdateSettings;
/**
* Variable for storing theme mode of the UIKit.
*/
static themeMode: "light" | "dark";
/**
* Initializes the CometChat UI Kit with the provided settings.
* @param {UIKitSettings | null} uiKitSettings - The settings for initializing the UI Kit.
* @returns {Promise<Object> | undefined} - A promise that resolves with an object if initialization is successful, otherwise `undefined`.
*/
static init(uiKitSettings: UIKitSettings | null): Promise<Object> | undefined;
/**
* Default extensions included in the UI Kit.
* @type {ExtensionsDataSource[]}
*/
static defaultExtensions: ExtensionsDataSource[];
/**
* Default callingExtension included in the UI Kit.
* @type {CallingExtension}
*/
static defaultCallingExtension: CallingExtension;
/**
* Checking if the SDK is initialized.
*/
static isInitialized(): boolean | undefined;
/**
* Enables calling functionality in the UI Kit.
*/
static enableCalling(): void;
/**
* Performs post-login initialization tasks.
* @private
*/
private static initiateAfterLogin;
/**
* Logs in a user with the specified UID.
* @param {string} uid - The UID of the user to log in.
* @returns {Promise<CometChat.User>} - A promise that resolves with the logged-in user.
*/
static login(uid: string): Promise<CometChat.User>;
/**
* Logs in a user with the specified authentication token.
* @param {string} authToken - The authentication token for the user.
* @returns {Promise<CometChat.User>} - A promise that resolves with the logged-in user.
*/
static loginWithAuthToken(authToken: string): Promise<CometChat.User>;
/**
* Retrieves the currently logged-in user.
* @returns {Promise<CometChat.User | null>} - A promise that resolves with the logged-in user or `null` if no user is logged in.
*/
static getLoggedinUser(): Promise<CometChat.User | null>;
/**
* Creates a new user with the specified details.
* @param {CometChat.User} user - The user details to create.
* @returns {Promise<CometChat.User>} - A promise that resolves with the created user.
*/
static createUser(user: CometChat.User): Promise<CometChat.User>;
/**
* Updates the details of an existing user.
* @param {CometChat.User} user - The user details to update.
* @returns {Promise<CometChat.User>} - A promise that resolves with the updated user.
*/
static updateUser(user: CometChat.User): Promise<CometChat.User>;
/**
* Logs out the current user.
* @returns {Promise<Object>} - A promise that resolves with a message object upon successful logout.
*/
static logout(): Promise<Object>;
/**
* Checks if the UI Kit settings are properly configured.
* @returns {boolean} - `true` if UI Kit settings are available and valid, otherwise `false`.
*/
static checkAuthSettings(): boolean;
/**
* Sends a custom message and returns a promise with the result.
* @param {CometChat.CustomMessage} message - The custom message to be sent.
* @returns {Promise<CometChat.BaseMessage>} - A promise that resolves with the sent message.
*/
static sendCustomMessage(message: CometChat.CustomMessage): Promise<unknown>;
/**
* Sends a text message and returns a promise with the result.
* @param {CometChat.TextMessage} message - The text message to be sent.
* @returns {Promise<CometChat.BaseMessage>} - A promise that resolves with the sent message.
*/
static sendTextMessage(message: CometChat.TextMessage): Promise<CometChat.BaseMessage>;
/**
* Sends a media message and returns a promise with the result.
* @param {CometChat.MediaMessage} message - The media message to be sent.
* @returns {Promise<CometChat.BaseMessage>} - A promise that resolves with the sent message.
*/
static sendMediaMessage(message: CometChat.MediaMessage): Promise<CometChat.BaseMessage>;
/**
* Retrieves the data source for chat configuration.
* @returns {DataSource} - The chat data source.
*/
static getDataSource(): DataSource;
}
/**
* Class to initialize the cometchat datasource, to access getters and properties related to message components.
* It is used in CometChatComposer, CometChatMessageComposer, CometChatMessageHeader, CometChatMessageList and AI module components.
*/
declare class ChatConfigurator {
static dataSource: DataSource;
static names: Array<string>;
static init(initialSource?: DataSource): void;
static enable(callback: (dataSource: DataSource) => DataSource): void;
static getDataSource(): DataSource;
}
/**
* This class is used in AI, calling and Extension modules.
*/
declare abstract class DataSourceDecorator implements DataSource {
dataSource: DataSource;
constructor(dataSource: DataSource);
getTextMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
getImageMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
getVideoMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
getAudioMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
getFileMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
getStatusInfoView(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, hideReceipt?: boolean, messageSentAtDateTimeFormat?: CalendarObject): JSX.Element | Element | null;
getBottomView(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment): JSX.Element | Element | null;
getTextMessageContentView(message: CometChat.TextMessage, alignment: MessageBubbleAlignment, additionalConfigurations?: Object | undefined): JSX.Element | Element;
getImageMessageContentView(message: CometChat.MediaMessage, alignment: MessageBubbleAlignment): JSX.Element | Element;
getVideoMessageContentView(message: CometChat.MediaMessage, alignment: MessageBubbleAlignment): JSX.Element | Element;
getAudioMessageContentView(message: CometChat.MediaMessage, alignment: MessageBubbleAlignment): JSX.Element | Element;
getFileMessageContentView(message: CometChat.MediaMessage, alignment: MessageBubbleAlignment): JSX.Element | Element;
getTextMessageTemplate(additionalConfigurations?: Object | undefined): CometChatMessageTemplate;
getImageMessageTemplate(): CometChatMessageTemplate;
getVideoMessageTemplate(): CometChatMessageTemplate;
getAudioMessageTemplate(): CometChatMessageTemplate;
getFileMessageTemplate(): CometChatMessageTemplate;
getGroupActionTemplate(additionalConfigurations?: Object | undefined): CometChatMessageTemplate;
getAllMessageTemplates(additionalConfigurations?: Object | undefined): CometChatMessageTemplate[];
getMessageTemplate(messageType: string, messageCategory: string): CometChatMessageTemplate | null;
getMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
getCommonOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
getAttachmentOptions(id: ComposerId, additionalConfigurations?: any): CometChatMessageComposerAction[];
getAllMessageTypes(): string[];
getAllMessageCategories(additionalConfigurations?: Object | undefined): string[];
getStickerButton(id: ComposerId, user?: CometChat.User, group?: CometChat.Group): JSX.Element | undefined;
getId(): string;
getDeleteMessageBubble(messageObject: CometChat.BaseMessage, text?: string, alignment?: MessageBubbleAlignment): JSX.Element | Element;
getGroupActionBubble(message: CometChat.BaseMessage): JSX.Element | Element;
getTextMessageBubble(messageText: string, message: CometChat.TextMessage, alignment: MessageBubbleAlignment, additionalConfigurations?: Object | undefined): JSX.Element | Element;
getVideoMessageBubble(videoUrl: string, message: CometChat.MediaMessage, thumbnailUrl?: string, onClick?: Function, alignment?: MessageBubbleAlignment): JSX.Element | Element;
getImageMessageBubble(imageUrl: string, placeholderImage: string, message: CometChat.MediaMessage, onClick?: Function, alignment?: MessageBubbleAlignment): JSX.Element | Element;
getAudioMessageBubble(audioUrl: string, message: CometChat.MediaMessage, title?: string, alignment?: MessageBubbleAlignment): JSX.Element | Element;
getFileMessageBubble(fileUrl: string, message: CometChat.MediaMessage, title?: string, alignment?: MessageBubbleAlignment): JSX.Element | Element;
getLastConversationMessage(conversation: CometChat.Conversation, loggedInUser: CometChat.User, additionalConfigurations?: additionalParams): string;
getAuxiliaryHeaderMenu(user?: CometChat.User, group?: CometChat.Group, additionalConfigurations?: any): Element[] | JSX.Element[];
getAllTextFormatters(formatterParams: additionalParams): CometChatTextFormatter[];
getMentionsTextFormatter(params?: Object): CometChatMentionsFormatter;
getUrlTextFormatter(params?: Object): CometChatUrlsFormatter;
getMentionsFormattedText(message: CometChat.TextMessage, subtitle: string, additionalConfigurations: Object): string;
getFormMessageContentView(message: CometChat.InteractiveMessage, alignment: MessageBubbleAlignment): JSX.Element | Element;
getSchedulerMessageContentView(message: CometChat.InteractiveMessage, alignment: MessageBubbleAlignment): JSX.Element | Element;
getCardMessageContentView(message: CometChat.InteractiveMessage, alignment: MessageBubbleAlignment): JSX.Element | Element;
getFormMessageTemplate(): CometChatMessageTemplate;
getSchedulerMessageTemplate(): CometChatMessageTemplate;
getCardMessageTemplate(): CometChatMessageTemplate;
getFormMessageBubble(message: CometChat.InteractiveMessage, alignment: MessageBubbleAlignment): JSX.Element | Element;
getSchedulerMessageBubble(message: CometChat.InteractiveMessage, alignment: MessageBubbleAlignment): JSX.Element | Element;
getCardMessageBubble(message: CometChat.InteractiveMessage, alignment: MessageBubbleAlignment): JSX.Element | Element;
}
interface ListProps<T> {
/**
* Menu view of the component
*
* @defaultValue `""`
*/
headerView?: JSX$1.Element;
/**
* Hide the search bar
*
* @defaulValue `false`
*/
hideSearch?: boolean;
/**
* Text to fill the search input with
*
* @defaultValue `""`
*/
searchText?: string;
/**
* Function to call when the search input text changes
*
* @remarks
* This function will only be called after 500ms of the search input text change
*/
onSearch?: (searchStr: string) => void;
/**
* Text to be displayed when the search input has no value
*
* @defaultValue `"Search"`
*/
searchPlaceholderText?: string;
/**
* List of objects to display
*/
list: T[];
/**
* Custom list item view to be rendered for each object in the `list` prop
*/
itemView: (item: T, itemIndex: number) => JSX$1.Element;
/**
* Function to call when the scrollbar is at the top-most position of the scrollable list
*/
onScrolledToBottom?: () => Promise<any>;
/**
* Function to call when the scrollbar is at the bottom-most position of the scrollable list
*/
onScrolledToTop?: () => Promise<any>;
/**
* Function to call when the scrollbar is not at the bottom-most position of the scrollable list
*/
scrolledUpCallback?: (boolean?: boolean) => void;
/**
* Show alphabetical header
*
* @defaultValue `true`
*/
showSectionHeader?: boolean;
/**
* Property on each object in the `list` prop
*
* @remarks
* This property will be used to extract the section header character from each object in the `list` prop
*/
sectionHeaderKey?: keyof T | string;
/**
* Property on each object in the `list` prop
*
* @remarks
* This property will be used to extract the key value from each object in the `list` prop. The extracted key value is set as a `key` of a React element
*/
listItemKey?: keyof T | string;
/**
* Fetch state of the component
*/
state: States;
/**
* Custom view for the loading state of the component
*/
loadingView?: JSX$1.Element;
/**
* Hide error view
*
* @remarks
* If set to true, hides the default and the custom error view
*
* @defaultValue `false`
*/
hideError?: boolean;
/**
* Custom view for the error state of the component
*/
errorView?: JSX$1.Element;
/**
* Custom view for the empty state of the component
*/
emptyView?: JSX$1.Element;
/**
* Set the scrollbar to the bottom-most position of the scrollable list
*
* @remarks
* If the scrollbar of the scrollable list is set to the bottom-most position of the scrollable list because of this `prop`, the component won't call the `onScrolledToBottom` prop
*/
scrollToBottom?: boolean;
/**
* Function to call whenever the component encounters an error
*/
onError?: ((error: CometChat.CometChatException) => void) | null;
/**
* Title of the component
*
* @defaultValue `""`
*/
title?: string;
}
/**
* Renders a list component that can display a title, search bar,
* and items with optional section headers.
*
* @param props - The props for configuring the list
*/
declare function List<T>(props: ListProps<T>): JSX$1.Element;
/**
* Renders a scrollable list
*/
declare const CometChatList: typeof List;
/**
* Configuration class for collaborative document settings.
*
* This class encapsulates the configuration required for rendering document bubbles
* and options in the collaborative document feature.
*/
declare class CollaborativeDocumentConfiguration {
private iconURL;
private optionIconURL;
/**
* Constructs a CollaborativeDocumentConfiguration instance.
*
* @param configuration - An object containing optional configuration properties.
* @param configuration.style - Custom styling for the document bubble.
* @param configuration.iconURL - URL for the document icon.
* @param configuration.optionIconURL - URL for the options icon.
* @param configuration.optionStyle - Custom styling for the options.
*/
constructor(configuration: {
iconURL?: string;
optionIconURL?: string;
});
/**
* Retrieves the URL for the document icon.
*
* @returns The icon URL as a string.
*/
getIconURL(): string;
/**
* Retrieves the URL for the options icon.
*
* @returns The options icon URL as a string.
*/
getOptionIconURL(): string;
}
/**
* Class representing the Collaborative Document Extension.
*
* This extension is responsible for enabling collaborative document features within the chat application.
* It extends the `ExtensionsDataSource` class and utilizes a configuration to customize its behavior.
*/
declare class CollaborativeDocumentExtension extends ExtensionsDataSource {
/** @private Configuration for the collaborative document extension. */
private configuration?;
/**
* Constructs a new CollaborativeDocumentExtension.
*
* @param {CollaborativeDocumentConfiguration} [configuration] - The configuration for customizing the collaborative document extension.
*/
constructor(configuration?: CollaborativeDocumentConfiguration);
/**
* Adds the collaborative document extension to the chat configurator.
*
* This method overrides the `addExtension` method from `ExtensionsDataSource` and enables the collaborative document feature
* by creating a new `CollaborativeDocumentExtensionDecorator`.
*
* @override
*/
addExtension(): void;
/**
* Retrieves the extension ID for the collaborative document extension.
*
* This method overrides the `getExtensionId` method from `ExtensionsDataSource`
* and returns the unique ID associated with the collaborative document extension.
*
* @returns {string} The unique ID of the collaborative document extension.
* @override
*/
getExtensionId(): string;
}
/**
* The `CollaborativeDocumentExtensionDecorator` class extends `DataSourceDecorator`
* to provide additional features and customizations for the collaborative document extension.
* It integrates with the CometChat UIKit to enable document collaboration in chat.
*/
declare class CollaborativeDocumentExtensionDecorator extends DataSourceDecorator {
/**
* The configuration for the collaborative document extension.
* This configuration object allows customizing the appearance and behavior
* of the document collaboration features.
*
* @type {CollaborativeDocumentConfiguration | undefined}
*/
configuration?: CollaborativeDocumentConfiguration;
/**
* The new data source object.
* This is used to manage and manipulate the data for the collaborative document extension.
*
* @type {DataSource}
*/
newDataSource: DataSource;
/**
* The user who is currently logged in.
*/
protected loggedInUser?: CometChat.User | null | undefined;
/**
* Creates an instance of `CollaborativeDocumentExtensionDecorator`.
*
* @param {DataSource} dataSource - The data source object to be decorated.
* @param {CollaborativeDocumentConfiguration} [configuration] - An optional configuration object for the extension.
*/
constructor(dataSource: DataSource, configuration?: CollaborativeDocumentConfiguration);
/**
* Retrieves all message types supported by the extension, including custom document messages.
*
* @returns {string[]} An array of message types.
* @override
*/
getAllMessageTypes(): string[];
/**
* Retrieves the unique ID of the collaborative document extension.
*
* @returns {string} The unique ID for the extension.
* @override
*/
getId(): string;
/**
* Retrieves all message categories supported by the extension, including custom categories.
*
* @returns {string[]} An array of message categories.
* @override
*/
getAllMessageCategories(additionalConfigurations?: Object | undefined): string[];
/**
* Checks if a message template with the specified type already exists.
*
* @param {CometChatMessageTemplate[]} template - An array of message templates.
* @param {string} type - The message type to check for.
* @returns {boolean} `true` if the template exists, otherwise `false`.
*/
checkIfTemplateExist(template: CometChatMessageTemplate[], type: string): boolean;
/**
* Retrieves all message templates, including the custom document template.
*
* @param {any} [additionalConfigurations] - Additional configurations for the templates.
* @returns {CometChatMessageTemplate[]} An array of message templates.
* @override
*/
getAllMessageTemplates(additionalConfigurations?: any): CometChatMessageTemplate[];
/**
* Creates a custom message template for the collaborative document extension.
*
* @returns {CometChatMessageTemplate} A message template for the document extension.
*/
getDocumentTemplate(): CometChatMessageTemplate;
/**
* Retrieves the content view for the document message bubble.
*
* @param {CometChat.CustomMessage} documentMessage - The document message to display.
* @returns {JSX.Element} The document content view component.
*/
getDocumentContentView(documentMessage: CometChat.CustomMessage, alignment?: MessageBubbleAlignment): react_jsx_runtime.JSX.Element;
/**
* Launches the collaborative document in a new fullscreen window.
*
* @param {string} documentURL - The URL of the document to open.
*/
launchCollaborativeDocument(documentURL: string): void;
/**
* Retrieves the URL for a collaborative document or board from a custom message.
*
* @param {CometChat.CustomMessage} message - The custom message containing the document or board data.
* @returns {string | undefined} The URL of the document or board, or undefined if not found.
*/
getDocumentURL(message: CometChat.CustomMessage): any;
/**
* Overrides the attachment options to include a new action for creating a collaborative document.
*
* @param {any} id - The identifier object containing user or group information.
* @returns {CometChatMessageComposerAction[]} The list of attachment options including the new document action.
*/
getAttachmentOptions(id: any, additionalConfigurations?: any): CometChatMessageComposerAction[];
/**
* Retrieves the last message from a conversation, checking if it's a collaborative document.
*
* @param {CometChat.Conversation} conversation - The conversation object containing the last message.
* @param {CometChat.User} loggedInUser - The currently logged-in user.
* @param {any} [additionalConfigurations] - Optional additional configurations for the message retrieval.
* @returns {string} A string representing the last message, or a custom message if it's a collaborative document.
*/
getLastConversationMessage(conversation: CometChat.Conversation, loggedInUser: CometChat.User, additionalConfigurations?: any): string;
}
/**
* Configuration class for Collaborative Whiteboard.
* This class provides methods to retrieve styles and URLs associated with the whiteboard component.
*/
declare class CollaborativeWhiteboardConfiguration {
/**
* The URL of the icon to be used for the whiteboard.
* @type {string}
*/
private iconURL;
/**
* The URL of the icon to be used for the whiteboard option.
* @type {string}
*/
private optionIconURL;
/**
* Creates an instance of CollaborativeWhiteboardConfiguration.
*/
constructor(configuration: {
iconURL?: string;
optionIconURL?: string;
});
/**
* Retrieves the URL of the icon used for the whiteboard.
*
* @returns {string} The URL of the icon.
*/
getIconURL(): string;
/**
* Retrieves the URL of the icon used for the whiteboard option.
*
* @returns {string} The URL of the option icon.
*/
getOptionIconURL(): string;
}
/**
* Class representing a Collaborative Whiteboard Extension.
* This class extends the `ExtensionsDataSource` to add support for collaborative whiteboard functionality.
*/
declare class CollaborativeWhiteboardExtension extends ExtensionsDataSource {
/**
* Configuration for the collaborative whiteboard extension.
* @type {CollaborativeWhiteboardConfiguration | undefined}
*/
private configuration?;
/**
* Creates an instance of the CollaborativeWhiteboardExtension.
* @param {CollaborativeWhiteboardConfiguration} [configuration] - The configuration for the whiteboard extension.
*/
constructor(configuration?: CollaborativeWhiteboardConfiguration);
/**
* Adds the collaborative whiteboard extension to the chat configurator.
* This method enables the extension by passing a new `CollaborativeWhiteBoardExtensionDecorator`
* instance to the `ChatConfigurator`.
*/
addExtension(): void;
/**
* Gets the unique identifier for the whiteboard extension.
* @returns {string} The extension ID for the whiteboard.
*/
getExtensionId(): string;
}
/**
* Decorator class for extending functionality related to collaborative whiteboard.
* @extends DataSourceDecorator
*/
declare class CollaborativeWhiteBoardExtensionDecorator extends DataSourceDecorator {
/**
* Configuration for the collaborative whiteboard extension.
* @type {CollaborativeWhiteboardConfiguration | undefined}
*/
configuration?: CollaborativeWhiteboardConfiguration;
/**
* Data source used for fetching and managing data.
* @type {DataSource}
*/
newDataSource: DataSource;
/**
* The user who is currently logged in.
*/
protected loggedInUser?: CometChat.User | null | undefined;
/**
* Creates an instance of the CollaborativeWhiteBoardExtensionDecorator.
* @param {DataSource} dataSource - The data source to be decorated.
* @param {CollaborativeWhiteboardConfiguration} [configuration] - The configuration for the whiteboard extension.
*/
constructor(dataSource: DataSource, configuration?: CollaborativeWhiteboardConfiguration);
/**
* Gets all message types including the whiteboard extension type.
* @returns {string[]} Array of message types.
*/
getAllMessageTypes(): string[];
getId(): string;
/**
* Gets the unique identifier for the collaborative whiteboard extension.
* @returns {string} The extension ID.
*/
getAllMessageCategories(additionalConfigurations?: Object | undefined): string[];
/**
* Checks if a message template of a given type exists.
* @param {CometChatMessageTemplate[]} template - Array of message templates.
* @param {string} type - Type of the template to check.
* @returns {boolean} True if the template exists, otherwise false.
*/
checkIfTemplateExist(template: CometChatMessageTemplate[], type: string): boolean;
/**
* Gets all message templates, including the whiteboard template if not already present.
* @param {any} [additionalConfigurations] - Additional configurations.
* @returns {CometChatMessageTemplate[]} Array of message templates.
*/
getAllMessageTemplates(additionalConfigurations?: any): CometChatMessageTemplate[];
/**
* Creates the whiteboard message template.
* @returns {CometChatMessageTemplate} The whiteboard message template.
*/
getWhiteBoardTemplate(): CometChatMessageTemplate;
/**
* Generates the content view for the whiteboard message.
* @param {CometChat.CustomMessage} whiteboardMessage - The whiteboard message.
* @returns {JSX.Element} The content view for the whiteboard message.
*/
getWhiteboardContentView(whiteboardMessage: CometChat.CustomMessage, alignment?: MessageBubbleAlignment): react_jsx_runtime.JSX.Element;
/**
* Opens the collaborative whiteboard document in a new fullscreen window.
* @param {string} whiteboardURL - The URL of the whiteboard document.
*/
launchCollaborativeWhiteboardDocument(whiteboardURL: string): void;
/**
* Retrieves the URL of the whiteboard document from the message data.
* @param {CometChat.CustomMessage} message - The message containing whiteboard data.
* @returns {string | undefined} The URL of the whiteboard document.
*/
getWhiteboardDocument(message: CometChat.CustomMessage): any;
/**
* Overrides the method to get attachment options for the message composer.
* Adds an option for a collaborative whiteboard if the parent message ID is not present.
*
* @param {any} id - The ID object containing user or group information.
* @returns {CometChatMessageComposerAction[]} An array of message composer actions.
*/
getAttachmentOptions(id: any, additionalConfigurations?: any): CometChatMessageComposerAction[];
/**
* Overrides the method to get the last message from a conversation.
* Checks if the last message is related to the collaborative whiteboard extension
* and returns a custom message if it matches.
* @param {CometChat.Conversation} conversation - The conversation object from which to get the last message.
* @param {CometChat.User} loggedInUser - The currently logged-in user.
* @param {any} additionalConfigurations - Additional configurations if any.
* @returns {string} A string representing the last conversation message.
*/
getLastConversationMessage(conversation: CometChat.Conversation, loggedInUser: CometChat.User, additionalConfigurations: any): string;
}
/**
* The `LinkPreviewExtension` class is responsible for enabling the link preview feature within the chat application.
* It extends the `ExtensionsDataSource` class and utilizes a configuration object to customize the behavior of the link preview extension.
*/
declare class LinkPreviewExtension extends ExtensionsDataSource {
/**
* Creates an instance of the `LinkPreviewExtension` class.
*
* @param {LinkPreviewConfiguration} [configuration] - Optional configuration settings for the link preview extension.
*/
constructor();
/**
* Adds the link preview extension to the chat application by enabling it within the `ChatConfigurator`.
* This method overrides the base class method to provide specific implementation for the link preview extension.
*/
addExtension(): void;
/**
* Retrieves the unique identifier for the link preview extension.
*
* @returns {string} The unique identifier for the link preview extension.
*/
getExtensionId(): string;
}
/**
* The `LinkPreviewExtensionDecorator` class is responsible for adding link preview functionality
* to text messages within the chat. It decorates the data source with the ability to handle link previews.
*/
declare class LinkPreviewExtensionDecorator extends DataSourceDecorator {
/**
* The data source that the decorator wraps, adding link preview capabilities.
* @type {DataSource}
*/
newDataSource: DataSource;
/**
* Creates an instance of the `LinkPreviewExtensionDecorator` class.
*
* @param {DataSource} dataSource - The data source that the decorator will wrap.
* @param {LinkPreviewConfiguration} [configuration] - Optional configuration settings for the link preview extension.
*/
constructor(dataSource: DataSource);
/**
* Returns the unique identifier for this decorator.
* @returns {string} The ID of the decorator.
*/
getId(): string;
/**
* Retrieves the content view for a text message with potential link preview enhancements.
* @param {CometChat.TextMessage} message - The text message to be displayed.
* @param {MessageBubbleAlignment} alignment - The alignment of the message bubble.
* @param {any} [additionalConfigurations] - Additional configurations for formatting.
* @returns {JSX.Element} The JSX element representing the message content view.
*/
getTextMessageContentView(message: CometChat.TextMessage, alignment: MessageBubbleAlignment, additionalConfigurations?: any): JSX.Element | Element;
/**
* Retrieves the style for the link preview wrapper.
* @returns {object} The style object for the link preview wrapper.
*/
getLinkPreviewWrapperStyle(): {
height: string;
width: string;
};
/**
* Opens the provided URL in a new browser tab.
* @param {string} url - The URL to open.
*/
openLink(url: string): void;
/**
* Extracts the link preview object from the message metadata, if available.
* @param {CometChat.TextMessage} message - The message object containing metadata.
* @returns {object|null} The link preview object if available, otherwise null.
*/
getLinkPreview(message: CometChat.TextMessage): any;
/**
* Retrieves a specific detail from the link preview object.
* @param {object} linkPreviewObject - The link preview object containing various details.
* @param {string} key - The key corresponding to the detail to retrieve.
* @returns {string} The detail value corresponding to the provided key.
*/
getLinkPreviewDetails(linkPreviewObject: any, key: string): string;
}
/**
* Class for handling message translation extensions.
*
* @class MessageTranslationExtension
* @extends {ExtensionsDataSource}
*/
declare class MessageTranslationExtension extends ExtensionsDataSource {
/**
* Creates an instance of MessageTranslationExtension.
*
* @param {MessageTranslationConfiguration} [configuration] - Optional configuration for message translation.
*/
constructor();
/**
* Adds the message translation extension by enabling the ChatConfigurator with
* a new MessageTranslationExtensionDecorator instance.
*
* @override
* @returns {void}
*/
addExtension(): void;
/**
* Retrieves the unique identifier for the message translation extension.
*
* @override
* @returns {string} The unique identifier for the message translation extension.
*/
getExtensionId(): string;
}
/**
* Decorator class for extending the functionality of message translation in a chat application.
*
* @extends {DataSourceDecorator}
*/
declare class MessageTranslationExtensionDecorator extends DataSourceDecorator {
newDataSource: DataSource;
/**
* Creates an instance of MessageTranslationExtensionDecorator.
*
* @param {DataSource} dataSource - The data source to decorate.
* @param {MessageTranslationConfiguration} [configuration] - Optional configuration for message translation.
*/
constructor(dataSource: DataSource);
/**
* Retrieves options for text message actions, including a translation option if not already present.
*
* @override
* @param {CometChat.User} loggedInUser - The currently logged-in user.
* @param {CometChat.BaseMessage} messageObject - The message object for which options are retrieved.
* @param {CometChat.Group} [group] - Optional group associated with the message.
* @returns {(CometChatActionsIcon | CometChatActionsView)[]} The array of action options for the message.
*/
getTextMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: {
hideTranslateMessageOption: boolean;
}): (CometChatActionsIcon | CometChatActionsView)[];
/**
* Retrieves the content view for a text message, including translated content if available.
*
* @override
* @param {CometChat.TextMessage} message - The text message for which content view is retrieved.
* @param {MessageBubbleAlignment} alignment - The alignment of the message bubble.
* @param {any} [additionalConfigurations] - Optional additional configurations for the content view.
* @returns {JSX.Element} The content view for the text message.
*/
getTextMessageContentView(message: CometChat.TextMessage, alignment: MessageBubbleAlignment, additionalConfigurations?: any): JSX.Element | Element;
/**
* Checks if an option with the specified ID already exists in the options list.
*
* @param {(CometChatActionsIcon | CometChatActionsView)[]} template - The list of options to check.
* @param {string} id - The ID of the option to check for.
* @returns {boolean} `true` if the option exists, otherwise `false`.
*/
checkIfOptionExist(template: (CometChatActionsIcon | CometChatActionsView)[], id: string): boolean;
/**
* Retrieves the unique ID for this decorator.
*
* @returns {string} The ID of this decorator.
*/
getId(): string;
}
declare class PollsConfiguration {
private createPollIconURL;
private deleteIconURL;
private closeIconURL;
private optionIconURL;
private addAnswerIconURL;
constructor(configuration: {
createPollIconURL?: string;
deleteIconURL?: string;
closeIconURL?: string;
optionIconURL?: string;
addAnswerIconURL?: string;
});
getCreatePollIconURL(): string;
getDeleteIconURL(): string;
getCloseIconURL(): string;
getOptionIconURL(): string;
getAddAnswerIconURL(): string;
}
declare class PollsExtension extends ExtensionsDataSource {
private configuration?;
constructor(configuration?: PollsConfiguration);
addExtension(): void;
getExtensionId(): string;
}
/**
* The PollsExtensionDecorator class extends the DataSourceDecorator to
* handle custom poll messages in the CometChat UI.
*/
declare class PollsExtensionDecorator extends DataSourceDecorator {
/** The currently logged-in user. */
private loggedInUser;
/** Configuration for the polls extension. */
configuration?: PollsConfiguration;
/** The data source used by this decorator. */
newDataSource: DataSource;
/**
* Constructs a PollsExtensionDecorator instance.
* @param dataSource - The data source to decorate.
* @param configuration - Optional configuration for the polls extension.
*/
constructor(dataSource: DataSource, configuration?: PollsConfiguration);
/**
* Fetches the currently logged-in user.
*/
getLoggedInUser(): Promise<void>;
/**
* Gets the unique ID of this decorator.
* @returns The ID of the decorator.
*/
getId(): string;
/**
* Retrieves all message types, including the poll message type if not already present.
* @returns An array of message types.
*/
getAllMessageTypes(): string[];
/**
* Retrieves all message categories, including the custom message category if not already present.
* @returns An array of message categories.
*/
getAllMessageCategories(additionalConfigurations?: Object | undefined): string[];
/**
* Checks if a template of a specific type exists.
* @param template - The array of message templates.
* @param type - The type of the template to check.
* @returns True if the template exists, false otherwise.
*/
checkIfTemplateExist(template: CometChatMessageTemplate[], type: string): boolean;
/**
* Retrieves all message templates, including the polls template if not already present.
* @param _theme - Optional theme to apply.
* @param additionalConfigurations - Optional additional configurations.
* @returns An array of message templates.
*/
getAllMessageTemplates(additionalConfigurations?: any): CometChatMessageTemplate[];
/**
* Creates a template for poll messages.
* @param _theme - The theme to apply to the template.
* @returns A CometChatMessageTemplate for polls.
*/
getPollsTemplate(): CometChatMessageTemplate;
/**
* Generates the content view for a poll message.
* @param message - The poll message.
* @param _theme - The theme to apply.
* @returns The content view for the poll message.
*/
getPollsContentView(message: CometChat.CustomMessage, alignment?: MessageBubbleAlignment): react_jsx_runtime.JSX.Element;
/**
* Retrieves specific data from a poll message.
* @param message - The poll message.
* @param key - The key to retrieve data for.
* @returns The requested data or the sender's UID if no key is specified.
*/
getPollBubbleData(message: CometChat.CustomMessage, key?: string): any;
/**
* Retrieves the attachment options for the poll extension.
* @param theme - The theme to apply.
* @param id - The ID for the attachment options.
* @returns An array of message composer actions.
*/
getAttachmentOptions(id: any, additionalConfigurations?: any): CometChatMessageComposerAction[];
/**
* Handles the click event for the polls button in the message composer.
* Opens the poll creation modal with pre-defined styles.
*
* @param theme - The current theme settings for the application.
* @param args - Additional arguments passed during the button click.
*/
onPollsButtonClicked(...args: any[]): void;
/**
* Constructs the poll creation view with the given user and group details.
*
* @param user - The user who is creating the poll.
* @param group - The group in which the poll is being created.
* @param createPollStyle - Style configurations for the poll creation modal.
* @returns JSX element representing the poll creation modal.
*/
getPollView(user: CometChat.User, group: CometChat.Group): react_jsx_runtime.JSX.Element;
/**
* Triggers the event to close the poll creation modal.
*/
triggerCloseEvent(): void;
/**
* Retrieves the last message in a conversation and checks if it is a poll message.
*
* @param conversation - The conversation from which to retrieve the last message.
* @param loggedInUser - The currently logged-in user.
* @param additionalConfigurations - Any additional configurations to be used.
* @returns The localized string for a poll message if it exists, otherwise a default string.
*/
getLastConversationMessage(conversation: CometChat.Conversation, loggedInUser: CometChat.User, additionalConfigurations?: any): string;
}
interface PollOptions {
id: string;
selectedByLoggedInUser?: boolean;
text: string;
votersObj?: CometChat.User[];
count: number;
percent: string;
}
/**
* The StickersExtension class extends the ExtensionsDataSource and is responsible for
* configuring and adding the Stickers extension to the chat application.
*
* @class
* @extends {ExtensionsDataSource}
*/
declare class StickersExtension extends ExtensionsDataSource {
/**
* Creates an instance of StickersExtension.
*
* @param {StickersConfiguration} [configuration] - Optional configuration for the Stickers extension.
*/
constructor();
/**
* Adds the Stickers extension by enabling it in the ChatConfigurator.
* This method is called to register the Stickers extension with the chat application.
*
* @override
* @returns {void}
*/
addExtension(): void;
/**
* Returns the unique ID of the Stickers extension.
*
* @override
* @returns {string} The ID of the Stickers extension.
*/
getExtensionId(): string;
}
/**
* Class responsible for decorating the data source with sticker-related functionalities.
* Extends the DataSourceDecorator to add custom message templates, auxiliary options, and sticker-specific logic.
*/
declare class StickersExtensionDecorator extends DataSourceDecorator {
/**
* New data source for the extension.
*/
newDataSource: DataSource;
/**
* Flag to show or hide the sticker keyboard.
* @default false
*/
showStickerKeyboard: boolean;
/**
* Constructs a new instance of StickersExtensionDecorator.
* @param dataSource - The data source to be decorated.
* @param configuration - Optional configuration for the stickers extension.
*/
constructor(dataSource: DataSource);
/**
* Gets the decorated data source.
* @returns The decorated data source.
*/
getDataSource(): DataSource;
/**
* Retrieves all message templates, including the sticker template if it doesn't already exist.
* @param additionalConfigurations - Additional configurations, if any.
* @returns An array of CometChatMessageTemplate objects.
*/
getAllMessageTemplates(additionalConfigurations?: any): CometChatMessageTemplate[];
/**
* Retrieves auxiliary options for the stickers extension.
* @param id - A map containing relevant IDs.
* @param theme - The theme object for styling.
* @param user - Optional user object.
* @param group - Optional group object.
* @returns An array of auxiliary options.
*/
getStickerButton(id: ComposerId, user?: CometChat$1.User, group?: CometChat$1.Group): react_jsx_runtime.JSX.Element;
/**
* Creates the sticker auxiliary button component.
* @param id - A map containing relevant IDs.
* @param theme - The theme object for styling.
* @param user - Optional user object.
* @param group - Optional group object.
* @returns The JSX element for the sticker auxiliary button.
*/
getStickerAuxiliaryButton: (id: ComposerId, user?: CometChat$1.User, group?: CometChat$1.Group) => react_jsx_runtime.JSX.Element;
/**
* Sends a sticker message.
* @param event - The event object containing sticker details.
*/
sendSticker(event: any, closeSticker: Function, id: ComposerId): void;
/**
* Sends a sticker message.
* @param event - The event object containing sticker details.
*/
getSticker(message: CometChat$1.CustomMessage): any;
/**
* Creates a JSX element for displaying the sticker message content.
* @param stickerMessage - The custom message containing sticker data.
* @param _theme - The theme object for styling.
* @returns The JSX element for the sticker message content.
*/
getStickerMessageContentView(stickerMessage: CometChat$1.CustomMessage): react_jsx_runtime.JSX.Element;
/**
* Creates a sticker message template.
* @param _theme - The theme object for styling.
* @returns The sticker message template.
*/
getStickerTemplate(): CometChatMessageTemplate;
/**
* Checks if a specific message template already exists.
* @param template - An array of message templates.
* @param type - The type of message template to check for.
* @returns True if the template exists, false otherwise.
*/
checkIfTemplateExist(template: CometChatMessageTemplate[], type: string): boolean;
/**
* Retrieves all message categories, including custom categories.
* @returns An array of message categories.
*/
getAllMessageCategories(additionalConfigurations?: Object | undefined): string[];
/**
* Retrieves all message types, including sticker types.
* @returns An array of message types.
*/
getAllMessageTypes(): string[];
/**
* Retrieves the ID of the sticker extension.
* @returns The ID string.
*/
getId(): string;
/**
* Retrieves the last message in a conversation, checking for sticker messages.
* @param conversation - The conversation object.
* @param loggedInUser - The logged-in user.
* @param additionalConfigurations - Additional configurations, if any.
* @returns A string representing the last message.
*/
getLastConversationMessage(conversation: CometChat$1.Conversation, loggedInUser: CometChat$1.User, additionalConfigurations?: any): string;
}
/**
* Class representing a Thumbnail Generation extension for managing thumbnail generation functionality.
*
* @extends {ExtensionsDataSource}
*/
declare class ThumbnailGenerationExtension extends ExtensionsDataSource {
/**
* Adds the Thumbnail Generation extension by configuring the ChatConfigurator.
*
* This method enables the Thumbnail Generation extension by creating and adding a
* `ThumbnailGenerationExtensionDecorator` to the `ChatConfigurator`.
*/
addExtension(): void;
/**
* Gets the unique identifier for the Thumbnail Generation extension.
*
* @returns {string} The unique identifier for the Thumbnail Generation extension.
*/
getExtensionId(): string;
}
/**
* Class representing a Thumbnail Generation extension decorator.
* Extends the `DataSourceDecorator` to handle thumbnail generation for images and videos.
*
* @extends {DataSourceDecorator}
*/
declare class ThumbnailGenerationExtensionDecorator extends DataSourceDecorator {
/**
* Gets the unique identifier for the Thumbnail Generation extension decorator.
*
* @returns {string} The unique identifier for the Thumbnail Generation extension decorator.
*/
getId(): string;
/**
* Provides the image message bubble with support for thumbnail generation.
* If the "imagemoderation" extension is included, it uses the default image bubble.
* Otherwise, it checks for a thumbnail URL in the message metadata and uses it if available.
*
* @param {string} imageUrl - The URL of the image.
* @param {string} placeholderImage - The URL of the placeholder image.
* @param {CometChat.MediaMessage} message - The media message containing the image.
* @param {Function} [onClick] - Optional click event handler.
* @param {ImageBubbleStyle} [style] - Optional style for the image bubble.
* @returns {React.ReactNode} The rendered image message bubble.
*/
getImageMessageBubble(imageUrl: string, placeholderImage: string, message: CometChat.MediaMessage, onClick?: Function): JSX.Element | Element;
/**
* Provides the video message bubble with support for thumbnail generation.
* It checks for a thumbnail URL in the message metadata and uses it if available.
*
* @param {string} videoUrl - The URL of the video.
* @param {CometChat.MediaMessage} message - The media message containing the video.
* @param {string} [thumbnailUrl] - Optional URL of the thumbnail image.
* @param {Function} [onClick] - Optional click event handler.
* @returns {React.ReactNode} The rendered video message bubble.
*/
getVideoMessageBubble(videoUrl: string, message: CometChat.MediaMessage, thumbnailUrl?: string, onClick?: Function): JSX.Element | Element;
}
declare class CallingExtensionDecorator extends DataSourceDecorator {
loggedInUser: CometChat.User | null;
configuration?: CallingConfiguration;
constructor(dataSource: DataSource, configuration?: CallingConfiguration);
addLoginListener(): void;
getLoggedInUser(): Promise<void>;
getAllMessageTypes(): string[];
getId(): string;
getAllMessageCategories(additionalConfigurations?: Object | undefined): string[];
checkIfTemplateTypeExist(template: CometChatMessageTemplate[], type: string): boolean;
checkIfTemplateCategoryExist(template: CometChatMessageTemplate[], category: string): boolean;
getAllMessageTemplates(additionalConfigurations?: any): CometChatMessageTemplate[];
getDirectCallTemplate(): CometChatMessageTemplate;
getDefaultCallTemplate(): CometChatMessageTemplate[];
getSessionId(_message: CometChat.CustomMessage): any;
/**
* Function for displaying the call initiation time in call logs.
* @returns CalendarObject
*/
getDateFormat(): CalendarObject;
getDirectCallMessageBubble(_message: CometChat.CustomMessage, _alignment: MessageBubbleAlignment): react_jsx_runtime.JSX.Element;
startDirectCall(sessionId: string, message: CometChat.CustomMessage): void;
getCallActionMessage(_message: CometChat.Call): string;
getCallStatusClass(message: CometChat.Call): "" | "cometchat-message-bubble__outgoing-call" | "cometchat-message-bubble__incoming-call" | "cometchat-message-bubble__cancelled-call" | "cometchat-message-bubble__rejected-call" | "cometchat-message-bubble__busy-call" | "cometchat-message-bubble__ended-call" | "cometchat-message-bubble__answered-call" | "cometchat-message-bubble__unanswered-call" | "cometchat-message-bubble__missed-call";
getDefaultAudioCallMessageBubble(_message: CometChat.Call, _alignment: MessageBubbleAlignment): react_jsx_runtime.JSX.Element;
getDefaultVideoCallMessageBubble(_message: CometChat.Call, _alignment: MessageBubbleAlignment): react_jsx_runtime.JSX.Element;
getLastConversationMessage(conversation: CometChat.Conversation, loggedInUser: CometChat.User, additionalParams?: any): string;
getAuxiliaryHeaderMenu(user?: CometChat.User, group?: CometChat.Group, additionalConfigurations?: any): any[];
}
interface IncomingCallProps {
/**
* The CometChat call object used to initialize and display the incoming call component.
*/
call?: any;
/**
* A builder function for configuring or updating call settings dynamically.
*
* @param call - The current CometChat call object.
* @returns An instance of CallSettingsBuilder.
*/
callSettingsBuilder?: (call: CometChat.Call) => typeof CometChatUIKitCalls.CallSettingsBuilder;
/**
* Disables the sound for incoming calls.
* @defaultValue false
*/
disableSoundForCalls?: boolean;
/**
* Specifies a custom sound to play for incoming calls.
*/
customSoundForCalls?: string;
/**
* Callback function triggered when the accept button is clicked. Allows overriding the default behavior.
*
* @param call - An instance of `CometChat.Call` representing the Call.
* @returns void
*/
onAccept?: (call: CometChat.Call) => void;
/**
* Callback function triggered when the decline button is clicked. Allows overriding the default behavior.
*
* @param call - An instance of `CometChat.Call` representing the Call.
* @returns void
*/
onDecline?: (call: CometChat.Call) => void;
/**
* Callback function triggered when an error occurs in the incoming call component.
* @param error - An instance of `CometChat.CometChatException` representing the error.
* @return void
*/
onError?: ((error: CometChat.CometChatException) => void) | null;
/**
* A function that renders a JSX element to display the item view.
*
* @param call - An instance of `CometChat.Call` representing the call.
* @returns A JSX element to be rendered as the item view.
*/
itemView?: (call: CometChat.Call) => JSX.Element;
/**
* A function that renders a JSX element to display the leading view.
*
* @param call - An instance of `CometChat.Call` representing the call.
* @returns A JSX element to be rendered as the leading view.
*/
leadingView?: (call: CometChat.Call) => JSX.Element;
/**
* A function that renders a JSX element to display the title view.
*
* @param call - An instance of `CometChat.Call` representing the call.
* @returns A JSX element to be rendered as the title view.
*/
titleView?: (call: CometChat.Call) => JSX.Element;
/**
* A function that renders a JSX element to display the subtitle view.
*
* @param call - An instance of `CometChat.Call` representing the call.
* @returns A JSX element to be rendered as the subtitle view.
*/
subtitleView?: (call: CometChat.Call) => JSX.Element;
/**
* A function that renders a JSX element to display the trailing view.
*
* @param call - An instance of `CometChat.Call` representing the call.
* @returns A JSX element to be rendered as the trailing view.
*/
trailingView?: (call: CometChat.Call) => JSX.Element;
}
declare const CometChatIncomingCall: (props: IncomingCallProps) => react_jsx_runtime.JSX.Element;
interface OngoingCallProps {
callSettingsBuilder?: typeof CometChatUIKitCalls.CallSettings;
sessionID: string;
onError?: Function;
callWorkflow?: CallWorkflow;
}
declare const CometChatOngoingCall: (props: OngoingCallProps) => react_jsx_runtime.JSX.Element;
/**
* Props interface for the outgoing call component
*/
interface OutgoingCallProps {
/**
* The CometChat call object used to set up and launch the outgoing call.
*/
call?: CometChat.Call;
/**
* Disables the sound of outgoing calls.
* @defaultValue false
*/
disableSoundForCalls?: boolean;
/**
* Specifies a custom sound to play for outgoing calls.
*/
customSoundForCalls?: string;
/**
* Callback function triggered when an error occurs in the outgoing call component.
* @param error - An instance of `CometChat.CometChatException` representing the error.
* @return void
*/
onError?: ((error: CometChat.CometChatException) => void) | null;
/**
* Callback function triggered when the cancel button is clicked in the outgoing call component.
* @return void
*/
onCallCanceled?: Function;
/**
* This prop renders the custom title view for the outgoing call.
* Use this to override the existing title of user name from the outgoing call.
*/
titleView?: JSX.Element;
/**
* This prop renders the custom sub title view for the outgoing call.
* Use this to override the existing sub title text from the outgoing call.
*/
subtitleView?: JSX.Element;
/**
* This prop renders the custom avatar view for the outgoing call.
* Use this to override the existing avatar image from the outgoing call.
*/
avatarView?: JSX.Element;
/**
* This prop renders the custom cancel-call button view for the outgoing call.
* Use this to override the existing cancel call button view from the outgoing call.
*/
cancelButtonView?: JSX.Element;
}
declare const CometChatOutgoingCall: (props: OutgoingCallProps) => react_jsx_runtime.JSX.Element;
interface CallLogsProps {
/**
* Object representing the active call that is currently selected.
*/
activeCall?: any;
/**
* Allows filtering and customizing call logs using available parameters.
* @defaultValue Default request builder having the limit set to 30.
*/
callLogRequestBuilder?: any;
/**
* Format for displaying the call initiation time in call logs.
*/
callInitiatedDateTimeFormat?: CalendarObject;
/**
* Callback function triggered when a call log list item is clicked.
* @returns void
*/
onItemClick?: (call: any) => void;
/**
* Callback function triggered when the call button in the trailing view is clicked.
* @returns void
*/
onCallButtonClicked?: (call: any) => void;
/**
* Callback function triggered when the component encounters an error.
*
* @param error - An instance of CometChat.CometChatException representing the error.
* @returns void
*/
onError?: ((error: CometChat.CometChatException) => void) | null;
/**
* A custom view to display when call logs are being loaded.
*/
loadingView?: JSX.Element;
/**
* A custom view to display when no call logs are available.
*/
emptyView?: JSX.Element;
/**
* A custom view to display when an error occurs while fetching the call logs.
*/
errorView?: JSX.Element;
/**
* A function that renders a JSX element to display the item view.
*
* @param call - An instance of `any` representing the CallLog.
* @returns A JSX element to be rendered as the item view.
*/
itemView?: (call: any) => JSX.Element;
/**
* A function that renders a JSX element to display the leading view.
*
* @param call - An instance of `any` representing the callLog.
* @returns A JSX element to be rendered as the leading view.
*/
leadingView?: (call: any) => JSX.Element;
/**
* A function that renders a JSX element to display the title view.
*
* @param call - An instance of `any` representing the callLog.
* @returns A JSX element to be rendered as the title view.
*/
titleView?: (call: any) => JSX.Element;
/**
* A function that renders a JSX element to display the subtitle view.
*
* @param call - An instance of `any` representing the callLog.
* @returns A JSX element to be rendered as the subtitle view.
*/
subtitleView?: (call: any) => JSX.Element;
/**
* A function that renders a JSX element to display the trailing view.
*
* @param call - An instance of `any` representing the callLog.
* @returns A JSX element to be rendered as the trailing view.
*/
trailingView?: (call: any) => JSX.Element;
}
declare const CometChatCallLogs: (props: CallLogsProps) => react_jsx_runtime.JSX.Element;
interface ConversationsProps {
/**
* Disables the display of message read receipts.
*
* @remarks If set to `true`, the receipt status of the sent message won't be displayed.
* @defaultValue `false`
*/
hideReceipts?: boolean;
/**
* Hides the default and the custom error view passed in the `errorView` prop.
*
* @defaultValue `false`
*/
hideError?: boolean;
/**
* Hides the delete conversation option in the default context menu.
*
* @defaultValue `false`
*/
hideDeleteConversation?: boolean;
/**
* Hides the user's online/offline status indicator.
*
* @defaultValue `false`
*/
hideUserStatus?: boolean;
/**
* Hides the group type icon.
*
* @defaultValue `false`
*/
hideGroupType?: boolean;
/**
* A request builder to fetch conversations.
*
* @defaultValue Default request builder with the limit set to 30.
*/
conversationsRequestBuilder?: CometChat.ConversationsRequestBuilder;
/**
* Specifies the conversation to highlight in the list.
*/
activeConversation?: CometChat.Conversation;
/**
* Allows the user to pass custom formatters for text.
*
* These formatters should be an array of `CometChatTextFormatter` instances, enabling customized text rendering and processing.
*/
textFormatters?: CometChatTextFormatter[];
/**
* Determines the selection mode for the component.
*
* @defaultValue `SelectionMode.none`
*/
selectionMode?: SelectionMode;
/**
* A function that returns a list of actions available when hovering over a conversation item.
* @param conversation - An instance of `CometChat.Conversation` representing the conversation.
* @returns An array of `CometChatOption` objects.
*/
options?: ((conversation: CometChat.Conversation) => CometChatOption[]) | null;
/**
* Format for displaying the timestamp of the last message in the conversations list.
*/
lastMessageDateTimeFormat?: CalendarObject;
/**
* Disables sound for incoming messages.
*
* @defaultValue `false`
*/
disableSoundForMessages?: boolean;
/**
* Custom audio sound for incoming messages.
*/
customSoundForMessages?: string;
/**
* Callback function triggered when the component encounters an error.
*
* @param error - An instance of `CometChat.CometChatException` representing the error.
* @returns void
*/
onError?: ((error: CometChat.CometChatException) => void) | null;
/**
* Callback function invoked when a conversation item is clicked.
*
* @param conversation - An instance of `CometChat.Conversation` representing the clicked conversation.
* @returns void
*/
onItemClick?: (conversation: CometChat.Conversation) => void;
/**
* Callback function invoked when a conversation item is selected.
*
* @param conversation - An instance of `CometChat.Conversation` representing the selected conversation.
* @param selected - A boolean indicating whether the item is selected.
* @returns void
* @remarks This prop works only if `selectionMode` is not set to `SelectionMode.none`.
*/
onSelect?: (conversation: CometChat.Conversation, selected: boolean) => void;
/**
* A custom component to render in the top-right corner of the Conversations UI.
*/
headerView?: JSX$1.Element;
/**
* A custom component to display during the loading state.
*/
loadingView?: JSX$1.Element;
/**
* A custom component to display when there are no conversations available.
*/
emptyView?: JSX$1.Element;
/**
* A custom component to display when an error occurs.
*/
errorView?: JSX$1.Element;
/**
* A custom view to render each conversation in the list.
*
* @param conversation - An instance of `CometChat.Conversation` representing the conversation.
* @returns A JSX element to be rendered as the conversation item.
*/
itemView?: (conversation: CometChat.Conversation) => JSX$1.Element;
/**
* A function that renders a JSX element to display the leading view.
*
* @param conversation - An instance of `CometChat.Conversation` representing the conversation.
* @returns A JSX element to be rendered as the leading view.
*/
leadingView?: (conversation: CometChat.Conversation) => JSX$1.Element;
/**
* A function that renders a JSX element to display the title view.
*
* @param conversation - An instance of `CometChat.Conversation` representing the conversation.
* @returns A JSX element to be rendered as the title view.
*/
titleView?: (conversation: CometChat.Conversation) => JSX$1.Element;
/**
* A custom view to render the subtitle for each conversation.
*
* @param conversation - An instance of `CometChat.Conversation` representing the conversation.
* @returns A JSX element to be rendered as the subtitle view.
*/
subtitleView?: (conversation: CometChat.Conversation) => JSX$1.Element;
/**
* A custom view to render at the end of each conversation item.
*
* @param conversation - An instance of `CometChat.Conversation` representing the conversation.
* @returns A JSX element to be rendered as the trailing view.
*/
trailingView?: (conversation: CometChat.Conversation) => JSX$1.Element;
}
/**
* Renders a scrollable list of conversations that has been created in a CometChat app
*/
declare function CometChatConversations(props: ConversationsProps): react_jsx_runtime.JSX.Element;
interface GroupMembersProps {
/**
* Hides the default search bar.
*
* @defaultValue `false`
*/
hideSearch?: boolean;
/**
* Hides the default and custom error view passed in `errorView` prop.
*
* @defaultValue `false`
*/
hideError?: boolean;
/**
* Disables the loading state while fetching users.
*
* @defaultValue `false`
*/
disableLoadingState?: boolean;
/**
* Hides the option to kick a member from the group.
*
* @defaultValue `false`
*/
hideKickMemberOption?: boolean;
/**
* Hides the option to ban a member from the group.
*
* @defaultValue `false`
*/
hideBanMemberOption?: boolean;
/**
* Hides the option to change the scope of a group member.
*
* @defaultValue `false`
*/
hideScopeChangeOption?: boolean;
/**
* Hides the user's online/offline status indicator.
*
* @defaultValue `false`
*/
hideUserStatus?: boolean;
/**
* The group for which members are being fetched.
*/
group: CometChat.Group;
/**
* Request builder to fetch group members.
*
* @defaultValue Default request builder having the limit set to `30`.
*/
groupMemberRequestBuilder?: CometChat.GroupMembersRequestBuilder;
/**
* Request builder with search parameters to fetch group members.
*
* @remarks If the search input is not empty, the search keyword of this request builder is set to the text in the search input.
*/
searchRequestBuilder?: CometChat.GroupMembersRequestBuilder;
/**
* The keyword used to filter the group members list.
*
* @defaultValue `""`
*/
searchKeyword?: string;
/**
* A function that returns a list of actions available when hovering over a group member item.
*
* @param group - The group instance.
* @param groupMember - An instance of `CometChat.GroupMember` representing the group member.
* @returns An array of `CometChatOption`.
*/
options?: (group: CometChat.Group, groupMember: CometChat.GroupMember) => CometChatOption[];
/**
* Selection mode to use for the default list item view.
*
* @defaultValue `SelectionMode.none`
*/
selectionMode?: SelectionMode;
/**
* Callback function invoked when an error occurs in the component.
*/
onError?: ((error: CometChat.CometChatException) => void) | null;
/**
* Callback function invoked when a group member item is clicked.
*
* @param groupMember - An instance of `CometChat.GroupMember` representing the group member.
* returns void
*/
onItemClick?: (groupMember: CometChat.GroupMember) => void;
/**
* Callback function invoked when a group member is selected or deselected.
*
* @param groupMember - An instance of `CometChat.GroupMember` representing the group member.
* @param selected - Boolean value to identify if the member is selected or removed.
* @returns void
*/
onSelect?: (groupMember: CometChat.GroupMember, selected: boolean) => void;
/**
* Callback function invoked when the group members list is empty.
* @returns void
*/
onEmpty?: () => void;
/**
* A custom component to render in the top-right corner of the group members list.
*/
headerView?: JSX$1.Element;
/**
* A custom view to display during the loading state.
*/
loadingView?: JSX$1.Element;
/**
* Custom view for the error state of the component.
*/
errorView?: JSX$1.Element;
/**
* A custom view to display when no group members are available in the list.
*/
emptyView?: JSX$1.Element;
/**
* A custom view to render for each group member in the fetched list.
*
* @param groupMember - An instance of `CometChat.GroupMember` representing the group member.
* @returns A JSX element to be rendered as the group member item.
*/
itemView?: (groupMember: CometChat.GroupMember) => JSX$1.Element;
/**
* A function that renders a JSX element to display the leading view.
*
* @param groupMember - An instance of `CometChat.GroupMember` representing the group member.
* @returns A JSX element to be rendered as the leading view.
*/
leadingView?: (groupMember: CometChat.GroupMember) => JSX$1.Element;
/**
* A function that renders a JSX element to display the title view.
*
* @param groupMember - An instance of `CometChat.GroupMember` representing the group member.
* @returns A JSX element to be rendered as the title view.
*/
titleView?: (groupMember: CometChat.GroupMember) => JSX$1.Element;
/**
* A function that renders a JSX element to display the subtitle view.
*
* @param groupMember - An instance of `CometChat.GroupMember` representing the group member.
* @returns A JSX element to be rendered as the subtitle view.
*/
subtitleView?: (groupMember: CometChat.GroupMember) => JSX$1.Element;
/**
* A function that renders a JSX element to display the trailing view.
*
* @param groupMember - An instance of `CometChat.GroupMember` representing the group member.
* @returns A JSX element to be rendered as the trailing view.
*/
trailingView?: (groupMember: CometChat.GroupMember) => JSX$1.Element;
}
declare function CometChatGroupMembers(props: GroupMembersProps): react_jsx_runtime.JSX.Element;
interface GroupsProps {
/**
* Hides the default search bar.
*
* @defaultValue `false`
*/
hideSearch?: boolean;
/**
* Hides the default and custom error view passed in `errorView` prop.
*
* @defaultValue `false`
*/
hideError?: boolean;
/**
* Hides the group type icon.
*
* @defaultValue `false`
*/
hideGroupType?: boolean;
/**
* The group to highlight in the list.
*/
activeGroup?: CometChat.Group;
/**
* A request builder for fetching groups.
*
* @defaultValue Default request builder having the limit set to `30`.
*/
groupsRequestBuilder?: CometChat.GroupsRequestBuilder;
/**
* A request builder configured with search parameters to fetch groups.
*
* @remarks If the search input is not empty, the search keyword of this request builder is set to the text in the search input.
*/
searchRequestBuilder?: CometChat.GroupsRequestBuilder;
/**
* A function that returns a list of actions available when hovering over a group item.
* @param group - An instance of `CometChat.Group` representing the group.
* @returns An array of `CometChatOption` objects.
*/
options?: (group: CometChat.Group) => CometChatOption[];
/**
* Selection mode to use for the default trailing view.
*
* @defaultValue `SelectionMode.none`
*/
selectionMode?: SelectionMode;
/**
* Callback function invoked when an error occurs in the component.
* @param error - An instance of `CometChat.CometChatException` representing the error that occurred.
* @returns void
*/
onError?: ((error: CometChat.CometChatException) => void) | null;
/**
* Callback function invoked when a group is selected.
*
* @remarks This prop works only if `selectionMode` is not set to `SelectionMode.none`.
* @param group - An instance of `CometChat.Group` representing the selected group.
* @param selected - A boolean indicating whether the group is selected.
* @returns void
*/
onSelect?: (group: CometChat.Group, selected: boolean) => void;
/**
* Callback function invoked when a group item is clicked.
*
* @param group - An instance of `CometChat.Group` representing the clicked group.
* @returns void
*/
onItemClick?: (group: CometChat.Group) => void;
/**
* A custom component to render in the top-right corner of the groups list.
*/
headerView?: JSX$1.Element;
/**
* A custom view to display during the loading state.
*/
loadingView?: JSX$1.Element;
/**
* Custom view for the empty state of the component.
*/
emptyView?: JSX$1.Element;
/**
* A custom view to display when an error occurs.
*/
errorView?: JSX$1.Element;
/**
* A custom view to render for each group in the fetched list.
*
* @param group - An instance of `CometChat.Group` representing the group.
* @returns A JSX element to be rendered as the group item.
*/
itemView?: (group: CometChat.Group) => JSX$1.Element;
/**
* A function that renders a JSX element to display the leading view.
*
* @param group - An instance of `CometChat.Group` representing the group.
* @returns A JSX element to be rendered as the leading view.
*/
leadingView?: (group: CometChat.Group) => JSX$1.Element;
/**
* A function that renders a JSX element to display the title view.
*
* @param group - An instance of `CometChat.Group` representing the group.
* @returns A JSX element to be rendered as the title view.
*/
titleView?: (group: CometChat.Group) => JSX$1.Element;
/**
* Custom subtitle view to be rendered for each group in the fetched list.
*
* @param group - An instance of `CometChat.Group` representing the group.
* @returns A JSX element to be rendered as the subtitle view.
*/
subtitleView?: (group: CometChat.Group) => JSX$1.Element;
/**
* A function that renders a JSX element to display the trailing view.
*
* @param group - An instance of `CometChat.Group` representing the group.
* @returns A JSX element to be rendered as the trailing view.
*/
trailingView?: (group: CometChat.Group) => JSX$1.Element;
}
/**
* Renders a scrollable list of groups that has been created in a CometChat app
*/
declare function CometChatGroups(props: GroupsProps): react_jsx_runtime.JSX.Element;
/**Interface defining the structure for MessageBubbleProps */
interface MessageBubbleProps {
id: string | number;
setRef?: (ref: any) => void;
leadingView?: JSX.Element | null;
headerView?: JSX.Element | null;
replyView?: JSX.Element | null;
contentView?: JSX.Element | null;
bottomView?: JSX.Element | null;
threadView?: JSX.Element | null;
footerView?: JSX.Element | null;
statusInfoView?: JSX.Element | null;
options: (CometChatActionsIcon | CometChatActionsView)[];
alignment: MessageBubbleAlignment;
topMenuSize?: number;
type?: string;
category?: string;
}
/**
* React component for displaying different types of messages in the message list.
* @param props
* @returns
*/
declare const CometChatMessageBubble: (props: MessageBubbleProps) => react_jsx_runtime.JSX.Element;
interface MessageComposerProps {
/**
* The initial text pre-filled in the message input when the component mounts.
* @defaultValue ""
*/
initialComposerText?: string;
/**
* Disables the typing indicator for the current message composer.
* @defaultValue `false`
*/
disableTypingEvents?: boolean;
/**
* Disables the mentions functionality in the message composer.
* @defaultValue `false`
*/
disableMentions?: boolean;
/**
* Hides the image attachment option in the message composer.
* @defaultValue `false`
*/
hideImageAttachmentOption?: boolean;
/**
* Hides the video attachment option in the message composer.
* @defaultValue `false`
*/
hideVideoAttachmentOption?: boolean;
/**
* Hides the audio attachment option in the message composer.
* @defaultValue `false`
*/
hideAudioAttachmentOption?: boolean;
/**
* Hides the file attachment option in the message composer.
* @defaultValue `false`
*/
hideFileAttachmentOption?: boolean;
/**
* Hides the polls option in the message composer.
* @defaultValue `false`
*/
hidePollsOption?: boolean;
/**
* Hides the collaborative document option in the message composer.
* @defaultValue `false`
*/
hideCollaborativeDocumentOption?: boolean;
/**
* Hides the collaborative whiteboard option in the message composer.
* @defaultValue `false`
*/
hideCollaborativeWhiteboardOption?: boolean;
/**
* Hides the attachment button in the message composer.
* @defaultValue `false`
*/
hideAttachmentButton?: boolean;
/**
* Hides the voice recording button in the message composer.
* @defaultValue `false`
*/
hideVoiceRecordingButton?: boolean;
/**
* Hides the emoji keyboard button in the message composer.
* @defaultValue `false`
*/
hideEmojiKeyboardButton?: boolean;
/**
* Hides the stickers button in the message composer.
* @defaultValue `false`
*/
hideStickersButton?: boolean;
/**
* Hides the send button in the message composer.
* @defaultValue `false`
*/
hideSendButton?: boolean;
/**
* The user to send messages to. This prop specifies the recipient of the message.
*/
user?: CometChat.User;
/**
* The group to send messages to.
* @remarks This prop is used if the `user` prop is not provided.
*/
group?: CometChat.Group;
/**
* The ID of the parent message. This is used for threading or replying to a specific message.
*/
parentMessageId?: number;
/**
* Options for default attachments, including various attachment types available in the composer.
*/
attachmentOptions?: CometChatMessageComposerAction[];
/**
* Array of text formatters to apply to the message text for customization and styling.
*/
textFormatters?: Array<CometChatTextFormatter>;
/**
* Determines the behavior of the Enter key in the composer (e.g., send message or add a new line).
* @default EnterKeyBehavior.SendMessage
*/
enterKeyBehavior?: EnterKeyBehavior;
/**
* Disables sound for incoming messages.
*
* @defaultValue `false`
*/
disableSoundForMessage?: boolean;
/**
* Custom audio sound for incoming messages.
*/
customSoundForMessage?: string;
/**
* Callback function triggered when the message input text changes.
*
* @param text - The current text value of the message input.
* @returns void
*/
onTextChange?: (text: string) => void;
/**
* Callback function triggered when the message composer encounters an error.
*
* @param error - An instance of `CometChat.CometChatException` representing the error.
* @returns void
*/
onError?: ((error: CometChat.CometChatException) => void) | null;
/**
* Callback function triggered when the send button is clicked.
*
* @param message - The message that was sent.
* @param previewMessageMode - Optionally, specify if the message is in preview mode.
*/
onSendButtonClick?: (message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void;
/**
* A custom view for the send button to customize its appearance or behavior.
*/
sendButtonView?: JSX$1.Element;
/**
* A custom view for an auxiliary button, which can be used alongside the send button.
*/
auxiliaryButtonView?: JSX$1.Element;
/**
* A custom header section displayed at the top of the message composer, often used for media previews or additional information.
*/
headerView?: JSX$1.Element;
}
/**
* Renders a message composer to send messages to a user or group of a CometChat App
*/
declare function CometChatMessageComposer(props: MessageComposerProps): react_jsx_runtime.JSX.Element;
/**
* Interface for the props accepted by the CometChatMessageHeader component.
*/
interface MessageHeaderProps {
/**
* Shows the conversation summary button.
* @default false
*/
showConversationSummaryButton?: boolean;
/**
* Hides the back button in the header in mobile view.
* @default false
*/
hideBackButton?: boolean;
/**
* Hides the video call button.
* @default false
*/
hideVideoCallButton?: boolean;
/**
* Hides the voice call button.
* @default false
*/
hideVoiceCallButton?: boolean;
/**
* Hides the user's online/offline status indicator.
* @default false
*/
hideUserStatus?: boolean;
/**
* A `CometChat.User` object representing the user whose information (e.g., status) is displayed.
*/
user?: CometChat.User;
/**
* A `CometChat.Group` object representing the group whose details (e.g., member count) are displayed.
*/
group?: CometChat.Group;
/**
* Number of messages for which the summary should be shown.
* @default 1000
*/
summaryGenerationMessageCount?: number;
/**
* Enables the auto generation of conversation summary.
* @default false
*/
enableAutoSummaryGeneration?: boolean;
/**
* Callback function to handle errors related to CometChat operations.
*
* @param error - An instance of `CometChat.CometChatException` representing the error.
* @returns void
*/
onError?: ((error: CometChat.CometChatException) => void) | null;
/**
* Callback function triggered when the back action is performed.
*
* @returns void
*/
onBack?: () => void;
/**
* A custom JSX element for rendering a menu. It can be used to add options or actions.
*/
auxiliaryButtonView?: JSX$1.Element;
/**
* A custom JSX element for rendering a list item view, typically used to show user or group details.
*/
itemView?: JSX$1.Element;
/**
* A function that renders a JSX element to display the leading view.
*/
leadingView?: JSX$1.Element;
/**
* A function that renders a JSX element to display the title view.
*/
titleView?: JSX$1.Element;
/**
* Custom subtitle view, allowing you to render a JSX element as the subtitle.
* It can be used to provide additional information under the title.
*/
subtitleView?: JSX$1.Element;
/**
* A function that renders a JSX element to display the trailing view.
*/
trailingView?: JSX$1.Element;
/**
* Format for displaying the "last active" timestamp in the message header.
*/
lastActiveAtDateTimeFormat?: CalendarObject;
}
/** Functional component for rendering the CometChatMessageHeader */
declare const CometChatMessageHeader: (props: MessageHeaderProps) => react_jsx_runtime.JSX.Element;
/**
* Props for the MessageList component.
*/
interface MessageListProps {
/**
* Enables conversation starters for new chats.
* @default false
*/
showConversationStarters?: boolean;
/**
* Enables the generation of Smart Replies for incoming messages.
* @default false
*/
showSmartReplies?: boolean;
/**
* Hides the visibility of the date separator in the message list.
* @default false
*/
hideDateSeparator?: boolean;
/**
* Hides the sticky date header in the message list.
* @default false
*/
hideStickyDate?: boolean;
/**
* Hides the visibility of receipts in the message list.
* @default false
*/
hideReceipts?: boolean;
/**
* Hides the default & custom error view passed in `errorView` prop.
* @default false
*/
hideError?: boolean;
/**
* Hides the option to reply to messages in a thread.
* @default false
*/
hideReplyInThreadOption?: boolean;
/**
* Hides the option to translate messages.
* @default false
*/
hideTranslateMessageOption?: boolean;
/**
* Hides the option to edit messages.
* @default false
*/
hideEditMessageOption?: boolean;
/**
* Hides the option to delete messages.
* @default false
*/
hideDeleteMessageOption?: boolean;
/**
* Hides the option to react to messages.
* @default false
*/
hideReactionOption?: boolean;
/**
* Hides the option to message a user privately.
* @default false
*/
hideMessagePrivatelyOption?: boolean;
/**
* Hides the option to copy messages.
* @default false
*/
hideCopyMessageOption?: boolean;
/**
* Hides the option to view message information.
* @default false
*/
hideMessageInfoOption?: boolean;
/**
* Hides avatars for messages.
* @default false
*/
hideAvatar?: boolean;
/**
* Hides group action messages.
* @default false
*/
hideGroupActionMessages?: boolean;
/**
* Unique identifier of the parent message for displaying threaded conversations.
*/
parentMessageId?: number;
/**
* A `CometChat.User` object representing the participant of the chat whose details are displayed.
*/
user?: CometChat.User;
/**
* A `CometChat.Group` object representing the group whose chat messages are displayed.
*/
group?: CometChat.Group;
/**
* Instance of the `CometChat.ReactionsRequestBuilder` for managing message reactions.
*/
reactionsRequestBuilder?: CometChat.ReactionsRequestBuilder;
/**
* Instance of the `CometChat.MessagesRequestBuilder` for building the request to fetch messages.
*/
messagesRequestBuilder?: CometChat.MessagesRequestBuilder;
/**
* Array of message templates to define how various types of messages should be displayed.
*/
templates?: CometChatMessageTemplate[];
/**
* Array of text formatters for custom styling or formatting of message text bubbles.
*/
textFormatters?: CometChatTextFormatter[];
/**
* Specifies the alignment of messages in the list (e.g., left, right).
* @default MessageListAlignment.standard
*/
messageAlignment?: MessageListAlignment;
/**
* Automatically scrolls the message list to the bottom when a new message arrives.
* @default false
*/
scrollToBottomOnNewMessages?: boolean;
/**
* Specifies how many message options are visible in the main menu by default.
* @default 2
*/
quickOptionsCount?: number;
/**
* Disables the sound effect when new messages arrive.
* @default true
*/
disableSoundForMessages?: boolean;
/**
* Specifies a custom sound file to play when new messages arrive.
*/
customSoundForMessages?: string;
/**
* Specifies the keywords in incoming messages that will trigger Smart Replies.
* If set to an empty array [], Smart Replies will be generated for all messages.
* @default ['what', 'when', 'why', 'who', 'where', 'how', '?']
*/
smartRepliesKeywords?: string[];
/**
* Specifies the delay in milliseconds before Smart Replies are displayed.
* Setting it to 0 fetches Smart Replies instantly without delay.
* @default 10000
*/
smartRepliesDelayDuration?: number;
/**
* Callback function triggered when an error occurs during message fetching.
*
* @param error - An instance of `CometChat.CometChatException` representing the error.
* @returns void
*/
onError?: ((error: CometChat.CometChatException) => void) | null;
/**
* Callback function triggered when a thread reply is clicked.
*
* @param parentMessageId - The ID of the parent message to which replies belong.
*/
onThreadRepliesClick?: (message: CometChat.BaseMessage) => void;
/**
* Callback function that triggers when a reaction is clicked.
*
* @param reaction - The reaction object.
* @param message - The message associated with the reaction.
*/
onReactionClick?: (reaction: CometChat.ReactionCount, message: CometChat.BaseMessage) => void;
/**
* Callback function that triggers when an item in the reaction list is clicked.
*
* @param reaction - The reaction object.
* @param message - The message associated with the reaction.
*/
onReactionListItemClick?: (reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void;
/**
* Custom empty state view to display when there are no messages.
*/
emptyView?: JSX.Element;
/**
* A custom view displayed when there are no messages.
*/
errorView?: JSX.Element;
/**
* A custom view displayed while messages are being fetched.
*/
loadingView?: JSX.Element;
/**
* A custom header view component for the message list.
*/
headerView?: JSX.Element;
/**
* A custom footer view component for the message list.
*/
footerView?: JSX.Element;
/**
* Format for the date separators in the message list.
*/
separatorDateTimeFormat?: CalendarObject;
/**
* Format for sticky date headers displayed in the message list.
*/
stickyDateTimeFormat?: CalendarObject;
/**
* Format for the timestamp displayed next to messages.
*/
messageSentAtDateTimeFormat?: CalendarObject;
/**
* Format for timestamps displayed in message details (e.g., delivery or read time).
*/
messageInfoDateTimeFormat?: CalendarObject;
}
declare const CometChatMessageList: (props: MessageListProps) => react_jsx_runtime.JSX.Element;
interface UsersProps {
/**
* Hides the default search bar.
*
* @defaultValue `false`
*/
hideSearch?: boolean;
/**
* Displays an alphabetical section header for the user list.
*
* @defaultValue `true`
*/
showSectionHeader?: boolean;
/**
* Hides both the default and custom error view passed in `errorView` prop.
*
* @defaultValue `false`
*/
hideError?: boolean;
/**
* Disables the loading state while fetching users.
*
* @defaultValue `false`
*/
disableLoadingState?: boolean;
/**
* Hides the user's online/offline status indicator.
*
* @remarks If set to `true`, the status indicator of the default list item view is not displayed.
* @defaultValue `false`
*/
hideUserStatus?: boolean;
/**
* User to highlight.
*
* @remarks This prop is used if `activeUser` prop is not provided.
*/
activeUser?: CometChat.User;
/**
* Request builder to fetch users.
*
* @defaultValue Default request builder having the limit set to `30`.
*/
usersRequestBuilder?: CometChat.UsersRequestBuilder;
/**
* Request builder with search parameters to fetch users.
*
* @remarks If the search input is not empty, the search keyword of this request builder is set to the text in the search input.
*/
searchRequestBuilder?: CometChat.UsersRequestBuilder;
/**
* The search keyword used to filter the user list.
*
* @defaultValue `""`
*/
searchKeyword?: string;
/**
* The property on the user object used to extract the section header character.
*
* @remarks This property will be used to extract the section header character from the user object.
* @defaultValue `getName`
*/
sectionHeaderKey?: keyof CometChat.User;
/**
* A function that returns a list of actions available when hovering over a user item.
* @param user - An instance of `CometChat.User` representing the selected user.
* @returns An array of `CometChatOption` objects.
*/
options?: (user: CometChat.User) => CometChatOption[];
/**
* Selection mode to use for the default trailing view.
*
* @defaultValue `SelectionMode.none`
*/
selectionMode?: SelectionMode;
/**
* Callback function invoked when a user is selected.
*
* @remarks This prop works only if `selectionMode` is not set to `SelectionMode.none`.
* @param user - An instance of `CometChat.User` representing the selected user.
* @param selected - A boolean indicating whether the user is selected.
* @returns void
*/
onSelect?: (user: CometChat.User, selected: boolean) => void;
/**
* Callback function invoked when a user item is clicked.
*
* @param user - An instance of `CometChat.User` representing the clicked user.
* @returns void
*/
onItemClick?: (user: CometChat.User) => void;
/**
* Callback function invoked when an error occurs in the component.
* @param error - An instance of `CometChat.CometChatException` representing the error.
* @returns void
*/
onError?: ((error: CometChat.CometChatException) => void) | null;
/**
* Callback function to be executed when the user list is empty.
* @returns void
*/
onEmpty?: () => void;
/**
* A custom component to render in the top-right corner of the user list.
*/
headerView?: JSX$1.Element;
/**
* A custom view to display during the loading state.
*/
loadingView?: JSX$1.Element;
/**
* A custom view to display when an error occurs.
*/
errorView?: JSX$1.Element;
/**
* A custom view to display when no users are available in the list.
*/
emptyView?: JSX$1.Element;
/**
* A custom view to render for each user in the fetched list.
*
* @param user - An instance of `CometChat.User` representing the user.
* @returns A JSX element to be rendered as the user item.
*/
itemView?: (user: CometChat.User) => JSX$1.Element;
/**
* A function that renders a JSX element to display the leading view.
*
* @param user - An instance of `CometChat.User` representing the user.
* @returns A JSX element to be rendered as the leading view.
*/
leadingView?: (user: CometChat.User) => JSX$1.Element;
/**
* A custom function to render the title view of a user.
*
* @param user - An instance of `CometChat.User` representing the user.
* @returns A JSX element to be rendered as the title view.
*/
titleView?: (user: CometChat.User) => JSX$1.Element;
/**
* A custom view to render the subtitle for each user.
*
* @param user - An instance of `CometChat.User` representing the user.
* @returns A JSX element to be rendered as the subtitle view.
*/
subtitleView?: (user: CometChat.User) => JSX$1.Element;
/**
* A function that renders a JSX element to display the trailing view.
*
* @param user - An instance of `CometChat.User` representing the user.
* @returns A JSX element to be rendered as the trailing view.
*/
trailingView?: (user: CometChat.User) => JSX$1.Element;
}
/**
* Renders a scrollable list of users that has been created in a CometChat app
*/
declare function CometChatUsers(props: UsersProps): react_jsx_runtime.JSX.Element;
interface MessageInformationProps {
message: CometChat.BaseMessage;
onClose?: () => void;
/**
* Callback triggered when an error occurs during the message receipt fetching process.
* @param error - CometChatException object representing the error.
*/
onError?: ((error: CometChat.CometChatException) => void) | null;
/**
* Format for timestamps displayed in message details (e.g., delivery or read time).
*/
messageInfoDateTimeFormat?: CalendarObject;
/**
* Format for the timestamp displayed next to messages.
*/
messageSentAtDateTimeFormat?: CalendarObject;
}
declare const CometChatMessageInformation: (props: MessageInformationProps) => react_jsx_runtime.JSX.Element;
declare class CometChatUIKitConstants {
static MessageCategory: Readonly<{
message: string;
custom: string;
action: string;
call: string;
interactive: string;
}>;
static MessageTypes: Readonly<{
text: string;
file: string;
image: string;
audio: string;
video: string;
delete: "delete";
edited: "edited";
groupMember: "groupMember";
form: "form";
card: "card";
customInteractive: "customInteractive";
scheduler: "scheduler";
}>;
static groupMemberAction: Readonly<{
ROLE: "role";
BLOCK: "block";
REMOVE: "remove";
JOINED: string;
LEFT: string;
ADDED: string;
BANNED: string;
UNBANNED: string;
KICKED: string;
INVITED: string;
SCOPE_CHANGE: string;
}>;
static MessageReceiverType: Readonly<{
user: string;
group: string;
}>;
static userStatusType: Readonly<{
online: string;
offline: string;
}>;
static MessageOption: Readonly<{
editMessage: "edit";
deleteMessage: "delete";
replyMessage: "reply";
replyInThread: "replyInThread";
translateMessage: "translate";
reactToMessage: "react";
messageInformation: "messageInformation";
copyMessage: "copy";
shareMessage: "share";
forwardMessage: "forward";
sendMessagePrivately: "sendMessagePrivately";
replyMessagePrivately: "replyMessagePrivately";
}>;
static GroupOptions: Readonly<{
leave: "leave";
delete: "delete";
viewMembers: "viewMembers";
addMembers: "addMembers";
bannedMembers: "bannedMembers";
}>;
static GroupMemberOptions: Readonly<{
kick: "kick";
ban: "ban";
unban: "unban";
changeScope: "changeScope";
}>;
static groupMemberScope: Readonly<{
owner: "owner";
admin: string;
participant: string;
moderator: string;
}>;
static UserOptions: Readonly<{
block: "block";
unblock: "unblock";
viewProfile: "viewProfile";
}>;
static ConversationOptions: Readonly<{
delete: "delete";
}>;
static GroupTypes: Readonly<{
private: string;
password: string;
public: string;
}>;
static liveReaction: Readonly<{
timeout: 1500;
}>;
static messages: Readonly<{
MESSAGE_DELIVERED: "onMessagesDelivered";
MESSAGE_READ: "onMessagesRead";
MESSAGE_DELETED: "onMessageDeleted";
MESSAGE_EDITED: "onMessageEdited";
MESSAGE_SENT: "messageSent";
TEXT_MESSAGE_RECEIVED: "onTextMessageReceived";
MEDIA_MESSAGE_RECEIVED: "onMediaMessageReceived";
CUSTOM_MESSAGE_RECEIVED: "onCustomMessageReceived";
TRANSIENT_MESSAGE_RECEIVED: "onTransientMessageReceived";
INTERACTIVE_MESSAGE_RECEIVED: "onInteractiveMessageReceived";
DELIVERY: "delivery";
READ: "read";
APP_SYSTEM: "app_system";
MESSAGE_REACTION_ADDED: "onMessageReactionAdded";
MESSAGE_REACTION_REMOVED: "onMessageReactionRemoved";
}>;
static details: Readonly<{
primary: "primary";
secondary: "secondary";
}>;
static calls: Readonly<{
meeting: "meeting";
ongoing: string;
ended: string;
initiated: string;
cancelled: string;
rejected: string;
unanswered: string;
busy: string;
activecall: "cometchat:activecall";
default: string;
grid: string;
single: string;
spotlight: string;
tile: string;
}>;
static goalType: Readonly<{
allOf: _cometchat_chat_sdk_javascript.GoalType.ALL_OF;
anyOf: _cometchat_chat_sdk_javascript.GoalType.ANY_OF;
anyAction: _cometchat_chat_sdk_javascript.GoalType.ANY_ACTION;
none: _cometchat_chat_sdk_javascript.GoalType.NONE;
}>;
static requestBuilderLimits: Readonly<{
reactionListLimit: 10;
reactionInfoLimit: 10;
messageListLimit: 30;
usersLimit: 30;
groupsLimit: 30;
}>;
static radioNames: Readonly<{
conversations: "conversations";
users: "users";
groups: "groups";
changeScope: "changeScope";
groupMembers: "groupMembers";
}>;
}
declare class CometChatUtilityConstants {
static TextFormatter: Readonly<{
KEY_UP_DEBOUNCE_TIME: 300;
}>;
static MentionsTextFormatter: Readonly<{
MENTIONS_LIMIT: 10;
MENTIONS_HOVER_TIMEOUT: 500;
}>;
}
/**
* UI event subjects for handling various UI-related actions (e.g., showing panels, modals, dialogs, etc.)
*/
declare class CometChatUIEvents {
static ccHidePanel: Subject<PanelAlignment | void>;
static ccShowPanel: Subject<IPanel>;
static ccShowModal: Subject<IModal>;
static ccHideModal: Subject<void>;
static ccShowDialog: Subject<IDialog>;
static ccHideDialog: Subject<void>;
static ccActiveChatChanged: Subject<IActiveChatChanged>;
static ccShowOngoingCall: Subject<IShowOngoingCall>;
static ccOpenChat: Subject<IOpenChat>;
static ccComposeMessage: Subject<string>;
static ccMouseEvent: Subject<IMouseEvent>;
static ccShowMentionsCountWarning: Subject<IMentionsCountWarning>;
static ccActivePopover: Subject<string>;
}
/**
* Interface for ui-related events
*/
interface IOpenChat {
user?: CometChat.User;
group?: CometChat.Group;
}
interface IShowOngoingCall {
child: any;
}
interface IPanel {
child?: any;
configuration?: any;
message?: CometChat.BaseMessage;
position?: PanelAlignment;
}
interface IModal {
child?: any;
composerId?: ComposerId;
}
interface IActiveChatChanged {
user?: CometChat.User;
group?: CometChat.Group;
message?: CometChat.BaseMessage;
unreadMessageCount?: number;
}
interface IDialog {
child: any;
confirmCallback: any;
}
interface IMouseEvent {
event: Event;
source: MouseEventSource;
body?: {};
}
interface IMentionsCountWarning {
showWarning: boolean;
id?: string;
}
/**
* Call event subjects for handling various call-related actions (like outgoing calls, call acceptance, rejections, etc.)
*/
declare class CometChatCallEvents {
static ccOutgoingCall: Subject<CometChat.Call>;
static ccCallAccepted: Subject<CometChat.Call>;
static ccCallRejected: Subject<CometChat.Call>;
static ccCallEnded: Subject<CometChat.Call>;
}
/**
* Conversation event subjects for handling actions related to conversations (e.g., conversation deletion)
*/
declare class CometChatConversationEvents {
static ccConversationDeleted: Subject<CometChat.Conversation>;
/**
* Publishes a conversation event.
* @param {Subject<CometChat.Conversation>} event - The event to publish.
* @param {CometChat.Conversation} conversation - The conversation associated with the event.
*/
static publishEvent(event: Subject<CometChat.Conversation>, conversation: CometChat.Conversation): void;
}
/**
* Group event subjects for handling various group-related actions (e.g., group creation, member actions, ownership changes, etc.)
*/
declare class CometChatGroupEvents {
static ccGroupCreated: Subject<CometChat.Group>;
static ccGroupDeleted: Subject<CometChat.Group>;
static ccGroupMemberJoined: Subject<IGroupMemberJoined>;
static ccGroupLeft: Subject<IGroupLeft>;
static ccGroupMemberAdded: Subject<IGroupMemberAdded>;
static ccGroupMemberScopeChanged: Subject<IGroupMemberScopeChanged>;
static ccGroupMemberKicked: Subject<IGroupMemberKickedBanned>;
static ccGroupMemberBanned: Subject<IGroupMemberKickedBanned>;
static ccGroupMemberUnbanned: Subject<IGroupMemberUnBanned>;
static ccOwnershipChanged: Subject<IOwnershipChanged>;
/**
* Publishes a group event.
* @param {Subject<CometChat.Group>} event - The event to publish.
* @param {any} group - The group associated with the event.
*/
static publishEvent(event: Subject<CometChat.Group>, group: any): void;
}
/**
* Interfaces for various group-related events
*/
interface IGroupMemberScopeChanged {
message: CometChat.Action;
updatedUser: CometChat.GroupMember;
scopeChangedTo: any;
scopeChangedFrom: any;
group: CometChat.Group;
}
interface IOwnershipChanged {
group: CometChat.Group;
newOwner: CometChat.GroupMember;
}
interface IGroupMemberKickedBanned {
message: CometChat.Action;
kickedFrom: CometChat.Group;
kickedUser: CometChat.User;
kickedBy: CometChat.User;
}
interface IGroupMemberUnBanned {
message?: CometChat.Action;
unbannedUser: CometChat.User;
unbannedBy: CometChat.User;
unbannedFrom: CometChat.Group;
}
interface IGroupMemberAdded {
messages: CometChat.Action[];
usersAdded: CometChat.User[];
userAddedIn: CometChat.Group;
userAddedBy: CometChat.User;
}
interface IGroupMemberJoined {
joinedUser: CometChat.User;
joinedGroup: CometChat.Group;
}
interface IGroupLeft {
userLeft: CometChat.User;
leftGroup: CometChat.Group;
message: CometChat.Action;
}
/**
* Message event subjects for handling actions related to messages (e.g., message sent, edited, deleted, etc.)
*/
declare class CometChatMessageEvents {
static ccMessageSent: Subject<IMessages>;
static ccMessageEdited: Subject<IMessages>;
static ccMessageTranslated: Subject<IMessages>;
static ccMessageRead: Subject<CometChat.BaseMessage>;
static ccMessageDeleted: Subject<CometChat.BaseMessage>;
/**
* Publishes a message event.
* @param {Subject<any>} event - The event to publish.
* @param {any} item - The item (message, etc.) associated with the event.
*/
static publishEvent(event: any, item?: any): void;
/**
* message events wrapper of SDK listeners (e.g., media message, typing indicator, read receipts, etc.)
*/
static onTextMessageReceived: Subject<CometChat.TextMessage>;
static onMediaMessageReceived: Subject<CometChat.MediaMessage>;
static onCustomMessageReceived: Subject<CometChat.CustomMessage>;
static onTypingStarted: Subject<CometChat.TypingIndicator>;
static onTypingEnded: Subject<CometChat.TypingIndicator>;
static onMessagesDelivered: Subject<CometChat.MessageReceipt>;
static onMessagesRead: Subject<CometChat.MessageReceipt>;
static onMessagesDeliveredToAll: Subject<CometChat.MessageReceipt>;
static onMessagesReadByAll: Subject<CometChat.MessageReceipt>;
static onMessageEdited: Subject<CometChat.BaseMessage>;
static onMessageDeleted: Subject<CometChat.BaseMessage>;
static onMessageReactionAdded: Subject<CometChat.ReactionEvent>;
static onMessageReactionRemoved: Subject<CometChat.ReactionEvent>;
static onCustomInteractiveMessageReceived: Subject<CometChat.InteractiveMessage>;
static onFormMessageReceived: Subject<CometChat.InteractiveMessage>;
static onCardMessageReceived: Subject<CometChat.InteractiveMessage>;
static onSchedulerMessageReceived: Subject<CometChat.InteractiveMessage>;
}
/**
* Interface for message-related events
*/
interface IMessages {
message: CometChat.BaseMessage;
status: MessageStatus;
}
/**
* Class to handle user-related events such as blocking and unblocking users
*/
declare class CometChatUserEvents {
static ccUserBlocked: Subject<CometChat.User>;
static ccUserUnblocked: Subject<CometChat.User>;
/**
* Publishes a user event (like blocking/unblocking a user).
* This function will emit the event using the 'next()' method of the Subject.
*
* @param {Subject<CometChat.User>} event - The user event to be published (e.g., block or unblock).
* @param {any} item - The item (user) associated with the event.
*/
static publishEvent(event: Subject<CometChat.User>, item: any): void;
}
declare class ChatSdkEventInitializer {
private static messageListenerId;
static attachListeners(): void;
static detachListeners(): void;
private static getMessageListenerObject;
}
interface ActionBubbleProps {
messageText: string;
}
/**
* CometChatActionBubble is a generic component used to show an action message
*/
declare const CometChatActionBubble: (props: ActionBubbleProps) => react_jsx_runtime.JSX.Element;
interface ActionSheetProps {
actions: (CometChatMessageComposerAction | CometChatActionsView)[];
onActionItemClick: (action: CometChatMessageComposerAction | CometChatActionsView) => void;
}
declare const CometChatActionSheet: (props: ActionSheetProps) => react_jsx_runtime.JSX.Element;
interface CallButtonsProps {
/**
* Boolean flag to hide the video call button.
*/
hideVideoCallButton?: boolean;
/**
* Boolean flag to hide the voice call button.
*/
hideVoiceCallButton?: boolean;
/**
* Builder for checking and updating call settings.
* @param isAudioOnlyCall - Whether it's an audio-only call.
* @param user - The user object for the call (optional).
* @param group - The group object for the call (optional).
*/
callSettingsBuilder?: (isAudioOnlyCall: boolean, user?: CometChat.User, group?: CometChat.Group) => typeof CometChatUIKitCalls.CallSettingsBuilder;
/**
* Configuration object for managing outgoing call settings, such as call parameters, UI behaviors, or any pre-call settings.
*/
outgoingCallConfiguration?: OutgoingCallConfiguration;
/**
* Callback function triggered when an error occurs in the call buttons component.
* @param error - An instance of `CometChat.CometChatException` representing the error.
* @returns void
*/
onError?: ((error: CometChat.CometChatException) => void) | null;
}
interface CallButtonsUserProps extends CallButtonsProps {
/**
* A CometChat.User object representing the user in which the call will be initiated.
*/
user?: CometChat.User;
/**
* A CometChat.Group object representing the group in which the call will be initiated.
* @default null
*/
group?: CometChat.Group | null;
}
interface CallButtonsGroupProps extends CallButtonsProps {
/**
* A CometChat.User object representing the user in which the call will be initiated.
* @default null
*/
user?: CometChat.User | null;
/**
* A CometChat.Group object representing the group in which the call will be initiated.
*/
group?: CometChat.Group;
}
type CallButtonsPropsType = CallButtonsUserProps | CallButtonsGroupProps;
declare const CometChatCallButtons: (props: CallButtonsPropsType) => react_jsx_runtime.JSX.Element;
declare function isSentByMe(call: CometChat.Call | any, loggedInUser: CometChat.User): boolean;
declare function isMissedCall(call: CometChat.Call, loggedInUser: CometChat.User): boolean;
declare function verifyCallUser(call: any, loggedInUser: CometChat.User): any;
declare function convertMinutesToHoursMinutesSeconds(minutes: number): string;
declare function convertSecondsToHoursMinutesSeconds(seconds: number): string;
declare function downloadRecordingFromURL(url: string): void;
interface AudioBubbleProps {
src: string;
isSentByMe?: boolean;
}
declare const CometChatAudioBubble: (props: AudioBubbleProps) => react_jsx_runtime.JSX.Element;
interface BaseProps {
/** Name used for displaying initials in the avatar. */
name?: string;
/** URL of the avatar image to be displayed. */
image?: string;
}
type CometChatAvatarProps = BaseProps & {
name: string;
} | BaseProps & {
image: string;
};
declare const CometChatAvatar: (props: CometChatAvatarProps) => react_jsx_runtime.JSX.Element;
interface ButtonProps {
text?: string;
hoverText?: string;
iconURL?: string;
disabled?: boolean;
isLoading?: boolean;
onClick?: (customEvent: CustomEvent<{
event: PointerEvent;
}>) => void;
}
declare const CometChatButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
interface CallBubbleProps {
title?: string;
sessionId?: string;
subtitle?: React__default.ReactNode;
buttonText?: string;
iconURL?: string;
onClicked?: ((url: string) => void) | undefined;
isSentByMe?: boolean;
}
declare const CometChatCallBubble: (props: CallBubbleProps) => react_jsx_runtime.JSX.Element;
interface ChangeScopeProps {
title?: string;
buttonText?: string;
options: string[];
defaultSelection?: string;
onScopeChanged?: (scope: string) => Promise<void>;
onCloseClick?: () => void;
}
declare const CometChatChangeScope: (props: ChangeScopeProps) => react_jsx_runtime.JSX.Element;
interface CheckboxProps {
checked?: boolean;
labelText?: string;
disabled?: boolean;
onCheckBoxValueChanged: (input: {
checked: boolean;
labelText: string | undefined;
}) => void;
}
declare const CometChatCheckbox: (props: CheckboxProps) => react_jsx_runtime.JSX.Element;
interface ConfirmDialogProps {
/** The title displayed at the top of the confirm dialog. */
title?: string;
/** The descriptive text inside the confirm dialog. */
messageText?: string;
/** The text displayed on the "cancel" button. */
cancelButtonText?: string;
/** The text displayed on the "confirm" button. */
confirmButtonText?: string;
/** Callback function for when the confirm button is clicked. */
onSubmitClick?: () => Promise<void>;
/** Callback function for when the cancel button is clicked. */
onCancelClick?: () => void;
}
declare const CometChatConfirmDialog: (props: ConfirmDialogProps) => react_jsx_runtime.JSX.Element;
interface ContextMenuProps {
data: Array<CometChatActionsIcon | CometChatActionsView | CometChatOption>;
topMenuSize?: number;
moreIconHoverText?: string;
onOptionClicked?: (option: CometChatActionsIcon | CometChatActionsView | CometChatOption) => void;
placement?: Placement$1;
closeOnOutsideClick?: boolean;
disableBackgroundInteraction?: boolean;
useParentContainer?: boolean;
}
/**
* CometChatContextMenu is a composite component used to display menu data in required format.
* It accepts a data array for displaying the menu items and topMenuSize to specify how many menu items should be visible by default.
* It also accepts a URL for the 'more' icon, placement and a menu click callback function for customization purposes.
*/
declare const CometChatContextMenu: (props: ContextMenuProps) => react_jsx_runtime.JSX.Element;
interface VideoBubbleProps {
src: string;
autoPlay?: boolean;
loop?: boolean;
muted?: boolean;
isSentByMe?: boolean;
}
declare const CometChatVideoBubble: (props: VideoBubbleProps) => react_jsx_runtime.JSX.Element;
interface TextBubbleProps {
text: string;
textFormatters?: Array<CometChatTextFormatter>;
isSentByMe?: boolean;
}
declare const CometChatTextBubble: (props: TextBubbleProps) => react_jsx_runtime.JSX.Element;
interface SearchBarProps {
searchText?: string;
placeholderText?: string;
onChange?: (input: {
value?: string;
}) => void;
}
declare const CometChatSearchBar: (props: SearchBarProps) => react_jsx_runtime.JSX.Element;
interface RadioButtonProps {
checked?: boolean;
name?: string;
labelText?: string;
disabled?: boolean;
id?: string;
onRadioButtonChanged?: (input: {
checked: boolean;
labelText: string | undefined;
id: string;
}) => void;
}
declare const CometChatRadioButton: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
declare enum Placement {
top = "top",
right = "right",
bottom = "bottom",
left = "left"
}
interface PopoverProps {
placement?: Placement;
closeOnOutsideClick?: boolean;
showOnHover?: boolean;
debounceOnHover?: number;
children: ReactNode;
content: ReactNode;
childClickHandler?: (openContent: Function, event: Event) => void;
onOutsideClick?: () => void;
disableBackgroundInteraction?: boolean;
useParentContainer?: boolean;
useParentHeight?: boolean;
}
declare const CometChatPopover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<{
openPopover: () => void;
closePopover: () => void;
}>>;
interface MediaRecorderProps {
autoRecording?: boolean;
onCloseRecording?: () => void;
onSubmitRecording?: (file: Blob) => void;
}
declare const CometChatMediaRecorder: React__default.FC<MediaRecorderProps>;
interface ListItemProps {
id?: string;
avatarURL?: string;
avatarName?: string;
title: string;
onListItemClicked?: (input: {
id?: string;
}) => void;
menuView?: ReactNode;
subtitleView?: ReactNode;
trailingView?: ReactNode;
titleView?: ReactNode;
leadingView?: ReactNode;
stopEventPropagation?: boolean;
}
declare const CometChatListItem: (props: ListItemProps) => react_jsx_runtime.JSX.Element;
interface ImageBubbleProps {
src: string;
placeholderImage?: string;
onImageClicked?: (input: {
src: string;
}) => void;
isSentByMe?: boolean;
disableLoadingState?: boolean;
}
declare const CometChatImageBubble: (props: ImageBubbleProps) => react_jsx_runtime.JSX.Element;
/**
* Props for the CometChatFullScreenViewer component.
*/
interface FullScreenViewerProps {
/**
* URL of the image to be displayed
*/
url?: string;
/** Placeholder image URL */
placeholderImage?: string;
/** Callback function when the close button is clicked */
ccCloseClicked?: () => void;
/**
* The media message containing the image.
*/
message: CometChat.MediaMessage;
/**
* Format for timestamps associated with images in the message list.
*/
imageSentAtDateTimeFormat?: CalendarObject;
}
/**
* CometChatFullScreenViewer is a full-screen image viewer component with a customizable close button.
*
* @param {FullScreenViewerProps} props - The properties passed to the component.
*/
declare const CometChatFullScreenViewer: React__default.FC<FullScreenViewerProps>;
interface FileBubbleProps {
fileURL: string;
fileTypeIconURL?: string;
title?: string;
subtitle?: string;
isSentByMe?: boolean;
}
declare const CometChatFileBubble: (props: FileBubbleProps) => react_jsx_runtime.JSX.Element;
declare class CometChatEmoji {
char: string;
keywords: any;
constructor({ char, keywords }: {
char?: string | undefined;
keywords?: never[] | undefined;
});
}
declare class CometChatEmojiCategory {
id: string;
symbolURL: string;
name: string;
emojies: {
[key: string]: CometChatEmoji;
};
constructor({ id, symbolURL, name, emojies, }: {
id?: string | undefined;
symbolURL?: string | undefined;
name?: string | undefined;
emojies?: {} | undefined;
});
}
interface EmojiKeyboardProps {
emojiData?: CometChatEmojiCategory[];
onEmojiClick?: (emoji: string) => void;
}
declare const CometChatEmojiKeyboard: (props: EmojiKeyboardProps) => react_jsx_runtime.JSX.Element;
/**
* Interface for the props used in the CometChatEditPreview component.
*/
interface EditPreviewProps {
/** The title to display in the preview, defaults to "Edit Message"*/
previewTitle?: string;
/** The subtitle to display in the preview, can be left empty. */
previewSubtitle?: string;
/** Callback function that triggers when the close button is clicked. */
onClose?: () => void;
}
/**
* CometChatEditPreview Component
*
* A React component that displays a preview of an edited message with a title and subtitle.
* @param {EditPreviewProps} props - The props for the component.
* @returns {JSX.Element} A JSX element displaying the edit preview UI.
*/
declare const CometChatEditPreview: FC<EditPreviewProps>;
interface onOptionsChangedEvent {
/** The value of the selected option from the dropdown. */
value?: string;
}
interface DropDownProps {
/** List of options to be displayed in the dropdown. */
options: string[];
/** Value from the list to be selected by default. */
selectedOption?: string;
/** Callback invoked when the dropdown selection changes. */
onOptionsChanged?: (input: onOptionsChangedEvent) => void;
}
declare const CometChatDropDown: (props: DropDownProps) => react_jsx_runtime.JSX.Element;
interface DocumentBubbleProps {
bannerImage: string;
title: string;
URL: string;
subtitle: string;
buttonText: string;
isSentByMe?: boolean;
onClicked: ((url: string) => void) | undefined;
}
declare const CometChatDocumentBubble: (props: DocumentBubbleProps) => react_jsx_runtime.JSX.Element;
interface DateProps {
timestamp: number;
calendarObject: CalendarObject;
}
/**
* CometChatDate is a generic component used to display dates in the required format.
* It accepts a timestamp of the time to be displayed and the pattern in which the time should be displayed.
* It also accepts the customDateString prop, whose value is used as is for displaying the time.
*/
declare const CometChatDate: (props: DateProps) => react_jsx_runtime.JSX.Element;
interface DeleteBubbleProps {
isSentByMe: boolean;
/**
* Optional. The text to display. If not provided, a default
* localized "DELETE_MSG_TEXT" will be used.
*/
text?: string;
}
/**
* CometChatDeleteBubble is a generic component used to indicate that a message has been deleted.
* It accepts the isSentByMe prop and applies sender or receiver styling based on its value.
*/
declare const CometChatDeleteBubble: (props: DeleteBubbleProps) => react_jsx_runtime.JSX.Element;
interface ReactionInfoProps {
messageObject: CometChat.BaseMessage;
reaction: string;
placement?: Placement$1;
onError?: ((error: CometChat.CometChatException) => void) | null;
}
declare const CometChatReactionInfo: React__default.FC<ReactionInfoProps>;
interface ReactionListProps {
messageObject: CometChat.BaseMessage;
reactionsRequestBuilder?: CometChat.ReactionsRequestBuilder;
reactionItemClicked?: (reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void;
onError?: ((error: CometChat.CometChatException) => void) | null;
}
declare const CometChatReactionList: React__default.FC<ReactionListProps>;
interface ReactionsProps {
messageObject: CometChat.BaseMessage;
alignment?: MessageBubbleAlignment;
reactionsRequestBuilder?: CometChat.ReactionsRequestBuilder;
onReactionListItemClick?: (reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void;
hoverDebounceTime?: number;
onReactionClick?: (reaction: CometChat.ReactionCount, message: CometChat.BaseMessage) => void;
onError?: ((error: CometChat.CometChatException) => void) | null;
}
declare const CometChatReactions: React__default.FC<ReactionsProps>;
/**
* Utility class for handling call-related details in CometChat.
* It is used in CallingExtensionDecorator component.
*/
declare class CallingDetailsUtils {
/**
* Retrieves the default message types used in calling.
*
* @returns {string[]} An array of default message types for audio, video, and meeting calls.
*/
static getDefaultMessageTypes: () => string[];
/**
* Retrieves the default categories associated with calling.
*
* @returns {string[]} An array of default message categories for calls and custom messages.
*/
static getDefaultCategories: () => string[];
/**
* Checks if the call was sent by the logged-in user.
*
* @param {CometChat.Call} call - The call object.
* @param {CometChat.User} loggedInUser - The logged-in user object.
* @returns {boolean} True if the call was sent by the logged-in user, otherwise false.
*/
static isSentByMe(call: CometChat.Call, loggedInUser: CometChat.User): boolean;
/**
* Checks if the call is a missed call for the logged-in user.
*
* @param {CometChat.Call} call - The call object.
* @param {CometChat.User} loggedInUser - The logged-in user object.
* @returns {boolean} True if the call is missed, otherwise false.
*/
static isMissedCall(call: CometChat.Call, loggedInUser: CometChat.User): boolean;
/**
* Retrieves the localized call status message based on the call status and the user.
*
* @param {CometChat.Call} call - The call object.
* @param {CometChat.User} loggedInUser - The logged-in user object.
* @returns {string} The localized call status message.
*/
static getCallStatus(call: CometChat.Call, loggedInUser: CometChat.User): string;
}
/**
* A utility class for handling group member-related actions and options within CometChat.
* It is used in CometChatGroupMembers component.
*/
declare class GroupMemberUtils {
/**
* Retrieves the available options for a given group member based on their role and the group's state.
*
* @param {CometChat.GroupMember} groupMember - The group member for whom the options are being fetched.
* @param {CometChat.Group} group - The group to which the member belongs.
* @param {string} [loggedInUser=""] - The UID of the logged-in user.
* @returns {CometChatOption[] | string} - An array of options or the member's scope as a string.
*/
static getViewMemberOptions(groupMember: CometChat.GroupMember, group: CometChat.Group, loggedInUser?: string, additionalConfigurations?: any): string | CometChatOption[];
/**
* Retrieves the available options for a banned group member.
*
* @param {CometChat.Group} group - The group to which the member belongs.
* @param {CometChat.GroupMember} groupMember - The banned group member.
* @returns {CometChatOption[]} - An array of options available for the banned group member.
*/
static getBannedMemberOptions(group: CometChat.Group, groupMember: CometChat.GroupMember): CometChatOption[] | undefined;
/**
* Determines whether a scope change is allowed for a group member.
*
* @param {CometChat.Group} group - The group to which the member belongs.
* @param {CometChat.GroupMember} groupMember - The group member whose scope is to be changed.
* @returns {string[]} - An array of allowed scopes for the group member.
*/
static allowScopeChange(group: CometChat.Group, groupMember: CometChat.GroupMember): string[];
}
/**
* Utility class for handling message receipt statuses.
* It is used in CometChatConversations and CometChatMessageList components.
*/
declare class MessageReceiptUtils {
/**
* Gets the receipt status icon for a given message.
*
* Determines the receipt status based on the message's properties and returns
* the corresponding receipt icon.
*
* @param {CometChat.BaseMessage} messageObject - The message object for which to get the receipt status.
* @returns {receipts} - The receipt status icon.
*/
static getReceiptStatus: (messageObject: CometChat.BaseMessage) => receipts;
}
/**
* Enum representing different receipt statuses for a message.
*
* @readonly
* @enum {number}
*/
declare enum receipts {
/**
* Status indicating that the message is waiting to be processed.
*/
wait = 0,
/**
* Status indicating that the message has been sent.
*/
sent = 1,
/**
* Status indicating that the message has been delivered.
*/
delivered = 2,
/**
* Status indicating that the message has been read.
*/
read = 3,
/**
* Status indicating that an error occurred with the message.
*/
error = 4
}
/**
* Utility class for handling message display and styling.
* It is used in CometChatMessageInformation component.
*/
declare class MessageUtils {
/**
* Retrieves the content view for a message based on the provided template.
*
* @param {CometChat.BaseMessage} message - The message object for which to get the content view.
* @param {CometChatMessageTemplate} template - The message template to use for rendering the content view.
* @returns {object | null} - The content view for the message, or null if not found.
*/
getContentView(message: CometChat.BaseMessage, template: CometChatMessageTemplate, alignment?: MessageBubbleAlignment): any;
/**
* Retrieves the content view for a message based on the provided template.
*
* @param {CometChat.BaseMessage} message - The message object for which to get the content view.
* @param {CometChatMessageTemplate} template - The message template to use for rendering the content view.
* @returns {object | null} - The content view for the message, or null if not found.
*/
getStatusInfoView(message: CometChat.BaseMessage, template: CometChatMessageTemplate, alignment?: MessageBubbleAlignment, messageSentAtDateTimeFormat?: CalendarObject): any;
/**
* Retrieves the bubble wrapper for a message based on the provided template.
*
* @param {CometChat.BaseMessage} message - The message object for which to get the bubble wrapper.
* @param {CometChatMessageTemplate} template - The message template to use for rendering the bubble wrapper.
* @returns {object | null} - The bubble wrapper for the message, or null if not found.
*/
getBubbleWrapper(message: CometChat.BaseMessage, template: CometChatMessageTemplate): any;
/**
* Constructs a message bubble component based on the message, template, style, and alignment.
*
* @param {CometChat.BaseMessage} baseMessage - The message object to be displayed in the bubble.
* @param {CometChatMessageTemplate} template - The message template to use for rendering the bubble.
* @param {object} messageBubbleStyle - The style object for the message bubble.
* @param {MessageBubbleAlignment} alignment - The alignment of the message bubble (left or right).
* @returns {JSX.Element} - The message bubble component.
*/
getMessageBubble(baseMessage: CometChat.BaseMessage, template: CometChatMessageTemplate, alignment: MessageBubbleAlignment, messageSentAtDateTimeFormat?: CalendarObject): any;
/**
*
* @param {(CometChat.User | CometChat.GroupMember | any)} user
* @returns {boolean}
*/
getUserStatusVisible(user: CometChat.User | CometChat.GroupMember | any): boolean;
/**
* Description placeholder
*
* @param {*} message
* @returns {string}
*/
getActionMessage(message: CometChat.Action): string;
}
type GeneralEventTypes = {
[EventName: string]: unknown[];
};
type EventListener<EventTypes extends GeneralEventTypes, EventName extends keyof EventTypes> = (...args: EventTypes[EventName]) => void;
/** A simple event emitter that can be used to listen to and emit events. */
declare class EventEmitter<EventTypes extends GeneralEventTypes> {
private listeners;
/** Subscribe to an event. Returns an unsubscribe function. */
on<EventName extends keyof EventTypes>(event: EventName, listener: EventListener<EventTypes, EventName>, options?: {
once?: boolean;
}): () => void;
/** Unsubscribe from an event */
un<EventName extends keyof EventTypes>(event: EventName, listener: EventListener<EventTypes, EventName>): void;
/** Subscribe to an event only once */
once<EventName extends keyof EventTypes>(event: EventName, listener: EventListener<EventTypes, EventName>): () => void;
/** Clear all events */
unAll(): void;
/** Emit an event */
protected emit<EventName extends keyof EventTypes>(eventName: EventName, ...args: EventTypes[EventName]): void;
}
type BasePluginEvents = {
destroy: [];
};
type GenericPlugin = BasePlugin<BasePluginEvents, unknown>;
/** Base class for wavesurfer plugins */
declare class BasePlugin<EventTypes extends BasePluginEvents, Options> extends EventEmitter<EventTypes> {
protected wavesurfer?: WaveSurfer;
protected subscriptions: (() => void)[];
protected options: Options;
/** Create a plugin instance */
constructor(options: Options);
/** Called after this.wavesurfer is available */
protected onInit(): void;
/** Do not call directly, only called by WavesSurfer internally */
_init(wavesurfer: WaveSurfer): void;
/** Destroy the plugin and unsubscribe from all events */
destroy(): void;
}
type TreeNode = {
[key: string]: string | number | boolean | CSSStyleDeclaration | TreeNode | Node;
} & {
xmlns?: string;
style?: Partial<CSSStyleDeclaration>;
textContent?: string | Node;
children?: TreeNode;
};
declare function createElement(tagName: string, content: TreeNode & {
xmlns: string;
}, container?: Node): SVGElement;
declare function createElement(tagName: string, content?: TreeNode, container?: Node): HTMLElement;
declare const dom_createElement: typeof createElement;
declare namespace dom {
export {
dom_createElement as createElement,
createElement as default,
};
}
type PlayerOptions = {
media?: HTMLMediaElement;
mediaControls?: boolean;
autoplay?: boolean;
playbackRate?: number;
};
declare class Player<T extends GeneralEventTypes> extends EventEmitter<T> {
protected media: HTMLMediaElement;
private isExternalMedia;
constructor(options: PlayerOptions);
protected onMediaEvent<K extends keyof HTMLElementEventMap>(event: K, callback: (ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): () => void;
protected getSrc(): string;
private revokeSrc;
private canPlayType;
protected setSrc(url: string, blob?: Blob): void;
protected destroy(): void;
protected setMediaElement(element: HTMLMediaElement): void;
/** Start playing the audio */
play(): Promise<void>;
/** Pause the audio */
pause(): void;
/** Check if the audio is playing */
isPlaying(): boolean;
/** Jump to a specific time in the audio (in seconds) */
setTime(time: number): void;
/** Get the duration of the audio in seconds */
getDuration(): number;
/** Get the current audio position in seconds */
getCurrentTime(): number;
/** Get the audio volume */
getVolume(): number;
/** Set the audio volume */
setVolume(volume: number): void;
/** Get the audio muted state */
getMuted(): boolean;
/** Mute or unmute the audio */
setMuted(muted: boolean): void;
/** Get the playback speed */
getPlaybackRate(): number;
/** Check if the audio is seeking */
isSeeking(): boolean;
/** Set the playback speed, pass an optional false to NOT preserve the pitch */
setPlaybackRate(rate: number, preservePitch?: boolean): void;
/** Get the HTML media element */
getMediaElement(): HTMLMediaElement;
/** Set a sink id to change the audio output device */
setSinkId(sinkId: string): Promise<void>;
}
type WaveSurferOptions = {
/** Required: an HTML element or selector where the waveform will be rendered */
container: HTMLElement | string;
/** The height of the waveform in pixels, or "auto" to fill the container height */
height?: number | 'auto';
/** The width of the waveform in pixels or any CSS value; defaults to 100% */
width?: number | string;
/** The color of the waveform */
waveColor?: string | string[] | CanvasGradient;
/** The color of the progress mask */
progressColor?: string | string[] | CanvasGradient;
/** The color of the playpack cursor */
cursorColor?: string;
/** The cursor width */
cursorWidth?: number;
/** If set, the waveform will be rendered with bars like this: ▁ ▂ ▇ ▃ ▅ ▂ */
barWidth?: number;
/** Spacing between bars in pixels */
barGap?: number;
/** Rounded borders for bars */
barRadius?: number;
/** A vertical scaling factor for the waveform */
barHeight?: number;
/** Vertical bar alignment */
barAlign?: 'top' | 'bottom';
/** Minimum pixels per second of audio (i.e. the zoom level) */
minPxPerSec?: number;
/** Stretch the waveform to fill the container, true by default */
fillParent?: boolean;
/** Audio URL */
url?: string;
/** Pre-computed audio data, arrays of floats for each channel */
peaks?: Array<Float32Array | number[]>;
/** Pre-computed audio duration in seconds */
duration?: number;
/** Use an existing media element instead of creating one */
media?: HTMLMediaElement;
/** Whether to show default audio element controls */
mediaControls?: boolean;
/** Play the audio on load */
autoplay?: boolean;
/** Pass false to disable clicks on the waveform */
interact?: boolean;
/** Allow to drag the cursor to seek to a new position. If an object with `debounceTime` is provided instead
* then `dragToSeek` will also be true. If `true` the default is 200ms
*/
dragToSeek?: boolean | {
debounceTime: number;
};
/** Hide the scrollbar */
hideScrollbar?: boolean;
/** Audio rate, i.e. the playback speed */
audioRate?: number;
/** Automatically scroll the container to keep the current position in viewport */
autoScroll?: boolean;
/** If autoScroll is enabled, keep the cursor in the center of the waveform during playback */
autoCenter?: boolean;
/** Decoding sample rate. Doesn't affect the playback. Defaults to 8000 */
sampleRate?: number;
/** Render each audio channel as a separate waveform */
splitChannels?: Array<Partial<WaveSurferOptions> & {
overlay?: boolean;
}>;
/** Stretch the waveform to the full height */
normalize?: boolean;
/** The list of plugins to initialize on start */
plugins?: GenericPlugin[];
/** Custom render function */
renderFunction?: (peaks: Array<Float32Array | number[]>, ctx: CanvasRenderingContext2D) => void;
/** Options to pass to the fetch method */
fetchParams?: RequestInit;
/** Playback "backend" to use, defaults to MediaElement */
backend?: 'WebAudio' | 'MediaElement';
/** Nonce for CSP if necessary */
cspNonce?: string;
};
declare const defaultOptions: {
waveColor: string;
progressColor: string;
cursorWidth: number;
minPxPerSec: number;
fillParent: boolean;
interact: boolean;
dragToSeek: boolean;
autoScroll: boolean;
autoCenter: boolean;
sampleRate: number;
};
type WaveSurferEvents = {
/** After wavesurfer is created */
init: [];
/** When audio starts loading */
load: [url: string];
/** During audio loading */
loading: [percent: number];
/** When the audio has been decoded */
decode: [duration: number];
/** When the audio is both decoded and can play */
ready: [duration: number];
/** When visible waveform is drawn */
redraw: [];
/** When all audio channel chunks of the waveform have drawn */
redrawcomplete: [];
/** When the audio starts playing */
play: [];
/** When the audio pauses */
pause: [];
/** When the audio finishes playing */
finish: [];
/** On audio position change, fires continuously during playback */
timeupdate: [currentTime: number];
/** An alias of timeupdate but only when the audio is playing */
audioprocess: [currentTime: number];
/** When the user seeks to a new position */
seeking: [currentTime: number];
/** When the user interacts with the waveform (i.g. clicks or drags on it) */
interaction: [newTime: number];
/** When the user clicks on the waveform */
click: [relativeX: number, relativeY: number];
/** When the user double-clicks on the waveform */
dblclick: [relativeX: number, relativeY: number];
/** When the user drags the cursor */
drag: [relativeX: number];
/** When the user starts dragging the cursor */
dragstart: [relativeX: number];
/** When the user ends dragging the cursor */
dragend: [relativeX: number];
/** When the waveform is scrolled (panned) */
scroll: [visibleStartTime: number, visibleEndTime: number, scrollLeft: number, scrollRight: number];
/** When the zoom level changes */
zoom: [minPxPerSec: number];
/** Just before the waveform is destroyed so you can clean up your events */
destroy: [];
/** When source file is unable to be fetched, decoded, or an error is thrown by media element */
error: [error: Error];
};
declare class WaveSurfer extends Player<WaveSurferEvents> {
options: WaveSurferOptions & typeof defaultOptions;
private renderer;
private timer;
private plugins;
private decodedData;
protected subscriptions: Array<() => void>;
protected mediaSubscriptions: Array<() => void>;
protected abortController: AbortController | null;
static readonly BasePlugin: typeof BasePlugin;
static readonly dom: typeof dom;
/** Create a new WaveSurfer instance */
static create(options: WaveSurferOptions): WaveSurfer;
/** Create a new WaveSurfer instance */
constructor(options: WaveSurferOptions);
private updateProgress;
private initTimerEvents;
private initPlayerEvents;
private initRendererEvents;
private initPlugins;
private unsubscribePlayerEvents;
/** Set new wavesurfer options and re-render it */
setOptions(options: Partial<WaveSurferOptions>): void;
/** Register a wavesurfer plugin */
registerPlugin<T extends GenericPlugin>(plugin: T): T;
/** For plugins only: get the waveform wrapper div */
getWrapper(): HTMLElement;
/** For plugins only: get the scroll container client width */
getWidth(): number;
/** Get the current scroll position in pixels */
getScroll(): number;
/** Set the current scroll position in pixels */
setScroll(pixels: number): void;
/** Move the start of the viewing window to a specific time in the audio (in seconds) */
setScrollTime(time: number): void;
/** Get all registered plugins */
getActivePlugins(): GenericPlugin[];
private loadAudio;
/** Load an audio file by URL, with optional pre-decoded audio data */
load(url: string, channelData?: WaveSurferOptions['peaks'], duration?: number): Promise<void>;
/** Load an audio blob */
loadBlob(blob: Blob, channelData?: WaveSurferOptions['peaks'], duration?: number): Promise<void>;
/** Zoom the waveform by a given pixels-per-second factor */
zoom(minPxPerSec: number): void;
/** Get the decoded audio data */
getDecodedData(): AudioBuffer | null;
/** Get decoded peaks */
exportPeaks({ channels, maxLength, precision }?: {
channels?: number | undefined;
maxLength?: number | undefined;
precision?: number | undefined;
}): Array<number[]>;
/** Get the duration of the audio in seconds */
getDuration(): number;
/** Toggle if the waveform should react to clicks */
toggleInteraction(isInteractive: boolean): void;
/** Jump to a specific time in the audio (in seconds) */
setTime(time: number): void;
/** Seek to a percentage of audio as [0..1] (0 = beginning, 1 = end) */
seekTo(progress: number): void;
/** Play or pause the audio */
playPause(): Promise<void>;
/** Stop the audio and go to the beginning */
stop(): void;
/** Skip N or -N seconds from the current position */
skip(seconds: number): void;
/** Empty the waveform */
empty(): void;
/** Set HTML media element */
setMediaElement(element: HTMLMediaElement): void;
/**
* Export the waveform image as a data-URI or a blob.
*
* @param format The format of the exported image, can be `image/png`, `image/jpeg`, `image/webp` or any other format supported by the browser.
* @param quality The quality of the exported image, for `image/jpeg` or `image/webp`. Must be between 0 and 1.
* @param type The type of the exported image, can be `dataURL` (default) or `blob`.
* @returns A promise that resolves with an array of data-URLs or blobs, one for each canvas element.
*/
exportImage(format: string, quality: number, type: 'dataURL'): Promise<string[]>;
exportImage(format: string, quality: number, type: 'blob'): Promise<Blob[]>;
/** Unmount wavesurfer */
destroy(): void;
}
interface MediaPlayer {
video?: HTMLVideoElement | null;
mediaRecorder?: MediaRecorder | null;
}
/**
* storing current media which is being played.
*/
declare const currentMediaPlayer: MediaPlayer;
declare const currentAudioPlayer: {
instance: WaveSurfer | null;
setIsPlaying: ((isPlaying: boolean) => void) | null;
};
/**
* Function to stop current media playback.
*/
declare function closeCurrentMediaPlayer(pauseAudio?: boolean): void;
declare function sanitizeHtml(htmlString: string, whitelistRegExes: RegExp[]): string;
declare function isMessageSentByMe(message: CometChat.BaseMessage, loggedInUser: CometChat.User): boolean;
/**
* Function to check if the current browser is safari.
* @returns boolean
*/
declare function isSafari(): boolean;
/**
* Checks if a given text is a URL.
* A valid URL should start with either "http", "https", or "www" and must not contain spaces.
*
* @param {string} text - The text to be checked.
* @returns {boolean} Returns true if the text is a URL, false otherwise.
*/
declare function isURL(text: string): boolean;
declare function getThemeVariable(name: string): string;
declare function getThemeMode(): "dark" | "light";
/**
* Function to convert audio forat from webm to wav
* @param file
* @returns
*/
declare function processFileForAudio(file: File): Promise<File>;
/**
* Converts a Unix timestamp to a formatted date string in DD/MM/YYYY format.
*
* @param {number} timestamp - The Unix timestamp (in seconds) to be converted.
* @returns {string} The formatted date string in DD/MM/YYYY format.
*/
declare function formatDateFromTimestamp(timestamp: number): string;
declare function isMobileDevice(): boolean;
declare function sanitizeCalendarObject(calendarObject?: CalendarObject): {
[k: string]: any;
};
declare function fireClickEvent(): void;
/**
* Utility class for managing local storage with change detection capabilities.
* It is used in CometChatIncomingCall component.
*/
declare class StorageUtils {
/**
* Attaches a callback function to the `storage` event, which is triggered when storage changes occur.
* @param {EventListenerOrEventListenerObject} callback - The function to be called when the storage event is fired. This function will receive the storage event as an argument.
*/
static attachChangeDetection: (callback: EventListenerOrEventListenerObject) => void;
/**
* Detaches a previously attached callback function from the `storage` event.
* @param {EventListenerOrEventListenerObject} callback - The function that was previously attached to the storage event. This function will be removed from the event listeners.
*/
static detachChangeDetection: (callback: EventListenerOrEventListenerObject) => void;
/**
* Stores a value in local storage under the specified key.
* @param {string} storageKey - The key under which the value will be stored.
* @param {string} storageValue - The value to be stored in local storage. It will be converted to a JSON string.
*/
static setItem: (storageKey: string, storageValue: string | CometChat.Call) => void;
/**
* Retrieves a value from local storage by its key.
* @param {string} storageKey - The key of the item to be retrieved from local storage.
* @returns {string} The value stored in local storage under the specified key, parsed from JSON. Returns `null` if the key does not exist.
*/
static getItem: (storageKey: string) => any;
/**
* Removes an item from local storage by its key.
* @param {string} storageKey - The key of the item to be removed from local storage.
*/
static removeItem: (storageKey: string) => void;
}
interface CometChatThreadHeaderProps {
/**
* Hides the visibility of the date header.
* @default false
*/
hideDate?: boolean;
/**
* Hides the visibility of the reply count.
* @default false
*/
hideReplyCount?: boolean;
/**
* Represents the parent message for displaying threaded conversations.
*/
parentMessage: CometChat.BaseMessage;
/**
* Template for customizing the appearance of the message.
*/
template?: CometChatMessageTemplate;
/**
* Callback function triggered when the threaded message header is closed.
* @returns void
*/
onClose?: () => void;
/**
* A custom view for rendering the message bubble.
*
* @param messageObject - The message to be rendered.
* @returns A JSX Element to be rendered as message bubble view.
*/
messageBubbleView?: JSX.Element;
/**
* Callback function triggered when an error occurs.
*
* @param error - An instance of CometChat.CometChatException representing the error.
* @returns void
*/
onError?: ((error: CometChat.CometChatException) => void) | null;
/**
* Format for the date separators in threaded message preview.
*/
separatorDateTimeFormat?: CalendarObject;
/**
* Format for the timestamp displayed next to messages.
*/
messageSentAtDateTimeFormat?: CalendarObject;
}
declare const CometChatThreadHeader: (props: CometChatThreadHeaderProps) => react_jsx_runtime.JSX.Element;
/**
* Manages the login state and listener attachment for CometChat users.
* It is used in CometChatMessageComposer, CometChatMessageList, CometChatMessageInformation components.
*/
declare class CometChatUIKitLoginListener {
private static loggedInUser;
private static listenerID;
private static isAttached;
/**
* Sets the currently logged-in user.
* @param user - The logged-in CometChat user.
*/
static setLoggedInUser(user: CometChat.User): void;
/**
* Retrieves the currently logged-in user.
* @returns The logged-in CometChat user or null.
*/
static getLoggedInUser(): _cometchat_chat_sdk_javascript.User | null;
/**
* Removes the logged-in user.
*/
static removeLoggedInUser(): void;
/**
* Attaches the login listener for CometChat.
* If a listener is already attached, it is removed before attaching a new one.
*/
static attachListener(): void;
/**
* Removes the attached login listener.
*/
static removeListener(): void;
}
interface MessageExtensionType {
hasXSS?: string;
sanitized_text?: string;
data?: {
sensitive_data: string;
message_masked: string;
};
profanity?: string;
message_clean?: string;
}
/**
* Utility class for CometChat UIKit, providing various helper methods
* such as deep cloning, ID generation, Unix timestamp retrieval,
* and message extension data handling.
*/
declare class CometChatUIKitUtility {
/**
* Creates a deep copy of the value provided
*
* @remarks
* This function cannot copy truly private properties (those that start with a "#" symbol inside a class block).
* Functions are copied by reference and additional properties on the array objects are ignored
*
* @param arg - Any value
* @returns A deep copy of `arg`
*/
static clone<T>(arg: T): T;
/**
* Checks if an object has a specific property.
*
* @param obj - The object to check.
* @param key - The property key.
* @returns `true` if the property exists, `false` otherwise.
*/
static checkHasOwnProperty: (obj: object | undefined, key: string) => boolean;
/**
* Generates a unique ID.
*
* @returns A unique string identifier.
*/
static ID: () => string;
/**
* Retrieves the current Unix timestamp.
*
* @returns The Unix timestamp.
*/
static getUnixTimestamp: () => number;
/**
* Retrieves the extension data from a message.
*
* @param messageObject - The message object containing extensions.
* @returns The sanitized message text if available, otherwise the original text.
*/
static getExtensionData(messageObject: CometChat$1.BaseMessage): string;
/**
* Checks for extension data in a message.
*
* @param message - The message object to check.
* @param extensionKey - The extension key to look for.
* @returns The extension data if found.
*/
static checkMessageForExtensionsData: (message: CometChat$1.BaseMessage | null, extensionKey: string) => (object & MessageExtensionType) | undefined;
/**
* Sanitizes an HTML string by escaping tags not matching the whitelist.
*
* @param htmlString - The HTML string to sanitize.
* @param whitelistRegExes - A list of regular expressions to match allowed tags.
* @returns The sanitized HTML string.
*/
static sanitizeHtml(htmlString: string, whitelistRegExes: RegExp[]): string;
static convertBlobToWav: (audioBlob: {
arrayBuffer: () => any;
}) => Promise<{
wavBlob: Blob;
}>;
static audioBufferToWav: (audioBuffer: AudioBuffer) => ArrayBuffer;
static writeString: (view: DataView, offset: number, string: string) => void;
static convertToWav: (audioBlob: Blob) => Promise<string>;
}
/**
* Sets the created ref to the `value` passed
*
* @remarks
* After the initial call of this hook, the internal ref is set to the `value` passed to this hook after the component has rendered completely.
* So the returned ref will not have the updated value while the component renders
*/
declare function useRefSync<T>(value: T): React__default.MutableRefObject<T>;
/**
* Custom hook to make refs stateful
*
* @remarks
* Making refs stateful opens up the possibility of using the element the ref is pointing to as a dependency for a `useEffect` call
*
* @example
* Here's a simple example
* ```ts
* // At the top most level of the functional component
* const [inputElement, setInputRef] = useStateRef<HTMLInputElement | null>(null);
*
* // Inside the JSX
* <input type = "text" ref = {setInputRef} />
* ```
*/
declare function useStateRef<T>(initialValue: T): [T, (node: T) => void];
declare function useCometChatErrorHandler(onError?: ((error: CometChat.CometChatException) => void) | null): (error: unknown, source?: string) => void;
export { AuxiliaryButtonAlignment, ButtonAction, CalendarObject, CallButtonConfiguration, CallWorkflow, CallingConfiguration, CallingDetailsUtils, CallingExtension, CallingExtensionDecorator, ChatConfigurator, ChatSdkEventInitializer, CollaborativeDocumentConfiguration, CollaborativeDocumentExtension, CollaborativeDocumentExtensionDecorator, CollaborativeWhiteBoardExtensionDecorator, CollaborativeWhiteboardConfiguration, CollaborativeWhiteboardExtension, CometChatActionBubble, CometChatActionSheet, CometChatActions, CometChatActionsIcon, CometChatActionsView, CometChatAudioBubble, CometChatAvatar, CometChatButton, CometChatCallBubble, CometChatCallButtons, CometChatCallEvents, CometChatCallLogs, CometChatChangeScope, CometChatCheckbox, CometChatConfirmDialog, CometChatContextMenu, CometChatConversationEvents, CometChatConversations, CometChatDate, CometChatDeleteBubble, CometChatDocumentBubble, CometChatDropDown, CometChatEditPreview, CometChatEmojiKeyboard, CometChatFileBubble, CometChatFullScreenViewer, CometChatGroupEvents, CometChatGroupMembers, CometChatGroups, CometChatImageBubble, CometChatIncomingCall, CometChatList, CometChatListItem, CometChatLocalize, CometChatMediaRecorder, CometChatMentionsFormatter, CometChatMessageBubble, CometChatMessageComposer, CometChatMessageComposerAction, CometChatMessageEvents, CometChatMessageHeader, CometChatMessageInformation, CometChatMessageList, CometChatMessageOption, CometChatMessageTemplate, CometChatOngoingCall, CometChatOption, CometChatOutgoingCall, CometChatPopover, CometChatRadioButton, CometChatReactionInfo, CometChatReactionList, CometChatReactions, CometChatSearchBar, CometChatTextBubble, CometChatTextFormatter, CometChatThreadHeader, CometChatToast, CometChatUIEvents, CometChatUIKit, CometChatUIKitCalls, CometChatUIKitConstants, CometChatUIKitLoginListener, CometChatUIKitUtility, CometChatUrlsFormatter, CometChatUserEvents, CometChatUserMemberWrapper, CometChatUsers, CometChatUtilityConstants, CometChatVideoBubble, ConversationUtils, DataSource, DataSourceDecorator, DateTimePickerMode, DocumentIconAlignment, ElementType, EnterKeyBehavior, ExtensionsDataSource, GroupMemberUtils, HTTPSRequestMethods, IconButtonAlignment, LabelAlignment, LinkPreviewExtension, LinkPreviewExtensionDecorator, MentionsTargetElement, MentionsVisibility, MessageBubbleAlignment, MessageListAlignment, MessageReceiptUtils, MessageStatus, MessageTranslationExtension, MessageTranslationExtensionDecorator, MessageUtils, MessagesDataSource, MouseEventSource, OutgoingCallConfiguration, PanelAlignment, Placement$1 as Placement, PollsConfiguration, PollsExtension, PollsExtensionDecorator, PreviewMessageMode, Receipts, RecordingType, SelectionMode, States, StickersExtension, StickersExtensionDecorator, StorageUtils, TabAlignment, TabsVisibility, ThumbnailGenerationExtension, ThumbnailGenerationExtensionDecorator, TimestampAlignment, TitleAlignment, UIKitSettings, UIKitSettingsBuilder, UserMemberListType, closeCurrentMediaPlayer, convertMinutesToHoursMinutesSeconds, convertSecondsToHoursMinutesSeconds, currentAudioPlayer, currentMediaPlayer, downloadRecordingFromURL, fireClickEvent, formatDateFromTimestamp, getLocalizedString, getThemeMode, getThemeVariable, isMessageSentByMe, isMissedCall, isMobileDevice, isSafari, isSentByMe, isURL, processFileForAudio, sanitizeCalendarObject, sanitizeHtml, useCometChatErrorHandler, useRefSync, useStateRef, verifyCallUser };
export type { IActiveChatChanged, IDialog, IGroupLeft, IGroupMemberAdded, IGroupMemberJoined, IGroupMemberKickedBanned, IGroupMemberScopeChanged, IGroupMemberUnBanned, IMentionsCountWarning, IMessages, IModal, IMouseEvent, IOpenChat, IOwnershipChanged, IPanel, IShowOngoingCall, LocalizationSettings, PollOptions };