stream-chat-react 13.0.0-rc.2 → 13.0.1

package/dist/plugins/Emojis/EmojiPicker.js

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { usePopper } from 'react-popper';
 import Picker from '@emoji-mart/react';
-import { useMessageInputContext, useTranslationContext } from '../../context';
 import { EmojiPickerIcon } from './icons';
+import { useMessageInputContext, useTranslationContext } from '../../context';
+import { useMessageComposer } from '../../components';
 const isShadowRoot = (node) => !!node.host;
 const classNames = {
     buttonClassName: 'str-chat__emoji-picker-button',
@@ -11,7 +12,8 @@ const classNames = {
 };
 export const EmojiPicker = (props) => {
     const { t } = useTranslationContext('EmojiPicker');
-    const { insertText, textareaRef } = useMessageInputContext('EmojiPicker');
+    const { textareaRef } = useMessageInputContext('EmojiPicker');
+    const { textComposer } = useMessageComposer();
     const [displayPicker, setDisplayPicker] = useState(false);
     const [referenceElement, setReferenceElement] = useState(null);
     const [popperElement, setPopperElement] = useState(null);
@@ -39,8 +41,11 @@ export const EmojiPicker = (props) => {
     return (React.createElement("div", { className: props.wrapperClassName ?? wrapperClassName },
         displayPicker && (React.createElement("div", { className: props.pickerContainerClassName ?? pickerContainerClassName, style: styles.popper, ...attributes.popper, ref: setPopperElement },
             React.createElement(Picker, { data: async () => (await import('@emoji-mart/data')).default, onEmojiSelect: (e) => {
-                    insertText(e.native);
-                    textareaRef.current?.focus();
+                    const textarea = textareaRef.current;
+                    if (!textarea)
+                        return;
+                    textComposer.insertText({ text: e.native });
+                    textarea.focus();
                     if (props.closeOnEmojiSelect) {
                         setDisplayPicker(false);
                     }

package/dist/plugins/Emojis/index.browser.cjs

@@ -37,12 +37,66 @@ __export(Emojis_exports, {
 module.exports = __toCommonJS(Emojis_exports);
 
 // src/plugins/Emojis/EmojiPicker.tsx
-var import_react4 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_react_popper = require("react-popper");
-var import_react5 = __toESM(require("@emoji-mart/react"));
+var import_react11 = __toESM(require("@emoji-mart/react"));
 
-// src/context/TranslationContext.tsx
+// src/plugins/Emojis/icons.tsx
 var import_react = __toESM(require("react"));
+var EmojiPickerIcon = () => /* @__PURE__ */ import_react.default.createElement(
+  "svg",
+  {
+    preserveAspectRatio: "xMinYMin",
+    viewBox: "0 0 28 28",
+    width: "100%",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  /* @__PURE__ */ import_react.default.createElement("g", { clipRule: "evenodd", fillRule: "evenodd" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z" }))
+);
+
+// src/context/ChannelStateContext.tsx
+var import_react2 = __toESM(require("react"));
+var ChannelStateContext = import_react2.default.createContext(void 0);
+var useChannelStateContext = (componentName) => {
+  const contextValue = (0, import_react2.useContext)(ChannelStateContext);
+  if (!contextValue) {
+    console.warn(
+      `The useChannelStateContext hook was called outside of the ChannelStateContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the ${componentName} component.`
+    );
+    return {};
+  }
+  return contextValue;
+};
+
+// src/context/ChatContext.tsx
+var import_react3 = __toESM(require("react"));
+var ChatContext = import_react3.default.createContext(void 0);
+var useChatContext = (componentName) => {
+  const contextValue = (0, import_react3.useContext)(ChatContext);
+  if (!contextValue) {
+    console.warn(
+      `The useChatContext hook was called outside of the ChatContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the ${componentName} component.`
+    );
+    return {};
+  }
+  return contextValue;
+};
+
+// src/context/MessageContext.tsx
+var import_react4 = __toESM(require("react"));
+var MessageContext = import_react4.default.createContext(
+  void 0
+);
+var useMessageContext = (_componentName) => {
+  const contextValue = (0, import_react4.useContext)(MessageContext);
+  if (!contextValue) {
+    return {};
+  }
+  return contextValue;
+};
+
+// src/context/TranslationContext.tsx
+var import_react5 = __toESM(require("react"));
 var import_dayjs2 = __toESM(require("dayjs"));
 var import_calendar = __toESM(require("dayjs/plugin/calendar"));
 var import_localizedFormat = __toESM(require("dayjs/plugin/localizedFormat"));
@@ -55,13 +109,13 @@ var defaultDateTimeParser = (input) => (0, import_dayjs.default)(input);
 // src/context/TranslationContext.tsx
 import_dayjs2.default.extend(import_calendar.default);
 import_dayjs2.default.extend(import_localizedFormat.default);
-var TranslationContext = import_react.default.createContext({
+var TranslationContext = import_react5.default.createContext({
   t: defaultTranslatorFunction,
   tDateTimeParser: defaultDateTimeParser,
   userLanguage: "en"
 });
 var useTranslationContext = (componentName) => {
-  const contextValue = (0, import_react.useContext)(TranslationContext);
+  const contextValue = (0, import_react5.useContext)(TranslationContext);
   if (!contextValue) {
     console.warn(
       `The useTranslationContext hook was called outside of the TranslationContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the ${componentName} component.`
@@ -71,32 +125,99 @@ var useTranslationContext = (componentName) => {
   return contextValue;
 };
 
+// src/components/MessageInput/hooks/useMessageComposer.ts
+var import_react8 = require("react");
+var import_stream_chat = require("stream-chat");
+
+// src/components/Threads/ThreadContext.tsx
+var import_react6 = __toESM(require("react"));
+var ThreadContext = (0, import_react6.createContext)(void 0);
+var useThreadContext = () => (0, import_react6.useContext)(ThreadContext);
+
+// src/components/Thread/Thread.tsx
+var import_react7 = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
+var LegacyThreadContext = import_react7.default.createContext({ legacyThread: void 0 });
+var useLegacyThreadContext = () => (0, import_react7.useContext)(LegacyThreadContext);
+
+// src/components/MessageInput/hooks/useMessageComposer.ts
+var queueCache = new import_stream_chat.FixedSizeQueueCache(64);
+var useMessageComposer = () => {
+  const { client } = useChatContext();
+  const { channel } = useChannelStateContext();
+  const { editing, message: editedMessage } = useMessageContext();
+  const { legacyThread: parentMessage } = useLegacyThreadContext();
+  const threadInstance = useThreadContext();
+  const cachedEditedMessage = (0, import_react8.useMemo)(() => {
+    if (!editedMessage) return void 0;
+    return editedMessage;
+  }, [editedMessage?.id]);
+  const cachedParentMessage = (0, import_react8.useMemo)(() => {
+    if (!parentMessage) return void 0;
+    return parentMessage;
+  }, [parentMessage?.id]);
+  const messageComposer = (0, import_react8.useMemo)(() => {
+    if (editing && cachedEditedMessage) {
+      const tag = import_stream_chat.MessageComposer.constructTag(cachedEditedMessage);
+      const cachedComposer = queueCache.get(tag);
+      if (cachedComposer) return cachedComposer;
+      return new import_stream_chat.MessageComposer({
+        client,
+        composition: cachedEditedMessage,
+        compositionContext: cachedEditedMessage
+      });
+    } else if (threadInstance) {
+      return threadInstance.messageComposer;
+    } else if (cachedParentMessage) {
+      const compositionContext = {
+        ...cachedParentMessage,
+        legacyThreadId: cachedParentMessage.id
+      };
+      const tag = import_stream_chat.MessageComposer.constructTag(compositionContext);
+      const cachedComposer = queueCache.get(tag);
+      if (cachedComposer) return cachedComposer;
+      return new import_stream_chat.MessageComposer({
+        client,
+        compositionContext
+      });
+    } else {
+      return channel.messageComposer;
+    }
+  }, [
+    cachedEditedMessage,
+    cachedParentMessage,
+    channel,
+    client,
+    editing,
+    threadInstance
+  ]);
+  if (["legacy_thread", "message"].includes(
+    messageComposer.contextType
+  ) && !queueCache.peek(messageComposer.tag)) {
+    queueCache.add(messageComposer.tag, messageComposer);
+  }
+  (0, import_react8.useEffect)(() => {
+    const unsubscribe = messageComposer.registerSubscriptions();
+    return () => {
+      unsubscribe();
+    };
+  }, [messageComposer]);
+  return messageComposer;
+};
+
 // src/context/MessageInputContext.tsx
-var import_react2 = __toESM(require("react"));
-var MessageInputContext = (0, import_react2.createContext)(
+var import_react9 = __toESM(require("react"));
+var MessageInputContext = (0, import_react9.createContext)(
   void 0
 );
 var useMessageInputContext = (componentName) => {
-  const contextValue = (0, import_react2.useContext)(MessageInputContext);
+  const contextValue = (0, import_react9.useContext)(MessageInputContext);
   if (!contextValue) {
     return {};
   }
   return contextValue;
 };
 
-// src/plugins/Emojis/icons.tsx
-var import_react3 = __toESM(require("react"));
-var EmojiPickerIcon = () => /* @__PURE__ */ import_react3.default.createElement(
-  "svg",
-  {
-    preserveAspectRatio: "xMinYMin",
-    viewBox: "0 0 28 28",
-    width: "100%",
-    xmlns: "http://www.w3.org/2000/svg"
-  },
-  /* @__PURE__ */ import_react3.default.createElement("g", { clipRule: "evenodd", fillRule: "evenodd" }, /* @__PURE__ */ import_react3.default.createElement("path", { d: "M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z" }))
-);
-
 // src/plugins/Emojis/EmojiPicker.tsx
 var isShadowRoot = (node) => !!node.host;
 var classNames = {
@@ -106,19 +227,20 @@ var classNames = {
 };
 var EmojiPicker = (props) => {
   const { t } = useTranslationContext("EmojiPicker");
-  const { insertText, textareaRef } = useMessageInputContext("EmojiPicker");
-  const [displayPicker, setDisplayPicker] = (0, import_react4.useState)(false);
-  const [referenceElement, setReferenceElement] = (0, import_react4.useState)(
+  const { textareaRef } = useMessageInputContext("EmojiPicker");
+  const { textComposer } = useMessageComposer();
+  const [displayPicker, setDisplayPicker] = (0, import_react10.useState)(false);
+  const [referenceElement, setReferenceElement] = (0, import_react10.useState)(
     null
   );
-  const [popperElement, setPopperElement] = (0, import_react4.useState)(null);
+  const [popperElement, setPopperElement] = (0, import_react10.useState)(null);
   const { attributes, styles } = (0, import_react_popper.usePopper)(referenceElement, popperElement, {
     placement: "top-end",
     ...props.popperOptions
   });
   const { buttonClassName, pickerContainerClassName, wrapperClassName } = classNames;
   const { ButtonIconComponent = EmojiPickerIcon } = props;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!popperElement || !referenceElement) return;
     const handlePointerDown = (e) => {
       const target = e.target;
@@ -131,7 +253,7 @@ var EmojiPicker = (props) => {
     window.addEventListener("pointerdown", handlePointerDown);
     return () => window.removeEventListener("pointerdown", handlePointerDown);
   }, [referenceElement, popperElement]);
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className: props.wrapperClassName ?? wrapperClassName }, displayPicker && /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement("div", { className: props.wrapperClassName ?? wrapperClassName }, displayPicker && /* @__PURE__ */ import_react10.default.createElement(
     "div",
     {
       className: props.pickerContainerClassName ?? pickerContainerClassName,
@@ -139,13 +261,15 @@ var EmojiPicker = (props) => {
       ...attributes.popper,
       ref: setPopperElement
     },
-    /* @__PURE__ */ import_react4.default.createElement(
-      import_react5.default,
+    /* @__PURE__ */ import_react10.default.createElement(
+      import_react11.default,
       {
         data: async () => (await import("@emoji-mart/data")).default,
         onEmojiSelect: (e) => {
-          insertText(e.native);
-          textareaRef.current?.focus();
+          const textarea = textareaRef.current;
+          if (!textarea) return;
+          textComposer.insertText({ text: e.native });
+          textarea.focus();
           if (props.closeOnEmojiSelect) {
             setDisplayPicker(false);
           }
@@ -153,7 +277,7 @@ var EmojiPicker = (props) => {
         ...props.pickerProps
       }
     )
-  ), /* @__PURE__ */ import_react4.default.createElement(
+  ), /* @__PURE__ */ import_react10.default.createElement(
     "button",
     {
       "aria-expanded": displayPicker,
@@ -163,14 +287,14 @@ var EmojiPicker = (props) => {
       ref: setReferenceElement,
       type: "button"
     },
-    ButtonIconComponent && /* @__PURE__ */ import_react4.default.createElement(ButtonIconComponent, null)
+    ButtonIconComponent && /* @__PURE__ */ import_react10.default.createElement(ButtonIconComponent, null)
   ));
 };
 
 // src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts
 var import_lodash = __toESM(require("lodash.mergewith"));
-var import_stream_chat = require("stream-chat");
-var EmojiSearchSource = class extends import_stream_chat.BaseSearchSource {
+var import_stream_chat2 = require("stream-chat");
+var EmojiSearchSource = class extends import_stream_chat2.BaseSearchSource {
   constructor(emojiSearchIndex, options) {
     super(options);
     this.type = "emoji";
@@ -198,7 +322,7 @@ var EmojiSearchSource = class extends import_stream_chat.BaseSearchSource {
   filterQueryResults(items) {
     return items.map((item) => ({
       ...item,
-      ...(0, import_stream_chat.getTokenizedSuggestionDisplayName)({
+      ...(0, import_stream_chat2.getTokenizedSuggestionDisplayName)({
         displayName: item.id,
         searchToken: this.searchQuery
       })
@@ -212,76 +336,64 @@ var createTextComposerEmojiMiddleware = (emojiSearchIndex, options) => {
   emojiSearchSource.activate();
   return {
     id: "stream-io/emoji-middleware",
-    onChange: async ({ input, nextHandler }) => {
-      const { state } = input;
-      if (!state.selection) return nextHandler(input);
-      const triggerWithToken = (0, import_stream_chat.getTriggerCharWithToken)({
-        acceptTrailingSpaces: false,
-        text: state.text.slice(0, state.selection.end),
-        trigger: finalOptions.trigger
-      });
-      const triggerWasRemoved = !triggerWithToken || triggerWithToken.length < finalOptions.minChars;
-      if (triggerWasRemoved) {
-        const hasSuggestionsForTrigger = input.state.suggestions?.trigger === finalOptions.trigger;
-        const newInput = { ...input };
-        if (hasSuggestionsForTrigger && newInput.state.suggestions) {
-          delete newInput.state.suggestions;
+    // eslint-disable-next-line sort-keys
+    handlers: {
+      onChange: async ({ complete, forward, next, state }) => {
+        if (!state.selection) return forward();
+        const triggerWithToken = (0, import_stream_chat2.getTriggerCharWithToken)({
+          acceptTrailingSpaces: false,
+          text: state.text.slice(0, state.selection.end),
+          trigger: finalOptions.trigger
+        });
+        const triggerWasRemoved = !triggerWithToken || triggerWithToken.length < finalOptions.minChars;
+        if (triggerWasRemoved) {
+          const hasSuggestionsForTrigger = state.suggestions?.trigger === finalOptions.trigger;
+          const newState = { ...state };
+          if (hasSuggestionsForTrigger && newState.suggestions) {
+            delete newState.suggestions;
+          }
+          return next(newState);
         }
-        return nextHandler(newInput);
-      }
-      const newSearchTriggerred = triggerWithToken && triggerWithToken === finalOptions.trigger;
-      if (newSearchTriggerred) {
-        emojiSearchSource.resetStateAndActivate();
-      }
-      const textWithReplacedWord = await (0, import_stream_chat.replaceWordWithEntity)({
-        caretPosition: state.selection.end,
-        getEntityString: async (word) => {
-          const { items } = await emojiSearchSource.query(word);
-          const emoji = items.filter(Boolean).slice(0, 10).find(({ emoticons }) => !!emoticons?.includes(word));
-          if (!emoji) return null;
-          const [firstSkin] = emoji.skins ?? [];
-          return emoji.native ?? firstSkin.native;
-        },
-        text: state.text
-      });
-      if (textWithReplacedWord !== state.text) {
-        return {
-          state: {
+        const newSearchTriggerred = triggerWithToken && triggerWithToken === finalOptions.trigger;
+        if (newSearchTriggerred) {
+          emojiSearchSource.resetStateAndActivate();
+        }
+        const textWithReplacedWord = await (0, import_stream_chat2.replaceWordWithEntity)({
+          caretPosition: state.selection.end,
+          getEntityString: async (word) => {
+            const { items } = await emojiSearchSource.query(word);
+            const emoji = items.filter(Boolean).slice(0, 10).find(({ emoticons }) => !!emoticons?.includes(word));
+            if (!emoji) return null;
+            const [firstSkin] = emoji.skins ?? [];
+            return emoji.native ?? firstSkin.native;
+          },
+          text: state.text
+        });
+        if (textWithReplacedWord !== state.text) {
+          return complete({
             ...state,
             suggestions: void 0,
             // to prevent the TextComposerMiddlewareExecutor to run the first page query
             text: textWithReplacedWord
-          },
-          stop: true
-          // Stop other middleware from processing '@' character
-        };
-      }
-      return {
-        state: {
+          });
+        }
+        return complete({
           ...state,
           suggestions: {
             query: triggerWithToken.slice(1),
             searchSource: emojiSearchSource,
             trigger: finalOptions.trigger
           }
-        },
-        stop: true
-        // Stop other middleware from processing '@' character
-      };
-    },
-    onSuggestionItemSelect: ({
-      input,
-      nextHandler,
-      selectedSuggestion
-    }) => {
-      const { state } = input;
-      if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
-        return nextHandler(input);
-      emojiSearchSource.resetStateAndActivate();
-      return Promise.resolve({
-        state: {
+        });
+      },
+      onSuggestionItemSelect: ({ complete, forward, state }) => {
+        const { selectedSuggestion } = state.change ?? {};
+        if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
+          return forward();
+        emojiSearchSource.resetStateAndActivate();
+        return complete({
           ...state,
-          ...(0, import_stream_chat.insertItemWithTrigger)({
+          ...(0, import_stream_chat2.insertItemWithTrigger)({
             insertText: `${"native" in selectedSuggestion ? selectedSuggestion.native : ""} `,
             selection: state.selection,
             text: state.text,
@@ -289,8 +401,8 @@ var createTextComposerEmojiMiddleware = (emojiSearchIndex, options) => {
           }),
           suggestions: void 0
           // Clear suggestions after selection
-        }
-      });
+        });
+      }
     }
   };
 };