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

package/dist/components/Message/FixedHeightMessage.js

@@ -12,57 +12,51 @@ import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { renderText } from './renderText';
-var selectColor = function (number, dark) {
-    var hue = number * 137.508; // use golden angle approximation
-    return "hsl(".concat(hue, ",").concat(dark ? '50%' : '85%', ", ").concat(dark ? '75%' : '55%', ")");
+const selectColor = (number, dark) => {
+    const hue = number * 137.508; // use golden angle approximation
+    return `hsl(${hue},${dark ? '50%' : '85%'}, ${dark ? '75%' : '55%'})`;
 };
-var hashUserId = function (userId) {
-    var hash = userId.split('').reduce(function (acc, c) {
+const hashUserId = (userId) => {
+    const hash = userId.split('').reduce((acc, c) => {
         acc = (acc << 5) - acc + c.charCodeAt(0); // eslint-disable-line
         return acc & acc; // eslint-disable-line no-bitwise
     }, 0);
-    return Math.abs(hash) / Math.pow(10, Math.ceil(Math.log10(Math.abs(hash) + 1)));
+    return Math.abs(hash) / 10 ** Math.ceil(Math.log10(Math.abs(hash) + 1));
 };
-var getUserColor = function (theme, userId) {
-    return selectColor(hashUserId(userId), theme.includes('dark'));
-};
-var UnMemoizedFixedHeightMessage = function (props) {
-    var _a, _b, _c, _d;
-    var propGroupedByUser = props.groupedByUser, propMessage = props.message;
-    var theme = useChatContext('FixedHeightMessage').theme;
-    var _e = useMessageContext('FixedHeightMessage'), contextGroupedByUser = _e.groupedByUser, contextMessage = _e.message;
-    var _f = useComponentContext('FixedHeightMessage').MessageDeleted, MessageDeleted = _f === void 0 ? DefaultMessageDeleted : _f;
-    var userLanguage = useTranslationContext('FixedHeightMessage').userLanguage;
-    var groupedByUser = propGroupedByUser !== undefined ? propGroupedByUser : contextGroupedByUser;
-    var message = propMessage || contextMessage;
-    var handleAction = useActionHandler(message);
-    var handleDelete = useDeleteHandler(message);
-    var role = useUserRole(message);
-    var messageTextToRender = ((_a = message === null || message === void 0 ? void 0 : message.i18n) === null || _a === void 0 ? void 0 : _a["".concat(userLanguage, "_text")]) || (message === null || message === void 0 ? void 0 : message.text);
-    var renderedText = useMemo(function () { return renderText(messageTextToRender, message.mentioned_users); }, [
+const getUserColor = (theme, userId) => selectColor(hashUserId(userId), theme.includes('dark'));
+const UnMemoizedFixedHeightMessage = (props) => {
+    const { groupedByUser: propGroupedByUser, message: propMessage } = props;
+    const { theme } = useChatContext('FixedHeightMessage');
+    const { groupedByUser: contextGroupedByUser, message: contextMessage, } = useMessageContext('FixedHeightMessage');
+    const { MessageDeleted = DefaultMessageDeleted } = useComponentContext('FixedHeightMessage');
+    const { userLanguage } = useTranslationContext('FixedHeightMessage');
+    const groupedByUser = propGroupedByUser !== undefined ? propGroupedByUser : contextGroupedByUser;
+    const message = propMessage || contextMessage;
+    const handleAction = useActionHandler(message);
+    const handleDelete = useDeleteHandler(message);
+    const role = useUserRole(message);
+    const messageTextToRender = message?.i18n?.[`${userLanguage}_text`] || message?.text;
+    const renderedText = useMemo(() => renderText(messageTextToRender, message.mentioned_users), [
         message.mentioned_users,
         messageTextToRender,
     ]);
-    var userId = ((_b = message.user) === null || _b === void 0 ? void 0 : _b.id) || '';
-    var userColor = useMemo(function () { return getUserColor(theme, userId); }, [userId, theme]);
-    var messageActionsHandler = useCallback(function () { return getMessageActions(['delete'], { canDelete: role.canDelete }); }, [role]);
-    var images = (_c = message === null || message === void 0 ? void 0 : message.attachments) === null || _c === void 0 ? void 0 : _c.filter(function (_a) {
-        var type = _a.type;
-        return type === 'image';
-    });
-    return (React.createElement("div", { className: "str-chat__virtual-message__wrapper ".concat(role.isMyMessage ? 'str-chat__virtual-message__wrapper--me' : '', " ").concat(groupedByUser ? 'str-chat__virtual-message__wrapper--group' : ''), key: message.id },
-        message.user && (React.createElement(Avatar, { image: message.user.image, name: message.user.name || message.user.id, shape: 'rounded', size: 38, user: message.user })),
+    const userId = message.user?.id || '';
+    const userColor = useMemo(() => getUserColor(theme, userId), [userId, theme]);
+    const messageActionsHandler = useCallback(() => getMessageActions(['delete'], { canDelete: role.canDelete }), [role]);
+    const images = message?.attachments?.filter(({ type }) => type === 'image');
+    return (React.createElement("div", { className: `str-chat__virtual-message__wrapper ${role.isMyMessage ? 'str-chat__virtual-message__wrapper--me' : ''} ${groupedByUser ? 'str-chat__virtual-message__wrapper--group' : ''}`, key: message.id },
+        message.user && (React.createElement(Avatar, { image: message.user.image, name: message.user.name || message.user.id, user: message.user })),
         React.createElement("div", { className: 'str-chat__virtual-message__content' },
             React.createElement("div", { className: 'str-chat__virtual-message__meta' },
                 React.createElement("div", { className: 'str-chat__virtual-message__author', style: { color: userColor } },
-                    React.createElement("strong", null, ((_d = message.user) === null || _d === void 0 ? void 0 : _d.name) || 'unknown'))),
+                    React.createElement("strong", null, message.user?.name || 'unknown'))),
             message.deleted_at || message.type === 'deleted' ? (React.createElement(MessageDeleted, { message: message })) : (React.createElement(React.Fragment, null,
                 images && React.createElement(Gallery, { images: images }),
                 React.createElement("div", { className: 'str-chat__virtual-message__text', "data-testid": 'msg-text' },
                     renderedText,
                     message.mml && (React.createElement(MML, { actionHandler: handleAction, align: 'left', source: message.mml })),
                     React.createElement("div", { className: 'str-chat__virtual-message__data' },
-                        React.createElement(MessageActions, { customWrapperClass: 'str-chat__virtual-message__actions', getMessageActions: messageActionsHandler, handleDelete: handleDelete, message: message, mine: function () { return role.isMyMessage; } }),
+                        React.createElement(MessageActions, { customWrapperClass: 'str-chat__virtual-message__actions', getMessageActions: messageActionsHandler, handleDelete: handleDelete, message: message, mine: () => role.isMyMessage }),
                         React.createElement("span", { className: 'str-chat__virtual-message__date' },
                             React.createElement(MessageTimestamp, { customClass: 'str-chat__message-simple-timestamp', message: message })))))))));
 };
@@ -72,4 +66,4 @@ var UnMemoizedFixedHeightMessage = function (props) {
  * FixedHeightMessage - This component renders a single message.
  * It uses fixed height elements to make sure it works well in VirtualizedMessageList
  */
-export var FixedHeightMessage = React.memo(UnMemoizedFixedHeightMessage);
+export const FixedHeightMessage = React.memo(UnMemoizedFixedHeightMessage);

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

@@ -5,5 +5,4 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
  * The Message component is a context provider which implements all the logic required for rendering
  * an individual message. The actual UI of the message is delegated via the Message prop on Channel.
  */
-export declare const Message: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageProps<StreamChatGenerics, import("../../types/types").CustomTrigger>) => React.JSX.Element;
-//# sourceMappingURL=Message.d.ts.map
+export declare const Message: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageProps<StreamChatGenerics>) => React.JSX.Element;

package/dist/components/Message/Message.js

@@ -1,43 +1,37 @@
-import { __assign, __rest } from "tslib";
 import React, { useCallback, useMemo, useRef } from 'react';
 import { useActionHandler, useDeleteHandler, useEditHandler, useFlagHandler, useMarkUnreadHandler, useMentionsHandler, useMuteHandler, useOpenThreadHandler, usePinHandler, useReactionClick, useReactionHandler, useReactionsFetcher, useRetryHandler, useUserHandler, useUserRole, } from './hooks';
 import { areMessagePropsEqual, getMessageActions, MESSAGE_ACTIONS } from './utils';
 import { MessageProvider, useChannelActionContext, useChannelStateContext, useChatContext, useComponentContext, } from '../../context';
-var MessageWithContext = function (props) {
-    var canPin = props.canPin, groupedByUser = props.groupedByUser, propMessage = props.Message, message = props.message, _a = props.messageActions, messageActions = _a === void 0 ? Object.keys(MESSAGE_ACTIONS) : _a, propOnUserClick = props.onUserClick, propOnUserHover = props.onUserHover, userRoles = props.userRoles;
-    var client = useChatContext('Message').client;
-    var read = useChannelStateContext('Message').read;
-    var contextMessage = useComponentContext('Message').Message;
-    var actionsEnabled = message.type === 'regular' && message.status === 'received';
-    var MessageUIComponent = propMessage || contextMessage;
-    var _b = useEditHandler(), clearEdit = _b.clearEdit, editing = _b.editing, setEdit = _b.setEdit;
-    var _c = useUserHandler(message, {
+const MessageWithContext = (props) => {
+    const { canPin, groupedByUser, Message: propMessage, message, messageActions = Object.keys(MESSAGE_ACTIONS), onUserClick: propOnUserClick, onUserHover: propOnUserHover, userRoles, } = props;
+    const { client } = useChatContext('Message');
+    const { read } = useChannelStateContext('Message');
+    const { Message: contextMessage } = useComponentContext('Message');
+    const actionsEnabled = message.type === 'regular' && message.status === 'received';
+    const MessageUIComponent = propMessage || contextMessage;
+    const { clearEdit, editing, setEdit } = useEditHandler();
+    const { onUserClick, onUserHover } = useUserHandler(message, {
         onUserClickHandler: propOnUserClick,
         onUserHoverHandler: propOnUserHover,
-    }), onUserClick = _c.onUserClick, onUserHover = _c.onUserHover;
-    var canDelete = userRoles.canDelete, canEdit = userRoles.canEdit, canFlag = userRoles.canFlag, canMarkUnread = userRoles.canMarkUnread, canMute = userRoles.canMute, canQuote = userRoles.canQuote, canReact = userRoles.canReact, canReply = userRoles.canReply, isMyMessage = userRoles.isMyMessage;
-    var messageIsUnread = useMemo(function () {
-        var _a;
-        return !!(!isMyMessage &&
-            ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id) &&
-            read &&
-            (!read[client.user.id] ||
-                ((message === null || message === void 0 ? void 0 : message.created_at) &&
-                    new Date(message.created_at).getTime() > read[client.user.id].last_read.getTime())));
-    }, [client, isMyMessage, message.created_at, read]);
-    var messageActionsHandler = useCallback(function () {
-        return getMessageActions(messageActions, {
-            canDelete: canDelete,
-            canEdit: canEdit,
-            canFlag: canFlag,
-            canMarkUnread: canMarkUnread,
-            canMute: canMute,
-            canPin: canPin,
-            canQuote: canQuote,
-            canReact: canReact,
-            canReply: canReply,
-        });
-    }, [
+    });
+    const { canDelete, canEdit, canFlag, canMarkUnread, canMute, canQuote, canReact, canReply, isMyMessage, } = userRoles;
+    const messageIsUnread = useMemo(() => !!(!isMyMessage &&
+        client.user?.id &&
+        read &&
+        (!read[client.user.id] ||
+            (message?.created_at &&
+                new Date(message.created_at).getTime() > read[client.user.id].last_read.getTime()))), [client, isMyMessage, message.created_at, read]);
+    const messageActionsHandler = useCallback(() => getMessageActions(messageActions, {
+        canDelete,
+        canEdit,
+        canFlag,
+        canMarkUnread,
+        canMute,
+        canPin,
+        canQuote,
+        canReact,
+        canReply,
+    }), [
         messageActions,
         canDelete,
         canEdit,
@@ -49,64 +43,76 @@ var MessageWithContext = function (props) {
         canReact,
         canReply,
     ]);
-    var canPinPropToNotPass = props.canPin, // eslint-disable-line @typescript-eslint/no-unused-vars
-    messageActionsPropToNotPass = props.messageActions, // eslint-disable-line @typescript-eslint/no-unused-vars
-    onlySenderCanEditPropToNotPass = props.onlySenderCanEdit, // eslint-disable-line @typescript-eslint/no-unused-vars
-    onUserClickPropToNotPass = props.onUserClick, // eslint-disable-line @typescript-eslint/no-unused-vars
-    onUserHoverPropToNotPass = props.onUserHover, // eslint-disable-line @typescript-eslint/no-unused-vars
-    userRolesPropToNotPass = props.userRoles, // eslint-disable-line @typescript-eslint/no-unused-vars
-    rest = __rest(props, ["canPin", "messageActions", "onlySenderCanEdit", "onUserClick", "onUserHover", "userRoles"]);
-    var messageContextValue = __assign(__assign({}, rest), { actionsEnabled: actionsEnabled, clearEditingState: clearEdit, editing: editing, getMessageActions: messageActionsHandler, handleEdit: setEdit, isMyMessage: function () { return isMyMessage; }, messageIsUnread: messageIsUnread, onUserClick: onUserClick, onUserHover: onUserHover, setEditingState: setEdit });
+    const { canPin: canPinPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
+    messageActions: messageActionsPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
+    onlySenderCanEdit: onlySenderCanEditPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
+    onUserClick: onUserClickPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
+    onUserHover: onUserHoverPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
+    userRoles: userRolesPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
+    ...rest } = props;
+    const messageContextValue = {
+        ...rest,
+        actionsEnabled,
+        clearEditingState: clearEdit,
+        editing,
+        getMessageActions: messageActionsHandler,
+        handleEdit: setEdit,
+        isMyMessage: () => isMyMessage,
+        messageIsUnread,
+        onUserClick,
+        onUserHover,
+        setEditingState: setEdit,
+    };
     return (React.createElement(MessageProvider, { value: messageContextValue },
         React.createElement(MessageUIComponent, { groupedByUser: groupedByUser })));
 };
-var MemoizedMessage = React.memo(MessageWithContext, areMessagePropsEqual);
+const MemoizedMessage = React.memo(MessageWithContext, areMessagePropsEqual);
 /**
  * The Message component is a context provider which implements all the logic required for rendering
  * an individual message. The actual UI of the message is delegated via the Message prop on Channel.
  */
-export var Message = function (props) {
-    var closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, disableQuotedMessages = props.disableQuotedMessages, getDeleteMessageErrorNotification = props.getDeleteMessageErrorNotification, getFetchReactionsErrorNotification = props.getFetchReactionsErrorNotification, getFlagMessageErrorNotification = props.getFlagMessageErrorNotification, getFlagMessageSuccessNotification = props.getFlagMessageSuccessNotification, getMarkMessageUnreadErrorNotification = props.getMarkMessageUnreadErrorNotification, getMarkMessageUnreadSuccessNotification = props.getMarkMessageUnreadSuccessNotification, getMuteUserErrorNotification = props.getMuteUserErrorNotification, getMuteUserSuccessNotification = props.getMuteUserSuccessNotification, getPinMessageErrorNotification = props.getPinMessageErrorNotification, message = props.message, _a = props.onlySenderCanEdit, onlySenderCanEdit = _a === void 0 ? false : _a, propOnMentionsClick = props.onMentionsClick, propOnMentionsHover = props.onMentionsHover, propOpenThread = props.openThread, pinPermissions = props.pinPermissions, reactionDetailsSort = props.reactionDetailsSort, propRetrySendMessage = props.retrySendMessage, sortReactionDetails = props.sortReactionDetails, sortReactions = props.sortReactions;
-    var addNotification = useChannelActionContext('Message').addNotification;
-    var _b = useChannelStateContext('Message'), highlightedMessageId = _b.highlightedMessageId, mutes = _b.mutes;
-    var reactionSelectorRef = useRef(null);
-    var handleAction = useActionHandler(message);
-    var handleOpenThread = useOpenThreadHandler(message, propOpenThread);
-    var handleReaction = useReactionHandler(message);
-    var handleRetry = useRetryHandler(propRetrySendMessage);
-    var userRoles = useUserRole(message, onlySenderCanEdit, disableQuotedMessages);
-    var handleFetchReactions = useReactionsFetcher(message, {
+export const Message = (props) => {
+    const { closeReactionSelectorOnClick, disableQuotedMessages, getDeleteMessageErrorNotification, getFetchReactionsErrorNotification, getFlagMessageErrorNotification, getFlagMessageSuccessNotification, getMarkMessageUnreadErrorNotification, getMarkMessageUnreadSuccessNotification, getMuteUserErrorNotification, getMuteUserSuccessNotification, getPinMessageErrorNotification, message, onlySenderCanEdit = false, onMentionsClick: propOnMentionsClick, onMentionsHover: propOnMentionsHover, openThread: propOpenThread, pinPermissions, reactionDetailsSort, retrySendMessage: propRetrySendMessage, sortReactionDetails, sortReactions, } = props;
+    const { addNotification } = useChannelActionContext('Message');
+    const { highlightedMessageId, mutes } = useChannelStateContext('Message');
+    const reactionSelectorRef = useRef(null);
+    const handleAction = useActionHandler(message);
+    const handleOpenThread = useOpenThreadHandler(message, propOpenThread);
+    const handleReaction = useReactionHandler(message);
+    const handleRetry = useRetryHandler(propRetrySendMessage);
+    const userRoles = useUserRole(message, onlySenderCanEdit, disableQuotedMessages);
+    const handleFetchReactions = useReactionsFetcher(message, {
         getErrorNotification: getFetchReactionsErrorNotification,
         notify: addNotification,
     });
-    var handleDelete = useDeleteHandler(message, {
+    const handleDelete = useDeleteHandler(message, {
         getErrorNotification: getDeleteMessageErrorNotification,
         notify: addNotification,
     });
-    var handleFlag = useFlagHandler(message, {
+    const handleFlag = useFlagHandler(message, {
         getErrorNotification: getFlagMessageErrorNotification,
         getSuccessNotification: getFlagMessageSuccessNotification,
         notify: addNotification,
     });
-    var handleMarkUnread = useMarkUnreadHandler(message, {
+    const handleMarkUnread = useMarkUnreadHandler(message, {
         getErrorNotification: getMarkMessageUnreadErrorNotification,
         getSuccessNotification: getMarkMessageUnreadSuccessNotification,
         notify: addNotification,
     });
-    var handleMute = useMuteHandler(message, {
+    const handleMute = useMuteHandler(message, {
         getErrorNotification: getMuteUserErrorNotification,
         getSuccessNotification: getMuteUserSuccessNotification,
         notify: addNotification,
     });
-    var _c = useMentionsHandler(message, {
+    const { onMentionsClick, onMentionsHover } = useMentionsHandler(message, {
         onMentionsClick: propOnMentionsClick,
         onMentionsHover: propOnMentionsHover,
-    }), onMentionsClick = _c.onMentionsClick, onMentionsHover = _c.onMentionsHover;
-    var _d = usePinHandler(message, pinPermissions, {
+    });
+    const { canPin, handlePin } = usePinHandler(message, pinPermissions, {
         getErrorNotification: getPinMessageErrorNotification,
         notify: addNotification,
-    }), canPin = _d.canPin, handlePin = _d.handlePin;
-    var _e = useReactionClick(message, reactionSelectorRef, undefined, closeReactionSelectorOnClick), isReactionEnabled = _e.isReactionEnabled, onReactionListClick = _e.onReactionListClick, showDetailedReactions = _e.showDetailedReactions;
-    var highlighted = highlightedMessageId === message.id;
+    });
+    const { isReactionEnabled, onReactionListClick, showDetailedReactions } = useReactionClick(message, reactionSelectorRef, undefined, closeReactionSelectorOnClick);
+    const highlighted = highlightedMessageId === message.id;
     return (React.createElement(MemoizedMessage, { additionalMessageInputProps: props.additionalMessageInputProps, autoscrollToBottom: props.autoscrollToBottom, canPin: canPin, customMessageActions: props.customMessageActions, disableQuotedMessages: props.disableQuotedMessages, endOfGroup: props.endOfGroup, firstOfGroup: props.firstOfGroup, formatDate: props.formatDate, groupedByUser: props.groupedByUser, groupStyles: props.groupStyles, handleAction: handleAction, handleDelete: handleDelete, handleFetchReactions: handleFetchReactions, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handleOpenThread: handleOpenThread, handlePin: handlePin, handleReaction: handleReaction, handleRetry: handleRetry, highlighted: highlighted, initialMessage: props.initialMessage, isReactionEnabled: isReactionEnabled, lastReceivedId: props.lastReceivedId, message: message, Message: props.Message, messageActions: props.messageActions, messageListRect: props.messageListRect, mutes: mutes, onMentionsClickMessage: onMentionsClick, onMentionsHoverMessage: onMentionsHover, onReactionListClick: onReactionListClick, onUserClick: props.onUserClick, onUserHover: props.onUserHover, pinPermissions: props.pinPermissions, reactionDetailsSort: reactionDetailsSort, reactionSelectorRef: reactionSelectorRef, readBy: props.readBy, renderText: props.renderText, showDetailedReactions: showDetailedReactions, sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: props.threadList, unsafeHTML: props.unsafeHTML, userRoles: userRoles }));
 };

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

@@ -5,4 +5,3 @@ export type MessageDeletedProps<StreamChatGenerics extends DefaultStreamChatGene
     message: StreamMessage<StreamChatGenerics>;
 };
 export declare const MessageDeleted: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageDeletedProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=MessageDeleted.d.ts.map

package/dist/components/Message/MessageDeleted.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { useUserRole } from './hooks/useUserRole';
 import { useTranslationContext } from '../../context/TranslationContext';
-export var MessageDeleted = function (props) {
-    var message = props.message;
-    var t = useTranslationContext('MessageDeleted').t;
-    var isMyMessage = useUserRole(message).isMyMessage;
-    var messageClasses = isMyMessage
+export const MessageDeleted = (props) => {
+    const { message } = props;
+    const { t } = useTranslationContext('MessageDeleted');
+    const { isMyMessage } = useUserRole(message);
+    const 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 str-chat__message--other';
-    return (React.createElement("div", { className: "".concat(messageClasses, " str-chat__message--deleted ").concat(message.type, " "), "data-testid": 'message-deleted-component', key: message.id },
+    return (React.createElement("div", { className: `${messageClasses} str-chat__message--deleted ${message.type} `, "data-testid": 'message-deleted-component', key: message.id },
         React.createElement("div", { className: 'str-chat__message--deleted-inner' }, t('This message was deleted...'))));
 };

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

@@ -5,4 +5,3 @@ export type MessageEditedTimestampProps<StreamChatGenerics extends DefaultStream
     open: boolean;
 };
 export declare function MessageEditedTimestamp<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ message: propMessage, open, ...timestampProps }: MessageEditedTimestampProps<StreamChatGenerics>): React.JSX.Element | null;
-//# sourceMappingURL=MessageEditedTimestamp.d.ts.map

package/dist/components/Message/MessageEditedTimestamp.js

@@ -1,15 +1,13 @@
-import { __assign, __rest } from "tslib";
 import React from 'react';
 import clsx from 'clsx';
 import { useComponentContext, useMessageContext, useTranslationContext } from '../../context';
 import { Timestamp as DefaultTimestamp } from './Timestamp';
 import { isMessageEdited } from './utils';
-export function MessageEditedTimestamp(_a) {
-    var propMessage = _a.message, open = _a.open, timestampProps = __rest(_a, ["message", "open"]);
-    var t = useTranslationContext('MessageEditedTimestamp').t;
-    var contextMessage = useMessageContext('MessageEditedTimestamp').message;
-    var _b = useComponentContext('MessageEditedTimestamp').Timestamp, Timestamp = _b === void 0 ? DefaultTimestamp : _b;
-    var message = propMessage || contextMessage;
+export function MessageEditedTimestamp({ message: propMessage, open, ...timestampProps }) {
+    const { t } = useTranslationContext('MessageEditedTimestamp');
+    const { message: contextMessage } = useMessageContext('MessageEditedTimestamp');
+    const { Timestamp = DefaultTimestamp } = useComponentContext('MessageEditedTimestamp');
+    const message = propMessage || contextMessage;
     if (!isMessageEdited(message)) {
         return null;
     }
@@ -18,5 +16,5 @@ export function MessageEditedTimestamp(_a) {
             : 'str-chat__message-edited-timestamp--collapsed'), "data-testid": 'message-edited-timestamp' },
         t('Edited'),
         ' ',
-        React.createElement(Timestamp, __assign({ timestamp: message.message_text_updated_at }, timestampProps))));
+        React.createElement(Timestamp, { timestamp: message.message_text_updated_at, ...timestampProps })));
 }

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

@@ -6,4 +6,3 @@ export interface MessageErrorTextProps<StreamChatGenerics extends DefaultStreamC
     theme: string;
 }
 export declare function MessageErrorText<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ message, theme }: MessageErrorTextProps<StreamChatGenerics>): React.JSX.Element | null;
-//# sourceMappingURL=MessageErrorText.d.ts.map

package/dist/components/Message/MessageErrorText.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import { useTranslationContext } from '../../context';
 import { isMessageBounced } from './utils';
-export function MessageErrorText(_a) {
-    var message = _a.message, theme = _a.theme;
-    var t = useTranslationContext('MessageText').t;
+export function MessageErrorText({ message, theme }) {
+    const { t } = useTranslationContext('MessageText');
     if (message.type === 'error' && !isMessageBounced(message)) {
-        return (React.createElement("div", { className: "str-chat__".concat(theme, "-message--error-message str-chat__message--error-message") }, t('Error · Unsent')));
+        return (React.createElement("div", { className: `str-chat__${theme}-message--error-message str-chat__message--error-message` }, t('Error · Unsent')));
     }
     if (message.status === 'failed') {
-        return (React.createElement("div", { className: "str-chat__".concat(theme, "-message--error-message str-chat__message--error-message") }, message.errorStatusCode !== 403
+        return (React.createElement("div", { className: `str-chat__${theme}-message--error-message str-chat__message--error-message` }, message.errorStatusCode !== 403
             ? t('Message Failed · Click to try again')
             : t('Message Failed · Unauthorized')));
     }

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

@@ -10,4 +10,3 @@ export type MessageOptionsProps<StreamChatGenerics extends DefaultStreamChatGene
     ThreadIcon?: React.ComponentType<IconProps>;
 };
 export declare const MessageOptions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageOptionsProps<StreamChatGenerics>) => React.JSX.Element | null;
-//# sourceMappingURL=MessageOptions.d.ts.map

package/dist/components/Message/MessageOptions.js

@@ -4,15 +4,15 @@ import { MESSAGE_ACTIONS, showMessageActionsBox } from './utils';
 import { MessageActions } from '../MessageActions';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context';
-var UnMemoizedMessageOptions = function (props) {
-    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, showDetailedReactions = _f.showDetailedReactions, threadList = _f.threadList;
-    var t = useTranslationContext('MessageOptions').t;
-    var handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
-    var messageActions = getMessageActions();
-    var showActionsBox = showMessageActionsBox(messageActions, threadList) || !!customMessageActions;
-    var shouldShowReactions = messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
-    var shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && displayReplies && !threadList;
+const UnMemoizedMessageOptions = (props) => {
+    const { ActionsIcon = DefaultActionsIcon, displayReplies = true, handleOpenThread: propHandleOpenThread, messageWrapperRef, ReactionIcon = DefaultReactionIcon, theme = 'simple', ThreadIcon = DefaultThreadIcon, } = props;
+    const { customMessageActions, getMessageActions, handleOpenThread: contextHandleOpenThread, initialMessage, message, onReactionListClick, showDetailedReactions, threadList, } = useMessageContext('MessageOptions');
+    const { t } = useTranslationContext('MessageOptions');
+    const handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
+    const messageActions = getMessageActions();
+    const showActionsBox = showMessageActionsBox(messageActions, threadList) || !!customMessageActions;
+    const shouldShowReactions = messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
+    const shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && displayReplies && !threadList;
     if (!message.type ||
         message.type === 'error' ||
         message.type === 'system' ||
@@ -22,12 +22,12 @@ var UnMemoizedMessageOptions = function (props) {
         initialMessage) {
         return null;
     }
-    var rootClassName = "str-chat__message-".concat(theme, "__actions str-chat__message-options");
+    const rootClassName = `str-chat__message-${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": t('aria/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 },
+        shouldShowReplies && (React.createElement("button", { "aria-label": t('aria/Open Thread'), className: `str-chat__message-${theme}__actions__action str-chat__message-${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-expanded": showDetailedReactions, "aria-label": t('aria/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 },
+        shouldShowReactions && (React.createElement("button", { "aria-expanded": showDetailedReactions, "aria-label": t('aria/Open Reaction Selector'), className: `str-chat__message-${theme}__actions__action str-chat__message-${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);
+export const MessageOptions = React.memo(UnMemoizedMessageOptions);

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

@@ -6,4 +6,3 @@ export type MessageRepliesCountButtonProps = {
     reply_count?: number;
 };
 export declare const MessageRepliesCountButton: (props: MessageRepliesCountButtonProps) => React.JSX.Element | null;
-//# sourceMappingURL=MessageRepliesCountButton.d.ts.map

package/dist/components/Message/MessageRepliesCountButton.js

@@ -1,23 +1,18 @@
 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;
+const UnMemoizedMessageRepliesCountButton = (props) => {
+    const { labelPlural, labelSingle, onClick, reply_count = 0 } = props;
+    const { t } = useTranslationContext('MessageRepliesCountButton');
     if (!reply_count)
         return null;
-    var replyCountText = t('replyCount', { count: reply_count });
+    let replyCountText = t('replyCount', { count: reply_count });
     if (labelPlural && reply_count > 1) {
-        replyCountText = "".concat(reply_count, " ").concat(labelPlural);
+        replyCountText = `${reply_count} ${labelPlural}`;
     }
     else if (labelSingle) {
-        replyCountText = "1 ".concat(labelSingle);
+        replyCountText = `1 ${labelSingle}`;
     }
-    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)));
+    return (React.createElement("div", { className: 'str-chat__message-replies-count-button-wrapper' },
+        React.createElement("button", { className: 'str-chat__message-replies-count-button', "data-testid": 'replies-count-button', onClick: onClick }, replyCountText)));
 };
-export var MessageRepliesCountButton = React.memo(UnMemoizedMessageRepliesCountButton);
+export const MessageRepliesCountButton = React.memo(UnMemoizedMessageRepliesCountButton);

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

@@ -1,9 +1,7 @@
 import React from 'react';
-import { MessageContextValue } from '../../context/MessageContext';
 import type { MessageUIComponentProps } from './types';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 /**
  * The default UI component that renders a message and receives functionality and logic from the MessageContext.
  */
-export declare const MessageSimple: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: Partial<MessageContextValue<StreamChatGenerics>>) => React.JSX.Element;
-//# sourceMappingURL=MessageSimple.d.ts.map
+export declare const MessageSimple: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageUIComponentProps<StreamChatGenerics>) => React.JSX.Element;