@talkjs/web-components 0.1.4 → 0.1.6

package/default.d.ts

@@ -1,4 +1,5 @@
 import { AudioBlock } from '@talkjs/core';
+import { ContentBlock } from '@talkjs/core';
 import { ConversationSnapshot } from '@talkjs/core';
 import { EditMessageParams } from '@talkjs/core';
 import { EditTextMessageParams } from '@talkjs/core';
@@ -109,6 +110,8 @@ export declare interface AudioBlockProps {
  * Also, it has some additional settings that let us turn the sound wave display
  * into a series of nice rounded bars. Less signal, but also less distraction. I
  * kinda like it!
+ *
+ * @public
  */
 export declare function AudioPlayer({ src, onError, filename, className, }: AudioPlayerProps): JSX_2.Element;
 
@@ -117,13 +120,13 @@ export declare function AudioPlayer({ src, onError, filename, className, }: Audi
  */
 export declare interface AudioPlayerProps {
     /**
-     * Source of the audio that's being played.
+     * Source URL of the audio file to play.
      */
     src: string;
     /**
      * Name of the audio file that's being played.
      */
-    filename: string;
+    filename?: string;
     /**
      * Callback that runs when an error is encountered during playback.
      */
@@ -153,6 +156,218 @@ export declare interface AvatarProps {
     photoUrl: string;
 }
 
+/**
+ * An event object dispatched by the
+ * {@link ChatboxProps.onBackButtonClick} event.
+ *
+ * @public
+ */
+export declare interface BackButtonClickEvent {
+    currentUser: UserSnapshot;
+}
+
+/**
+ * @public
+ */
+export declare interface BaseChatboxProps {
+    /**
+     * @hidden
+     */
+    className?: string;
+    /**
+     * @hidden
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Your app's unique TalkJS ID. You can find it on the Settings page of the
+     * {@link https://talkjs.com/dashboard | TalkJS dashboard.}
+     */
+    appId: string;
+    /**
+     * The ID of the current user.
+     *
+     * @remarks
+     * If the given user ID doesn't exist, a "Something went wrong" message will
+     * be displayed.
+     */
+    userId: string;
+    /**
+     * Lets you override theme components with your own implementations to
+     * customize them.
+     *
+     * @remarks
+     * See
+     * {@link https://talkjs.com/docs/UI_Components/React/Customization/#custom-theme-components | Custom theme components }
+     * for more info.
+     */
+    theme?: Partial<Theme>;
+    /**
+     * When true, pressing Enter will send a message.
+     *
+     * @remarks
+     * Defaults to `true`.
+     */
+    enterSendsMessage?: boolean;
+    /**
+     * Sets whether the chat header is visible.
+     *
+     * @remarks
+     * Defaults to `true`.
+     */
+    chatHeaderVisible?: boolean;
+    /**
+     * Sets whether the message input field is visible.
+     *
+     * @remarks
+     * Defaults to `true`.
+     */
+    messageFieldVisible?: boolean;
+    /**
+     *  Sets whether spellcheck is enabled in the message field.
+     *
+     * @remarks
+     * Defaults to `false`.
+     */
+    messageFieldSpellcheck?: boolean;
+    /**
+     * Adds custom placeholder text for the message input field.
+     *
+     * @remarks
+     * The default placeholder text is `"Say something..."`
+     */
+    messageFieldPlaceholder?: string;
+    /**
+     * Callback that triggers when the user deletes a message with the TalkJS UI.
+     *
+     * @param event - Event object describing the message deletion
+     */
+    onDeleteMessage?: (event: DeleteMessageEvent) => void;
+    /**
+     * Callback that triggers when the user sends a message with the TalkJS UI.
+     *
+     * @param event - Event object describing the message sending action
+     */
+    onSendMessage?: (event: SendMessageEvent) => void;
+    /**
+     * Callback that triggers when the user initiates an action that will require
+     * a permissions request from the browser, but right before actually
+     * requesting the permission from the browser.
+     *
+     * @remarks
+     * You can use this callback to inform the user that they will need to grant a
+     * browser permission in order to perform an action.
+     *
+     * @param request - Object describing the permission request
+     */
+    beforeBrowserPermissionPrompt?: (request: BrowserPermissionRequest) => void;
+    /**
+     * Callback that triggers when the user attempts to initiate an action that
+     * requires a specific browser permission, but that permission was not
+     * granted.
+     *
+     * @param event - Event object describing the missing permission
+     */
+    onMissingBrowserPermission?: (event: MissingBrowserPermissionEvent) => void;
+    /**
+     * This event fires when the user clicks an action button or an action Link
+     * inside a message.
+     *
+     * @remarks
+     * The event's `action` and `params` fields specify the name of action and its
+     * parameters, if any.
+     *
+     * See
+     * {@link https://talkjs.com/docs/Guides/Web_Components/Action_Buttons_Links/ | Action Buttons and Links }
+     * for more info.
+     */
+    onMessageAction?: (event: MessageActionEvent) => void;
+    /**
+     * Arbitrary custom data passed down to the theme.
+     *
+     * @remarks
+     * Whatever data you pass here will be made available for use in theme
+     * components through {@link CommonChatboxProps.themeCustom} for Chatbox
+     * theme components and through
+     * {@link CommonConversationListProps.themeCustom} for ConversationList
+     * theme components.
+     */
+    themeCustom?: any;
+}
+
+/**
+ * @public
+ */
+export declare interface BaseConversationListProps {
+    /**
+     * @hidden
+     */
+    className?: string;
+    /**
+     * @hidden
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Your app's unique TalkJS ID. You can find it on the Settings page of the
+     * {@link https://talkjs.com/dashboard | TalkJS dashboard.}
+     */
+    appId: string;
+    /**
+     * The ID of the current user.
+     *
+     * @remarks
+     * If the given user ID doesn't exist, a "Something went wrong" message will
+     * be displayed.
+     */
+    userId: string;
+    /**
+     * The ID of the conversation currently selected in the list.
+     *
+     * @remarks
+     *
+     * Changing the value of this prop will cause the ConversationList UI to
+     * update.
+     *
+     * Note that updating the selected conversation through this prop **will not**
+     * trigger the {@link onSelectConversation} callback.
+     */
+    selectedConversationId?: string;
+    /**
+     * Lets you override theme components with your own implementations to
+     * customize them.
+     *
+     * @remarks
+     * See
+     * {@link https://talkjs.com/docs/UI_Components/React/Customization/#custom-theme-components | Custom theme components }
+     * for more info.
+     */
+    theme?: Partial<Theme>;
+    /**
+     * Callback that triggers when the user selects a conversation from the list.
+     *
+     * @param event - Event object containing the selected conversation
+     *
+     * @remarks
+     * Note that updating the selected conversation through the
+     * {@link selectedConversationId} prop **will not** trigger this callback.
+     *
+     * Use this callback to have an adjacent chatbox show the correct
+     * conversation. See
+     * {@link https://talkjs.com/docs/UI_Components/React/ConversationList/#respond-to-a-select-conversation-event | Respond to a select conversation event.}
+     */
+    onSelectConversation?: (event: SelectConversationEvent) => void;
+    /**
+     * Arbitrary custom data passed down to the theme.
+     *
+     * @remarks
+     * Whatever data you pass here will be made available for use in theme
+     * components through {@link CommonChatboxProps.themeCustom} for Chatbox
+     * theme components and through
+     * {@link CommonConversationListProps.themeCustom} for ConversationList
+     * theme components.
+     */
+    themeCustom?: any;
+}
+
 /**
  * @public
  */
@@ -229,33 +444,24 @@ 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
+     * @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;
@@ -263,8 +469,6 @@ export declare class ChatboxController {
     }): Promise<void>;
     /**
      * Send a location message to the current conversation.
-     *
-     * @param message
      */
     sendLocationMessage(message: {
         location: Coordinates;
@@ -295,13 +499,21 @@ export declare class ChatboxController {
     getMessageFieldText(): string;
     /**
      * Set the plaintext in the message field
-     * @param text
      */
     setMessageFieldText(text: string): void;
     /**
      * Focus the message field
      */
     focusMessageField(): void;
+    /**
+     * Emits a {@link ChatboxController.onBackButtonClick} event.
+     *
+     * @remarks
+     * Called from the default ChatHeader theme component for the "back" button
+     * which is shown when the chatbox is part of an inbox that's being rendered
+     * in mobile mode.
+     */
+    clickBackButton(): void;
 }
 
 /**
@@ -316,37 +528,38 @@ export declare const ChatboxElement: new () => TalkJS.ChatboxElement;
 /**
  * @public
  */
-export declare interface ChatboxProps {
-    /**
-     * @hidden
-     */
-    className?: string;
+export declare interface ChatboxProps extends BaseChatboxProps {
     /**
-     * @hidden
-     */
-    style?: React_2.CSSProperties;
-    /**
-     * Your app's unique TalkJS ID. You can find it on the Settings page of the
-     * {@link https://talkjs.com/dashboard | TalkJS dashboard.}
-     */
-    appId: string;
-    /**
-     * The ID of the current user.
+     * The ID of the conversation to display.
      *
      * @remarks
-     * If the given user ID doesn't exist, a "Something went wrong" message will
-     * be displayed.
+     * If the conversation doesn't exist or if the current user isn't a
+     * participant of the current conversation, a "Chat not found" message will be
+     * displayed (after a timeout). If you create the conversation in parallel (eg
+     * via the REST API or via the Data API), it will show in the chatbox
+     * automatically. This means that you can safely point a chatbox at a
+     * conversation that might not yet exist. This way the chatbox UI and the
+     * conversation can load in parallel, which results in snappier UX.
+     *
+     * Passing `null` deselects the current conversation and shows an empty panel.
+     * This may be useful for Inbox-like scenarios where you want to keep the
+     * chatbox loaded, without showing a conversation.
+     *
+     * In the background, the Chatbox keeps active subscriptions to recent
+     * conversations, so that switching back and forth between conversations has
+     * snappy UX.
      */
-    userId: string;
+    conversationId: string | null;
     /**
-     * The ID of the conversation to display.
+     * Fired when the back button in the chat header is clicked.
      *
      * @remarks
-     * If the conversation doesn't exist or if the current user isn't a
-     * participant of the current conversation, a "Chat not found" message will be
-     * displayed.
+     * By default this back button is only shown inside an inbox on small screens.
+     * You can change this behavior in the ChatHeader theme.
+     *
+     * @public
      */
-    conversationId: string;
+    onBackButtonClick?: (event: BackButtonClickEvent) => void;
     /**
      * A token to authenticate the session with.
      *
@@ -370,108 +583,7 @@ export declare interface ChatboxProps {
      * {@link https://talkjs.com/docs/Features/Security/Advanced_Authentication/#refreshable-tokens | Refreshable tokens }
      * for details and examples.
      */
-    tokenFetcher?: () => string | Promise<string>;
-    /**
-     * Lets you override theme components with your own implementations to
-     * customize them.
-     *
-     * @remarks
-     * See
-     * {@link https://talkjs.com/docs/UI_Components/React/Customization/#custom-theme-components | Custom theme components }
-     * for more info.
-     */
-    theme?: Partial<Theme>;
-    /**
-     * When true, pressing Enter will send a message.
-     *
-     * @remarks
-     * Defaults to `true`.
-     */
-    enterSendsMessage?: boolean;
-    /**
-     * Sets whether the chat header is visible.
-     *
-     * @remarks
-     * Defaults to `true`.
-     */
-    chatHeaderVisible?: boolean;
-    /**
-     * Sets whether the message input field is visible.
-     *
-     * @remarks
-     * Defaults to `true`.
-     */
-    messageFieldVisible?: boolean;
-    /**
-     *  Sets whether spellcheck is enabled in the message field.
-     *
-     * @remarks
-     * Defaults to `false`.
-     */
-    messageFieldSpellcheck?: boolean;
-    /**
-     * Adds custom placeholder text for the message input field.
-     *
-     * @remarks
-     * The default placeholder text is `"Say something..."`
-     */
-    messageFieldPlaceholder?: string;
-    /**
-     * Callback that triggers when the user deletes a message with the TalkJS UI.
-     *
-     * @param event Event object describing the message deletion
-     */
-    onDeleteMessage?: (event: DeleteMessageEvent) => void;
-    /**
-     * Callback that triggers when the user sends a message with the TalkJS UI.
-     *
-     * @param event Event object describing the message sending action
-     */
-    onSendMessage?: (event: SendMessageEvent) => void;
-    /**
-     * Callback that triggers when the user initiates an action that will require
-     * a permissions request from the browser, but right before actually
-     * requesting the permission from the browser.
-     *
-     * @remarks
-     * You can use this callback to inform the user that they will need to grant a
-     * browser permission in order to perform an action.
-     *
-     * @param request Object describing the permission request
-     */
-    beforeBrowserPermissionPrompt?: (request: BrowserPermissionRequest) => void;
-    /**
-     * Callback that triggers when the user attempts to initiate an action that
-     * requires a specific browser permission, but that permission was not
-     * granted.
-     *
-     * @param event Event object describing the missing permission
-     */
-    onMissingBrowserPermission?: (event: MissingBrowserPermissionEvent) => void;
-    /**
-     * This event fires when the user clicks an action button or an action Link
-     * inside a message.
-     *
-     * @remarks
-     * The event's `action` and `params` fields specify the name of action and its
-     * parameters, if any.
-     *
-     * See
-     * {@link https://talkjs.com/docs/Guides/Web_Components/Action_Buttons_Links/ | Action Buttons and Links }
-     * for more info.
-     */
-    onMessageAction?: (event: MessageActionEvent) => void;
-    /**
-     * Arbitrary custom data passed down to the theme.
-     *
-     * @remarks
-     * Whatever data you pass here will be made available for use in theme
-     * components through {@link CommonChatboxProps.themeCustom} for Chatbox
-     * theme components and through
-     * {@link CommonConversationListProps.themeCustom} for ConversationList
-     * theme components.
-     */
-    themeCustom?: any;
+    tokenFetcher?: () => string | Promise<string>;
 }
 
 /**
@@ -533,6 +645,15 @@ export declare interface CommonChatboxProps {
      * The theme object that the chatbox's is currently using.
      */
     theme: Theme;
+    /**
+     * The ID of the conversation displayed in the chatbox.
+     *
+     * @remarks
+     * Prefer this field instead of `common.conversation.id` (which always has the
+     * same value), as this enables an optimization that prevents needless
+     * re-renders.
+     */
+    conversationId: string;
     /**
      * The conversation displayed in the chatbox.
      */
@@ -657,7 +778,7 @@ export declare class ConversationListController {
      * instead, as that lets you keep your local state in sync with the props
      * passed to the conversation list.
      */
-    selectConversation(conversationId: string): void;
+    selectConversation(conversationId: string | null): void;
 }
 
 /**
@@ -671,6 +792,9 @@ export declare class ConversationListController {
  */
 export declare const ConversationListElement: new () => TalkJS.ConversationListElement;
 
+/**
+ * @public
+ */
 export declare interface ConversationListItemProps {
     /**
      * A collection of objects which are passed to all ConversationList theme components.
@@ -690,40 +814,7 @@ export declare interface ConversationListItemProps {
 /**
  * @public
  */
-export declare interface ConversationListProps {
-    /**
-     * @hidden
-     */
-    className?: string;
-    /**
-     * @hidden
-     */
-    style?: React_2.CSSProperties;
-    /**
-     * Your app's unique TalkJS ID. You can find it on the Settings page of the
-     * {@link https://talkjs.com/dashboard | TalkJS dashboard.}
-     */
-    appId: string;
-    /**
-     * The ID of the current user.
-     *
-     * @remarks
-     * If the given user ID doesn't exist, a "Something went wrong" message will
-     * be displayed.
-     */
-    userId: string;
-    /**
-     * The ID of the conversation currently selected in the list.
-     *
-     * @remarks
-     *
-     * Changing the value of this prop will cause the ConversationList UI to
-     * update.
-     *
-     * Note that updating the selected conversation through this prop **will not**
-     * trigger the {@link onSelectConversation} callback.
-     */
-    selectedConversationId?: string;
+export declare interface ConversationListProps extends BaseConversationListProps {
     /**
      * A token to authenticate the session with.
      *
@@ -748,41 +839,6 @@ export declare interface ConversationListProps {
      *  for details and examples.
      */
     tokenFetcher?: () => string | Promise<string>;
-    /**
-     * Lets you override theme components with your own implementations to
-     * customize them.
-     *
-     * @remarks
-     * See
-     * {@link https://talkjs.com/docs/UI_Components/React/Customization/#custom-theme-components | Custom theme components }
-     * for more info.
-     */
-    theme?: Partial<Theme>;
-    /**
-     * Callback that triggers when the user selects a conversation from the list.
-     *
-     * @param event Event object containing the selected conversation
-     *
-     * @remarks
-     * Note that updating the selected conversation through the
-     * {@link selectedConversationId} prop **will not** trigger this callback.
-     *
-     * Use this callback to have an adjacent chatbox show the correct
-     * conversation. See
-     * {@link https://talkjs.com/docs/UI_Components/React/ConversationList/#respond-to-a-select-conversation-event | Respond to a select conversation event.}
-     */
-    onSelectConversation?: (event: SelectConversationEvent) => void;
-    /**
-     * Arbitrary custom data passed down to the theme.
-     *
-     * @remarks
-     * Whatever data you pass here will be made available for use in theme
-     * components through {@link CommonChatboxProps.themeCustom} for Chatbox
-     * theme components and through
-     * {@link CommonConversationListProps.themeCustom} for ConversationList
-     * theme components.
-     */
-    themeCustom?: any;
 }
 
 export { ConversationSnapshot }
@@ -838,8 +894,14 @@ export declare interface DeviceFeatures {
     isMobile: boolean;
 }
 
+/**
+ * @public
+ */
 export declare function Editor({ placeholder, disabled, className, characterLimit, spellcheck, }: EditorProps): JSX_2.Element;
 
+/**
+ * @public
+ */
 export declare interface EditorController {
     isTyping: boolean;
     atTextLimit: boolean;
@@ -850,6 +912,7 @@ export declare interface EditorController {
     shareLocation(): void;
     attachFile(): void;
     toggleEmojiPicker(): void;
+    recordVoiceMessage(): void;
 }
 
 /**
@@ -887,6 +950,9 @@ export declare interface EditorProps {
     className?: string;
 }
 
+/**
+ * @public
+ */
 export declare function EmojiPicker(props: EmojiPickerProps): JSX_2.Element;
 
 /**
@@ -900,9 +966,7 @@ export declare interface EmojiPickerProps {
 }
 
 /**
- * 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".
+ * @public
  */
 export declare function EmojiSuggestBar(props: EmojiSuggestBarProps): JSX_2.Element;
 
@@ -1083,6 +1147,62 @@ export declare interface ImageBlockProps {
     downloadUrl?: string;
 }
 
+/**
+ * A collection of actions available on the Inbox UI
+ *
+ * @remarks
+ * Exposes a `chatbox` field which, if a conversation is currently selected,
+ * lets you control the chatbox encapsulated by this inbox.
+ *
+ * @public
+ */
+export declare class InboxController {
+    #private;
+    /**
+     * The {@link ChatboxController} object of the underlying chatbox
+     *
+     * @remarks
+     * This lets you programmatically control the chatbox side of this inbox, ie
+     * the right panel. For example, to control the message field text:
+     *
+     * ```js
+     * // Obtain a reference to the inbox object, eg:
+     * // const inbox = inboxRef.current; // react
+     * // const inbox = document.querySelector("t-inbox") // web
+     * // const inbox = inboxRef.value // vue
+     * // etc
+     *
+     * inbox.chatbox.setMessageFieldText("Hey there");
+     * ```
+     */
+    get chatbox(): ChatboxController;
+    /**
+     * 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 InboxProps.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 InboxProps.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/#inbox | Inbox UI. }
+ * Combines a Conversation List with a Chatbox, responsively scaling down on
+ * smaller screens.
+ *
+ * @public
+ */
+export declare const InboxElement: new () => TalkJS.InboxElement;
+
 export { LocationBlock }
 
 /**
@@ -1103,18 +1223,20 @@ export declare interface LocationBlockProps {
     block: LocationBlock;
 }
 
+/**
+ * @public
+ */
 export declare function MentionSuggestList(props: MentionSuggestListProps): JSX_2.Element | null;
 
-export declare interface MentionSuggestList {
-    keydown(key: string): boolean;
-}
-
 /**
  * @public
  */
 export declare interface MentionSuggestListProps {
 }
 
+/**
+ * @public
+ */
 export declare function MenuItem(props: MenuItemProps): JSX_2.Element;
 
 /**
@@ -1169,6 +1291,9 @@ export declare interface MessageActionMenuProps {
     permissions: MessagePermissions;
 }
 
+/**
+ * @public
+ */
 export declare function MessageContent(props: MessageContentProps): JSX_2.Element;
 
 /**
@@ -1236,6 +1361,12 @@ export declare interface MessageFieldProps {
      * An object holding the state of the message field.
      */
     editor: EditorController;
+    /**
+     * Controls and holds state related to voice recording. Undefined when nothing
+     * is being recorded. Use editor.recordVoiceMessage() to begin recording a
+     * message.
+     */
+    voiceRecorder?: VoiceRecorderController;
     /**
      * When a message is being edited its ID will be stored here.
      */
@@ -1325,9 +1456,10 @@ export { MessageSnapshot }
  *
  * - `"everyoneRead"` - Everyone in the conversation has read this message. Typically represented using two checkmarks in chat UIs.
  *
+ * - `"virtual"` - a virtual message made with the <VirtualMessage> system component
  * @public
  */
-export declare type MessageStatus = "sending" | "sent" | "everyoneRead";
+export declare type MessageStatus = "sending" | "sent" | "everyoneRead" | "virtual";
 
 /**
  * Sent by {@link ChatboxProps.onMissingBrowserPermission} when the user
@@ -1361,6 +1493,16 @@ export declare interface MissingBrowserPermissionEvent {
     type: BrowserPermission;
 }
 
+/**
+ * @public
+ */
+export declare interface NoConversationSelectedProps {
+    /**
+     * A collection of objects which are passed to all Chatbox theme components.
+     */
+    common: CommonChatboxProps;
+}
+
 export { ParticipantSnapshot }
 
 /**
@@ -1411,10 +1553,18 @@ export declare interface PopoverButtonProps<T extends object> extends React_2.HT
      * The element to focus when the popover is opened. Can be an element or a selector. Ignored if type is "menu".
      */
     initialFocus?: string | HTMLElement;
+    /**
+     * Whether to render the popover menu outside the parent element (useful if
+     * the menu won't fit inside its container otherwise)
+     */
+    portal?: boolean;
 }
 
 export { Preact }
 
+/**
+ * @public
+ */
 export declare function ReactionPicker({ messageId, colorScheme, }: ReactionPickerProps): JSX_2.Element;
 
 /**
@@ -1431,6 +1581,20 @@ export declare interface ReactionPickerProps {
     colorScheme: "light" | "dark";
 }
 
+/**
+ * @public
+ */
+export declare interface RecordingPreviewProps {
+    /**
+     * A collection of objects which are passed to all Chatbox theme components.
+     */
+    common: CommonChatboxProps;
+    /**
+     * Controls and holds state related to voice recording.
+     */
+    voiceRecorder: VoiceRecorderController;
+}
+
 /**
  * @public
  */
@@ -1464,13 +1628,15 @@ export declare interface ReplyBarProps {
 /**
  * An event object dispatched by the
  * {@link ConversationListProps.onSelectConversation} event.
+ *
+ * @public
  */
 export declare interface SelectConversationEvent {
     currentUser: UserSnapshot;
     /**
      * The newly-selected conversation.
      */
-    conversation: ConversationSnapshot;
+    conversation: ConversationSnapshot | null;
 }
 
 /**
@@ -1573,6 +1739,7 @@ export declare interface Theme {
     MessageListFooter: React_2.ComponentType<MessageListFooterProps>;
     BeforeMessages: React_2.ComponentType<BeforeMessagesProps>;
     AfterMessages: React_2.ComponentType<AfterMessagesProps>;
+    NoConversationSelected: React_2.ComponentType<NoConversationSelectedProps>;
     TextBlock: React_2.ComponentType<TextBlockProps>;
     FileBlock: React_2.ComponentType<FileBlockProps>;
     LocationBlock: React_2.ComponentType<LocationBlockProps>;
@@ -1580,6 +1747,8 @@ export declare interface Theme {
     AudioBlock: React_2.ComponentType<AudioBlockProps>;
     VoiceBlock: React_2.ComponentType<VoiceBlockProps>;
     VideoBlock: React_2.ComponentType<VideoBlockProps>;
+    VoiceRecorder: React_2.ComponentType<VoiceRecorderProps>;
+    RecordingPreview: React_2.ComponentType<RecordingPreviewProps>;
     ConversationListItem: React_2.ComponentType<ConversationListItemProps>;
 }
 
@@ -1627,7 +1796,10 @@ export declare interface Translation extends TranslationStrings {
     locale: string;
 }
 
-declare interface TranslationStrings {
+/**
+ * @public
+ */
+export declare interface TranslationStrings {
     YESTERDAY: string;
     TODAY: string;
     DAYS: string;
@@ -1705,13 +1877,16 @@ declare interface TranslationStrings {
 
 export { TypingSnapshot }
 
+/** @public */
+export declare type UploadState = "pending" | "done" | "error";
+
 /**
  * Returns a list of participants in the conversation with the given ID.
  * It'll initially return an empty list, and re-render the calling component as data participants are loaded.
  * It'll also cause a re-render when any of those participants change, such as when a user's name or photoUrl changes.
  *
- * @param conversationId ID of the conversation
- * @param limit Maximum number of participants to subscribe to. Defaults to 10. The maximum is 100.
+ * @param conversationId - ID of the conversation
+ * @param limit - Maximum number of participants to subscribe to. Defaults to 10. The maximum is 100.
  * @returns List of participant snapshots.
  *
  * @public
@@ -1722,8 +1897,8 @@ export declare function useParticipants(conversationId: string, limit?: number):
  * 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
+ * @param timestamp - The timestamp of the event in milliseconds since Unix epoch.
+ * @param t - Relevant translation object to get localized output
  *
  * @public
  */
@@ -1821,6 +1996,87 @@ export declare interface VideoBlockProps {
     downloadUrl?: string;
 }
 
+/**
+ * Lets you render a fake message with content and sender of your choice,
+ * without having to compose a complete MessageSnapshot object.
+ *
+ * @remarks
+ * This system component renders a fake message that looks and behaves like a
+ * real chat message, but is never stored or sent through TalkJS. It is useful
+ * for showing contextual prompts such as welcome messages at the top of a
+ * conversation.
+ *
+ * Uses the provided props to compose a complete {@link MessageSnapshot} object,
+ * which is then passed to the
+ * {@link /UI_Components/Theme/Theme_components/Message | Message} component
+ * from your theme.
+ *
+ * Because the message isn't a real, stored message, the message is rendered as
+ * if the user has no permissions to perform any actions on this message (such
+ * as reply, edit, etc). This means the built-in action menu will not be
+ * accessible.
+ *
+ * @public
+ */
+export declare function VirtualMessage(props: VirtualMessageProps): JSX_2.Element | null;
+
+/**
+ * @public
+ */
+export declare interface VirtualMessageProps {
+    /**
+     * The text of the message. Accepts formatting markup like the chatbox message field does, eg `*this*` would become bold.
+     *
+     * @remarks
+     * Specify either `text` or `content`, but not both.
+     */
+    text?: string;
+    /**
+     * The content of the message as a content block.
+     *
+     * @remarks
+     * Lets you precisely control the formatting of the message, see
+     * {@link https://talkjs.com/docs/Concepts/Message_Content/#sending-message-content | Message content}.
+     * Specify either `text` or `content`, but not both.
+     */
+    content?: ContentBlock[];
+    /**
+     * The ID of the sender of this message, or a complete UserSnapshot with the
+     * sender's details.
+     *
+     * @remarks
+     * When omitted, the message is rendered as a system message.
+     *
+     * When passing a UserSnapshot, this object is used in full and the user is
+     * not loaded from the database, which means that you can also pass a fake
+     * user that does not really exist.
+     */
+    sender?: string | UserSnapshot;
+    /**
+     * Override the message's timestamp
+     *
+     * @remarks
+     * Defaults to `-1`, which our preset themes interpret as "do not show a timestamp at all"
+     */
+    createdAt?: number;
+    /**
+     * Control the message's delivery status
+     *
+     * @remarks
+     * Defaults to "virtual", which make our preset themes not render status ticks
+     * at all. Set it to eg `"sent"` to show a tickmark, or to `"everyoneRead"` to
+     * show a double tickmark.
+     */
+    status?: MessageStatus;
+    /**
+     * Custom data for the `message` object.
+     *
+     * @remarks
+     * You can read this out in `message.custom` inside the Message theme component.
+     */
+    custom?: Record<string, string>;
+}
+
 export { VoiceBlock }
 
 /**
@@ -1856,6 +2112,92 @@ export declare interface VoiceBlockProps {
     downloadUrl?: string;
 }
 
+/**
+ * Controller for voice recording. Contains methods and fields related to the
+ * voice message currently being recorded.
+ *
+ * @remarks
+ * Use {@link EditorController.recordVoiceMessage} to begin recording a voice
+ * message.
+ *
+ * @public
+ */
+export declare interface VoiceRecorderController {
+    /** Whether `"recording"` or `"previewing"`.
+     *
+     * @remarks When not recording at all, the voiceController field is undefined.
+     * */
+    state: VoiceRecorderState;
+    /**
+     * The amount of seconds since the user began recording.
+     */
+    duration: number;
+    /** Defined after stop() has been called. Pass to the `src` prop of
+     * {@link AudioPlayer} to preview the recording. */
+    recordingUrl?: string;
+    /**
+     * TalkJS will immediately upload the voice message while it's being
+     * previewed. This field lets you know how that's coming along.
+     */
+    uploadState: UploadState;
+    /**
+     * Stops the voice recording and changes the state to "previewing".
+     * This also starts the process of uploading the audio file.
+     */
+    stop(): void;
+    /**
+     * Cancels the recording or preview process.
+     */
+    cancel(): void;
+    /**
+     * Sends a message containing the just uploaded voice recording.
+     */
+    send(): void;
+}
+
+/**
+ * @public
+ */
+export declare interface VoiceRecorderProps {
+    /**
+     * A collection of objects which are passed to all Chatbox theme components.
+     */
+    common: CommonChatboxProps;
+    /**
+     * Controls and holds state related to voice recording.
+     */
+    voiceRecorder: VoiceRecorderController;
+}
+
+/** @public */
+export declare type VoiceRecorderState = "recording" | "previewing";
+
+/**
+ * Renders an audio waveform visualization for voice recording.
+ *
+ * @remarks
+ * Use this component inside your {@link VoiceRecorder} theme component to
+ * display the audio waveform. The waveform automatically visualizes the audio
+ * being recorded
+ *
+ * @public
+ */
+export declare function Waveform({ className, voiceRecorder }: WaveformProps): JSX_2.Element | null;
+
+/**
+ * @public
+ */
+export declare interface WaveformProps {
+    /**
+     * Additional CSS class name to apply to the waveform container.
+     */
+    className?: string;
+    /**
+     * The active voice recorder controller, as passed to MessageField props.
+     */
+    voiceRecorder: VoiceRecorderController;
+}
+
 export { }
 
 
@@ -1867,14 +2209,20 @@ declare global {
         type NullishConversationListProps = {
             [K in keyof Omit<ConversationListProps, "className" | "style">]: ConversationListProps[K] | null | undefined;
         };
+        type NullishInboxProps = {
+            [K in keyof Omit<InboxProps, "className" | "style">]: InboxProps[K] | null | undefined;
+        };
         interface ChatboxElement extends HTMLElement, NullishChatboxProps, ChatboxController {
         }
         interface ConversationListElement extends HTMLElement, NullishConversationListProps, ConversationListController {
         }
+        interface InboxElement extends HTMLElement, NullishInboxProps, InboxController {
+        }
     }
     interface HTMLElementTagNameMap {
         "t-chatbox": TalkJS.ChatboxElement;
         "t-conversation-list": TalkJS.ConversationListElement;
+        "t-inbox": TalkJS.InboxElement;
     }
 }