@talkjs/react-components 0.0.30 → 0.0.31

package/theming.d.ts

@@ -1,1351 +0,0 @@
-import { AudioBlock } from '@talkjs/core';
-import { ConversationSnapshot } from '@talkjs/core';
-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 { LocationBlock } from '@talkjs/core';
-import { MessageSnapshot } from '@talkjs/core';
-import { ParticipantSnapshot } from '@talkjs/core';
-import * as React from 'react';
-import { ReferencedMessageSnapshot } 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';
-
-/**
- * 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!
- */
-export declare function AudioPlayer({ src, onError, filename, className, }: AudioPlayerProps): JSX.Element;
-
-/**
- * @public
- */
-export declare interface AudioPlayerProps {
-    /**
-     * Source of the audio that's being played.
-     */
-    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;
-}
-
-/**
- * A collection of actions available on the Chatbox UI.
- *
- * @public
- */
-export declare class ChatboxController {
-    #private;
-    /**
-     * Deletes the message with the given ID.
-     *
-     * @param messageId
-     */
-    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.
-     *
-     * @param messageId
-     * @param params
-     */
-    editMessage(messageId: string, params: EditTextMessageParams | EditMessageParams): Promise<void>;
-    /**
-     * Send a text message to the current conversation.
-     *
-     * @param params
-     */
-    sendMessage(params: SendTextMessageParams | SendMessageParams): Promise<void>;
-    /**
-     * Send a file message to the current conversation.
-     *
-     * @param message
-     */
-    sendFileMessage(params: {
-        fileToken: FileToken;
-        custom?: Record<string, string>;
-    }): Promise<void>;
-    /**
-     * Send a location message to the current conversation.
-     *
-     * @param message
-     */
-    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 `"🎉"`.
-     */
-    toggleReaction(messageId: string, emoji: string): Promise<void>;
-    /**
-     * Get the plaintext from the message field
-     *
-     * @returns The text
-     */
-    getMessageFieldText(): string;
-    /**
-     * Set the plaintext in the message field
-     * @param text
-     */
-    setMessageFieldText(text: string): void;
-    /**
-     * Focus the message field
-     */
-    focusMessageField(): void;
-}
-
-/**
- * @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;
-}
-
-/**
- * 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's is currently using.
-     */
-    theme: Theme;
-    /**
-     * The conversation displayed in the chatbox.
-     */
-    conversation: ConversationSnapshot;
-    /**
-     * A list of participants that are part of the conversation that's currently
-     * being shown.
-     */
-    participants: ParticipantSnapshot[];
-    /**
-     * Tells you which participants are currently typing
-     */
-    typing: TypingSnapshot;
-    /**
-     * The underlying TalkJS session object that handles sending and receiving chat data.
-     */
-    session: TalkSession;
-}
-
-/**
- * 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 chatbox's 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[];
-}
-
-/**
- * A collection of actions available on the ConversationList UI.
- *
- * @public
- */
-export declare class ConversationListController {
-    #private;
-    /**
-     * Select a conversation.
-     *
-     * @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
-     * {@linkcode 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 {@linkcode ConversationListProps.selectedConversationId} prop
-     * instead, as that lets you keep your local state in sync with the props
-     * passed to the conversation list.
-     */
-    selectConversation(conversationId: string): void;
-}
-
-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;
-    /**
-     * The list of participants that are part of the given conversation.
-     */
-    participants: ParticipantSnapshot[];
-    /**
-     * If `true`, this conversation is the currently selected one in the
-     * conversation list.
-     */
-    isSelected: boolean;
-}
-
-export { ConversationSnapshot }
-
-/**
- * @public
- */
-export declare interface Coordinates {
-    latitude: number;
-    longitude: number;
-}
-
-/**
- * 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;
-}
-
-export declare function Editor({ placeholder, disabled, className, characterLimit, spellcheck, }: EditorProps): JSX.Element;
-
-export declare interface EditorController {
-    isTyping: boolean;
-    atTextLimit: boolean;
-    isEmpty: boolean;
-    characterCount: number;
-    showEmojiPicker: boolean;
-    send(): void;
-    shareLocation(): void;
-    attachFile(): void;
-    toggleEmojiPicker(): 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;
-}
-
-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";
-}
-
-/**
- * Shows a bar with emoji suggestions when the user types eg `:bla`. Shown if `query` is non-empty.
- *
- * Uses the IndexedDB-backed emoji database from "emoji-picker-element".
- */
-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;
-}
-
-/**
- * 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;
-
-/**
- * @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[];
-}
-
-/**
- * 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;
-}
-
-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;
-}
-
-export declare function MentionSuggestList(props: MentionSuggestListProps): JSX.Element | null;
-
-export declare interface MentionSuggestList {
-    keydown(key: string): boolean;
-}
-
-/**
- * @public
- */
-export declare interface MentionSuggestListProps {
-}
-
-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;
-}
-
-/**
- * @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;
-}
-
-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;
-    /**
-     * 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;
-}
-
-/**
- * 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 { 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.
- *
- * @public
- */
-export declare type MessageStatus = "sending" | "sent" | "everyoneRead";
-
-export { ParticipantSnapshot }
-
-/**
- * PopoverButton component that renders a popover triggered by a button.
- *
- * Usage:
- * <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.
- */
-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;
-}
-
-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 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 { TalkSession }
-
-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>;
-    ChatHeader: React.ComponentType<ChatHeaderProps>;
-    Message: React.ComponentType<MessageProps>;
-    MessageField: React.ComponentType<MessageFieldProps>;
-    Icon: React.ComponentType<IconProps>;
-    MessageDivider: React.ComponentType<MessageDividerProps>;
-    MessageListFooter: React.ComponentType<MessageListFooterProps>;
-    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>;
-    ConversationListItem: React.ComponentType<ConversationListItemProps>;
-}
-
-/**
- * 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;
-}
-
-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;
-}
-
-export { TypingSnapshot }
-
-/**
- * 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
-     * {@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;
-}
-
-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;
-}
-
-export { }
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "t-chatbox": ChatboxElement;
-        "t-conversation-list": ConversationListElement;
-    }
-}
-