stream-chat-react 12.1.0 → 12.2.1

package/dist/index.browser.cjs

@@ -8278,7 +8278,7 @@ var require_disallow_node = __commonJS({
 var require_ast_to_react = __commonJS({
   "node_modules/mml-react/node_modules/react-markdown/lib/ast-to-react.js"(exports, module2) {
     "use strict";
-    var React172 = require("react");
+    var React171 = require("react");
     var xtend = require_immutable();
     var ReactIs2 = require("react-is");
     function astToReact(node2, options) {
@@ -8305,7 +8305,7 @@ var require_ast_to_react = __commonJS({
         throw new Error("Renderer for type `".concat(node2.type, "` not defined or is not renderable"));
       }
       var nodeProps = getNodeProps(node2, key, options, renderer, parent, index3);
-      return React172.createElement(renderer, nodeProps, nodeProps.children || resolveChildren() || void 0);
+      return React171.createElement(renderer, nodeProps, nodeProps.children || resolveChildren() || void 0);
       function resolveChildren() {
         return node2.children && node2.children.map(function(childNode, i) {
           return astToReact(childNode, options, {
@@ -8319,7 +8319,7 @@ var require_ast_to_react = __commonJS({
       var props = {
         key
       };
-      var isSimpleRenderer = typeof renderer === "string" || renderer === React172.Fragment;
+      var isSimpleRenderer = typeof renderer === "string" || renderer === React171.Fragment;
       if (opts.sourcePos && node2.position) {
         props["data-sourcepos"] = flattenPosition2(node2.position);
       }
@@ -8472,14 +8472,14 @@ var require_ast_to_react = __commonJS({
     function mergeNodeChildren(node2, parsedChildren) {
       var el = node2.element;
       if (Array.isArray(el)) {
-        var Fragment2 = React172.Fragment || "div";
-        return React172.createElement(Fragment2, null, el);
+        var Fragment2 = React171.Fragment || "div";
+        return React171.createElement(Fragment2, null, el);
       }
       if (el.props.children || parsedChildren) {
-        var children = React172.Children.toArray(el.props.children).concat(parsedChildren);
-        return React172.cloneElement(el, null, children);
+        var children = React171.Children.toArray(el.props.children).concat(parsedChildren);
+        return React171.cloneElement(el, null, children);
       }
-      return React172.cloneElement(el, null);
+      return React171.cloneElement(el, null);
     }
     function flattenPosition2(pos) {
       return [pos.start.line, ":", pos.start.column, "-", pos.end.line, ":", pos.end.column].map(String).join("");
@@ -8603,9 +8603,9 @@ var require_renderers = __commonJS({
   "node_modules/mml-react/node_modules/react-markdown/lib/renderers.js"(exports, module2) {
     "use strict";
     var xtend = require_immutable();
-    var React172 = require("react");
-    var supportsStringRender = parseInt((React172.version || "16").slice(0, 2), 10) >= 16;
-    var createElement = React172.createElement;
+    var React171 = require("react");
+    var supportsStringRender = parseInt((React171.version || "16").slice(0, 2), 10) >= 16;
+    var createElement = React171.createElement;
     module2.exports = {
       break: "br",
       paragraph: "p",
@@ -8641,7 +8641,7 @@ var require_renderers = __commonJS({
     }
     function Root(props) {
       var className = props.className;
-      var root2 = !className && React172.Fragment || "div";
+      var root2 = !className && React171.Fragment || "div";
       return createElement(root2, className ? {
         className
       } : null, props.children);
@@ -8697,7 +8697,7 @@ var require_renderers = __commonJS({
       var dangerous = props.allowDangerousHtml || props.escapeHtml === false;
       var tag = props.isBlock ? "div" : "span";
       if (!dangerous) {
-        return createElement(React172.Fragment || tag, null, props.value);
+        return createElement(React171.Fragment || tag, null, props.value);
       }
       var nodeProps = {
         dangerouslySetInnerHTML: {
@@ -8707,7 +8707,7 @@ var require_renderers = __commonJS({
       return createElement(tag, nodeProps);
     }
     function ParsedHtml(props) {
-      return props["data-sourcepos"] ? React172.cloneElement(props.element, {
+      return props["data-sourcepos"] ? React171.cloneElement(props.element, {
         "data-sourcepos": props["data-sourcepos"]
       }) : props.element;
     }
@@ -39019,7 +39019,7 @@ var UnMemoizedChannelPreviewMessenger = (props) => {
     className: customClassName = "",
     displayImage,
     displayTitle,
-    latestMessage,
+    latestMessagePreview,
     onSelect: customOnSelectChannel,
     setActiveChannel,
     unread,
@@ -39061,7 +39061,7 @@ var UnMemoizedChannelPreviewMessenger = (props) => {
         name: avatarName
       }
     )),
-    /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-end" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-end-first-row" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-messenger--name" }, /* @__PURE__ */ import_react83.default.createElement("span", null, displayTitle)), !!unread && /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-unread-badge", "data-testid": "unread-badge" }, unread)), /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-messenger--last-message" }, latestMessage))
+    /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-end" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-end-first-row" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-messenger--name" }, /* @__PURE__ */ import_react83.default.createElement("span", null, displayTitle)), !!unread && /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-unread-badge", "data-testid": "unread-badge" }, unread)), /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-messenger--last-message" }, latestMessagePreview))
   );
 };
 var ChannelPreviewMessenger = import_react83.default.memo(
@@ -39088,7 +39088,7 @@ var import_react86 = require("react");
 var import_react85 = __toESM(require("react"));
 var renderPreviewText = (text6) => /* @__PURE__ */ import_react85.default.createElement(ReactMarkdown, { skipHtml: true }, text6);
 var getLatestMessagePreview = (channel, t2, userLanguage = "en") => {
-  const latestMessage = channel.state.messages[channel.state.messages.length - 1];
+  const latestMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1];
   const previewTextToRender = latestMessage?.i18n?.[`${userLanguage}_text`] || latestMessage?.text;
   if (!latestMessage) {
     return t2("Nothing yet...");
@@ -39097,8 +39097,7 @@ var getLatestMessagePreview = (channel, t2, userLanguage = "en") => {
     return t2("Message deleted");
   }
   if (previewTextToRender) {
-    const renderedText = renderPreviewText(previewTextToRender);
-    return renderedText;
+    return renderPreviewText(previewTextToRender);
   }
   if (latestMessage.command) {
     return `/${latestMessage.command}`;
@@ -39206,7 +39205,12 @@ var useMessageDeliveryStatus = ({
 
 // src/components/ChannelPreview/ChannelPreview.tsx
 var ChannelPreview = (props) => {
-  const { channel, Preview = ChannelPreviewMessenger, channelUpdateCount } = props;
+  const {
+    channel,
+    Preview = ChannelPreviewMessenger,
+    channelUpdateCount,
+    getLatestMessagePreview: getLatestMessagePreview2 = getLatestMessagePreview
+  } = props;
   const { channel: activeChannel, client, setActiveChannel } = useChatContext(
     "ChannelPreview"
   );
@@ -39253,21 +39257,25 @@ var ChannelPreview = (props) => {
   );
   (0, import_react88.useEffect)(() => {
     refreshUnreadCount();
-    const handleEvent = (event) => {
-      if (event.message) setLastMessage(event.message);
+    const handleEvent = () => {
+      setLastMessage(channel.state.latestMessages[channel.state.latestMessages.length - 1]);
       refreshUnreadCount();
     };
     channel.on("message.new", handleEvent);
     channel.on("message.updated", handleEvent);
     channel.on("message.deleted", handleEvent);
+    channel.on("message.undeleted", handleEvent);
+    channel.on("channel.truncated", handleEvent);
     return () => {
       channel.off("message.new", handleEvent);
       channel.off("message.updated", handleEvent);
       channel.off("message.deleted", handleEvent);
+      channel.off("message.undeleted", handleEvent);
+      channel.off("channel.truncated", handleEvent);
     };
-  }, [refreshUnreadCount, channelUpdateCount]);
+  }, [channel, refreshUnreadCount, channelUpdateCount]);
   if (!Preview) return null;
-  const latestMessage = getLatestMessagePreview(channel, t2, userLanguage);
+  const latestMessagePreview = getLatestMessagePreview2(channel, t2, userLanguage);
   return /* @__PURE__ */ import_react88.default.createElement(
     Preview,
     {
@@ -39276,7 +39284,8 @@ var ChannelPreview = (props) => {
       displayImage,
       displayTitle,
       lastMessage,
-      latestMessage,
+      latestMessage: latestMessagePreview,
+      latestMessagePreview,
       messageDeliveryStatus,
       setActiveChannel,
       unread
@@ -44536,39 +44545,39 @@ var useMessageSetKey = ({
 };
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts
-var import_react183 = __toESM(require("react"));
+var import_react183 = require("react");
 var useScrollToBottomOnNewMessage = ({
   messages,
   scrollToBottom,
   scrollToLatestMessageOnFocus
 }) => {
-  const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = import_react183.default.useState(
-    false
-  );
-  const resetNewMessagesReceivedInBackground = (0, import_react183.useCallback)(() => {
-    setNewMessagesReceivedInBackground(false);
-  }, []);
+  const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = (0, import_react183.useState)(false);
+  const scrollToBottomIfConfigured = (0, import_react183.useRef)();
+  scrollToBottomIfConfigured.current = (event) => {
+    if (!scrollToLatestMessageOnFocus || !newMessagesReceivedInBackground || event.target !== window) {
+      return;
+    }
+    setTimeout(scrollToBottom, 100);
+  };
   (0, import_react183.useEffect)(() => {
     setNewMessagesReceivedInBackground(true);
   }, [messages]);
-  const scrollToBottomIfConfigured = (0, import_react183.useCallback)(
-    (event) => {
-      if (!scrollToLatestMessageOnFocus || !newMessagesReceivedInBackground || event.target !== window)
-        return;
-      setTimeout(scrollToBottom, 100);
-    },
-    [scrollToLatestMessageOnFocus, scrollToBottom, newMessagesReceivedInBackground]
-  );
   (0, import_react183.useEffect)(() => {
+    const handleFocus = (event) => {
+      scrollToBottomIfConfigured.current?.(event);
+    };
+    const handleBlur = () => {
+      setNewMessagesReceivedInBackground(false);
+    };
     if (typeof window !== "undefined") {
-      window.addEventListener("focus", scrollToBottomIfConfigured);
-      window.addEventListener("blur", resetNewMessagesReceivedInBackground);
+      window.addEventListener("focus", handleFocus);
+      window.addEventListener("blur", handleBlur);
     }
     return () => {
-      window.removeEventListener("focus", scrollToBottomIfConfigured);
-      window.removeEventListener("blur", resetNewMessagesReceivedInBackground);
+      window.removeEventListener("focus", handleFocus);
+      window.removeEventListener("blur", handleBlur);
     };
-  }, [scrollToBottomIfConfigured]);
+  }, []);
 };
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts
@@ -44669,6 +44678,7 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     messageGroupStyles,
     MessageSystem,
     numItemsPrepended,
+    openThread,
     ownMessagesReadByOthers,
     processedMessages: messageList,
     reactionDetailsSort,
@@ -44721,6 +44731,7 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
       message,
       Message: MessageUIComponent,
       messageActions,
+      openThread,
       reactionDetailsSort,
       readBy: ownMessagesReadByOthers[message.id] || [],
       sortReactionDetails,
@@ -44787,6 +44798,7 @@ var VirtualizedMessageListWithContext = (props) => {
     messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE,
     messages,
     notifications,
+    openThread,
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
     overscan = 0,
     read,
@@ -45002,6 +45014,7 @@ var VirtualizedMessageListWithContext = (props) => {
         messageGroupStyles,
         MessageSystem,
         numItemsPrepended,
+        openThread,
         ownMessagesReadByOthers,
         processedMessages,
         reactionDetailsSort,
@@ -46192,7 +46205,7 @@ var useChannelDeletedListener = (setChannels, customHandler) => {
     return () => {
       client.off("channel.deleted", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useChannelHiddenListener.ts
@@ -46216,7 +46229,7 @@ var useChannelHiddenListener = (setChannels, customHandler) => {
     return () => {
       client.off("channel.hidden", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useChannelTruncatedListener.ts
@@ -46237,7 +46250,7 @@ var useChannelTruncatedListener = (setChannels, customHandler, forceUpdate) => {
     return () => {
       client.off("channel.truncated", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, forceUpdate, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useChannelUpdatedListener.ts
@@ -46270,7 +46283,7 @@ var useChannelUpdatedListener = (setChannels, customHandler, forceUpdate) => {
     return () => {
       client.off("channel.updated", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, forceUpdate, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useChannelVisibleListener.ts
@@ -46295,7 +46308,7 @@ var useChannelVisibleListener = (setChannels, customHandler) => {
     return () => {
       client.off("channel.visible", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useConnectionRecoveredListener.ts
@@ -46312,7 +46325,7 @@ var useConnectionRecoveredListener = (forceUpdate) => {
     return () => {
       client.off("connection.recovered", handleEvent);
     };
-  }, []);
+  }, [client, forceUpdate]);
 };
 
 // src/components/ChannelList/hooks/useMessageNewListener.ts
@@ -46356,7 +46369,13 @@ var useMessageNewListener = (setChannels, customHandler, lockChannelOrder = fals
     return () => {
       client.off("message.new", handleEvent);
     };
-  }, [lockChannelOrder]);
+  }, [
+    allowNewMessagesFromUnfilteredChannels,
+    client,
+    customHandler,
+    lockChannelOrder,
+    setChannels
+  ]);
 };
 
 // src/components/ChannelList/hooks/useMobileNavigation.ts
@@ -46404,7 +46423,7 @@ var useNotificationAddedToChannelListener = (setChannels, customHandler, allowNe
     return () => {
       client.off("notification.added_to_channel", handleEvent);
     };
-  }, [customHandler]);
+  }, [allowNewMessagesFromUnfilteredChannels, client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useNotificationMessageNewListener.ts
@@ -46429,7 +46448,7 @@ var useNotificationMessageNewListener = (setChannels, customHandler, allowNewMes
     return () => {
       client.off("notification.message_new", handleEvent);
     };
-  }, [customHandler]);
+  }, [allowNewMessagesFromUnfilteredChannels, client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useNotificationRemovedFromChannelListener.ts
@@ -46450,7 +46469,7 @@ var useNotificationRemovedFromChannelListener = (setChannels, customHandler) =>
     return () => {
       client.off("notification.removed_from_channel", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/usePaginatedChannels.ts
@@ -46557,7 +46576,7 @@ var useUserPresenceChangedListener = (setChannels) => {
     return () => {
       client.off("user.presence.changed", handleEvent);
     };
-  }, []);
+  }, [client, setChannels]);
 };
 
 // src/components/ChannelSearch/ChannelSearch.tsx
@@ -47262,6 +47281,7 @@ var UnMemoizedChannelList = (props) => {
     customQueryChannels,
     EmptyStateIndicator: EmptyStateIndicator2 = EmptyStateIndicator,
     filters,
+    getLatestMessagePreview: getLatestMessagePreview2,
     LoadingErrorIndicator: LoadingErrorIndicator2 = NullComponent,
     LoadingIndicator: LoadingIndicator2 = LoadingChannels,
     List: List2 = ChannelListMessenger,
@@ -47324,7 +47344,9 @@ var UnMemoizedChannelList = (props) => {
       setActiveChannel(channels2[0], watchers);
     }
   };
-  const forceUpdate = () => setChannelUpdateCount((count) => count + 1);
+  const forceUpdate = (0, import_react212.useCallback)(() => setChannelUpdateCount((count) => count + 1), [
+    setChannelUpdateCount
+  ]);
   const onSearch = (0, import_react212.useCallback)((event) => {
     if (!event.target.value) {
       setSearchActive(false);
@@ -47392,6 +47414,7 @@ var UnMemoizedChannelList = (props) => {
       channel: item2,
       // forces the update of preview component on channel update
       channelUpdateCount,
+      getLatestMessagePreview: getLatestMessagePreview2,
       key: item2.cid,
       Preview,
       setActiveChannel,