stream-chat-react 9.1.3 → 9.2.0

package/dist/index.cjs.js

@@ -2866,12 +2866,26 @@ var useUserRole = function (message, onlySenderCanEdit, disableQuotedMessages) {
     var _a, _b, _c;
     var _d = useChannelStateContext('useUserRole'), channel = _d.channel, _e = _d.channelCapabilities, channelCapabilities = _e === void 0 ? {} : _e, channelConfig = _d.channelConfig;
     var client = useChatContext('useUserRole').client;
+    /**
+     * @deprecated as it relies on `membership.role` check which is already deprecated and shouldn't be used anymore.
+     * `isAdmin` will be removed in future release. See `channelCapabilities`.
+     */
     var isAdmin = ((_a = client.user) === null || _a === void 0 ? void 0 : _a.role) === 'admin' || channel.state.membership.role === 'admin';
-    var isMyMessage = client.userID === ((_b = message.user) === null || _b === void 0 ? void 0 : _b.id);
+    /**
+     * @deprecated as it relies on `membership.role` check which is already deprecated and shouldn't be used anymore.
+     * `isOwner` will be removed in future release. See `channelCapabilities`.
+     */
     var isOwner = channel.state.membership.role === 'owner';
-    var isModerator = ((_c = client.user) === null || _c === void 0 ? void 0 : _c.role) === 'channel_moderator' ||
+    /**
+     * @deprecated as it relies on `membership.role` check which is already deprecated and shouldn't be used anymore.
+     * `isModerator` will be removed in future release. See `channelCapabilities`.
+     */
+    var isModerator = ((_b = client.user) === null || _b === void 0 ? void 0 : _b.role) === 'channel_moderator' ||
         channel.state.membership.role === 'channel_moderator' ||
-        channel.state.membership.role === 'moderator';
+        channel.state.membership.role === 'moderator' ||
+        channel.state.membership.is_moderator === true ||
+        channel.state.membership.channel_role === 'channel_moderator';
+    var isMyMessage = client.userID === ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id);
     var canEdit = (!onlySenderCanEdit && channelCapabilities['update-any-message']) ||
         (isMyMessage && channelCapabilities['update-own-message']);
     var canDelete = channelCapabilities['delete-any-message'] ||
@@ -3092,18 +3106,9 @@ var showMessageActionsBox = function (actions, inThread) {
     }
     return true;
 };
-var areMessagePropsEqual = function (prevProps, nextProps) {
+var areMessagesEqual = function (prevMessage, nextMessage) {
     var _a, _b, _c, _d, _e, _f;
-    var prevMessage = prevProps.message, prevMessageUI = prevProps.Message;
-    var nextMessage = nextProps.message, nextMessageUI = nextProps.Message;
-    if (prevMessageUI !== nextMessageUI)
-        return false;
-    if (prevProps.endOfGroup !== nextProps.endOfGroup)
-        return false;
-    if (nextProps.showDetailedReactions !== prevProps.showDetailedReactions) {
-        return false;
-    }
-    var messagesAreEqual = prevMessage.deleted_at === nextMessage.deleted_at &&
+    return prevMessage.deleted_at === nextMessage.deleted_at &&
         ((_a = prevMessage.latest_reactions) === null || _a === void 0 ? void 0 : _a.length) === ((_b = nextMessage.latest_reactions) === null || _b === void 0 ? void 0 : _b.length) &&
         ((_c = prevMessage.own_reactions) === null || _c === void 0 ? void 0 : _c.length) === ((_d = nextMessage.own_reactions) === null || _d === void 0 ? void 0 : _d.length) &&
         prevMessage.pinned === nextMessage.pinned &&
@@ -3113,9 +3118,22 @@ var areMessagePropsEqual = function (prevProps, nextProps) {
         prevMessage.type === nextMessage.type &&
         prevMessage.updated_at === nextMessage.updated_at &&
         ((_e = prevMessage.user) === null || _e === void 0 ? void 0 : _e.updated_at) === ((_f = nextMessage.user) === null || _f === void 0 ? void 0 : _f.updated_at);
+};
+var areMessagePropsEqual = function (prevProps, nextProps) {
+    var prevMessage = prevProps.message, prevMessageUI = prevProps.Message;
+    var nextMessage = nextProps.message, nextMessageUI = nextProps.Message;
+    if (prevMessageUI !== nextMessageUI)
+        return false;
+    if (prevProps.endOfGroup !== nextProps.endOfGroup)
+        return false;
+    if (nextProps.showDetailedReactions !== prevProps.showDetailedReactions) {
+        return false;
+    }
+    var messagesAreEqual = areMessagesEqual(prevMessage, nextMessage);
     if (!messagesAreEqual)
         return false;
-    var deepEqualProps = deepequal__default['default'](nextProps.readBy, prevProps.readBy) &&
+    var deepEqualProps = deepequal__default['default'](nextProps.messageActions, prevProps.messageActions) &&
+        deepequal__default['default'](nextProps.readBy, prevProps.readBy) &&
         deepequal__default['default'](nextProps.highlighted, prevProps.highlighted) &&
         deepequal__default['default'](nextProps.groupStyles, prevProps.groupStyles) && // last 3 messages can have different group styles
         deepequal__default['default'](nextProps.mutes, prevProps.mutes) &&
@@ -3126,7 +3144,7 @@ var areMessagePropsEqual = function (prevProps, nextProps) {
     );
 };
 var areMessageUIPropsEqual = function (prevProps, nextProps) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d;
     var prevLastReceivedId = prevProps.lastReceivedId, prevMessage = prevProps.message;
     var nextLastReceivedId = nextProps.lastReceivedId, nextMessage = nextProps.message;
     if (prevProps.editing !== nextProps.editing)
@@ -3146,16 +3164,7 @@ var areMessageUIPropsEqual = function (prevProps, nextProps) {
         prevLastReceivedId !== nextLastReceivedId) {
         return false;
     }
-    return (prevMessage.deleted_at === nextMessage.deleted_at &&
-        ((_e = prevMessage.latest_reactions) === null || _e === void 0 ? void 0 : _e.length) === ((_f = nextMessage.latest_reactions) === null || _f === void 0 ? void 0 : _f.length) &&
-        ((_g = prevMessage.own_reactions) === null || _g === void 0 ? void 0 : _g.length) === ((_h = nextMessage.own_reactions) === null || _h === void 0 ? void 0 : _h.length) &&
-        prevMessage.pinned === nextMessage.pinned &&
-        prevMessage.reply_count === nextMessage.reply_count &&
-        prevMessage.status === nextMessage.status &&
-        prevMessage.text === nextMessage.text &&
-        prevMessage.type === nextMessage.type &&
-        prevMessage.updated_at === nextMessage.updated_at &&
-        ((_j = prevMessage.user) === null || _j === void 0 ? void 0 : _j.updated_at) === ((_k = nextMessage.user) === null || _k === void 0 ? void 0 : _k.updated_at));
+    return areMessagesEqual(prevMessage, nextMessage);
 };
 var messageHasReactions = function (message) { return !!(message === null || message === void 0 ? void 0 : message.latest_reactions) && !!message.latest_reactions.length; };
 var messageHasAttachments = function (message) { return !!(message === null || message === void 0 ? void 0 : message.attachments) && !!message.attachments.length; };
@@ -3315,7 +3324,7 @@ var UnMemoizedMessageActionsBox = function (props) {
     return (React__default['default'].createElement("div", { className: "str-chat__message-actions-box\n        " + (open ? 'str-chat__message-actions-box--open' : '') + "\n        " + (mine ? 'str-chat__message-actions-box--mine' : '') + "\n        " + (reverse ? 'str-chat__message-actions-box--reverse' : '') + "\n      ", "data-testid": 'message-actions-box', ref: checkIfReverse },
         React__default['default'].createElement("div", { "aria-label": 'Message Options', className: 'str-chat__message-actions-list', role: 'listbox' },
             customMessageActions && (React__default['default'].createElement(CustomMessageActionsList, { customMessageActions: customMessageActions, message: message })),
-            messageActions.indexOf(MESSAGE_ACTIONS.quote) > -1 && !message.quoted_message && (React__default['default'].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handleQuote, role: 'option' }, t('Reply'))),
+            messageActions.indexOf(MESSAGE_ACTIONS.quote) > -1 && (React__default['default'].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handleQuote, role: 'option' }, t('Reply'))),
             messageActions.indexOf(MESSAGE_ACTIONS.pin) > -1 && !message.parent_id && (React__default['default'].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handlePin, role: 'option' }, !message.pinned ? t('Pin') : t('Unpin'))),
             messageActions.indexOf(MESSAGE_ACTIONS.flag) > -1 && (React__default['default'].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handleFlag, role: 'option' }, t('Flag'))),
             messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1 && (React__default['default'].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', onClick: handleMute, role: 'option' }, isUserMuted() ? t('Unmute') : t('Mute'))),
@@ -6530,19 +6539,16 @@ var ChannelInner = function (props) {
             }
         });
     }); };
-    var createMessagePreview = function (text, attachments, parent, mentioned_users) {
-        var clientSideID = client.userID + "-" + nanoid.nanoid();
-        return __assign({ __html: text, attachments: attachments, created_at: new Date(), html: text, id: clientSideID, mentioned_users: mentioned_users, reactions: [], status: 'sending', text: text, type: 'regular', user: client.user }, ((parent === null || parent === void 0 ? void 0 : parent.id) ? { parent_id: parent.id } : null));
-    };
     var sendMessage = function (_a, customMessageData) {
-        var _b = _a.attachments, attachments = _b === void 0 ? [] : _b, _c = _a.mentioned_users, mentioned_users = _c === void 0 ? [] : _c, _d = _a.parent, parent = _d === void 0 ? undefined : _d, _e = _a.text, text = _e === void 0 ? '' : _e;
+        var _b = _a.attachments, attachments = _b === void 0 ? [] : _b, _c = _a.mentioned_users, mentioned_users = _c === void 0 ? [] : _c, parent = _a.parent, _d = _a.text, text = _d === void 0 ? '' : _d;
         return __awaiter(void 0, void 0, void 0, function () {
             var messagePreview;
+            var _e;
             return __generator(this, function (_f) {
                 switch (_f.label) {
                     case 0:
                         channel.state.filterErrorMessages();
-                        messagePreview = createMessagePreview(text, attachments, parent, mentioned_users);
+                        messagePreview = __assign({ __html: text, attachments: attachments, created_at: new Date(), html: text, id: (_e = customMessageData === null || customMessageData === void 0 ? void 0 : customMessageData.id) !== null && _e !== void 0 ? _e : client.userID + "-" + nanoid.nanoid(), mentioned_users: mentioned_users, reactions: [], status: 'sending', text: text, type: 'regular', user: client.user }, ((parent === null || parent === void 0 ? void 0 : parent.id) ? { parent_id: parent.id } : null));
                         updateMessage(messagePreview);
                         return [4 /*yield*/, doSendMessage(messagePreview, customMessageData)];
                     case 1:
@@ -7676,7 +7682,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default['default'].memo(UnMemoizedChannelList);
 
-var version = '9.1.3';
+var version = '9.2.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -8076,7 +8082,7 @@ var MessageWithContext = function (props) {
             canReact: canReact,
             canReply: canReply,
         });
-    }, [canDelete, canEdit, canFlag, canMute, canPin, canQuote, canReact, canReply]);
+    }, [messageActions, canDelete, canEdit, canFlag, canMute, canPin, canQuote, canReact, canReply]);
     props.canPin; // eslint-disable-line @typescript-eslint/no-unused-vars
     props.messageActions; // eslint-disable-line @typescript-eslint/no-unused-vars
     props.onlySenderCanEdit; // eslint-disable-line @typescript-eslint/no-unused-vars
@@ -8127,7 +8133,7 @@ var Message = function (props) {
     }), canPin = _d.canPin, handlePin = _d.handlePin;
     var _e = useReactionClick(message, reactionSelectorRef, undefined, closeReactionSelectorOnClick), isReactionEnabled = _e.isReactionEnabled, onReactionListClick = _e.onReactionListClick, showDetailedReactions = _e.showDetailedReactions;
     var highlighted = highlightedMessageId === message.id;
-    return (React__default['default'].createElement(MemoizedMessage, { additionalMessageInputProps: props.additionalMessageInputProps, canPin: canPin, customMessageActions: props.customMessageActions, disableQuotedMessages: props.disableQuotedMessages, endOfGroup: props.endOfGroup, firstOfGroup: props.firstOfGroup, formatDate: props.formatDate, groupedByUser: props.groupedByUser, groupStyles: props.groupStyles, handleAction: handleAction, handleDelete: handleDelete, handleFlag: handleFlag, handleMute: handleMute, handleOpenThread: handleOpenThread, handlePin: handlePin, handleReaction: handleReaction, handleRetry: handleRetry, highlighted: highlighted, initialMessage: props.initialMessage, isReactionEnabled: isReactionEnabled, lastReceivedId: props.lastReceivedId, message: message, Message: props.Message, messageActions: props.messageActions, messageListRect: props.messageListRect, mutes: mutes, onMentionsClickMessage: onMentionsClick, onMentionsHoverMessage: onMentionsHover, onReactionListClick: onReactionListClick, onUserClick: props.onUserClick, onUserHover: props.onUserHover, pinPermissions: props.pinPermissions, reactionSelectorRef: reactionSelectorRef, readBy: props.readBy, renderText: props.renderText, showDetailedReactions: showDetailedReactions, threadList: props.threadList, unsafeHTML: props.unsafeHTML, userRoles: userRoles }));
+    return (React__default['default'].createElement(MemoizedMessage, { additionalMessageInputProps: props.additionalMessageInputProps, autoscrollToBottom: props.autoscrollToBottom, canPin: canPin, customMessageActions: props.customMessageActions, disableQuotedMessages: props.disableQuotedMessages, endOfGroup: props.endOfGroup, firstOfGroup: props.firstOfGroup, formatDate: props.formatDate, groupedByUser: props.groupedByUser, groupStyles: props.groupStyles, handleAction: handleAction, handleDelete: handleDelete, handleFlag: handleFlag, handleMute: handleMute, handleOpenThread: handleOpenThread, handlePin: handlePin, handleReaction: handleReaction, handleRetry: handleRetry, highlighted: highlighted, initialMessage: props.initialMessage, isReactionEnabled: isReactionEnabled, lastReceivedId: props.lastReceivedId, message: message, Message: props.Message, messageActions: props.messageActions, messageListRect: props.messageListRect, mutes: mutes, onMentionsClickMessage: onMentionsClick, onMentionsHoverMessage: onMentionsHover, onReactionListClick: onReactionListClick, onUserClick: props.onUserClick, onUserHover: props.onUserHover, pinPermissions: props.pinPermissions, reactionSelectorRef: reactionSelectorRef, readBy: props.readBy, renderText: props.renderText, showDetailedReactions: showDetailedReactions, threadList: props.threadList, unsafeHTML: props.unsafeHTML, userRoles: userRoles }));
 };
 
 var MessageCommerceWithContext = function (props) {
@@ -9304,7 +9310,7 @@ var VirtualizedMessageListWithContext = function (props) {
         return isAtBottom ? stickToBottomScrollBehavior : false;
     };
     var messageRenderer = React.useCallback(function (messageList, virtuosoIndex) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         var streamMessageIndex = virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
         // use custom renderer supplied by client if present and skip the rest
         if (customMessageRenderer) {
@@ -9324,17 +9330,20 @@ var VirtualizedMessageListWithContext = function (props) {
             ((_a = message.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = messageList[streamMessageIndex - 1].user) === null || _b === void 0 ? void 0 : _b.id);
         var firstOfGroup = shouldGroupByUser && ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_e = (_d = messageList[streamMessageIndex - 1]) === null || _d === void 0 ? void 0 : _d.user) === null || _e === void 0 ? void 0 : _e.id);
         var endOfGroup = shouldGroupByUser && ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_h = (_g = messageList[streamMessageIndex + 1]) === null || _g === void 0 ? void 0 : _g.user) === null || _h === void 0 ? void 0 : _h.id);
-        return (React__default['default'].createElement(Message, { closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: props.customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, message: message, Message: MessageUIComponent, messageActions: props.messageActions }));
+        return (React__default['default'].createElement(Message, { autoscrollToBottom: (_j = virtuoso.current) === null || _j === void 0 ? void 0 : _j.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: props.customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, message: message, Message: MessageUIComponent, messageActions: props.messageActions }));
     }, [customMessageRenderer, shouldGroupByUser, numItemsPrepended]);
+    var Item = React.useMemo(function () {
+        // using 'display: inline-block'
+        // traps CSS margins of the item elements, preventing incorrect item measurements
+        var Item = function (props) { return (React__default['default'].createElement("div", __assign({}, props, { className: (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualMessage) || 'str-chat__virtual-list-message-wrapper' }))); };
+        return Item;
+    }, [customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualMessage]);
     var virtuosoComponents = React.useMemo(function () {
         var EmptyPlaceholder = function () { return (React__default['default'].createElement(React__default['default'].Fragment, null, EmptyStateIndicator$1 && React__default['default'].createElement(EmptyStateIndicator$1, { listType: 'message' }))); };
         var Header = function () {
             return loadingMore ? (React__default['default'].createElement("div", { className: 'str-chat__virtual-list__loading' },
                 React__default['default'].createElement(LoadingIndicator$1, { size: 20 }))) : (React__default['default'].createElement(React__default['default'].Fragment, null));
         };
-        var virtualMessageClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualMessage) || 'str-chat__virtual-list-message-wrapper';
-        // using 'display: inline-block' traps CSS margins of the item elements, preventing incorrect item measurements
-        var Item = function (props) { return React__default['default'].createElement("div", __assign({}, props, { className: virtualMessageClass })); };
         var Footer = function () {
             return TypingIndicator ? React__default['default'].createElement(TypingIndicator, { avatarSize: 24 }) : React__default['default'].createElement(React__default['default'].Fragment, null);
         };
@@ -9374,15 +9383,15 @@ var VirtualizedMessageListWithContext = function (props) {
         return null;
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         React__default['default'].createElement("div", { className: (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualizedMessageList) || 'str-chat__virtual-list' },
-            React__default['default'].createElement(reactVirtuoso.Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, components: virtuosoComponents, endReached: endReached, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: function (i) { return messageRenderer(processedMessages, i); }, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, additionalVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {})))),
+            React__default['default'].createElement(reactVirtuoso.Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, components: virtuosoComponents, computeItemKey: function (index) {
+                    return processedMessages[numItemsPrepended + index - PREPEND_OFFSET].id;
+                }, endReached: endReached, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: function (i) { return messageRenderer(processedMessages, i); }, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, additionalVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {})))),
         React__default['default'].createElement(MessageListNotifications$1, { hasNewMessages: newMessagesNotification, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification$1, notifications: notifications, scrollToBottom: scrollToBottom }),
         giphyPreviewMessage && React__default['default'].createElement(GiphyPreviewMessage$1, { message: giphyPreviewMessage })));
 };
 /**
  * The VirtualizedMessageList component renders a list of messages in a virtualized list.
  * It is a consumer of the React contexts set in [Channel](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/Channel.tsx).
- *
- * **Note**: It works well when there are thousands of messages in a channel, it has a shortcoming though - the message UI should have a fixed height.
  */
 function VirtualizedMessageList(props) {
     var _a = useChannelActionContext('VirtualizedMessageList'), jumpToLatestMessage = _a.jumpToLatestMessage, loadMore = _a.loadMore, loadMoreNewer = _a.loadMoreNewer;
@@ -9422,11 +9431,11 @@ var DefaultThreadStart = function () {
     return React__default['default'].createElement("div", { className: 'str-chat__thread-start' }, t('Start of a new thread'));
 };
 var ThreadInner = function (props) {
-    var additionalMessageInputProps = props.additionalMessageInputProps, additionalMessageListProps = props.additionalMessageListProps, additionalParentMessageProps = props.additionalParentMessageProps, additionalVirtualizedMessageListProps = props.additionalVirtualizedMessageListProps, _a = props.autoFocus, autoFocus = _a === void 0 ? true : _a, _b = props.enableDateSeparator, enableDateSeparator = _b === void 0 ? false : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? false : _c, PropInput = props.Input, PropMessage = props.Message, virtualized = props.virtualized;
-    var _d = useChannelStateContext('Thread'), thread = _d.thread, threadHasMore = _d.threadHasMore, threadLoadingMore = _d.threadLoadingMore, threadMessages = _d.threadMessages;
-    var _e = useChannelActionContext('Thread'), closeThread = _e.closeThread, loadMoreThread = _e.loadMoreThread, sendMessage = _e.sendMessage;
+    var additionalMessageInputProps = props.additionalMessageInputProps, additionalMessageListProps = props.additionalMessageListProps, additionalParentMessageProps = props.additionalParentMessageProps, additionalVirtualizedMessageListProps = props.additionalVirtualizedMessageListProps, _a = props.autoFocus, autoFocus = _a === void 0 ? true : _a, _b = props.enableDateSeparator, enableDateSeparator = _b === void 0 ? false : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? false : _c, PropInput = props.Input, PropMessage = props.Message, _d = props.messageActions, messageActions = _d === void 0 ? Object.keys(MESSAGE_ACTIONS) : _d, virtualized = props.virtualized;
+    var _e = useChannelStateContext('Thread'), thread = _e.thread, threadHasMore = _e.threadHasMore, threadLoadingMore = _e.threadLoadingMore, threadMessages = _e.threadMessages;
+    var _f = useChannelActionContext('Thread'), closeThread = _f.closeThread, loadMoreThread = _f.loadMoreThread, sendMessage = _f.sendMessage;
     var customClasses = useChatContext('Thread').customClasses;
-    var _f = useComponentContext('Thread'), ContextInput = _f.ThreadInput, ContextMessage = _f.Message, _g = _f.ThreadHeader, ThreadHeader = _g === void 0 ? DefaultThreadHeader : _g, _h = _f.ThreadStart, ThreadStart = _h === void 0 ? DefaultThreadStart : _h, _j = _f.VirtualMessage, VirtualMessage = _j === void 0 ? FixedHeightMessage : _j;
+    var _g = useComponentContext('Thread'), ContextInput = _g.ThreadInput, ContextMessage = _g.Message, _h = _g.ThreadHeader, ThreadHeader = _h === void 0 ? DefaultThreadHeader : _h, _j = _g.ThreadStart, ThreadStart = _j === void 0 ? DefaultThreadStart : _j, _k = _g.VirtualMessage, VirtualMessage = _k === void 0 ? FixedHeightMessage : _k;
     var messageList = React.useRef(null);
     var ThreadInput = PropInput || (additionalMessageInputProps === null || additionalMessageInputProps === void 0 ? void 0 : additionalMessageInputProps.Input) || ContextInput || MessageInputSmall;
     var ThreadMessage = PropMessage || (additionalMessageListProps === null || additionalMessageListProps === void 0 ? void 0 : additionalMessageListProps.Message);
@@ -9458,7 +9467,7 @@ var ThreadInner = function (props) {
         React__default['default'].createElement("div", { className: 'str-chat__thread-list', ref: messageList },
             React__default['default'].createElement(Message, __assign({ initialMessage: true, message: thread, Message: ThreadMessage || FallbackMessage, threadList: true }, additionalParentMessageProps)),
             React__default['default'].createElement(ThreadStart, null),
-            React__default['default'].createElement(ThreadMessageList, __assign({ disableDateSeparator: !enableDateSeparator, hasMore: threadHasMore, loadingMore: threadLoadingMore, loadMore: loadMoreThread, Message: ThreadMessage || FallbackMessage, messages: threadMessages || [], threadList: true }, (virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps)))),
+            React__default['default'].createElement(ThreadMessageList, __assign({ disableDateSeparator: !enableDateSeparator, hasMore: threadHasMore, loadingMore: threadLoadingMore, loadMore: loadMoreThread, Message: ThreadMessage || FallbackMessage, messageActions: messageActions, messages: threadMessages || [], threadList: true }, (virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps)))),
         React__default['default'].createElement(MessageInput, __assign({ focus: autoFocus, Input: ThreadInput, overrideSubmitHandler: threadSubmitHandler, parent: thread, publishTypingEvent: false }, additionalMessageInputProps))));
 };