@talkjs/web-components 0.0.29 → 0.0.31

package/default.d.ts

@@ -2,13 +2,14 @@ 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 type * as React from 'react';
+import * as React from 'react';
 import { ReferencedMessageSnapshot } from '@talkjs/core';
 import { SendMessageParams } from '@talkjs/core';
 import { SendTextMessageParams } from '@talkjs/core';
@@ -24,7 +25,7 @@ import { VoiceBlock } from '@talkjs/core';
  *
  * @public
  */
-declare interface App {
+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.}
@@ -50,10 +51,12 @@ declare interface App {
     custom: Record<string, string>;
 }
 
+export { AudioBlock }
+
 /**
  * @public
  */
-declare interface AudioBlockProps {
+export declare interface AudioBlockProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -83,10 +86,46 @@ declare interface AudioBlockProps {
     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
  */
-declare interface AvatarProps {
+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.
@@ -159,6 +198,90 @@ export declare interface BrowserPermissionRequest {
     showPrompt(): Promise<"granted" | "denied">;
 }
 
+/**
+ * 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;
+}
+
 /**
  * The
  * {@link https://talkjs.com/docs/Features/Chat_UIs/#chatbox | TalkJS Chatbox UI. }
@@ -166,10 +289,7 @@ export declare interface BrowserPermissionRequest {
  *
  * @public
  */
-export declare const ChatboxHTMLElement: new () => ChatboxHTMLElement_2;
-
-declare interface ChatboxHTMLElement_2 extends HTMLElement, NullishChatboxProps, ChatboxRef {
-}
+export declare const ChatboxElement: new () => TalkJS.ChatboxElement;
 
 /**
  * @public
@@ -235,7 +355,7 @@ export declare interface ChatboxProps {
      *
      * @remarks
      * See
-     * {@link https://talkjs.com/docs/SDKs/React/Customization/#custom-theme-components | Custom theme components }
+     * {@link https://talkjs.com/docs/UI_Components/React/Customization/#custom-theme-components | Custom theme components }
      * for more info.
      */
     theme?: Partial<Theme>;
@@ -306,80 +426,36 @@ export declare interface ChatboxProps {
      * @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;
     /**
      * Arbitrary custom data passed down to the theme.
      *
      * @remarks
      * Whatever data you pass here will be made available for use in theme
-     * components through {@linkcode CommonChatboxProps.themeCustom} for Chatbox
+     * components through {@link CommonChatboxProps.themeCustom} for Chatbox
      * theme components and through
-     * {@linkcode CommonConversationListProps.themeCustom} for ConversationList
+     * {@link CommonConversationListProps.themeCustom} for ConversationList
      * theme components.
      */
     themeCustom?: any;
 }
 
 /**
- * A collection of actions available on the Chatbox UI.
- *
  * @public
  */
-export declare interface ChatboxRef {
-    /**
-     * 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;
-}
-
-/**
- * @public
- */
-declare interface ChatHeaderProps {
+export declare interface ChatHeaderProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -401,7 +477,7 @@ declare interface ChatHeaderProps {
  *
  * @public
  */
-declare interface CommonChatboxProps {
+export declare interface CommonChatboxProps {
     /**
      * Holds information about your TalkJS app.
      */
@@ -416,9 +492,9 @@ declare interface CommonChatboxProps {
      */
     t: Translation;
     /**
-     * The chatbox instance itself.
+     * Public interface of the chatbox instance.
      */
-    chatbox: ChatboxRef;
+    chatbox: ChatboxController;
     /**
      * Arbitrary custom data passed down to the theme.
      *
@@ -459,7 +535,7 @@ declare interface CommonChatboxProps {
  *
  * @public
  */
-declare interface CommonConversationListProps {
+export declare interface CommonConversationListProps {
     /**
      * Holds information about your TalkJS app.
      */
@@ -490,9 +566,9 @@ declare interface CommonConversationListProps {
      */
     theme: Theme;
     /**
-     * The conversation list instance itself.
+     * Public interface of the conversation list instance.
      */
-    conversationList: ConversationListRef;
+    conversationList: ConversationListController;
     /**
      * The underlying TalkJS session object that handles sending and receiving chat data.
      */
@@ -502,7 +578,7 @@ declare interface CommonConversationListProps {
 /**
  * @public
  */
-declare interface CompactMessageContentProps {
+export declare interface CompactMessageContentProps {
     /**
      * A collection of objects which are passed to all Chatbox/ConversationList
      * theme components.
@@ -521,7 +597,7 @@ declare interface CompactMessageContentProps {
 /**
  * @public
  */
-declare interface ConversationImageProps {
+export declare interface ConversationImageProps {
     /**
      * A collection of objects which are passed to all Chatbox/ConversationList
      * theme components.
@@ -541,6 +617,32 @@ declare interface ConversationImageProps {
     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
+     * {@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.
+     */
+    selectConversation(conversationId: string): void;
+}
+
 /**
  * The
  * {@link https://talkjs.com/docs/Features/Chat_UIs/#conversation-list | Conversation List UI. }
@@ -550,12 +652,9 @@ declare interface ConversationImageProps {
  *
  * @public
  */
-export declare const ConversationListHTMLElement: new () => ConversationListHTMLElement_2;
+export declare const ConversationListElement: new () => TalkJS.ConversationListElement;
 
-declare interface ConversationListHTMLElement_2 extends HTMLElement, NullishConversationListProps, ConversationListRef {
-}
-
-declare interface ConversationListItemProps {
+export declare interface ConversationListItemProps {
     /**
      * A collection of objects which are passed to all ConversationList theme components.
      */
@@ -609,7 +708,7 @@ export declare interface ConversationListProps {
      * update.
      *
      * Note that updating the selected conversation through this prop **will not**
-     * trigger the {@linkcode onSelectConversation} callback.
+     * trigger the {@link onSelectConversation} callback.
      */
     selectedConversationId?: string;
     /**
@@ -642,7 +741,7 @@ export declare interface ConversationListProps {
      *
      * @remarks
      * See
-     * {@link https://talkjs.com/docs/SDKs/React/Customization/#custom-theme-components | Custom theme components }
+     * {@link https://talkjs.com/docs/UI_Components/React/Customization/#custom-theme-components | Custom theme components }
      * for more info.
      */
     theme?: Partial<Theme>;
@@ -653,11 +752,11 @@ export declare interface ConversationListProps {
      *
      * @remarks
      * Note that updating the selected conversation through the
-     * {@linkcode selectedConversationId} prop **will not** trigger this callback.
+     * {@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/SDKs/React/ConversationList/#respond-to-a-select-conversation-event | Respond to a select conversation event.}
+     * {@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;
     /**
@@ -665,36 +764,20 @@ export declare interface ConversationListProps {
      *
      * @remarks
      * Whatever data you pass here will be made available for use in theme
-     * components through {@linkcode CommonChatboxProps.themeCustom} for Chatbox
+     * components through {@link CommonChatboxProps.themeCustom} for Chatbox
      * theme components and through
-     * {@linkcode CommonConversationListProps.themeCustom} for ConversationList
+     * {@link CommonConversationListProps.themeCustom} for ConversationList
      * theme components.
      */
     themeCustom?: any;
 }
 
-/**
- * A collection of actions available on the ConversationList UI.
- *
- * @public
- */
-export declare interface ConversationListRef {
-    /**
-     * Programatically select a conversation.
-     *
-     * @param conversationId
-     *
-     * @remarks
-     * Note that this **will not** trigger the
-     * {@linkcode ConversationListProps.onSelectConversation} callback.
-     */
-    selectConversation(conversationId: string): void;
-}
+export { ConversationSnapshot }
 
 /**
  * @public
  */
-declare interface Coordinates {
+export declare interface Coordinates {
     latitude: number;
     longitude: number;
 }
@@ -731,7 +814,7 @@ export declare interface DeleteMessageEvent {
  *
  * @public
  */
-declare interface DeviceFeatures {
+export declare interface DeviceFeatures {
     /**
      * True if the browser supports IndexedDB, which the emoji picker depends on.
      */
@@ -742,10 +825,86 @@ declare interface DeviceFeatures {
     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
  */
-declare interface FileBlockProps {
+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.
      */
@@ -776,9 +935,53 @@ declare interface FileBlockProps {
 }
 
 /**
+ * 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
  */
-declare interface GroupChatImageProps {
+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.
@@ -795,9 +998,24 @@ declare interface GroupChatImageProps {
 }
 
 /**
+ * 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
  */
-declare interface IconProps {
+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.
@@ -817,22 +1035,12 @@ declare interface IconProps {
     className?: string;
 }
 
-declare interface IEditorController {
-    isTyping: boolean;
-    atTextLimit: boolean;
-    isEmpty: boolean;
-    characterCount: number;
-    showEmojiPicker: boolean;
-    send(): void;
-    shareLocation(): void;
-    attachFile(): void;
-    toggleEmojiPicker(): void;
-}
+export { ImageBlock }
 
 /**
  * @public
  */
-declare interface ImageBlockProps {
+export declare interface ImageBlockProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -862,10 +1070,12 @@ declare interface ImageBlockProps {
     downloadUrl?: string;
 }
 
+export { LocationBlock }
+
 /**
  * @public
  */
-declare interface LocationBlockProps {
+export declare interface LocationBlockProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -880,10 +1090,58 @@ declare interface LocationBlockProps {
     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;
+}
+
+/**
+ * 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
  */
-declare interface MessageActionMenuProps {
+export declare interface MessageActionMenuProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -898,10 +1156,34 @@ declare interface MessageActionMenuProps {
     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
  */
-declare interface MessageDividerProps {
+export declare interface MessageDividerProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -924,7 +1206,7 @@ declare interface MessageDividerProps {
 /**
  * @public
  */
-declare interface MessageFieldProps {
+export declare interface MessageFieldProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -940,7 +1222,7 @@ declare interface MessageFieldProps {
     /**
      * An object holding the state of the message field.
      */
-    editor: IEditorController;
+    editor: EditorController;
     /**
      * When a message is being edited its ID will be stored here.
      */
@@ -950,7 +1232,7 @@ declare interface MessageFieldProps {
 /**
  * @public
  */
-declare interface MessageListFooterProps {
+export declare interface MessageListFooterProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -965,7 +1247,7 @@ declare interface MessageListFooterProps {
  *
  * @public
  */
-declare interface MessagePermissions extends UserPermissions {
+export declare interface MessagePermissions extends UserPermissions {
     /**
      * True if the user has the ability to delete the given message.
      */
@@ -987,7 +1269,7 @@ declare interface MessagePermissions extends UserPermissions {
 /**
  * @public
  */
-declare interface MessageProps {
+export declare interface MessageProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -1006,6 +1288,8 @@ declare interface MessageProps {
     permissions: MessagePermissions;
 }
 
+export { MessageSnapshot }
+
 /**
  * The current status of the message.
  *
@@ -1020,7 +1304,7 @@ declare interface MessageProps {
  *
  * @public
  */
-declare type MessageStatus = "sending" | "sent" | "everyoneRead";
+export declare type MessageStatus = "sending" | "sent" | "everyoneRead";
 
 /**
  * Sent by {@link ChatboxProps.onMissingBrowserPermission} when the user
@@ -1054,18 +1338,75 @@ export declare interface MissingBrowserPermissionEvent {
     type: BrowserPermission;
 }
 
-declare type NullishChatboxProps = {
-    [K in keyof Omit<ChatboxProps, "className" | "style">]: ChatboxProps[K] | null | undefined;
-};
+export { ParticipantSnapshot }
 
-declare type NullishConversationListProps = {
-    [K in keyof Omit<ConversationListProps, "className" | "style">]: ConversationListProps[K] | null | undefined;
-};
+/**
+ * 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
  */
-declare interface ReferencedMessageProps {
+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;
+}
+
+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.
      */
@@ -1076,10 +1417,12 @@ declare interface ReferencedMessageProps {
     referencedMessage: ReferencedMessageSnapshot;
 }
 
+export { ReferencedMessageSnapshot }
+
 /**
  * @public
  */
-declare interface ReplyBarProps {
+export declare interface ReplyBarProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -1119,10 +1462,22 @@ export declare interface SendMessageEvent {
     conversation: ConversationSnapshot;
 }
 
+export { TalkSession }
+
 /**
+ * Displays rich text
+ *
  * @public
  */
-declare interface TextBlockProps {
+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.
      */
@@ -1137,6 +1492,31 @@ declare interface TextBlockProps {
     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.
@@ -1172,10 +1552,31 @@ export declare interface Theme {
     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
  */
-declare interface TimeAgoProps {
+export declare interface TimeAgoProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -1191,7 +1592,7 @@ declare interface TimeAgoProps {
  *
  * @public
  */
-declare interface Translation extends TranslationStrings {
+export declare interface Translation extends TranslationStrings {
     locale: string;
 }
 
@@ -1255,6 +1656,19 @@ declare interface TranslationStrings {
     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.
  *
@@ -1263,7 +1677,7 @@ declare interface TranslationStrings {
  *
  * @public
  */
-declare interface UserPermissions {
+export declare interface UserPermissions {
     /**
      * True if typing indicators are enabled.
      */
@@ -1300,10 +1714,24 @@ declare interface UserPermissions {
     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
  */
-declare interface VideoBlockProps {
+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.
      */
@@ -1333,10 +1761,12 @@ declare interface VideoBlockProps {
     downloadUrl?: string;
 }
 
+export { VoiceBlock }
+
 /**
  * @public
  */
-declare interface VoiceBlockProps {
+export declare interface VoiceBlockProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -1370,9 +1800,21 @@ export { }
 
 
 declare global {
+    namespace TalkJS {
+        type NullishChatboxProps = {
+            [K in keyof Omit<ChatboxProps, "className" | "style">]: ChatboxProps[K] | null | undefined;
+        };
+        type NullishConversationListProps = {
+            [K in keyof Omit<ConversationListProps, "className" | "style">]: ConversationListProps[K] | null | undefined;
+        };
+        interface ChatboxElement extends HTMLElement, NullishChatboxProps, ChatboxController {
+        }
+        interface ConversationListElement extends HTMLElement, NullishConversationListProps, ConversationListController {
+        }
+    }
     interface HTMLElementTagNameMap {
-        "t-chatbox": ChatboxHTMLElement;
-        "t-conversation-list": ConversationListHTMLElement;
+        "t-chatbox": TalkJS.ChatboxElement;
+        "t-conversation-list": TalkJS.ConversationListElement;
     }
 }