stream-chat-react 6.6.0 → 6.8.0

package/dist/index.cjs.js

@@ -1377,7 +1377,7 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
             };
           }
 
-          if (!textToReplace.text) {
+          if (!textToReplace.text && currentTrigger !== ':') {
             throw new Error("Output \"text\" is not defined! Object should has shape {text: string, caretPosition: string | number}. Check the implementation for trigger \"".concat(currentTrigger, "\" and its token \"").concat(actualToken, "\"\n"));
           }
 
@@ -2191,6 +2191,8 @@ var MessageDeleted = function (props) {
         React__default['default'].createElement("div", { className: 'str-chat__message--deleted-inner' }, t('This message was deleted...'))));
 };
 
+var ActionsIcon = function () { return (React__default['default'].createElement("svg", { height: '4', viewBox: '0 0 11 4', width: '11', xmlns: 'http://www.w3.org/2000/svg' },
+    React__default['default'].createElement("path", { d: 'M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z', fillRule: 'nonzero' }))); };
 var ReplyIcon = function () { return (React__default['default'].createElement("svg", { height: '15', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
     React__default['default'].createElement("path", { d: 'M.56 10.946H.06l-.002-.498L.025.92a.5.5 0 1 1 1-.004l.032 9.029H9.06v-4l9 4.5-9 4.5v-4H.56z', fillRule: 'nonzero' }))); };
 var DeliveredCheckIcon = function () { return (React__default['default'].createElement("svg", { height: '16', width: '16', xmlns: 'http://www.w3.org/2000/svg' },
@@ -2374,6 +2376,8 @@ var areMessagePropsEqual = function (prevProps, nextProps) {
     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;
     }
@@ -2403,6 +2407,8 @@ var areMessageUIPropsEqual = function (prevProps, nextProps) {
     var nextLastReceivedId = nextProps.lastReceivedId, nextMessage = nextProps.message;
     if (prevProps.editing !== nextProps.editing)
         return false;
+    if (prevProps.endOfGroup !== nextProps.endOfGroup)
+        return false;
     if (((_a = prevProps.mutes) === null || _a === void 0 ? void 0 : _a.length) !== ((_b = nextProps.mutes) === null || _b === void 0 ? void 0 : _b.length))
         return false;
     if (((_c = prevProps.readBy) === null || _c === void 0 ? void 0 : _c.length) !== ((_d = nextProps.readBy) === null || _d === void 0 ? void 0 : _d.length))
@@ -2593,16 +2599,16 @@ var UnMemoizedMessageActionsBox = function (props) {
 var MessageActionsBox = React__default['default'].memo(UnMemoizedMessageActionsBox);
 
 var MessageActions = function (props) {
-    var _a = props.customWrapperClass, customWrapperClass = _a === void 0 ? '' : _a, propGetMessageActions = props.getMessageActions, propHandleDelete = props.handleDelete, propHandleFlag = props.handleFlag, propHandleMute = props.handleMute, propHandlePin = props.handlePin, inline = props.inline, propMessage = props.message, messageWrapperRef = props.messageWrapperRef, mine = props.mine;
+    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, propHandleMute = props.handleMute, propHandlePin = props.handlePin, inline = props.inline, propMessage = props.message, messageWrapperRef = props.messageWrapperRef, mine = props.mine;
     var mutes = useChatContext().mutes;
-    var _b = useMessageContext(), contextGetMessageActions = _b.getMessageActions, contextHandleDelete = _b.handleDelete, contextHandleFlag = _b.handleFlag, contextHandleMute = _b.handleMute, contextHandlePin = _b.handlePin, isMyMessage = _b.isMyMessage, contextMessage = _b.message, setEditingState = _b.setEditingState;
+    var _c = useMessageContext(), customMessageActions = _c.customMessageActions, contextGetMessageActions = _c.getMessageActions, contextHandleDelete = _c.handleDelete, contextHandleFlag = _c.handleFlag, contextHandleMute = _c.handleMute, contextHandlePin = _c.handlePin, isMyMessage = _c.isMyMessage, contextMessage = _c.message, setEditingState = _c.setEditingState;
     var getMessageActions = propGetMessageActions || contextGetMessageActions;
     var handleDelete = propHandleDelete || contextHandleDelete;
     var handleFlag = propHandleFlag || contextHandleFlag;
     var handleMute = propHandleMute || contextHandleMute;
     var handlePin = propHandlePin || contextHandlePin;
     var message = propMessage || contextMessage;
-    var _c = React.useState(false), actionsBoxOpen = _c[0], setActionsBoxOpen = _c[1];
+    var _d = React.useState(false), actionsBoxOpen = _d[0], setActionsBoxOpen = _d[1];
     var isMuted = React.useCallback(function () { return isUserMuted(message, mutes); }, [message, mutes]);
     var hideOptions = React.useCallback(function () { return setActionsBoxOpen(false); }, []);
     var messageActions = getMessageActions();
@@ -2626,12 +2632,11 @@ var MessageActions = function (props) {
         }
         return function () { return document.removeEventListener('click', hideOptions); };
     }, [actionsBoxOpen, hideOptions]);
-    if (messageActions.length === 0)
+    if (!messageActions.length && !customMessageActions)
         return null;
     return (React__default['default'].createElement(MessageActionsWrapper, { customWrapperClass: customWrapperClass, inline: inline, setActionsBoxOpen: setActionsBoxOpen },
         React__default['default'].createElement(MessageActionsBox, { getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: mine ? mine() : isMyMessage(), open: actionsBoxOpen }),
-        React__default['default'].createElement("svg", { height: '4', viewBox: '0 0 11 4', width: '11', xmlns: 'http://www.w3.org/2000/svg' },
-            React__default['default'].createElement("path", { d: 'M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z', fillRule: 'nonzero' }))));
+        React__default['default'].createElement(ActionsIcon$1, null)));
 };
 var MessageActionsWrapper = function (props) {
     var children = props.children, customWrapperClass = props.customWrapperClass, inline = props.inline, setActionsBoxOpen = props.setActionsBoxOpen;
@@ -2652,11 +2657,11 @@ var MessageActionsWrapper = function (props) {
 };
 
 var UnMemoizedMessageOptions = function (props) {
-    var _a = props.displayLeft, displayLeft = _a === void 0 ? true : _a, _b = props.displayReplies, displayReplies = _b === void 0 ? true : _b, propHandleOpenThread = props.handleOpenThread, messageWrapperRef = props.messageWrapperRef, _c = props.theme, theme = _c === void 0 ? 'simple' : _c;
-    var _d = useMessageContext(), getMessageActions = _d.getMessageActions, contextHandleOpenThread = _d.handleOpenThread, initialMessage = _d.initialMessage, isMyMessage = _d.isMyMessage, message = _d.message, onReactionListClick = _d.onReactionListClick, threadList = _d.threadList;
+    var _a = props.ActionsIcon, ActionsIcon$1 = _a === void 0 ? ActionsIcon : _a, _b = props.displayLeft, displayLeft = _b === void 0 ? true : _b, _c = props.displayReplies, displayReplies = _c === void 0 ? true : _c, propHandleOpenThread = props.handleOpenThread, messageWrapperRef = props.messageWrapperRef, _d = props.ReactionIcon, ReactionIcon$1 = _d === void 0 ? ReactionIcon : _d, _e = props.theme, theme = _e === void 0 ? 'simple' : _e, _f = props.ThreadIcon, ThreadIcon$1 = _f === void 0 ? ThreadIcon : _f;
+    var _g = useMessageContext(), customMessageActions = _g.customMessageActions, getMessageActions = _g.getMessageActions, contextHandleOpenThread = _g.handleOpenThread, initialMessage = _g.initialMessage, isMyMessage = _g.isMyMessage, message = _g.message, onReactionListClick = _g.onReactionListClick, threadList = _g.threadList;
     var handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
     var messageActions = getMessageActions();
-    var showActionsBox = showMessageActionsBox(messageActions);
+    var showActionsBox = showMessageActionsBox(messageActions) || !!customMessageActions;
     var shouldShowReactions = messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
     var shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && displayReplies && !threadList;
     if (!message.type ||
@@ -2670,18 +2675,18 @@ var UnMemoizedMessageOptions = function (props) {
     }
     if (isMyMessage() && displayLeft) {
         return (React__default['default'].createElement("div", { className: "str-chat__message-" + theme + "__actions", "data-testid": 'message-options-left' },
-            showActionsBox && React__default['default'].createElement(MessageActions, { messageWrapperRef: messageWrapperRef }),
+            showActionsBox && (React__default['default'].createElement(MessageActions, { ActionsIcon: ActionsIcon$1, messageWrapperRef: messageWrapperRef })),
             shouldShowReplies && (React__default['default'].createElement("div", { className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--thread", "data-testid": 'thread-action', onClick: handleOpenThread },
-                React__default['default'].createElement(ThreadIcon, null))),
+                React__default['default'].createElement(ThreadIcon$1, null))),
             shouldShowReactions && (React__default['default'].createElement("div", { className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--reactions", "data-testid": 'message-reaction-action', onClick: onReactionListClick },
-                React__default['default'].createElement(ReactionIcon, null)))));
+                React__default['default'].createElement(ReactionIcon$1, null)))));
     }
     return (React__default['default'].createElement("div", { className: "str-chat__message-" + theme + "__actions", "data-testid": 'message-options' },
         shouldShowReactions && (React__default['default'].createElement("div", { className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--reactions", "data-testid": 'message-reaction-action', onClick: onReactionListClick },
-            React__default['default'].createElement(ReactionIcon, null))),
+            React__default['default'].createElement(ReactionIcon$1, null))),
         shouldShowReplies && (React__default['default'].createElement("div", { className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--thread", "data-testid": 'thread-action', onClick: handleOpenThread },
-            React__default['default'].createElement(ThreadIcon, null))),
-        showActionsBox && React__default['default'].createElement(MessageActions, { messageWrapperRef: messageWrapperRef })));
+            React__default['default'].createElement(ThreadIcon$1, null))),
+        showActionsBox && (React__default['default'].createElement(MessageActions, { ActionsIcon: ActionsIcon$1, messageWrapperRef: messageWrapperRef }))));
 };
 var MessageOptions = React__default['default'].memo(UnMemoizedMessageOptions);
 
@@ -2743,7 +2748,7 @@ var UnMemoizedMessageStatus = function (props) {
         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(Avatar$1, { image: lastReadUser.image, name: lastReadUser.name, size: 15, user: lastReadUser }),
+            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))));
     }
     if (message.status === 'received' && message.id === lastReceivedId && !threadList) {
@@ -3106,7 +3111,7 @@ var usePinHandler = function (message, permissions, notifications) {
     return { canPin: canPin(), handlePin: handlePin };
 };
 
-var reactionHandlerWarning = "Reaction handler was called, but it is missing one of its required arguments. \nMake sure the ChannelAction and ChannelState contexts are properly set and the hook is initialized with a valid message.";
+var reactionHandlerWarning = "Reaction handler was called, but it is missing one of its required arguments.\nMake sure the ChannelAction and ChannelState contexts are properly set and the hook is initialized with a valid message.";
 var useReactionHandler = function (message) {
     var updateMessage = useChannelActionContext().updateMessage;
     var channel = useChannelStateContext().channel;
@@ -3245,14 +3250,12 @@ var useReactionClick = function (message, reactionSelectorRef, messageWrapperRef
         if (showDetailedReactions && !hasListener.current) {
             hasListener.current = true;
             document.addEventListener('click', closeDetailedReactions);
-            document.addEventListener('touchend', closeDetailedReactions);
             if (messageWrapper) {
                 messageWrapper.addEventListener('mouseleave', closeDetailedReactions);
             }
         }
         if (!showDetailedReactions && hasListener.current) {
             document.removeEventListener('click', closeDetailedReactions);
-            document.removeEventListener('touchend', closeDetailedReactions);
             if (messageWrapper) {
                 messageWrapper.removeEventListener('mouseleave', closeDetailedReactions);
             }
@@ -3261,7 +3264,6 @@ var useReactionClick = function (message, reactionSelectorRef, messageWrapperRef
         return function () {
             if (hasListener.current) {
                 document.removeEventListener('click', closeDetailedReactions);
-                document.removeEventListener('touchend', closeDetailedReactions);
                 if (messageWrapper) {
                     messageWrapper.removeEventListener('mouseleave', closeDetailedReactions);
                 }
@@ -3273,7 +3275,6 @@ var useReactionClick = function (message, reactionSelectorRef, messageWrapperRef
         var messageWrapper = messageWrapperRef === null || messageWrapperRef === void 0 ? void 0 : messageWrapperRef.current;
         if (messageDeleted && hasListener.current) {
             document.removeEventListener('click', closeDetailedReactions);
-            document.removeEventListener('touchend', closeDetailedReactions);
             if (messageWrapper) {
                 messageWrapper.removeEventListener('mouseleave', closeDetailedReactions);
             }
@@ -3511,6 +3512,85 @@ var useEmojiTrigger = function (emojiIndex) { return ({
     }); },
 }); };
 
+var accentsMap = {
+    a: 'á|à|ã|â|À|Á|Ã|Â',
+    c: 'ç|Ç',
+    e: 'é|è|ê|É|È|Ê',
+    i: 'í|ì|î|Í|Ì|Î',
+    n: 'ñ|Ñ',
+    o: 'ó|ò|ô|õ|Ó|Ò|Ô|Õ',
+    u: 'ú|ù|û|ü|Ú|Ù|Û|Ü',
+};
+var removeDiacritics = function (text) {
+    if (!text)
+        return '';
+    return Object.keys(accentsMap).reduce(function (acc, current) { return acc.replace(new RegExp(accentsMap[current], 'g'), current); }, text);
+};
+var calculateLevenshtein = function (query, name) {
+    if (query.length === 0)
+        return name.length;
+    if (name.length === 0)
+        return query.length;
+    var matrix = [];
+    var i;
+    for (i = 0; i <= name.length; i++) {
+        matrix[i] = [i];
+    }
+    var j;
+    for (j = 0; j <= query.length; j++) {
+        matrix[0][j] = j;
+    }
+    for (i = 1; i <= name.length; i++) {
+        for (j = 1; j <= query.length; j++) {
+            if (name.charAt(i - 1) === query.charAt(j - 1)) {
+                matrix[i][j] = matrix[i - 1][j - 1];
+            }
+            else {
+                matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, // substitution
+                Math.min(matrix[i][j - 1] + 1, // insertion
+                matrix[i - 1][j] + 1)); // deletion
+            }
+        }
+    }
+    return matrix[name.length][query.length];
+};
+var searchLocalUsers = function (params) {
+    var ownUserId = params.ownUserId, query = params.query, useMentionsTransliteration = params.useMentionsTransliteration, users = params.users;
+    var matchingUsers = users.filter(function (user) {
+        if (user.id === ownUserId)
+            return false;
+        if (!query)
+            return true;
+        var updatedId = removeDiacritics(user.id).toLowerCase();
+        var updatedName = removeDiacritics(user.name).toLowerCase();
+        var updatedQuery = removeDiacritics(query).toLowerCase();
+        if (useMentionsTransliteration) {
+            (function () { return __awaiter(void 0, void 0, void 0, function () {
+                var transliterate;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@sindresorhus/transliterate')); })];
+                        case 1:
+                            transliterate = (_a.sent()).default;
+                            updatedName = transliterate(user.name || '').toLowerCase();
+                            updatedQuery = transliterate(query).toLowerCase();
+                            updatedId = transliterate(user.id).toLowerCase();
+                            return [2 /*return*/];
+                    }
+                });
+            }); })();
+        }
+        if (updatedName) {
+            var levenshtein_1 = calculateLevenshtein(updatedQuery, updatedName);
+            if (updatedName.includes(updatedQuery) || levenshtein_1 <= 3)
+                return true;
+        }
+        var levenshtein = calculateLevenshtein(updatedQuery, updatedId);
+        return updatedId.includes(updatedQuery) || levenshtein <= 3;
+    });
+    return matchingUsers;
+};
+
 /**
  * UI component for mentions rendered in suggestion list
  */
@@ -3527,13 +3607,13 @@ var UnMemoizedUserItem = function (props) {
             }));
     };
     return (React__default['default'].createElement("div", { className: 'str-chat__user-item' },
-        React__default['default'].createElement(Avatar$1, { image: entity.image, size: 20 }),
+        React__default['default'].createElement(Avatar$1, { image: entity.image, name: entity.name || entity.id, size: 20 }),
         React__default['default'].createElement("span", { className: 'str-chat__user-item--name', "data-testid": 'user-item-name' }, renderName())));
 };
 var UserItem = React__default['default'].memo(UnMemoizedUserItem);
 
 var useUserTrigger = function (params) {
-    var disableMentions = params.disableMentions, mentionAllAppUsers = params.mentionAllAppUsers, _a = params.mentionQueryParams, mentionQueryParams = _a === void 0 ? {} : _a, onSelectUser = params.onSelectUser;
+    var disableMentions = params.disableMentions, mentionAllAppUsers = params.mentionAllAppUsers, _a = params.mentionQueryParams, mentionQueryParams = _a === void 0 ? {} : _a, onSelectUser = params.onSelectUser, useMentionsTransliteration = params.useMentionsTransliteration;
     var _b = React.useState(false), searching = _b[0], setSearching = _b[1];
     var _c = useChatContext(), client = _c.client, mutes = _c.mutes;
     var channel = useChannelStateContext().channel;
@@ -3617,14 +3697,22 @@ var useUserTrigger = function (params) {
     return {
         callback: function (item) { return onSelectUser(item); },
         component: UserItem,
-        dataProvider: function (query, _, onReady) {
+        dataProvider: function (query, text, onReady) {
             var _a;
             if (disableMentions)
                 return;
             var filterMutes = function (data) {
+                if (text.includes('/unmute') && !mutes.length) {
+                    return [];
+                }
                 if (!mutes.length)
                     return data;
-                return data.filter(function (suggestion) { return mutes.some(function (mute) { return mute.target.id === suggestion.id; }); });
+                if (text.includes('/unmute')) {
+                    return data.filter(function (suggestion) {
+                        return mutes.some(function (mute) { return mute.target.id === suggestion.id; });
+                    });
+                }
+                return data.filter(function (suggestion) { return mutes.every(function (mute) { return mute.target.id !== suggestion.id; }); });
             };
             if (mentionAllAppUsers) {
                 return queryUsersThrottled(query, function (data) {
@@ -3640,16 +3728,13 @@ var useUserTrigger = function (params) {
              */
             if (!query || Object.values(members || {}).length < 100) {
                 var users = getMembersAndWatchers();
-                var matchingUsers = users.filter(function (user) {
-                    if (user.id === client.userID)
-                        return false;
-                    if (!query)
-                        return true;
-                    if (user.name !== undefined && user.name.toLowerCase().includes(query.toLowerCase())) {
-                        return true;
-                    }
-                    return user.id.toLowerCase().includes(query.toLowerCase());
-                });
+                var params_1 = {
+                    ownUserId: client.userID,
+                    query: query,
+                    useMentionsTransliteration: useMentionsTransliteration,
+                    users: users,
+                };
+                var matchingUsers = searchLocalUsers(params_1);
                 var usersToShow = ((_a = mentionQueryParams.options) === null || _a === void 0 ? void 0 : _a.limit) || 10;
                 var data = matchingUsers.slice(0, usersToShow);
                 if (onReady)
@@ -3696,6 +3781,7 @@ var DefaultTriggerProvider = function (_a) {
             mentionAllAppUsers: currentValue.mentionAllAppUsers,
             mentionQueryParams: currentValue.mentionQueryParams,
             onSelectUser: currentValue.onSelectUser,
+            useMentionsTransliteration: currentValue.useMentionsTransliteration,
         }),
     };
     var newValue = __assign(__assign({}, currentValue), { autocompleteTriggers: defaultAutocompleteTriggers });
@@ -4193,7 +4279,7 @@ var useAttachments = function (props, state, dispatch) {
 
 var useMessageInputText = function (props, state, dispatch) {
     var channel = useChannelStateContext().channel;
-    var additionalTextareaProps = props.additionalTextareaProps, focus = props.focus, parent = props.parent, publishTypingEvent = props.publishTypingEvent;
+    var additionalTextareaProps = props.additionalTextareaProps, focus = props.focus, parent = props.parent, _a = props.publishTypingEvent, publishTypingEvent = _a === void 0 ? true : _a;
     var text = state.text;
     var textareaRef = React.useRef();
     // Focus
@@ -4394,10 +4480,11 @@ var useSubmitHandler = function (props, state, dispatch, numberOfUploads) {
                         text: text,
                     };
                     if (!message) return [3 /*break*/, 5];
+                    delete message.i18n;
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, editMessage(__assign(__assign({}, updatedMessage), { id: message.id }))];
+                    return [4 /*yield*/, editMessage(__assign(__assign({}, message), updatedMessage))];
                 case 2:
                     _a.sent();
                     if (clearEditingState)
@@ -4511,6 +4598,7 @@ var initState = function (message) {
             imageOrder: [],
             imageUploads: __assign({}, emptyImageUploads),
             mentioned_users: [],
+            setText: function () { return null; },
             text: '',
         };
     }
@@ -4562,6 +4650,7 @@ var initState = function (message) {
         imageOrder: imageOrder,
         imageUploads: imageUploads,
         mentioned_users: mentioned_users,
+        setText: function () { return null; },
         text: message.text || '',
     };
 };
@@ -4650,12 +4739,15 @@ var useMessageInputState = function (props) {
     var onSelectUser = React.useCallback(function (item) {
         dispatch({ type: 'addMentionedUser', user: item });
     }, []);
+    var setText = React.useCallback(function (text) {
+        dispatch({ getNewText: function () { return text; }, type: 'setText' });
+    }, []);
     return __assign(__assign({}, state), { closeCommandsList: closeCommandsList, 
         /**
          * TODO: fix the below at some point because this type casting is wrong
          * and just forced to not have warnings currently with the unknown casting
          */
-        closeEmojiPicker: closeEmojiPicker, emojiIndex: useEmojiIndex(), emojiPickerRef: emojiPickerRef, handleChange: handleChange, handleEmojiKeyDown: handleEmojiKeyDown, handleSubmit: handleSubmit, insertText: insertText, isUploadEnabled: isUploadEnabled, maxFilesLeft: maxFilesLeft, numberOfUploads: numberOfUploads, onPaste: onPaste, onSelectEmoji: onSelectEmoji, onSelectUser: onSelectUser, openCommandsList: openCommandsList, openEmojiPicker: openEmojiPicker, removeFile: removeFile, removeImage: removeImage, showCommandsList: showCommandsList, textareaRef: textareaRef, uploadFile: uploadFile, uploadImage: uploadImage, uploadNewFiles: uploadNewFiles });
+        closeEmojiPicker: closeEmojiPicker, emojiIndex: useEmojiIndex(), emojiPickerRef: emojiPickerRef, handleChange: handleChange, handleEmojiKeyDown: handleEmojiKeyDown, handleSubmit: handleSubmit, insertText: insertText, isUploadEnabled: isUploadEnabled, maxFilesLeft: maxFilesLeft, numberOfUploads: numberOfUploads, onPaste: onPaste, onSelectEmoji: onSelectEmoji, onSelectUser: onSelectUser, openCommandsList: openCommandsList, openEmojiPicker: openEmojiPicker, removeFile: removeFile, removeImage: removeImage, setText: setText, showCommandsList: showCommandsList, textareaRef: textareaRef, uploadFile: uploadFile, uploadImage: uploadImage, uploadNewFiles: uploadNewFiles });
 };
 
 var QuotedMessagePreviewHeader = function () {
@@ -5037,7 +5129,7 @@ var SimpleReactionsList = React__default['default'].memo(UnMemoizedSimpleReactio
 
 var MessageSimpleWithContext = function (props) {
     var _a;
-    var additionalMessageInputProps = props.additionalMessageInputProps, clearEditingState = props.clearEditingState, editing = props.editing, handleAction = props.handleAction, handleOpenThread = props.handleOpenThread, handleRetry = props.handleRetry, isMyMessage = props.isMyMessage, isReactionEnabled = props.isReactionEnabled, message = props.message, onUserClick = props.onUserClick, onUserHover = props.onUserHover, reactionSelectorRef = props.reactionSelectorRef, showDetailedReactions = props.showDetailedReactions, threadList = props.threadList;
+    var additionalMessageInputProps = props.additionalMessageInputProps, clearEditingState = props.clearEditingState, editing = props.editing, endOfGroup = props.endOfGroup, firstOfGroup = props.firstOfGroup, groupedByUser = props.groupedByUser, handleAction = props.handleAction, handleOpenThread = props.handleOpenThread, handleRetry = props.handleRetry, isMyMessage = props.isMyMessage, isReactionEnabled = props.isReactionEnabled, message = props.message, onUserClick = props.onUserClick, onUserHover = props.onUserHover, reactionSelectorRef = props.reactionSelectorRef, showDetailedReactions = props.showDetailedReactions, threadList = props.threadList;
     var _b = useComponentContext(), Attachment = _b.Attachment, _c = _b.Avatar, Avatar$1 = _c === void 0 ? Avatar : _c, _d = _b.EditMessageInput, EditMessageInput = _d === void 0 ? EditMessageForm : _d, _e = _b.MessageDeleted, MessageDeleted$1 = _e === void 0 ? MessageDeleted : _e, _f = _b.MessageOptions, MessageOptions$1 = _f === void 0 ? MessageOptions : _f, _g = _b.MessageRepliesCountButton, MessageRepliesCountButton$1 = _g === void 0 ? MessageRepliesCountButton : _g, _h = _b.MessageStatus, MessageStatus$1 = _h === void 0 ? MessageStatus : _h, _j = _b.MessageTimestamp, MessageTimestamp$1 = _j === void 0 ? MessageTimestamp : _j, _k = _b.ReactionSelector, ReactionSelector$1 = _k === void 0 ? ReactionSelector : _k, _l = _b.ReactionsList, ReactionsList$1 = _l === void 0 ? ReactionsList : _l;
     var messageWrapperRef = React.useRef(null);
     var hasAttachment = messageHasAttachments(message);
@@ -5054,7 +5146,7 @@ var MessageSimpleWithContext = function (props) {
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         editing && (React__default['default'].createElement(Modal, { onClose: clearEditingState, open: editing },
             React__default['default'].createElement(MessageInput, __assign({ clearEditingState: clearEditingState, Input: EditMessageInput, message: message }, additionalMessageInputProps)))),
-        React__default['default'].createElement("div", { className: ("\n\t\t\t\t\t\t" + messageClasses + "\n\t\t\t\t\t\tstr-chat__message--" + message.type + "\n\t\t\t\t\t\tstr-chat__message--" + message.status + "\n\t\t\t\t\t\t" + (message.text ? 'str-chat__message--has-text' : 'has-no-text') + "\n\t\t\t\t\t\t" + (hasAttachment ? 'str-chat__message--has-attachment' : '') + "\n            " + (hasReactions && isReactionEnabled ? 'str-chat__message--with-reactions' : '') + "\n            " + (message.pinned ? 'pinned-message' : '') + "\n\t\t\t\t\t").trim(), key: message.id, ref: messageWrapperRef },
+        React__default['default'].createElement("div", { className: ("\n\t\t\t\t\t\t" + messageClasses + "\n\t\t\t\t\t\tstr-chat__message--" + message.type + "\n\t\t\t\t\t\tstr-chat__message--" + message.status + "\n\t\t\t\t\t\t" + (message.text ? 'str-chat__message--has-text' : 'has-no-text') + "\n\t\t\t\t\t\t" + (hasAttachment ? 'str-chat__message--has-attachment' : '') + "\n            " + (hasReactions && isReactionEnabled ? 'str-chat__message--with-reactions' : '') + "\n            " + (message.pinned ? 'pinned-message' : '') + "\n            " + (groupedByUser ? 'str-chat__virtual-message__wrapper--group' : '') + "\n            " + (firstOfGroup ? 'str-chat__virtual-message__wrapper--first' : '') + "\n            " + (endOfGroup ? 'str-chat__virtual-message__wrapper--end' : '') + "\n\t\t\t\t\t").trim(), key: message.id, ref: messageWrapperRef },
             React__default['default'].createElement(MessageStatus$1, null),
             message.user && (React__default['default'].createElement(Avatar$1, { image: message.user.image, name: message.user.name || message.user.id, onClick: onUserClick, onMouseOver: onUserHover, user: message.user })),
             React__default['default'].createElement("div", { className: 'str-chat__message-inner', "data-testid": 'message-inner', onClick: message.status === 'failed' && message.errorStatusCode !== 403
@@ -5069,9 +5161,9 @@ var MessageSimpleWithContext = function (props) {
                 message.mml && (React__default['default'].createElement(MML, { actionHandler: handleAction, align: isMyMessage() ? 'right' : 'left', source: message.mml })),
                 !threadList && !!message.reply_count && (React__default['default'].createElement("div", { className: 'str-chat__message-simple-reply-button' },
                     React__default['default'].createElement(MessageRepliesCountButton$1, { onClick: handleOpenThread, reply_count: message.reply_count }))),
-                React__default['default'].createElement("div", { className: "str-chat__message-data str-chat__message-simple-data" },
+                (!groupedByUser || endOfGroup) && (React__default['default'].createElement("div", { className: "str-chat__message-data str-chat__message-simple-data" },
                     !isMyMessage() && message.user ? (React__default['default'].createElement("span", { className: 'str-chat__message-simple-name' }, message.user.name || message.user.id)) : null,
-                    React__default['default'].createElement(MessageTimestamp$1, { calendar: true, customClass: 'str-chat__message-simple-timestamp' }))))));
+                    React__default['default'].createElement(MessageTimestamp$1, { calendar: true, customClass: 'str-chat__message-simple-timestamp' })))))));
 };
 var MemoizedMessageSimple = React__default['default'].memo(MessageSimpleWithContext, areMessageUIPropsEqual);
 /**
@@ -5115,8 +5207,8 @@ var UnMemoizedChannel = function (props) {
     return React__default['default'].createElement(ChannelInner, __assign({}, props, { channel: channel, key: channel.cid }));
 };
 var ChannelInner = function (props) {
-    var acceptedFiles = props.acceptedFiles, channel = props.channel, children = props.children, doMarkReadRequest = props.doMarkReadRequest, doSendMessageRequest = props.doSendMessageRequest, doUpdateMessageRequest = props.doUpdateMessageRequest, _a = props.emojiData, emojiData = _a === void 0 ? defaultEmojiData : _a, _b = props.LoadingErrorIndicator, LoadingErrorIndicator$1 = _b === void 0 ? LoadingErrorIndicator : _b, _c = props.LoadingIndicator, LoadingIndicator$1 = _c === void 0 ? LoadingIndicator : _c, maxNumberOfFiles = props.maxNumberOfFiles, _d = props.multipleUploads, multipleUploads = _d === void 0 ? true : _d, onMentionsClick = props.onMentionsClick, onMentionsHover = props.onMentionsHover;
-    var _e = useChatContext(), client = _e.client, mutes = _e.mutes, theme = _e.theme, useImageFlagEmojisOnWindows = _e.useImageFlagEmojisOnWindows;
+    var acceptedFiles = props.acceptedFiles, activeUnreadHandler = props.activeUnreadHandler, channel = props.channel, children = props.children, doMarkReadRequest = props.doMarkReadRequest, doSendMessageRequest = props.doSendMessageRequest, doUpdateMessageRequest = props.doUpdateMessageRequest, _a = props.emojiData, emojiData = _a === void 0 ? defaultEmojiData : _a, _b = props.LoadingErrorIndicator, LoadingErrorIndicator$1 = _b === void 0 ? LoadingErrorIndicator : _b, _c = props.LoadingIndicator, LoadingIndicator$1 = _c === void 0 ? LoadingIndicator : _c, maxNumberOfFiles = props.maxNumberOfFiles, _d = props.multipleUploads, multipleUploads = _d === void 0 ? true : _d, onMentionsClick = props.onMentionsClick, onMentionsHover = props.onMentionsHover;
+    var _e = useChatContext(), client = _e.client, customClasses = _e.customClasses, mutes = _e.mutes, theme = _e.theme, useImageFlagEmojisOnWindows = _e.useImageFlagEmojisOnWindows;
     var t = useTranslationContext().t;
     var _f = React.useState([]), notifications = _f[0], setNotifications = _f[1];
     var _g = React.useState(), quotedMessage = _g[0], setQuotedMessage = _g[1];
@@ -5185,7 +5277,12 @@ var ChannelInner = function (props) {
                 }
                 else if (((_e = channel.getConfig()) === null || _e === void 0 ? void 0 : _e.read_events) && !channel.muteStatus().muted) {
                     var unread = channel.countUnread(lastRead.current);
-                    document.title = "(" + unread + ") " + originalTitle.current;
+                    if (activeUnreadHandler) {
+                        activeUnreadHandler(unread, originalTitle.current);
+                    }
+                    else {
+                        document.title = "(" + unread + ") " + originalTitle.current;
+                    }
                 }
             }
         }
@@ -5569,21 +5666,24 @@ var ChannelInner = function (props) {
     var typingContextValue = {
         typing: typing,
     };
+    var chatClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.chat) || 'str-chat';
+    var channelClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.channel) || 'str-chat-channel';
+    var windowsEmojiClass = useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/)
+        ? 'str-chat--windows-flags'
+        : '';
     if (state.error) {
-        return (React__default['default'].createElement("div", { className: "str-chat str-chat-channel " + theme },
+        return (React__default['default'].createElement("div", { className: chatClass + " " + channelClass + " " + theme },
             React__default['default'].createElement(LoadingErrorIndicator$1, { error: state.error })));
     }
     if (state.loading) {
-        return (React__default['default'].createElement("div", { className: "str-chat str-chat-channel " + theme },
+        return (React__default['default'].createElement("div", { className: chatClass + " " + channelClass + " " + theme },
             React__default['default'].createElement(LoadingIndicator$1, { size: 25 })));
     }
     if (!(channel === null || channel === void 0 ? void 0 : channel.watch)) {
-        return (React__default['default'].createElement("div", { className: "str-chat str-chat-channel " + theme },
+        return (React__default['default'].createElement("div", { className: chatClass + " " + channelClass + " " + theme },
             React__default['default'].createElement("div", null, t('Channel Missing'))));
     }
-    return (React__default['default'].createElement("div", { className: "str-chat str-chat-channel " + theme + (useImageFlagEmojisOnWindows && navigator.platform.match(/Win/)
-            ? ' str-chat--windows-flags'
-            : '') },
+    return (React__default['default'].createElement("div", { className: chatClass + " " + channelClass + " " + theme + " " + windowsEmojiClass },
         React__default['default'].createElement(ChannelStateProvider, { value: channelStateContextValue },
             React__default['default'].createElement(ChannelActionProvider, { value: channelActionContextValue },
                 React__default['default'].createElement(ComponentProvider, { value: componentContextValue },
@@ -5873,7 +5973,8 @@ var useMobileNavigation = function (channelListRef, navOpen, closeMobileNav) {
     }, [channelListRef, closeMobileNav, navOpen]);
 };
 
-var useNotificationAddedToChannelListener = function (setChannels, customHandler) {
+var useNotificationAddedToChannelListener = function (setChannels, customHandler, allowNewMessagesFromUnfilteredChannels) {
+    if (allowNewMessagesFromUnfilteredChannels === void 0) { allowNewMessagesFromUnfilteredChannels = true; }
     var client = useChatContext().client;
     React.useEffect(function () {
         var handleEvent = function (event) { return __awaiter(void 0, void 0, void 0, function () {
@@ -5886,7 +5987,7 @@ var useNotificationAddedToChannelListener = function (setChannels, customHandler
                         customHandler(setChannels, event);
                         return [3 /*break*/, 3];
                     case 1:
-                        if (!((_a = event.channel) === null || _a === void 0 ? void 0 : _a.type)) return [3 /*break*/, 3];
+                        if (!(allowNewMessagesFromUnfilteredChannels && ((_a = event.channel) === null || _a === void 0 ? void 0 : _a.type))) return [3 /*break*/, 3];
                         return [4 /*yield*/, getChannel(client, event.channel.type, event.channel.id)];
                     case 2:
                         channel_1 = _b.sent();
@@ -5903,7 +6004,8 @@ var useNotificationAddedToChannelListener = function (setChannels, customHandler
     }, [customHandler]);
 };
 
-var useNotificationMessageNewListener = function (setChannels, customHandler, setOffset) {
+var useNotificationMessageNewListener = function (setChannels, customHandler, setOffset, allowNewMessagesFromUnfilteredChannels) {
+    if (allowNewMessagesFromUnfilteredChannels === void 0) { allowNewMessagesFromUnfilteredChannels = true; }
     var client = useChatContext().client;
     React.useEffect(function () {
         var handleEvent = function (event) { return __awaiter(void 0, void 0, void 0, function () {
@@ -5916,11 +6018,10 @@ var useNotificationMessageNewListener = function (setChannels, customHandler, se
                         customHandler(setChannels, event);
                         return [3 /*break*/, 3];
                     case 1:
-                        if (!((_a = event.channel) === null || _a === void 0 ? void 0 : _a.type)) return [3 /*break*/, 3];
+                        if (!(allowNewMessagesFromUnfilteredChannels && ((_a = event.channel) === null || _a === void 0 ? void 0 : _a.type))) return [3 /*break*/, 3];
                         return [4 /*yield*/, getChannel(client, event.channel.type, event.channel.id)];
                     case 2:
                         channel_1 = _b.sent();
-                        // move channel to starting position
                         setChannels(function (channels) { return uniqBy__default['default'](__spreadArray([channel_1], channels), 'cid'); });
                         _b.label = 3;
                     case 3:
@@ -6150,6 +6251,16 @@ var ChannelPreview = function (props) {
     var _e = React.useState(0), unread = _e[0], setUnread = _e[1];
     var isActive = (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.cid) === channel.cid;
     var muted = useIsChannelMuted(channel).muted;
+    React.useEffect(function () {
+        var handleEvent = function (event) {
+            if (!event.cid)
+                return setUnread(0);
+            if (channel.cid === event.cid)
+                setUnread(0);
+        };
+        client.on('notification.mark_read', handleEvent);
+        return function () { return client.off('notification.mark_read', handleEvent); };
+    }, []);
     React.useEffect(function () {
         if (isActive || muted) {
             setUnread(0);
@@ -6412,7 +6523,7 @@ var DEFAULT_OPTIONS = {};
 var DEFAULT_SORT = {};
 var UnMemoizedChannelList = function (props) {
     var additionalChannelSearchProps = props.additionalChannelSearchProps, _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar : _a, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _b = props.ChannelSearch, ChannelSearch$1 = _b === void 0 ? ChannelSearch : _b, customActiveChannel = props.customActiveChannel, _c = props.EmptyStateIndicator, EmptyStateIndicator$1 = _c === void 0 ? EmptyStateIndicator : _c, filters = props.filters, _d = props.LoadingErrorIndicator, LoadingErrorIndicator = _d === void 0 ? ChatDown : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? LoadingChannels : _e, _f = props.List, List = _f === void 0 ? ChannelListMessenger : _f, lockChannelOrder = props.lockChannelOrder, onAddedToChannel = props.onAddedToChannel, onChannelDeleted = props.onChannelDeleted, onChannelHidden = props.onChannelHidden, onChannelTruncated = props.onChannelTruncated, onChannelUpdated = props.onChannelUpdated, onChannelVisible = props.onChannelVisible, onMessageNew = props.onMessageNew, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _g = props.Paginator, Paginator = _g === void 0 ? LoadMorePaginator : _g, Preview = props.Preview, _h = props.sendChannelsToList, sendChannelsToList = _h === void 0 ? false : _h, _j = props.setActiveChannelOnMount, setActiveChannelOnMount = _j === void 0 ? true : _j, _k = props.showChannelSearch, showChannelSearch = _k === void 0 ? false : _k, _l = props.sort, sort = _l === void 0 ? DEFAULT_SORT : _l, _m = props.watchers, watchers = _m === void 0 ? {} : _m;
-    var _o = useChatContext(), channel = _o.channel, client = _o.client, closeMobileNav = _o.closeMobileNav, _p = _o.navOpen, navOpen = _p === void 0 ? false : _p, setActiveChannel = _o.setActiveChannel, theme = _o.theme, useImageFlagEmojisOnWindows = _o.useImageFlagEmojisOnWindows;
+    var _o = useChatContext(), channel = _o.channel, client = _o.client, closeMobileNav = _o.closeMobileNav, customClasses = _o.customClasses, _p = _o.navOpen, navOpen = _p === void 0 ? false : _p, setActiveChannel = _o.setActiveChannel, theme = _o.theme, useImageFlagEmojisOnWindows = _o.useImageFlagEmojisOnWindows;
     var channelListRef = React.useRef(null);
     var _q = React.useState(0), channelUpdateCount = _q[0], setChannelUpdateCount = _q[1];
     /**
@@ -6463,8 +6574,8 @@ var UnMemoizedChannelList = function (props) {
     var loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
     useMobileNavigation(channelListRef, navOpen, closeMobileNav);
     useMessageNewListener(setChannels, lockChannelOrder, allowNewMessagesFromUnfilteredChannels);
-    useNotificationMessageNewListener(setChannels, onMessageNew, setOffset);
-    useNotificationAddedToChannelListener(setChannels, onAddedToChannel);
+    useNotificationMessageNewListener(setChannels, onMessageNew, setOffset, allowNewMessagesFromUnfilteredChannels);
+    useNotificationAddedToChannelListener(setChannels, onAddedToChannel, allowNewMessagesFromUnfilteredChannels);
     useNotificationRemovedFromChannelListener(setChannels, onRemovedFromChannel);
     useChannelDeletedListener(setChannels, onChannelDeleted);
     useChannelHiddenListener(setChannels, onChannelHidden);
@@ -6502,10 +6613,14 @@ var UnMemoizedChannelList = function (props) {
         return React__default['default'].createElement(ChannelPreview, __assign({}, previewProps));
     };
     var renderList = function () { return (React__default['default'].createElement(List, { error: status.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: status.loadingChannels, LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator }, !loadedChannels || loadedChannels.length === 0 ? (React__default['default'].createElement(EmptyStateIndicator$1, { listType: 'channel' })) : (React__default['default'].createElement(Paginator, { hasNextPage: hasNextPage, loadNextPage: loadNextPage, refreshing: status.refreshing }, loadedChannels.map(renderChannel))))); };
+    var chatClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.chat) || 'str-chat';
+    var channelListClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.channelList) || 'str-chat-channel-list';
+    var navigationClass = navOpen ? 'str-chat-channel-list--open' : '';
+    var windowsEmojiClass = useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/)
+        ? 'str-chat--windows-flags'
+        : '';
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement("div", { className: "str-chat str-chat-channel-list " + theme + " " + (navOpen ? 'str-chat-channel-list--open' : '') + " " + (useImageFlagEmojisOnWindows && navigator.platform.match(/Win/)
-                ? 'str-chat--windows-flags'
-                : ''), ref: channelListRef },
+        React__default['default'].createElement("div", { className: chatClass + " " + channelListClass + " " + theme + " " + navigationClass + " " + windowsEmojiClass, ref: channelListRef },
             showChannelSearch && React__default['default'].createElement(ChannelSearch$1, __assign({}, additionalChannelSearchProps)),
             renderList())));
 };
@@ -7137,7 +7252,7 @@ var Streami18n = /** @class */ (function () {
     return Streami18n;
 }());
 
-var version = '6.6.0';
+var version = '6.8.0';
 
 var useChat = function (_a) {
     var _b;
@@ -7255,7 +7370,7 @@ var useCustomStyles = function (customStyles) {
  * as it provides the ChatContext.
  */
 var Chat = function (props) {
-    var children = props.children, client = props.client, customStyles = props.customStyles, _a = props.darkMode, darkMode = _a === void 0 ? false : _a, defaultLanguage = props.defaultLanguage, i18nInstance = props.i18nInstance, _b = props.initialNavOpen, initialNavOpen = _b === void 0 ? true : _b, _c = props.theme, theme = _c === void 0 ? 'messaging light' : _c, _d = props.useImageFlagEmojisOnWindows, useImageFlagEmojisOnWindows = _d === void 0 ? false : _d;
+    var children = props.children, client = props.client, customClasses = props.customClasses, customStyles = props.customStyles, _a = props.darkMode, darkMode = _a === void 0 ? false : _a, defaultLanguage = props.defaultLanguage, i18nInstance = props.i18nInstance, _b = props.initialNavOpen, initialNavOpen = _b === void 0 ? true : _b, _c = props.theme, theme = _c === void 0 ? 'messaging light' : _c, _d = props.useImageFlagEmojisOnWindows, useImageFlagEmojisOnWindows = _d === void 0 ? false : _d;
     var _e = useChat({ client: client, defaultLanguage: defaultLanguage, i18nInstance: i18nInstance, initialNavOpen: initialNavOpen }), channel = _e.channel, closeMobileNav = _e.closeMobileNav, mutes = _e.mutes, navOpen = _e.navOpen, openMobileNav = _e.openMobileNav, setActiveChannel = _e.setActiveChannel, translators = _e.translators;
     useCustomStyles(darkMode ? darkModeTheme : customStyles);
     if (!translators.t)
@@ -7264,6 +7379,7 @@ var Chat = function (props) {
             channel: channel,
             client: client,
             closeMobileNav: closeMobileNav,
+            customClasses: customClasses,
             mutes: mutes,
             navOpen: navOpen,
             openMobileNav: openMobileNav,
@@ -7576,7 +7692,7 @@ var Message = function (props) {
         notify: addNotification,
     }), canPin = _c.canPin, handlePin = _c.handlePin;
     var _d = useReactionClick(message, reactionSelectorRef, undefined, closeReactionSelectorOnClick), isReactionEnabled = _d.isReactionEnabled, onReactionListClick = _d.onReactionListClick, showDetailedReactions = _d.showDetailedReactions;
-    return (React__default['default'].createElement(MemoizedMessage, { additionalMessageInputProps: props.additionalMessageInputProps, canPin: canPin, customMessageActions: props.customMessageActions, disableQuotedMessages: props.disableQuotedMessages, 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, 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, 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, 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) {
@@ -8111,8 +8227,8 @@ var useLastReadData = function (props) {
 
 var useMessageListElements = function (props) {
     var enrichedMessages = props.enrichedMessages, internalMessageProps = props.internalMessageProps, messageGroupStyles = props.messageGroupStyles, onMessageLoadCaptured = props.onMessageLoadCaptured, read = props.read, returnAllReadData = props.returnAllReadData, threadList = props.threadList;
-    var client = useChatContext().client;
-    var _a = useComponentContext(), _b = _a.DateSeparator, DateSeparator$1 = _b === void 0 ? DateSeparator : _b, HeaderComponent = _a.HeaderComponent, _c = _a.MessageSystem, MessageSystem = _c === void 0 ? EventComponent : _c;
+    var _a = useChatContext(), client = _a.client, customClasses = _a.customClasses;
+    var _b = useComponentContext(), _c = _b.DateSeparator, DateSeparator$1 = _c === void 0 ? DateSeparator : _c, HeaderComponent = _b.HeaderComponent, _d = _b.MessageSystem, MessageSystem = _d === void 0 ? EventComponent : _d;
     // get the readData, but only for messages submitted by the user themselves
     var readData = useLastReadData({
         messages: enrichedMessages,
@@ -8139,7 +8255,8 @@ var useMessageListElements = function (props) {
                     React__default['default'].createElement(MessageSystem, { message: message })));
             }
             var groupStyles = messageGroupStyles[message.id] || '';
-            return (React__default['default'].createElement("li", { className: "str-chat__li str-chat__li--" + groupStyles, key: message.id || message.created_at, onLoadCapture: onMessageLoadCaptured },
+            var messageClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.message) || "str-chat__li str-chat__li--" + groupStyles;
+            return (React__default['default'].createElement("li", { className: messageClass, key: message.id || message.created_at, onLoadCapture: onMessageLoadCaptured },
                 React__default['default'].createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], threadList: threadList }, internalMessageProps))));
         });
     }, [
@@ -8352,6 +8469,7 @@ var useInternalInfiniteScrollProps = function (props) {
 };
 var MessageListWithContext = function (props) {
     var channel = props.channel, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? false : _a, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, _d = props.messageActions, messageActions = _d === void 0 ? Object.keys(MESSAGE_ACTIONS) : _d, _e = props.messages, messages = _e === void 0 ? [] : _e, notifications = props.notifications, _f = props.noGroupByUser, noGroupByUser = _f === void 0 ? false : _f, _g = props.pinPermissions, pinPermissions = _g === void 0 ? defaultPinPermissions : _g, _h = props.returnAllReadData, returnAllReadData = _h === void 0 ? false : _h, _j = props.threadList, threadList = _j === void 0 ? false : _j, _k = props.unsafeHTML, unsafeHTML = _k === void 0 ? false : _k, headerPosition = props.headerPosition, read = props.read;
+    var customClasses = useChatContext().customClasses;
     var _l = useComponentContext(), _m = _l.EmptyStateIndicator, EmptyStateIndicator$1 = _m === void 0 ? EmptyStateIndicator : _m, _o = _l.MessageListNotifications, MessageListNotifications = _o === void 0 ? DefaultMessageListNotifications : _o, _p = _l.MessageNotification, MessageNotification$1 = _p === void 0 ? MessageNotification : _p, _q = _l.TypingIndicator, TypingIndicator$1 = _q === void 0 ? TypingIndicator : _q;
     var _r = useScrollLocationLogic({
         messages: messages,
@@ -8402,8 +8520,10 @@ var MessageListWithContext = function (props) {
         threadList: threadList,
     });
     var finalInternalInfiniteScrollProps = useInternalInfiniteScrollProps(props);
+    var messageListClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.messageList) || 'str-chat__list';
+    var threadListClass = threadList ? (customClasses === null || customClasses === void 0 ? void 0 : customClasses.threadList) || 'str-chat__list--thread' : '';
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement("div", { className: "str-chat__list " + (threadList ? 'str-chat__list--thread' : ''), onScroll: onScroll, ref: listRef }, !elements.length ? (React__default['default'].createElement(EmptyStateIndicator$1, { listType: 'message' })) : (React__default['default'].createElement(InfiniteScroll, __assign({ className: 'str-chat__reverse-infinite-scroll', "data-testid": 'reverse-infinite-scroll', isReverse: true, useWindow: false }, finalInternalInfiniteScrollProps),
+        React__default['default'].createElement("div", { className: messageListClass + " " + threadListClass, onScroll: onScroll, ref: listRef }, !elements.length ? (React__default['default'].createElement(EmptyStateIndicator$1, { listType: 'message' })) : (React__default['default'].createElement(InfiniteScroll, __assign({ className: 'str-chat__reverse-infinite-scroll', "data-testid": 'reverse-infinite-scroll', isReverse: true, useWindow: false }, finalInternalInfiniteScrollProps),
             React__default['default'].createElement("ul", { className: 'str-chat__ul' }, elements),
             React__default['default'].createElement(TypingIndicator$1, { threadList: threadList }),
             React__default['default'].createElement("div", { key: 'bottom' })))),
@@ -8536,12 +8656,13 @@ var PREPEND_OFFSET = Math.pow(10, 7);
 var VirtualizedMessageListWithContext = function (props) {
     var channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? true : _a, hasMore = props.hasMore, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, loadingMore = props.loadingMore, loadMore = props.loadMore, propMessage = props.Message, _d = props.messageLimit, messageLimit = _d === void 0 ? 100 : _d, messages = props.messages, _e = props.overscan, overscan = _e === void 0 ? 0 : _e, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _f = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _f === void 0 ? false : _f, _g = props.separateGiphyPreview, separateGiphyPreview = _g === void 0 ? false : _g, _h = props.shouldGroupByUser, shouldGroupByUser = _h === void 0 ? false : _h, _j = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _j === void 0 ? 'smooth' : _j, userId = props.userId;
+    scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _f = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _f === void 0 ? false : _f, _g = props.separateGiphyPreview, separateGiphyPreview = _g === void 0 ? false : _g, _h = props.shouldGroupByUser, shouldGroupByUser = _h === void 0 ? false : _h, _j = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _j === void 0 ? 'smooth' : _j;
     var _k = useComponentContext(), _l = _k.DateSeparator, DateSeparator$1 = _l === void 0 ? DateSeparator : _l, _m = _k.EmptyStateIndicator, EmptyStateIndicator$1 = _m === void 0 ? EmptyStateIndicator : _m, _o = _k.GiphyPreviewMessage, GiphyPreviewMessage$1 = _o === void 0 ? GiphyPreviewMessage : _o, _p = _k.LoadingIndicator, LoadingIndicator$1 = _p === void 0 ? LoadingIndicator : _p, _q = _k.MessageNotification, MessageNotification$1 = _q === void 0 ? MessageNotification : _q, _r = _k.MessageSystem, MessageSystem = _r === void 0 ? EventComponent : _r, _s = _k.TypingIndicator, TypingIndicator = _s === void 0 ? null : _s, _t = _k.VirtualMessage, contextMessage = _t === void 0 ? MessageSimple : _t;
+    var _u = useChatContext(), client = _u.client, customClasses = _u.customClasses;
     var t = useTranslationContext().t;
     var lastRead = React.useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
     var MessageUIComponent = propMessage || contextMessage;
-    var _u = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _u.giphyPreviewMessage, setGiphyPreviewMessage = _u.setGiphyPreviewMessage;
+    var _v = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _v.giphyPreviewMessage, setGiphyPreviewMessage = _v.setGiphyPreviewMessage;
     var processedMessages = React.useMemo(function () {
         if (typeof messages === 'undefined') {
             return [];
@@ -8560,7 +8681,7 @@ var VirtualizedMessageListWithContext = function (props) {
             messages: messages,
             separateGiphyPreview: separateGiphyPreview,
             setGiphyPreviewMessage: setGiphyPreviewMessage,
-            userId: userId,
+            userId: client.userID || '',
         });
     }, [
         disableDateSeparator,
@@ -8569,10 +8690,10 @@ var VirtualizedMessageListWithContext = function (props) {
         lastRead,
         messages,
         messages === null || messages === void 0 ? void 0 : messages.length,
-        userId,
+        client.userID,
     ]);
     var virtuoso = React.useRef(null);
-    var _v = useNewMessageNotification(processedMessages, userId), atBottom = _v.atBottom, newMessagesNotification = _v.newMessagesNotification, setNewMessagesNotification = _v.setNewMessagesNotification;
+    var _w = useNewMessageNotification(processedMessages, client.userID), atBottom = _w.atBottom, newMessagesNotification = _w.newMessagesNotification, setNewMessagesNotification = _w.setNewMessagesNotification;
     var scrollToBottom = React.useCallback(function () {
         if (virtuoso.current) {
             virtuoso.current.scrollToIndex(processedMessages.length - 1);
@@ -8591,7 +8712,7 @@ var VirtualizedMessageListWithContext = function (props) {
         return function () { return window.removeEventListener('focus', scrollToBottomIfConfigured); };
     }, [scrollToBottomIfConfigured]);
     var numItemsPrepended = usePrependedMessagesCount(processedMessages);
-    var shouldForceScrollToBottom = useShouldForceScrollToBottom(processedMessages, userId);
+    var shouldForceScrollToBottom = useShouldForceScrollToBottom(processedMessages, client.userID);
     var followOutput = function (isAtBottom) {
         if (shouldForceScrollToBottom()) {
             return isAtBottom ? stickToBottomScrollBehavior : 'auto';
@@ -8600,7 +8721,7 @@ var VirtualizedMessageListWithContext = function (props) {
         return isAtBottom ? stickToBottomScrollBehavior : false;
     };
     var messageRenderer = React.useCallback(function (messageList, virtuosoIndex) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         var streamMessageIndex = virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
         // use custom renderer supplied by client if present and skip the rest
         if (customMessageRenderer) {
@@ -8618,7 +8739,13 @@ var VirtualizedMessageListWithContext = function (props) {
         var groupedByUser = shouldGroupByUser &&
             streamMessageIndex > 0 &&
             ((_a = message.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = messageList[streamMessageIndex - 1].user) === null || _b === void 0 ? void 0 : _b.id);
-        return (React__default['default'].createElement(Message, { closeReactionSelectorOnClick: closeReactionSelectorOnClick, groupedByUser: groupedByUser, message: message, Message: MessageUIComponent }));
+        var firstOfGroup = shouldGroupByUser &&
+            streamMessageIndex > 0 &&
+            ((_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 &&
+            streamMessageIndex > 0 &&
+            ((_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 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' }))); };
@@ -8626,8 +8753,9 @@ var VirtualizedMessageListWithContext = function (props) {
             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: 'str-chat__virtual-list-message-wrapper' }))); };
+        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);
         };
@@ -8651,8 +8779,9 @@ var VirtualizedMessageListWithContext = function (props) {
     };
     if (!processedMessages)
         return null;
+    var virtualizedMessageListClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualizedMessageList) || 'str-chat__virtual-list';
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement("div", { className: 'str-chat__virtual-list' },
+        React__default['default'].createElement("div", { className: virtualizedMessageListClass },
             React__default['default'].createElement(reactVirtuoso.Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, components: virtuosoComponents, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, initialTopMostItemIndex: processedMessages.length ? processedMessages.length - 1 : 0, itemContent: function (i) { return messageRenderer(processedMessages, i); }, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))),
             React__default['default'].createElement("div", { className: 'str-chat__list-notifications' },
                 React__default['default'].createElement(MessageNotification$1, { onClick: scrollToBottom, showNotification: newMessagesNotification }, t('New Messages!')))),
@@ -8667,9 +8796,8 @@ var VirtualizedMessageListWithContext = function (props) {
 function VirtualizedMessageList(props) {
     var loadMore = useChannelActionContext().loadMore;
     var _a = useChannelStateContext(), channel = _a.channel, hasMore = _a.hasMore, loadingMore = _a.loadingMore, contextMessages = _a.messages;
-    var client = useChatContext().client;
     var messages = props.messages || contextMessages;
-    return (React__default['default'].createElement(VirtualizedMessageListWithContext, __assign({ channel: channel, hasMore: !!hasMore, loadingMore: !!loadingMore, loadMore: loadMore, messages: messages, userId: client.userID || '' }, props)));
+    return (React__default['default'].createElement(VirtualizedMessageListWithContext, __assign({ channel: channel, hasMore: !!hasMore, loadingMore: !!loadingMore, loadMore: loadMore, messages: messages }, props)));
 }
 
 /**
@@ -8711,6 +8839,7 @@ 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.fullWidth, fullWidth = _b === void 0 ? false : _b, PropInput = props.Input, PropMessage = props.Message, virtualized = props.virtualized;
     var _c = useChannelStateContext(), thread = _c.thread, threadHasMore = _c.threadHasMore, threadLoadingMore = _c.threadLoadingMore, threadMessages = _c.threadMessages;
     var _d = useChannelActionContext(), closeThread = _d.closeThread, loadMoreThread = _d.loadMoreThread;
+    var customClasses = useChatContext().customClasses;
     var _e = useComponentContext(), ContextInput = _e.ThreadInput, ContextMessage = _e.Message, _f = _e.ThreadHeader, ThreadHeader = _f === void 0 ? DefaultThreadHeader : _f, _g = _e.ThreadStart, ThreadStart = _g === void 0 ? DefaultThreadStart : _g, _h = _e.VirtualMessage, VirtualMessage = _h === void 0 ? FixedHeightMessage : _h;
     var messageList = React.useRef(null);
     var ThreadInput = PropInput || (additionalMessageInputProps === null || additionalMessageInputProps === void 0 ? void 0 : additionalMessageInputProps.Input) || ContextInput || MessageInputSmall;
@@ -8733,7 +8862,8 @@ var ThreadInner = function (props) {
     }, [threadMessages === null || threadMessages === void 0 ? void 0 : threadMessages.length]);
     if (!thread)
         return null;
-    return (React__default['default'].createElement("div", { className: "str-chat__thread " + (fullWidth ? 'str-chat__thread--full' : '') },
+    var threadClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.thread) || 'str-chat__thread';
+    return (React__default['default'].createElement("div", { className: threadClass + " " + (fullWidth ? 'str-chat__thread--full' : '') },
         React__default['default'].createElement(ThreadHeader, { closeThread: closeThread, thread: thread }),
         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)),
@@ -8755,6 +8885,7 @@ var UnMemoizedWindow = function (props) {
  */
 var Window = React__default['default'].memo(UnMemoizedWindow);
 
+exports.ActionsIcon = ActionsIcon;
 exports.Attachment = Attachment;
 exports.AttachmentActions = AttachmentActions;
 exports.Audio = Audio;