@talkjs/react-components 0.0.18 → 0.0.20

package/globalConstants.js

@@ -1,3 +1,3 @@
 "use client";
-import{createContext as n,useContext as e}from"react";import{tracking as r}from"@legendapp/state";class o extends Error{}function i(n,e){if(!n)throw new o(e??"Assertion failed")}const t=Object.assign(i,{is:function(n,e,r){return i(e,r)},unreachable:function(){throw new Error("Unreachable code")},keyNonNullable:function(n,e){if(!(e in n))throw new o(`Missing key "${e}"`);const r=n[e];if(null==r)throw new o(`Key "${e}" is null or undefined`)},insideObservingContext:function(){if(!r.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 o("Value is not defined")}}),c=n(void 0),s=h(c),u=n(void 0),f=h(u),d=n(void 0),a=h(d),l=n(void 0),w=n(l);function h(n){return()=>{const r=e(n);return t(void 0!==r),r}}export{u as EditorInternalsContext,l as PermissionContext,d as StoreContext,c as ThemeContext,f as useEditorInternals,w as usePermission,a as useStore,s as useTheme};
+import{createContext as n,useContext as e}from"react";import{tracking as r}from"@legendapp/state";class o extends Error{}function t(n,e){if(!n)throw new o(e??"Assertion failed")}const i=Object.assign(t,{is:function(n,e,r){return t(e,r)},unreachable:function(){throw new Error("Unreachable code")},keyNonNullable:function(n,e){if(!(e in n))throw new o(`Missing key "${e}"`);const r=n[e];if(null==r)throw new o(`Key "${e}" is null or undefined`)},insideObservingContext:function(){if(!r.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 o("Value is not defined")}}),[c,s]=x(),[u,f]=x(),[a,l]=x(),[d,w]=x(),[h,b]=x(),[g,p]=x(),[v,m]=x();function x(){const r=n(void 0);return[r,()=>{const n=e(r);return i(void 0!==n),n}]}export{v as ChatboxCallbacksContext,h as ChatboxControllerContext,u as EditorInternalsContext,d as PermissionContext,g as SessionContext,a as StoreContext,c as ThemeContext,m as useChatboxCallbacks,b as useChatboxController,f as useEditorInternals,w as usePermission,p as useSession,l as useStore,s as useTheme};
 //# sourceMappingURL=globalConstants.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talkjs/react-components",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "bugs": {
     "url": "https://talkjs.com/?chat"
   },
@@ -24,9 +24,11 @@
   "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",
     "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 +42,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

@@ -13,6 +13,7 @@ import { ReactElement } from 'react';
 import { ReferencedMessageSnapshot } from '@talkjs/core';
 import { SendMessageParams } from '@talkjs/core';
 import { SendTextMessageParams } from '@talkjs/core';
+import { TalkSession } from '@talkjs/core';
 import { TextBlock } from '@talkjs/core';
 import { TypingSnapshot } from '@talkjs/core';
 import { UserSnapshot } from '@talkjs/core';
@@ -56,6 +57,14 @@ export declare interface AudioPlayerProps {
     className?: string;
 }
 
+export declare interface AvatarProps extends BaseChatboxProps {
+    photoUrl: string;
+}
+
+export declare interface BaseChatboxProps {
+    common: CommonChatboxProps;
+}
+
 /**
  * Brands a base type `T`.
  *
@@ -75,63 +84,6 @@ declare interface Branding<B extends string> {
     __tag: Record<B, true>;
 }
 
-/**
- * @public
- *
- * A string that is one of `"notifications" | "microphone" | "geolocation"`.
- *
- * @remarks
- * Note that more possible values may be added in the future, so make sure your
- * handler can deal with unknown permission types gracefully.
- */
-export declare type BrowserPermission = "notifications" | "microphone" | "geolocation";
-
-/**
- * Passed to `chatbox.beforeBrowserPermissionPrompt` when a browser permission
- * dialog needs to be shown to the user.
- *
- * @public
- */
-export declare interface BrowserPermissionRequest {
-    /**
-     * The type of permission requested.
-     *
-     * @remarks
-     * Note that more possible values may be added in the future, so make sure your
-     * handler can deal with unknown permission types gracefully.
-     */
-    type: BrowserPermission;
-    /**
-     * Cancel whatever user action caused the permission to be requested.
-     *
-     * @remarks
-     * For example, if a user wants to share their location for the first time so
-     * that this event is triggered, then if you call `cancel()`, no permission
-     * will be requested from the browser, the location sharing will be cancelled,
-     * and TalkJS will continue as if the location sharing button had not been
-     * clicked at all.
-     *
-     * This may be useful if you're using this event to show custom UI elements
-     * that nudge users towards granting permission, and this UI has a "cancel"
-     * button.
-     */
-    cancel(): void;
-    /**
-     * Show the browser permission prompt that lets the user allow or deny this
-     * permission.
-     *
-     * @remarks
-     * When the user clicks "Allow", then the user action that triggered the
-     * browser permission request will proceed and the return value resolves to
-     * `"granted"`.
-     *
-     * When the user clicks "Deny", then the user action is cancelled, the
-     * `onMissingBrowserPermission` event is triggered, and the return value
-     * resolves to `"denied"`.
-     */
-    showPrompt(): Promise<"granted" | "denied">;
-}
-
 export declare interface Chatbox {
     deleteMessage(messageId: string): Promise<void>;
     setEditing(messageId: string | null): void;
@@ -150,25 +102,31 @@ export declare interface Chatbox {
     setMessageFieldText: (text: string) => void;
 }
 
-export declare interface ChatHeaderProps {
-    conversation: ConversationSnapshot;
-    participants: ParticipantSnapshot[];
-    currentUser: UserSnapshot;
-    t: Translation;
-    chatbox: Chatbox;
-    themeCustom?: any;
+export declare interface ChatHeaderProps extends BaseChatboxProps {
     isUserConnected: {
         [userId: string]: boolean;
     };
     permissions: UserPermissions;
-    device: DeviceFeatures;
 }
 
-export declare interface ContentBlockProps {
-    message: MessageSnapshot;
+export declare interface CommonChatboxProps {
+    app: AppMetadata;
     currentUser: UserSnapshot;
     t: Translation;
+    chatbox: Chatbox;
     themeCustom?: any;
+    device: DeviceFeatures;
+    theme: Theme;
+    conversation: ConversationSnapshot;
+    participants: ParticipantSnapshot[];
+    typing: TypingSnapshot;
+}
+
+export declare interface ContentBlockProps extends BaseChatboxProps {
+    message: MessageSnapshot;
+}
+
+export declare interface ConversationImageProps extends BaseChatboxProps {
 }
 
 export { ConversationSnapshot }
@@ -178,11 +136,7 @@ export declare interface Coordinates {
     longitude: number;
 }
 
-export declare interface DeleteMessageEvent {
-    currentUser: UserSnapshot;
-    message: MessageSnapshot;
-    conversation: ConversationSnapshot;
-}
+export declare function daysBetween(from: number, to: number): number;
 
 export declare interface DeviceFeatures {
     /**
@@ -197,7 +151,12 @@ export declare interface DeviceFeatures {
 
 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;
@@ -212,20 +171,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;
 
-declare interface EmojiPickerProps {
+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 {
@@ -248,17 +210,14 @@ export declare function getPhotoUrlWithFallback(user: UserSnapshot): string;
 
 export declare function getRandomColor(id: string): string;
 
-export declare function html(strings: TemplateStringsArray, ...args: any[]): ReactElement;
+export declare interface GroupChatImageProps extends BaseChatboxProps {
+}
 
-/**
- * Finds the best-matching translation set for the given locale `code`.
- */
-export declare function i18n(code: string): Translation;
+export declare function html(strings: TemplateStringsArray, ...args: any[]): ReactElement;
 
-export declare interface IconProps {
+export declare interface IconProps extends BaseChatboxProps {
     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;
-    themeCustom?: any;
 }
 
 export { ImageBlock }
@@ -274,6 +233,16 @@ export declare interface LocationBlockProps extends ContentBlockProps {
     block: LocationBlock;
 }
 
+export declare function MentionSuggestList(props: MentionSuggestListProps): JSX.Element | null;
+
+export declare interface MentionSuggestList {
+    keydown(key: string): boolean;
+}
+
+export declare interface MentionSuggestListProps {
+    className?: string;
+}
+
 /**
  * MenuButton component that renders a dropdown menu triggered by a button.
  *
@@ -312,50 +281,31 @@ export declare type MenuItemProps = React.HTMLAttributes<HTMLDivElement> & {
     textValue?: string;
 };
 
+export declare interface MessageActionMenuProps extends BaseChatboxProps {
+}
+
 export declare function MessageContent(props: MessageContentProps): JSX.Element;
 
-export declare interface MessageContentProps {
-    currentUser: UserSnapshot;
+export declare interface MessageContentProps extends BaseChatboxProps {
     message: MessageSnapshot;
-    t: Translation;
     messageStatus: MessageStatus;
-    themeCustom?: any;
     className?: string;
 }
 
-export declare interface MessageDividerProps {
+export declare interface MessageDividerProps extends BaseChatboxProps {
     isReadMarker: boolean;
     isDayMarker: boolean;
     timestamp?: number;
-    currentUser: UserSnapshot;
-    conversation: ConversationSnapshot;
-    app: AppMetadata;
-    t: Translation;
-    themeCustom?: any;
 }
 
-export declare interface MessageFieldProps {
-    conversation: ConversationSnapshot;
-    participants: ParticipantSnapshot[];
+export declare interface MessageFieldProps extends BaseChatboxProps {
     referencedMessage: MessageSnapshot | undefined;
-    currentUser: UserSnapshot;
     permissions: UserPermissions;
-    t: Translation;
-    chatbox: Chatbox;
     editor?: EditorController;
-    themeCustom?: any;
-    device: DeviceFeatures;
     editMessageId: string | undefined;
 }
 
-export declare interface MessageListFooterProps {
-    typing: TypingSnapshot;
-    conversation: ConversationSnapshot;
-    participants: ParticipantSnapshot[];
-    currentUser: UserSnapshot;
-    t: Translation;
-    chatbox: Chatbox;
-    themeCustom?: any;
+export declare interface MessageListFooterProps extends BaseChatboxProps {
 }
 
 export declare interface MessagePermissions extends UserPermissions {
@@ -364,65 +314,30 @@ export declare interface MessagePermissions extends UserPermissions {
     canEditMessage: boolean;
 }
 
-export declare interface MessageProps {
-    app: AppMetadata;
-    currentUser: UserSnapshot;
+export declare interface MessageProps extends BaseChatboxProps {
     message: MessageSnapshot;
     messageStatus: MessageStatus;
-    conversation: ConversationSnapshot;
-    participants: ParticipantSnapshot[];
     permissions: MessagePermissions;
-    t: Translation;
-    chatbox: Chatbox;
-    themeCustom?: any;
-    device: DeviceFeatures;
 }
 
 export { MessageSnapshot }
 
 export declare type MessageStatus = "sending" | "sent" | "everyoneRead";
 
-/**
- * Sent by `onMissingBrowserPermission` when the user tried to do an action that
- * require explicit browser permission, but that permission has been denied.
- *
- * @remarks
- * This event is meant to let you show a message to the user if an action (eg
- * sharing a location, or enabling notifications) can't proceed because the
- * browser permission for that has been denied.
- *
- * If you want to control when to show the browser permissions prompt, use
- * `beforeBrowserPermissionPrompt`.
- *
- * This event is emitted both when the user has denied this permission in the
- * past, and when a user action just triggered a browser permissions prompt
- * which the user then denied. If you need to differentiate between these two
- * cases, use `beforeBrowserPermissionPrompt`, and inspect the return value of
- * {@link BrowserPermissionRequest.showPrompt}.
- *
- * @public
- */
-export declare interface MissingBrowserPermissionEvent {
-    /**
-     * The type of permission that was denied.
-     *
-     * @remarks
-     * Note that more possible values may be added in the future, so make sure your
-     * handler can deal with unknown permission types gracefully.
-     */
-    type: BrowserPermission;
-}
-
 export { ParticipantSnapshot }
 
+export declare interface ReferencedMessageProps extends BaseChatboxProps {
+    referencedMessage: ReferencedMessageSnapshot;
+}
+
 export { ReferencedMessageSnapshot }
 
-export declare interface SendMessageEvent {
-    currentUser: UserSnapshot;
-    message: MessageSnapshot;
-    conversation: ConversationSnapshot;
+export declare interface ReplyBarProps extends BaseChatboxProps {
+    referencedMessage: MessageSnapshot;
 }
 
+export { TalkSession }
+
 declare function Text_2({ block, className }: TextProps): ReactElement;
 export { Text_2 as Text }
 
@@ -438,6 +353,13 @@ export declare interface TextProps {
 }
 
 export declare interface Theme {
+    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>;
     ChatHeader: React_2.ComponentType<ChatHeaderProps>;
     Message: React_2.ComponentType<MessageProps>;
     MessageField: React_2.ComponentType<MessageFieldProps>;
@@ -463,6 +385,10 @@ export declare interface TimeAgo {
     short: string;
 }
 
+export declare interface TimeAgoProps extends BaseChatboxProps {
+    timestamp: number;
+}
+
 export declare type Translation = TranslationData & TranslationStrings;
 
 declare interface TranslationData {
@@ -608,7 +534,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            "t-chatbox": typeof Chatbox;
+            "t-chatbox": typeof UnthemedChatbox;
         }
     }
 }