@talkjs/react-components 0.0.19 → 0.0.21

package/globalConstants.js

@@ -1,3 +1,54 @@
 "use client";
-import{createContext as n,useContext as e}from"react";import{tracking as o}from"@legendapp/state";class r extends Error{}function i(n,e){if(!n)throw new r(e??"Assertion failed")}const t=Object.assign(i,{is:function(n,e,o){return i(e,o)},unreachable:function(){throw new Error("Unreachable code")},keyNonNullable:function(n,e){if(!(e in n))throw new r(`Missing key "${e}"`);const o=n[e];if(null==o)throw new r(`Key "${e}" is null or undefined`)},insideObservingContext:function(){if(!o.current)throw new Error("You aren't inside an observing context")},never:function(n){throw new Error("Unreachable")},defined:function(n){if(null==n)throw new r("Value is not defined")}}),c=n(void 0),s=p(c),u=n(void 0),d=p(u),f=n(void 0),a=p(f),l=n(void 0),w=n(l),h=n(void 0),v=p(h),b=n(void 0),g=p(b);function p(n){return()=>{const o=e(n);return t(void 0!==o),o}}export{h as ChatboxControllerContext,u as EditorInternalsContext,l as PermissionContext,b as SessionContext,f as StoreContext,c as ThemeContext,v as useChatboxController,d as useEditorInternals,w as usePermission,g as useSession,a as useStore,s as useTheme};
+import { createContext as t, useContext as s } from "react";
+class i extends Error {
+}
+function a(e, o) {
+  if (!e) throw new i(o ?? "Assertion failed");
+}
+const r = Object.assign(a, { is: function(e, o, c) {
+  return a(o, c);
+}, unreachable: function() {
+  throw new Error("Unreachable code");
+}, never: function(e) {
+  throw new Error("Unreachable");
+}, defined: function(e) {
+  if (e == null) throw new i("Value is not defined");
+} }), [d, x] = n(), [f, h] = n(), [v, b] = n(), [m, w] = n(), [E, P] = n(), u = t(void 0);
+function p() {
+  const e = s(u);
+  return r(e !== void 0), e;
+}
+const l = t(void 0);
+function j() {
+  const e = s(l);
+  return r(e !== void 0), e;
+}
+const [k, S] = n(), [U, g] = n();
+function n() {
+  const e = t(void 0);
+  return [e, () => {
+    const o = s(e);
+    return r(o !== void 0), o;
+  }];
+}
+export {
+  E as ChatboxCallbacksContext,
+  l as ControllerContext,
+  f as EditorInternalsContext,
+  k as EmojiPickerContext,
+  v as PermissionContext,
+  U as PopoverContext,
+  m as SessionContext,
+  u as StoreContext,
+  d as ThemeContext,
+  P as useChatboxCallbacks,
+  j as useController,
+  h as useEditorInternals,
+  S as useEmojiPicker,
+  b as usePermission,
+  g as usePopover,
+  w as useSession,
+  p as useStore,
+  x as useTheme
+};
 //# sourceMappingURL=globalConstants.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talkjs/react-components",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "bugs": {
     "url": "https://talkjs.com/?chat"
   },
@@ -24,9 +24,12 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.5",
     "@legendapp/state": "3.0.0-alpha.9",
+    "@popperjs/core": "^2.11.8",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@talkjs/core": "^1.4.2",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@talkjs/core": "^1.5.0",
     "autolinker": "^4.0.0",
+    "country-flag-emoji-polyfill": "^0.1.8",
     "emoji-picker-element": "1.8.2",
     "htm": "^3.1.1",
     "lodash.merge": "^4.6.2",
@@ -40,6 +43,8 @@
     "prosemirror-view": "^1.33.7",
     "react-error-boundary": "^5.0.0",
     "react-is": "^19.0.0",
+    "react-popper": "^2.3.0",
+    "react-transition-group": "4.4.2",
     "universal-base64": "^2.1.0",
     "wavesurfer.js": "^7.7.7"
   },

package/theming.d.ts

@@ -1,5 +1,6 @@
 import { AudioBlock } from '@talkjs/core';
 import { ConversationSnapshot } from '@talkjs/core';
+import { default as default_2 } from 'react';
 import { EditMessageParams } from '@talkjs/core';
 import { EditTextMessageParams } from '@talkjs/core';
 import { FileBlock } from '@talkjs/core';
@@ -57,14 +58,11 @@ export declare interface AudioPlayerProps {
     className?: string;
 }
 
-export declare interface AvatarProps extends BaseChatboxProps {
+export declare interface AvatarProps {
+    common: CommonChatboxProps | CommonConversationListProps;
     photoUrl: string;
 }
 
-export declare interface BaseChatboxProps {
-    common: CommonChatboxProps;
-}
-
 /**
  * Brands a base type `T`.
  *
@@ -102,7 +100,8 @@ export declare interface Chatbox {
     setMessageFieldText: (text: string) => void;
 }
 
-export declare interface ChatHeaderProps extends BaseChatboxProps {
+export declare interface ChatHeaderProps {
+    common: CommonChatboxProps;
     isUserConnected: {
         [userId: string]: boolean;
     };
@@ -120,13 +119,45 @@ export declare interface CommonChatboxProps {
     conversation: ConversationSnapshot;
     participants: ParticipantSnapshot[];
     typing: TypingSnapshot;
+    session: TalkSession;
+}
+
+export declare interface CommonConversationListProps {
+    app: AppMetadata;
+    currentUser: UserSnapshot;
+    t: Translation;
+    themeCustom?: any;
+    device: DeviceFeatures;
+    theme: Theme;
+    conversationList: ConversationList;
+    session: TalkSession;
 }
 
-export declare interface ContentBlockProps extends BaseChatboxProps {
+export declare interface CompactMessageContentProps {
+    common: CommonChatboxProps | CommonConversationListProps;
+    message: MessageSnapshot | ReferencedMessageSnapshot;
+}
+
+export declare interface ContentBlockProps {
+    common: CommonChatboxProps;
     message: MessageSnapshot;
 }
 
-export declare interface ConversationImageProps extends BaseChatboxProps {
+export declare interface ConversationImageProps {
+    common: CommonChatboxProps | CommonConversationListProps;
+    conversation: ConversationSnapshot;
+    participants: ParticipantSnapshot[];
+}
+
+export declare interface ConversationList {
+    selectConversation(conversationId: string): void;
+}
+
+export declare interface ConversationListItemProps {
+    common: CommonConversationListProps;
+    conversation: ConversationSnapshot;
+    participants: ParticipantSnapshot[];
+    isSelected: boolean;
 }
 
 export { ConversationSnapshot }
@@ -136,6 +167,11 @@ export declare interface Coordinates {
     longitude: number;
 }
 
+export declare interface Coordinates {
+    latitude: number;
+    longitude: number;
+}
+
 export declare function daysBetween(from: number, to: number): number;
 
 export declare interface DeviceFeatures {
@@ -149,9 +185,25 @@ export declare interface DeviceFeatures {
     isMobile: boolean;
 }
 
+export declare interface DeviceFeatures {
+    /**
+     * True if the browser supports IndexedDB, which the emoji picker depends on.
+     */
+    supportsEmojiPicker: boolean;
+    /**
+     * True if the user agents reports this device as mobile (incl tablets).
+     */
+    isMobile: boolean;
+}
+
 export declare function Editor({ placeholder, disabled, className, characterLimit, spellcheck, }: EditorProps): JSX.Element;
 
-export declare interface EditorController extends EditorState {
+export declare interface EditorController {
+    isTyping: boolean;
+    atTextLimit: boolean;
+    isEmpty: boolean;
+    characterCount: number;
+    showEmojiPicker: boolean;
     send(): void;
     shareLocation(): void;
     attachFile(): void;
@@ -166,20 +218,23 @@ export declare interface EditorProps {
     spellcheck?: boolean;
 }
 
-declare interface EditorState {
-    isTyping: boolean;
-    atTextLimit: boolean;
-    isEmpty: boolean;
-    characterCount: number;
-    showEmojiPicker: boolean;
-}
-
 export declare function EmojiPicker(props: EmojiPickerProps): JSX.Element;
 
 export declare interface EmojiPickerProps {
     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({ className }: EmojiSuggestBarProps): JSX.Element;
+
+export declare interface EmojiSuggestBarProps {
+    className?: string;
+}
+
 export { FileBlock }
 
 export declare interface FileBlockProps extends ContentBlockProps {
@@ -202,12 +257,15 @@ export declare function getPhotoUrlWithFallback(user: UserSnapshot): string;
 
 export declare function getRandomColor(id: string): string;
 
-export declare interface GroupChatImageProps extends BaseChatboxProps {
+export declare interface GroupChatImageProps {
+    common: CommonChatboxProps | CommonConversationListProps;
+    participants: ParticipantSnapshot[];
 }
 
 export declare function html(strings: TemplateStringsArray, ...args: any[]): ReactElement;
 
-export declare interface IconProps extends BaseChatboxProps {
+export declare interface IconProps {
+    common: CommonChatboxProps | CommonConversationListProps;
     type: "attach" | "chevronLeft" | "left" | "chevronRight" | "right" | "chevronUp" | "up" | "chevronDown" | "down" | "close" | "emoji" | "locationPin" | "more" | "plus" | "search" | "send" | "spinner" | "play" | "pause" | "updown" | "addEmoji" | "microphone" | "mic" | "stop" | "download" | "location" | "email" | "movie" | "image" | "attachment" | "horizontalDots" | "verticalDots" | "reply" | "back";
     className?: string;
 }
@@ -225,35 +283,15 @@ export declare interface LocationBlockProps extends ContentBlockProps {
     block: LocationBlock;
 }
 
-/**
- * MenuButton component that renders a dropdown menu triggered by a button.
- *
- * Usage:
- * <MenuButton
- *   menuComponent={YourMenuComponent}
- *   menuProps={{ prop1: value1, prop2: value2 }}
- *   aria-label="Message actions"
- * >
- *   <Icon type="horizontalDots" />
- * </MenuButton>
- *
- * All props except for menuComponent and menuProps are passed to the button element.
- *
- * The menuComponent should be a component that renders the dropdown content.
- * The menuProps are passed to the menuComponent.
- *
- * The menu component shouod render the MenuItem component for each menu item it wants to include.
- *
- * This is meant as a reuseable and accessible dropdown menu. We're using Radix for this, because they fulli implement
- * the ARIA Menu Button pattern, but without adding any styles, so we can completely customise the look and feel.
- */
-export declare function MenuButton<T extends object>(props: MenuButtonProps<T>): JSX.Element;
+export declare function MentionSuggestList(props: MentionSuggestListProps): JSX.Element | null;
 
-export declare type MenuButtonProps<T extends object> = {
-    menuComponent: React.ComponentType<T>;
-    menuProps: T;
-    children: React.ReactNode;
-} & React.HTMLAttributes<HTMLButtonElement>;
+export declare interface MentionSuggestList {
+    keydown(key: string): boolean;
+}
+
+export declare interface MentionSuggestListProps {
+    className?: string;
+}
 
 export declare function MenuItem(props: MenuItemProps): JSX.Element;
 
@@ -263,40 +301,55 @@ export declare type MenuItemProps = React.HTMLAttributes<HTMLDivElement> & {
     textValue?: string;
 };
 
-export declare interface MessageActionMenuProps extends BaseChatboxProps {
+export declare interface MessageActionMenuProps {
+    common: CommonChatboxProps;
+    message: MessageSnapshot;
+    permissions: MessagePermissions;
 }
 
 export declare function MessageContent(props: MessageContentProps): JSX.Element;
 
-export declare interface MessageContentProps extends BaseChatboxProps {
+export declare interface MessageContentProps {
+    common: CommonChatboxProps;
     message: MessageSnapshot;
     messageStatus: MessageStatus;
     className?: string;
 }
 
-export declare interface MessageDividerProps extends BaseChatboxProps {
+export declare interface MessageDividerProps {
+    common: CommonChatboxProps;
     isReadMarker: boolean;
     isDayMarker: boolean;
     timestamp?: number;
 }
 
-export declare interface MessageFieldProps extends BaseChatboxProps {
+export declare interface MessageFieldProps {
+    common: CommonChatboxProps;
     referencedMessage: MessageSnapshot | undefined;
     permissions: UserPermissions;
-    editor?: EditorController;
+    editor: EditorController;
     editMessageId: string | undefined;
 }
 
-export declare interface MessageListFooterProps extends BaseChatboxProps {
+export declare interface MessageListFooterProps {
+    common: CommonChatboxProps;
 }
 
 export declare interface MessagePermissions extends UserPermissions {
     canDeleteMessage: boolean;
     canReplyToMessage: boolean;
     canEditMessage: boolean;
+    canAddReaction: boolean;
 }
 
-export declare interface MessageProps extends BaseChatboxProps {
+export declare interface MessagePermissions extends UserPermissions {
+    canDeleteMessage: boolean;
+    canReplyToMessage: boolean;
+    canEditMessage: boolean;
+}
+
+export declare interface MessageProps {
+    common: CommonChatboxProps;
     message: MessageSnapshot;
     messageStatus: MessageStatus;
     permissions: MessagePermissions;
@@ -308,19 +361,53 @@ export declare type MessageStatus = "sending" | "sent" | "everyoneRead";
 
 export { ParticipantSnapshot }
 
-export declare interface ReferencedMessageProps extends BaseChatboxProps {
+/**
+ * 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;
+
+export declare type PopoverButtonProps<T extends object> = {
+    popoverComponent: React.ComponentType<T>;
+    popoverProps: T;
+    children: React.ReactNode;
+    type?: "menu" | "popover";
+} & React.HTMLAttributes<HTMLButtonElement>;
+
+export declare function ReactionPicker(props: ReactionPickerProps): JSX.Element;
+
+export declare type ReactionPickerProps = default_2.HTMLAttributes<HTMLDivElement> & {
+    messageId: string;
+    colorScheme: "light" | "dark";
+};
+
+export declare interface ReferencedMessageProps {
+    common: CommonChatboxProps;
     referencedMessage: ReferencedMessageSnapshot;
 }
 
 export { ReferencedMessageSnapshot }
 
-export declare interface ReplyBarProps extends BaseChatboxProps {
+export declare interface ReplyBarProps {
+    common: CommonChatboxProps;
     referencedMessage: MessageSnapshot;
 }
 
 export { TalkSession }
 
-declare function Text_2({ block, className }: TextProps): ReactElement;
+declare function Text_2({ block, nonInteractive, className, }: TextProps): ReactElement;
 export { Text_2 as Text }
 
 export { TextBlock }
@@ -332,6 +419,7 @@ export declare interface TextBlockProps extends ContentBlockProps {
 export declare interface TextProps {
     block: TextBlock;
     className?: string;
+    nonInteractive?: boolean;
 }
 
 export declare interface Theme {
@@ -342,6 +430,7 @@ export declare interface Theme {
     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>;
     Message: React_2.ComponentType<MessageProps>;
     MessageField: React_2.ComponentType<MessageFieldProps>;
@@ -355,6 +444,7 @@ export declare interface Theme {
     AudioBlock: React_2.ComponentType<AudioBlockProps>;
     VoiceBlock: React_2.ComponentType<VoiceBlockProps>;
     VideoBlock: React_2.ComponentType<VideoBlockProps>;
+    ConversationListItem: React_2.ComponentType<ConversationListItemProps>;
 }
 
 export declare interface TimeAgo {
@@ -367,7 +457,8 @@ export declare interface TimeAgo {
     short: string;
 }
 
-export declare interface TimeAgoProps extends BaseChatboxProps {
+export declare interface TimeAgoProps {
+    common: CommonChatboxProps;
     timestamp: number;
 }
 
@@ -461,6 +552,17 @@ export declare interface UserPermissions {
     canMarkConversationAsUnread: boolean;
 }
 
+export declare interface UserPermissions {
+    showTypingIndicator: boolean;
+    canShareFile: boolean;
+    canShareLocation: boolean;
+    canMention: boolean;
+    showOnlineStatus: boolean;
+    canSendVoiceMessage: boolean;
+    canLeaveConversation: boolean;
+    canMarkConversationAsUnread: boolean;
+}
+
 export { UserSnapshot }
 
 /**
@@ -509,6 +611,7 @@ declare global {
 declare global {
     interface HTMLElementTagNameMap {
         "t-chatbox": ChatboxHTMLElement;
+        "t-conversation-list": ConversationListHTMLElement;
     }
 }
 
@@ -517,6 +620,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             "t-chatbox": typeof UnthemedChatbox;
+            "t-conversation-list": typeof UnthemedConversationList;
         }
     }
 }