stream-chat-react 9.4.0 → 10.0.0-theming-v2.2

package/dist/components/Message/MessageOptions.js

@@ -4,8 +4,8 @@ import { MESSAGE_ACTIONS, showMessageActionsBox } from './utils';
 import { MessageActions } from '../MessageActions';
 import { useMessageContext } from '../../context/MessageContext';
 var UnMemoizedMessageOptions = function (props) {
-    var _a = props.ActionsIcon, ActionsIcon = _a === void 0 ? DefaultActionsIcon : _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 = _d === void 0 ? DefaultReactionIcon : _d, _e = props.theme, theme = _e === void 0 ? 'simple' : _e, _f = props.ThreadIcon, ThreadIcon = _f === void 0 ? DefaultThreadIcon : _f;
-    var _g = useMessageContext('MessageOptions'), 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 _a = props.ActionsIcon, ActionsIcon = _a === void 0 ? DefaultActionsIcon : _a, _b = props.displayReplies, displayReplies = _b === void 0 ? true : _b, propHandleOpenThread = props.handleOpenThread, messageWrapperRef = props.messageWrapperRef, _c = props.ReactionIcon, ReactionIcon = _c === void 0 ? DefaultReactionIcon : _c, _d = props.theme, theme = _d === void 0 ? 'simple' : _d, _e = props.ThreadIcon, ThreadIcon = _e === void 0 ? DefaultThreadIcon : _e;
+    var _f = useMessageContext('MessageOptions'), customMessageActions = _f.customMessageActions, getMessageActions = _f.getMessageActions, contextHandleOpenThread = _f.handleOpenThread, initialMessage = _f.initialMessage, message = _f.message, onReactionListClick = _f.onReactionListClick, threadList = _f.threadList;
     var handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
     var messageActions = getMessageActions();
     var showActionsBox = showMessageActionsBox(messageActions, threadList) || !!customMessageActions;
@@ -20,19 +20,12 @@ var UnMemoizedMessageOptions = function (props) {
         initialMessage) {
         return null;
     }
-    if (isMyMessage() && displayLeft) {
-        return (React.createElement("div", { className: "str-chat__message-" + theme + "__actions", "data-testid": 'message-options-left' },
-            showActionsBox && (React.createElement(MessageActions, { ActionsIcon: ActionsIcon, messageWrapperRef: messageWrapperRef })),
-            shouldShowReplies && (React.createElement("button", { "aria-label": 'Open Thread', className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--thread", "data-testid": 'thread-action', onClick: handleOpenThread },
-                React.createElement(ThreadIcon, null))),
-            shouldShowReactions && (React.createElement("button", { "aria-label": 'Open Reaction Selector', className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--reactions", "data-testid": 'message-reaction-action', onClick: onReactionListClick },
-                React.createElement(ReactionIcon, null)))));
-    }
-    return (React.createElement("div", { className: "str-chat__message-" + theme + "__actions", "data-testid": 'message-options' },
-        shouldShowReactions && (React.createElement("button", { "aria-label": 'Open Reaction Selector', className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--reactions", "data-testid": 'message-reaction-action', onClick: onReactionListClick },
-            React.createElement(ReactionIcon, null))),
-        shouldShowReplies && (React.createElement("button", { "aria-label": 'Open Thread', className: "str-chat__message-" + theme + "__actions__action str-chat__message-" + theme + "__actions__action--thread", "data-testid": 'thread-action', onClick: handleOpenThread },
-            React.createElement(ThreadIcon, null))),
-        showActionsBox && (React.createElement(MessageActions, { ActionsIcon: ActionsIcon, messageWrapperRef: messageWrapperRef }))));
+    var rootClassName = "str-chat__message-".concat(theme, "__actions str-chat__message-options");
+    return (React.createElement("div", { className: rootClassName, "data-testid": 'message-options' },
+        showActionsBox && (React.createElement(MessageActions, { ActionsIcon: ActionsIcon, messageWrapperRef: messageWrapperRef })),
+        shouldShowReplies && (React.createElement("button", { "aria-label": 'Open Thread', className: "str-chat__message-".concat(theme, "__actions__action str-chat__message-").concat(theme, "__actions__action--thread str-chat__message-reply-in-thread-button"), "data-testid": 'thread-action', onClick: handleOpenThread },
+            React.createElement(ThreadIcon, { className: 'str-chat__message-action-icon' }))),
+        shouldShowReactions && (React.createElement("button", { "aria-label": 'Open Reaction Selector', className: "str-chat__message-".concat(theme, "__actions__action str-chat__message-").concat(theme, "__actions__action--reactions str-chat__message-reactions-button"), "data-testid": 'message-reaction-action', onClick: onReactionListClick },
+            React.createElement(ReactionIcon, { className: 'str-chat__message-action-icon' })))));
 };
 export var MessageOptions = React.memo(UnMemoizedMessageOptions);

package/dist/components/Message/MessageRepliesCountButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageRepliesCountButton.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageRepliesCountButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMjD,oBAAY,8BAA8B,GAAG;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA6BF,eAAO,MAAM,yBAAyB,UA3Bc,8BAA8B,uBA6BnC,CAAC"}
+{"version":3,"file":"MessageRepliesCountButton.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageRepliesCountButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAOjD,oBAAY,8BAA8B,GAAG;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAgCF,eAAO,MAAM,yBAAyB,UA9Bc,8BAA8B,uBAgCnC,CAAC"}

package/dist/components/Message/MessageRepliesCountButton.js

@@ -1,20 +1,23 @@
 import React from 'react';
 import { ReplyIcon } from './icons';
+import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 var UnMemoizedMessageRepliesCountButton = function (props) {
     var labelPlural = props.labelPlural, labelSingle = props.labelSingle, onClick = props.onClick, _a = props.reply_count, reply_count = _a === void 0 ? 0 : _a;
     var t = useTranslationContext('MessageRepliesCountButton').t;
+    var themeVersion = useChatContext('MessageRepliesCountButton').themeVersion;
     if (!reply_count)
         return null;
     var replyCountText = t('replyCount', { count: reply_count });
     if (labelPlural && reply_count > 1) {
-        replyCountText = reply_count + " " + labelPlural;
+        replyCountText = "".concat(reply_count, " ").concat(labelPlural);
     }
     else if (labelSingle) {
-        replyCountText = "1 " + labelSingle;
+        replyCountText = "1 ".concat(labelSingle);
     }
-    return (React.createElement("button", { className: 'str-chat__message-replies-count-button', "data-testid": 'replies-count-button', onClick: onClick },
-        React.createElement(ReplyIcon, null),
-        replyCountText));
+    return (React.createElement("div", { className: 'str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper' },
+        React.createElement("button", { className: 'str-chat__message-replies-count-button', "data-testid": 'replies-count-button', onClick: onClick },
+            themeVersion === '1' && React.createElement(ReplyIcon, null),
+            replyCountText)));
 };
 export var MessageRepliesCountButton = React.memo(UnMemoizedMessageRepliesCountButton);

package/dist/components/Message/MessageSimple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSimple.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageSimple.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,mBAAmB,EAAqB,MAAM,8BAA8B,CAAC;AAEtF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAEvD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAmKnE;;GAEG;AACH,eAAO,MAAM,aAAa,4JAQzB,CAAC"}
+{"version":3,"file":"MessageSimple.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageSimple.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,mBAAmB,EAAqB,MAAM,8BAA8B,CAAC;AAEtF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAEvD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAsLnE;;GAEG;AACH,eAAO,MAAM,aAAa,4JAQzB,CAAC"}

package/dist/components/Message/MessageSimple.js

@@ -10,6 +10,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
+import clsx from 'clsx';
+import { MessageErrorIcon } from './icons';
 import { MessageDeleted as DefaultMessageDeleted } from './MessageDeleted';
 import { MessageOptions as DefaultMessageOptions } from './MessageOptions';
 import { MessageRepliesCountButton as DefaultMessageRepliesCountButton } from './MessageRepliesCountButton';
@@ -23,46 +25,64 @@ import { EditMessageForm as DefaultEditMessageForm, MessageInput } from '../Mess
 import { MML } from '../MML';
 import { Modal } from '../Modal';
 import { ReactionsList as DefaultReactionList, ReactionSelector as DefaultReactionSelector, } from '../Reactions';
+import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 var MessageSimpleWithContext = function (props) {
     var _a;
     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, highlighted = props.highlighted, 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('MessageSimple'), Attachment = _b.Attachment, _c = _b.Avatar, Avatar = _c === void 0 ? DefaultAvatar : _c, _d = _b.EditMessageInput, EditMessageInput = _d === void 0 ? DefaultEditMessageForm : _d, _e = _b.MessageDeleted, MessageDeleted = _e === void 0 ? DefaultMessageDeleted : _e, _f = _b.MessageOptions, MessageOptions = _f === void 0 ? DefaultMessageOptions : _f, _g = _b.MessageRepliesCountButton, MessageRepliesCountButton = _g === void 0 ? DefaultMessageRepliesCountButton : _g, _h = _b.MessageStatus, MessageStatus = _h === void 0 ? DefaultMessageStatus : _h, _j = _b.MessageTimestamp, MessageTimestamp = _j === void 0 ? DefaultMessageTimestamp : _j, _k = _b.ReactionSelector, ReactionSelector = _k === void 0 ? DefaultReactionSelector : _k, _l = _b.ReactionsList, ReactionsList = _l === void 0 ? DefaultReactionList : _l;
+    var themeVersion = useChatContext('MessageSimple').themeVersion;
     var hasAttachment = messageHasAttachments(message);
     var hasReactions = messageHasReactions(message);
-    var messageClasses = isMyMessage()
-        ? 'str-chat__message str-chat__message--me str-chat__message-simple str-chat__message-simple--me'
-        : 'str-chat__message str-chat__message-simple';
     if (message.customType === CUSTOM_MESSAGE_TYPE.date) {
         return null;
     }
     if (message.deleted_at || message.type === 'deleted') {
         return React.createElement(MessageDeleted, { message: message });
     }
+    var showMetadata = !groupedByUser || endOfGroup;
+    var showReplyCountButton = !threadList && !!message.reply_count;
+    var allowRetry = message.status === 'failed' && message.errorStatusCode !== 403;
+    var rootClassName = clsx('str-chat__message str-chat__message-simple', "str-chat__message--".concat(message.type), "str-chat__message--".concat(message.status), isMyMessage()
+        ? 'str-chat__message--me str-chat__message-simple--me'
+        : 'str-chat__message--other', message.text ? 'str-chat__message--has-text' : 'has-no-text', {
+        'pinned-message': message.pinned,
+        'str-chat__message--has-attachment': hasAttachment,
+        'str-chat__message--highlighted': highlighted,
+        'str-chat__message--with-reactions str-chat__message-with-thread-link': hasReactions && isReactionEnabled,
+        'str-chat__message-send-can-be-retried': (message === null || message === void 0 ? void 0 : message.status) === 'failed' && (message === null || message === void 0 ? void 0 : message.errorStatusCode) !== 403,
+        'str-chat__virtual-message__wrapper--end': endOfGroup,
+        'str-chat__virtual-message__wrapper--first': firstOfGroup,
+        'str-chat__virtual-message__wrapper--group': groupedByUser,
+    });
     return (React.createElement(React.Fragment, null,
         editing && (React.createElement(Modal, { onClose: clearEditingState, open: editing },
-            React.createElement(MessageInput, __assign({ clearEditingState: clearEditingState, Input: EditMessageInput, message: message }, additionalMessageInputProps)))),
-        React.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            " + (highlighted ? 'str-chat__message--highlighted' : '') + "\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 },
-            React.createElement(MessageStatus, null),
+            React.createElement(MessageInput, __assign({ clearEditingState: clearEditingState, grow: true, Input: EditMessageInput, message: message }, additionalMessageInputProps)))),
+        React.createElement("div", { className: rootClassName, key: message.id },
+            themeVersion === '1' && React.createElement(MessageStatus, null),
             message.user && (React.createElement(Avatar, { image: message.user.image, name: message.user.name || message.user.id, onClick: onUserClick, onMouseOver: onUserHover, user: message.user })),
-            React.createElement("div", { className: 'str-chat__message-inner', "data-testid": 'message-inner', onClick: message.status === 'failed' && message.errorStatusCode !== 403
-                    ? function () { return handleRetry(message); }
-                    : undefined, onKeyPress: message.status === 'failed' && message.errorStatusCode !== 403
-                    ? function () { return handleRetry(message); }
-                    : undefined },
-                React.createElement(React.Fragment, null,
-                    React.createElement(MessageOptions, null),
-                    hasReactions && !showDetailedReactions && isReactionEnabled && (React.createElement(ReactionsList, { reverse: true })),
+            React.createElement("div", { className: clsx('str-chat__message-inner', {
+                    'str-chat__simple-message--error-failed': allowRetry,
+                }), "data-testid": 'message-inner', onClick: allowRetry ? function () { return handleRetry(message); } : undefined, onKeyUp: allowRetry ? function () { return handleRetry(message); } : undefined },
+                React.createElement(MessageOptions, null),
+                React.createElement("div", { className: 'str-chat__message-reactions-host' },
+                    hasReactions && isReactionEnabled && React.createElement(ReactionsList, { reverse: true }),
                     showDetailedReactions && isReactionEnabled && (React.createElement(ReactionSelector, { ref: reactionSelectorRef }))),
-                ((_a = message.attachments) === null || _a === void 0 ? void 0 : _a.length) && !message.quoted_message ? (React.createElement(Attachment, { actionHandler: handleAction, attachments: message.attachments })) : null,
-                React.createElement(MessageText, { message: message }),
-                message.mml && (React.createElement(MML, { actionHandler: handleAction, align: isMyMessage() ? 'right' : 'left', source: message.mml })),
-                !threadList && !!message.reply_count && (React.createElement("div", { className: 'str-chat__message-simple-reply-button' },
-                    React.createElement(MessageRepliesCountButton, { onClick: handleOpenThread, reply_count: message.reply_count }))),
-                (!groupedByUser || endOfGroup) && (React.createElement("div", { className: "str-chat__message-data str-chat__message-simple-data" },
+                React.createElement("div", { className: 'str-chat__message-bubble' },
+                    ((_a = message.attachments) === null || _a === void 0 ? void 0 : _a.length) && !message.quoted_message ? (React.createElement(Attachment, { actionHandler: handleAction, attachments: message.attachments })) : null,
+                    React.createElement(MessageText, { message: message }),
+                    message.mml && (React.createElement(MML, { actionHandler: handleAction, align: isMyMessage() ? 'right' : 'left', source: message.mml })),
+                    themeVersion === '2' && React.createElement(MessageErrorIcon, null)),
+                showReplyCountButton && themeVersion === '1' && (React.createElement(MessageRepliesCountButton, { onClick: handleOpenThread, reply_count: message.reply_count })),
+                showMetadata && themeVersion === '1' && (React.createElement("div", { className: 'str-chat__message-data str-chat__message-simple-data' },
                     !isMyMessage() && message.user ? (React.createElement("span", { className: 'str-chat__message-simple-name' }, message.user.name || message.user.id)) : null,
-                    React.createElement(MessageTimestamp, { calendar: true, customClass: 'str-chat__message-simple-timestamp' })))))));
+                    React.createElement(MessageTimestamp, { calendar: true, customClass: 'str-chat__message-simple-timestamp' })))),
+            showReplyCountButton && themeVersion === '2' && (React.createElement(MessageRepliesCountButton, { onClick: handleOpenThread, reply_count: message.reply_count })),
+            showMetadata && themeVersion === '2' && (React.createElement("div", { className: 'str-chat__message-data str-chat__message-simple-data str-chat__message-metadata' },
+                React.createElement(MessageStatus, null),
+                !isMyMessage() && !!message.user && (React.createElement("span", { className: 'str-chat__message-simple-name' }, message.user.name || message.user.id)),
+                React.createElement(MessageTimestamp, { calendar: true, customClass: 'str-chat__message-simple-timestamp' }))))));
 };
 var MemoizedMessageSimple = React.memo(MessageSimpleWithContext, areMessageUIPropsEqual);
 /**

package/dist/components/Message/MessageStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageStatus.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAA2C,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEzF,OAAO,EAAE,WAAW,EAA2B,MAAM,WAAW,CAAC;AASjE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C,CAAC;AAsFF,eAAO,MAAM,aAAa,4FAjFjB,kBAAkB,uBAiFuE,CAAC"}
+{"version":3,"file":"MessageStatus.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAA2C,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEzF,OAAO,EAAE,WAAW,EAA2B,MAAM,WAAW,CAAC;AASjE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C,CAAC;AA2FF,eAAO,MAAM,aAAa,4FA5EjB,kBAAkB,uBA4EuE,CAAC"}

package/dist/components/Message/MessageStatus.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DeliveredCheckIcon } from './icons';
+import { DeliveredCheckIcon, MessageDeliveredIcon } from './icons';
 import { getReadByTooltipText, mapToUserNameOrId } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { LoadingIndicator } from '../Loading';
@@ -8,6 +8,12 @@ import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
+// TODO: remove after fully deprecating V1 theming
+var TooltipContainer = function (_a) {
+    var children = _a.children;
+    var themeVersion = useChatContext('TooltipContainer').themeVersion;
+    return themeVersion === '2' ? (React.createElement("div", { className: 'str-chat__message-status-tooltip-container' }, children)) : (React.createElement(React.Fragment, null, children));
+};
 var UnMemoizedMessageStatus = function (props) {
     var _a;
     var propAvatar = props.Avatar, _b = props.messageType, messageType = _b === void 0 ? 'simple' : _b, _c = props.tooltipUserNameMapper, tooltipUserNameMapper = _c === void 0 ? mapToUserNameOrId : _c;
@@ -15,27 +21,30 @@ var UnMemoizedMessageStatus = function (props) {
     var contextAvatar = useComponentContext('MessageStatus').Avatar;
     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 themeVersion = useChatContext('MessageStatus').themeVersion;
     var Avatar = propAvatar || contextAvatar || DefaultAvatar;
     if (!isMyMessage() || message.type === 'error') {
         return null;
     }
     var justReadByMe = (readBy === null || readBy === void 0 ? void 0 : readBy.length) === 1 && readBy[0].id === ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id);
+    var rootClassName = "str-chat__message-".concat(messageType, "-status str-chat__message-status");
     if (message.status === 'sending') {
-        return (React.createElement("span", { className: "str-chat__message-" + messageType + "-status", "data-testid": 'message-status-sending' },
+        return (React.createElement("span", { className: rootClassName, "data-testid": 'message-status-sending' },
             React.createElement(Tooltip, null, t('Sending...')),
             React.createElement(LoadingIndicator, null)));
     }
     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.createElement("span", { className: "str-chat__message-" + messageType + "-status", "data-testid": 'message-status-read-by' },
-            React.createElement(Tooltip, null, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)),
-            React.createElement(Avatar, { image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, size: 15, user: lastReadUser }),
-            readBy.length > 2 && (React.createElement("span", { className: "str-chat__message-" + messageType + "-status-number", "data-testid": 'message-status-read-by-many' }, readBy.length - 1))));
+        return (React.createElement("span", { className: rootClassName, "data-testid": 'message-status-read-by' },
+            React.createElement(TooltipContainer, null,
+                React.createElement(Tooltip, null, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)),
+                React.createElement(Avatar, { image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, size: 15, user: lastReadUser })),
+            readBy.length > 2 && (React.createElement("span", { className: "str-chat__message-".concat(messageType, "-status-number"), "data-testid": 'message-status-read-by-many' }, readBy.length - 1))));
     }
     if (message.status === 'received' && message.id === lastReceivedId && !threadList) {
-        return (React.createElement("span", { className: "str-chat__message-" + messageType + "-status", "data-testid": 'message-status-received' },
+        return (React.createElement("span", { className: rootClassName, "data-testid": 'message-status-received' },
             React.createElement(Tooltip, null, t('Delivered')),
-            React.createElement(DeliveredCheckIcon, null)));
+            themeVersion === '2' ? React.createElement(MessageDeliveredIcon, null) : React.createElement(DeliveredCheckIcon, null)));
     }
     return null;
 };

package/dist/components/Message/MessageText.d.ts

@@ -1,4 +1,4 @@
-import type { StreamMessage } from '../../context/ChannelStateContext';
+import type { StreamMessage } from '../../context';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare type MessageTextProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     customInnerClass?: string;

package/dist/components/Message/MessageText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageText.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageText.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,gBAAgB,CAC1B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuFF,eAAO,MAAM,WAAW,uJAEkB,CAAC"}
+{"version":3,"file":"MessageText.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageText.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,gBAAgB,CAC1B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuFF,eAAO,MAAM,WAAW,uJAEkB,CAAC"}

package/dist/components/Message/MessageText.js

@@ -1,10 +1,7 @@
 import React, { useMemo } from 'react';
-import { useMobilePress } from './hooks';
 import { QuotedMessage as DefaultQuotedMessage } from './QuotedMessage';
 import { messageHasAttachments } from './utils';
-import { useComponentContext } from '../../context/ComponentContext';
-import { useMessageContext } from '../../context/MessageContext';
-import { useTranslationContext } from '../../context/TranslationContext';
+import { useComponentContext, useMessageContext, useTranslationContext } from '../../context';
 import { renderText as defaultRenderText, isOnlyEmojis } from '../../utils';
 var UnMemoizedMessageTextComponent = function (props) {
     var _a;
@@ -12,27 +9,26 @@ var UnMemoizedMessageTextComponent = function (props) {
     var _d = useComponentContext('MessageText').QuotedMessage, QuotedMessage = _d === void 0 ? DefaultQuotedMessage : _d;
     var _e = useMessageContext('MessageText'), contextMessage = _e.message, onMentionsClickMessage = _e.onMentionsClickMessage, onMentionsHoverMessage = _e.onMentionsHoverMessage, _f = _e.renderText, renderText = _f === void 0 ? defaultRenderText : _f, unsafeHTML = _e.unsafeHTML;
     var _g = useTranslationContext('MessageText'), t = _g.t, userLanguage = _g.userLanguage;
-    var handleMobilePress = useMobilePress().handleMobilePress;
     var message = propMessage || contextMessage;
     var hasAttachment = messageHasAttachments(message);
-    var messageTextToRender = ((_a = message.i18n) === null || _a === void 0 ? void 0 : _a[userLanguage + "_text"]) || message.text;
+    var messageTextToRender = ((_a = message.i18n) === null || _a === void 0 ? void 0 : _a["".concat(userLanguage, "_text")]) || message.text;
     var messageText = useMemo(function () { return renderText(messageTextToRender, message.mentioned_users); }, [
         message.mentioned_users,
         messageTextToRender,
     ]);
     var wrapperClass = customWrapperClass || 'str-chat__message-text';
-    var innerClass = customInnerClass || "str-chat__message-text-inner str-chat__message-" + theme + "-text-inner";
+    var innerClass = customInnerClass || "str-chat__message-text-inner str-chat__message-".concat(theme, "-text-inner");
     if (!messageTextToRender && !message.quoted_message)
         return null;
-    return (React.createElement("div", { className: wrapperClass },
-        React.createElement("div", { className: ("\n          " + innerClass + "\n          " + (hasAttachment ? " str-chat__message-" + theme + "-text-inner--has-attachment" : '') + "\n          " + (isOnlyEmojis(message.text) && !message.quoted_message
-                ? " str-chat__message-" + theme + "-text-inner--is-emoji"
-                : '') + "\n        ").trim(), "data-testid": 'message-text-inner-wrapper', onClick: onMentionsClickMessage, onMouseOver: onMentionsHoverMessage },
+    return (React.createElement("div", { className: wrapperClass, tabIndex: 0 },
+        React.createElement("div", { className: "\n          ".concat(innerClass, "\n          ").concat(hasAttachment ? " str-chat__message-".concat(theme, "-text-inner--has-attachment") : '', "\n          ").concat(isOnlyEmojis(message.text) && !message.quoted_message
+                ? " str-chat__message-".concat(theme, "-text-inner--is-emoji")
+                : '', "\n        ").trim(), "data-testid": 'message-text-inner-wrapper', onClick: onMentionsClickMessage, onMouseOver: onMentionsHoverMessage },
             message.quoted_message && React.createElement(QuotedMessage, null),
-            message.type === 'error' && (React.createElement("div", { className: "str-chat__" + theme + "-message--error-message" }, t('Error · Unsent'))),
-            message.status === 'failed' && (React.createElement("div", { className: "str-chat__" + theme + "-message--error-message" }, message.errorStatusCode !== 403
+            message.type === 'error' && (React.createElement("div", { className: "str-chat__".concat(theme, "-message--error-message str-chat__message--error-message") }, t('Error · Unsent'))),
+            message.status === 'failed' && (React.createElement("div", { className: "str-chat__".concat(theme, "-message--error-message str-chat__message--error-message") }, message.errorStatusCode !== 403
                 ? t('Message Failed · Click to try again')
                 : t('Message Failed · Unauthorized'))),
-            unsafeHTML && message.html ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: message.html } })) : (React.createElement("div", { onClick: handleMobilePress }, messageText)))));
+            unsafeHTML && message.html ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: message.html } })) : (React.createElement("div", null, messageText)))));
 };
 export var MessageText = React.memo(UnMemoizedMessageTextComponent);

package/dist/components/Message/QuotedMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuotedMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Message/QuotedMessage.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,aAAa,4GAmDzB,CAAC"}
+{"version":3,"file":"QuotedMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Message/QuotedMessage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,aAAa,4GAuDzB,CAAC"}

package/dist/components/Message/QuotedMessage.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import clsx from 'clsx';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
@@ -14,7 +15,7 @@ export var QuotedMessage = function () {
     var quoted_message = message.quoted_message;
     if (!quoted_message)
         return null;
-    var quotedMessageText = ((_a = quoted_message.i18n) === null || _a === void 0 ? void 0 : _a[userLanguage + "_text"]) ||
+    var quotedMessageText = ((_a = quoted_message.i18n) === null || _a === void 0 ? void 0 : _a["".concat(userLanguage, "_text")]) ||
         quoted_message.text;
     // @ts-expect-error
     var quotedMessageAttachment = quoted_message.attachments.length
@@ -24,9 +25,13 @@ export var QuotedMessage = function () {
     if (!quotedMessageText && !quotedMessageAttachment)
         return null;
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "" + (isMyMessage() ? 'quoted-message mine' : 'quoted-message'), onClick: function () { return jumpToMessage(quoted_message.id); } },
+        React.createElement("div", { className: clsx('str-chat__quoted-message-preview quoted-message', { mine: isMyMessage() }), onClickCapture: function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                jumpToMessage(quoted_message.id);
+            } },
             quoted_message.user && (React.createElement(Avatar, { image: quoted_message.user.image, name: quoted_message.user.name || quoted_message.user.id, size: 20, user: quoted_message.user })),
-            React.createElement("div", { className: 'quoted-message-inner' },
+            React.createElement("div", { className: 'quoted-message-inner str-chat__quoted-message-bubble' },
                 quotedMessageAttachment && React.createElement(Attachment, { attachments: [quotedMessageAttachment] }),
                 React.createElement("div", null, quotedMessageText))),
         ((_b = message.attachments) === null || _b === void 0 ? void 0 : _b.length) && message.quoted_message ? (React.createElement(Attachment, { attachments: message.attachments })) : null));

package/dist/components/Message/hooks/index.d.ts

@@ -1,10 +1,8 @@
 export * from './useActionHandler';
-export * from './useBreakpoint';
 export * from './useDeleteHandler';
 export * from './useEditHandler';
 export * from './useFlagHandler';
 export * from './useMentionsHandler';
-export * from './useMobilePress';
 export * from './useMuteHandler';
 export * from './useOpenThreadHandler';
 export * from './usePinHandler';

package/dist/components/Message/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}

package/dist/components/Message/hooks/index.js

@@ -1,10 +1,8 @@
 export * from './useActionHandler';
-export * from './useBreakpoint';
 export * from './useDeleteHandler';
 export * from './useEditHandler';
 export * from './useFlagHandler';
 export * from './useMentionsHandler';
-export * from './useMobilePress';
 export * from './useMuteHandler';
 export * from './useOpenThreadHandler';
 export * from './usePinHandler';

package/dist/components/Message/hooks/useEditHandler.d.ts

@@ -4,5 +4,5 @@ export declare type EditHandlerReturnType = {
     editing: boolean;
     setEdit: ReactEventHandler;
 };
-export declare const useEditHandler: (customInitialState?: boolean, customSetEditing?: ((event?: import("react").BaseSyntheticEvent<object, any, any> | undefined) => void) | undefined, customClearEditingHandler?: ((event?: import("react").BaseSyntheticEvent<object, any, any> | undefined) => void) | undefined) => EditHandlerReturnType;
+export declare const useEditHandler: (customInitialState?: boolean, customSetEditing?: ((event?: React.BaseSyntheticEvent) => void) | undefined, customClearEditingHandler?: ((event?: React.BaseSyntheticEvent) => void) | undefined) => EditHandlerReturnType;
 //# sourceMappingURL=useEditHandler.d.ts.map

package/dist/components/Message/hooks/useEditHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEditHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useEditHandler.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,oBAAY,qBAAqB,GAAG;IAClC,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACtD,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,cAAc,mIAEgC,IAAI,0HACK,IAAI,kBACrE,qBAsBF,CAAC"}
+{"version":3,"file":"useEditHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useEditHandler.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,oBAAY,qBAAqB,GAAG;IAClC,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACtD,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,cAAc,8DAEG,MAAM,kBAAkB,KAAK,IAAI,qDACxB,MAAM,kBAAkB,KAAK,IAAI,kBACrE,qBAsBF,CAAC"}

package/dist/components/Message/hooks/useReactionHandler.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import { StreamMessage } from '../../../context/ChannelStateContext';
 import type { ReactEventHandler } from '../types';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 export declare const 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.";
-export declare const useReactionHandler: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message?: StreamMessage<StreamChatGenerics> | undefined) => (reactionType: string, event?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
-export declare const useReactionClick: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message?: StreamMessage<StreamChatGenerics> | undefined, reactionSelectorRef?: React.RefObject<HTMLDivElement | null> | undefined, messageWrapperRef?: React.RefObject<HTMLDivElement | null> | undefined, closeReactionSelectorOnClick?: boolean | undefined) => {
+export declare const useReactionHandler: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message?: StreamMessage<StreamChatGenerics> | undefined) => (reactionType: string, event?: React.BaseSyntheticEvent) => Promise<void>;
+export declare const useReactionClick: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message?: StreamMessage<StreamChatGenerics> | undefined, reactionSelectorRef?: RefObject<HTMLDivElement | null>, messageWrapperRef?: RefObject<HTMLDivElement | null>, closeReactionSelectorOnClick?: boolean) => {
     isReactionEnabled: boolean;
     onReactionListClick: ReactEventHandler;
     showDetailedReactions: boolean;

package/dist/components/Message/hooks/useReactionHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReactionHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useReactionHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAA8D,MAAM,OAAO,CAAC;AAInF,OAAO,EAAE,aAAa,EAA0B,MAAM,sCAAsC,CAAC;AAG7F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAIlD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,sBAAsB,4MACsF,CAAC;AAE1H,eAAO,MAAM,kBAAkB,gKA8ED,MAAM,kFAmCnC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;CAqG5B,CAAC"}
+{"version":3,"file":"useReactionHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useReactionHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAInF,OAAO,EAAE,aAAa,EAA0B,MAAM,sCAAsC,CAAC;AAG7F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAIlD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,sBAAsB,4MACsF,CAAC;AAE1H,eAAO,MAAM,kBAAkB,gKA8ED,MAAM,UAAU,MAAM,kBAAkB,kBAmCrE,CAAC;AAEF,eAAO,MAAM,gBAAgB,oKAIL,UAAU,cAAc,GAAG,IAAI,CAAC,sBAClC,UAAU,cAAc,GAAG,IAAI,CAAC,iCACrB,OAAO;;;;CA+FvC,CAAC"}

package/dist/components/Message/hooks/useReactionHandler.js

@@ -45,10 +45,14 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { useCallback, useEffect, useRef, useState } from 'react';
 import throttle from 'lodash.throttle';
@@ -77,9 +81,9 @@ export var useReactionHandler = function (message) {
             }
         }
         var newReactions = add
-            ? __spreadArray([reaction], ((message === null || message === void 0 ? void 0 : message.latest_reactions) || [])) : (_a = message.latest_reactions) === null || _a === void 0 ? void 0 : _a.filter(function (item) { return !(item.type === reaction.type && item.user_id === reaction.user_id); });
+            ? __spreadArray([reaction], ((message === null || message === void 0 ? void 0 : message.latest_reactions) || []), true) : (_a = message.latest_reactions) === null || _a === void 0 ? void 0 : _a.filter(function (item) { return !(item.type === reaction.type && item.user_id === reaction.user_id); });
         var newOwnReactions = add
-            ? __spreadArray([reaction], ((message === null || message === void 0 ? void 0 : message.own_reactions) || [])) : (_b = message === null || message === void 0 ? void 0 : message.own_reactions) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.type !== reaction.type; });
+            ? __spreadArray([reaction], ((message === null || message === void 0 ? void 0 : message.own_reactions) || []), true) : (_b = message === null || message === void 0 ? void 0 : message.own_reactions) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.type !== reaction.type; });
         return __assign(__assign({}, message), { latest_reactions: newReactions || message.latest_reactions, own_reactions: newOwnReactions, reaction_counts: newReactionCounts, reaction_scores: newReactionCounts });
     }, [client.user, client.userID]);
     var creatReactionPreview = function (type) {
@@ -231,7 +235,7 @@ export var useReactionClick = function (message, reactionSelectorRef, messageWra
         if (event === null || event === void 0 ? void 0 : event.stopPropagation) {
             event.stopPropagation();
         }
-        setShowDetailedReactions(true);
+        setShowDetailedReactions(function (prev) { return !prev; });
     };
     return {
         isReactionEnabled: isReactionEnabled,

package/dist/components/Message/hooks/useUserRole.d.ts

@@ -1,6 +1,6 @@
 import { StreamMessage } from '../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare const useUserRole: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: StreamMessage<StreamChatGenerics>, onlySenderCanEdit?: boolean | undefined, disableQuotedMessages?: boolean | undefined) => {
+export declare const useUserRole: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: StreamMessage<StreamChatGenerics>, onlySenderCanEdit?: boolean, disableQuotedMessages?: boolean) => {
     canDelete: boolean;
     canEdit: boolean;
     canFlag: boolean;

package/dist/components/Message/hooks/useUserRole.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useUserRole.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useUserRole.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA0B,MAAM,sCAAsC,CAAC;AAG7F,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,WAAW;;;;;;;;;;;;CAiEvB,CAAC"}
+{"version":3,"file":"useUserRole.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useUserRole.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA0B,MAAM,sCAAsC,CAAC;AAG7F,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,WAAW,qJAIF,OAAO,0BACH,OAAO;;;;;;;;;;;;CA4DhC,CAAC"}

package/dist/components/Message/icons.d.ts

@@ -1,11 +1,13 @@
 import type { PinIndicatorProps } from './types';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export declare const ActionsIcon: () => JSX.Element;
+import type { DefaultStreamChatGenerics, IconProps } from '../../types/types';
+export declare const ActionsIcon: ({ className }: IconProps) => JSX.Element;
 export declare const ReplyIcon: () => JSX.Element;
 export declare const DeliveredCheckIcon: () => JSX.Element;
-export declare const ReactionIcon: () => JSX.Element;
-export declare const ThreadIcon: () => JSX.Element;
+export declare const ReactionIcon: ({ className }: IconProps) => JSX.Element;
+export declare const ThreadIcon: ({ className }: IconProps) => JSX.Element;
 export declare const ErrorIcon: () => JSX.Element;
 export declare const PinIcon: () => JSX.Element;
 export declare const PinIndicator: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ message, t, }: PinIndicatorProps<StreamChatGenerics>) => JSX.Element | null;
+export declare const MessageDeliveredIcon: () => JSX.Element;
+export declare const MessageErrorIcon: () => JSX.Element;
 //# sourceMappingURL=icons.d.ts.map

package/dist/components/Message/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Message/icons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,WAAW,mBAOvB,CAAC;AAEF,eAAO,MAAM,SAAS,mBAOrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBAQ9B,CAAC;AAEF,eAAO,MAAM,YAAY,mBAOxB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAOtB,CAAC;AAEF,eAAO,MAAM,SAAS,mBAQrB,CAAC;AAEF,eAAO,MAAM,OAAO,mBAOnB,CAAC;AAEF,eAAO,MAAM,YAAY,kKAyBxB,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Message/icons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,OAAO,KAAK,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9E,eAAO,MAAM,WAAW,kBAAwB,SAAS,gBAaxD,CAAC;AAEF,eAAO,MAAM,SAAS,mBAOrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBAQ9B,CAAC;AAEF,eAAO,MAAM,YAAY,kBAAwB,SAAS,gBAazD,CAAC;AAEF,eAAO,MAAM,UAAU,kBAAwB,SAAS,gBAOvD,CAAC;AAEF,eAAO,MAAM,SAAS,mBAQrB,CAAC;AAEF,eAAO,MAAM,OAAO,mBAOnB,CAAC;AAEF,eAAO,MAAM,YAAY,kKAyBxB,CAAC;AAEF,eAAO,MAAM,oBAAoB,mBAgBhC,CAAC;AAEF,eAAO,MAAM,gBAAgB,mBAkB5B,CAAC"}

package/dist/components/Message/icons.js

@@ -1,16 +1,25 @@
 import React from 'react';
-export var ActionsIcon = function () { return (React.createElement("svg", { height: '4', viewBox: '0 0 11 4', width: '11', xmlns: 'http://www.w3.org/2000/svg' },
-    React.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' }))); };
-export var ReplyIcon = function () { return (React.createElement("svg", { height: '15', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
+export var ActionsIcon = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b;
+    return (React.createElement("svg", { className: className, height: '4', viewBox: '0 0 11 4', width: '11', xmlns: 'http://www.w3.org/2000/svg' },
+        React.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' })));
+};
+export var ReplyIcon = function () { return (React.createElement("svg", { "data-testid": 'reply-icon', height: '15', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
     React.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' }))); };
 export var DeliveredCheckIcon = function () { return (React.createElement("svg", { height: '16', width: '16', xmlns: 'http://www.w3.org/2000/svg' },
     React.createElement("path", { d: 'M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.72 6.633a.955.955 0 1 0-1.352-1.352L6.986 8.663 5.633 7.31A.956.956 0 1 0 4.28 8.663l2.029 2.028a.956.956 0 0 0 1.353 0l4.058-4.058z', fill: '#006CFF', fillRule: 'evenodd' }))); };
-export var ReactionIcon = function () { return (React.createElement("svg", { height: '12', viewBox: '0 0 12 12', width: '12', xmlns: 'http://www.w3.org/2000/svg' },
-    React.createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
-        React.createElement("path", { d: 'M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z' }),
-        React.createElement("path", { d: 'M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z' })))); };
-export var ThreadIcon = function () { return (React.createElement("svg", { height: '10', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
-    React.createElement("path", { d: 'M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z', fillRule: 'evenodd' }))); };
+export var ReactionIcon = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b;
+    return (React.createElement("svg", { className: className, height: '12', viewBox: '0 0 12 12', width: '12', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
+            React.createElement("path", { d: 'M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z' }),
+            React.createElement("path", { d: 'M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z' }))));
+};
+export var ThreadIcon = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b;
+    return (React.createElement("svg", { className: className, height: '10', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("path", { d: 'M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z', fillRule: 'evenodd' })));
+};
 export var ErrorIcon = function () { return (React.createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
     React.createElement("path", { d: 'M7 0a7 7 0 1 0 0 14A7 7 0 0 0 7 0zm.875 10.938a.438.438 0 0 1-.438.437h-.875a.438.438 0 0 1-.437-.438v-.874c0-.242.196-.438.438-.438h.875c.241 0 .437.196.437.438v.874zm0-2.626a.438.438 0 0 1-.438.438h-.875a.438.438 0 0 1-.437-.438v-5.25c0-.241.196-.437.438-.437h.875c.241 0 .437.196.437.438v5.25z', fill: '#EA152F', fillRule: 'evenodd' }))); };
 export var PinIcon = function () { return (React.createElement("svg", { height: '13', viewBox: '0 0 14 13', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
@@ -28,6 +37,12 @@ export var PinIndicator = function (_a) {
                 marginLeft: '8px',
                 marginTop: '0',
             } }, message.pinned_by
-            ? t('Pinned by') + " " + (((_b = message.pinned_by) === null || _b === void 0 ? void 0 : _b.name) || ((_c = message.pinned_by) === null || _c === void 0 ? void 0 : _c.id))
+            ? "".concat(t('Pinned by'), " ").concat(((_b = message.pinned_by) === null || _b === void 0 ? void 0 : _b.name) || ((_c = message.pinned_by) === null || _c === void 0 ? void 0 : _c.id))
             : t('Message pinned'))));
 };
+export var MessageDeliveredIcon = function () { return (React.createElement("svg", { "data-testid": 'delivered-icon', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { clipRule: 'evenodd', d: 'M8.9999 16.2L4.7999 12L3.3999 13.4L8.9999 19L20.9999 6.99998L19.5999 5.59998L8.9999 16.2Z', fill: 'black', fillRule: 'evenodd' }))); };
+export var MessageErrorIcon = function () { return (React.createElement("div", { className: 'str-chat__message-error-icon' },
+    React.createElement("svg", { "data-testid": 'error', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("path", { d: 'M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z', fill: 'black', id: 'background' }),
+        React.createElement("path", { d: 'M13 17H11V15H13V17ZM13 13H11V7H13V13Z', fill: 'white' })))); };