stream-chat-react 11.23.9 → 11.24.0

package/dist/{Window-09ecd2ee.js → Window-2ad58fe5.js}

@@ -36517,8 +36517,8 @@ var initialState = {
 };
 
 var useCreateChannelStateContext = function (value) {
-    var _a;
-    var acceptedFiles = value.acceptedFiles, channel = value.channel, _b = value.channelCapabilitiesArray, channelCapabilitiesArray = _b === void 0 ? [] : _b, channelConfig = value.channelConfig, debounceURLEnrichmentMs = value.debounceURLEnrichmentMs, dragAndDropWindow = value.dragAndDropWindow, enrichURLForPreview = value.enrichURLForPreview, giphyVersion = value.giphyVersion, error = value.error, findURLFn = value.findURLFn, hasMore = value.hasMore, hasMoreNewer = value.hasMoreNewer, imageAttachmentSizeHandler = value.imageAttachmentSizeHandler, suppressAutoscroll = value.suppressAutoscroll, highlightedMessageId = value.highlightedMessageId, loading = value.loading, loadingMore = value.loadingMore, maxNumberOfFiles = value.maxNumberOfFiles, members = value.members, _c = value.messages, messages = _c === void 0 ? [] : _c, multipleUploads = value.multipleUploads, mutes = value.mutes, notifications = value.notifications, onLinkPreviewDismissed = value.onLinkPreviewDismissed, pinnedMessages = value.pinnedMessages, quotedMessage = value.quotedMessage, _d = value.read, read = _d === void 0 ? {} : _d, shouldGenerateVideoThumbnail = value.shouldGenerateVideoThumbnail, skipMessageDataMemoization = value.skipMessageDataMemoization, thread = value.thread, threadHasMore = value.threadHasMore, threadLoadingMore = value.threadLoadingMore, _e = value.threadMessages, threadMessages = _e === void 0 ? [] : _e, channelUnreadUiState = value.channelUnreadUiState, videoAttachmentSizeHandler = value.videoAttachmentSizeHandler, watcherCount = value.watcherCount, watcher_count = value.watcher_count, watchers = value.watchers;
+    var _a, _b;
+    var acceptedFiles = value.acceptedFiles, channel = value.channel, _c = value.channelCapabilitiesArray, channelCapabilitiesArray = _c === void 0 ? [] : _c, channelConfig = value.channelConfig, debounceURLEnrichmentMs = value.debounceURLEnrichmentMs, dragAndDropWindow = value.dragAndDropWindow, enrichURLForPreview = value.enrichURLForPreview, giphyVersion = value.giphyVersion, error = value.error, findURLFn = value.findURLFn, hasMore = value.hasMore, hasMoreNewer = value.hasMoreNewer, imageAttachmentSizeHandler = value.imageAttachmentSizeHandler, suppressAutoscroll = value.suppressAutoscroll, highlightedMessageId = value.highlightedMessageId, loading = value.loading, loadingMore = value.loadingMore, maxNumberOfFiles = value.maxNumberOfFiles, members = value.members, _d = value.messages, messages = _d === void 0 ? [] : _d, multipleUploads = value.multipleUploads, mutes = value.mutes, notifications = value.notifications, onLinkPreviewDismissed = value.onLinkPreviewDismissed, pinnedMessages = value.pinnedMessages, quotedMessage = value.quotedMessage, _e = value.read, read = _e === void 0 ? {} : _e, shouldGenerateVideoThumbnail = value.shouldGenerateVideoThumbnail, skipMessageDataMemoization = value.skipMessageDataMemoization, thread = value.thread, threadHasMore = value.threadHasMore, threadLoadingMore = value.threadLoadingMore, _f = value.threadMessages, threadMessages = _f === void 0 ? [] : _f, channelUnreadUiState = value.channelUnreadUiState, videoAttachmentSizeHandler = value.videoAttachmentSizeHandler, watcherCount = value.watcherCount, watcher_count = value.watcher_count, watchers = value.watchers;
     var channelId = channel.cid;
     var lastRead = channel.initialized && ((_a = channel.lastRead()) === null || _a === void 0 ? void 0 : _a.getTime());
     var membersLength = Object.keys(members || []).length;
@@ -36599,6 +36599,7 @@ var useCreateChannelStateContext = function (value) {
     }); }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
+        (_b = channel.data) === null || _b === void 0 ? void 0 : _b.name,
         channelId,
         channelUnreadUiState,
         debounceURLEnrichmentMs,
@@ -48107,14 +48108,6 @@ var ChannelInner = function (props) {
  */
 var Channel = React__default["default"].memo(UnMemoizedChannel);
 
-var MenuIcon$1 = function (_a) {
-    var title = _a.title;
-    var t = useTranslationContext('MenuIcon').t;
-    return (React__default["default"].createElement("svg", { "data-testid": 'menu-icon', viewBox: '0 0 448 512', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("title", null, title !== null && title !== void 0 ? title : t('Menu')),
-        React__default["default"].createElement("path", { d: 'M0 88C0 74.75 10.75 64 24 64H424C437.3 64 448 74.75 448 88C448 101.3 437.3 112 424 112H24C10.75 112 0 101.3 0 88zM0 248C0 234.7 10.75 224 24 224H424C437.3 224 448 234.7 448 248C448 261.3 437.3 272 424 272H24C10.75 272 0 261.3 0 248zM424 432H24C10.75 432 0 421.3 0 408C0 394.7 10.75 384 24 384H424C437.3 384 448 394.7 448 408C448 421.3 437.3 432 424 432z', fill: 'currentColor' })));
-};
-
 var renderPreviewText = function (text) { return React__default["default"].createElement(ReactMarkdown, { skipHtml: true }, text); };
 var getLatestMessagePreview = function (channel, t, userLanguage) {
     var _a, _b;
@@ -48140,94 +48133,45 @@ var getLatestMessagePreview = function (channel, t, userLanguage) {
     }
     return t('Empty message...');
 };
-var getDisplayTitle = function (channel, currentUser) {
-    var _a, _b;
-    var title = (_a = channel.data) === null || _a === void 0 ? void 0 : _a.name;
-    var members = Object.values(channel.state.members);
-    if (!title && members.length === 2) {
-        var otherMember = members.find(function (member) { var _a; return ((_a = member.user) === null || _a === void 0 ? void 0 : _a.id) !== (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id); });
-        if ((_b = otherMember === null || otherMember === void 0 ? void 0 : otherMember.user) === null || _b === void 0 ? void 0 : _b.name) {
-            title = otherMember.user.name;
-        }
-    }
-    return title;
-};
-var getDisplayImage = function (channel, currentUser) {
+var getChannelDisplayInfo = function (info, channel, currentUser) {
     var _a, _b;
-    var image = (_a = channel.data) === null || _a === void 0 ? void 0 : _a.image;
+    if ((_a = channel.data) === null || _a === void 0 ? void 0 : _a[info])
+        return channel.data[info];
     var members = Object.values(channel.state.members);
-    if (!image && members.length === 2) {
-        var otherMember = members.find(function (member) { var _a; return ((_a = member.user) === null || _a === void 0 ? void 0 : _a.id) !== (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id); });
-        if ((_b = otherMember === null || otherMember === void 0 ? void 0 : otherMember.user) === null || _b === void 0 ? void 0 : _b.image) {
-            image = otherMember.user.image;
-        }
-    }
-    return image;
+    if (members.length !== 2)
+        return;
+    var otherMember = members.find(function (member) { var _a; return ((_a = member.user) === null || _a === void 0 ? void 0 : _a.id) !== (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id); });
+    return (_b = otherMember === null || otherMember === void 0 ? void 0 : otherMember.user) === null || _b === void 0 ? void 0 : _b[info];
 };
+var getDisplayTitle = function (channel, currentUser) { return getChannelDisplayInfo('name', channel, currentUser); };
+var getDisplayImage = function (channel, currentUser) { return getChannelDisplayInfo('image', channel, currentUser); };
 
 var useChannelPreviewInfo = function (props) {
     var channel = props.channel, overrideImage = props.overrideImage, overrideTitle = props.overrideTitle;
-    var client = useChatContext('ChannelPreview').client;
-    var _a = React.useState(getDisplayTitle(channel, client.user)), displayTitle = _a[0], setDisplayTitle = _a[1];
-    var _b = React.useState(getDisplayImage(channel, client.user)), displayImage = _b[0], setDisplayImage = _b[1];
+    var client = useChatContext('useChannelPreviewInfo').client;
+    var _a = React.useState(function () { return overrideTitle || getDisplayTitle(channel, client.user); }), displayTitle = _a[0], setDisplayTitle = _a[1];
+    var _b = React.useState(function () { return overrideImage || getDisplayImage(channel, client.user); }), displayImage = _b[0], setDisplayImage = _b[1];
     React.useEffect(function () {
-        var handleEvent = function () {
-            setDisplayTitle(function (displayTitle) {
-                var newDisplayTitle = getDisplayTitle(channel, client.user);
-                return displayTitle !== newDisplayTitle ? newDisplayTitle : displayTitle;
-            });
-            setDisplayImage(function (displayImage) {
-                var newDisplayImage = getDisplayImage(channel, client.user);
-                return displayImage !== newDisplayImage ? newDisplayImage : displayImage;
-            });
+        if (overrideTitle && overrideImage)
+            return;
+        var updateTitles = function () {
+            if (!overrideTitle)
+                setDisplayTitle(getDisplayTitle(channel, client.user));
+            if (!overrideImage)
+                setDisplayImage(getDisplayImage(channel, client.user));
         };
-        client.on('user.updated', handleEvent);
+        updateTitles();
+        client.on('user.updated', updateTitles);
         return function () {
-            client.off('user.updated', handleEvent);
+            client.off('user.updated', updateTitles);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [channel, channel.data, client, overrideImage, overrideTitle]);
     return {
         displayImage: overrideImage || displayImage,
         displayTitle: overrideTitle || displayTitle,
     };
 };
 
-var UnMemoizedChannelHeader = function (props) {
-    var _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar : _a, _b = props.MenuIcon, MenuIcon = _b === void 0 ? MenuIcon$1 : _b, overrideImage = props.image, live = props.live, overrideTitle = props.title;
-    var _c = useChannelStateContext('ChannelHeader'), channel = _c.channel, watcher_count = _c.watcher_count;
-    var openMobileNav = useChatContext('ChannelHeader').openMobileNav;
-    var t = useTranslationContext('ChannelHeader').t;
-    var _d = useChannelPreviewInfo({
-        channel: channel,
-        overrideImage: overrideImage,
-        overrideTitle: overrideTitle,
-    }), displayImage = _d.displayImage, displayTitle = _d.displayTitle;
-    var _e = (channel === null || channel === void 0 ? void 0 : channel.data) || {}, member_count = _e.member_count, subtitle = _e.subtitle;
-    return (React__default["default"].createElement("div", { className: 'str-chat__header-livestream str-chat__channel-header' },
-        React__default["default"].createElement("button", { "aria-label": t('aria/Menu'), className: 'str-chat__header-hamburger', onClick: openMobileNav },
-            React__default["default"].createElement(MenuIcon, null)),
-        React__default["default"].createElement(Avatar$1, { image: displayImage, name: displayTitle, shape: 'rounded', size: (channel === null || channel === void 0 ? void 0 : channel.type) === 'commerce' ? 60 : 40 }),
-        React__default["default"].createElement("div", { className: 'str-chat__header-livestream-left str-chat__channel-header-end' },
-            React__default["default"].createElement("p", { className: 'str-chat__header-livestream-left--title str-chat__channel-header-title' },
-                displayTitle,
-                ' ',
-                live && (React__default["default"].createElement("span", { className: 'str-chat__header-livestream-left--livelabel' }, t('live')))),
-            subtitle && React__default["default"].createElement("p", { className: 'str-chat__header-livestream-left--subtitle' }, subtitle),
-            React__default["default"].createElement("p", { className: 'str-chat__header-livestream-left--members str-chat__channel-header-info' },
-                !live && !!member_count && member_count > 0 && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    t('{{ memberCount }} members', {
-                        memberCount: member_count,
-                    }),
-                    ",",
-                    ' ')),
-                t('{{ watcherCount }} online', { watcherCount: watcher_count })))));
-};
-/**
- * The ChannelHeader component renders some basic information about a Channel.
- */
-var ChannelHeader = React__default["default"].memo(UnMemoizedChannelHeader);
-
 var ConnectionErrorIcon = function () { return (React__default["default"].createElement("svg", { height: '78px', version: '1.1', viewBox: '0 0 78 78', width: '78px', xmlns: 'http://www.w3.org/2000/svg' },
     React__default["default"].createElement("title", null, "Connection Error"),
     React__default["default"].createElement("g", { fill: 'none', fillRule: 'evenodd', id: 'Interactions', stroke: 'none', strokeWidth: '1' },
@@ -49455,7 +49399,6 @@ exports.CardContainer = CardContainer;
 exports.Channel = Channel;
 exports.ChannelActionContext = ChannelActionContext;
 exports.ChannelActionProvider = ChannelActionProvider;
-exports.ChannelHeader = ChannelHeader;
 exports.ChannelList = ChannelList;
 exports.ChannelListContext = ChannelListContext;
 exports.ChannelListContextProvider = ChannelListContextProvider;

package/dist/browser.full-bundle.js

@@ -47665,8 +47665,8 @@ var StreamChatReact = (function (exports, React$2, ReactDOM, streamChat, Picker)
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useCreateChannelStateContext = function (value) {
-        var _a;
-        var acceptedFiles = value.acceptedFiles, channel = value.channel, _b = value.channelCapabilitiesArray, channelCapabilitiesArray = _b === void 0 ? [] : _b, channelConfig = value.channelConfig, debounceURLEnrichmentMs = value.debounceURLEnrichmentMs, dragAndDropWindow = value.dragAndDropWindow, enrichURLForPreview = value.enrichURLForPreview, giphyVersion = value.giphyVersion, error = value.error, findURLFn = value.findURLFn, hasMore = value.hasMore, hasMoreNewer = value.hasMoreNewer, imageAttachmentSizeHandler = value.imageAttachmentSizeHandler, suppressAutoscroll = value.suppressAutoscroll, highlightedMessageId = value.highlightedMessageId, loading = value.loading, loadingMore = value.loadingMore, maxNumberOfFiles = value.maxNumberOfFiles, members = value.members, _c = value.messages, messages = _c === void 0 ? [] : _c, multipleUploads = value.multipleUploads, mutes = value.mutes, notifications = value.notifications, onLinkPreviewDismissed = value.onLinkPreviewDismissed, pinnedMessages = value.pinnedMessages, quotedMessage = value.quotedMessage, _d = value.read, read = _d === void 0 ? {} : _d, shouldGenerateVideoThumbnail = value.shouldGenerateVideoThumbnail, skipMessageDataMemoization = value.skipMessageDataMemoization, thread = value.thread, threadHasMore = value.threadHasMore, threadLoadingMore = value.threadLoadingMore, _e = value.threadMessages, threadMessages = _e === void 0 ? [] : _e, channelUnreadUiState = value.channelUnreadUiState, videoAttachmentSizeHandler = value.videoAttachmentSizeHandler, watcherCount = value.watcherCount, watcher_count = value.watcher_count, watchers = value.watchers;
+        var _a, _b;
+        var acceptedFiles = value.acceptedFiles, channel = value.channel, _c = value.channelCapabilitiesArray, channelCapabilitiesArray = _c === void 0 ? [] : _c, channelConfig = value.channelConfig, debounceURLEnrichmentMs = value.debounceURLEnrichmentMs, dragAndDropWindow = value.dragAndDropWindow, enrichURLForPreview = value.enrichURLForPreview, giphyVersion = value.giphyVersion, error = value.error, findURLFn = value.findURLFn, hasMore = value.hasMore, hasMoreNewer = value.hasMoreNewer, imageAttachmentSizeHandler = value.imageAttachmentSizeHandler, suppressAutoscroll = value.suppressAutoscroll, highlightedMessageId = value.highlightedMessageId, loading = value.loading, loadingMore = value.loadingMore, maxNumberOfFiles = value.maxNumberOfFiles, members = value.members, _d = value.messages, messages = _d === void 0 ? [] : _d, multipleUploads = value.multipleUploads, mutes = value.mutes, notifications = value.notifications, onLinkPreviewDismissed = value.onLinkPreviewDismissed, pinnedMessages = value.pinnedMessages, quotedMessage = value.quotedMessage, _e = value.read, read = _e === void 0 ? {} : _e, shouldGenerateVideoThumbnail = value.shouldGenerateVideoThumbnail, skipMessageDataMemoization = value.skipMessageDataMemoization, thread = value.thread, threadHasMore = value.threadHasMore, threadLoadingMore = value.threadLoadingMore, _f = value.threadMessages, threadMessages = _f === void 0 ? [] : _f, channelUnreadUiState = value.channelUnreadUiState, videoAttachmentSizeHandler = value.videoAttachmentSizeHandler, watcherCount = value.watcherCount, watcher_count = value.watcher_count, watchers = value.watchers;
         var channelId = channel.cid;
         var lastRead = channel.initialized && ((_a = channel.lastRead()) === null || _a === void 0 ? void 0 : _a.getTime());
         var membersLength = Object.keys(members || []).length;
@@ -47747,6 +47747,7 @@ var StreamChatReact = (function (exports, React$2, ReactDOM, streamChat, Picker)
         }); }, 
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [
+            (_b = channel.data) === null || _b === void 0 ? void 0 : _b.name,
             channelId,
             channelUnreadUiState,
             debounceURLEnrichmentMs,
@@ -60406,7 +60407,7 @@ var StreamChatReact = (function (exports, React$2, ReactDOM, streamChat, Picker)
     };
     var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, formatDate = virtuosoContext.formatDate, lastReadDate = virtuosoContext.lastReadDate, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, messageGroupStyles = virtuosoContext.messageGroupStyles, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, reactionDetailsSort = virtuosoContext.reactionDetailsSort, shouldGroupByUser = virtuosoContext.shouldGroupByUser, sortReactionDetails = virtuosoContext.sortReactionDetails, sortReactions = virtuosoContext.sortReactions, _j = virtuosoContext.unreadMessageCount, unreadMessageCount = _j === void 0 ? 0 : _j, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
+        var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, formatDate = virtuosoContext.formatDate, lastReadDate = virtuosoContext.lastReadDate, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, messageGroupStyles = virtuosoContext.messageGroupStyles, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, openThread = virtuosoContext.openThread, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, reactionDetailsSort = virtuosoContext.reactionDetailsSort, shouldGroupByUser = virtuosoContext.shouldGroupByUser, sortReactionDetails = virtuosoContext.sortReactionDetails, sortReactions = virtuosoContext.sortReactions, _j = virtuosoContext.unreadMessageCount, unreadMessageCount = _j === void 0 ? 0 : _j, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
         var streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
         if (customMessageRenderer) {
             return customMessageRenderer(messageList, streamMessageIndex);
@@ -60448,7 +60449,7 @@ var StreamChatReact = (function (exports, React$2, ReactDOM, streamChat, Picker)
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             showUnreadSeparatorAbove && (React__default["default"].createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
                 React__default["default"].createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount }))),
-            React__default["default"].createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: (_g = virtuosoRef.current) === null || _g === void 0 ? void 0 : _g.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [(_h = messageGroupStyles[message.id]) !== null && _h !== void 0 ? _h : ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
+            React__default["default"].createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: (_g = virtuosoRef.current) === null || _g === void 0 ? void 0 : _g.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [(_h = messageGroupStyles[message.id]) !== null && _h !== void 0 ? _h : ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, openThread: openThread, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
             showUnreadSeparatorBelow && (React__default["default"].createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
                 React__default["default"].createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
     };
@@ -60484,7 +60485,7 @@ var StreamChatReact = (function (exports, React$2, ReactDOM, streamChat, Picker)
     }
     var VirtualizedMessageListWithContext = function (props) {
         var _a, _b;
-        var additionalMessageInputProps = props.additionalMessageInputProps, _c = props.additionalVirtuosoProps, additionalVirtuosoProps = _c === void 0 ? {} : _c, channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _d = props.disableDateSeparator, disableDateSeparator = _d === void 0 ? true : _d, formatDate = props.formatDate, groupStyles = props.groupStyles, hasMoreNewer = props.hasMoreNewer, head = props.head, _e = props.hideDeletedMessages, hideDeletedMessages = _e === void 0 ? false : _e, _f = props.hideNewMessageSeparator, hideNewMessageSeparator = _f === void 0 ? false : _f, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, maxTimeBetweenGroupedMessages = props.maxTimeBetweenGroupedMessages, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _g = props.messageLimit, messageLimit = _g === void 0 ? DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _g, messages = props.messages, notifications = props.notifications, 
+        var additionalMessageInputProps = props.additionalMessageInputProps, _c = props.additionalVirtuosoProps, additionalVirtuosoProps = _c === void 0 ? {} : _c, channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _d = props.disableDateSeparator, disableDateSeparator = _d === void 0 ? true : _d, formatDate = props.formatDate, groupStyles = props.groupStyles, hasMoreNewer = props.hasMoreNewer, head = props.head, _e = props.hideDeletedMessages, hideDeletedMessages = _e === void 0 ? false : _e, _f = props.hideNewMessageSeparator, hideNewMessageSeparator = _f === void 0 ? false : _f, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, maxTimeBetweenGroupedMessages = props.maxTimeBetweenGroupedMessages, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _g = props.messageLimit, messageLimit = _g === void 0 ? DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _g, messages = props.messages, notifications = props.notifications, openThread = props.openThread, 
         // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
         _h = props.overscan, 
         // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
@@ -60661,6 +60662,7 @@ var StreamChatReact = (function (exports, React$2, ReactDOM, streamChat, Picker)
                             messageGroupStyles: messageGroupStyles,
                             MessageSystem: MessageSystem,
                             numItemsPrepended: numItemsPrepended,
+                            openThread: openThread,
                             ownMessagesReadByOthers: ownMessagesReadByOthers,
                             processedMessages: processedMessages,
                             reactionDetailsSort: reactionDetailsSort,
@@ -61886,60 +61888,49 @@ var StreamChatReact = (function (exports, React$2, ReactDOM, streamChat, Picker)
         }
         return t('Empty message...');
     };
-    var getDisplayTitle = function (channel, currentUser) {
+    var getChannelDisplayInfo = function (info, channel, currentUser) {
         var _a, _b;
-        var title = (_a = channel.data) === null || _a === void 0 ? void 0 : _a.name;
+        if ((_a = channel.data) === null || _a === void 0 ? void 0 : _a[info])
+            return channel.data[info];
         var members = Object.values(channel.state.members);
-        if (!title && members.length === 2) {
-            var otherMember = members.find(function (member) { var _a; return ((_a = member.user) === null || _a === void 0 ? void 0 : _a.id) !== (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id); });
-            if ((_b = otherMember === null || otherMember === void 0 ? void 0 : otherMember.user) === null || _b === void 0 ? void 0 : _b.name) {
-                title = otherMember.user.name;
-            }
-        }
-        return title;
-    };
-    var getDisplayImage = function (channel, currentUser) {
-        var _a, _b;
-        var image = (_a = channel.data) === null || _a === void 0 ? void 0 : _a.image;
-        var members = Object.values(channel.state.members);
-        if (!image && members.length === 2) {
-            var otherMember = members.find(function (member) { var _a; return ((_a = member.user) === null || _a === void 0 ? void 0 : _a.id) !== (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id); });
-            if ((_b = otherMember === null || otherMember === void 0 ? void 0 : otherMember.user) === null || _b === void 0 ? void 0 : _b.image) {
-                image = otherMember.user.image;
-            }
-        }
-        return image;
+        if (members.length !== 2)
+            return;
+        var otherMember = members.find(function (member) { var _a; return ((_a = member.user) === null || _a === void 0 ? void 0 : _a.id) !== (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id); });
+        return (_b = otherMember === null || otherMember === void 0 ? void 0 : otherMember.user) === null || _b === void 0 ? void 0 : _b[info];
     };
+    var getDisplayTitle = function (channel, currentUser) { return getChannelDisplayInfo('name', channel, currentUser); };
+    var getDisplayImage = function (channel, currentUser) { return getChannelDisplayInfo('image', channel, currentUser); };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChannelPreviewInfo = function (props) {
         var channel = props.channel, overrideImage = props.overrideImage, overrideTitle = props.overrideTitle;
-        var client = useChatContext('ChannelPreview').client;
-        var _a = React$2.useState(getDisplayTitle(channel, client.user)), displayTitle = _a[0], setDisplayTitle = _a[1];
-        var _b = React$2.useState(getDisplayImage(channel, client.user)), displayImage = _b[0], setDisplayImage = _b[1];
+        var client = useChatContext('useChannelPreviewInfo').client;
+        var _a = React$2.useState(function () { return overrideTitle || getDisplayTitle(channel, client.user); }), displayTitle = _a[0], setDisplayTitle = _a[1];
+        var _b = React$2.useState(function () { return overrideImage || getDisplayImage(channel, client.user); }), displayImage = _b[0], setDisplayImage = _b[1];
         React$2.useEffect(function () {
-            var handleEvent = function () {
-                setDisplayTitle(function (displayTitle) {
-                    var newDisplayTitle = getDisplayTitle(channel, client.user);
-                    return displayTitle !== newDisplayTitle ? newDisplayTitle : displayTitle;
-                });
-                setDisplayImage(function (displayImage) {
-                    var newDisplayImage = getDisplayImage(channel, client.user);
-                    return displayImage !== newDisplayImage ? newDisplayImage : displayImage;
-                });
+            if (overrideTitle && overrideImage)
+                return;
+            var updateTitles = function () {
+                if (!overrideTitle)
+                    setDisplayTitle(getDisplayTitle(channel, client.user));
+                if (!overrideImage)
+                    setDisplayImage(getDisplayImage(channel, client.user));
             };
-            client.on('user.updated', handleEvent);
+            updateTitles();
+            client.on('user.updated', updateTitles);
             return function () {
-                client.off('user.updated', handleEvent);
+                client.off('user.updated', updateTitles);
             };
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, []);
+        }, [channel, channel.data, client, overrideImage, overrideTitle]);
         return {
             displayImage: overrideImage || displayImage,
             displayTitle: overrideTitle || displayTitle,
         };
     };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedChannelHeader = function (props) {
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
+     * The ChannelHeader component renders some basic information about a Channel.
+     */
+    var ChannelHeader = function (props) {
         var _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar : _a, _b = props.MenuIcon, MenuIcon = _b === void 0 ? MenuIcon$1 : _b, overrideImage = props.image, live = props.live, overrideTitle = props.title;
         var _c = useChannelStateContext('ChannelHeader'), channel = _c.channel, watcher_count = _c.watcher_count;
         var openMobileNav = useChatContext('ChannelHeader').openMobileNav;
@@ -61969,10 +61960,6 @@ var StreamChatReact = (function (exports, React$2, ReactDOM, streamChat, Picker)
                         ' ')),
                     t('{{ watcherCount }} online', { watcherCount: watcher_count })))));
     };
-    /**
-     * The ChannelHeader component renders some basic information about a Channel.
-     */
-    var ChannelHeader = React__default["default"].memo(UnMemoizedChannelHeader);
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
@@ -63180,7 +63167,7 @@ var StreamChatReact = (function (exports, React$2, ReactDOM, streamChat, Picker)
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.23.9';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.24.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;