stream-chat-react 9.1.4 → 9.1.5

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'] ||
@@ -3310,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'))),
@@ -6525,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:
@@ -7671,7 +7682,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default['default'].memo(UnMemoizedChannelList);
 
-var version = '9.1.4';
+var version = '9.1.5';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -9321,15 +9332,18 @@ var VirtualizedMessageListWithContext = function (props) {
         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 }));
     }, [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);
         };
@@ -9369,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;