@talkjs/react-components 0.0.28 → 0.0.30

package/theming.d.ts

@@ -1,16 +1,15 @@
 import { AudioBlock } 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 { LocationBlock } from '@talkjs/core';
 import { MessageSnapshot } from '@talkjs/core';
 import { ParticipantSnapshot } from '@talkjs/core';
-import type * as React_2 from 'react';
-import { ReactElement } from 'react';
+import * as React from 'react';
 import { ReferencedMessageSnapshot } from '@talkjs/core';
 import { SendMessageParams } from '@talkjs/core';
 import { SendTextMessageParams } from '@talkjs/core';
@@ -21,19 +20,69 @@ import { UserSnapshot } from '@talkjs/core';
 import { VideoBlock } from '@talkjs/core';
 import { VoiceBlock } from '@talkjs/core';
 
-declare type AppId = Brand<string, "App ID">;
-
-declare interface AppMetadata {
-    id: AppId;
+/**
+ * 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 }
 
-export declare interface AudioBlockProps extends ContentBlockProps {
+/**
+ * @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;
 }
 
@@ -51,147 +100,364 @@ export declare interface AudioBlockProps extends ContentBlockProps {
  */
 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;
 }
 
 /**
- * Brands a base type `T`.
- *
- * @example
- * ```ts
- * type UserId = Brand<string, "UserId">;
- * type MessageId = Brand<string, "MessageId">;
+ * A collection of actions available on the Chatbox UI.
  *
- * const a: UserId = "abc" as UserId;    // works
- * const b: UserId = "abc";              // error
- * const c: UserId = "abc" as MessageId; // error
- * ```
+ * @public
  */
-declare type Brand<T, B extends string> = T & Branding<B>;
-
-declare interface Branding<B extends string> {
-    __tag: Record<B, true>;
-}
-
-export declare interface Chatbox {
+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>;
-    sendFileMessage(message: {
+    /**
+     * 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;
-    getMessageFieldText: () => string;
-    setMessageFieldText: (text: string) => 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 {
-    app: AppMetadata;
+    /**
+     * 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;
-    chatbox: Chatbox;
+    /**
+     * 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 {
-    app: AppMetadata;
+    /**
+     * 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;
-    conversationList: ConversationList;
+    /**
+     * 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;
 }
 
-export declare interface ContentBlockProps {
-    common: CommonChatboxProps;
-    message: MessageSnapshot;
-}
-
+/**
+ * @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[];
 }
 
-export declare interface ConversationList {
+/**
+ * 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;
 }
 
-export declare interface Coordinates {
-    latitude: number;
-    longitude: number;
-}
-
-export declare function daysBetween(from: number, to: number): number;
-
-export declare interface DeviceFeatures {
-    /**
-     * True if the browser supports IndexedDB, which the emoji picker depends on.
-     */
-    supportsEmojiPicker: boolean;
-    /**
-     * True if the user agents reports this device as mobile (incl tablets).
-     */
-    isMobile: boolean;
-}
-
+/**
+ * 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 this device as mobile (incl tablets).
+     * True if the user agents reports the current device as a mobile/tablet.
      */
     isMobile: boolean;
 }
@@ -210,17 +476,50 @@ export declare interface EditorController {
     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;
-    className?: 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";
 }
 
@@ -231,54 +530,200 @@ export declare interface EmojiPickerProps {
  */
 export declare function EmojiSuggestBar(props: EmojiSuggestBarProps): JSX.Element;
 
+/**
+ * @public
+ */
 export declare interface EmojiSuggestBarProps {
 }
 
 export { FileBlock }
 
-export declare interface FileBlockProps extends ContentBlockProps {
-    block: 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 declare function getFilename(block: FileBlock): string | undefined;
+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[];
 }
 
-export declare function html(strings: TemplateStringsArray, ...args: any[]): ReactElement;
+/**
+ * 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 }
 
-export declare interface ImageBlockProps extends ContentBlockProps {
+/**
+ * @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 }
 
-export declare interface LocationBlockProps extends ContentBlockProps {
+/**
+ * @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;
 }
 
@@ -288,73 +733,190 @@ export declare interface MentionSuggestList {
     keydown(key: string): boolean;
 }
 
+/**
+ * @public
+ */
 export declare interface MentionSuggestListProps {
 }
 
 export declare function MenuItem(props: MenuItemProps): JSX.Element;
 
-export declare type MenuItemProps = React.HTMLAttributes<HTMLDivElement> & {
+/**
+ * @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;
-    disabled?: boolean;
-    textValue?: string;
-};
+}
 
+/**
+ * @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;
 }
 
-export declare interface MessagePermissions extends UserPermissions {
-    canDeleteMessage: boolean;
-    canReplyToMessage: boolean;
-    canEditMessage: 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 }
@@ -377,92 +939,203 @@ export { ParticipantSnapshot }
  */
 export declare function PopoverButton<T extends object>(props: PopoverButtonProps<T>): JSX.Element;
 
-export declare type PopoverButtonProps<T extends object> = {
+/**
+ * @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;
-    type?: "menu" | "popover";
-} & React.HTMLAttributes<HTMLButtonElement>;
+}
 
-export declare function ReactionPicker(props: ReactionPickerProps): JSX.Element;
+export declare function ReactionPicker({ messageId, colorScheme, }: ReactionPickerProps): JSX.Element;
 
-export declare type ReactionPickerProps = default_2.HTMLAttributes<HTMLDivElement> & {
+/**
+ * @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, className, }: TextProps): ReactElement;
+declare function Text_2({ block, nonInteractive, message, className, }: TextProps): React.ReactElement;
 export { Text_2 as Text }
 
 export { TextBlock }
 
-export declare interface TextBlockProps extends ContentBlockProps {
+/**
+ * @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;
-    className?: string;
+    /**
+     * 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_2.ComponentType<AvatarProps>;
-    ConversationImage: React_2.ComponentType<ConversationImageProps>;
-    GroupChatImage: React_2.ComponentType<GroupChatImageProps>;
-    ReferencedMessage: React_2.ComponentType<ReferencedMessageProps>;
-    ReplyBar: React_2.ComponentType<ReplyBarProps>;
-    TimeAgo: React_2.ComponentType<TimeAgoProps>;
-    MessageActionMenu: React_2.ComponentType<MessageActionMenuProps>;
-    CompactMessageContent: React_2.ComponentType<CompactMessageContentProps>;
-    ChatHeader: React_2.ComponentType<ChatHeaderProps>;
-    Message: React_2.ComponentType<MessageProps>;
-    MessageField: React_2.ComponentType<MessageFieldProps>;
-    Icon: React_2.ComponentType<IconProps>;
-    MessageDivider: React_2.ComponentType<MessageDividerProps>;
-    MessageListFooter: React_2.ComponentType<MessageListFooterProps>;
-    TextBlock: React_2.ComponentType<TextBlockProps>;
-    FileBlock: React_2.ComponentType<FileBlockProps>;
-    LocationBlock: React_2.ComponentType<LocationBlockProps>;
-    ImageBlock: React_2.ComponentType<ImageBlockProps>;
-    AudioBlock: React_2.ComponentType<AudioBlockProps>;
-    VoiceBlock: React_2.ComponentType<VoiceBlockProps>;
-    VideoBlock: React_2.ComponentType<VideoBlockProps>;
-    ConversationListItem: React_2.ComponentType<ConversationListItemProps>;
+    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 `long` and `short` _may_ have changed.
+     * 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;
 }
 
-export declare type Translation = TranslationData & TranslationStrings;
-
-declare interface TranslationData {
+/**
+ * Translation object
+ *
+ * @public
+ */
+export declare interface Translation extends TranslationStrings {
     locale: string;
 }
 
@@ -526,38 +1199,61 @@ declare interface TranslationStrings {
     CONTACT_INFORMATION_HIDDEN: string;
 }
 
-/**
- * Formats a time in the past in a twitter-like fashion.
- */
-export declare function twitterAgo(now: number, ts: number, t: Translation): TimeAgo;
-
 export { TypingSnapshot }
 
 /**
- * returns "Yesterday", "Last Monday", "Tuesday, March 31" or "Monday, March 31 2014", depending on which is most appropriate.
- * @param ts number - unix timestamp (milliseconds)
+ * 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(ts: number, t: Translation): string;
-
-export declare interface UserPermissions {
-    showTypingIndicator: boolean;
-    canShareFile: boolean;
-    canShareLocation: boolean;
-    canMention: boolean;
-    showOnlineStatus: boolean;
-    canSendVoiceMessage: boolean;
-    canLeaveConversation: boolean;
-    canMarkConversationAsUnread: boolean;
-}
+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;
 }
 
@@ -575,51 +1271,81 @@ export declare function useTimeAgo(timestamp: number, t: Translation): TimeAgo;
 
 export { VideoBlock }
 
-export declare interface VideoBlockProps extends ContentBlockProps {
+/**
+ * @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 }
 
-export declare interface VoiceBlockProps extends ContentBlockProps {
+/**
+ * @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 {
-    namespace JSX {
-        interface IntrinsicElements {
-            "emoji-picker": {
-                class?: string;
-                ref: React.Ref<HTMLElement>;
-            };
-        }
-    }
-    interface HTMLElementEventMap {
-        "emoji-click": EmojiClickEvent;
-        "skin-tone-change": SkinToneChangeEvent;
-    }
-}
-
-
 declare global {
     interface HTMLElementTagNameMap {
-        "t-chatbox": ChatboxHTMLElement;
-        "t-conversation-list": ConversationListHTMLElement;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            "t-chatbox": typeof UnthemedChatbox;
-            "t-conversation-list": typeof UnthemedConversationList;
-        }
+        "t-chatbox": ChatboxElement;
+        "t-conversation-list": ConversationListElement;
     }
 }