talkjs
Version:
Build the perfect messaging experience in 10 minutes.
1,393 lines (1,345 loc) • 209 kB
TypeScript
/**
* A node in a {@link TextBlock} that renders its children as a clickable {@link https://talkjs.com/docs/Features/Customizations/Action_Buttons_Links/ | action button} which triggers a custom action.
*
* @remarks
* By default, users do not have permission to send messages containing action buttons as they can be used maliciously to trick others into invoking custom actions.
* For example, a user could send an "accept offer" action button, but disguise it as "view offer".
*
* @public
*/
export declare interface ActionButtonNode {
type: "actionButton";
/**
* The name of the custom action to invoke when the button is clicked.
*/
action: string;
/**
* The parameters to pass to the custom action when the button is clicked.
*/
params: Record<string, string>;
children: TextNode[];
}
/**
* @public
* Provides additional parameters to custom message action or conversation action events.
*/
export declare interface ActionEventParams {
/**
* Any number of key/value pairs that will be sent with the action event.
*
* Add to action buttons in your theme components with the syntax `data-<key>=<value>`,
* or to action buttons in messages with the syntax
* `action?<key>=<value>`.
*
* Examples:
*
* The following action button theme component will emit a `color` action event
* when you click it, with a parameter called `choice` that takes the value `red`:
*
* `<ActionButton action="color" data-choice="red">Red</ActionButton>`
*
* The following action button message markup will emit a `color` message action event
* when you click it, with a parameter called `choice` that takes the value `blue`:
*
* `<actionbutton:color?choice=blue|Blue>`
*
* Both the key and the value must be strings; arbitrarily deeply nested JSON is not supported.
*/
[key: string]: string;
}
/**
* A node in a {@link TextBlock} that renders its children as a clickable {@link https://talkjs.com/docs/Features/Customizations/Action_Buttons_Links/ | action link} which triggers a custom action.
*
* @remarks
* By default, users do not have permission to send messages containing `ActionLinkNode` as it can be used maliciously to trick others into invoking custom actions.
* For example, a user could send an "accept offer" action link, but disguise it as a link to a website.
*
* @public
*/
export declare interface ActionLinkNode {
type: "actionLink";
/**
* The name of the custom action to invoke when the link is clicked.
*/
action: string;
/**
* The parameters to pass to the custom action when the link is clicked.
*/
params: Record<string, string>;
children: TextNode[];
}
declare type Attachment = {
url: string;
size: number;
dimensions?: AttachmentDimensions;
};
declare type AttachmentDimensions = {
width?: number;
height?: number;
duration?: number;
};
/**
* A FileBlock variant for an audio attachment, with additional audio-specific metadata.
*
* @remarks
* You can identify this variant by checking for `subtype: "audio"`.
*
* The same file could be uploaded as either an audio block, or as a {@link VoiceBlock}.
* The same data will be available either way, but they will be rendered differently in the UI.
*
* Includes metadata about the duration of the audio file in seconds, where available.
*
* Audio files that you upload with the TalkJS UI will include the duration as long as the sender's browser can preview the file.
* Audio files that you upload with the REST API or {@link Session.uploadAudio} will include the duration if you specified it when uploading.
* Audio files attached in a reply to an email notification will not include the duration.
*
* @public
*/
export declare interface AudioBlock {
type: "file";
subtype: "audio";
/**
* An encoded identifier for this file. Use in {@link SendFileBlock} to send this file in another message.
*/
fileToken: FileToken;
/**
* The URL where you can fetch the file
*/
url: string;
/**
* The size of the file in bytes
*/
size: number;
/**
* The name of the audio file, including file extension
*/
filename: string;
/**
* The duration of the audio in seconds, if known
*/
duration?: number;
}
export declare interface AudioFileMetadata {
/**
* The name of the file including extension.
*/
filename: string;
/**
* The duration of the audio file in seconds, if known.
*/
duration?: number;
}
/**
* A node in a {@link TextBlock} that renders `text` as a link (HTML `<a>`).
*
* @remarks
* Used when user-typed text is turned into a link automatically.
*
* Unlike {@link LinkNode}, users do have permission to send AutoLinkNodes by default, because the `text` and `url` properties must match.
* Specifically:
*
* - If `text` is an email, `url` must contain a `mailto:` link to the same email address
*
* - If `text` is a phone number, `url` must contain a `tel:` link to the same phone number
*
* - If `text` is a website, the domain name including subdomains must be the same in both `text` and `url`.
* If `text` includes a protocol (such as `https`), path (/page), query string (?page=true), or url fragment (#title), they must be the same in `url`.
* If `text` does not specify a protocol, `url` must use either `https` or `http`.
*
* This means that the following AutoLink is valid:
*
* ```
* {
* type: "autoLink",
* text: "talkjs.com"
* url: "https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/Realtime_API/#AutoLinkNode"
* }
* ```
*
* That link will appear as `talkjs.com` and link you to the specific section of the documentation that explains how AutoLinkNodes work.
*
* These rules ensure that the user knows what link they are clicking, and prevents AutoLinkNode being used for phishing.
* If you try to send a message containing an AutoLink that breaks these rules, the request will be rejected.
*
* @public
*/
export declare interface AutoLinkNode {
type: "autoLink";
/**
* The URL to open when a user clicks this node.
*/
url: string;
/**
* The text to display in the link.
*/
text: string;
}
/**
* @public
* @hidden due to being empty
* @deprecated Use `chatbox.onBlur(() => {...})` instead, without an event parameter.
*/
export declare interface BlurEvent {
}
/**
* Sent by {@link Session.onBrowserPermissionDenied} when the user tried to do
* an action that require explicit browser permission, but it was denied.
*
* @public
*/
export declare interface BrowserPermissionDeniedEvent {
/**
* The type of permission that was denied.
*
* @remarks
* Note that more possible values may be added in the future, so make sure your
* handler can deal with unknown permission types gracefully.
*/
type: PermissionType;
}
/**
* Sent by {@link Session.onBrowserPermissionNeeded} when a browser permission
* dialog is about to be shown to the user.
*
* @public
*/
export declare interface BrowserPermissionNeededEvent {
/**
* The type of permission requested.
*
* @remarks
* Note that more possible values may be added in the future, so make sure your
* handler can deal with unknown permission types gracefully.
*/
type: PermissionType;
/**
* Cancel whatever user action caused the permission to be requested.
*
* @remarks
* For example, if a user wants to share their location for the first time so
* that this event is triggered, then if you call `preventDefault()`, no
* permission will be requested from the browser, the location sharing will be
* cancelled, and TalkJS will continue as if the location sharing button had
* not been clicked at all.
*
* This may be useful if you're using this event to show custom UI elements
* that nudge users towards granting permission, and this UI has a "cancel"
* button.
*/
preventDefault(): void;
}
/**
* A node in a {@link TextBlock} that adds indentation for a bullet-point list around its children (HTML `<ul>`).
*
* @remarks
* Used when users send a bullet-point list by starting lines of their message with `-` or `*`.
*
* @public
*/
export declare interface BulletListNode {
type: "bulletList";
children: TextNode[];
}
/**
* A node in a {@link TextBlock} that renders its children with a bullet-point (HTML `<li>`).
*
* @remarks
* Used when users start a line of their message with `-` or `*`.
*
* @public
*/
export declare interface BulletPointNode {
type: "bulletPoint";
children: TextNode[];
}
/**
* A messaging UI for just a single conversation
*
* @remarks
* There is no way for the user to switch between conversations
* (but you can change the active conversation through {@link Chatbox.select}).
* Create a Chatbox through {@link Session.createChatbox} and then call
* {@link Chatbox.mount} to show it.
* @public
*/
export declare interface Chatbox extends UIBox {
/**
* Renders the Chatbox UI inside a DOM element on your page.
*
* @remarks
* The container element specified by `container` must either be a DOM Element (as returned by e.g.
* `document.getElementById`) or a JQuery object with a single element.
*/
mount(container: HTMLElement | null): Promise<void>;
/**
* Destroys the chatbox and removes it from the DOM
*
* @remarks
* Destroys the chatbox, removes it from the DOM and removes all event listeners it has running. Call this before removing
* the chatbox container from the DOM.
*/
destroy(): void;
}
/**
* @alias UIBox Chatbox
* @public
*/
export declare interface ChatboxOptions {
/**
* Controls the text direction (for supporting right-to-left languages such as Arabic and Hebrew). TalkJS tries
* to determine the appropriate text direction from the parent page, but if that does not work or you want to
* explicitly control it, you can override it here. Defaults to "rtl".
*/
dir?: "rtl" | "ltr";
/**
* Sets the message input box to the given text.
* You can use this to suggest a certain initial message to be sent. The user can still edit it before hitting "send".
*
* @deprecated We recommend using {@link MessageField.setText} before mounting the chatbox to precisely control when message suggestions are shown.
*/
messageSuggestion?: string;
/**
* Used to control if the Chat Header is displayed in the UI. Defaults to true.
*/
showChatHeader?: boolean;
/**
* Controls what text appears in the chat title, in the header above the messages.
* Defaults to `"participants"`.
*
* (also see {@link ChatboxOptions.chatSubtitleMode} and {@link InboxOptions.feedConversationTitleMode})
*
* @deprecated This field only has effect if you use a {@link https://talkjs.com/docs/Features/Themes/Legacy_Themes_(limited_CSS)/ | Legacy Theme}, or an older custom theme which does not have a ChatHeader component. If you do not, edit the ChatHeader component in the theme editor instead.
*/
chatTitleMode?: "subject" | "participants";
/**
* Controls what text appears in the chat subtitle, right below the chat title.
* No subtitle is displayed when the conversation has no subject set or when set to `null`.
* Defaults to `"subject"`.
*
* (also see {@link ChatboxOptions.chatTitleMode} and {@link InboxOptions.feedConversationTitleMode})
*
* @deprecated This field only has effect if you use a {@link https://talkjs.com/docs/Features/Themes/Legacy_Themes_(limited_CSS)/ | Legacy Theme }, or an older custom theme which does not have a ChatHeader component. If you do not, edit the ChatHeader component in the theme editor instead.
*/
chatSubtitleMode?: "subject" | "participants" | null;
/**
* TalkJS leverages `iframe`s behind the scenes and therefore not all services that you use in your app will work out of the box.
* This option adds support for a number of services to help you use them. Let us know if you're missing any.
*/
thirdparties?: ThirdPartyOptions;
/**
* Used to control which messages are shown in the message list, depending on a type, origin
* or custom message attributes.
*
* *Note*: Messages are only filtered in the message list. The inbox UI's conversation feed will always show the last message sent to the conversation, regardless of the message filter set.
*
* See {@link MessagePredicate} for all available options.
*
* You can also modify the filter on the fly using {@link UIBox.setMessageFilter}.
*/
messageFilter?: MessagePredicate;
/**
* TalkJS can translate conversations to the current user's locale using Google Translate.
* This option specifies which conversations should be translated in this UI. You can pass a boolean to enable or turn off
* translation for all conversations, "auto" to enable translation on conversations where users have different locales,
* or you can pass an array of {@link ConversationBuilder}s or conversation Ids to be translated.
* This feature is only available on the Growth plan and above. Make sure you add your Google Translate API key on the "Settings" page of the dashboard.
*/
translateConversations?: boolean | "auto" | string[] | ConversationBuilder[];
/**
* Set this to `true` to show a translation toggle in all conversations.
* Set this to `"auto"` to show a translation toggle in conversations where there are participants with different locales.
* This setting defaults to `false`, meaning that no toggles will be shown.
* In order to use this, you must be on the Growth plan, and set a Google Translate API key on the "Settings" page of the dashboard.
*/
showTranslationToggle?: boolean | "auto";
/**
* Settings that affect the behavior of the message field
*/
messageField?: MessageFieldOptions;
/**
* Overrides the theme used for this chat UI.
*
* @remarks
* This only works with themes created in the Theme Editor. If you don't pass a theme name, we'll first check for a theme set in the user's role, and then fall back to using the default theme.
*
* You can either pass the name of the theme you'd like to use, or a {@link ThemeOptions} object, which you can use to pass variables to your theme.
*/
theme?: string | ThemeOptions;
/**
* Enables capturing {@link Chatbox.onKeyup} events.
*
* @remarks
* Note: Setting this to true also disables any non-standard keyboard shortcuts in TalkJS.
*
* At the time of writing, the only such shortcut is that when `captureKeyboardEvents` is
* disabled, TalkJS will auto-focus the message field if the user starts typing but no input field
* is focused.
*/
captureKeyboardEvents?: boolean;
/**
* Sets metadata for the current session.
*
* @remarks
* - `visible` manually sets the information about the visibility of TalkJS.
* This is useful when TalkJS is hidden with CSS. TalkJS will assume that UIs
* marked `visible: false` cannot be seen, and thus messages arriving on this UI will
* not be marked as read until you set `visible` to true again.
*
* - `custom` is an additional parameter to store the custom fields, that you
* may want to use in the REST API call.
*/
presence?: UserPresence;
/**
* Allows users to send and receive custom emojis.
*
* @remarks
* This adds a set of custom emoji images to the emoji picker, the emoji
* autocompleter, and emoji reactions.
*
* Every emoji name *must* start and end with a colon, for example `:lol:`.
*
* Make sure you always specify a consistent, backward-compatible set of
* custom emojis. If an existing message contains a custom emoji that is not
* specified in `customEmojis` here, then the emoji cannot be displayed and
* the textual name will be displayed instead (including colons).
*
* If you want to allow an emoji to be displayed if it's used in existing
* data, but not let users select it in new messages/reactions, set the
* `hidden` option to `true` for that emoji.
*
* @example
* ```
* {
* ":lol:": { url: "https://example.com/images/emoji-lol.svg" },
* ":roomba-cat:": { url: "https://example.com/images/roomba-cat.gif" },
* ":alert:": { url: "https://example.com/images/alert.gif", hidden: true },
* }
* ```
*/
customEmojis?: {
[name: string]: CustomEmojiDefinition;
};
}
/** @public
* @hidden due to being empty
* @deprecated Use `popup.onClose(() => {...})` instead, without an event parameter
*/
declare interface CloseEvent_2 {
}
export { CloseEvent_2 as CloseEvent }
/**
* A node in a {@link TextBlock} that renders `text` in an inline code span (HTML `<code>`).
*
* @remarks
* Used when a user types ```text```.
*
* @public
*/
export declare interface CodeSpanNode {
type: "codeSpan";
text: string;
}
/**
* Allows you to filter conversations down to a specific subset.
*
* @remarks
* Use with {@link Inbox.setFeedFilter} or pass {@link InboxOptions.feedFilter} to
* {@link Session.createInbox}.
*
* The first element must be the string "any", and the second element a list of SimpleConversationPredicate objects.
*
* For example, to match all the conversations to which you have read access,
* or whose custom "accountId" field has the "my_account" value, use the following:
* ```js
* ["any", [{"access": ["==", "Read"]}, {"custom": {"accountId": ["==", "my_account"]}}]]
* ```
*
* See {@link SimpleConversationPredicate} for all available options.
*
* @public
*/
export declare type CompoundConversationPredicate = [
"any",
SimpleConversationPredicate[]
];
/**
* Lets you show only specific messages in the chat panel of a Chatbox, Inbox or Popup.
*
* @remarks
* Used in methods like {@link Chatbox.setMessageFilter}.
*
* The first element must be the string "any", and the second element a list of SimpleMessagePredicate objects.
*
* For example, to match all the messages that are either of the type SystemMessage,
* or whose sender has the "admin" role, use the following:
* ```js
* ["any", [{"type": ["==", "SystemMessage"]}, {"sender": {"role": ["==", "admin"]}}]]
* ```
*
* See {@link SimpleMessagePredicate} for all available options.
*
* @public
*/
export declare type CompoundMessagePredicate = ["any", SimpleMessagePredicate[]];
/**
* The content of a message is structured as a list of content blocks.
*
* @remarks
* Currently, each message can only have one content block, but this will change in the future.
* This will not be considered a breaking change, so your code should assume there can be multiple content blocks.
*
* These blocks are rendered in order, top-to-bottom.
*
* Currently the available Content Block types are:
*
* - `type: "text"` ({@link TextBlock})
*
* - `type: "file"` ({@link FileBlock})
*
* - `type: "location"` ({@link LocationBlock})
*
* @public
*/
export declare type ContentBlock = TextBlock | FileBlock | LocationBlock;
/**
* Encapsulates an active conversation between two parties.
*
* @remarks
* Use this object to send system messages to the conversation or to programmatically select a
* conversation by passing it to {@link Inbox.select}.
*
* Conversation objects are created with the deprecated {@link Session.getOrStartConversation}
* method.
*
*
* @public
* @deprecated Use {@link Session.getOrCreateConversation} instead
*/
export declare interface Conversation {
/**
* The ID of the conversation
*/
readonly id: string;
/**
* @hidden
* An array of {@link Participant | Participants} in the conversation.
*/
participants: Array<Participant>;
/**
* An optional conversation subject which is displayed in the chat header
* @remarks
* Set to `null` to delete the existing value (if any). When omitted or `undefined`, the existing value remains unchanged.
*/
subject?: string | null;
/**
* Optional custom conversation meta data
* @remarks
* Set any property to `null` to delete the existing value (if any). When omitted or `undefined`, the existing value remains unchanged.
*/
custom?: {
[name: string]: string | null;
} | null;
welcomeMessages?: Array<string> | null;
/**
* An optional URL to a photo which will be shown as the photo for the conversation.
* @remarks
* Set to `null` to delete the existing value (if any). When omitted or `undefined`, the existing value remains unchanged.
*/
photoUrl?: string | null;
}
/**
* @public
* A string that must be `"ReadWrite"`, `"Read"` or `"None"`.
*/
export declare type ConversationAccessLevel = "ReadWrite" | "Read" | "None";
/**
* @public
* Emitted from {@link Chatbox.onCustomConversationAction} when a user clicks on a
* custom action in a conversation within the TalkJS UI
*/
export declare interface ConversationActionEvent {
action: string;
params: ActionEventParams;
/**
* The value will be `null` if the conversation action is triggered
* from inside the `ConversationListHeader` component.
*/
conversation: ConversationData | null;
}
/**
* The state of a conversation subscription when it is actively listening for changes
*
* @public
*/
export declare interface ConversationActiveState {
type: "active";
/**
* The most recently received snapshot for the conversation, or `null` if you are not a participant in the conversation (including when the conversation does not exist).
*/
latestSnapshot: ConversationSnapshot | null;
}
/**
* Conversation attributes that can be set using {@link ConversationBuilder.setAttributes}
* @public
*/
export declare interface ConversationAttributes {
/**
* A human-readable subject of the conversation. Supports formatted links in a Markdown-style syntax, e.g.
* `Beautiful <https://example.com/booking/18644|home by the sea>!`.
* URLs and email addresses are made clickable, and emojis made to work cross-platform.
* @remarks
* Set to `null` to delete the existing value (if any). When omitted or `undefined`, the existing value remains unchanged.
*/
subject?: string | null;
/**
* The URL of a photo to be used for this conversation in the TalkJS UI in case there are more than 2 participants
* (TalkJS shows the photo of the other participant in a 1-on-1 conversation)
* @remarks
* Set to `null` to delete the existing value (if any). When omitted or `undefined`, the existing value remains unchanged.
*/
photoUrl?: string | null;
/**
* Custom metadata that is stored with the conversation
* @remarks
* Set any property to `null` to delete the existing value (if any). When omitted or `undefined`, the existing value remains unchanged.
*/
custom?: {
[key: string]: string | null;
} | null;
/**
* Messages which are sent at the beginning of a chat.
* In this case the messages will appear as system messages.
* @remarks
* Set to `null` to delete the existing value (if any). When omitted or `undefined`, the existing value remains unchanged.
*/
welcomeMessages?: Array<string> | null;
}
/**
* A Conversation Builder represents a conversation that is about to be created, fetched, or updated.
* You can use this object to set up or modify a conversation before showing it.
*
* @remarks
* Note: any changes you make here will not be sent to TalkJS immediately.
* Instead, instantiate a TalkJS UI using methods such as {@link Session.createInbox}.
*
* @public
*/
export declare interface ConversationBuilder {
/**
* An optional conversation subject which will be displayed in the chat header.
* @remarks
* Set to `null` to delete the existing value (if any). When omitted or `undefined`, the existing value remains unchanged.
*/
subject?: string | null;
/**
* Allows custom conversation metadata to be stored in the form `{ [name: string]: string }`
* @remarks
* Set any property to `null` to delete the existing value (if any). When omitted or `undefined`, the existing value remains unchanged.
*/
custom?: {
[name: string]: string | null;
} | null;
/**
* An optional URL to a photo which will be shown as the photo for the conversation.
* @remarks
* Set to `null` to delete the existing value (if any). When omitted or `undefined`, the existing value remains unchanged.
*/
photoUrl?: string | null;
/**
* Messages which are sent at the beginning of a chat.
* In this case the messages will appear as system messages.
* @remarks
* Set to `null` to delete the existing value (if any). When omitted or `undefined`, the existing value remains unchanged.
*/
welcomeMessages?: Array<string> | null;
/**
* Sets a participant of the conversation.
*
* @remarks
* This method is idempotent and can be called multiple times.
*
* @param user - A `User` object that identifies the person who is a participant of the
* conversation. The user is uniquely identified by their id; all other fields (name, photo etc)
* are overwritten in the TalkJS database each time they change.
* @param settings - An optional setting of participation, can be an initial `access` right or
* if user should be notified.
*/
setParticipant(user: User, settings?: Partial<ParticipationSettings>): void;
/**
* Used to set certain attributes for a specific conversation
*
* @remarks
* For example:
*
* ```
* conversation.setAttributes({subject: "Booking question"});
* conversation.setAttributes({custom:
* {
* sold: "true",
* itemId: "720"
* }
* });
*
* ```
*
*/
setAttributes(attributes: ConversationAttributes): void;
/**
* Sends a text message in a given conversation.
* @param text - The message body that is to be sent.
*/
sendMessage(text: string, options?: SendMessageOptions): Promise<void>;
/**
* Removes the current user from this conversation.
*
* @returns A promise that resolves with true upon success (indicating that
* the user has been removed from this conversation), or false when the user
* did not have the appropriate permissions, as defined on the "Chat UI" page in the
* TalkJS dashboard). The promise may reject in case of an unexpected error.
*/
leave(): Promise<boolean>;
}
/** @public */
export declare interface ConversationData {
/**
* The ID of the conversation
*/
id: string;
/**
* Contains custom metadata for the conversation if it was set using {@link ConversationBuilder.custom}.
* @remarks
* Set any property to `null` to delete the existing value (if any). When omitted or `undefined`, the existing value remains unchanged.
* When sending `custom: null` all properties and values will be removed.
*/
custom: CustomData;
/**
* Contains the conversation subject if it was set using {@link ConversationBuilder.subject}.
*/
subject: string | null;
/**
* Contains the URL of a photo was set using {@link ConversationBuilder.subject}.
*/
photoUrl: string | null;
/**
* One or more welcome messages that will display to the user as a SystemMessage
*/
welcomeMessages: Array<string> | null;
/**
* A map of the access rights for the participants in this conversation.
*
* This property is not guaranteed to be complete.
* It always includes the current user, but does not always list other participants.
*
* Specifically, `ConversationData` returned from the following functions will only include the current user: `Session.onMessage`, `Session.onDesktopNotificationClicked`, `Session.unreads.onChange`.
* In all other cases, this field contains every participant in the conversation.
*
* Note on guest access:
* This field indicates a user's access as a participant.
* Guests always have "ReadWrite" access and are not included in this map
*/
participants: Record<string, {
access: "Read" | "ReadWrite";
}>;
}
/**
* Allows you to filter conversations down to a specific subset.
*
* @remarks
* Use with {@link Inbox.setFeedFilter} or pass {@link InboxOptions.feedFilter} to
* {@link Session.createInbox}.
*
* The ConversationPredicate can be either of the following:
*
* - a single SimpleConversationPredicate object that filters based on all the fields of the predicate
*
* - an array that gives you all the conversations that satisfy at least one of the SimpleConversationPredicates
*
* See {@link SimpleConversationPredicate} and {@link CompoundConversationPredicate} for all available options.
*
* @public
*/
export declare type ConversationPredicate = SimpleConversationPredicate | CompoundConversationPredicate;
/**
* References the conversation with a given conversation ID, from the perspective of the current user.
*
* @remarks
* Used in all Realtime API operations affecting that conversation, such as fetching or updating conversation attributes.
* Created via {@link Session.conversation}.
*
* @public
*/
export declare interface ConversationRef {
/**
* The ID of the referenced conversation.
*
* @remarks
* Immutable: if you want to reference a different conversation, get a new ConversationRef instead.
*/
readonly id: string;
/**
* Get a reference to a participant in this conversation
*
* @param user - the user's ID or a reference to the user
*/
participant(user: string | UserRef): ParticipantRef;
/**
* Get a reference to a message in this conversation
*
* @param user - the message ID
*/
message(id: string): MessageRef;
/**
* Fetches a snapshot of the conversation.
*
* @remarks
* This contains all of the information related to the conversation and the current user's participation in the conversation.
*
* @returns A snapshot of the current user's view of the conversation, or null if the current user is not a participant (including if the conversation doesn't exist).
*/
get(): Promise<ConversationSnapshot | null>;
/**
* Sets properties of this conversation and your participation in it.
*
* @remarks
* The conversation is created if a conversation with this ID doesn't already exist.
* You are added as a participant if you are not already a participant in the conversation.
*
* @returns A promise that resolves when the operation completes.
* When client-side conversation syncing is disabled, you may only set your `notify` property, when you are already a participant.
* Everything else requires client-side conversation syncing to be enabled, and will cause the promise to reject.
*/
set(params: SetConversationParams): Promise<void>;
/**
* Creates this conversation if it does not already exist.
* Adds you as a participant in this conversation, if you are not already a participant.
*
* @remarks
* If the conversation already exists or you are already a participant, this operation is still considered successful and the promise will still resolve.
*
* @returns A promise that resolves when the operation completes. The promise rejects if you are not already a participant and client-side conversation syncing is disabled.
*/
createIfNotExists(params?: CreateConversationParams): Promise<void>;
/**
* Marks the conversation as read.
*
* @returns A promise that resolves when the operation completes. The promise rejects if you are not a participant in the conversation.
*/
markAsRead(): Promise<void>;
/**
* Marks the conversation as unread.
*
* @returns A promise that resolves when the operation completes. The promise rejects if you are not a participant in the conversation.
*/
markAsUnread(): Promise<void>;
/**
* Sends a message in the conversation
*
* @returns A promise that resolves with a reference to the newly created message. The promise will reject if you do not have permission to send the message.
*/
send(params: string | SendTextMessageParams | SendMessageParams): Promise<MessageRef>;
/**
* Subscribes to the messages in the conversation.
*
* @remarks
* Initially, you will be subscribed to the 30 most recent messages and any new messages.
* Call `loadMore` to load additional older messages.
*
* Whenever `Subscription.state.type` is "active" and a message is sent, edited, deleted, or you load more messages, `onSnapshot` will fire and `Subscription.state.latestSnapshot` will be updated.
* `loadedAll` is true when the snapshot contains all the messages in the conversation.
*
* The snapshot is null if you are not a participant in the conversation (including when the conversation doesn't exist)
*/
subscribeMessages(onSnapshot?: (snapshot: MessageSnapshot[] | null, loadedAll: boolean) => void): MessageSubscription;
/**
* Subscribes to the conversation.
*
* @remarks
* Whenever `Subscription.state.type` is "active" and something about the conversation changes, `onSnapshot` will fire and `Subscription.state.latestSnapshot` will be updated.
* This includes changes to nested data. As an extreme example, `onSnapshot` would be called if `snapshot.lastMessage.referencedMessage.sender.name` changes.
*
* The snapshot is null if you are not a participant in the conversation (including when the conversation doesn't exist)
*/
subscribe(onSnapshot?: (snapshot: ConversationSnapshot | null) => void): ConversationSubscription;
}
/** @public
*
* This represents the interface of the event triggered from {@link Inbox.onConversationSelected}.
*/
export declare interface ConversationSelectedEvent {
/**
* The current TalkJS User
*/
me: UserSnapshot;
/**
* @deprecated When you are the only participant in the conversation, this property includes the current user. Use `participants` and filter out the current user instead.
*
* The other participants in the conversation that are not the current user
*/
others?: Array<UserSnapshot>;
/**
* The participants in the conversation, including the current user
*/
participants?: Array<UserSnapshot>;
/**
* The current conversation object
*/
conversation: ConversationData | null;
}
/**
* A snapshot of a conversation's attributes at a given moment in time.
*
* @remarks
* Also includes information about the current user's view of that conversation, such as whether or not notifications are enabled.
*
* Snapshots are immutable and we try to reuse them when possible. You should only re-render your UI when `oldSnapshot !== newSnapshot`.
*
* @public
*/
export declare interface ConversationSnapshot {
/**
* The ID of the conversation
*/
id: string;
/**
* Contains the conversation subject if it was set using {@link ConversationBuilder.subject}.
*/
subject: string | null;
/**
* Contains the URL of a photo was set using {@link ConversationBuilder.subject}.
*/
photoUrl: string | null;
/**
* One or more welcome messages that will display to the user as a SystemMessage
*/
welcomeMessages: string[];
/**
* Custom metadata you have set on the conversation
*/
custom: Record<string, string>;
/**
* The date that the conversation was created, as a unix timestamp in milliseconds.
*/
createdAt: number;
/**
* The date that the current user joined the conversation, as a unix timestamp in milliseconds.
*/
joinedAt: number;
/**
* The last message sent in this conversation, or null if no messages have been sent.
*/
lastMessage: MessageSnapshot | null;
/**
* The number of messages in this conversation that the current user hasn't read.
*/
unreadMessageCount: number;
/**
* Timestamp of when the current user read a message
*/
readUntil: number;
/**
* Whether the conversation should be considered unread.
*
* @remarks
* This can be true even when `unreadMessageCount` is zero, if the user has manually marked the conversation as unread.
*/
isUnread: boolean;
/**
* The current user's permission level in this conversation.
*/
access: "Read" | "ReadWrite";
/**
* The current user's notification settings for this conversation.
*
* @remarks
* `false` means no notifications, `true` means notifications for all messages, and `"MentionsOnly"` means that the user will only be notified when they are mentioned with an `@`.
*/
notify: boolean | "MentionsOnly";
}
/**
* A subscription to a specific conversation.
*
* @remarks
* Get a ConversationSubscription by calling {@link ConversationRef.subscribe}
*
* @public
*/
export declare interface ConversationSubscription {
/**
* The current state of the subscription
*
* @remarks
* An object with the following fields:
*
* `type` is one of "pending", "active", "unsubscribed", or "error".
*
* When `type` is "active", includes `latestSnapshot: ConversationSnapshot | null`, the current state of the conversation.
* `latestSnapshot` is `null` when you are not a participant or the conversation does not exist.
*
* When `type` is "error", includes the `error` field. It is a JS `Error` object explaining what caused the subscription to be terminated.
*/
state: PendingState | ConversationActiveState | UnsubscribedState | ErrorState;
/**
* Resolves when the subscription starts receiving updates from the server.
*/
connected: Promise<ConversationActiveState>;
/**
* Resolves when the subscription permanently stops receiving updates from the server.
*
* @remarks
* This is either because you unsubscribed or because the subscription encountered an unrecoverable error.
*/
terminated: Promise<UnsubscribedState | ErrorState>;
/**
* Unsubscribe from this resource and stop receiving updates.
*
* @remarks
* If the subscription is already in the "unsubscribed" or "error" state, this is a no-op.
*/
unsubscribe(): void;
}
/**
* Parameters you can pass to {@link ConversationRef.createIfNotExists}.
*
* Properties that are `undefined` will be set to the default.
*
* @public
*/
export declare interface CreateConversationParams {
/**
* The conversation subject to display in the chat header.
* Default = no subject, list participant names instead.
*/
subject?: string;
/**
* The URL for the conversation photo to display in the chat header.
* Default = no photo, show a placeholder image.
*/
photoUrl?: string;
/**
* System messages which are sent at the beginning of a conversation.
* Default = no messages.
*/
welcomeMessages?: string[];
/**
* Custom metadata you have set on the conversation.
* This value acts as a patch. Remove specific properties by setting them to `null`.
* Default = no custom metadata
*/
custom?: Record<string, string>;
/**
* Your access to the conversation.
* Default = "ReadWrite" access.
*/
access?: "Read" | "ReadWrite";
/**
* Your notification settings.
* Default = `true`
*/
notify?: boolean | "MentionsOnly";
}
/**
* Parameters you can pass to {@link ParticipantRef.createIfNotExists}.
*
* @remarks
* Properties that are `undefined` will be set to the default.
*
* @public
*/
export declare interface CreateParticipantParams {
/**
* The level of access the participant should have in the conversation.
* Default = "ReadWrite" access.
*/
access?: "ReadWrite" | "Read";
/**
* When the participant should be notified about new messages in this conversation.
* Default = `true`
*
* @remarks
* `false` means no notifications, `true` means notifications for all messages, and `"MentionsOnly"` means that the user will only be notified when they are mentioned with an `@`.
*/
notify?: boolean | "MentionsOnly";
}
/**
* Parameters you can pass to {@link UserRef.createIfNotExists}.
*
* @remarks
* Properties that are `undefined` will be set to the default.
*
* @public
*/
export declare interface CreateUserParams {
/**
* The user's name which is displayed on the TalkJS UI
*/
name: string;
/**
* Custom metadata you have set on the user.
* Default = no custom metadata
*/
custom?: Record<string, string>;
/**
* An {@link https://www.w3.org/International/articles/language-tags/ | IETF language tag}.
* See the {@link https://talkjs.com/docs/Features/Language_Support/Localization.html | localization documentation}
* Default = the locale selected on the dashboard
*/
locale?: string;
/**
* An optional URL to a photo that is displayed as the user's avatar.
* Default = no photo
*/
photoUrl?: string;
/**
* TalkJS supports multiple sets of settings, called "roles". These allow you to change the behavior of TalkJS for different users.
* You have full control over which user gets which configuration.
* Default = the `default` role
*/
role?: string;
/**
* The default message a person sees when starting a chat with this user.
* Default = no welcome message
*/
welcomeMessage?: string;
/**
* A single email address or an array of email addresses associated with the user.
* Default = no email addresses
*/
email?: string | string[];
/**
* A single phone number or an array of phone numbers associated with the user.
* Default = no phone numbers
*/
phone?: string | string[];
/**
* An object of push registration tokens to use when notifying this user.
*
* Keys in the object have the format `'provider:token_id'`,
* where `provider` is either `"fcm"` for Android (Firebase Cloud Messaging),
* or `"apns"` for iOS (Apple Push Notification Service).
*
* Default = no push registration tokens
*/
pushTokens?: Record<string, true>;
}
/**
* @public
* Used to store additional metadata on users, conversations and messages
*/
export declare interface CustomData {
/**
* Any number of key/value pairs of your choosing to be stored along with the associated resource.
* You can use custom data for all kinds of purposes, such as customizing a user's email notification text, transmitting contextual user data, or making email login tokens.
*
* Both the key and the value must be strings; arbitrarily deeply nested JSON is not supported. Example:
*
* ```
* {"country":"nl", "itemId": "720"}
* ```
* @remarks
* Set to `null` to delete the existing value (if any). When omitted or `undefined`, the existing value remains unchanged.
*/
[key: string]: string;
}
/**
* Defines a custom emoji
*
* @remarks
* See {@link ChatboxOptions.customEmojis}
*
* @public
*/
export declare interface CustomEmojiDefinition {
/**
* Image file URL
*
* @remarks
* Must be a fully-qualified URL of image file, eg an SVG, GIF or PNG. The
* image must be square (same width and height) and is always scaled down to
* the size of an emoji.
*/
url: string;
/**
* Hides this emoji from the emoji picker and autocompleter
*
* @remarks
* Hidden emojis can't be sent in new messages, or used in new emoji
* reactions, but they still display properly in existing messages and
* reactions. This lets you safely remove previously used custom emoji from
* the chat UI.
*/
hidden?: boolean;
}
/**
* A node in a {@link TextBlock} that is used for {@link https://talkjs.com/docs/Features/Message_Features/Emoji_Reactions/#custom-emojis | custom emoji}.
*
* @public
*/
export declare interface CustomEmojiNode {
type: "customEmoji";
/**
* The name of the custom emoji to show.
*/
text: string;
}
/**
* @public
* A string or a two-element array that forms a predicate about a string field in a `custom` field.
*
* @remarks
* Used in {@link MessagePredicate} and {@link ConversationPredicate}.
* Allows all forms in {@link FieldPredicate} plus the following:
*
* - `"exists"`
*
* - `"!exists"`
*/
export declare type CustomFieldPredicate = FieldPredicate<string> | "exists" | "!exists";
/**
* Sent by {@link Session.onDesktopNotificationClicked} when a user clicks on a browser notification.
*
* @public
*/
export declare interface DesktopNotificationClickedEvent {
conversation: ConversationData;
}
/**
* @public
* This event is triggered when {@link https://talkjs.com/docs/Features/Notifications/Browser_Notifications | desktop notifications} are toggled.
*/
export declare interface DesktopNotificationToggledEvent {
/**
* Boolean indicating if desktop Notifications are enabled or not
*/
isEnabled: boolean;
}
/**
* Parameters you can pass to {@link MessageRef.edit}.
*
* @remarks
* Properties that are `undefined` will not be changed.
* To clear / reset a property to the default, pass `null`.
*
* This is the more advanced method for editing a message. It gives you full control over the message content.
* You can decide exactly how a text message should be formatted, edit an attachment, or even turn a text message into a location.
*
* @public
*/
export declare interface EditMessageParams {
/**
* Custom metadata you have set on the message.
* This value acts as a patch. Remove specific properties by setting them to `null`.
* Default = no custom metadata
*/
custom?: Record<string, string | null> | null;
/**
* The new content for the message.
*
* @remarks
* Any value provided here will overwrite the existing message content.
*
* By default users do not have permission to send {@link LinkNode}, {@link ActionLinkNode}, or {@link ActionButtonNode}, as they can be used to trick the recipient.
*/
content?: [SendContentBlock];
}
/**
* Parameters you can pass to {@link MessageRef.edit}.
*
* @remarks
* Properties that are `undefined` will not be changed.
* To clear / reset a property to the default, pass `null`.
*
* This is a simpler version of {@link EditMessageParams} that only supports setting the message content to text.
*
* @public
*/
export declare interface EditTextMessageParams {
/**
* Custom metadata you have set on the message.
* This value acts as a patch. Remove specific properties by setting them to `null`.
* Default = no custom metadata
*/
custom?: Record<string, string | null> | null;
/**
* The new text to set in the message body.
*
* @remarks
* This is parsed the same way as the text entered in the message field. For example, `*hi*` will appear as `hi` in bold.
*
* See the {@link https://talkjs.com/docs/Features/Message_Features/Formatting/ | message formatting documentation} for more details.
*/
text?: string;
}
/**
* @public
* A machine-readable error code enum.
*
* @remarks
* Supports the following values:
*
* - `NOTIFICATIONS_PERMISSION_DENIED`
*
* - `NOTIFICATIONS_NOT_SUPPORTED`
*
* - `ARGUMENT_INVALID`
*/
export declare enum ErrorCode {
NOTIFICATIONS_PERMISSION_DENIED = 0,
NOTIFICATIONS_NOT_SUPPORTED = 1,
ARGUMENT_INVALID = 2
}
/**
* The state of a subscription after it encounters an unrecoverable error
*
* @public
*/
export declare interface ErrorState {
type: "error";
/**
* The error that caused the subscription to be terminated
*/
error: Error;
}
/**
* @public
* A two-element array that forms a predicate about a field.
*
* @remarks
* Used in {@link MessagePredicate} and {@link ConversationPredicate}.
* Possible forms:
*
* - `["==", "someValue"]`
*
* - `["!=", "someValue"]`
*
* - `["oneOf", ["someValue", "someOtherValue"]]`
*
* - `["!oneOf", ["someValue", "someOtherValue"]]`
*/
export declare type FieldPredicate<T> = ["==" | "!=", T] | ["oneOf" | "!oneOf", T[]];
/**
* A file attachment received in a message's content.
*
* @remarks
* All `FileBlock` variants contain `url`, `size`, and `fileToken`.
* Some file blocks have additional metadata, in which case they will have the `subtype` property set.
*
* Currently the available FileBlock subtypes are:
*
* - No `subtype` set ({@link GenericFileBlock})
*
* - `subtype: "video"` ({@link VideoBlock})
*
* - `subtype: "image"` ({@link ImageBlock})
*
* - `subtype: "audio"` ({@link AudioBlock})
*
* - `subtype: "voice"` ({@link VoiceBlock})
*
* @public
*/
export declare type FileBlock = VideoBlock | ImageBlock | AudioBlock | VoiceBlock | GenericFileBlock;
/**
* A token representing a file uploaded to TalkJS.
*
* @remarks
* You cannot create a FileToken yourself. Get a file token by uploading your file to TalkJS with {@link Session.uploadFi