stream-chat-react 13.12.0 → 13.13.0

package/dist/index.browser.cjs

@@ -28957,6 +28957,7 @@ function defaultRenderMessages({
   const {
     DateSeparator: DateSeparator2 = DateSeparator,
     HeaderComponent,
+    MessageListItem = "li",
     MessageSystem = EventComponent,
     UnreadMessagesSeparator: UnreadMessagesSeparator2 = UnreadMessagesSeparator
   } = components;
@@ -28967,7 +28968,7 @@ function defaultRenderMessages({
     const message = messages[index2];
     if (isDateSeparatorMessage(message)) {
       renderedMessages.push(
-        /* @__PURE__ */ import_react182.default.createElement("li", { key: `${message.date.toISOString()}-i` }, /* @__PURE__ */ import_react182.default.createElement(
+        /* @__PURE__ */ import_react182.default.createElement(MessageListItem, { "data-index": index2, key: `${message.date.toISOString()}-i` }, /* @__PURE__ */ import_react182.default.createElement(
           DateSeparator2,
           {
             date: message.date,
@@ -28979,14 +28980,15 @@ function defaultRenderMessages({
     } else if (isIntroMessage(message)) {
       if (HeaderComponent) {
         renderedMessages.push(
-          /* @__PURE__ */ import_react182.default.createElement("li", { key: "intro" }, /* @__PURE__ */ import_react182.default.createElement(HeaderComponent, null))
+          /* @__PURE__ */ import_react182.default.createElement(MessageListItem, { "data-index": index2, key: "intro" }, /* @__PURE__ */ import_react182.default.createElement(HeaderComponent, null))
         );
       }
     } else if (message.type === "system") {
       renderedMessages.push(
         /* @__PURE__ */ import_react182.default.createElement(
-          "li",
+          MessageListItem,
           {
+            "data-index": index2,
             "data-message-id": message.id,
             key: message.id || message.created_at.toISOString()
           },
@@ -29009,15 +29011,16 @@ function defaultRenderMessages({
         unreadMessageCount: channelUnreadUiState?.unread_messages
       });
       renderedMessages.push(
-        /* @__PURE__ */ import_react182.default.createElement(import_react182.Fragment, { key: message.id || message.created_at.toISOString() }, isFirstUnreadMessage && UnreadMessagesSeparator2 && /* @__PURE__ */ import_react182.default.createElement("li", { className: "str-chat__li str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react182.default.createElement(
+        /* @__PURE__ */ import_react182.default.createElement(import_react182.Fragment, { key: message.id || message.created_at.toISOString() }, isFirstUnreadMessage && UnreadMessagesSeparator2 && /* @__PURE__ */ import_react182.default.createElement(MessageListItem, { className: "str-chat__li str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react182.default.createElement(
           UnreadMessagesSeparator2,
           {
             unreadCount: channelUnreadUiState?.unread_messages
           }
         )), /* @__PURE__ */ import_react182.default.createElement(
-          "li",
+          MessageListItem,
           {
             className: messageClass,
+            "data-index": index2,
             "data-message-id": message.id,
             "data-testid": messageClass
           },
@@ -29110,13 +29113,13 @@ var MessageListWithContext = (props) => {
     unsafeHTML = false
   } = props;
   const [listElement, setListElement] = import_react185.default.useState(null);
-  const [ulElement, setUlElement] = import_react185.default.useState(null);
   const { customClasses } = useChatContext("MessageList");
   const {
     EmptyStateIndicator: EmptyStateIndicator2 = EmptyStateIndicator,
     LoadingIndicator: LoadingIndicator2 = LoadingIndicator,
     MessageListMainPanel: MessageListMainPanel2 = MessageListMainPanel,
     MessageListNotifications: MessageListNotifications2 = MessageListNotifications,
+    MessageListWrapper = "ul",
     MessageNotification: MessageNotification2 = MessageNotification,
     TypingIndicator: TypingIndicator2 = TypingIndicator,
     UnreadMessagesNotification: UnreadMessagesNotification2 = UnreadMessagesNotification
@@ -29223,7 +29226,7 @@ var MessageListWithContext = (props) => {
   }, [scrollToBottom, hasMoreNewer]);
   import_react185.default.useLayoutEffect(() => {
     if (highlightedMessageId) {
-      const element4 = ulElement?.querySelector(
+      const element4 = listElement?.querySelector(
         `[data-message-id='${highlightedMessageId}']`
       );
       element4?.scrollIntoView({ block: "center" });
@@ -29232,51 +29235,62 @@ var MessageListWithContext = (props) => {
   const id = useStableId();
   const showEmptyStateIndicator = elements.length === 0 && !threadList;
   const dialogManagerId = threadList ? `message-list-dialog-manager-thread-${id}` : `message-list-dialog-manager-${id}`;
-  return /* @__PURE__ */ import_react185.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react185.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react185.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react185.default.createElement(
-    UnreadMessagesNotification2,
-    {
-      unreadCount: channelUnreadUiState?.unread_messages
-    }
-  ), /* @__PURE__ */ import_react185.default.createElement(
-    "div",
+  return /* @__PURE__ */ import_react185.default.createElement(
+    MessageListContextProvider,
     {
-      className: (0, import_clsx46.default)(messageListClass, customClasses?.threadList),
-      onScroll,
-      ref: setListElement,
-      tabIndex: 0
+      value: {
+        listElement,
+        processedMessages: enrichedMessages,
+        scrollToBottom
+      }
     },
-    showEmptyStateIndicator ? /* @__PURE__ */ import_react185.default.createElement(EmptyStateIndicator2, { listType: threadList ? "thread" : "message" }) : /* @__PURE__ */ import_react185.default.createElement(
-      InfiniteScroll,
+    /* @__PURE__ */ import_react185.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react185.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react185.default.createElement(
+      UnreadMessagesNotification2,
       {
-        className: "str-chat__message-list-scroll",
-        "data-testid": "reverse-infinite-scroll",
-        hasNextPage: props.hasMoreNewer,
-        hasPreviousPage: props.hasMore,
-        head: props.head,
-        isLoading: props.loadingMore,
-        loader: /* @__PURE__ */ import_react185.default.createElement("div", { className: "str-chat__list__loading", key: "loading-indicator" }, props.loadingMore && /* @__PURE__ */ import_react185.default.createElement(LoadingIndicator2, { size: 20 })),
-        loadNextPage: loadMoreNewer,
-        loadPreviousPage: loadMore,
-        threshold: loadMoreScrollThreshold,
-        ...restInternalInfiniteScrollProps
+        unreadCount: channelUnreadUiState?.unread_messages
+      }
+    ), /* @__PURE__ */ import_react185.default.createElement(
+      "div",
+      {
+        className: (0, import_clsx46.default)(messageListClass, customClasses?.threadList),
+        onScroll,
+        ref: setListElement,
+        tabIndex: 0
       },
-      /* @__PURE__ */ import_react185.default.createElement("ul", { className: "str-chat__ul", ref: setUlElement }, elements),
-      /* @__PURE__ */ import_react185.default.createElement(TypingIndicator2, { threadList }),
-      /* @__PURE__ */ import_react185.default.createElement("div", { key: "bottom" })
+      showEmptyStateIndicator ? /* @__PURE__ */ import_react185.default.createElement(EmptyStateIndicator2, { listType: threadList ? "thread" : "message" }) : /* @__PURE__ */ import_react185.default.createElement(
+        InfiniteScroll,
+        {
+          className: "str-chat__message-list-scroll",
+          "data-testid": "reverse-infinite-scroll",
+          hasNextPage: props.hasMoreNewer,
+          hasPreviousPage: props.hasMore,
+          head: props.head,
+          isLoading: props.loadingMore,
+          loader: /* @__PURE__ */ import_react185.default.createElement("div", { className: "str-chat__list__loading", key: "loading-indicator" }, props.loadingMore && /* @__PURE__ */ import_react185.default.createElement(LoadingIndicator2, { size: 20 })),
+          loadNextPage: loadMoreNewer,
+          loadPreviousPage: loadMore,
+          threshold: loadMoreScrollThreshold,
+          ...restInternalInfiniteScrollProps
+        },
+        /* @__PURE__ */ import_react185.default.createElement(MessageListWrapper, { className: "str-chat__ul" }, elements),
+        /* @__PURE__ */ import_react185.default.createElement(TypingIndicator2, { threadList }),
+        /* @__PURE__ */ import_react185.default.createElement("div", { key: "bottom" })
+      )
+    ))),
+    /* @__PURE__ */ import_react185.default.createElement(
+      MessageListNotifications2,
+      {
+        hasNewMessages,
+        isMessageListScrolledToBottom,
+        isNotAtLatestMessageSet: hasMoreNewer,
+        MessageNotification: MessageNotification2,
+        notifications,
+        scrollToBottom: scrollToBottomFromNotification,
+        threadList,
+        unreadCount: threadList ? void 0 : channelUnreadUiState?.unread_messages
+      }
     )
-  ))), /* @__PURE__ */ import_react185.default.createElement(
-    MessageListNotifications2,
-    {
-      hasNewMessages,
-      isMessageListScrolledToBottom,
-      isNotAtLatestMessageSet: hasMoreNewer,
-      MessageNotification: MessageNotification2,
-      notifications,
-      scrollToBottom: scrollToBottomFromNotification,
-      threadList,
-      unreadCount: threadList ? void 0 : channelUnreadUiState?.unread_messages
-    }
-  ));
+  );
 };
 var MessageList = (props) => {
   const { jumpToLatestMessage, loadMore, loadMoreNewer } = useChannelActionContext("MessageList");
@@ -37296,7 +37310,7 @@ var useChat = ({
   };
   (0, import_react288.useEffect)(() => {
     if (!client) return;
-    const version = "13.12.0";
+    const version = "13.13.0";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);