@talkjs/web-components 0.1.0 → 0.1.1

package/default.d.ts

@@ -6,10 +6,12 @@ import { FileBlock } from '@talkjs/core';
 import { FileToken } from '@talkjs/core';
 import { GenericFileBlock } from '@talkjs/core';
 import { ImageBlock } from '@talkjs/core';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { LocationBlock } from '@talkjs/core';
 import { MessageSnapshot } from '@talkjs/core';
 import { ParticipantSnapshot } from '@talkjs/core';
-import * as React from 'react';
+import * as Preact from 'preact/compat';
+import * as React_2 from 'react';
 import { ReferencedMessageSnapshot } from '@talkjs/core';
 import { SendMessageParams } from '@talkjs/core';
 import { SendTextMessageParams } from '@talkjs/core';
@@ -108,7 +110,7 @@ export declare interface AudioBlockProps {
  * 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;
+export declare function AudioPlayer({ src, onError, filename, className, }: AudioPlayerProps): JSX_2.Element;
 
 /**
  * @public
@@ -322,7 +324,7 @@ export declare interface ChatboxProps {
     /**
      * @hidden
      */
-    style?: React.CSSProperties;
+    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.}
@@ -535,11 +537,6 @@ export declare interface CommonChatboxProps {
      * The conversation displayed in the chatbox.
      */
     conversation: ConversationSnapshot;
-    /**
-     * A list of participants that are part of the conversation that's currently
-     * being shown.
-     */
-    participants: ParticipantSnapshot[];
     /**
      * Tells you which participants are currently typing
      */
@@ -683,10 +680,6 @@ export declare interface ConversationListItemProps {
      * The conversation that's being displayed.
      */
     conversation: ConversationSnapshot;
-    /**
-     * The list of participants that are part of the given conversation.
-     */
-    participants: ParticipantSnapshot[];
     /**
      * If `true`, this conversation is the currently selected one in the
      * conversation list.
@@ -705,7 +698,7 @@ export declare interface ConversationListProps {
     /**
      * @hidden
      */
-    style?: React.CSSProperties;
+    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.}
@@ -845,7 +838,7 @@ export declare interface DeviceFeatures {
     isMobile: boolean;
 }
 
-export declare function Editor({ placeholder, disabled, className, characterLimit, spellcheck, }: EditorProps): JSX.Element;
+export declare function Editor({ placeholder, disabled, className, characterLimit, spellcheck, }: EditorProps): JSX_2.Element;
 
 export declare interface EditorController {
     isTyping: boolean;
@@ -894,7 +887,7 @@ export declare interface EditorProps {
     className?: string;
 }
 
-export declare function EmojiPicker(props: EmojiPickerProps): JSX.Element;
+export declare function EmojiPicker(props: EmojiPickerProps): JSX_2.Element;
 
 /**
  * @public
@@ -911,7 +904,7 @@ export declare interface EmojiPickerProps {
  *
  * Uses the IndexedDB-backed emoji database from "emoji-picker-element".
  */
-export declare function EmojiSuggestBar(props: EmojiSuggestBarProps): JSX.Element;
+export declare function EmojiSuggestBar(props: EmojiSuggestBarProps): JSX_2.Element;
 
 /**
  * @public
@@ -1030,7 +1023,7 @@ export declare interface GroupChatImageProps {
  * Adapted from:
  * https://github.com/developit/htm/issues/175#issuecomment-773755560
  */
-export declare function html(strings: TemplateStringsArray, ...args: any[]): React.ReactElement;
+export declare function html(strings: TemplateStringsArray, ...args: any[]): React_2.ReactElement;
 
 /**
  * @public
@@ -1110,7 +1103,7 @@ export declare interface LocationBlockProps {
     block: LocationBlock;
 }
 
-export declare function MentionSuggestList(props: MentionSuggestListProps): JSX.Element | null;
+export declare function MentionSuggestList(props: MentionSuggestListProps): JSX_2.Element | null;
 
 export declare interface MentionSuggestList {
     keydown(key: string): boolean;
@@ -1122,12 +1115,12 @@ export declare interface MentionSuggestList {
 export declare interface MentionSuggestListProps {
 }
 
-export declare function MenuItem(props: MenuItemProps): JSX.Element;
+export declare function MenuItem(props: MenuItemProps): JSX_2.Element;
 
 /**
  * @public
  */
-export declare interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export declare interface MenuItemProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /**
      * When a callback is passed, it will be called when the menu item is selected.
      */
@@ -1176,7 +1169,7 @@ export declare interface MessageActionMenuProps {
     permissions: MessagePermissions;
 }
 
-export declare function MessageContent(props: MessageContentProps): JSX.Element;
+export declare function MessageContent(props: MessageContentProps): JSX_2.Element;
 
 /**
  * @public
@@ -1386,12 +1379,12 @@ export { ParticipantSnapshot }
  *
  * 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;
+export declare function PopoverButton<T extends object>(props: PopoverButtonProps<T>): JSX_2.Element;
 
 /**
  * @public
  */
-export declare interface PopoverButtonProps<T extends object> extends React.HTMLAttributes<HTMLButtonElement> {
+export declare interface PopoverButtonProps<T extends object> extends React_2.HTMLAttributes<HTMLButtonElement> {
     /**
      * Whether to display a menu or a popover when the button is clicked.
      *
@@ -1402,7 +1395,7 @@ export declare interface PopoverButtonProps<T extends object> extends React.HTML
     /**
      * The popover component to render in response to the button click.
      */
-    popoverComponent: React.ComponentType<T>;
+    popoverComponent: React_2.ComponentType<T>;
     /**
      * Props passed to the popover component.
      */
@@ -1410,14 +1403,16 @@ export declare interface PopoverButtonProps<T extends object> extends React.HTML
     /**
      * Children nodes rendered inside the button.
      */
-    children: React.ReactNode;
+    children: React_2.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;
+export { Preact }
+
+export declare function ReactionPicker({ messageId, colorScheme, }: ReactionPickerProps): JSX_2.Element;
 
 /**
  * @public
@@ -1499,7 +1494,7 @@ export { TalkSession }
  *
  * @public
  */
-declare function Text_2({ block, nonInteractive, message, className, }: TextProps): React.ReactElement;
+declare function Text_2({ block, nonInteractive, message, className, }: TextProps): React_2.ReactElement;
 export { Text_2 as Text }
 
 export { TextBlock }
@@ -1558,31 +1553,31 @@ export declare interface TextProps {
  * @public
  */
 export declare interface Theme {
-    Avatar: React.ComponentType<AvatarProps>;
-    ConversationImage: React.ComponentType<ConversationImageProps>;
-    GroupChatImage: React.ComponentType<GroupChatImageProps>;
-    ReferencedMessage: React.ComponentType<ReferencedMessageProps>;
-    ReplyBar: React.ComponentType<ReplyBarProps>;
-    TimeAgo: React.ComponentType<TimeAgoProps>;
-    MessageActionMenu: React.ComponentType<MessageActionMenuProps>;
-    CompactMessageContent: React.ComponentType<CompactMessageContentProps>;
-    ChatHeader: React.ComponentType<ChatHeaderProps>;
-    MessageListHeader: React.ComponentType<MessageListHeaderProps>;
-    Message: React.ComponentType<MessageProps>;
-    MessageField: React.ComponentType<MessageFieldProps>;
-    Icon: React.ComponentType<IconProps>;
-    MessageDivider: React.ComponentType<MessageDividerProps>;
-    MessageListFooter: React.ComponentType<MessageListFooterProps>;
-    BeforeMessages: React.ComponentType<BeforeMessagesProps>;
-    AfterMessages: React.ComponentType<AfterMessagesProps>;
-    TextBlock: React.ComponentType<TextBlockProps>;
-    FileBlock: React.ComponentType<FileBlockProps>;
-    LocationBlock: React.ComponentType<LocationBlockProps>;
-    ImageBlock: React.ComponentType<ImageBlockProps>;
-    AudioBlock: React.ComponentType<AudioBlockProps>;
-    VoiceBlock: React.ComponentType<VoiceBlockProps>;
-    VideoBlock: React.ComponentType<VideoBlockProps>;
-    ConversationListItem: React.ComponentType<ConversationListItemProps>;
+    Avatar: React_2.ComponentType<AvatarProps>;
+    ConversationImage: React_2.ComponentType<ConversationImageProps>;
+    GroupChatImage: React_2.ComponentType<GroupChatImageProps>;
+    ReferencedMessage: React_2.ComponentType<ReferencedMessageProps>;
+    ReplyBar: React_2.ComponentType<ReplyBarProps>;
+    TimeAgo: React_2.ComponentType<TimeAgoProps>;
+    MessageActionMenu: React_2.ComponentType<MessageActionMenuProps>;
+    CompactMessageContent: React_2.ComponentType<CompactMessageContentProps>;
+    ChatHeader: React_2.ComponentType<ChatHeaderProps>;
+    MessageListHeader: React_2.ComponentType<MessageListHeaderProps>;
+    Message: React_2.ComponentType<MessageProps>;
+    MessageField: React_2.ComponentType<MessageFieldProps>;
+    Icon: React_2.ComponentType<IconProps>;
+    MessageDivider: React_2.ComponentType<MessageDividerProps>;
+    MessageListFooter: React_2.ComponentType<MessageListFooterProps>;
+    BeforeMessages: React_2.ComponentType<BeforeMessagesProps>;
+    AfterMessages: React_2.ComponentType<AfterMessagesProps>;
+    TextBlock: React_2.ComponentType<TextBlockProps>;
+    FileBlock: React_2.ComponentType<FileBlockProps>;
+    LocationBlock: React_2.ComponentType<LocationBlockProps>;
+    ImageBlock: React_2.ComponentType<ImageBlockProps>;
+    AudioBlock: React_2.ComponentType<AudioBlockProps>;
+    VoiceBlock: React_2.ComponentType<VoiceBlockProps>;
+    VideoBlock: React_2.ComponentType<VideoBlockProps>;
+    ConversationListItem: React_2.ComponentType<ConversationListItemProps>;
 }
 
 /**
@@ -1707,6 +1702,19 @@ declare interface TranslationStrings {
 
 export { TypingSnapshot }
 
+/**
+ * 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.
+ * @returns List of participant snapshots.
+ *
+ * @public
+ */
+export declare function useParticipants(conversationId: string, limit?: number): ParticipantSnapshot[];
+
 /**
  * Returns "Yesterday", "Last Monday", "Tuesday, March 31" or "Monday, March 31
  * 2014", depending on which is most appropriate.