@talkjs/web-components 0.0.30 → 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
+ */
+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
  */
-declare interface AvatarProps {
+export declare interface AvatarProps {
     /**
      * A collection of objects which are passed to all Chatbox/ConversationList
      * theme components.
@@ -164,7 +203,7 @@ export declare interface BrowserPermissionRequest {
  *
  * @public
  */
-declare class ChatboxController {
+export declare class ChatboxController {
     #private;
     /**
      * Deletes the message with the given ID.
@@ -250,15 +289,12 @@ declare class ChatboxController {
  *
  * @public
  */
-export declare const ChatboxElement: new () => ChatboxElement_2;
-
-declare interface ChatboxElement_2 extends HTMLElement, NullishChatboxProps, ChatboxController {
-}
+export declare const ChatboxElement: new () => TalkJS.ChatboxElement;
 
 /**
  * @public
  */
-declare interface ChatboxProps {
+export declare interface ChatboxProps {
     /**
      * @hidden
      */
@@ -394,10 +430,13 @@ declare interface ChatboxProps {
      * 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}
+     * See
+     * {@link https://talkjs.com/docs/Guides/Web_Components/Action_Buttons_Links/ | Action Buttons and Links }
+     * for more info.
      */
     onMessageAction?: (event: MessageActionEvent) => void;
     /**
@@ -405,9 +444,9 @@ declare interface ChatboxProps {
      *
      * @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;
@@ -416,7 +455,7 @@ declare interface ChatboxProps {
 /**
  * @public
  */
-declare interface ChatHeaderProps {
+export declare interface ChatHeaderProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -438,7 +477,7 @@ declare interface ChatHeaderProps {
  *
  * @public
  */
-declare interface CommonChatboxProps {
+export declare interface CommonChatboxProps {
     /**
      * Holds information about your TalkJS app.
      */
@@ -496,7 +535,7 @@ declare interface CommonChatboxProps {
  *
  * @public
  */
-declare interface CommonConversationListProps {
+export declare interface CommonConversationListProps {
     /**
      * Holds information about your TalkJS app.
      */
@@ -539,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.
@@ -558,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.
@@ -583,7 +622,7 @@ declare interface ConversationImageProps {
  *
  * @public
  */
-declare class ConversationListController {
+export declare class ConversationListController {
     #private;
     /**
      * Select a conversation.
@@ -594,10 +633,10 @@ declare class ConversationListController {
      * programmatically from elsewhere to simulate a user click.
      *
      * This method will trigger the
-     * {@linkcode ConversationListProps.onSelectConversation} event. In most
+     * {@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 {@linkcode ConversationListProps.selectedConversationId} prop
+     * 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.
      */
@@ -613,12 +652,9 @@ declare class ConversationListController {
  *
  * @public
  */
-export declare const ConversationListElement: new () => ConversationListElement_2;
-
-declare interface ConversationListElement_2 extends HTMLElement, NullishConversationListProps, ConversationListController {
-}
+export declare const ConversationListElement: new () => TalkJS.ConversationListElement;
 
-declare interface ConversationListItemProps {
+export declare interface ConversationListItemProps {
     /**
      * A collection of objects which are passed to all ConversationList theme components.
      */
@@ -641,7 +677,7 @@ declare interface ConversationListItemProps {
 /**
  * @public
  */
-declare interface ConversationListProps {
+export declare interface ConversationListProps {
     /**
      * @hidden
      */
@@ -672,7 +708,7 @@ 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;
     /**
@@ -716,7 +752,7 @@ 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
@@ -728,18 +764,20 @@ 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;
 }
 
+export { ConversationSnapshot }
+
 /**
  * @public
  */
-declare interface Coordinates {
+export declare interface Coordinates {
     latitude: number;
     longitude: number;
 }
@@ -776,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.
      */
@@ -787,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
+ */
+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
  */
-declare interface FileBlockProps {
+export declare interface FileBlockProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -820,10 +934,54 @@ declare interface FileBlockProps {
     downloadUrl?: string;
 }
 
+/**
+ * Displays the given number of seconds in a human-friendly MM:SS or HH:MM:SS
+ * format; whichever's shorter.
+ *
+ * @public
+ */
+export declare function formatDuration(seconds: number): string;
+
+/**
+ * Returns a human-readable filesize count.
+ *
+ * @public
+ */
+export declare function formatFilesize(bytes: number): string;
+
+export { GenericFileBlock }
+
+/**
+ * Given a coordinate, returns an `imageUrl` used to display a Google Maps
+ * preview image and a `linkUrl` which points to the given location on Google
+ * Maps.
+ *
+ * @public
+ */
+export declare function getGoogleMapsUrls({ latitude, longitude }: Coordinates): {
+    imageUrl: string;
+    linkUrl: string;
+};
+
+/**
+ * Returns the given user's `photoUrl` if available. If not, returns a `data:`
+ * URL of a fallback SVG which shows the user's initials.
+ *
+ * @public
+ */
+export declare function getPhotoUrlWithFallback(user: UserSnapshot): string;
+
+/**
+ * Generates a random color in hex format.
+ *
+ * @public
+ */
+export declare function getRandomColor(id: string): string;
+
 /**
  * @public
  */
-declare interface GroupChatImageProps {
+export declare interface GroupChatImageProps {
     /**
      * A collection of objects which are passed to all Chatbox/ConversationList
      * theme components.
@@ -839,10 +997,25 @@ declare interface GroupChatImageProps {
     participants: ParticipantSnapshot[];
 }
 
+/**
+ * Parses a JSX-like React string into a React element tree.
+ *
+ * @remarks
+ * Uses the {@link https://github.com/developit/htm | `htm`} library under the
+ * hood.
+ *
+ * @public
+ *
+ * @privateRemarks
+ * Adapted from:
+ * https://github.com/developit/htm/issues/175#issuecomment-773755560
+ */
+export declare function html(strings: TemplateStringsArray, ...args: any[]): React.ReactElement;
+
 /**
  * @public
  */
-declare interface IconProps {
+export declare interface IconProps {
     /**
      * A collection of objects which are passed to all Chatbox/ConversationList
      * theme components.
@@ -862,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.
      */
@@ -907,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.
      */
@@ -925,6 +1090,30 @@ 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.
  *
@@ -952,7 +1141,7 @@ export declare interface MessageActionEvent {
 /**
  * @public
  */
-declare interface MessageActionMenuProps {
+export declare interface MessageActionMenuProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -967,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.
      */
@@ -993,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.
      */
@@ -1009,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.
      */
@@ -1019,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.
      */
@@ -1034,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.
      */
@@ -1056,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.
      */
@@ -1075,6 +1288,8 @@ declare interface MessageProps {
     permissions: MessagePermissions;
 }
 
+export { MessageSnapshot }
+
 /**
  * The current status of the message.
  *
@@ -1089,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
@@ -1123,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
+ */
+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
  */
-declare interface ReferencedMessageProps {
+export declare interface ReferencedMessageProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -1145,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.
      */
@@ -1188,10 +1462,22 @@ export declare interface SendMessageEvent {
     conversation: ConversationSnapshot;
 }
 
+export { TalkSession }
+
+/**
+ * Displays rich text
+ *
+ * @public
+ */
+declare function Text_2({ block, nonInteractive, message, className, }: TextProps): React.ReactElement;
+export { Text_2 as Text }
+
+export { TextBlock }
+
 /**
  * @public
  */
-declare interface TextBlockProps {
+export declare interface TextBlockProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -1206,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.
@@ -1241,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.
      */
@@ -1260,7 +1592,7 @@ declare interface TimeAgoProps {
  *
  * @public
  */
-declare interface Translation extends TranslationStrings {
+export declare interface Translation extends TranslationStrings {
     locale: string;
 }
 
@@ -1324,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.
  *
@@ -1332,7 +1677,7 @@ declare interface TranslationStrings {
  *
  * @public
  */
-declare interface UserPermissions {
+export declare interface UserPermissions {
     /**
      * True if typing indicators are enabled.
      */
@@ -1369,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
+ */
+export declare function useTimeAgo(timestamp: number, t: Translation): TimeAgo;
+
+export { VideoBlock }
+
 /**
  * @public
  */
-declare interface VideoBlockProps {
+export declare interface VideoBlockProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -1402,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.
      */
@@ -1439,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": ChatboxElement;
-        "t-conversation-list": ConversationListElement;
+        "t-chatbox": TalkJS.ChatboxElement;
+        "t-conversation-list": TalkJS.ConversationListElement;
     }
 }