stream-chat-react 9.1.4 → 9.3.0

package/dist/index.cjs.js

@@ -2547,7 +2547,7 @@ var channelReducer = function (state, action) {
         }
         case 'loadMoreFinished': {
             var hasMore = action.hasMore, messages = action.messages;
-            return __assign(__assign({}, state), { hasMore: hasMore, loadingMore: false, messages: messages });
+            return __assign(__assign({}, state), { hasMore: hasMore, loadingMore: false, messages: messages, suppressAutoscroll: false });
         }
         case 'loadMoreNewerFinished': {
             var hasMoreNewer = action.hasMoreNewer, messages = action.messages;
@@ -2568,7 +2568,7 @@ var channelReducer = function (state, action) {
         case 'setLoadingMore': {
             var loadingMore = action.loadingMore;
             // suppress the autoscroll behavior
-            return __assign(__assign({}, state), { loadingMore: loadingMore, suppressAutoscroll: true });
+            return __assign(__assign({}, state), { loadingMore: loadingMore, suppressAutoscroll: loadingMore });
         }
         case 'setLoadingMoreNewer': {
             var loadingMoreNewer = action.loadingMoreNewer;
@@ -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'] ||
@@ -3166,15 +3180,24 @@ var getNonImageAttachments = function (message) {
     }
     return message.attachments.filter(function (item) { return item.type !== 'image'; });
 };
-var getReadByTooltipText = function (users, t, client) {
+/**
+ * Default Tooltip Username mapper implementation.
+ *
+ * @param user the user.
+ */
+var mapToUserNameOrId = function (user) { return user.name || user.id; };
+var getReadByTooltipText = function (users, t, client, tooltipUserNameMapper) {
     var outStr = '';
     if (!t) {
-        throw new Error('`getReadByTooltipText was called, but translation function is not available`');
+        throw new Error('getReadByTooltipText was called, but translation function is not available');
+    }
+    if (!tooltipUserNameMapper) {
+        throw new Error('getReadByTooltipText was called, but tooltipUserNameMapper function is not available');
     }
     // first filter out client user, so restLength won't count it
     var otherUsers = users
         .filter(function (item) { return item && (client === null || client === void 0 ? void 0 : client.user) && item.id !== client.user.id; })
-        .map(function (item) { return item.name || item.id; });
+        .map(tooltipUserNameMapper);
     var slicedArr = otherUsers.slice(0, 5);
     var restLength = otherUsers.length - slicedArr.length;
     if (slicedArr.length === 1) {
@@ -3193,7 +3216,7 @@ var getReadByTooltipText = function (users, t, client) {
         // example: "bob, joe, sam and 4 more"
         if (restLength === 0) {
             // mutate slicedArr to remove last user to display it separately
-            var lastUser = slicedArr.splice(slicedArr.length - 2, 1);
+            var lastUser = slicedArr.splice(slicedArr.length - 1, 1);
             outStr = t('{{ commaSeparatedUsers }}, and {{ lastUser }}', {
                 commaSeparatedUsers: slicedArr.join(', '),
                 lastUser: lastUser,
@@ -3310,7 +3333,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'))),
@@ -3446,10 +3469,10 @@ var Tooltip = function (props) {
 
 var UnMemoizedMessageStatus = function (props) {
     var _a;
-    var propAvatar = props.Avatar, _b = props.messageType, messageType = _b === void 0 ? 'simple' : _b;
+    var propAvatar = props.Avatar, _b = props.messageType, messageType = _b === void 0 ? 'simple' : _b, _c = props.tooltipUserNameMapper, tooltipUserNameMapper = _c === void 0 ? mapToUserNameOrId : _c;
     var client = useChatContext('MessageStatus').client;
     var contextAvatar = useComponentContext('MessageStatus').Avatar;
-    var _c = useMessageContext('MessageStatus'), isMyMessage = _c.isMyMessage, lastReceivedId = _c.lastReceivedId, message = _c.message, readBy = _c.readBy, threadList = _c.threadList;
+    var _d = useMessageContext('MessageStatus'), isMyMessage = _d.isMyMessage, lastReceivedId = _d.lastReceivedId, message = _d.message, readBy = _d.readBy, threadList = _d.threadList;
     var t = useTranslationContext('MessageStatus').t;
     var Avatar$1 = propAvatar || contextAvatar || Avatar;
     if (!isMyMessage() || message.type === 'error') {
@@ -3464,7 +3487,7 @@ var UnMemoizedMessageStatus = function (props) {
     if ((readBy === null || readBy === void 0 ? void 0 : readBy.length) && !threadList && !justReadByMe) {
         var lastReadUser = readBy.filter(function (item) { var _a; return item.id !== ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id); })[0];
         return (React__default['default'].createElement("span", { className: "str-chat__message-" + messageType + "-status", "data-testid": 'message-status-read-by' },
-            React__default['default'].createElement(Tooltip, null, getReadByTooltipText(readBy, t, client)),
+            React__default['default'].createElement(Tooltip, null, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)),
             React__default['default'].createElement(Avatar$1, { image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, size: 15, user: lastReadUser }),
             readBy.length > 2 && (React__default['default'].createElement("span", { className: "str-chat__message-" + messageType + "-status-number", "data-testid": 'message-status-read-by-many' }, readBy.length - 1))));
     }
@@ -6525,19 +6548,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 +7691,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default['default'].memo(UnMemoizedChannelList);
 
-var version = '9.1.4';
+var version = '9.3.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -8122,7 +8142,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) {
@@ -9299,7 +9319,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) {
@@ -9319,17 +9339,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);
         };
@@ -9369,15 +9392,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;
@@ -9624,6 +9647,7 @@ exports.itTranslations = itTranslations;
 exports.jaTranslations = jaTranslations;
 exports.koTranslations = koTranslations;
 exports.makeDateMessageId = makeDateMessageId;
+exports.mapToUserNameOrId = mapToUserNameOrId;
 exports.markDownRenderers = markDownRenderers;
 exports.matchMarkdownLinks = matchMarkdownLinks;
 exports.mentionsMarkdownPlugin = mentionsMarkdownPlugin;