@talkjs/web-components 0.1.5 → 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;
 
@@ -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,183 +499,91 @@ 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;
-}
-
-/**
- * The
- * {@link https://talkjs.com/docs/Features/Chat_UIs/#chatbox | TalkJS Chatbox UI. }
- * Displays a single conversation.
- *
- * @public
- */
-export declare const ChatboxElement: new () => TalkJS.ChatboxElement;
-
-/**
- * @public
- */
-export declare interface ChatboxProps {
-    /**
-     * @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 to display.
-     *
-     * @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.
-     */
-    conversationId: string;
-    /**
-     * A token to authenticate the session with.
-     *
-     * @remarks
-     * See the
-     * {@link https://talkjs.com/docs/Features/Security/Authentication/ | Authentication guide }
-     * and
-     * {@link https://talkjs.com/docs/Features/Security/Advanced_Authentication/#token-reference | Token reference }
-     * for details and examples.
-     *
-     * Required when authentication is enabled, otherwise optional.
-     */
-    token?: string;
-    /**
-     * A function that fetches and returns a new authentication token from your
-     * server.
-     *
-     * @remarks
-     * TalkJS calls this function whenever the current token is about to expire.
-     * This callback is designed to work with any backend setup. See
-     * {@link https://talkjs.com/docs/Features/Security/Advanced_Authentication/#refreshable-tokens | Refreshable tokens }
-     * for details and examples.
-     */
-    tokenFetcher?: () => string | Promise<string>;
-    /**
-     * 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
+    /**
+     * Focus the message field
      */
-    onDeleteMessage?: (event: DeleteMessageEvent) => void;
+    focusMessageField(): void;
     /**
-     * Callback that triggers when the user sends a message with the TalkJS UI.
+     * Emits a {@link ChatboxController.onBackButtonClick} event.
      *
-     * @param event Event object describing the message sending action
+     * @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.
      */
-    onSendMessage?: (event: SendMessageEvent) => void;
+    clickBackButton(): void;
+}
+
+/**
+ * The
+ * {@link https://talkjs.com/docs/Features/Chat_UIs/#chatbox | TalkJS Chatbox UI. }
+ * Displays a single conversation.
+ *
+ * @public
+ */
+export declare const ChatboxElement: new () => TalkJS.ChatboxElement;
+
+/**
+ * @public
+ */
+export declare interface ChatboxProps extends BaseChatboxProps {
     /**
-     * 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.
+     * The ID of the conversation to display.
      *
      * @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.
+     * 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.
      *
-     * @param request Object describing the permission request
+     * In the background, the Chatbox keeps active subscriptions to recent
+     * conversations, so that switching back and forth between conversations has
+     * snappy UX.
      */
-    beforeBrowserPermissionPrompt?: (request: BrowserPermissionRequest) => void;
+    conversationId: string | null;
     /**
-     * Callback that triggers when the user attempts to initiate an action that
-     * requires a specific browser permission, but that permission was not
-     * granted.
+     * Fired when the back button in the chat header is clicked.
+     *
+     * @remarks
+     * By default this back button is only shown inside an inbox on small screens.
+     * You can change this behavior in the ChatHeader theme.
      *
-     * @param event Event object describing the missing permission
+     * @public
      */
-    onMissingBrowserPermission?: (event: MissingBrowserPermissionEvent) => void;
+    onBackButtonClick?: (event: BackButtonClickEvent) => void;
     /**
-     * This event fires when the user clicks an action button or an action Link
-     * inside a message.
+     * A token to authenticate the session with.
      *
      * @remarks
-     * The event's `action` and `params` fields specify the name of action and its
-     * parameters, if any.
+     * See the
+     * {@link https://talkjs.com/docs/Features/Security/Authentication/ | Authentication guide }
+     * and
+     * {@link https://talkjs.com/docs/Features/Security/Advanced_Authentication/#token-reference | Token reference }
+     * for details and examples.
      *
-     * See
-     * {@link https://talkjs.com/docs/Guides/Web_Components/Action_Buttons_Links/ | Action Buttons and Links }
-     * for more info.
+     * Required when authentication is enabled, otherwise optional.
      */
-    onMessageAction?: (event: MessageActionEvent) => void;
+    token?: string;
     /**
-     * Arbitrary custom data passed down to the theme.
+     * A function that fetches and returns a new authentication token from your
+     * server.
      *
      * @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.
+     * TalkJS calls this function whenever the current token is about to expire.
+     * This callback is designed to work with any backend setup. See
+     * {@link https://talkjs.com/docs/Features/Security/Advanced_Authentication/#refreshable-tokens | Refreshable tokens }
+     * for details and examples.
      */
-    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;
@@ -888,6 +950,9 @@ export declare interface EditorProps {
     className?: string;
 }
 
+/**
+ * @public
+ */
 export declare function EmojiPicker(props: EmojiPickerProps): JSX_2.Element;
 
 /**
@@ -901,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;
 
@@ -1084,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 }
 
 /**
@@ -1104,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;
 
 /**
@@ -1170,6 +1291,9 @@ export declare interface MessageActionMenuProps {
     permissions: MessagePermissions;
 }
 
+/**
+ * @public
+ */
 export declare function MessageContent(props: MessageContentProps): JSX_2.Element;
 
 /**
@@ -1332,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
@@ -1368,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 }
 
 /**
@@ -1427,6 +1562,9 @@ export declare interface PopoverButtonProps<T extends object> extends React_2.HT
 
 export { Preact }
 
+/**
+ * @public
+ */
 export declare function ReactionPicker({ messageId, colorScheme, }: ReactionPickerProps): JSX_2.Element;
 
 /**
@@ -1490,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;
 }
 
 /**
@@ -1599,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>;
@@ -1655,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;
@@ -1741,8 +1885,8 @@ export declare type UploadState = "pending" | "done" | "error";
  * 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
@@ -1753,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
  */
@@ -1852,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 }
 
 /**
@@ -1892,7 +2117,7 @@ export declare interface VoiceBlockProps {
  * voice message currently being recorded.
  *
  * @remarks
- * Use {@link EditorController.recordVoiceMessage()} to begin recording a voice
+ * Use {@link EditorController.recordVoiceMessage} to begin recording a voice
  * message.
  *
  * @public
@@ -1984,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;
     }
 }