@talkjs/react-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.
@@ -391,10 +430,13 @@ export 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;
     /**
@@ -402,9 +444,9 @@ export 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;
@@ -413,7 +455,7 @@ export declare interface ChatboxProps {
 /**
  * @public
  */
-declare interface ChatHeaderProps {
+export declare interface ChatHeaderProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -435,7 +477,7 @@ declare interface ChatHeaderProps {
  *
  * @public
  */
-declare interface CommonChatboxProps {
+export declare interface CommonChatboxProps {
     /**
      * Holds information about your TalkJS app.
      */
@@ -493,7 +535,7 @@ declare interface CommonChatboxProps {
  *
  * @public
  */
-declare interface CommonConversationListProps {
+export declare interface CommonConversationListProps {
     /**
      * Holds information about your TalkJS app.
      */
@@ -536,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.
@@ -555,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.
@@ -593,17 +635,17 @@ export 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.
      */
     selectConversation(conversationId: string): void;
 }
 
-declare interface ConversationListItemProps {
+export declare interface ConversationListItemProps {
     /**
      * A collection of objects which are passed to all ConversationList theme components.
      */
@@ -657,7 +699,7 @@ export declare interface ConversationListProps {
      * update.
      *
      * Note that updating the selected conversation through this prop **will not**
-     * trigger the {@linkcode onSelectConversation} callback.
+     * trigger the {@link onSelectConversation} callback.
      */
     selectedConversationId?: string;
     /**
@@ -701,7 +743,7 @@ export declare interface ConversationListProps {
      *
      * @remarks
      * Note that updating the selected conversation through the
-     * {@linkcode selectedConversationId} prop **will not** trigger this callback.
+     * {@link selectedConversationId} prop **will not** trigger this callback.
      *
      * Use this callback to have an adjacent chatbox show the correct
      * conversation. See
@@ -713,18 +755,20 @@ export declare interface ConversationListProps {
      *
      * @remarks
      * Whatever data you pass here will be made available for use in theme
-     * components through {@linkcode CommonChatboxProps.themeCustom} for Chatbox
+     * components through {@link CommonChatboxProps.themeCustom} for Chatbox
      * theme components and through
-     * {@linkcode CommonConversationListProps.themeCustom} for ConversationList
+     * {@link CommonConversationListProps.themeCustom} for ConversationList
      * theme components.
      */
     themeCustom?: any;
 }
 
+export { ConversationSnapshot }
+
 /**
  * @public
  */
-declare interface Coordinates {
+export declare interface Coordinates {
     latitude: number;
     longitude: number;
 }
@@ -761,7 +805,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.
      */
@@ -772,10 +816,86 @@ declare interface DeviceFeatures {
     isMobile: boolean;
 }
 
+export declare function Editor({ placeholder, disabled, className, characterLimit, spellcheck, }: EditorProps): JSX.Element;
+
+export declare interface EditorController {
+    isTyping: boolean;
+    atTextLimit: boolean;
+    isEmpty: boolean;
+    characterCount: number;
+    showEmojiPicker: boolean;
+    send(): void;
+    shareLocation(): void;
+    attachFile(): void;
+    toggleEmojiPicker(): void;
+}
+
 /**
  * @public
  */
-declare interface FileBlockProps {
+export declare interface EditorProps {
+    /**
+     * The maximum allowed character length.
+     *
+     * @remarks
+     * The default is `10000`
+     */
+    characterLimit?: number;
+    /**
+     * Determines if the Editor can be interacted with or not.
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text when the input is empty to encourage the user to write.
+     *
+     * @remarks
+     * The default is `"Say something..."`
+     */
+    placeholder?: string;
+    /**
+     * If true, spell-checking is enabled.
+     *
+     * @remarks
+     * The default is `false`
+     */
+    spellcheck?: boolean;
+    /**
+     * @hidden
+     */
+    className?: string;
+}
+
+export declare function EmojiPicker(props: EmojiPickerProps): JSX.Element;
+
+/**
+ * @public
+ */
+export declare interface EmojiPickerProps {
+    /**
+     * Display the emoji picker in light mode or dark mode.
+     */
+    colorScheme: "light" | "dark";
+}
+
+/**
+ * Shows a bar with emoji suggestions when the user types eg `:bla`. Shown if `query` is non-empty.
+ *
+ * Uses the IndexedDB-backed emoji database from "emoji-picker-element".
+ */
+export declare function EmojiSuggestBar(props: EmojiSuggestBarProps): JSX.Element;
+
+/**
+ * @public
+ */
+export declare interface EmojiSuggestBarProps {
+}
+
+export { FileBlock }
+
+/**
+ * @public
+ */
+export declare interface FileBlockProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -805,10 +925,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.
@@ -825,9 +989,24 @@ declare interface GroupChatImageProps {
 }
 
 /**
+ * Parses a JSX-like React string into a React element tree.
+ *
+ * @remarks
+ * Uses the {@link https://github.com/developit/htm | `htm`} library under the
+ * hood.
+ *
  * @public
+ *
+ * @privateRemarks
+ * Adapted from:
+ * https://github.com/developit/htm/issues/175#issuecomment-773755560
  */
-declare interface IconProps {
+export declare function html(strings: TemplateStringsArray, ...args: any[]): React.ReactElement;
+
+/**
+ * @public
+ */
+export declare interface IconProps {
     /**
      * A collection of objects which are passed to all Chatbox/ConversationList
      * theme components.
@@ -847,22 +1026,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.
      */
@@ -892,10 +1061,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.
      */
@@ -910,6 +1081,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.
  *
@@ -937,7 +1132,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.
      */
@@ -952,10 +1147,34 @@ declare interface MessageActionMenuProps {
     permissions: MessagePermissions;
 }
 
+export declare function MessageContent(props: MessageContentProps): JSX.Element;
+
 /**
  * @public
  */
-declare interface MessageDividerProps {
+export declare interface MessageContentProps {
+    /**
+     * A collection of objects which are passed to all Chatbox theme components.
+     */
+    common: CommonChatboxProps;
+    /**
+     * The message whose contents are being displayed
+     */
+    message: MessageSnapshot;
+    /**
+     * The current status of the given message.
+     */
+    messageStatus: MessageStatus;
+    /**
+     * @hidden
+     */
+    className?: string;
+}
+
+/**
+ * @public
+ */
+export declare interface MessageDividerProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -978,7 +1197,7 @@ declare interface MessageDividerProps {
 /**
  * @public
  */
-declare interface MessageFieldProps {
+export declare interface MessageFieldProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -994,7 +1213,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.
      */
@@ -1004,7 +1223,7 @@ declare interface MessageFieldProps {
 /**
  * @public
  */
-declare interface MessageListFooterProps {
+export declare interface MessageListFooterProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -1019,7 +1238,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.
      */
@@ -1041,7 +1260,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.
      */
@@ -1060,6 +1279,8 @@ declare interface MessageProps {
     permissions: MessagePermissions;
 }
 
+export { MessageSnapshot }
+
 /**
  * The current status of the message.
  *
@@ -1074,7 +1295,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
@@ -1108,10 +1329,75 @@ export declare interface MissingBrowserPermissionEvent {
     type: BrowserPermission;
 }
 
+export { ParticipantSnapshot }
+
+/**
+ * PopoverButton component that renders a popover triggered by a button.
+ *
+ * Usage:
+ * <PopoverButton
+ *   popoverComponent={YourMenuComponent}
+ *   popoverProps={{ prop1: value1, prop2: value2 }}
+ *   aria-label="..."
+ * >
+ *   <Icon type="horizontalDots" />
+ * </MenuButton>
+ *
+ * All props except for menuComponent and popoverProps are passed to the button element.
+ *
+ * the popoverComponent will also receive a closePopover prop. It's a function you can call to close the popover.
+ */
+export declare function PopoverButton<T extends object>(props: PopoverButtonProps<T>): JSX.Element;
+
 /**
  * @public
  */
-declare interface ReferencedMessageProps {
+export declare interface PopoverButtonProps<T extends object> extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Whether to display a menu or a popover when the button is clicked.
+     *
+     * @remarks
+     * Default value is `"popover"`.
+     */
+    type?: "menu" | "popover";
+    /**
+     * The popover component to render in response to the button click.
+     */
+    popoverComponent: React.ComponentType<T>;
+    /**
+     * Props passed to the popover component.
+     */
+    popoverProps: T;
+    /**
+     * Children nodes rendered inside the button.
+     */
+    children: React.ReactNode;
+    /**
+     * The element to focus when the popover is opened. Can be an element or a selector. Ignored if type is "menu".
+     */
+    initialFocus?: string | HTMLElement;
+}
+
+export declare function ReactionPicker({ messageId, colorScheme, }: ReactionPickerProps): JSX.Element;
+
+/**
+ * @public
+ */
+export declare interface ReactionPickerProps {
+    /**
+     * The ID of the message that's being reacted to.
+     */
+    messageId: string;
+    /**
+     * Display the emoji reaction picker in light mode or dark mode.
+     */
+    colorScheme: "light" | "dark";
+}
+
+/**
+ * @public
+ */
+export declare interface ReferencedMessageProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -1122,10 +1408,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.
      */
@@ -1165,10 +1453,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.
      */
@@ -1183,6 +1483,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.
@@ -1218,10 +1543,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.
      */
@@ -1237,7 +1583,7 @@ declare interface TimeAgoProps {
  *
  * @public
  */
-declare interface Translation extends TranslationStrings {
+export declare interface Translation extends TranslationStrings {
     locale: string;
 }
 
@@ -1301,6 +1647,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.
  *
@@ -1309,7 +1668,7 @@ declare interface TranslationStrings {
  *
  * @public
  */
-declare interface UserPermissions {
+export declare interface UserPermissions {
     /**
      * True if typing indicators are enabled.
      */
@@ -1346,10 +1705,24 @@ declare interface UserPermissions {
     canMarkConversationAsUnread: boolean;
 }
 
+export { UserSnapshot }
+
 /**
+ *
+ * This hooks triggers only when a human-readable timestamp needs to be updated.
+ * For example, you could use it to display that a messages was updated X
+ * minutes or Y hours ago.
+ *
  * @public
  */
-declare interface VideoBlockProps {
+export declare function useTimeAgo(timestamp: number, t: Translation): TimeAgo;
+
+export { VideoBlock }
+
+/**
+ * @public
+ */
+export declare interface VideoBlockProps {
     /**
      * A collection of objects which are passed to all Chatbox theme components.
      */
@@ -1379,10 +1752,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.
      */
@@ -1413,12 +1788,3 @@ declare interface VoiceBlockProps {
 }
 
 export { }
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "t-chatbox": ChatboxElement;
-        "t-conversation-list": ConversationListElement;
-    }
-}
-