stream-chat-react 9.3.0 → 10.0.0-theming-v2.1

package/dist/components/Message/MessageCommerce.js

@@ -1,64 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React from 'react';
-import { MessageDeleted as DefaultMessageDeleted } from './MessageDeleted';
-import { MessageOptions as DefaultMessageOptions } from './MessageOptions';
-import { MessageRepliesCountButton as DefaultMessageRepliesCountButton } from './MessageRepliesCountButton';
-import { MessageText } from './MessageText';
-import { MessageTimestamp as DefaultMessageTimestamp } from './MessageTimestamp';
-import { areMessageUIPropsEqual, messageHasAttachments, messageHasReactions } from './utils';
-import { Avatar as DefaultAvatar } from '../Avatar';
-import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
-import { MML } from '../MML';
-import { ReactionSelector as DefaultReactionSelector, ReactionsList as DefaultReactionsList, } from '../Reactions';
-import { useComponentContext } from '../../context/ComponentContext';
-import { useMessageContext } from '../../context/MessageContext';
-var MessageCommerceWithContext = function (props) {
-    var _a, _b, _c, _d, _e, _f;
-    var groupStyles = props.groupStyles, handleAction = props.handleAction, handleOpenThread = props.handleOpenThread, 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 _g = useComponentContext('MessageCommerce'), Attachment = _g.Attachment, _h = _g.Avatar, Avatar = _h === void 0 ? DefaultAvatar : _h, _j = _g.MessageDeleted, MessageDeleted = _j === void 0 ? DefaultMessageDeleted : _j, _k = _g.MessageRepliesCountButton, MessageRepliesCountButton = _k === void 0 ? DefaultMessageRepliesCountButton : _k, _l = _g.MessageOptions, MessageOptions = _l === void 0 ? DefaultMessageOptions : _l, _m = _g.MessageTimestamp, MessageTimestamp = _m === void 0 ? DefaultMessageTimestamp : _m, _o = _g.ReactionSelector, ReactionSelector = _o === void 0 ? DefaultReactionSelector : _o, _p = _g.ReactionsList, ReactionsList = _p === void 0 ? DefaultReactionsList : _p;
-    var hasAttachment = messageHasAttachments(message);
-    var hasReactions = messageHasReactions(message);
-    var firstGroupStyle = groupStyles ? groupStyles[0] : 'single';
-    var messageClasses = "str-chat__message-commerce str-chat__message-commerce--" + (isMyMessage() ? 'right' : 'left');
-    if (message.deleted_at) {
-        return React.createElement(MessageDeleted, { message: message });
-    }
-    if (message.customType === CUSTOM_MESSAGE_TYPE.date) {
-        return null;
-    }
-    return (React.createElement("div", { className: ("\n\t\t\t\t\t\t" + messageClasses + "\n\t\t\t\t\t\tstr-chat__message-commerce--" + message.type + "\n\t\t\t\t\t\t" + (message.text ? 'str-chat__message-commerce--has-text' : 'str-chat__message-commerce--has-no-text') + "\n\t\t\t\t\t\t" + (hasAttachment ? 'str-chat__message-commerce--has-attachment' : '') + "\n            " + (hasReactions && isReactionEnabled ? 'str-chat__message-commerce--with-reactions' : '') + "\n            " + ("str-chat__message-commerce--" + firstGroupStyle) + "\n            " + (message.pinned ? 'pinned-message' : '') + "\n\t\t\t\t\t").trim(), "data-testid": 'message-commerce-wrapper', key: message.id },
-        (firstGroupStyle === 'bottom' || firstGroupStyle === 'single') && (React.createElement(Avatar, { image: (_a = message.user) === null || _a === void 0 ? void 0 : _a.image, name: ((_b = message.user) === null || _b === void 0 ? void 0 : _b.name) || ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id), onClick: onUserClick, onMouseOver: onUserHover })),
-        React.createElement("div", { className: 'str-chat__message-commerce-inner' },
-            React.createElement(React.Fragment, null,
-                React.createElement(MessageOptions, { displayLeft: false, displayReplies: false, theme: 'commerce' }),
-                hasReactions && !showDetailedReactions && isReactionEnabled && React.createElement(ReactionsList, null),
-                showDetailedReactions && isReactionEnabled && (React.createElement(ReactionSelector, { ref: reactionSelectorRef }))),
-            ((_d = message.attachments) === null || _d === void 0 ? void 0 : _d.length) ? (React.createElement(Attachment, { actionHandler: handleAction, attachments: message.attachments })) : null,
-            message.mml && (React.createElement(MML, { actionHandler: handleAction, align: isMyMessage() ? 'right' : 'left', source: message.mml })),
-            message.text && (React.createElement(MessageText, { customInnerClass: 'str-chat__message-commerce-text-inner', customWrapperClass: 'str-chat__message-commerce-text', theme: 'commerce' })),
-            !threadList && (React.createElement("div", { className: 'str-chat__message-commerce-reply-button' },
-                React.createElement(MessageRepliesCountButton, { onClick: handleOpenThread, reply_count: message.reply_count }))),
-            React.createElement("div", { className: 'str-chat__message-commerce-data' },
-                !isMyMessage() ? (React.createElement("span", { className: 'str-chat__message-commerce-name' }, ((_e = message.user) === null || _e === void 0 ? void 0 : _e.name) || ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id))) : null,
-                React.createElement(MessageTimestamp, { customClass: 'str-chat__message-commerce-timestamp', format: 'LT' })))));
-};
-var MemoizedMessageCommerce = React.memo(MessageCommerceWithContext, areMessageUIPropsEqual);
-/**
- * @deprecated - This UI component will be removed in the next major release.
- *
- * UI component that renders a message and receives functionality from the Message/MessageList components
- */
-export var MessageCommerce = function (props) {
-    var messageContext = useMessageContext('MessageCommerce');
-    return React.createElement(MemoizedMessageCommerce, __assign({}, messageContext, props));
-};

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import { MessageContextValue } from '../../context/MessageContext';
-import type { MessageUIComponentProps, ReactEventHandler } from './types';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export declare type MessageLivestreamActionsProps = {
-    messageWrapperRef: React.RefObject<HTMLDivElement>;
-    onReactionListClick: ReactEventHandler;
-};
-/**
- * @deprecated - This UI component will be removed in the next major release.
- *
- * Handles the rendering of a message and depends on the Message component for all the logic.
- * Implements the look and feel for a livestream use case.
- */
-export declare const MessageLivestream: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: Partial<MessageContextValue<StreamChatGenerics>>) => JSX.Element;
-//# sourceMappingURL=MessageLivestream.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MessageLivestream.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageLivestream.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAoBjF,OAAO,EAAE,mBAAmB,EAAqB,MAAM,8BAA8B,CAAC;AAMtF,OAAO,KAAK,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAwMnE,oBAAY,6BAA6B,GAAG;IAC1C,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACnD,mBAAmB,EAAE,iBAAiB,CAAC;CACxC,CAAC;AAsGF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,4JA6B7B,CAAC"}

package/dist/components/Message/MessageLivestream.js

@@ -1,164 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { MessageDeleted as DefaultMessageDeleted } from './MessageDeleted';
-import { MessageRepliesCountButton as DefaultMessageRepliesCountButton } from './MessageRepliesCountButton';
-import { MessageTimestamp as DefaultTimestamp } from './MessageTimestamp';
-import { useReactionClick } from './hooks';
-import { PinIndicator as DefaultPinIndicator, ErrorIcon, ReactionIcon, ThreadIcon } from './icons';
-import { QuotedMessage as DefaultQuotedMessage } from './QuotedMessage';
-import { areMessageUIPropsEqual, MESSAGE_ACTIONS, showMessageActionsBox } from './utils';
-import { Avatar as DefaultAvatar } from '../Avatar';
-import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
-import { MessageActions } from '../MessageActions';
-import { EditMessageForm as DefaultEditMessageForm, MessageInput } from '../MessageInput';
-import { ReactionSelector as DefaultReactionSelector, SimpleReactionsList as DefaultReactionsList, } from '../Reactions';
-import { useComponentContext } from '../../context/ComponentContext';
-import { useMessageContext } from '../../context/MessageContext';
-import { useTranslationContext } from '../../context/TranslationContext';
-import { renderText as defaultRenderText, isOnlyEmojis } from '../../utils';
-var MessageLivestreamWithContext = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var clearEditingState = props.clearEditingState, editing = props.editing, groupStyles = props.groupStyles, handleAction = props.handleAction, handleOpenThread = props.handleOpenThread, handleRetry = props.handleRetry, initialMessage = props.initialMessage, isReactionEnabled = props.isReactionEnabled, message = props.message, messageWrapperRef = props.messageWrapperRef, onMentionsClickMessage = props.onMentionsClickMessage, onMentionsHoverMessage = props.onMentionsHoverMessage, onReactionListClick = props.onReactionListClick, onUserClick = props.onUserClick, onUserHover = props.onUserHover, reactionSelectorRef = props.reactionSelectorRef, _l = props.renderText, renderText = _l === void 0 ? defaultRenderText : _l, showDetailedReactions = props.showDetailedReactions, unsafeHTML = props.unsafeHTML;
-    var _m = useComponentContext('MessageLivestream'), Attachment = _m.Attachment, _o = _m.Avatar, Avatar = _o === void 0 ? DefaultAvatar : _o, _p = _m.EditMessageInput, EditMessageInput = _p === void 0 ? DefaultEditMessageForm : _p, _q = _m.MessageDeleted, MessageDeleted = _q === void 0 ? DefaultMessageDeleted : _q, _r = _m.MessageRepliesCountButton, MessageRepliesCountButton = _r === void 0 ? DefaultMessageRepliesCountButton : _r, _s = _m.PinIndicator, PinIndicator = _s === void 0 ? DefaultPinIndicator : _s, _t = _m.QuotedMessage, QuotedMessage = _t === void 0 ? DefaultQuotedMessage : _t, _u = _m.ReactionsList, ReactionsList = _u === void 0 ? DefaultReactionsList : _u, _v = _m.ReactionSelector, ReactionSelector = _v === void 0 ? DefaultReactionSelector : _v;
-    var _w = useTranslationContext('MessageLivestream'), t = _w.t, userLanguage = _w.userLanguage;
-    var messageTextToRender = ((_a = message.i18n) === null || _a === void 0 ? void 0 : _a[userLanguage + "_text"]) || message.text;
-    var messageText = useMemo(function () { return renderText(messageTextToRender, message.mentioned_users); }, [
-        message.mentioned_users,
-        messageTextToRender,
-    ]);
-    var firstGroupStyle = groupStyles ? groupStyles[0] : 'single';
-    if (message.customType === CUSTOM_MESSAGE_TYPE.date) {
-        return null;
-    }
-    if (message.deleted_at) {
-        return React.createElement(MessageDeleted, { message: message });
-    }
-    if (editing) {
-        return (React.createElement("div", { className: "str-chat__message-team str-chat__message-team--" + firstGroupStyle + " str-chat__message-team--editing", "data-testid": 'message-livestream-edit' },
-            (firstGroupStyle === 'top' || firstGroupStyle === 'single') && (React.createElement("div", { className: 'str-chat__message-team-meta' },
-                React.createElement(Avatar, { image: (_b = message.user) === null || _b === void 0 ? void 0 : _b.image, name: ((_c = message.user) === null || _c === void 0 ? void 0 : _c.name) || ((_d = message.user) === null || _d === void 0 ? void 0 : _d.id), onClick: onUserClick, onMouseOver: onUserHover, size: 40 }))),
-            React.createElement(MessageInput, { clearEditingState: clearEditingState, Input: EditMessageInput, message: message })));
-    }
-    return (React.createElement(React.Fragment, null,
-        message.pinned && (React.createElement("div", { className: 'str-chat__message-livestream-pin-indicator' },
-            React.createElement(PinIndicator, { message: message, t: t }))),
-        React.createElement("div", { className: "str-chat__message-livestream str-chat__message-livestream--" + firstGroupStyle + " str-chat__message-livestream--" + message.type + " str-chat__message-livestream--" + message.status + " " + (initialMessage ? 'str-chat__message-livestream--initial-message' : '') + " " + (message.pinned ? 'pinned-message' : ''), "data-testid": 'message-livestream', ref: messageWrapperRef },
-            showDetailedReactions && isReactionEnabled && (React.createElement(ReactionSelector, { ref: reactionSelectorRef })),
-            React.createElement(MessageLivestreamActions, { messageWrapperRef: messageWrapperRef, onReactionListClick: onReactionListClick }),
-            React.createElement("div", { className: 'str-chat__message-livestream-left' },
-                React.createElement(Avatar, { image: (_e = message.user) === null || _e === void 0 ? void 0 : _e.image, name: ((_f = message.user) === null || _f === void 0 ? void 0 : _f.name) || ((_g = message.user) === null || _g === void 0 ? void 0 : _g.id), onClick: onUserClick, onMouseOver: onUserHover, size: 30 })),
-            React.createElement("div", { className: 'str-chat__message-livestream-right' },
-                React.createElement("div", { className: 'str-chat__message-livestream-content' },
-                    React.createElement("div", { className: 'str-chat__message-livestream-author' },
-                        React.createElement("strong", null, ((_h = message.user) === null || _h === void 0 ? void 0 : _h.name) || ((_j = message.user) === null || _j === void 0 ? void 0 : _j.id)),
-                        message.type === 'error' && (React.createElement("div", { className: 'str-chat__message-team-error-header' }, t('Only visible to you')))),
-                    React.createElement("div", { className: isOnlyEmojis(message.text) ? 'str-chat__message-livestream-text--is-emoji' : '', "data-testid": 'message-livestream-text', onClick: onMentionsClickMessage, onMouseOver: onMentionsHoverMessage },
-                        message.quoted_message && (React.createElement("div", { className: 'livestream-quoted-message' },
-                            React.createElement(QuotedMessage, null))),
-                        message.type !== 'error' &&
-                            message.status !== 'failed' &&
-                            !unsafeHTML &&
-                            messageText,
-                        message.type !== 'error' &&
-                            message.status !== 'failed' &&
-                            unsafeHTML &&
-                            !!message.html && React.createElement("div", { dangerouslySetInnerHTML: { __html: message.html } }),
-                        message.type === 'error' && !message.command && (React.createElement("p", { "data-testid": 'message-livestream-error' },
-                            React.createElement(ErrorIcon, null),
-                            message.text)),
-                        message.type === 'error' && message.command && (React.createElement("p", { "data-testid": 'message-livestream-command-error' },
-                            React.createElement(ErrorIcon, null),
-                            React.createElement("strong", null,
-                                "/",
-                                message.command),
-                            " is not a valid command")),
-                        message.status === 'failed' && (React.createElement("p", { onClick: message.errorStatusCode !== 403 ? function () { return handleRetry(message); } : undefined },
-                            React.createElement(ErrorIcon, null),
-                            message.errorStatusCode !== 403
-                                ? t('Message Failed · Click to try again')
-                                : t('Message Failed · Unauthorized')))),
-                    ((_k = message.attachments) === null || _k === void 0 ? void 0 : _k.length) ? (React.createElement(Attachment, { actionHandler: handleAction, attachments: message.attachments })) : null,
-                    isReactionEnabled && React.createElement(ReactionsList, null),
-                    !initialMessage && (React.createElement(MessageRepliesCountButton, { onClick: handleOpenThread, reply_count: message.reply_count })))))));
-};
-var MessageLivestreamActions = function (props) {
-    var messageWrapperRef = props.messageWrapperRef, onReactionListClick = props.onReactionListClick;
-    var _a = useComponentContext('MessageLivestream').MessageTimestamp, MessageTimestamp = _a === void 0 ? DefaultTimestamp : _a;
-    var _b = useMessageContext('MessageLivestream'), getMessageActions = _b.getMessageActions, handleOpenThread = _b.handleOpenThread, initialMessage = _b.initialMessage, message = _b.message, threadList = _b.threadList;
-    var _c = useState(false), actionsBoxOpen = _c[0], setActionsBoxOpen = _c[1];
-    var hideOptions = useCallback(function () { return setActionsBoxOpen(false); }, []);
-    var messageDeletedAt = !!message.deleted_at;
-    var messageWrapper = messageWrapperRef === null || messageWrapperRef === void 0 ? void 0 : messageWrapperRef.current;
-    var messageActions = getMessageActions();
-    var showActionsBox = showMessageActionsBox(messageActions);
-    var shouldShowReactions = messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
-    var shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && !threadList;
-    useEffect(function () {
-        if (messageWrapper) {
-            messageWrapper.addEventListener('mouseleave', hideOptions);
-        }
-        return function () {
-            if (messageWrapper) {
-                messageWrapper.removeEventListener('mouseleave', hideOptions);
-            }
-        };
-    }, [messageWrapper, hideOptions]);
-    useEffect(function () {
-        if (messageDeletedAt) {
-            document.removeEventListener('click', hideOptions);
-        }
-    }, [messageDeletedAt, hideOptions]);
-    useEffect(function () {
-        if (actionsBoxOpen) {
-            document.addEventListener('click', hideOptions);
-        }
-        else {
-            document.removeEventListener('click', hideOptions);
-        }
-        return function () {
-            document.removeEventListener('click', hideOptions);
-        };
-    }, [actionsBoxOpen, hideOptions]);
-    if (initialMessage ||
-        !message ||
-        message.type === 'error' ||
-        message.type === 'system' ||
-        message.type === 'ephemeral' ||
-        message.status === 'failed' ||
-        message.status === 'sending') {
-        return null;
-    }
-    return (React.createElement("div", { className: "str-chat__message-livestream-actions", "data-testid": 'message-livestream-actions' },
-        React.createElement(MessageTimestamp, { customClass: 'str-chat__message-livestream-time' }),
-        shouldShowReactions && (React.createElement("span", { "data-testid": 'message-livestream-reactions-action', onClick: onReactionListClick },
-            React.createElement("span", null,
-                React.createElement(ReactionIcon, null)))),
-        shouldShowReplies && (React.createElement("span", { "data-testid": 'message-livestream-thread-action', onClick: handleOpenThread },
-            React.createElement(ThreadIcon, null))),
-        showActionsBox && React.createElement(MessageActions, { inline: true })));
-};
-var MemoizedMessageLivestream = React.memo(MessageLivestreamWithContext, areMessageUIPropsEqual);
-/**
- * @deprecated - This UI component will be removed in the next major release.
- *
- * Handles the rendering of a message and depends on the Message component for all the logic.
- * Implements the look and feel for a livestream use case.
- */
-export var MessageLivestream = function (props) {
-    var messageContext = useMessageContext('MessageLivestream');
-    var messageWrapperRef = useRef(null);
-    var reactionSelectorRef = useRef(null);
-    var message = props.message || messageContext.message;
-    var _a = useReactionClick(message, reactionSelectorRef, messageWrapperRef), isReactionEnabled = _a.isReactionEnabled, onReactionListClick = _a.onReactionListClick, showDetailedReactions = _a.showDetailedReactions;
-    return (React.createElement(MemoizedMessageLivestream, __assign({}, messageContext, { isReactionEnabled: isReactionEnabled, messageWrapperRef: messageWrapperRef, onReactionListClick: onReactionListClick, reactionSelectorRef: reactionSelectorRef, showDetailedReactions: showDetailedReactions }, props)));
-};

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

@@ -1,11 +0,0 @@
-import { MessageContextValue } from '../../context/MessageContext';
-import type { MessageUIComponentProps } from './types';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-/**
- * @deprecated - This UI component will be removed in the next major release.
- *
- * Handles the rendering of a Message and depends on the Message component for all the logic.
- * Implements the look and feel for a team style collaboration environment.
- */
-export declare const MessageTeam: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: Partial<MessageContextValue<StreamChatGenerics>>) => JSX.Element;
-//# sourceMappingURL=MessageTeam.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MessageTeam.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageTeam.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,mBAAmB,EAAqB,MAAM,8BAA8B,CAAC;AAMtF,OAAO,KAAK,EAAE,uBAAuB,EAAqB,MAAM,SAAS,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AA0PnE;;;;;GAKG;AACH,eAAO,MAAM,WAAW,4JA6BvB,CAAC"}

package/dist/components/Message/MessageTeam.js

@@ -1,110 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React, { useMemo, useRef } from 'react';
-import { MessageDeleted as DefaultMessageDeleted } from './MessageDeleted';
-import { MessageRepliesCountButton as DefaultMessageRepliesCountButton } from './MessageRepliesCountButton';
-import { MessageStatus } from './MessageStatus';
-import { MessageTimestamp as DefaultTimestamp } from './MessageTimestamp';
-import { useReactionClick } from './hooks';
-import { PinIndicator as DefaultPinIndicator, ErrorIcon, ReactionIcon, ThreadIcon } from './icons';
-import { QuotedMessage as DefaultQuotedMessage } from './QuotedMessage';
-import { areMessageUIPropsEqual, MESSAGE_ACTIONS, showMessageActionsBox } from './utils';
-import { Avatar as DefaultAvatar } from '../Avatar';
-import { MessageActions } from '../MessageActions';
-import { EditMessageForm as DefaultEditMessageForm, MessageInput } from '../MessageInput';
-import { MML } from '../MML';
-import { ReactionSelector as DefaultReactionSelector, SimpleReactionsList as DefaultReactionsList, } from '../Reactions';
-import { useComponentContext } from '../../context/ComponentContext';
-import { useMessageContext } from '../../context/MessageContext';
-import { useTranslationContext } from '../../context/TranslationContext';
-import { renderText as defaultRenderText, isOnlyEmojis } from '../../utils';
-var MessageTeamWithContext = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    var clearEditingState = props.clearEditingState, editing = props.editing, getMessageActions = props.getMessageActions, groupStyles = props.groupStyles, handleAction = props.handleAction, handleOpenThread = props.handleOpenThread, handleRetry = props.handleRetry, initialMessage = props.initialMessage, isReactionEnabled = props.isReactionEnabled, message = props.message, messageWrapperRef = props.messageWrapperRef, onMentionsClickMessage = props.onMentionsClickMessage, onMentionsHoverMessage = props.onMentionsHoverMessage, onReactionListClick = props.onReactionListClick, onUserClick = props.onUserClick, onUserHover = props.onUserHover, reactionSelectorRef = props.reactionSelectorRef, _o = props.renderText, renderText = _o === void 0 ? defaultRenderText : _o, showDetailedReactions = props.showDetailedReactions, threadList = props.threadList, unsafeHTML = props.unsafeHTML;
-    var _p = useComponentContext('MessageTeam'), Attachment = _p.Attachment, _q = _p.Avatar, Avatar = _q === void 0 ? DefaultAvatar : _q, _r = _p.EditMessageInput, EditMessageInput = _r === void 0 ? DefaultEditMessageForm : _r, _s = _p.MessageDeleted, MessageDeleted = _s === void 0 ? DefaultMessageDeleted : _s, _t = _p.MessageRepliesCountButton, MessageRepliesCountButton = _t === void 0 ? DefaultMessageRepliesCountButton : _t, _u = _p.MessageTimestamp, MessageTimestamp = _u === void 0 ? DefaultTimestamp : _u, _v = _p.PinIndicator, PinIndicator = _v === void 0 ? DefaultPinIndicator : _v, _w = _p.QuotedMessage, QuotedMessage = _w === void 0 ? DefaultQuotedMessage : _w, _x = _p.ReactionsList, ReactionsList = _x === void 0 ? DefaultReactionsList : _x, _y = _p.ReactionSelector, ReactionSelector = _y === void 0 ? DefaultReactionSelector : _y;
-    var _z = useTranslationContext('MessageTeam'), t = _z.t, userLanguage = _z.userLanguage;
-    var messageActions = getMessageActions();
-    var showActionsBox = showMessageActionsBox(messageActions);
-    var shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && !threadList;
-    var messageTextToRender = ((_a = message.i18n) === null || _a === void 0 ? void 0 : _a[userLanguage + "_text"]) || message.text;
-    var messageMentionedUsersItem = message.mentioned_users;
-    var messageText = useMemo(function () { return renderText(messageTextToRender, messageMentionedUsersItem); }, [
-        messageMentionedUsersItem,
-        messageTextToRender,
-    ]);
-    var firstGroupStyle = groupStyles ? groupStyles[0] : 'single';
-    if (message.deleted_at) {
-        return React.createElement(MessageDeleted, { message: message });
-    }
-    if (editing) {
-        return (React.createElement("div", { className: "str-chat__message-team str-chat__message-team--" + firstGroupStyle + " str-chat__message-team--editing", "data-testid": 'message-team-edit' },
-            (firstGroupStyle === 'top' || firstGroupStyle === 'single') && (React.createElement("div", { className: 'str-chat__message-team-meta' },
-                React.createElement(Avatar, { image: (_b = message.user) === null || _b === void 0 ? void 0 : _b.image, name: ((_c = message.user) === null || _c === void 0 ? void 0 : _c.name) || ((_d = message.user) === null || _d === void 0 ? void 0 : _d.id), onClick: onUserClick, onMouseOver: onUserHover, size: 40 }))),
-            React.createElement(MessageInput, { clearEditingState: clearEditingState, Input: EditMessageInput, message: message })));
-    }
-    return (React.createElement(React.Fragment, null,
-        message.pinned && (React.createElement("div", { className: 'str-chat__message-team-pin-indicator' },
-            React.createElement(PinIndicator, { message: message, t: t }))),
-        React.createElement("div", { className: "str-chat__message-team str-chat__message-team--" + firstGroupStyle + " str-chat__message-team--" + message.type + " " + (threadList ? 'thread-list' : '') + " str-chat__message-team--" + message.status + " " + (message.pinned ? 'pinned-message' : ''), "data-testid": 'message-team', ref: messageWrapperRef },
-            React.createElement("div", { className: 'str-chat__message-team-meta' },
-                firstGroupStyle === 'top' || firstGroupStyle === 'single' || initialMessage ? (React.createElement(Avatar, { image: (_e = message.user) === null || _e === void 0 ? void 0 : _e.image, name: ((_f = message.user) === null || _f === void 0 ? void 0 : _f.name) || ((_g = message.user) === null || _g === void 0 ? void 0 : _g.id), onClick: onUserClick, onMouseOver: onUserHover, size: 40 })) : (React.createElement("div", { "data-testid": 'team-meta-spacer', style: { marginRight: 0, width: 40 } })),
-                React.createElement(MessageTimestamp, null)),
-            React.createElement("div", { className: 'str-chat__message-team-group' },
-                (firstGroupStyle === 'top' || firstGroupStyle === 'single' || initialMessage) && (React.createElement("div", { className: 'str-chat__message-team-author', "data-testid": 'message-team-author', onClick: onUserClick },
-                    React.createElement("strong", null, ((_h = message.user) === null || _h === void 0 ? void 0 : _h.name) || ((_j = message.user) === null || _j === void 0 ? void 0 : _j.id)),
-                    message.type === 'error' && (React.createElement("div", { className: 'str-chat__message-team-error-header' }, t('Only visible to you'))))),
-                React.createElement("div", { className: "str-chat__message-team-content str-chat__message-team-content--" + firstGroupStyle + " str-chat__message-team-content--" + (message.text === '' ? 'image' : 'text'), "data-testid": 'message-team-content' },
-                    message.quoted_message && React.createElement(QuotedMessage, null),
-                    !initialMessage &&
-                        message.status !== 'sending' &&
-                        message.status !== 'failed' &&
-                        message.type !== 'system' &&
-                        message.type !== 'ephemeral' &&
-                        message.type !== 'error' && (React.createElement("div", { className: "str-chat__message-team-actions", "data-testid": 'message-team-actions' },
-                        showDetailedReactions && React.createElement(ReactionSelector, { ref: reactionSelectorRef }),
-                        isReactionEnabled && (React.createElement("span", { "data-testid": 'message-team-reaction-icon', onClick: onReactionListClick, title: 'Reactions' },
-                            React.createElement(ReactionIcon, null))),
-                        shouldShowReplies && (React.createElement("span", { "data-testid": 'message-team-thread-icon', onClick: handleOpenThread, title: 'Start a thread' },
-                            React.createElement(ThreadIcon, null))),
-                        showActionsBox && (React.createElement(MessageActions, { inline: true, messageWrapperRef: messageWrapperRef })))),
-                    React.createElement("span", { className: isOnlyEmojis(message.text) ? 'str-chat__message-team-text--is-emoji' : '', "data-testid": 'message-team-message', onClick: onMentionsClickMessage, onMouseOver: onMentionsHoverMessage }, unsafeHTML && message.html ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: message.html } })) : (messageText)),
-                    message.mml && React.createElement(MML, { actionHandler: handleAction, align: 'left', source: message.mml }),
-                    !message.text && ((_k = message.attachments) === null || _k === void 0 ? void 0 : _k.length) ? (React.createElement(Attachment, { actionHandler: handleAction, attachments: message.attachments })) : null,
-                    ((_l = message.latest_reactions) === null || _l === void 0 ? void 0 : _l.length) !== 0 && message.text !== '' && isReactionEnabled && (React.createElement(ReactionsList, null)),
-                    message.status === 'failed' && (React.createElement("button", { className: 'str-chat__message-team-failed', "data-testid": 'message-team-failed', onClick: message.errorStatusCode !== 403 ? function () { return handleRetry(message); } : undefined },
-                        React.createElement(ErrorIcon, null),
-                        message.errorStatusCode !== 403
-                            ? t('Message Failed · Click to try again')
-                            : t('Message Failed · Unauthorized')))),
-                React.createElement(MessageStatus, { messageType: 'team' }),
-                message.text && ((_m = message.attachments) === null || _m === void 0 ? void 0 : _m.length) ? (React.createElement(Attachment, { actionHandler: handleAction, attachments: message.attachments })) : null,
-                message.latest_reactions &&
-                    message.latest_reactions.length !== 0 &&
-                    message.text === '' &&
-                    isReactionEnabled && React.createElement(ReactionsList, null),
-                !threadList && (React.createElement(MessageRepliesCountButton, { onClick: handleOpenThread, reply_count: message.reply_count }))))));
-};
-var MemoizedMessageTeam = React.memo(MessageTeamWithContext, areMessageUIPropsEqual);
-/**
- * @deprecated - This UI component will be removed in the next major release.
- *
- * Handles the rendering of a Message and depends on the Message component for all the logic.
- * Implements the look and feel for a team style collaboration environment.
- */
-export var MessageTeam = function (props) {
-    var messageContext = useMessageContext('MessageTeam');
-    var reactionSelectorRef = useRef(null);
-    var messageWrapperRef = useRef(null);
-    var message = props.message || messageContext.message;
-    var _a = useReactionClick(message, reactionSelectorRef, messageWrapperRef), isReactionEnabled = _a.isReactionEnabled, onReactionListClick = _a.onReactionListClick, showDetailedReactions = _a.showDetailedReactions;
-    return (React.createElement(MemoizedMessageTeam, __assign({}, messageContext, { isReactionEnabled: isReactionEnabled, messageWrapperRef: messageWrapperRef, onReactionListClick: onReactionListClick, reactionSelectorRef: reactionSelectorRef, showDetailedReactions: showDetailedReactions }, props)));
-};

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

@@ -1,6 +0,0 @@
-export declare type DeviceWidth = {
-    device: 'mobile' | 'tablet' | 'full';
-    width: number;
-};
-export declare const useBreakpoint: () => DeviceWidth;
-//# sourceMappingURL=useBreakpoint.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAGA,oBAAY,WAAW,GAAG;IACxB,MAAM,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAQF,eAAO,MAAM,aAAa,mBAWzB,CAAC"}

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

@@ -1,18 +0,0 @@
-import { useEffect, useState } from 'react';
-import throttle from 'lodash.throttle';
-var getDeviceWidth = function (width) {
-    if (width < 768)
-        return { device: 'mobile', width: width };
-    if (width < 1024)
-        return { device: 'tablet', width: width };
-    return { device: 'full', width: width };
-};
-export var useBreakpoint = function () {
-    var _a = useState(getDeviceWidth(window.innerWidth)), breakpoint = _a[0], setBreakpoint = _a[1];
-    useEffect(function () {
-        var getInnerWidth = throttle(function () { return setBreakpoint(getDeviceWidth(window.innerWidth)); }, 200);
-        window.addEventListener('resize', getInnerWidth);
-        return function () { return window.removeEventListener('resize', getInnerWidth); };
-    }, []);
-    return breakpoint;
-};

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

@@ -1,5 +0,0 @@
-import type { ReactEventHandler } from '../types';
-export declare const useMobilePress: () => {
-    handleMobilePress: ReactEventHandler;
-};
-//# sourceMappingURL=useMobilePress.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useMobilePress.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useMobilePress.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,cAAc;;CAqC1B,CAAC"}

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

@@ -1,33 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useBreakpoint } from './useBreakpoint';
-export var useMobilePress = function () {
-    var _a = useState(null), targetMessage = _a[0], setTargetMessage = _a[1];
-    var breakpoint = useBreakpoint();
-    var handleMobilePress = function (event) {
-        if (event.target instanceof HTMLElement && breakpoint.device === 'mobile') {
-            var closestMessage = event.target.closest('.str-chat__message-simple');
-            if (!closestMessage)
-                return;
-            setTargetMessage(closestMessage);
-            if (closestMessage.classList.contains('mobile-press')) {
-                closestMessage.classList.remove('mobile-press');
-            }
-            else {
-                closestMessage.classList.add('mobile-press');
-            }
-        }
-    };
-    useEffect(function () {
-        function handleClick(event) {
-            var isClickInside = targetMessage === null || targetMessage === void 0 ? void 0 : targetMessage.contains(event.target);
-            if (!isClickInside && targetMessage) {
-                targetMessage.classList.remove('mobile-press');
-            }
-        }
-        if (breakpoint.device === 'mobile') {
-            document.addEventListener('click', handleClick);
-        }
-        return function () { return document.removeEventListener('click', handleClick); };
-    }, [breakpoint, targetMessage]);
-    return { handleMobilePress: handleMobilePress };
-};