@talkjs/react-components/default.d.ts

Provides chat UI components for TalkJS.

import { AudioBlock } from '@talkjs/core';
import { ConversationSnapshot } from '@talkjs/core';
import { FileBlock } from '@talkjs/core';
import { FileToken } from '@talkjs/core';
import { ForwardRefExoticComponent } from 'react';
import { ImageBlock } from '@talkjs/core';
import { LocationBlock } from '@talkjs/core';
import { MessageSnapshot } from '@talkjs/core';
import { ParticipantSnapshot } from '@talkjs/core';
import type * as React_2 from 'react';
import { RefAttributes } from 'react';
import { TextBlock } from '@talkjs/core';
import { TypingSnapshot } from '@talkjs/core';
import { UserSnapshot } from '@talkjs/core';
import { VideoBlock } from '@talkjs/core';
import { VoiceBlock } from '@talkjs/core';

declare type AppId = Brand<string, "App ID">;

declare interface AppMetadata {
    id: AppId;
    name: string;
    defaultLocale: string;
    custom: Record<string, string>;
}

declare interface AudioBlockProps extends ContentBlockProps {
    block: AudioBlock;
    downloadUrl?: string;
}

/**
 * Brands a base type `T`.
 *
 * @example
 * ```ts
 * type UserId = Brand<string, "UserId">;
 * type MessageId = Brand<string, "MessageId">;
 *
 * const a: UserId = "abc" as UserId;    // works
 * const b: UserId = "abc";              // error
 * const c: UserId = "abc" as MessageId; // error
 * ```
 */
declare type Brand<T, B extends string> = T & Branding<B>;

declare interface Branding<B extends string> {
    __tag: Record<B, true>;
}

/**
 * @public
 *
 * A string that is one of `"notifications" | "microphone" | "geolocation"`.
 *
 * @remarks
 * Note that more possible values may be added in the future, so make sure your
 * handler can deal with unknown permission types gracefully.
 */
declare type BrowserPermission = "notifications" | "microphone" | "geolocation";

/**
 * Passed to `chatbox.beforeBrowserPermissionPrompt` when a browser permission
 * dialog needs to be shown to the user.
 *
 * @public
 */
declare interface BrowserPermissionRequest {
    /**
     * 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: BrowserPermission;
    /**
     * 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 `cancel()`, 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.
     */
    cancel(): void;
    /**
     * Show the browser permission prompt that lets the user allow or deny this
     * permission.
     *
     * @remarks
     * When the user clicks "Allow", then the user action that triggered the
     * browser permission request will proceed and the return value resolves to
     * `"granted"`.
     *
     * When the user clicks "Deny", then the user action is cancelled, the
     * `onMissingBrowserPermission` event is triggered, and the return value
     * resolves to `"denied"`.
     */
    showPrompt(): Promise<"granted" | "denied">;
}

export declare const Chatbox: typeof Chatbox_2;

declare const Chatbox_2: ForwardRefExoticComponent<ChatboxProps & RefAttributes<ChatboxRef>>;

export declare interface ChatboxProps {
    appId: string;
    userId: string;
    conversationId: string;
    token?: string;
    tokenFetcher?: () => string | Promise<string>;
    theme?: Theme;
    enterSendsMessage?: boolean;
    chatHeaderVisible?: boolean;
    messageFieldVisible?: boolean;
    messageFieldSpellcheck?: boolean;
    messageFieldPlaceholder?: string;
    onDeleteMessage?: (e: DeleteMessageEvent) => void;
    onSendMessage?: (e: SendMessageEvent) => void;
    beforeBrowserPermissionPrompt?: (request: BrowserPermissionRequest) => void;
    onMissingBrowserPermission?: (e: MissingBrowserPermissionEvent) => void;
    themeCustom?: any;
}

export declare interface ChatboxRef {
    deleteMessage(messageId: string): Promise<void>;
    editMessage(messageId: string, text: string): Promise<void>;
    sendMessage(message: {
        text: string;
        custom?: Record<string, string>;
        referencedMessageId?: string;
    }): Promise<void>;
    sendFileMessage(message: {
        fileToken: FileToken;
        custom?: Record<string, string>;
    }): Promise<void>;
    sendLocationMessage(message: {
        location: Coordinates;
        custom?: Record<string, string>;
    }): Promise<void>;
    setReferencedMessage(messageId: string | null): void;
    openMessageActionMenu(messageId: string): void;
    closeMessageActionMenu(): void;
    getMessageFieldText: () => string;
    setMessageFieldText: (text: string) => void;
}

declare interface ChatHeaderProps {
    conversation: ConversationSnapshot;
    participants: ParticipantSnapshot[];
    currentUser: UserSnapshot;
    t: Translation;
    chatbox: ChatboxRef;
    themeCustom?: any;
    isUserConnected: {
        [userId: string]: boolean;
    };
    permissions: UserPermissions;
}

declare interface ContentBlockProps {
    message: MessageSnapshot;
    currentUser: UserSnapshot;
    t: Translation;
    themeCustom?: any;
}

declare interface Coordinates {
    latitude: number;
    longitude: number;
}

declare interface DeleteMessageEvent {
    currentUser: UserSnapshot;
    message: MessageSnapshot;
    conversation: ConversationSnapshot;
}

declare interface EditorState {
    isTyping: boolean;
    atTextLimit: boolean;
    isEmpty: boolean;
    characterCount: number;
}

declare interface FileBlockProps extends ContentBlockProps {
    block: FileBlock;
    downloadUrl?: string;
}

declare interface IconProps {
    type: "attach" | "chevronLeft" | "left" | "chevronRight" | "right" | "chevronUp" | "up" | "chevronDown" | "down" | "close" | "emoji" | "locationPin" | "more" | "plus" | "search" | "send" | "spinner" | "play" | "pause" | "updown" | "addEmoji" | "microphone" | "mic" | "stop" | "download" | "location" | "email" | "movie" | "image" | "attachment" | "horizontalDots" | "verticalDots" | "reply" | "back";
    className?: string;
    themeCustom?: any;
}

declare interface IEditorController extends EditorState {
    send(): void;
    shareLocation(): void;
    attachFile(): void;
}

declare interface ImageBlockProps extends ContentBlockProps {
    block: ImageBlock;
    downloadUrl?: string;
}

declare interface LocationBlockProps extends ContentBlockProps {
    block: LocationBlock;
}

declare interface MessageActionMenuProps {
    currentUser: UserSnapshot;
    permissions: MessagePermissions;
    conversation: ConversationSnapshot;
    message: MessageSnapshot;
    chatbox: ChatboxRef;
    t: Translation;
    themeCustom?: any;
}

declare interface MessageDividerProps {
    isReadMarker: boolean;
    isDayMarker: boolean;
    timestamp?: number;
    currentUser: UserSnapshot;
    conversation: ConversationSnapshot;
    app: AppMetadata;
    t: Translation;
    themeCustom?: any;
}

declare interface MessageFieldProps {
    conversation: ConversationSnapshot;
    participants: ParticipantSnapshot[];
    referencedMessage: MessageSnapshot;
    currentUser: UserSnapshot;
    permissions: UserPermissions;
    t: Translation;
    chatbox: ChatboxRef;
    editor?: IEditorController;
    themeCustom?: any;
}

declare interface MessageListFooterProps {
    typing: TypingSnapshot;
    conversation: ConversationSnapshot;
    participants: ParticipantSnapshot[];
    currentUser: UserSnapshot;
    t: Translation;
    chatbox: ChatboxRef;
    themeCustom?: any;
}

declare interface MessagePermissions extends UserPermissions {
    canDeleteMessage: boolean;
    canReplyToMessage: boolean;
}

declare interface MessageProps {
    app: AppMetadata;
    currentUser: UserSnapshot;
    message: MessageSnapshot;
    messageStatus: MessageStatus;
    conversation: ConversationSnapshot;
    participants: ParticipantSnapshot[];
    permissions: MessagePermissions;
    t: Translation;
    chatbox: ChatboxRef;
    messageActionMenuAnchorRef: React_2.RefObject<HTMLElement | undefined>;
    themeCustom?: any;
}

declare type MessageStatus = "sending" | "sent" | "everyoneRead";

/**
 * Sent by `onMissingBrowserPermission` when the user tried to do an action that
 * require explicit browser permission, but that permission has been denied.
 *
 * @remarks
 * This event is meant to let you show a message to the user if an action (eg
 * sharing a location, or enabling notifications) can't proceed because the
 * browser permission for that has been denied.
 *
 * If you want to control when to show the browser permissions prompt, use
 * `beforeBrowserPermissionPrompt`.
 *
 * This event is emitted both when the user has denied this permission in the
 * past, and when a user action just triggered a browser permissions prompt
 * which the user then denied. If you need to differentiate between these two
 * cases, use `beforeBrowserPermissionPrompt`, and inspect the return value of
 * {@link BrowserPermissionRequest.showPrompt}.
 *
 * @public
 */
declare interface MissingBrowserPermissionEvent {
    /**
     * 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: BrowserPermission;
}

declare interface SendMessageEvent {
    currentUser: UserSnapshot;
    message: MessageSnapshot;
    conversation: ConversationSnapshot;
}

declare interface TextBlockProps extends ContentBlockProps {
    block: TextBlock;
}

declare interface Theme {
    ChatHeader: React_2.ComponentType<ChatHeaderProps>;
    Message: React_2.ComponentType<MessageProps>;
    MessageField: React_2.ComponentType<MessageFieldProps>;
    MessageActionMenu: React_2.ComponentType<MessageActionMenuProps>;
    Icon: React_2.ComponentType<IconProps>;
    MessageDivider: React_2.ComponentType<MessageDividerProps>;
    MessageListFooter: React_2.ComponentType<MessageListFooterProps>;
    TextBlock: React_2.ComponentType<TextBlockProps>;
    FileBlock: React_2.ComponentType<FileBlockProps>;
    LocationBlock: React_2.ComponentType<LocationBlockProps>;
    ImageBlock: React_2.ComponentType<ImageBlockProps>;
    AudioBlock: React_2.ComponentType<AudioBlockProps>;
    VoiceBlock: React_2.ComponentType<VoiceBlockProps>;
    VideoBlock: React_2.ComponentType<VideoBlockProps>;
}

export declare const theme: Theme;

declare type Translation = TranslationData & TranslationStrings;

declare interface TranslationData {
    locale: string;
}

declare interface TranslationStrings {
    YESTERDAY: string;
    TODAY: string;
    DAYS: string;
    HOURS: string;
    MINUTES: string;
    JUST_NOW: string;
    LOCATION: string;
    CANCEL: string;
    INBOX: string;
    DESKTOP_NOTIFICATIONS: string;
    DESKTOP_NOTIFICATIONS_ERROR: string;
    DESKTOP_NOTIFICATIONS_DEMO_TITLE: (appName: string) => string;
    DESKTOP_NOTIFICATIONS_DEMO_BODY: string;
    SEND_BUTTON_TEXT: string;
    ENTRYBOX_TEXT_LIMIT: string;
    ENTRYBOX_PLACEHOLDER: string;
    ENTRYBOX_PLACEHOLDER_CHAT_CLOSED: string;
    ENTRYBOX_PLACEHOLDER_CHAT_READONLY: string;
    MESSAGELIST_LOADING_OLDER: string;
    MESSAGELIST_SHOW_OLDER: string;
    MESSAGELIST_NEW_MARKER: string;
    MESSAGE_SENT_VIA_EMAIL: string;
    YOU_MARKER: string;
    UPLOAD_IN_PROGRESS: string;
    UPLOAD_SEND_FILE: string;
    UPLOAD_SHARE_LOCATION: string;
    UPLOAD_ERROR: string;
    SHARE_LOCATION_ERROR: string;
    LOADING: string;
    HUB_EMPTY: string;
    HUB_SHOW_EARLIER: string;
    INBOX_NO_CHATS_TITLE: string;
    INBOX_NO_CHATS_BODY: string;
    ENABLE_TRANSLATION: string;
    DISABLE_TRANSLATION: string;
    SEARCH_PLACEHOLDER_TEXT: string;
    SEARCH_SEARCHING: string;
    SEARCH_NO_RESULTS: string;
    SEARCH_NO_MORE_RESULTS: string;
    CHAT_NOT_FOUND: string;
    DELETE_MESSAGE: string;
    DELETION_EXPLANATION: string;
    EDIT_MESSAGE: string;
    SAVE: string;
    EDITED_INDICATOR: string;
    REPLY_TO_MESSAGE: string;
    REPLY_TO_ARIA_LABEL: (senderName: string, content: string) => string;
    REPLY_MODE_LEAVE_ARIA_LABEL: string;
    ADD_REACTION: string;
    AUTH_EXPIRED_OVERLAY_TITLE: string;
    AUTH_EXPIRED_OVERLAY_DESCRIPTION: string;
    VOICE_MESSAGE: string;
    LEAVE_CONVERSATION: string;
    MARK_CONVERSATION_AS_UNREAD: string;
    STATUS_INDICATOR_ONLINE: string;
    STATUS_INDICATOR_OFFLINE: string;
    CONTACT_INFORMATION_HIDDEN: string;
}

declare interface UserPermissions {
    showTypingIndicator: boolean;
    canShareFile: boolean;
    canShareLocation: boolean;
    canMention: boolean;
    showOnlineStatus: boolean;
    canSendVoiceMessage: boolean;
    canLeaveConversation: boolean;
    canMarkConversationAsUnread: boolean;
}

declare interface VideoBlockProps extends ContentBlockProps {
    block: VideoBlock;
    downloadUrl?: string;
}

declare interface VoiceBlockProps extends ContentBlockProps {
    block: VoiceBlock;
    downloadUrl?: string;
}

export { }


declare global {
    interface HTMLElementTagNameMap {
        "t-chatbox": ChatboxHTMLElement;
    }
}


declare global {
    namespace JSX {
        interface IntrinsicElements {
            "t-chatbox": typeof Chatbox;
        }
    }
}