@talkjs/react-components 0.0.29 → 0.0.30

package/globalConstants.js

@@ -1,60 +1,52 @@
 "use client";
-import { createContext as n, useContext as o } from "react";
+import { createContext as r, useContext as i } from "react";
 import { Schema as l } from "prosemirror-model";
-class i extends Error {
+class o extends Error {
 }
-function r(t, e) {
-  if (!t) throw new i(e != null ? e : "Assertion failed");
+function n(t, e) {
+  if (!t) throw new o(e != null ? e : "Assertion failed");
 }
-const s = Object.assign(r, { is: function(t, e, c) {
-  return r(e, c);
+const c = Object.assign(n, { is: function(t, e, s) {
+  return n(e, s);
 }, unreachable: function() {
   throw new Error("Unreachable code");
 }, never: function(t) {
   throw new Error("Unreachable");
 }, defined: function(t) {
-  if (t == null) throw new i("Value is not defined");
-} }), [g, x] = a(), [h, O] = a(), [C, D] = a(), [M, f] = a(), [j, b] = a(), m = n(void 0);
-function v() {
-  const t = o(m);
-  return s(t !== void 0), t;
-}
-const u = n(void 0);
-function w() {
-  const t = o(u);
-  return s(t !== void 0), t;
-}
-const [E, k] = a(), [P, A] = a();
+  if (t == null) throw new o("Value is not defined");
+} }), [d, p] = a(), [g, x] = a(), [C, h] = a(), [O, D] = a(), [M, j] = a(), [b, f] = a(), [w, E] = a(), [P, k] = a(), [v, A] = a(), [S, I] = a();
 function a() {
-  const t = n(void 0);
+  const t = r(void 0);
   return [t, () => {
-    const e = o(t);
-    return s(e !== void 0), e;
+    const e = i(t);
+    return c(e !== void 0), e;
   }];
 }
-const S = new l({ nodes: { doc: { content: "paragraph+" }, paragraph: { code: !0, content: "inline*", parseDOM: [{ tag: "p" }], toDOM: () => ["p", 0] }, text: { group: "inline" }, mention: { group: "inline", inline: !0, attrs: { id: {}, name: {} }, content: "text*", toDOM: (t) => ["span", { "data-mention-id": t.attrs.id, class: "t-mention" }, `@${t.attrs.name}`], parseDOM: [{ tag: "span[data-mention-id]", getAttrs: (t) => ({ id: t.dataset["mention-id"] }) }] }, customemoji: { group: "inline", inline: !0, attrs: { name: {}, url: {} }, content: "text*", selectable: !1, toDOM: (t) => ["img", { src: t.attrs.url, alt: t.attrs.name, "data-custom-emoji": t.attrs.name }], parseDOM: [{ tag: "img[data-custom-emoji]", getAttrs: (t) => {
+const T = new l({ nodes: { doc: { content: "paragraph+" }, paragraph: { code: !0, content: "inline*", parseDOM: [{ tag: "p" }], toDOM: () => ["p", 0] }, text: { group: "inline" }, mention: { group: "inline", inline: !0, attrs: { id: {}, name: {} }, content: "text*", toDOM: (t) => ["span", { "data-mention-id": t.attrs.id, class: "t-mention" }, `@${t.attrs.name}`], parseDOM: [{ tag: "span[data-mention-id]", getAttrs: (t) => ({ id: t.dataset["mention-id"] }) }] }, customemoji: { group: "inline", inline: !0, attrs: { name: {}, url: {} }, content: "text*", selectable: !1, toDOM: (t) => ["img", { src: t.attrs.url, alt: t.attrs.name, "data-custom-emoji": t.attrs.name }], parseDOM: [{ tag: "img[data-custom-emoji]", getAttrs: (t) => {
   const e = t;
   return { name: e.dataset.customEmoji, url: e.src };
 } }] } }, marks: { literal: { toDOM: () => ["span", { "data-literal": "" }], parseDOM: [{ tag: "span[data-literal]" }] }, bold: { toDOM: () => ["b"], parseDOM: [{ tag: "b" }] }, italic: { toDOM: () => ["i"], parseDOM: [{ tag: "i" }] }, strikethrough: { toDOM: () => ["del"], parseDOM: [{ tag: "del" }] }, emoji: { attrs: { emoji: {} }, toDOM: (t) => ["span", { "data-emoji": t.attrs.emoji }, t.attrs.emoji], parseDOM: [{ tag: "span[data-emoji]", getAttrs: (t) => ({ emoji: t.dataset.emoji }) }] } } });
 export {
-  j as ChatboxCallbacksContext,
-  u as ControllerContext,
-  h as EditorInternalsContext,
-  E as EmojiPickerContext,
+  M as ChatboxCallbacksContext,
+  w as ControllerContext,
+  g as EditorInternalsContext,
+  v as EmojiPickerContext,
   C as PermissionContext,
-  P as PopoverContext,
-  M as SessionContext,
-  m as StoreContext,
-  g as ThemeContext,
-  S as schema,
-  b as useChatboxCallbacks,
-  w as useController,
-  O as useEditorInternals,
-  k as useEmojiPicker,
-  D as usePermission,
-  A as usePopover,
-  f as useSession,
-  v as useStore,
-  x as useTheme
+  S as PopoverContext,
+  P as PublicControllerContext,
+  O as SessionContext,
+  b as StoreContext,
+  d as ThemeContext,
+  T as schema,
+  j as useChatboxCallbacks,
+  E as useController,
+  x as useEditorInternals,
+  A as useEmojiPicker,
+  h as usePermission,
+  I as usePopover,
+  k as usePublicController,
+  D as useSession,
+  f as useStore,
+  p as useTheme
 };
 //# sourceMappingURL=globalConstants.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talkjs/react-components",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "bugs": {
     "url": "https://talkjs.com/?chat"
   },

package/theming.d.ts

@@ -146,7 +146,8 @@ export declare interface AvatarProps {
  *
  * @public
  */
-export declare interface Chatbox {
+export declare class ChatboxController {
+    #private;
     /**
      * Deletes the message with the given ID.
      *
@@ -193,9 +194,35 @@ export declare interface Chatbox {
     /**
      * Set/unset the message that's currently being replied to.
      *
-     * @param messageId  When `null` is provided, the "replying to" message is cleared
+     * @param messageId - When `null` is provided, the "replying to" message is cleared
      */
     setReferencedMessage(messageId: string | null): void;
+    /**
+     * Toggle the given emoji reaction for the given message. If the current user
+     * already added this reaction, it's removed, and otherwise, it's added.
+     *
+     * Called from the theme's Message component when the user clicks on an
+     * existing emoji reaction.
+     *
+     * @param messageId - The ID of the message you want to toggle the reaction on. This message must exist in the current conversation.
+     * @param emoji - The emoji you want to toggle. Must be a string of a single unicode emoji glyph, eg `"🎉"`.
+     */
+    toggleReaction(messageId: string, emoji: string): Promise<void>;
+    /**
+     * Get the plaintext from the message field
+     *
+     * @returns The text
+     */
+    getMessageFieldText(): string;
+    /**
+     * Set the plaintext in the message field
+     * @param text
+     */
+    setMessageFieldText(text: string): void;
+    /**
+     * Focus the message field
+     */
+    focusMessageField(): void;
 }
 
 /**
@@ -238,9 +265,9 @@ export declare interface CommonChatboxProps {
      */
     t: Translation;
     /**
-     * The chatbox instance itself.
+     * Public interface of the chatbox instance.
      */
-    chatbox: Chatbox;
+    chatbox: ChatboxController;
     /**
      * Arbitrary custom data passed down to the theme.
      *
@@ -312,9 +339,9 @@ export declare interface CommonConversationListProps {
      */
     theme: Theme;
     /**
-     * The conversation list instance itself.
+     * Public interface of the conversation list instance.
      */
-    conversationList: ConversationList;
+    conversationList: ConversationListController;
     /**
      * The underlying TalkJS session object that handles sending and receiving chat data.
      */
@@ -368,15 +395,23 @@ export declare interface ConversationImageProps {
  *
  * @public
  */
-export declare interface ConversationList {
+export declare class ConversationListController {
+    #private;
     /**
-     * Programatically select a conversation.
-     *
-     * @param conversationId
+     * Select a conversation.
      *
      * @remarks
-     * Note that this **will not** trigger the
-     * {@linkcode ConversationListProps.onSelectConversation} callback.
+     * This method is called from the theme's ConversationListItem component when
+     * the user clicks on the given conversation. You can also call it
+     * programmatically from elsewhere to simulate a user click.
+     *
+     * This method will trigger the
+     * {@linkcode 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
+     * instead, as that lets you keep your local state in sync with the props
+     * passed to the conversation list.
      */
     selectConversation(conversationId: string): void;
 }
@@ -1309,8 +1344,8 @@ export { }
 
 declare global {
     interface HTMLElementTagNameMap {
-        "t-chatbox": ChatboxHTMLElement;
-        "t-conversation-list": ConversationListHTMLElement;
+        "t-chatbox": ChatboxElement;
+        "t-conversation-list": ConversationListElement;
     }
 }