stream-chat-react 11.23.8 → 11.23.10

package/dist/{Window-60c672e3.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,
@@ -37030,18 +37031,29 @@ var ACTIONS_NOT_WORKING_IN_THREAD = [
     MESSAGE_ACTIONS.reply,
     MESSAGE_ACTIONS.markUnread,
 ];
-var showMessageActionsBox = function (actions, inThread) {
-    if (actions.length === 0) {
+/**
+ * @deprecated use `shouldRenderMessageActions` instead
+ */
+var showMessageActionsBox = function (actions, inThread) { return shouldRenderMessageActions({ inThread: inThread, messageActions: actions }); };
+var shouldRenderMessageActions = function (_a) {
+    var customMessageActions = _a.customMessageActions, CustomMessageActionsList = _a.CustomMessageActionsList, inThread = _a.inThread, messageActions = _a.messageActions;
+    if (typeof CustomMessageActionsList !== 'undefined' ||
+        typeof customMessageActions !== 'undefined')
+        return true;
+    if (!messageActions.length)
         return false;
-    }
     if (inThread &&
-        actions.filter(function (action) { return !ACTIONS_NOT_WORKING_IN_THREAD.includes(action); }).length === 0) {
+        messageActions.filter(function (action) { return !ACTIONS_NOT_WORKING_IN_THREAD.includes(action); }).length === 0) {
         return false;
     }
-    if (actions.length === 1 && (actions.includes('react') || actions.includes('reply'))) {
+    if (messageActions.length === 1 &&
+        (messageActions.includes(MESSAGE_ACTIONS.react) ||
+            messageActions.includes(MESSAGE_ACTIONS.reply))) {
         return false;
     }
-    if (actions.length === 2 && actions.includes('react') && actions.includes('reply')) {
+    if (messageActions.length === 2 &&
+        messageActions.includes(MESSAGE_ACTIONS.react) &&
+        messageActions.includes(MESSAGE_ACTIONS.reply)) {
         return false;
     }
     return true;
@@ -39181,7 +39193,8 @@ function useMessageActionsBoxPopper(_a) {
 var MessageActions = function (props) {
     var _a = props.ActionsIcon, ActionsIcon$1 = _a === void 0 ? ActionsIcon : _a, _b = props.customWrapperClass, customWrapperClass = _b === void 0 ? '' : _b, propGetMessageActions = props.getMessageActions, propHandleDelete = props.handleDelete, propHandleFlag = props.handleFlag, propHandleMarkUnread = props.handleMarkUnread, propHandleMute = props.handleMute, propHandlePin = props.handlePin, inline = props.inline, propMessage = props.message, messageWrapperRef = props.messageWrapperRef, mine = props.mine;
     var mutes = useChatContext('MessageActions').mutes;
-    var _c = useMessageContext('MessageActions'), customMessageActions = _c.customMessageActions, contextGetMessageActions = _c.getMessageActions, contextHandleDelete = _c.handleDelete, contextHandleFlag = _c.handleFlag, contextHandleMarkUnread = _c.handleMarkUnread, contextHandleMute = _c.handleMute, contextHandlePin = _c.handlePin, isMyMessage = _c.isMyMessage, contextMessage = _c.message, setEditingState = _c.setEditingState;
+    var _c = useMessageContext('MessageActions'), customMessageActions = _c.customMessageActions, contextGetMessageActions = _c.getMessageActions, contextHandleDelete = _c.handleDelete, contextHandleFlag = _c.handleFlag, contextHandleMarkUnread = _c.handleMarkUnread, contextHandleMute = _c.handleMute, contextHandlePin = _c.handlePin, isMyMessage = _c.isMyMessage, contextMessage = _c.message, setEditingState = _c.setEditingState, threadList = _c.threadList;
+    var CustomMessageActionsList = useComponentContext('MessageActions').CustomMessageActionsList;
     var t = useTranslationContext('MessageActions').t;
     var getMessageActions = propGetMessageActions || contextGetMessageActions;
     var handleDelete = propHandleDelete || contextHandleDelete;
@@ -39193,13 +39206,19 @@ var MessageActions = function (props) {
     var isMine = mine ? mine() : isMyMessage();
     var _d = React.useState(false), actionsBoxOpen = _d[0], setActionsBoxOpen = _d[1];
     var isMuted = React.useCallback(function () { return isUserMuted(message, mutes); }, [message, mutes]);
+    var messageActions = getMessageActions();
+    var renderMessageActions = shouldRenderMessageActions({
+        customMessageActions: customMessageActions,
+        CustomMessageActionsList: CustomMessageActionsList,
+        inThread: threadList,
+        messageActions: messageActions,
+    });
     var hideOptions = React.useCallback(function (event) {
         if (event instanceof KeyboardEvent && event.key !== 'Escape') {
             return;
         }
         setActionsBoxOpen(false);
     }, []);
-    var messageActions = getMessageActions();
     var messageDeletedAt = !!(message === null || message === void 0 ? void 0 : message.deleted_at);
     React.useEffect(function () {
         if (messageWrapperRef === null || messageWrapperRef === void 0 ? void 0 : messageWrapperRef.current) {
@@ -39227,7 +39246,7 @@ var MessageActions = function (props) {
         placement: isMine ? 'top-end' : 'top-start',
         referenceElement: actionsBoxButtonRef.current,
     }), attributes = _e.attributes, popperElementRef = _e.popperElementRef, styles = _e.styles;
-    if (!messageActions.length && !customMessageActions)
+    if (!renderMessageActions)
         return null;
     return (React__default["default"].createElement(MessageActionsWrapper, { customWrapperClass: customWrapperClass, inline: inline, setActionsBoxOpen: setActionsBoxOpen },
         React__default["default"].createElement(MessageActionsBox, exports.__assign({}, attributes.popper, { getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: isMine, open: actionsBoxOpen, ref: popperElementRef, style: styles.popper })),
@@ -39236,7 +39255,7 @@ var MessageActions = function (props) {
 };
 var MessageActionsWrapper = function (props) {
     var children = props.children, customWrapperClass = props.customWrapperClass, inline = props.inline, setActionsBoxOpen = props.setActionsBoxOpen;
-    var defaultWrapperClass = "\n  str-chat__message-simple__actions__action\n  str-chat__message-simple__actions__action--options\n  str-chat__message-actions-container";
+    var defaultWrapperClass = clsx('str-chat__message-simple__actions__action', 'str-chat__message-simple__actions__action--options', 'str-chat__message-actions-container');
     var wrapperClass = customWrapperClass || defaultWrapperClass;
     var onClickOptionsAction = function (event) {
         event.stopPropagation();
@@ -39254,11 +39273,10 @@ var MessageActionsWrapper = function (props) {
 
 var UnMemoizedMessageOptions = function (props) {
     var _a = props.ActionsIcon, ActionsIcon$1 = _a === void 0 ? ActionsIcon : _a, _b = props.displayReplies, displayReplies = _b === void 0 ? true : _b, propHandleOpenThread = props.handleOpenThread, messageWrapperRef = props.messageWrapperRef, _c = props.ReactionIcon, ReactionIcon$1 = _c === void 0 ? ReactionIcon : _c, _d = props.theme, theme = _d === void 0 ? 'simple' : _d, _e = props.ThreadIcon, ThreadIcon$1 = _e === void 0 ? ThreadIcon : _e;
-    var _f = useMessageContext('MessageOptions'), customMessageActions = _f.customMessageActions, getMessageActions = _f.getMessageActions, contextHandleOpenThread = _f.handleOpenThread, initialMessage = _f.initialMessage, message = _f.message, onReactionListClick = _f.onReactionListClick, showDetailedReactions = _f.showDetailedReactions, threadList = _f.threadList;
+    var _f = useMessageContext('MessageOptions'), getMessageActions = _f.getMessageActions, contextHandleOpenThread = _f.handleOpenThread, initialMessage = _f.initialMessage, message = _f.message, onReactionListClick = _f.onReactionListClick, showDetailedReactions = _f.showDetailedReactions, threadList = _f.threadList;
     var t = useTranslationContext('MessageOptions').t;
     var handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
     var messageActions = getMessageActions();
-    var showActionsBox = showMessageActionsBox(messageActions, threadList) || !!customMessageActions;
     var shouldShowReactions = messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
     var shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && displayReplies && !threadList;
     if (!message.type ||
@@ -39272,7 +39290,7 @@ var UnMemoizedMessageOptions = function (props) {
     }
     var rootClassName = "str-chat__message-".concat(theme, "__actions str-chat__message-options");
     return (React__default["default"].createElement("div", { className: rootClassName, "data-testid": 'message-options' },
-        showActionsBox && (React__default["default"].createElement(MessageActions, { ActionsIcon: ActionsIcon$1, messageWrapperRef: messageWrapperRef })),
+        React__default["default"].createElement(MessageActions, { ActionsIcon: ActionsIcon$1, messageWrapperRef: messageWrapperRef }),
         shouldShowReplies && (React__default["default"].createElement("button", { "aria-label": t('aria/Open Thread'), className: "str-chat__message-".concat(theme, "__actions__action str-chat__message-").concat(theme, "__actions__action--thread str-chat__message-reply-in-thread-button"), "data-testid": 'thread-action', onClick: handleOpenThread },
             React__default["default"].createElement(ThreadIcon$1, { className: 'str-chat__message-action-icon' }))),
         shouldShowReactions && (React__default["default"].createElement("button", { "aria-expanded": showDetailedReactions, "aria-label": t('aria/Open Reaction Selector'), className: "str-chat__message-".concat(theme, "__actions__action str-chat__message-").concat(theme, "__actions__action--reactions str-chat__message-reactions-button"), "data-testid": 'message-reaction-action', onClick: onReactionListClick },
@@ -48090,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;
@@ -48123,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' },
@@ -49438,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;
@@ -49680,6 +49640,7 @@ exports.renderPreviewText = renderPreviewText;
 exports.renderText = renderText;
 exports.resampleWaveformData = resampleWaveformData;
 exports.ruTranslations = ruTranslations;
+exports.shouldRenderMessageActions = shouldRenderMessageActions;
 exports.showMessageActionsBox = showMessageActionsBox;
 exports.trTranslations = trTranslations;
 exports.upSample = upSample;

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,
@@ -48182,18 +48183,29 @@ var StreamChatReact = (function (exports, React$2, ReactDOM, streamChat, Picker)
         MESSAGE_ACTIONS.reply,
         MESSAGE_ACTIONS.markUnread,
     ];
-    var showMessageActionsBox = function (actions, inThread) {
-        if (actions.length === 0) {
+    /**
+     * @deprecated use `shouldRenderMessageActions` instead
+     */
+    var showMessageActionsBox = function (actions, inThread) { return shouldRenderMessageActions({ inThread: inThread, messageActions: actions }); };
+    var shouldRenderMessageActions = function (_a) {
+        var customMessageActions = _a.customMessageActions, CustomMessageActionsList = _a.CustomMessageActionsList, inThread = _a.inThread, messageActions = _a.messageActions;
+        if (typeof CustomMessageActionsList !== 'undefined' ||
+            typeof customMessageActions !== 'undefined')
+            return true;
+        if (!messageActions.length)
             return false;
-        }
         if (inThread &&
-            actions.filter(function (action) { return !ACTIONS_NOT_WORKING_IN_THREAD.includes(action); }).length === 0) {
+            messageActions.filter(function (action) { return !ACTIONS_NOT_WORKING_IN_THREAD.includes(action); }).length === 0) {
             return false;
         }
-        if (actions.length === 1 && (actions.includes('react') || actions.includes('reply'))) {
+        if (messageActions.length === 1 &&
+            (messageActions.includes(MESSAGE_ACTIONS.react) ||
+                messageActions.includes(MESSAGE_ACTIONS.reply))) {
             return false;
         }
-        if (actions.length === 2 && actions.includes('react') && actions.includes('reply')) {
+        if (messageActions.length === 2 &&
+            messageActions.includes(MESSAGE_ACTIONS.react) &&
+            messageActions.includes(MESSAGE_ACTIONS.reply)) {
             return false;
         }
         return true;
@@ -50363,7 +50375,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 MessageActions = function (props) {
         var _a = props.ActionsIcon, ActionsIcon$1 = _a === void 0 ? ActionsIcon : _a, _b = props.customWrapperClass, customWrapperClass = _b === void 0 ? '' : _b, propGetMessageActions = props.getMessageActions, propHandleDelete = props.handleDelete, propHandleFlag = props.handleFlag, propHandleMarkUnread = props.handleMarkUnread, propHandleMute = props.handleMute, propHandlePin = props.handlePin, inline = props.inline, propMessage = props.message, messageWrapperRef = props.messageWrapperRef, mine = props.mine;
         var mutes = useChatContext('MessageActions').mutes;
-        var _c = useMessageContext('MessageActions'), customMessageActions = _c.customMessageActions, contextGetMessageActions = _c.getMessageActions, contextHandleDelete = _c.handleDelete, contextHandleFlag = _c.handleFlag, contextHandleMarkUnread = _c.handleMarkUnread, contextHandleMute = _c.handleMute, contextHandlePin = _c.handlePin, isMyMessage = _c.isMyMessage, contextMessage = _c.message, setEditingState = _c.setEditingState;
+        var _c = useMessageContext('MessageActions'), customMessageActions = _c.customMessageActions, contextGetMessageActions = _c.getMessageActions, contextHandleDelete = _c.handleDelete, contextHandleFlag = _c.handleFlag, contextHandleMarkUnread = _c.handleMarkUnread, contextHandleMute = _c.handleMute, contextHandlePin = _c.handlePin, isMyMessage = _c.isMyMessage, contextMessage = _c.message, setEditingState = _c.setEditingState, threadList = _c.threadList;
+        var CustomMessageActionsList = useComponentContext('MessageActions').CustomMessageActionsList;
         var t = useTranslationContext('MessageActions').t;
         var getMessageActions = propGetMessageActions || contextGetMessageActions;
         var handleDelete = propHandleDelete || contextHandleDelete;
@@ -50375,13 +50388,19 @@ var StreamChatReact = (function (exports, React$2, ReactDOM, streamChat, Picker)
         var isMine = mine ? mine() : isMyMessage();
         var _d = React$2.useState(false), actionsBoxOpen = _d[0], setActionsBoxOpen = _d[1];
         var isMuted = React$2.useCallback(function () { return isUserMuted(message, mutes); }, [message, mutes]);
+        var messageActions = getMessageActions();
+        var renderMessageActions = shouldRenderMessageActions({
+            customMessageActions: customMessageActions,
+            CustomMessageActionsList: CustomMessageActionsList,
+            inThread: threadList,
+            messageActions: messageActions,
+        });
         var hideOptions = React$2.useCallback(function (event) {
             if (event instanceof KeyboardEvent && event.key !== 'Escape') {
                 return;
             }
             setActionsBoxOpen(false);
         }, []);
-        var messageActions = getMessageActions();
         var messageDeletedAt = !!(message === null || message === void 0 ? void 0 : message.deleted_at);
         React$2.useEffect(function () {
             if (messageWrapperRef === null || messageWrapperRef === void 0 ? void 0 : messageWrapperRef.current) {
@@ -50409,7 +50428,7 @@ var StreamChatReact = (function (exports, React$2, ReactDOM, streamChat, Picker)
             placement: isMine ? 'top-end' : 'top-start',
             referenceElement: actionsBoxButtonRef.current,
         }), attributes = _e.attributes, popperElementRef = _e.popperElementRef, styles = _e.styles;
-        if (!messageActions.length && !customMessageActions)
+        if (!renderMessageActions)
             return null;
         return (React__default["default"].createElement(MessageActionsWrapper, { customWrapperClass: customWrapperClass, inline: inline, setActionsBoxOpen: setActionsBoxOpen },
             React__default["default"].createElement(MessageActionsBox, __assign({}, attributes.popper, { getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: isMine, open: actionsBoxOpen, ref: popperElementRef, style: styles.popper })),
@@ -50418,7 +50437,7 @@ var StreamChatReact = (function (exports, React$2, ReactDOM, streamChat, Picker)
     };
     var MessageActionsWrapper = function (props) {
         var children = props.children, customWrapperClass = props.customWrapperClass, inline = props.inline, setActionsBoxOpen = props.setActionsBoxOpen;
-        var defaultWrapperClass = "\n  str-chat__message-simple__actions__action\n  str-chat__message-simple__actions__action--options\n  str-chat__message-actions-container";
+        var defaultWrapperClass = clsx('str-chat__message-simple__actions__action', 'str-chat__message-simple__actions__action--options', 'str-chat__message-actions-container');
         var wrapperClass = customWrapperClass || defaultWrapperClass;
         var onClickOptionsAction = function (event) {
             event.stopPropagation();
@@ -50438,11 +50457,10 @@ 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 UnMemoizedMessageOptions = function (props) {
         var _a = props.ActionsIcon, ActionsIcon$1 = _a === void 0 ? ActionsIcon : _a, _b = props.displayReplies, displayReplies = _b === void 0 ? true : _b, propHandleOpenThread = props.handleOpenThread, messageWrapperRef = props.messageWrapperRef, _c = props.ReactionIcon, ReactionIcon$1 = _c === void 0 ? ReactionIcon : _c, _d = props.theme, theme = _d === void 0 ? 'simple' : _d, _e = props.ThreadIcon, ThreadIcon$1 = _e === void 0 ? ThreadIcon : _e;
-        var _f = useMessageContext('MessageOptions'), customMessageActions = _f.customMessageActions, getMessageActions = _f.getMessageActions, contextHandleOpenThread = _f.handleOpenThread, initialMessage = _f.initialMessage, message = _f.message, onReactionListClick = _f.onReactionListClick, showDetailedReactions = _f.showDetailedReactions, threadList = _f.threadList;
+        var _f = useMessageContext('MessageOptions'), getMessageActions = _f.getMessageActions, contextHandleOpenThread = _f.handleOpenThread, initialMessage = _f.initialMessage, message = _f.message, onReactionListClick = _f.onReactionListClick, showDetailedReactions = _f.showDetailedReactions, threadList = _f.threadList;
         var t = useTranslationContext('MessageOptions').t;
         var handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
         var messageActions = getMessageActions();
-        var showActionsBox = showMessageActionsBox(messageActions, threadList) || !!customMessageActions;
         var shouldShowReactions = messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
         var shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && displayReplies && !threadList;
         if (!message.type ||
@@ -50456,7 +50474,7 @@ var StreamChatReact = (function (exports, React$2, ReactDOM, streamChat, Picker)
         }
         var rootClassName = "str-chat__message-".concat(theme, "__actions str-chat__message-options");
         return (React__default["default"].createElement("div", { className: rootClassName, "data-testid": 'message-options' },
-            showActionsBox && (React__default["default"].createElement(MessageActions, { ActionsIcon: ActionsIcon$1, messageWrapperRef: messageWrapperRef })),
+            React__default["default"].createElement(MessageActions, { ActionsIcon: ActionsIcon$1, messageWrapperRef: messageWrapperRef }),
             shouldShowReplies && (React__default["default"].createElement("button", { "aria-label": t('aria/Open Thread'), className: "str-chat__message-".concat(theme, "__actions__action str-chat__message-").concat(theme, "__actions__action--thread str-chat__message-reply-in-thread-button"), "data-testid": 'thread-action', onClick: handleOpenThread },
                 React__default["default"].createElement(ThreadIcon$1, { className: 'str-chat__message-action-icon' }))),
             shouldShowReactions && (React__default["default"].createElement("button", { "aria-expanded": showDetailedReactions, "aria-label": t('aria/Open Reaction Selector'), className: "str-chat__message-".concat(theme, "__actions__action str-chat__message-").concat(theme, "__actions__action--reactions str-chat__message-reactions-button"), "data-testid": 'message-reaction-action', onClick: onReactionListClick },
@@ -61869,60 +61887,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;
@@ -61952,10 +61959,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||{};
 
@@ -63163,7 +63166,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.8';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.23.10';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -97543,6 +97546,7 @@ bitsperframe:             %d
     exports.renderText = renderText;
     exports.resampleWaveformData = resampleWaveformData;
     exports.ruTranslations = ruTranslations;
+    exports.shouldRenderMessageActions = shouldRenderMessageActions;
     exports.showMessageActionsBox = showMessageActionsBox;
     exports.trTranslations = trTranslations;
     exports.upSample = upSample;