UNPKG

talkjs

Version:

Build the perfect messaging experience in 10 minutes.

1,393 lines (1,345 loc) 209 kB
/** * 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