import { AudioBlock } from '@talkjs/core';
import { ContentBlock } from '@talkjs/core';
import { ConversationSearch } from '@talkjs/core';
import { ConversationSearchState } from '@talkjs/core';
import { ConversationSnapshot } from '@talkjs/core';
import { default as default_2 } from 'react';
import { EditMessageParams } from '@talkjs/core';
import { EditTextMessageParams } from '@talkjs/core';
import { FileBlock } from '@talkjs/core';
import { FileToken } from '@talkjs/core';
import { GenericFileBlock } from '@talkjs/core';
import { ImageBlock } from '@talkjs/core';
import { JSX as JSX } from 'react/jsx-runtime';
import { LocationBlock } from '@talkjs/core';
import { MessageSearch } from '@talkjs/core';
import { MessageSearchState } from '@talkjs/core';
import { MessageSnapshot } from '@talkjs/core';
import { ParticipantSnapshot } from '@talkjs/core';
import * as React from 'react';
import { ReferencedMessageSnapshot } from '@talkjs/core';
import { SearchMessageSnapshot } from '@talkjs/core';
import { SendMessageParams } from '@talkjs/core';
import { SendTextMessageParams } from '@talkjs/core';
import { TalkSession } from '@talkjs/core';
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';

/**
 * @public
 */
export declare interface AfterMessagesProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
}

/**
 * Holds information about your TalkJS app.
 *
 * @public
 */
export declare interface App {
    /**
     * Your app's unique TalkJS ID. You can find it on the Settings page of the
     * {@link https://talkjs.com/dashboard | TalkJS dashboard.}
     */
    id: string;
    /**
     * The name of your app.
     */
    name: string;
    /**
     * The default locale.
     *
     * @remarks
     * This can be configured from your TalkJS dashboard.
     */
    defaultLocale: string;
    /**
     * Custom data set for this app.
     *
     * @remarks
     * This can be configured from your TalkJS dashboard.
     */
    custom: Record<string, string>;
}

export { AudioBlock }

/**
 * @public
 */
export declare interface AudioBlockProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * The message that this content block belongs to.
     */
    message: MessageSnapshot;
    /**
     * The audio block to display.
     */
    block: AudioBlock;
    /**
     * The URL used to download the file.
     *
     * @remarks
     * This URL is not the same as `block.url`. When the current user sends a file
     * message, the `block.url` will hold a temporary `blob:` URL until that file
     * is uploaded to TalkJS. The user can immediately see their file present in
     * the chat, which makes for a smoother user experience.
     *
     * The `downloadUrl` is the URL of the file once it is uploaded to TalkJS. As
     * such, this property will be `undefined` until the upload is completed,
     * while `block.url` will always be defined and should be used for preview
     * purposes.
     */
    downloadUrl?: string;
}

/**
 * Audio player based on wavesurfer.
 *
 * @remarks
 * Wavesurfer is designed to make SoundCloud-style sound wave players. It has no
 * UI elements other than the actual sound waves, but it does abstract away all
 * the audio playing browser internals very nicely.
 *
 * Also, it has some additional settings that let us turn the sound wave display
 * into a series of nice rounded bars. Less signal, but also less distraction. I
 * kinda like it!
 *
 * @public
 */
export declare function AudioPlayer({ src, onError, filename, className, }: AudioPlayerProps): JSX.Element;

/**
 * @public
 */
export declare interface AudioPlayerProps {
    /**
     * Source URL of the audio file to play.
     */
    src: string;
    /**
     * Name of the audio file that's being played.
     */
    filename?: string;
    /**
     * Callback that runs when an error is encountered during playback.
     */
    onError?: () => void;
    /**
     * @hidden
     */
    className?: string;
}

/**
 * @public
 */
export declare interface AvatarProps {
    /**
     * A collection of objects which are passed to all Chatbox/ConversationList
     * theme components.
     *
     * @remarks
     * Because this particular theme component can show up in both a `<Chatbox>`
     * and a `<ConversationList>`, this prop has a union type.
     */
    common: CommonChatboxProps | CommonConversationListProps;
    /**
     * The URL of the image that's to be displayed.
     */
    photoUrl: string;
}

/**
 * An event object dispatched by the
 * {@link ChatboxProps.onBackButtonClick} event.
 *
 * @public
 */
export declare interface BackButtonClickEvent {
    currentUser: UserSnapshot;
}

/**
 * @public
 */
export declare interface BaseChatboxProps {
    /**
     * @hidden
     */
    className?: string;
    /**
     * @hidden
     */
    style?: React.CSSProperties;
    /**
     * Your app's unique TalkJS ID. You can find it on the Settings page of the
     * {@link https://talkjs.com/dashboard | TalkJS dashboard.}
     */
    appId: string;
    /**
     * The ID of the current user.
     *
     * @remarks
     * If the given user ID doesn't exist, a "Something went wrong" message will
     * be displayed.
     */
    userId: string;
    /**
     * The ID of the currently focused message.
     *
     * @remarks
     * Whenever this value changes to a valid message ID, the relevant message
     * will be scrolled into view.
     *
     * If you're using a modern web framework like React or Vue, also include an
     * {@link onFocusMessage} prop where you'll update your local `focusedMessageId` state
     * so that it stays in sync with the UI's internals.
     *
     * Note that updating the selected conversation through this prop **will not**
     * trigger the {@link onFocusMessage} callback.
     */
    focusedMessageId?: string;
    /**
     * Lets you override theme components with your own implementations to
     * customize them.
     *
     * @remarks
     * See
     * {@link https://talkjs.com/docs/UI_Components/React/Customization/#custom-theme-components | Custom theme components }
     * for more info.
     */
    theme?: Partial<Theme>;
    /**
     * When true, pressing Enter will send a message.
     *
     * @remarks
     * Defaults to `true`.
     */
    enterSendsMessage?: boolean;
    /**
     * Sets whether the chat header is visible.
     *
     * @remarks
     * Defaults to `true`.
     */
    chatHeaderVisible?: boolean;
    /**
     * Sets whether the message input field is visible.
     *
     * @remarks
     * Defaults to `true`.
     */
    messageFieldVisible?: boolean;
    /**
     *  Sets whether spellcheck is enabled in the message field.
     *
     * @remarks
     * Defaults to `false`.
     */
    messageFieldSpellcheck?: boolean;
    /**
     * Adds custom placeholder text for the message input field.
     *
     * @remarks
     * The default placeholder text is `"Say something..."`
     */
    messageFieldPlaceholder?: string;
    /**
     * Callback that triggers when the user deletes a message with the TalkJS UI.
     *
     * @param event - Event object describing the message deletion
     */
    onDeleteMessage?: (event: DeleteMessageEvent) => void;
    /**
     * Callback that triggers when the user sends a message with the TalkJS UI.
     *
     * @param event - Event object describing the message sending action
     */
    onSendMessage?: (event: SendMessageEvent) => void;
    /**
     * Callback that triggers when the user initiates an action that will require
     * a permissions request from the browser, but right before actually
     * requesting the permission from the browser.
     *
     * @remarks
     * You can use this callback to inform the user that they will need to grant a
     * browser permission in order to perform an action.
     *
     * @param request - Object describing the permission request
     */
    beforeBrowserPermissionPrompt?: (request: BrowserPermissionRequest) => void;
    /**
     * Callback that triggers when the user attempts to initiate an action that
     * requires a specific browser permission, but that permission was not
     * granted.
     *
     * @param event - Event object describing the missing permission
     */
    onMissingBrowserPermission?: (event: MissingBrowserPermissionEvent) => void;
    /**
     * This event fires when the user clicks an action button or an action Link
     * inside a message.
     *
     * @remarks
     * The event's `action` and `params` fields specify the name of action and its
     * parameters, if any.
     *
     * See
     * {@link https://talkjs.com/docs/Guides/Web_Components/Action_Buttons_Links/ | Action Buttons and Links }
     * for more info.
     */
    onMessageAction?: (event: MessageActionEvent) => void;
    /**
     * Callback that triggers when a message is focused or unfocused.
     *
     * @param event - Event object describing the message focus action
     *
     * @remarks
     * Note that updating the focused message through the
     * {@link focusedMessageId} prop **will not** trigger this callback.
     */
    onFocusMessage?: (event: FocusMessageEvent) => void;
    /**
     * Arbitrary custom data passed down to the theme.
     *
     * @remarks
     * Whatever data you pass here will be made available for use in theme
     * components through {@link CommonChatboxProps.themeCustom} for Chatbox
     * theme components and through
     * {@link CommonConversationListProps.themeCustom} for ConversationList
     * theme components.
     */
    themeCustom?: any;
}

/**
 * @public
 */
export declare interface BaseConversationListProps {
    /**
     * @hidden
     */
    className?: string;
    /**
     * @hidden
     */
    style?: React.CSSProperties;
    /**
     * Your app's unique TalkJS ID. You can find it on the Settings page of the
     * {@link https://talkjs.com/dashboard | TalkJS dashboard.}
     */
    appId: string;
    /**
     * The ID of the current user.
     *
     * @remarks
     * If the given user ID doesn't exist, a "Something went wrong" message will
     * be displayed.
     */
    userId: string;
    /**
     * The ID of the conversation currently selected in the list.
     *
     * @remarks
     *
     * Changing the value of this prop will cause the ConversationList UI to
     * update.
     *
     * If you're using a modern web framework like React or Vue, also include an
     * {@link onSelectConversation} prop where you'll update your local `selectedConversationId` state
     * so that it stays in sync with the UI's internals.
     *
     * Note that updating the selected conversation through this prop **will not**
     * trigger the {@link onSelectConversation} callback.
     */
    selectedConversationId?: string;
    /**
     * Lets you override theme components with your own implementations to
     * customize them.
     *
     * @remarks
     * See
     * {@link https://talkjs.com/docs/UI_Components/React/Customization/#custom-theme-components | Custom theme components }
     * for more info.
     */
    theme?: Partial<Theme>;
    /**
     * Callback that triggers when the user selects a conversation from the list.
     *
     * @param event - Event object containing the selected conversation
     *
     * @remarks
     * Note that updating the selected conversation through the
     * {@link selectedConversationId} prop **will not** trigger this callback.
     *
     * Use this callback to have an adjacent chatbox show the correct
     * conversation. See
     * {@link https://talkjs.com/docs/UI_Components/React/ConversationList/#respond-to-a-select-conversation-event | Respond to a select conversation event.}
     */
    onSelectConversation?: (event: SelectConversationEvent) => void;
    /**
     * Arbitrary custom data passed down to the theme.
     *
     * @remarks
     * Whatever data you pass here will be made available for use in theme
     * components through {@link CommonChatboxProps.themeCustom} for Chatbox
     * theme components and through
     * {@link CommonConversationListProps.themeCustom} for ConversationList
     * theme components.
     */
    themeCustom?: any;
}

/**
 * @public
 */
export declare interface BeforeMessagesProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
}

/**
 * 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.
 *
 * @public
 */
export declare type BrowserPermission = "notifications" | "microphone" | "geolocation";

/**
 * Passed to {@link ChatboxProps.beforeBrowserPermissionPrompt} when a
 * browser permission dialog needs to be shown to the user.
 *
 * @public
 */
export 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">;
}

/**
 * The
 * {@link https://talkjs.com/docs/Features/Chat_UIs/#chatbox | TalkJS Chatbox UI. }
 * Displays a single conversation.
 *
 * @public
 */
export declare const Chatbox: React.ForwardRefExoticComponent<ChatboxProps & React.RefAttributes<ChatboxController>>;

/**
 * A collection of actions available on the Chatbox UI.
 *
 * @public
 */
export declare class ChatboxController {
    #private;
    /**
     * Deletes the message with the given ID.
     */
    deleteMessage(messageId: string): Promise<void>;
    /**
     * Enable/disable editing of a given message.
     *
     * @param messageId - When `null` is provided, editing mode will be disabled
     */
    setEditing(messageId: string | null): void;
    /**
     * Edit the message with the given ID.
     */
    editMessage(messageId: string, params: EditTextMessageParams | EditMessageParams): Promise<void>;
    /**
     * Send a text message to the current conversation.
     */
    sendMessage(params: SendTextMessageParams | SendMessageParams): Promise<void>;
    /**
     * Send a file message to the current conversation.
     */
    sendFileMessage(params: {
        fileToken: FileToken;
        custom?: Record<string, string>;
    }): Promise<void>;
    /**
     * Send a location message to the current conversation.
     */
    sendLocationMessage(message: {
        location: Coordinates;
        custom?: Record<string, string>;
    }): Promise<void>;
    /**
     * Set/unset the message that's currently being replied to.
     *
     * @param messageId - When `null` is provided, the "replying to" message is cleared
     */
    setReferencedMessage(messageId: string | null): void;
    /**
     * Toggle the given emoji reaction for the given message. If the current user
     * already added this reaction, it's removed, and otherwise, it's added.
     *
     * Called from the theme's Message component when the user clicks on an
     * existing emoji reaction.
     *
     * @param messageId - The ID of the message you want to toggle the reaction on. This message must exist in the current conversation.
     * @param emoji - The emoji you want to toggle. Must be a string of a single unicode emoji glyph, eg `"🎉"`.
     * @param force - If included, turns the toggle into a one way-only operation. Setting to `true` will add this reaction for the current user and setting to `false` will remove it if it was already added for the current user
     */
    toggleReaction(messageId: string, emoji: string, force?: boolean): Promise<void>;
    /**
     * Get the plaintext from the message field
     *
     * @returns The text
     */
    getMessageFieldText(): string;
    /**
     * Set the plaintext in the message field
     */
    setMessageFieldText(text: string): void;
    /**
     * Focus the message field
     */
    focusMessageField(): void;
    /**
     * Toggles whether the `ChatSearchBox` should be visible or not.
     *
     * @param force - If included, turns the toggle into a one way-only operation. Setting to `true` will enable the search box, and setting to `false` will disable it.
     */
    toggleSearchBox(force?: boolean): void;
    /**
     * Scrolls to the message with the given messageId and marks it as "focused",
     * meaning the {@link CommonChatboxProps.focusedMessage} field will be
     * populated.
     *
     * If `null` is passed the `focusedMessage` will be cleared.
     *
     * @returns `true` if a message with the given ID was found and was scrolled
     * to.
     */
    focusMessage(messageId: string | null): Promise<MessageSnapshot | null>;
    /**
     * Highlights certain strings in messages
     *
     * @remarks
     * The TalkJS search feature includes the ability to highlight certain strings in messages. Call
     * this method to highlight certain strings without having the user invoke the search feature.
     * Call again with an empty array to disable highlighting.
     *
     * Note: like the search feature, this option only works on the Growth plan and up.
     */
    setHighlightedStrings(words: string[]): void;
    /**
     * Searches for a message upwards that contains highlighted strings.
     * If a message is found, the UI will scroll that message into view.
     *
     * Strings are highlighted when you explicitly call {@link setHighlightedStrings} or
     * when a user types a word/phrase into the `ChatSearchBox`.
     *
     * @returns A promise resolving to a {@link MessageSnapshot} if a message was found. The promise
     * resolves to `null` otherwise.
     */
    jumpToPreviousHighlight(): Promise<MessageSnapshot | null>;
    /**
     * Searches for messages downwards that contains highlighted strings.
     * If a message is found, the UI will scroll that message into view.
     *
     * Strings are highlighted when you explicitly call {@link setHighlightedStrings} or
     * when a user types a word/phrase into the `ChatSearchBox`.
     *
     * @returns A promise resolving to a {@link MessageSnapshot} if a message was found. The promise
     * resolves to `null` otherwise.
     */
    jumpToNextHighlight(): Promise<MessageSnapshot | null>;
    clickBackButton(): void;
}

/**
 * @public
 */
export declare interface ChatboxProps extends BaseChatboxProps {
    /**
     * The ID of the conversation to display.
     *
     * @remarks
     * If the conversation doesn't exist or if the current user isn't a
     * participant of the current conversation, a "Conversation not found" message will be
     * displayed (after a timeout). If you create the conversation in parallel (eg
     * via the REST API or via the Data API), it will show in the chatbox
     * automatically. This means that you can safely point a chatbox at a
     * conversation that might not yet exist. This way the chatbox UI and the
     * conversation can load in parallel, which results in snappier UX.
     *
     * Passing `null` deselects the current conversation and shows an empty panel.
     * This may be useful for Inbox-like scenarios where you want to keep the
     * chatbox loaded, without showing a conversation.
     *
     * In the background, the Chatbox keeps active subscriptions to recent
     * conversations, so that switching back and forth between conversations has
     * snappy UX.
     */
    conversationId: string | null;
    /**
     * Fired when the back button in the chat header is clicked.
     *
     * @remarks
     * By default this back button is only shown inside an inbox on small screens.
     * You can change this behavior in the ChatHeader theme.
     *
     * @public
     */
    onBackButtonClick?: (event: BackButtonClickEvent) => void;
    /**
     * A token to authenticate the session with.
     *
     * @remarks
     * See the
     * {@link https://talkjs.com/docs/Features/Security/Authentication/ | Authentication guide }
     * and
     * {@link https://talkjs.com/docs/Features/Security/Advanced_Authentication/#token-reference | Token reference }
     * for details and examples.
     *
     * Required when authentication is enabled, otherwise optional.
     */
    token?: string;
    /**
     * A function that fetches and returns a new authentication token from your
     * server.
     *
     * @remarks
     * TalkJS calls this function whenever the current token is about to expire.
     * This callback is designed to work with any backend setup. See
     * {@link https://talkjs.com/docs/Features/Security/Advanced_Authentication/#refreshable-tokens | Refreshable tokens }
     * for details and examples.
     */
    tokenFetcher?: () => string | Promise<string>;
}

/**
 * @public
 */
export declare interface ChatHeaderProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * A record of user IDs and their connection status.
     */
    isUserConnected: {
        [userId: string]: boolean;
    };
    /**
     * The current user's permissions.
     */
    permissions: UserPermissions;
}

/**
 * @public
 */
export declare interface ChatSearchBoxProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
}

/**
 * The current state of the chat search
 *
 * @remarks
 * This type can have one of these values:
 *
 * - `"hidden"` - The {@link Theme.ChatSearchBox} is not shown to the user.
 *
 * - `"visible"` - The {@link Theme.ChatSearchBox} is shown to the user.
 *
 * - `"searching"` - Waiting for more older messages to be loaded from the server.
 *
 * - `"noResults"` - There are 0 messages that contain the phrase entered by the user.
 *
 * - `"noMoreResults"` - There are not any more messages in the given direction that contain a match for the phrase entered by the user.
 *
 * @public
 */
export declare type ChatSearchState = "hidden" | "visible" | "searching" | "noResults" | "noMoreResults";

/**
 * A collection of props that's shared by every themed component used in the Chatbox UI.
 *
 * @public
 */
export declare interface CommonChatboxProps {
    /**
     * Holds information about your TalkJS app.
     */
    app: App;
    /**
     * The user that mounted this chatbox.
     */
    currentUser: UserSnapshot;
    /**
     * A translation object which holds localized strings for internationalization
     * purposes.
     */
    t: Translation;
    /**
     * Public interface of the chatbox instance.
     */
    chatbox: ChatboxController;
    /**
     * Arbitrary custom data passed down to the theme.
     *
     * @remarks
     * The data that you pass to {@link ChatboxProps.themeCustom} will show up
     * here so that you can use it from within theme components.
     */
    themeCustom?: any;
    /**
     * Describes the capabilities of the current device.
     */
    device: DeviceFeatures;
    /**
     * The theme object that the chatbox is currently using.
     */
    theme: Theme;
    /**
     * The ID of the conversation displayed in the chatbox.
     *
     * @remarks
     * Prefer this field instead of `common.conversation.id` (which always has the
     * same value), as this enables an optimization that prevents needless
     * re-renders.
     */
    conversationId: string;
    /**
     * The conversation displayed in the chatbox.
     */
    conversation: ConversationSnapshot;
    /**
     * Tells you which participants are currently typing.
     */
    typing: TypingSnapshot;
    /**
     * The underlying TalkJS session object that handles sending and receiving chat data.
     */
    session: TalkSession;
    /**
     * The message that was most recently scrolled into view as a result of calling one of the following methods:
     * {@link ChatboxController.focusMessage}, {@link ChatboxController.jumpToPreviousHighlight}
     * or {@link ChatboxController.jumpToNextHighlight}
     */
    focusedMessage: MessageSnapshot | null;
    /**
     * The current state of the chat search
     */
    chatSearchState: ChatSearchState;
}

/**
 * A collection of props that's shared by every themed component used in the ConversationList UI.
 *
 * @public
 */
export declare interface CommonConversationListProps {
    /**
     * Holds information about your TalkJS app.
     */
    app: App;
    /**
     * The user that mounted this chatbox.
     */
    currentUser: UserSnapshot;
    /**
     * A translation object which holds localized strings for internationalization
     * purposes.
     */
    t: Translation;
    /**
     * Arbitrary custom data passed down to the theme.
     *
     * @remarks
     * The data that you pass to {@link ConversationListProps.themeCustom} will show up
     * here so that you can use it from within theme components.
     */
    themeCustom?: any;
    /**
     * Describes the capabilities of the current device.
     */
    device: DeviceFeatures;
    /**
     * The theme object that the conversation list is currently using.
     */
    theme: Theme;
    /**
     * Public interface of the conversation list instance.
     */
    conversationList: ConversationListController;
    /**
     * The underlying TalkJS session object that handles sending and receiving chat data.
     */
    session: TalkSession;
}

/**
 * @public
 */
export declare interface CompactMessageContentProps {
    /**
     * A collection of objects which are passed to all Chatbox/ConversationList
     * theme components.
     *
     * @remarks
     * Because this particular theme component can show up in both a `<Chatbox>`
     * and a `<ConversationList>`, this prop has a union type.
     */
    common: CommonChatboxProps | CommonConversationListProps;
    /**
     * The message that's being displayed.
     */
    message: MessageSnapshot | ReferencedMessageSnapshot;
}

/**
 * @public
 */
export declare interface ConversationImageProps {
    /**
     * A collection of objects which are passed to all Chatbox/ConversationList
     * theme components.
     *
     * @remarks
     * Because this particular theme component can show up in both a `<Chatbox>`
     * and a `<ConversationList>`, this prop has a union type.
     */
    common: CommonChatboxProps | CommonConversationListProps;
    /**
     * The conversation that's being displayed.
     */
    conversation: ConversationSnapshot;
    /**
     * A list of participants that are a part of the conversation.
     */
    participants: ParticipantSnapshot[];
}

/**
 * @public
 */
export declare const ConversationList: React.ForwardRefExoticComponent<ConversationListProps & React.RefAttributes<ConversationListController>>;

/**
 * A collection of actions available on the ConversationList UI.
 *
 * @public
 */
export declare class ConversationListController {
    #private;
    /**
     * Selects a conversation with the given ID, or de-select a conversation by
     * passing `null`.
     *
     * @remarks
     * This method is called from the theme's ConversationListItem component when
     * the user clicks on the given conversation. You can also call it
     * programmatically from elsewhere to simulate a user click.
     *
     * This method will trigger the
     * {@link ConversationListProps.onSelectConversation} event. In most
     * cases, if you want to change the selected conversation programmatically
     * from outside the conversation list, it's better to pass a different value
     * to the {@link ConversationListProps.selectedConversationId} prop
     * instead, as that lets you keep your local state in sync with the props
     * passed to the conversation list.
     *
     * You can also optionally pass a `focusedMessageId` to signify the intent
     * of scrolling to a particular message within that conversation.
     */
    selectConversation(conversationId: string | null, focusedMessageId?: string): Promise<void>;
}

/**
 * @public
 */
export declare interface ConversationListItemProps {
    /**
     * A collection of objects which are passed to all ConversationList theme components.
     */
    common: CommonConversationListProps;
    /**
     * The conversation that's being displayed.
     */
    conversation: ConversationSnapshot;
    /**
     * If `true`, this conversation is the currently selected one in the
     * conversation list.
     */
    isSelected: boolean;
}

/**
 * @public
 */
export declare interface ConversationListProps extends BaseConversationListProps {
    /**
     * A token to authenticate the session with.
     *
     * @remarks
     * See the
     * {@link https://talkjs.com/docs/Features/Security/Authentication/ | Authentication guide}
     * and
     * {@link https://talkjs.com/docs/Features/Security/Advanced_Authentication/#token-reference | Token reference}
     *  for details and examples.
     *
     * Required when authentication is enabled, otherwise optional.
     */
    token?: string;
    /**
     * A function that fetches and returns a new authentication token from your
     * server.
     *
     * @remarks
     * TalkJS calls this function whenever the current token is about to expire.
     * This callback is designed to work with any backend setup. See
     * {@link https://talkjs.com/docs/Features/Security/Advanced_Authentication/#refreshable-tokens | Refreshable tokens}
     *  for details and examples.
     */
    tokenFetcher?: () => string | Promise<string>;
}

export { ConversationSearch }

export { ConversationSearchState }

export { ConversationSnapshot }

/**
 * @public
 */
export declare interface Coordinates {
    latitude: number;
    longitude: number;
}

/**
 * The entire TalkJS default theme.
 *
 * @remarks
 * The entire source code of the theme is available in the {@link https://www.github.com/talkjs/theme-default | TalkJS `theme-default` Github repository.}
 *
 * @public
 */
export declare const defaultTheme: Theme;

/**
 * An event object dispatched by the {@link ChatboxProps.onDeleteMessage} event.
 *
 * @public
 */
export declare interface DeleteMessageEvent {
    currentUser: UserSnapshot;
    /**
     * The message that was just deleted.
     */
    message: MessageSnapshot;
    /**
     * The conversation that the message used to be in.
     */
    conversation: ConversationSnapshot;
}

/**
 * Describes the capabilities of the current device.
 *
 * @public
 */
export declare interface DeviceFeatures {
    /**
     * True if the browser supports IndexedDB, which the emoji picker depends on.
     */
    supportsEmojiPicker: boolean;
    /**
     * True if the user agents reports the current device as a mobile/tablet.
     */
    isMobile: boolean;
}

/**
 * @public
 */
export declare function Editor({ placeholder, disabled, className, characterLimit, spellcheck, }: EditorProps): JSX.Element;

/**
 * Lets you query and control the message editor.
 *
 * @remarks
 * Available inside the {@link https://talkjs.com/docs/UI_Components/Theme/Theme_components/MessageField | MessageField} theme component.
 * Connects with the internals of the {@link https://talkjs.com/docs/UI_Components/Theme/System_components/Editor | Editor} system component.
 *
 * @public
 */
export declare interface EditorController {
    /**
     * True if the maximum message length has been exceeded.
     *
     * @remarks
     * Sending should be disabled when true
     */
    atTextLimit: boolean;
    /**
     * True if the editor is empty.
     */
    isEmpty: boolean;
    /**
     * The number of characters in the editor.
     *
     * @remarks
     * Note that this is an estimation, and it may slightly exceed the actual number of characters in the editor.
     */
    characterCount: number;
    /**
     * Whether the emoji picker should be shown. Toggle with {@link toggleEmojiPicker}.
     */
    showEmojiPicker: boolean;
    /** Send the message and clear the editor */
    send(): void;
    /** Open the "share location" dialog */
    shareLocation(): void;
    /** Open the "attach file" dialog */
    attachFile(): void;
    /** Open or close the emoji picker */
    toggleEmojiPicker(): void;
    /** Start recording a voice message */
    recordVoiceMessage(): void;
}

/**
 * @public
 */
export declare interface EditorProps {
    /**
     * The maximum allowed character length.
     *
     * @remarks
     * The default is `10000`
     */
    characterLimit?: number;
    /**
     * Determines if the Editor can be interacted with or not.
     */
    disabled?: boolean;
    /**
     * Placeholder text when the input is empty to encourage the user to write.
     *
     * @remarks
     * The default is `"Say something..."`
     */
    placeholder?: string;
    /**
     * If true, spell-checking is enabled.
     *
     * @remarks
     * The default is `false`
     */
    spellcheck?: boolean;
    /**
     * @hidden
     */
    className?: string;
}

/**
 * @public
 */
export declare function EmojiPicker(props: EmojiPickerProps): JSX.Element;

/**
 * @public
 */
export declare interface EmojiPickerProps {
    /**
     * Display the emoji picker in light mode or dark mode.
     */
    colorScheme: "light" | "dark";
}

/**
 * @public
 */
export declare function EmojiSuggestBar(props: EmojiSuggestBarProps): JSX.Element;

/**
 * @public
 */
export declare interface EmojiSuggestBarProps {
}

export { FileBlock }

/**
 * @public
 */
export declare interface FileBlockProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * The message that this content block belongs to.
     */
    message: MessageSnapshot;
    /**
     * The generic file block to display.
     */
    block: GenericFileBlock;
    /**
     * The URL used to download the file.
     *
     * @remarks
     * This URL is not the same as `block.url`. When the current user sends a file
     * message, the `block.url` will hold a temporary `blob:` URL until that file
     * is uploaded to TalkJS. The user can immediately see their file present in
     * the chat, which makes for a smoother user experience.
     *
     * The `downloadUrl` is the URL of the file once it is uploaded to TalkJS. As
     * such, this property will be `undefined` until the upload is completed,
     * while `block.url` will always be defined and should be used for preview
     * purposes.
     */
    downloadUrl?: string;
}

/**
 * An event object dispatched by the {@link ChatboxProps.onFocusMessage} event.
 *
 * @public
 */
export declare interface FocusMessageEvent {
    /**
     * The message that was focused (or `null` if the focus was cleared)
     */
    message: MessageSnapshot | null;
}

/**
 * Displays the given number of seconds in a human-friendly MM:SS or HH:MM:SS
 * format; whichever's shorter.
 *
 * @public
 */
export declare function formatDuration(seconds: number): string;

/**
 * Returns a human-readable filesize count.
 *
 * @public
 */
export declare function formatFilesize(bytes: number): string;

export { GenericFileBlock }

/**
 * Given a coordinate, returns an `imageUrl` used to display a Google Maps
 * preview image and a `linkUrl` which points to the given location on Google
 * Maps.
 *
 * @public
 */
export declare function getGoogleMapsUrls({ latitude, longitude }: Coordinates): {
    imageUrl: string;
    linkUrl: string;
};

/**
 * Returns the given user's `photoUrl` if available. If not, returns a `data:`
 * URL of a fallback SVG which shows the user's initials.
 *
 * @public
 */
export declare function getPhotoUrlWithFallback(user: UserSnapshot): string;

/**
 * Generates a random color in hex format.
 *
 * @public
 */
export declare function getRandomColor(id: string): string;

/**
 * Props passed to the GlobalSearchBox theme component.
 *
 * @public
 */
export declare interface GlobalSearchBoxProps {
    /**
     * A collection of objects which are passed to all ConversationList theme components.
     */
    common: CommonConversationListProps;
    /**
     * Marks the given message ID or conversation ID as the currently selected search result.
     */
    query: string;
    /**
     * Sets a search query for the global search
     */
    setQuery(query: string): void;
    /**
     * Cancels the current search
     */
    cancel(): void;
}

/**
 * Props passed to the GlobalSearchResultHeader theme component.
 *
 * @public
 */
export declare interface GlobalSearchResultHeaderProps {
    /**
     * A collection of objects which are passed to all ConversationList theme components.
     */
    common: CommonConversationListProps;
    /**
     * Whether this header is displayed above conversation search results or message search results.
     */
    type: "messages" | "conversations";
    /**
     * True if more search results can be loaded.
     */
    canLoadMore: boolean;
    /**
     * Call this function to load more search results.
     */
    loadMore(): void;
}

export declare interface GlobalSearchResultItemProps {
    /**
     * A collection of objects which are passed to all GlobalSearchResultItem theme components.
     */
    common: CommonConversationListProps;
    /**
     * The conversation that's being displayed.
     */
    conversation: ConversationSnapshot;
    /**
     * The message containing the result item. If it's missing, then the search
     * match is on the conversation itself.
     */
    message?: MessageSnapshot;
    /**
     * If `true`, this search result is the currently selected one.
     */
    isSelected: boolean;
}

/**
 * @public
 */
export declare type GlobalSearchStatus = "idle" | "searching" | "noResults";

/**
 * @public
 */
export declare interface GroupChatImageProps {
    /**
     * A collection of objects which are passed to all Chatbox/ConversationList
     * theme components.
     *
     * @remarks
     * Because this particular theme component can show up in both a `<Chatbox>`
     * and a `<ConversationList>`, this prop has a union type.
     */
    common: CommonChatboxProps | CommonConversationListProps;
    /**
     * A list of participants that are a part of the conversation.
     */
    participants: ParticipantSnapshot[];
}

export declare function Highlightable({ text, className }: HighlightableProps): React.DetailedReactHTMLElement<{
    className: string;
}, HTMLElement>;

/**
 * @public
 */
export declare interface HighlightableProps {
    /** The text to display */
    text: string;
    /**
     * @hidden
     */
    className?: string;
}

/**
 * Parses a JSX-like React string into a React element tree.
 *
 * @remarks
 * Uses the {@link https://github.com/developit/htm | `htm`} library under the
 * hood.
 *
 * @public
 *
 * @privateRemarks
 * Adapted from:
 * https://github.com/developit/htm/issues/175#issuecomment-773755560
 */
export declare function html(strings: TemplateStringsArray, ...args: any[]): React.ReactElement;

/**
 * @public
 */
export declare interface IconProps {
    /**
     * A collection of objects which are passed to all Chatbox/ConversationList
     * theme components.
     *
     * @remarks
     * Because this particular theme component can show up in both a `<Chatbox>`
     * and a `<ConversationList>`, this prop has a union type.
     */
    common: CommonChatboxProps | CommonConversationListProps;
    /**
     * The name of the icon to display.
     */
    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";
    /**
     * @hidden
     */
    className?: string;
}

export { ImageBlock }

/**
 * @public
 */
export declare interface ImageBlockProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * The message that this content block belongs to.
     */
    message: MessageSnapshot;
    /**
     * The image block to display.
     */
    block: ImageBlock;
    /**
     * The URL used to download the file.
     *
     * @remarks
     * This URL is not the same as `block.url`. When the current user sends a file
     * message, the `block.url` will hold a temporary `blob:` URL until that file
     * is uploaded to TalkJS. The user can immediately see their file present in
     * the chat, which makes for a smoother user experience.
     *
     * The `downloadUrl` is the URL of the file once it is uploaded to TalkJS. As
     * such, this property will be `undefined` until the upload is completed,
     * while `block.url` will always be defined and should be used for preview
     * purposes.
     */
    downloadUrl?: string;
}

/**
 * The
 * {@link https://talkjs.com/docs/Features/Chat_UIs/#chatbox | TalkJS Chatbox UI. }
 * Displays a single conversation.
 *
 * @public
 */
export declare const Inbox: default_2.ForwardRefExoticComponent<InboxProps & default_2.RefAttributes<InboxController>>;

/**
 * A collection of actions available on the Inbox UI
 *
 * @remarks
 * Exposes a `chatbox` field which, if a conversation is currently selected,
 * lets you control the chatbox encapsulated by this inbox.
 *
 * @public
 */
export declare class InboxController {
    #private;
    /**
     * The {@link ChatboxController} object of the underlying chatbox
     *
     * @remarks
     * This lets you programmatically control the chatbox side of this inbox, ie
     * the right panel. For example, to control the message field text:
     *
     * ```js
     * // Obtain a reference to the inbox object, eg:
     * // const inbox = inboxRef.current; // react
     * // const inbox = document.querySelector("t-inbox") // web
     * // const inbox = inboxRef.value // vue
     * // etc
     *
     * inbox.chatbox.setMessageFieldText("Hey there");
     * ```
     */
    get chatbox(): ChatboxController;
}

/**
 * The Inbox takes all prop from {@link Chatbox} and all props from {@link ConversationList}.
 *
 * @public
 */
export declare interface InboxProps extends BaseChatboxProps, BaseConversationListProps {
    /**
     * The container width at which the Inbox switches to mobile mode.
     *
     * @remarks
     * When the container is less wide than this amount of pixels, the inbox will
     * only show a chatbox or a conversation list, and the chatbox header will
     * show a back button to move back to the conversation list.
     *
     * When the inbox is in mobile mode, the inbox element will get a
     * `t-mobile-inbox` attribute. This attribute is used in e.g. the CSS of the
     * ChatHeader theme component to determine whether or not to show the back
     * button.
     *
     * @public
     */
    mobileBreakPoint?: number;
}

export { LocationBlock }

/**
 * @public
 */
export declare interface LocationBlockProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * The message that this content block belongs to.
     */
    message: MessageSnapshot;
    /**
     * The location block to display.
     */
    block: LocationBlock;
}

/**
 * @public
 */
export declare function MentionSuggestList(props: MentionSuggestListProps): JSX.Element | null;

/**
 * @public
 */
export declare interface MentionSuggestListProps {
}

/**
 * @public
 */
export declare function MenuItem(props: MenuItemProps): JSX.Element;

/**
 * @public
 */
export declare interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * When a callback is passed, it will be called when the menu item is selected.
     */
    onSelect?: () => void;
}

/**
 * An event object dispatched by the {@link ChatboxProps.onMessageAction} event.
 *
 * @public
 */
export declare interface MessageActionEvent {
    /**
     * The name of the action that was triggered.
     */
    action: string;
    /**
     * The parameters of the action that was triggered, if any.
     */
    params: Record<string, string>;
    /**
     * The message that contained the action link or action button.
     */
    message: MessageSnapshot;
    /**
     * The current conversation.
     */
    conversation: ConversationSnapshot;
}

/**
 * @public
 */
export declare interface MessageActionMenuProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * The message that's attached to the action menu.
     */
    message: MessageSnapshot;
    /**
     * The current user's permissions relating to the given message.
     */
    permissions: MessagePermissions;
}

/**
 * @public
 */
export declare function MessageContent(props: MessageContentProps): JSX.Element;

/**
 * @public
 */
export declare interface MessageContentProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * The message whose contents are being displayed
     */
    message: MessageSnapshot;
    /**
     * The current status of the given message.
     */
    messageStatus: MessageStatus;
    /**
     * @hidden
     */
    className?: string;
}

/**
 * @public
 */
export declare interface MessageDividerProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * If true, this divider separates unread messages from read ones.
     */
    isReadMarker: boolean;
    /**
     * If true, this divider separates messages sent on two different dates.
     */
    isDayMarker: boolean;
    /**
     * The date timestamp when {@link MessageDividerProps.isDayMarker} is `true`. Holds the number of
     * milliseconds passed since the Unix Epoch.
     */
    timestamp?: number;
}

/**
 * @public
 */
export declare interface MessageFieldProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * The message that's currently being replied to, if any.
     */
    referencedMessage: MessageSnapshot | undefined;
    /**
     * The current user's permissions.
     */
    permissions: UserPermissions;
    /**
     * An object holding the state of the message field.
     */
    editor: EditorController;
    /**
     * Controls and holds state related to voice recording. Undefined when nothing
     * is being recorded. Use editor.recordVoiceMessage() to begin recording a
     * message.
     */
    voiceRecorder?: VoiceRecorderController;
    /**
     * When a message is being edited its ID will be stored here.
     */
    editMessageId: string | undefined;
}

/**
 * @public
 */
export declare interface MessageListFooterProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
}

/**
 * @public
 */
export declare interface MessageListHeaderProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
}

/**
 * A set of permissions the current user has for a given message.
 *
 * @remarks
 * The values of these permissions come from the user's {@link https://talkjs.com/docs/Concepts/Roles/ | role}.
 *
 * @public
 */
export declare interface MessagePermissions extends UserPermissions {
    /**
     * True if the user has the ability to delete the given message.
     */
    canDeleteMessage: boolean;
    /**
     * True if the user has the ability to reply to the given message.
     */
    canReplyToMessage: boolean;
    /**
     * True if the user has the ability to edit the given message.
     */
    canEditMessage: boolean;
    /**
     * True if the user has the ability to add an {@link https://talkjs.com/docs/Features/Messages/Emojis/#emoji-reactions | emoji reaction} to the given message.
     */
    canAddReaction: boolean;
}

/**
 * @public
 */
export declare interface MessageProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * The message that's being displayed.
     */
    message: MessageSnapshot;
    /**
     * The current status of the message.
     */
    messageStatus: MessageStatus;
    /**
     * The current user's permissions relating to the given message.
     */
    permissions: MessagePermissions;
}

export { MessageSearch }

export { MessageSearchState }

export { MessageSnapshot }

/**
 * The current status of the message.
 *
 * @remarks
 * This type can have one of these values:
 *
 * - `"sending"` - Message is still being sent to the server. a loading spinner is typically shown in chat UIs.
 *
 * - `"sent"` - Message has arrived on the server. Typically represented using a single checkmark in chat UIs.
 *
 * - `"everyoneRead"` - Everyone in the conversation has read this message. Typically represented using two checkmarks in chat UIs.
 *
 * - `"virtual"` - a virtual message made with the <VirtualMessage> system component
 * @public
 */
export declare type MessageStatus = "sending" | "sent" | "everyoneRead" | "virtual";

/**
 * Sent by {@link ChatboxProps.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
 * {@link ChatboxProps.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
 */
export 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;
}

/**
 * @public
 */
export declare interface NoConversationSelectedProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
}

export { ParticipantSnapshot }

/**
 * PopoverButton component that renders a popover triggered by a button.
 *
 * Usage:
 * ```tsx
 * <PopoverButton
 *   popoverComponent={YourMenuComponent}
 *   popoverProps={{ prop1: value1, prop2: value2 }}
 *   aria-label="..."
 * >
 *   <Icon type="horizontalDots" />
 * </MenuButton>
 * ```
 * All props except for menuComponent and popoverProps are passed to the button element.
 *
 * the popoverComponent will also receive a closePopover prop. It's a function you can call to close the popover.
 *
 * @public
 */
export declare function PopoverButton<T extends object>(props: PopoverButtonProps<T>): JSX.Element;

/**
 * @public
 */
export declare interface PopoverButtonProps<T extends object> extends React.HTMLAttributes<HTMLButtonElement> {
    /**
     * Whether to display a menu or a popover when the button is clicked.
     *
     * @remarks
     * Default value is `"popover"`.
     */
    type?: "menu" | "popover";
    /**
     * The popover component to render in response to the button click.
     */
    popoverComponent: React.ComponentType<T>;
    /**
     * Props passed to the popover component.
     */
    popoverProps: T;
    /**
     * Children nodes rendered inside the button.
     */
    children: React.ReactNode;
    /**
     * The element to focus when the popover is opened. Can be an element or a selector. Ignored if type is "menu".
     */
    initialFocus?: string | HTMLElement;
    /**
     * Whether to render the popover menu outside the parent element (useful if
     * the menu won't fit inside its container otherwise)
     */
    portal?: boolean;
}

/**
 * @public
 */
export declare function ReactionPicker({ messageId, colorScheme, }: ReactionPickerProps): JSX.Element;

/**
 * @public
 */
export declare interface ReactionPickerProps {
    /**
     * The ID of the message that's being reacted to.
     */
    messageId: string;
    /**
     * Display the emoji reaction picker in light mode or dark mode.
     */
    colorScheme: "light" | "dark";
}

/**
 * @public
 */
export declare interface RecordingPreviewProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * Controls and holds state related to voice recording.
     */
    voiceRecorder: VoiceRecorderController;
}

/**
 * @public
 */
export declare interface ReferencedMessageProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * The message that's being referenced.
     */
    referencedMessage: ReferencedMessageSnapshot;
}

export { ReferencedMessageSnapshot }

/**
 * @public
 */
export declare interface ReplyBarProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * The message that's being replied to.
     */
    referencedMessage: MessageSnapshot;
}

export declare function SearchInput(props: SearchInputProps): JSX.Element;

export declare interface SearchInputProps extends React.HTMLAttributes<HTMLInputElement> {
}

export { SearchMessageSnapshot }

/**
 * An event object dispatched by the
 * {@link ConversationListProps.onSelectConversation} event.
 *
 * @public
 */
export declare interface SelectConversationEvent {
    currentUser: UserSnapshot;
    /**
     * The newly-selected conversation, or `null` if a conversation was
     * de-selected.
     */
    conversation: ConversationSnapshot | null;
    /**
     * The message that was scrolled into view within the conversation
     */
    focusedMessage?: MessageSnapshot;
}

/**
 * An event object dispatched by the {@link ChatboxProps.onSendMessage} event.
 *
 * @public
 */
export declare interface SendMessageEvent {
    currentUser: UserSnapshot;
    /**
     * The message that was just sent.
     */
    message: MessageSnapshot;
    /**
     * The conversation the message was sent in.
     */
    conversation: ConversationSnapshot;
}

export { TalkSession }

/**
 * Displays rich text
 *
 * @public
 */
declare function Text_2({ block, nonInteractive, message, className, }: TextProps): React.ReactElement;
export { Text_2 as Text }

export { TextBlock }

/**
 * @public
 */
export declare interface TextBlockProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * The message that this content block belongs to.
     */
    message: MessageSnapshot;
    /**
     * The text block to display.
     */
    block: TextBlock;
}

/**
 * @public
 */
export declare interface TextProps {
    /**
     * The block of formatted text to display.
     */
    block: TextBlock;
    /**
     * If true, links and action buttons/links won't be rendered.
     *
     * @remarks
     * The default is `false`
     */
    nonInteractive?: boolean;
    /**
     * @hidden
     */
    className?: string;
    /**
     * The message that this text block belongs to.
     */
    message: MessageSnapshot | ReferencedMessageSnapshot;
}

/**
 * A theme can be used to customize the appearance & behavior of your TalkJS
 * Chatbox and/or ConversationList.
 *
 * @remarks
 * The implementation of TalkJS's default theme is open-source and
 * {@link https://github.com/talkjs/theme-default | available on Github. }
 *
 * @public
 */
export declare interface Theme {
    Avatar: React.ComponentType<AvatarProps>;
    ConversationImage: React.ComponentType<ConversationImageProps>;
    GroupChatImage: React.ComponentType<GroupChatImageProps>;
    ReferencedMessage: React.ComponentType<ReferencedMessageProps>;
    ReplyBar: React.ComponentType<ReplyBarProps>;
    TimeAgo: React.ComponentType<TimeAgoProps>;
    MessageActionMenu: React.ComponentType<MessageActionMenuProps>;
    CompactMessageContent: React.ComponentType<CompactMessageContentProps>;
    ChatSearchBox: React.ComponentType<ChatSearchBoxProps>;
    ChatHeader: React.ComponentType<ChatHeaderProps>;
    MessageListHeader: React.ComponentType<MessageListHeaderProps>;
    Message: React.ComponentType<MessageProps>;
    MessageField: React.ComponentType<MessageFieldProps>;
    Icon: React.ComponentType<IconProps>;
    MessageDivider: React.ComponentType<MessageDividerProps>;
    MessageListFooter: React.ComponentType<MessageListFooterProps>;
    BeforeMessages: React.ComponentType<BeforeMessagesProps>;
    AfterMessages: React.ComponentType<AfterMessagesProps>;
    NoConversationSelected: React.ComponentType<NoConversationSelectedProps>;
    TextBlock: React.ComponentType<TextBlockProps>;
    FileBlock: React.ComponentType<FileBlockProps>;
    LocationBlock: React.ComponentType<LocationBlockProps>;
    ImageBlock: React.ComponentType<ImageBlockProps>;
    AudioBlock: React.ComponentType<AudioBlockProps>;
    VoiceBlock: React.ComponentType<VoiceBlockProps>;
    VideoBlock: React.ComponentType<VideoBlockProps>;
    VoiceRecorder: React.ComponentType<VoiceRecorderProps>;
    RecordingPreview: React.ComponentType<RecordingPreviewProps>;
    ConversationListItem: React.ComponentType<ConversationListItemProps>;
    GlobalSearchResultItem: React.ComponentType<GlobalSearchResultItemProps>;
    GlobalSearchBox: React.ComponentType<GlobalSearchBoxProps>;
    GlobalSearchResultHeader: React.ComponentType<GlobalSearchResultHeaderProps>;
}

/**
 * An object describing a human-readable tim
 *
 * @public
 */
export declare interface TimeAgo {
    /**
     * An amount of milliseconds after which the values in {@link TimeAgo.long} and {@link TimeAgo.short} _may_ have changed.
     * If undefined, the values will not change within any meaningful period.
     */
    changeTimeout?: number | undefined;
    /**
     * A precise time description containing the exact date and time.
     */
    long: string;
    /**
     * A short human-friendly time description, such as "2 minutes ago"
     */
    short: string;
}

/**
 * @public
 */
export declare interface TimeAgoProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * The timestamp of when the message was sent. Holds the number of milliseconds passed since the Unix Epoch.
     */
    timestamp: number;
}

/**
 * Translation object
 *
 * @public
 */
export declare interface Translation extends TranslationStrings {
    locale: string;
}

/**
 * @public
 */
export 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;
    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;
    ARIA_LEAVE_SEARCH_MODE: string;
    ARIA_SEARCH_UP: string;
    ARIA_SEARCH_DOWN: string;
    ARIA_CLOSE_CHAT_POPUP: string;
    ARIA_SEARCH_INSIDE_CONVERSATION: string;
    ARIA_SEARCH: string;
    ARIA_CHAT: string;
    ARIA_SET_PLAYBACK_SPEED: string;
    ARIA_CANCEL_UPLOAD: string;
    ARIA_STOP_RECORDING: string;
    ARIA_CANCEL_RECORDING: string;
    ARIA_INSERT_EMOJI: string;
    ARIA_PLAY_AUDIO: string;
    ARIA_PAUSE_AUDIO: string;
    ARIA_REACTION_COUNT: (numReactions: number, emoji: string) => string;
    ARIA_MORE_ACTIONS: string;
    ARIA_REPLYING_TO: (senderName: string, content: string) => string;
    REPLY_MODE_LEAVE_ARIA_LABEL: string;
    SELECT_CONVERSATION: string;
    SEARCH_RESULTS_CONVERSATIONS: string;
    SEARCH_RESULTS_MESSAGES: string;
    SEARCH_RESULTS_SHOW_MORE: string;
}

export { TypingSnapshot }

/** @public */
export declare type UploadState = "pending" | "done" | "error";

/**
 * Returns a list of participants in the conversation with the given ID.
 * It'll initially return an empty list, and re-render the calling component as data participants are loaded.
 * It'll also cause a re-render when any of those participants change, such as when a user's name or photoUrl changes.
 *
 * @param conversationId - ID of the conversation
 * @param limit - Maximum number of participants to subscribe to. Defaults to 10. The maximum is 100.
 * @returns List of participant snapshots.
 *
 * @public
 */
export declare function useParticipants(conversationId: string, limit?: number): ParticipantSnapshot[];

/**
 * Returns "Yesterday", "Last Monday", "Tuesday, March 31" or "Monday, March 31
 * 2014", depending on which is most appropriate.
 *
 * @param timestamp - The timestamp of the event in milliseconds since Unix epoch.
 * @param t - Relevant translation object to get localized output
 *
 * @public
 */
export declare function userFriendlyDate(timestamp: number, t: Translation): string;

/**
 * A set of permissions for the current user.
 *
 * @remarks
 * The values of these permissions come from the user's {@link https://talkjs.com/docs/Concepts/Roles/ | role}.
 *
 * @public
 */
export declare interface UserPermissions {
    /**
     * True if typing indicators are enabled.
     */
    showTypingIndicator: boolean;
    /**
     * True if {@link https://talkjs.com/docs/Features/Messages/File_Sharing/ | file sharing} is enabled.
     */
    canShareFile: boolean;
    /**
     * True if location sharing is enabled.
     */
    canShareLocation: boolean;
    /**
     * True if {@link https://talkjs.com/docs/Features/Messages/Mentions/ | mentions} are enabled.
     */
    canMention: boolean;
    /**
     * True if the user can use search and other related features.
     */
    canSearch: boolean;
    /**
     * True if
     * {@link https://talkjs.com/docs/Features/Conversations/Status_Indicator/ | online status indicators }
     * are enabled.
     */
    showOnlineStatus: boolean;
    /**
     * True if {@link https://talkjs.com/docs/Features/Messages/Voice_Messages/ | voice messages} are enabled.
     */
    canSendVoiceMessage: boolean;
    /**
     * True if the user has the permission to leave a given conversation.
     */
    canLeaveConversation: boolean;
    /**
     * True if the user has the permission to mark the given conversation as unread.
     */
    canMarkConversationAsUnread: boolean;
}

export { UserSnapshot }

/**
 *
 * This hooks triggers only when a human-readable timestamp needs to be updated.
 * For example, you could use it to display that a messages was updated X
 * minutes or Y hours ago.
 *
 * @public
 */
export declare function useTimeAgo(timestamp: number, t: Translation): TimeAgo;

export { VideoBlock }

/**
 * @public
 */
export declare interface VideoBlockProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * The message that this content block belongs to.
     */
    message: MessageSnapshot;
    /**
     * The video block to display.
     */
    block: VideoBlock;
    /**
     * The URL used to download the file.
     *
     * @remarks
     * This URL is not the same as `block.url`. When the current user sends a file
     * message, the `block.url` will hold a temporary `blob:` URL until that file
     * is uploaded to TalkJS. The user can immediately see their file present in
     * the chat, which makes for a smoother user experience.
     *
     * The `downloadUrl` is the URL of the file once it is uploaded to TalkJS. As
     * such, this property will be `undefined` until the upload is completed,
     * while `block.url` will always be defined and should be used for preview
     * purposes.
     */
    downloadUrl?: string;
}

/**
 * Lets you render a fake message with content and sender of your choice,
 * without having to compose a complete MessageSnapshot object.
 *
 * @remarks
 * This system component renders a fake message that looks and behaves like a
 * real chat message, but is never stored or sent through TalkJS. It is useful
 * for showing contextual prompts such as welcome messages at the top of a
 * conversation.
 *
 * Uses the provided props to compose a complete {@link MessageSnapshot} object,
 * which is then passed to the
 * {@link https://talkjs.com/docs/UI_Components/Theme/Theme_components/Message | Message} component
 * from your theme.
 *
 * Because the message isn't a real, stored message, the message is rendered as
 * if the user has no permissions to perform any actions on this message (such
 * as reply, edit, etc). This means the built-in action menu will not be
 * accessible.
 *
 * @public
 */
export declare function VirtualMessage(props: VirtualMessageProps): JSX.Element | null;

/**
 * @public
 */
export declare interface VirtualMessageProps {
    /**
     * The text of the message. Accepts formatting markup like the chatbox message field does, eg `*this*` would become bold.
     *
     * @remarks
     * Specify either `text` or `content`, but not both.
     */
    text?: string;
    /**
     * The content of the message as a content block.
     *
     * @remarks
     * Lets you precisely control the formatting of the message, see
     * {@link https://talkjs.com/docs/Concepts/Message_Content/#sending-message-content | Message content}.
     * Specify either `text` or `content`, but not both.
     */
    content?: ContentBlock[];
    /**
     * The ID of the sender of this message, or a complete UserSnapshot with the
     * sender's details.
     *
     * @remarks
     * When omitted, the message is rendered as a system message.
     *
     * When passing a UserSnapshot, this object is used in full and the user is
     * not loaded from the database, which means that you can also pass a fake
     * user that does not really exist.
     */
    sender?: string | UserSnapshot;
    /**
     * Override the message's timestamp
     *
     * @remarks
     * Defaults to `-1`, which our preset themes interpret as "do not show a timestamp at all"
     */
    createdAt?: number;
    /**
     * Control the message's delivery status
     *
     * @remarks
     * Defaults to "virtual", which make our preset themes not render status ticks
     * at all. Set it to eg `"sent"` to show a tickmark, or to `"everyoneRead"` to
     * show a double tickmark.
     */
    status?: MessageStatus;
    /**
     * Custom data for the `message` object.
     *
     * @remarks
     * You can read this out in `message.custom` inside the Message theme component.
     */
    custom?: Record<string, string>;
}

export { VoiceBlock }

/**
 * @public
 */
export declare interface VoiceBlockProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * The message that this content block belongs to.
     */
    message: MessageSnapshot;
    /**
     * The voice block to display.
     */
    block: VoiceBlock;
    /**
     * The URL used to download the file.
     *
     * @remarks
     * This URL is not the same as `block.url`. When the current user sends a file
     * message, the `block.url` will hold a temporary `blob:` URL until that file
     * is uploaded to TalkJS. The user can immediately see their file present in
     * the chat, which makes for a smoother user experience.
     *
     * The `downloadUrl` is the URL of the file once it is uploaded to TalkJS. As
     * such, this property will be `undefined` until the upload is completed,
     * while `block.url` will always be defined and should be used for preview
     * purposes.
     */
    downloadUrl?: string;
}

/**
 * Controller for voice recording. Contains methods and fields related to the
 * voice message currently being recorded.
 *
 * @remarks
 * Use {@link EditorController.recordVoiceMessage} to begin recording a voice
 * message.
 *
 * @public
 */
export declare interface VoiceRecorderController {
    /** Whether `"recording"` or `"previewing"`.
     *
     * @remarks When not recording at all, the voiceController field is undefined.
     * */
    state: VoiceRecorderState;
    /**
     * The amount of seconds since the user began recording.
     */
    duration: number;
    /** Defined after stop() has been called. Pass to the `src` prop of
     * {@link AudioPlayer} to preview the recording. */
    recordingUrl?: string;
    /**
     * TalkJS will immediately upload the voice message while it's being
     * previewed. This field lets you know how that's coming along.
     */
    uploadState: UploadState;
    /**
     * Stops the voice recording and changes the state to "previewing".
     * This also starts the process of uploading the audio file.
     */
    stop(): void;
    /**
     * Cancels the recording or preview process.
     */
    cancel(): void;
    /**
     * Sends a message containing the just uploaded voice recording.
     */
    send(): void;
}

/**
 * @public
 */
export declare interface VoiceRecorderProps {
    /**
     * A collection of objects which are passed to all Chatbox theme components.
     */
    common: CommonChatboxProps;
    /**
     * Controls and holds state related to voice recording.
     */
    voiceRecorder: VoiceRecorderController;
}

/** @public */
export declare type VoiceRecorderState = "recording" | "previewing";

/**
 * Renders an audio waveform visualization for voice recording.
 *
 * @remarks
 * Use this component inside your {@link VoiceRecorder} theme component to
 * display the audio waveform. The waveform automatically visualizes the audio
 * being recorded
 *
 * @public
 */
export declare function Waveform({ className, voiceRecorder }: WaveformProps): JSX.Element | null;

/**
 * @public
 */
export declare interface WaveformProps {
    /**
     * Additional CSS class name to apply to the waveform container.
     */
    className?: string;
    /**
     * The active voice recorder controller, as passed to MessageField props.
     */
    voiceRecorder: VoiceRecorderController;
}

export { }