stream-chat-react 11.20.0 → 12.0.0-rc.1

package/dist/components/Message/MessageSimple.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 import React, { useState } from 'react';
 import clsx from 'clsx';
 import { MessageErrorIcon } from './icons';
@@ -17,21 +16,18 @@ import { MML } from '../MML';
 import { Modal } from '../Modal';
 import { ReactionsList as DefaultReactionList, ReactionSelector as DefaultReactionSelector, } from '../Reactions';
 import { MessageBounceModal } from '../MessageBounce/MessageBounceModal';
-import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context';
 import { MessageEditedTimestamp } from './MessageEditedTimestamp';
-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, renderText = props.renderText, showDetailedReactions = props.showDetailedReactions, threadList = props.threadList;
-    var t = useTranslationContext('MessageSimple').t;
-    var _b = useState(false), isBounceDialogOpen = _b[0], setIsBounceDialogOpen = _b[1];
-    var _c = useState(false), isEditedTimestampOpen = _c[0], setEditedTimestampOpen = _c[1];
-    var _d = useComponentContext('MessageSimple'), Attachment = _d.Attachment, _e = _d.Avatar, Avatar = _e === void 0 ? DefaultAvatar : _e, _f = _d.EditMessageInput, EditMessageInput = _f === void 0 ? DefaultEditMessageForm : _f, _g = _d.MessageDeleted, MessageDeleted = _g === void 0 ? DefaultMessageDeleted : _g, _h = _d.MessageBouncePrompt, MessageBouncePrompt = _h === void 0 ? DefaultMessageBouncePrompt : _h, _j = _d.MessageOptions, MessageOptions = _j === void 0 ? DefaultMessageOptions : _j, _k = _d.MessageRepliesCountButton, MessageRepliesCountButton = _k === void 0 ? DefaultMessageRepliesCountButton : _k, _l = _d.MessageStatus, MessageStatus = _l === void 0 ? DefaultMessageStatus : _l, _m = _d.MessageTimestamp, MessageTimestamp = _m === void 0 ? DefaultMessageTimestamp : _m, _o = _d.ReactionSelector, ReactionSelector = _o === void 0 ? DefaultReactionSelector : _o, _p = _d.ReactionsList, ReactionsList = _p === void 0 ? DefaultReactionList : _p, PinIndicator = _d.PinIndicator;
-    var themeVersion = useChatContext('MessageSimple').themeVersion;
-    var hasAttachment = messageHasAttachments(message);
-    var hasReactions = messageHasReactions(message);
+const MessageSimpleWithContext = (props) => {
+    const { additionalMessageInputProps, clearEditingState, editing, endOfGroup, firstOfGroup, groupedByUser, handleAction, handleOpenThread, handleRetry, highlighted, isMyMessage, isReactionEnabled, message, onUserClick, onUserHover, reactionSelectorRef, renderText, showDetailedReactions, threadList, } = props;
+    const { t } = useTranslationContext('MessageSimple');
+    const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
+    const [isEditedTimestampOpen, setEditedTimestampOpen] = useState(false);
+    const { Attachment, Avatar = DefaultAvatar, EditMessageInput = DefaultEditMessageForm, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageOptions = DefaultMessageOptions, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionSelector = DefaultReactionSelector, ReactionsList = DefaultReactionList, PinIndicator, } = useComponentContext('MessageSimple');
+    const hasAttachment = messageHasAttachments(message);
+    const hasReactions = messageHasReactions(message);
     if (message.customType === CUSTOM_MESSAGE_TYPE.date) {
         return null;
     }
@@ -43,31 +39,31 @@ var MessageSimpleWithContext = function (props) {
      * const messageActions = getMessageActions();
      * const canReact = messageActions.includes(MESSAGE_ACTIONS.react);
      */
-    var canReact = isReactionEnabled;
-    var canShowReactions = hasReactions;
-    var showMetadata = !groupedByUser || endOfGroup;
-    var showReplyCountButton = !threadList && !!message.reply_count;
-    var allowRetry = message.status === 'failed' && message.errorStatusCode !== 403;
-    var isBounced = isMessageBounced(message);
-    var isEdited = isMessageEdited(message);
-    var handleClick = undefined;
+    const canReact = isReactionEnabled;
+    const canShowReactions = hasReactions;
+    const showMetadata = !groupedByUser || endOfGroup;
+    const showReplyCountButton = !threadList && !!message.reply_count;
+    const allowRetry = message.status === 'failed' && message.errorStatusCode !== 403;
+    const isBounced = isMessageBounced(message);
+    const isEdited = isMessageEdited(message);
+    let handleClick = undefined;
     if (allowRetry) {
-        handleClick = function () { return handleRetry(message); };
+        handleClick = () => handleRetry(message);
     }
     else if (isBounced) {
-        handleClick = function () { return setIsBounceDialogOpen(true); };
+        handleClick = () => setIsBounceDialogOpen(true);
     }
     else if (isEdited) {
-        handleClick = function () { return setEditedTimestampOpen(function (prev) { return !prev; }); };
+        handleClick = () => setEditedTimestampOpen((prev) => !prev);
     }
-    var rootClassName = clsx('str-chat__message str-chat__message-simple', "str-chat__message--".concat(message.type), "str-chat__message--".concat(message.status), isMyMessage()
+    const rootClassName = clsx('str-chat__message str-chat__message-simple', `str-chat__message--${message.type}`, `str-chat__message--${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', {
         'str-chat__message--has-attachment': hasAttachment,
         'str-chat__message--highlighted': highlighted,
         'str-chat__message--pinned pinned-message': message.pinned,
         'str-chat__message--with-reactions': canShowReactions,
-        '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__message-send-can-be-retried': message?.status === 'failed' && message?.errorStatusCode !== 403,
         'str-chat__message-with-thread-link': showReplyCountButton,
         'str-chat__virtual-message__wrapper--end': endOfGroup,
         'str-chat__virtual-message__wrapper--first': firstOfGroup,
@@ -75,11 +71,10 @@ var MessageSimpleWithContext = function (props) {
     });
     return (React.createElement(React.Fragment, null,
         editing && (React.createElement(Modal, { className: 'str-chat__edit-message-modal', onClose: clearEditingState, open: editing },
-            React.createElement(MessageInput, __assign({ clearEditingState: clearEditingState, grow: true, hideSendButton: true, Input: EditMessageInput, message: message }, additionalMessageInputProps)))),
-        isBounceDialogOpen && (React.createElement(MessageBounceModal, { MessageBouncePrompt: MessageBouncePrompt, onClose: function () { return setIsBounceDialogOpen(false); }, open: isBounceDialogOpen })),
+            React.createElement(MessageInput, { clearEditingState: clearEditingState, grow: true, hideSendButton: true, Input: EditMessageInput, message: message, ...additionalMessageInputProps }))),
+        isBounceDialogOpen && (React.createElement(MessageBounceModal, { MessageBouncePrompt: MessageBouncePrompt, onClose: () => setIsBounceDialogOpen(false), open: isBounceDialogOpen })),
         React.createElement("div", { className: rootClassName, key: message.id },
             PinIndicator && React.createElement(PinIndicator, null),
-            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: clsx('str-chat__message-inner', {
                     'str-chat__simple-message--error-failed': allowRetry || isBounced,
@@ -89,27 +84,23 @@ var MessageSimpleWithContext = function (props) {
                     canShowReactions && React.createElement(ReactionsList, { reverse: true }),
                     showDetailedReactions && canReact && React.createElement(ReactionSelector, { ref: reactionSelectorRef })),
                 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,
+                    message.attachments?.length && !message.quoted_message ? (React.createElement(Attachment, { actionHandler: handleAction, attachments: message.attachments })) : null,
                     React.createElement(MessageText, { message: message, renderText: renderText }),
                     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' })))),
-            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(MessageErrorIcon, null))),
+            showReplyCountButton && (React.createElement(MessageRepliesCountButton, { onClick: handleOpenThread, reply_count: message.reply_count })),
+            showMetadata && (React.createElement("div", { className: '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' }),
                 isEdited && (React.createElement("span", { className: 'str-chat__mesage-simple-edited' }, t('Edited'))),
                 isEdited && React.createElement(MessageEditedTimestamp, { calendar: true, open: isEditedTimestampOpen }))))));
 };
-var MemoizedMessageSimple = React.memo(MessageSimpleWithContext, areMessageUIPropsEqual);
+const MemoizedMessageSimple = React.memo(MessageSimpleWithContext, areMessageUIPropsEqual);
 /**
  * The default UI component that renders a message and receives functionality and logic from the MessageContext.
  */
-export var MessageSimple = function (props) {
-    var messageContext = useMessageContext('MessageSimple');
-    return React.createElement(MemoizedMessageSimple, __assign({}, messageContext, props));
+export const MessageSimple = (props) => {
+    const messageContext = useMessageContext('MessageSimple');
+    return React.createElement(MemoizedMessageSimple, { ...messageContext, ...props });
 };

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

@@ -11,4 +11,3 @@ export type MessageStatusProps = {
     tooltipUserNameMapper?: TooltipUsernameMapper;
 };
 export declare const MessageStatus: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageStatusProps) => React.JSX.Element | null;
-//# sourceMappingURL=MessageStatus.d.ts.map

package/dist/components/Message/MessageStatus.js

@@ -1,35 +1,34 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
-import { DeliveredCheckIcon, MessageDeliveredIcon } from './icons';
+import { MessageDeliveredIcon } from './icons';
 import { getReadByTooltipText, mapToUserNameOrId } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { LoadingIndicator } from '../Loading';
-import { PopperTooltip, Tooltip } from '../Tooltip';
+import { PopperTooltip } from '../Tooltip';
 import { useEnterLeaveHandlers } from '../Tooltip/hooks';
 import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-var UnMemoizedMessageStatus = function (props) {
-    var _a;
-    var propAvatar = props.Avatar, MessageDeliveredStatus = props.MessageDeliveredStatus, MessageReadStatus = props.MessageReadStatus, MessageSendingStatus = props.MessageSendingStatus, _b = props.messageType, messageType = _b === void 0 ? 'simple' : _b, _c = props.tooltipUserNameMapper, tooltipUserNameMapper = _c === void 0 ? mapToUserNameOrId : _c;
-    var _d = useEnterLeaveHandlers(), handleEnter = _d.handleEnter, handleLeave = _d.handleLeave, tooltipVisible = _d.tooltipVisible;
-    var _e = useChatContext('MessageStatus'), client = _e.client, themeVersion = _e.themeVersion;
-    var contextAvatar = useComponentContext('MessageStatus').Avatar;
-    var _f = useMessageContext('MessageStatus'), isMyMessage = _f.isMyMessage, lastReceivedId = _f.lastReceivedId, message = _f.message, readBy = _f.readBy, threadList = _f.threadList;
-    var t = useTranslationContext('MessageStatus').t;
-    var _g = useState(null), referenceElement = _g[0], setReferenceElement = _g[1];
-    var Avatar = propAvatar || contextAvatar || DefaultAvatar;
+const UnMemoizedMessageStatus = (props) => {
+    const { Avatar: propAvatar, MessageDeliveredStatus, MessageReadStatus, MessageSendingStatus, messageType = 'simple', tooltipUserNameMapper = mapToUserNameOrId, } = props;
+    const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
+    const { client } = useChatContext('MessageStatus');
+    const { Avatar: contextAvatar } = useComponentContext('MessageStatus');
+    const { isMyMessage, lastReceivedId, message, readBy, threadList, } = useMessageContext('MessageStatus');
+    const { t } = useTranslationContext('MessageStatus');
+    const [referenceElement, setReferenceElement] = useState(null);
+    const 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");
-    var sending = message.status === 'sending';
-    var delivered = message.status === 'received' && message.id === lastReceivedId && !threadList;
-    var deliveredAndRead = !!((readBy === null || readBy === void 0 ? void 0 : readBy.length) && !threadList && !justReadByMe);
-    var lastReadUser = (deliveredAndRead
-        ? readBy.filter(function (item) { var _a; return item.id !== ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id); })
-        : [])[0];
+    const justReadByMe = readBy?.length === 1 && readBy[0].id === client.user?.id;
+    const rootClassName = `str-chat__message-${messageType}-status str-chat__message-status`;
+    const sending = message.status === 'sending';
+    const delivered = message.status === 'received' && message.id === lastReceivedId && !threadList;
+    const deliveredAndRead = !!(readBy?.length && !threadList && !justReadByMe);
+    const [lastReadUser] = deliveredAndRead
+        ? readBy.filter((item) => item.id !== client.user?.id)
+        : [];
     return (React.createElement("span", { className: rootClassName, "data-testid": clsx({
             'message-status-read-by': deliveredAndRead,
             'message-status-received': delivered && !deliveredAndRead,
@@ -37,20 +36,17 @@ var UnMemoizedMessageStatus = function (props) {
         }), onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement },
         sending &&
             (MessageSendingStatus ? (React.createElement(MessageSendingStatus, null)) : (React.createElement(React.Fragment, null,
-                themeVersion === '1' && React.createElement(Tooltip, null, t('Sending...')),
-                themeVersion === '2' && (React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Sending...'))),
+                React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Sending...')),
                 React.createElement(LoadingIndicator, null)))),
         delivered &&
             !deliveredAndRead &&
             (MessageDeliveredStatus ? (React.createElement(MessageDeliveredStatus, null)) : (React.createElement(React.Fragment, null,
-                themeVersion === '1' && React.createElement(Tooltip, null, t('Delivered')),
-                themeVersion === '2' && (React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Delivered'))),
-                themeVersion === '2' ? React.createElement(MessageDeliveredIcon, null) : React.createElement(DeliveredCheckIcon, null)))),
+                React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Delivered')),
+                React.createElement(MessageDeliveredIcon, null)))),
         deliveredAndRead &&
             (MessageReadStatus ? (React.createElement(MessageReadStatus, null)) : (React.createElement(React.Fragment, null,
-                themeVersion === '1' && (React.createElement(Tooltip, null, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper))),
-                themeVersion === '2' && (React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, 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)))))));
+                React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)),
+                React.createElement(Avatar, { className: 'str-chat__avatar--message-status', image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, 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)))))));
 };
-export var MessageStatus = React.memo(UnMemoizedMessageStatus);
+export const MessageStatus = React.memo(UnMemoizedMessageStatus);

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

@@ -8,4 +8,3 @@ export type MessageTextProps<StreamChatGenerics extends DefaultStreamChatGeneric
     theme?: string;
 } & Pick<MessageContextValue<StreamChatGenerics>, 'renderText'>;
 export declare const MessageText: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageTextProps<StreamChatGenerics>) => React.JSX.Element | null;
-//# sourceMappingURL=MessageText.d.ts.map

package/dist/components/Message/MessageText.js

@@ -1,34 +1,35 @@
+import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import { QuotedMessage as DefaultQuotedMessage } from './QuotedMessage';
 import { isOnlyEmojis, messageHasAttachments } from './utils';
 import { useComponentContext, useMessageContext, useTranslationContext } from '../../context';
 import { renderText as defaultRenderText } from './renderText';
 import { MessageErrorText } from './MessageErrorText';
-var UnMemoizedMessageTextComponent = function (props) {
-    var _a, _b;
-    var customInnerClass = props.customInnerClass, _c = props.customWrapperClass, customWrapperClass = _c === void 0 ? '' : _c, propMessage = props.message, propsRenderText = props.renderText, _d = props.theme, theme = _d === void 0 ? 'simple' : _d;
-    var _e = useComponentContext('MessageText').QuotedMessage, QuotedMessage = _e === void 0 ? DefaultQuotedMessage : _e;
-    var _f = useMessageContext('MessageText'), contextMessage = _f.message, onMentionsClickMessage = _f.onMentionsClickMessage, onMentionsHoverMessage = _f.onMentionsHoverMessage, contextRenderText = _f.renderText, unsafeHTML = _f.unsafeHTML;
-    var renderText = (_a = propsRenderText !== null && propsRenderText !== void 0 ? propsRenderText : contextRenderText) !== null && _a !== void 0 ? _a : defaultRenderText;
-    var userLanguage = useTranslationContext('MessageText').userLanguage;
-    var message = propMessage || contextMessage;
-    var hasAttachment = messageHasAttachments(message);
-    var messageTextToRender = ((_b = message.i18n) === null || _b === void 0 ? void 0 : _b["".concat(userLanguage, "_text")]) || message.text;
+const UnMemoizedMessageTextComponent = (props) => {
+    const { customInnerClass, customWrapperClass = '', message: propMessage, renderText: propsRenderText, theme = 'simple', } = props;
+    const { QuotedMessage = DefaultQuotedMessage } = useComponentContext('MessageText');
+    const { message: contextMessage, onMentionsClickMessage, onMentionsHoverMessage, renderText: contextRenderText, unsafeHTML, } = useMessageContext('MessageText');
+    const renderText = propsRenderText ?? contextRenderText ?? defaultRenderText;
+    const { userLanguage } = useTranslationContext('MessageText');
+    const message = propMessage || contextMessage;
+    const hasAttachment = messageHasAttachments(message);
+    const messageTextToRender = message.i18n?.[`${userLanguage}_text`] || message.text;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    var messageText = useMemo(function () { return renderText(messageTextToRender, message.mentioned_users); }, [
+    const messageText = useMemo(() => 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-".concat(theme, "-text-inner");
+    const wrapperClass = customWrapperClass || 'str-chat__message-text';
+    const innerClass = customInnerClass || `str-chat__message-text-inner str-chat__message-${theme}-text-inner`;
     if (!messageTextToRender && !message.quoted_message)
         return null;
     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 },
+        React.createElement("div", { className: clsx(innerClass, {
+                [`str-chat__message-${theme}-text-inner--has-attachment`]: hasAttachment,
+                [` str-chat__message-${theme}-text-inner--is-emoji`]: isOnlyEmojis(message.text) && !message.quoted_message,
+            }), "data-testid": 'message-text-inner-wrapper', onClick: onMentionsClickMessage, onMouseOver: onMentionsHoverMessage },
             message.quoted_message && React.createElement(QuotedMessage, null),
             React.createElement(MessageErrorText, { message: message, theme: theme }),
             unsafeHTML && message.html ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: message.html } })) : (React.createElement("div", null, messageText)))));
 };
-export var MessageText = React.memo(UnMemoizedMessageTextComponent);
+export const MessageText = React.memo(UnMemoizedMessageTextComponent);

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

@@ -1,12 +1,10 @@
 import React from 'react';
 import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { TimestampFormatterOptions } from '../../i18n/utils';
 export declare const defaultTimestampFormat = "h:mmA";
-export type MessageTimestampProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    calendar?: boolean;
+export type MessageTimestampProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = TimestampFormatterOptions & {
     customClass?: string;
-    format?: string;
     message?: StreamMessage<StreamChatGenerics>;
 };
 export declare const MessageTimestamp: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageTimestampProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=MessageTimestamp.d.ts.map

package/dist/components/Message/MessageTimestamp.js

@@ -1,14 +1,13 @@
-import { __assign, __rest } from "tslib";
 import React from 'react';
 import { useMessageContext } from '../../context/MessageContext';
 import { Timestamp as DefaultTimestamp } from './Timestamp';
 import { useComponentContext } from '../../context';
-export var defaultTimestampFormat = 'h:mmA';
-var UnMemoizedMessageTimestamp = function (props) {
-    var propMessage = props.message, timestampProps = __rest(props, ["message"]);
-    var contextMessage = useMessageContext('MessageTimestamp').message;
-    var _a = useComponentContext('MessageTimestamp').Timestamp, Timestamp = _a === void 0 ? DefaultTimestamp : _a;
-    var message = propMessage || contextMessage;
-    return React.createElement(Timestamp, __assign({ timestamp: message.created_at }, timestampProps));
+export const defaultTimestampFormat = 'h:mmA';
+const UnMemoizedMessageTimestamp = (props) => {
+    const { message: propMessage, ...timestampProps } = props;
+    const { message: contextMessage } = useMessageContext('MessageTimestamp');
+    const { Timestamp = DefaultTimestamp } = useComponentContext('MessageTimestamp');
+    const message = propMessage || contextMessage;
+    return React.createElement(Timestamp, { timestamp: message.created_at, ...timestampProps });
 };
-export var MessageTimestamp = React.memo(UnMemoizedMessageTimestamp);
+export const MessageTimestamp = React.memo(UnMemoizedMessageTimestamp);

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

@@ -1,4 +1,3 @@
 import React from 'react';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare const QuotedMessage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element | null;
-//# sourceMappingURL=QuotedMessage.d.ts.map

package/dist/components/Message/QuotedMessage.js

@@ -5,35 +5,34 @@ import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
-export var QuotedMessage = function () {
-    var _a, _b, _c;
-    var _d = useComponentContext('QuotedMessage'), Attachment = _d.Attachment, ContextAvatar = _d.Avatar;
-    var _e = useMessageContext('QuotedMessage'), isMyMessage = _e.isMyMessage, message = _e.message;
-    var _f = useTranslationContext('QuotedMessage'), t = _f.t, userLanguage = _f.userLanguage;
-    var jumpToMessage = useChannelActionContext('QuotedMessage').jumpToMessage;
-    var Avatar = ContextAvatar || DefaultAvatar;
-    var quoted_message = message.quoted_message;
+export const QuotedMessage = () => {
+    const { Attachment, Avatar: ContextAvatar } = useComponentContext('QuotedMessage');
+    const { isMyMessage, message } = useMessageContext('QuotedMessage');
+    const { t, userLanguage } = useTranslationContext('QuotedMessage');
+    const { jumpToMessage } = useChannelActionContext('QuotedMessage');
+    const Avatar = ContextAvatar || DefaultAvatar;
+    const { quoted_message } = message;
     if (!quoted_message)
         return null;
-    var quotedMessageDeleted = quoted_message.deleted_at || quoted_message.type === 'deleted';
-    var quotedMessageText = quotedMessageDeleted
+    const quotedMessageDeleted = quoted_message.deleted_at || quoted_message.type === 'deleted';
+    const quotedMessageText = quotedMessageDeleted
         ? t('This message was deleted...')
-        : ((_a = quoted_message.i18n) === null || _a === void 0 ? void 0 : _a["".concat(userLanguage, "_text")]) ||
+        : quoted_message.i18n?.[`${userLanguage}_text`] ||
             quoted_message.text;
-    var quotedMessageAttachment = ((_b = quoted_message.attachments) === null || _b === void 0 ? void 0 : _b.length) && !quotedMessageDeleted
+    const quotedMessageAttachment = quoted_message.attachments?.length && !quotedMessageDeleted
         ? quoted_message.attachments[0]
         : null;
     if (!quotedMessageText && !quotedMessageAttachment)
         return null;
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: clsx('str-chat__quoted-message-preview quoted-message', { mine: isMyMessage() }), "data-testid": 'quoted-message', onClickCapture: function (e) {
+        React.createElement("div", { className: clsx('str-chat__quoted-message-preview', { mine: isMyMessage() }), "data-testid": 'quoted-message', onClickCapture: (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 str-chat__quoted-message-bubble', "data-testid": 'quoted-message-contents' },
+            quoted_message.user && (React.createElement(Avatar, { className: 'str-chat__avatar--quoted-message-sender', image: quoted_message.user.image, name: quoted_message.user.name || quoted_message.user.id, user: quoted_message.user })),
+            React.createElement("div", { className: 'str-chat__quoted-message-bubble', "data-testid": 'quoted-message-contents' },
                 quotedMessageAttachment && (React.createElement(Attachment, { attachments: [quotedMessageAttachment], isQuoted: true })),
-                React.createElement("div", { "data-testid": 'quoted-message-text' }, quotedMessageText))),
-        ((_c = message.attachments) === null || _c === void 0 ? void 0 : _c.length) ? React.createElement(Attachment, { attachments: message.attachments }) : null));
+                React.createElement("div", { className: 'str-chat__quoted-message-bubble__text', "data-testid": 'quoted-message-text' }, quotedMessageText))),
+        message.attachments?.length ? React.createElement(Attachment, { attachments: message.attachments }) : null));
 };

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

@@ -1,10 +1,8 @@
 import React from 'react';
-export interface TimestampProps {
-    calendar?: boolean;
+import { TimestampFormatterOptions } from '../../i18n/utils';
+export interface TimestampProps extends TimestampFormatterOptions {
     customClass?: string;
-    format?: string;
     timestamp?: Date | string;
 }
 export declare const defaultTimestampFormat = "h:mmA";
 export declare function Timestamp(props: TimestampProps): React.JSX.Element | null;
-//# sourceMappingURL=Timestamp.d.ts.map

package/dist/components/Message/Timestamp.js

@@ -2,21 +2,22 @@ import React, { useMemo } from 'react';
 import { useMessageContext } from '../../context/MessageContext';
 import { isDate, useTranslationContext } from '../../context/TranslationContext';
 import { getDateString } from '../../i18n/utils';
-export var defaultTimestampFormat = 'h:mmA';
+export const defaultTimestampFormat = 'h:mmA';
 export function Timestamp(props) {
-    var timestamp = props.timestamp, _a = props.calendar, calendar = _a === void 0 ? false : _a, _b = props.customClass, customClass = _b === void 0 ? '' : _b, _c = props.format, format = _c === void 0 ? defaultTimestampFormat : _c;
-    var formatDate = useMessageContext('MessageTimestamp').formatDate;
-    var tDateTimeParser = useTranslationContext('MessageTimestamp').tDateTimeParser;
-    var normalizedTimestamp = timestamp && isDate(timestamp) ? timestamp.toISOString() : timestamp;
-    var when = useMemo(function () {
-        return getDateString({
-            calendar: calendar,
-            format: format,
-            formatDate: formatDate,
-            messageCreatedAt: normalizedTimestamp,
-            tDateTimeParser: tDateTimeParser,
-        });
-    }, [formatDate, calendar, tDateTimeParser, format, normalizedTimestamp]);
+    const { calendar, calendarFormats, customClass, format = defaultTimestampFormat, timestamp, } = props;
+    const { formatDate } = useMessageContext('MessageTimestamp');
+    const { t, tDateTimeParser } = useTranslationContext('MessageTimestamp');
+    const normalizedTimestamp = timestamp && isDate(timestamp) ? timestamp.toISOString() : timestamp;
+    const when = useMemo(() => getDateString({
+        calendar,
+        calendarFormats,
+        format,
+        formatDate,
+        messageCreatedAt: normalizedTimestamp,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey: 'timestamp/Timestamp',
+    }), [calendar, calendarFormats, format, formatDate, normalizedTimestamp, t, tDateTimeParser]);
     if (!when) {
         return null;
     }

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

@@ -12,4 +12,3 @@ export * from './useRetryHandler';
 export * from './useUserHandler';
 export * from './useUserRole';
 export * from './useReactionsFetcher';
-//# sourceMappingURL=index.d.ts.map

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

@@ -5,4 +5,3 @@ export type FormData = Record<string, string>;
 export type ActionHandlerReturnType = (dataOrName?: string | FormData, value?: string, event?: React.BaseSyntheticEvent) => Promise<void> | void;
 export declare const handleActionWarning = "Action 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 function useActionHandler<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message?: StreamMessage<StreamChatGenerics>): ActionHandlerReturnType;
-//# sourceMappingURL=useActionHandler.d.ts.map

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

@@ -1,44 +1,34 @@
-import { __assign, __awaiter, __generator } from "tslib";
 import { useChannelActionContext } from '../../../context/ChannelActionContext';
 import { useChannelStateContext } from '../../../context/ChannelStateContext';
-export var handleActionWarning = "Action 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 const handleActionWarning = `Action handler was called, but it is missing one of its required arguments. 
+Make sure the ChannelAction and ChannelState contexts are properly set and the hook is initialized with a valid message.`;
 export function useActionHandler(message) {
-    var _this = this;
-    var _a = useChannelActionContext('useActionHandler'), removeMessage = _a.removeMessage, updateMessage = _a.updateMessage;
-    var channel = useChannelStateContext('useActionHandler').channel;
-    return function (dataOrName, value, event) { return __awaiter(_this, void 0, void 0, function () {
-        var messageID, formData, data;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (event)
-                        event.preventDefault();
-                    if (!message || !updateMessage || !removeMessage || !channel) {
-                        console.warn(handleActionWarning);
-                        return [2 /*return*/];
-                    }
-                    messageID = message.id;
-                    formData = {};
-                    // deprecated: value&name should be removed in favor of data obj
-                    if (typeof dataOrName === 'string') {
-                        formData[dataOrName] = value;
-                    }
-                    else {
-                        formData = __assign({}, dataOrName);
-                    }
-                    if (!messageID) return [3 /*break*/, 2];
-                    return [4 /*yield*/, channel.sendAction(messageID, formData)];
-                case 1:
-                    data = _a.sent();
-                    if (data === null || data === void 0 ? void 0 : data.message) {
-                        updateMessage(data.message);
-                    }
-                    else {
-                        removeMessage(message);
-                    }
-                    _a.label = 2;
-                case 2: return [2 /*return*/];
+    const { removeMessage, updateMessage } = useChannelActionContext('useActionHandler');
+    const { channel } = useChannelStateContext('useActionHandler');
+    return async (dataOrName, value, event) => {
+        if (event)
+            event.preventDefault();
+        if (!message || !updateMessage || !removeMessage || !channel) {
+            console.warn(handleActionWarning);
+            return;
+        }
+        const messageID = message.id;
+        let formData = {};
+        // deprecated: value&name should be removed in favor of data obj
+        if (typeof dataOrName === 'string') {
+            formData[dataOrName] = value;
+        }
+        else {
+            formData = { ...dataOrName };
+        }
+        if (messageID) {
+            const data = await channel.sendAction(messageID, formData);
+            if (data?.message) {
+                updateMessage(data.message);
             }
-        });
-    }); };
+            else {
+                removeMessage(message);
+            }
+        }
+    };
 }

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

@@ -5,5 +5,4 @@ export type DeleteMessageNotifications<StreamChatGenerics extends DefaultStreamC
     getErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
     notify?: (notificationText: string, type: 'success' | 'error') => void;
 };
-export declare const useDeleteHandler: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message?: StreamMessage<StreamChatGenerics> | undefined, notifications?: DeleteMessageNotifications<StreamChatGenerics>) => ReactEventHandler;
-//# sourceMappingURL=useDeleteHandler.d.ts.map
+export declare const useDeleteHandler: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message?: StreamMessage<StreamChatGenerics>, notifications?: DeleteMessageNotifications<StreamChatGenerics>) => ReactEventHandler;