stream-chat-react 13.14.3 → 14.0.0-beta.2

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

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const MessageIsThreadReplyInChannelButtonIndicator: () => React.JSX.Element | null;

package/dist/components/Message/MessageIsThreadReplyInChannelButtonIndicator.js

@@ -1,63 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { formatMessage } from 'stream-chat';
-import { useChannelActionContext, useChannelStateContext, useChatContext, useMessageContext, useTranslationContext, } from '../../context';
-export const MessageIsThreadReplyInChannelButtonIndicator = () => {
-    const { client } = useChatContext();
-    const { t } = useTranslationContext();
-    const { channel } = useChannelStateContext();
-    const { openThread } = useChannelActionContext();
-    const { message } = useMessageContext();
-    const parentMessageRef = useRef(undefined);
-    const querySearchParent = () => channel
-        .getClient()
-        .search({ cid: channel.cid }, { id: message.parent_id })
-        .then(({ results }) => {
-        if (!results.length) {
-            throw new Error('Thread has not been found');
-        }
-        parentMessageRef.current = formatMessage(results[0].message);
-    })
-        .catch((error) => {
-        client.notifications.addError({
-            message: t('Thread has not been found'),
-            options: {
-                originalError: error,
-                type: 'api:message:search:not-found',
-            },
-            origin: {
-                context: { threadReply: message },
-                emitter: 'MessageIsThreadReplyInChannelButtonIndicator',
-            },
-        });
-    });
-    useEffect(() => {
-        if (parentMessageRef.current ||
-            parentMessageRef.current === null ||
-            !message.parent_id)
-            return;
-        const localMessage = channel.state.findMessage(message.parent_id);
-        if (localMessage) {
-            parentMessageRef.current = localMessage;
-            return;
-        }
-    }, [channel, message]);
-    if (!message.parent_id)
-        return null;
-    return (React.createElement("div", { className: 'str-chat__message-is-thread-reply-button-wrapper' },
-        React.createElement("button", { className: 'str-chat__message-is-thread-reply-button', "data-testid": 'message-is-thread-reply-button', onClick: async () => {
-                if (!parentMessageRef.current) {
-                    // search query is performed here in order to prevent multiple search queries in useEffect
-                    // due to the message list 3x remounting its items
-                    await querySearchParent();
-                    if (parentMessageRef.current) {
-                        openThread(parentMessageRef.current);
-                    }
-                    else {
-                        // prevent further search queries if the message is not found in the DB
-                        parentMessageRef.current = null;
-                    }
-                    return;
-                }
-                openThread(parentMessageRef.current);
-            }, type: 'button' }, t('Thread reply'))));
-};

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import type { IconProps } from '../../types/types';
-import type { MessageContextValue } from '../../context/MessageContext';
-export type MessageOptionsProps = Partial<Pick<MessageContextValue, 'handleOpenThread'>> & {
-    ActionsIcon?: React.ComponentType<IconProps>;
-    displayReplies?: boolean;
-    ReactionIcon?: React.ComponentType<IconProps>;
-    theme?: string;
-    ThreadIcon?: React.ComponentType<IconProps>;
-};
-export declare const MessageOptions: (props: MessageOptionsProps) => React.JSX.Element | null;

package/dist/components/Message/MessageOptions.js

@@ -1,41 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import { ActionsIcon as DefaultActionsIcon, ReactionIcon as DefaultReactionIcon, ThreadIcon as DefaultThreadIcon, } from './icons';
-import { MESSAGE_ACTIONS } from './utils';
-import { MessageActions } from '../MessageActions';
-import { useDialogIsOpen } from '../Dialog';
-import { ReactionSelectorWithButton } from '../Reactions/ReactionSelectorWithButton';
-import { useMessageContext, useTranslationContext } from '../../context';
-const UnMemoizedMessageOptions = (props) => {
-    const { ActionsIcon = DefaultActionsIcon, displayReplies = true, handleOpenThread: propHandleOpenThread, ReactionIcon = DefaultReactionIcon, theme = 'simple', ThreadIcon = DefaultThreadIcon, } = props;
-    const { getMessageActions, handleOpenThread: contextHandleOpenThread, initialMessage, message, threadList, } = useMessageContext('MessageOptions');
-    const { t } = useTranslationContext('MessageOptions');
-    // It is necessary to namespace the dialog IDs because a message with the same ID
-    // can appear in the main message list as well as in the thread message list.
-    // Without the namespace, the search for dialog would be performed by the message ID only
-    // which could return the dialog for a message in another message list (which would not be rendered).
-    const dialogIdNamespace = threadList ? '-thread-' : '';
-    const messageActionsDialogIsOpen = useDialogIsOpen(`message-actions${dialogIdNamespace}--${message.id}`);
-    const reactionSelectorDialogIsOpen = useDialogIsOpen(`reaction-selector${dialogIdNamespace}--${message.id}`);
-    const handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
-    const messageActions = getMessageActions();
-    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' ||
-        message.type === 'ephemeral' ||
-        message.status === 'failed' ||
-        message.status === 'sending' ||
-        initialMessage) {
-        return null;
-    }
-    return (React.createElement("div", { className: clsx(`str-chat__message-${theme}__actions str-chat__message-options`, {
-            'str-chat__message-options--active': messageActionsDialogIsOpen || reactionSelectorDialogIsOpen,
-        }), "data-testid": 'message-options' },
-        React.createElement(MessageActions, { ActionsIcon: ActionsIcon }),
-        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(ReactionSelectorWithButton, { ReactionIcon: ReactionIcon })));
-};
-export const MessageOptions = React.memo(UnMemoizedMessageOptions);

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

@@ -1,9 +0,0 @@
-import type { MouseEventHandler } from 'react';
-import React from 'react';
-export type MessageRepliesCountButtonProps = {
-    labelPlural?: string;
-    labelSingle?: string;
-    onClick?: MouseEventHandler;
-    reply_count?: number;
-};
-export declare const MessageRepliesCountButton: (props: MessageRepliesCountButtonProps) => React.JSX.Element | null;

package/dist/components/Message/MessageRepliesCountButton.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { useTranslationContext } from '../../context/TranslationContext';
-import { useChannelStateContext } from '../../context';
-const UnMemoizedMessageRepliesCountButton = (props) => {
-    const { labelPlural, labelSingle, onClick, reply_count = 0 } = props;
-    const { channelCapabilities } = useChannelStateContext();
-    const { t } = useTranslationContext('MessageRepliesCountButton');
-    if (!reply_count)
-        return null;
-    let replyCountText = t('replyCount', { count: reply_count });
-    if (labelPlural && reply_count > 1) {
-        replyCountText = `${reply_count} ${labelPlural}`;
-    }
-    else if (labelSingle) {
-        replyCountText = `1 ${labelSingle}`;
-    }
-    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', disabled: !channelCapabilities['send-reply'], onClick: onClick }, replyCountText)));
-};
-export const MessageRepliesCountButton = React.memo(UnMemoizedMessageRepliesCountButton);

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { MessageUIComponentProps } from './types';
-/**
- * The default UI component that renders a message and receives functionality and logic from the MessageContext.
- */
-export declare const MessageSimple: (props: MessageUIComponentProps) => React.JSX.Element;

package/dist/components/Message/MessageSimple.js

@@ -1,119 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import clsx from 'clsx';
-import { MessageErrorIcon } from './icons';
-import { MessageBouncePrompt as DefaultMessageBouncePrompt } from '../MessageBounce';
-import { MessageDeleted as DefaultMessageDeleted } from './MessageDeleted';
-import { MessageBlocked as DefaultMessageBlocked } from './MessageBlocked';
-import { MessageOptions as DefaultMessageOptions } from './MessageOptions';
-import { MessageRepliesCountButton as DefaultMessageRepliesCountButton } from './MessageRepliesCountButton';
-import { MessageStatus as DefaultMessageStatus } from './MessageStatus';
-import { MessageText } from './MessageText';
-import { MessageTimestamp as DefaultMessageTimestamp } from './MessageTimestamp';
-import { StreamedMessageText as DefaultStreamedMessageText } from './StreamedMessageText';
-import { isDateSeparatorMessage } from '../MessageList';
-import { MessageIsThreadReplyInChannelButtonIndicator as DefaultMessageIsThreadReplyInChannelButtonIndicator } from './MessageIsThreadReplyInChannelButtonIndicator';
-import { ReminderNotification as DefaultReminderNotification } from './ReminderNotification';
-import { useMessageReminder } from './hooks';
-import { areMessageUIPropsEqual, isMessageBlocked, isMessageBounced, isMessageEdited, messageHasAttachments, messageHasReactions, } from './utils';
-import { Avatar as DefaultAvatar } from '../Avatar';
-import { Attachment as DefaultAttachment } from '../Attachment';
-import { EditMessageModal as DefaultEditMessageModal } from '../MessageInput';
-import { Poll } from '../Poll';
-import { ReactionsList as DefaultReactionList } from '../Reactions';
-import { MessageBounceModal } from '../MessageBounce/MessageBounceModal';
-import { useComponentContext } from '../../context/ComponentContext';
-import { useMessageContext } from '../../context/MessageContext';
-import { useChatContext, useTranslationContext } from '../../context';
-import { MessageEditedTimestamp } from './MessageEditedTimestamp';
-const MessageSimpleWithContext = (props) => {
-    const { additionalMessageInputProps, editing, endOfGroup, firstOfGroup, groupedByUser, handleAction, handleOpenThread, handleRetry, highlighted, isMessageAIGenerated, isMyMessage, message, onUserClick, onUserHover, renderText, threadList, } = props;
-    const { client } = useChatContext('MessageSimple');
-    const { t } = useTranslationContext('MessageSimple');
-    const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
-    const [isEditedTimestampOpen, setEditedTimestampOpen] = useState(false);
-    const reminder = useMessageReminder(message.id);
-    const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, EditMessageModal = DefaultEditMessageModal, MessageOptions = DefaultMessageOptions, 
-    // TODO: remove this "passthrough" in the next
-    // major release and use the new default instead
-    MessageActions = MessageOptions, MessageBlocked = DefaultMessageBlocked, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageDeleted = DefaultMessageDeleted, MessageIsThreadReplyInChannelButtonIndicator = DefaultMessageIsThreadReplyInChannelButtonIndicator, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionsList = DefaultReactionList, ReminderNotification = DefaultReminderNotification, StreamedMessageText = DefaultStreamedMessageText, PinIndicator, } = useComponentContext('MessageSimple');
-    const hasAttachment = messageHasAttachments(message);
-    const hasReactions = messageHasReactions(message);
-    const isAIGenerated = useMemo(() => isMessageAIGenerated?.(message), [isMessageAIGenerated, message]);
-    const finalAttachments = useMemo(() => !message.shared_location && !message.attachments
-        ? []
-        : !message.shared_location
-            ? message.attachments
-            : [message.shared_location, ...(message.attachments ?? [])], [message]);
-    if (isDateSeparatorMessage(message)) {
-        return null;
-    }
-    if (message.deleted_at || message.type === 'deleted') {
-        return React.createElement(MessageDeleted, { message: message });
-    }
-    if (isMessageBlocked(message)) {
-        return React.createElement(MessageBlocked, null);
-    }
-    const showMetadata = !groupedByUser || endOfGroup;
-    const showReplyCountButton = !threadList && !!message.reply_count;
-    const showIsReplyInChannel = !threadList && message.show_in_channel && message.parent_id;
-    const allowRetry = message.status === 'failed' && message.error?.status !== 403;
-    const isBounced = isMessageBounced(message);
-    const isEdited = isMessageEdited(message) && !isAIGenerated;
-    let handleClick = undefined;
-    if (allowRetry) {
-        handleClick = () => handleRetry(message);
-    }
-    else if (isBounced) {
-        handleClick = () => setIsBounceDialogOpen(true);
-    }
-    else if (isEdited) {
-        handleClick = () => setEditedTimestampOpen((prev) => !prev);
-    }
-    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': hasReactions,
-        'str-chat__message-send-can-be-retried': message?.status === 'failed' && message?.error?.status !== 403,
-        'str-chat__message-with-thread-link': showReplyCountButton || showIsReplyInChannel,
-        'str-chat__virtual-message__wrapper--end': endOfGroup,
-        'str-chat__virtual-message__wrapper--first': firstOfGroup,
-        'str-chat__virtual-message__wrapper--group': groupedByUser,
-    });
-    const poll = message.poll_id && client.polls.fromState(message.poll_id);
-    return (React.createElement(React.Fragment, null,
-        editing && (React.createElement(EditMessageModal, { additionalMessageInputProps: 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),
-            !!reminder && React.createElement(ReminderNotification, { reminder: reminder }),
-            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,
-                }), "data-testid": 'message-inner', onClick: handleClick, onKeyUp: handleClick },
-                React.createElement(MessageActions, null),
-                React.createElement("div", { className: 'str-chat__message-reactions-host' }, hasReactions && React.createElement(ReactionsList, { reverse: true })),
-                React.createElement("div", { className: 'str-chat__message-bubble' },
-                    poll && React.createElement(Poll, { poll: poll }),
-                    finalAttachments?.length && !message.quoted_message ? (React.createElement(Attachment, { actionHandler: handleAction, attachments: finalAttachments })) : null,
-                    isAIGenerated ? (React.createElement(StreamedMessageText, { message: message, renderText: renderText })) : (React.createElement(MessageText, { message: message, renderText: renderText })),
-                    React.createElement(MessageErrorIcon, null))),
-            showReplyCountButton && (React.createElement(MessageRepliesCountButton, { onClick: handleOpenThread, reply_count: message.reply_count })),
-            showIsReplyInChannel && React.createElement(MessageIsThreadReplyInChannelButtonIndicator, null),
-            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, { 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 })))))));
-};
-const MemoizedMessageSimple = React.memo(MessageSimpleWithContext, areMessageUIPropsEqual);
-/**
- * The default UI component that renders a message and receives functionality and logic from the MessageContext.
- */
-export const MessageSimple = (props) => {
-    const messageContext = useMessageContext('MessageSimple');
-    return React.createElement(MemoizedMessageSimple, { ...messageContext, ...props });
-};

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import type { TooltipUsernameMapper } from './utils';
-import type { AvatarProps } from '../Avatar';
-export type MessageStatusProps = {
-    Avatar?: React.ComponentType<AvatarProps>;
-    MessageDeliveredStatus?: React.ComponentType;
-    MessageReadStatus?: React.ComponentType;
-    MessageSendingStatus?: React.ComponentType;
-    MessageSentStatus?: React.ComponentType;
-    messageType?: string;
-    tooltipUserNameMapper?: TooltipUsernameMapper;
-};
-export declare const MessageStatus: (props: MessageStatusProps) => React.JSX.Element | null;

package/dist/components/Message/MessageStatus.js

@@ -1,67 +0,0 @@
-import React, { useState } from 'react';
-import clsx from 'clsx';
-import { MessageDeliveredIcon, MessageSentIcon } from './icons';
-import { getReadByTooltipText, mapToUserNameOrId } from './utils';
-import { Avatar as DefaultAvatar } from '../Avatar';
-import { LoadingIndicator } from '../Loading';
-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';
-const UnMemoizedMessageStatus = (props) => {
-    const { Avatar: propAvatar, MessageDeliveredStatus, MessageReadStatus, MessageSendingStatus, MessageSentStatus, messageType = 'simple', tooltipUserNameMapper = mapToUserNameOrId, } = props;
-    const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
-    const { client } = useChatContext('MessageStatus');
-    const { Avatar: contextAvatar } = useComponentContext('MessageStatus');
-    const { deliveredTo, isMyMessage, lastOwnMessage, message, readBy, returnAllReadData, threadList, } = useMessageContext('MessageStatus');
-    const { t } = useTranslationContext('MessageStatus');
-    const [referenceElement, setReferenceElement] = useState(null);
-    const Avatar = propAvatar || contextAvatar || DefaultAvatar;
-    if (!isMyMessage() || message.type === 'error')
-        return null;
-    const justReadByMe = readBy?.length === 1 && readBy[0].id === client.user?.id;
-    const deliveredOnlyToMe = deliveredTo?.length === 1 && deliveredTo[0].id === client.user?.id;
-    const sending = message.status === 'sending';
-    const read = !!(readBy?.length && !justReadByMe && !threadList);
-    const delivered = !!(deliveredTo?.length && !deliveredOnlyToMe && !read && !threadList);
-    const sent = (returnAllReadData || lastOwnMessage?.id === message.id) &&
-        message.status === 'received' &&
-        !delivered &&
-        !read &&
-        !threadList;
-    const readersWithoutOwnUser = read
-        ? readBy.filter((item) => item.id !== client.user?.id)
-        : [];
-    const [lastReadUser] = readersWithoutOwnUser;
-    return (React.createElement("span", { className: clsx(`str-chat__message-${messageType}-status str-chat__message-status`, {
-            'str-chat__message-status-delivered': delivered,
-            'str-chat__message-status-read-by': read,
-            'str-chat__message-status-sending': sending,
-            'str-chat__message-status-sent': sent,
-        }), "data-testid": clsx({
-            'message-status-delivered': delivered,
-            'message-status-read-by': read,
-            'message-status-sending': sending,
-            'message-status-sent': sent,
-        }), onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement },
-        sending &&
-            (MessageSendingStatus ? (React.createElement(MessageSendingStatus, null)) : (React.createElement(React.Fragment, null,
-                React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Sending...')),
-                React.createElement(LoadingIndicator, null)))),
-        sent &&
-            (MessageSentStatus ? (React.createElement(MessageSentStatus, null)) : (React.createElement(React.Fragment, null,
-                React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Sent')),
-                React.createElement(MessageSentIcon, null)))),
-        delivered &&
-            (MessageDeliveredStatus ? (React.createElement(MessageDeliveredStatus, null)) : (React.createElement(React.Fragment, null,
-                React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Delivered')),
-                React.createElement(MessageDeliveredIcon, null)))),
-        read &&
-            (MessageReadStatus ? (React.createElement(MessageReadStatus, null)) : (React.createElement(React.Fragment, null,
-                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 }),
-                readersWithoutOwnUser.length > 1 && (React.createElement("span", { className: `str-chat__message-${messageType}-status-number`, "data-testid": 'message-status-read-by-many' }, readersWithoutOwnUser.length)))))));
-};
-export const MessageStatus = React.memo(UnMemoizedMessageStatus);

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { LocalMessage } from 'stream-chat';
-import type { MessageContextValue } from '../../context';
-export type MessageTextProps = {
-    customInnerClass?: string;
-    customWrapperClass?: string;
-    message?: LocalMessage;
-    theme?: string;
-} & Pick<MessageContextValue, 'renderText'>;
-export declare const MessageText: (props: MessageTextProps) => React.JSX.Element | null;

package/dist/components/Message/MessageText.js

@@ -1,35 +0,0 @@
-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';
-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;
-    const messageText = useMemo(() => renderText(messageTextToRender, message.mentioned_users), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [message.mentioned_users, messageTextToRender]);
-    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: 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 const MessageText = React.memo(UnMemoizedMessageTextComponent);

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

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { LocalMessage } from 'stream-chat';
-import type { TimestampFormatterOptions } from '../../i18n/types';
-export type MessageTimestampProps = TimestampFormatterOptions & {
-    customClass?: string;
-    message?: LocalMessage;
-};
-export declare const MessageTimestamp: (props: MessageTimestampProps) => React.JSX.Element;

package/dist/components/Message/MessageTimestamp.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { useMessageContext } from '../../context/MessageContext';
-import { Timestamp as DefaultTimestamp } from './Timestamp';
-import { useComponentContext } from '../../context';
-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 const MessageTimestamp = React.memo(UnMemoizedMessageTimestamp);

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { MessageContextValue } from '../../context/MessageContext';
-export type QuotedMessageProps = Pick<MessageContextValue, 'renderText'>;
-export declare const QuotedMessage: ({ renderText: propsRenderText }: QuotedMessageProps) => React.JSX.Element | null;

package/dist/components/Message/QuotedMessage.js

@@ -1,48 +0,0 @@
-import React, { useMemo } from 'react';
-import clsx from 'clsx';
-import { Attachment as DefaultAttachment } from '../Attachment';
-import { Avatar as DefaultAvatar } from '../Avatar';
-import { Poll } from '../Poll';
-import { useChatContext } from '../../context/ChatContext';
-import { useComponentContext } from '../../context/ComponentContext';
-import { useMessageContext } from '../../context/MessageContext';
-import { useTranslationContext } from '../../context/TranslationContext';
-import { useChannelActionContext } from '../../context/ChannelActionContext';
-import { renderText as defaultRenderText } from './renderText';
-import { useActionHandler } from './';
-export const QuotedMessage = ({ renderText: propsRenderText }) => {
-    const { Attachment = DefaultAttachment, Avatar: ContextAvatar } = useComponentContext('QuotedMessage');
-    const { client } = useChatContext();
-    const { isMyMessage, message, renderText: contextRenderText, } = useMessageContext('QuotedMessage');
-    const { t, userLanguage } = useTranslationContext('QuotedMessage');
-    const { jumpToMessage } = useChannelActionContext('QuotedMessage');
-    const actionHandler = useActionHandler(message);
-    const renderText = propsRenderText ?? contextRenderText ?? defaultRenderText;
-    const Avatar = ContextAvatar || DefaultAvatar;
-    const { quoted_message } = message;
-    const poll = quoted_message?.poll_id && client.polls.fromState(quoted_message.poll_id);
-    const quotedMessageDeleted = quoted_message?.deleted_at || quoted_message?.type === 'deleted';
-    const quotedMessageText = quotedMessageDeleted
-        ? t('This message was deleted...')
-        : quoted_message?.i18n?.[`${userLanguage}_text`] ||
-            quoted_message?.text;
-    const quotedMessageAttachment = quoted_message?.attachments?.length && !quotedMessageDeleted
-        ? quoted_message.attachments[0]
-        : null;
-    const renderedText = useMemo(() => renderText(quotedMessageText, quoted_message?.mentioned_users), [quotedMessageText, quoted_message?.mentioned_users, renderText]);
-    if (!quoted_message)
-        return null;
-    if (!quoted_message.poll && !quotedMessageText && !quotedMessageAttachment)
-        return null;
-    return (React.createElement(React.Fragment, null,
-        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, { 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' }, poll ? (React.createElement(Poll, { isQuoted: true, poll: poll })) : (React.createElement(React.Fragment, null,
-                quotedMessageAttachment && (React.createElement(Attachment, { attachments: [quotedMessageAttachment], isQuoted: true })),
-                React.createElement("div", { className: 'str-chat__quoted-message-bubble__text', "data-testid": 'quoted-message-text' }, renderedText))))),
-        message.attachments?.length ? (React.createElement(Attachment, { actionHandler: actionHandler, attachments: message.attachments })) : null));
-};

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { Reminder } from 'stream-chat';
-export type ReminderNotificationProps = {
-    reminder?: Reminder;
-};
-export declare const ReminderNotification: ({ reminder }: ReminderNotificationProps) => React.JSX.Element;

package/dist/components/Message/ReminderNotification.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { useTranslationContext } from '../../context';
-import { useStateStore } from '../../store';
-const reminderStateSelector = (state) => ({
-    timeLeftMs: state.timeLeftMs,
-});
-export const ReminderNotification = ({ reminder }) => {
-    const { t } = useTranslationContext();
-    const { timeLeftMs } = useStateStore(reminder?.state, reminderStateSelector) ?? {};
-    const stopRefreshBoundaryMs = reminder?.timer.stopRefreshBoundaryMs;
-    const stopRefreshTimeStamp = reminder?.remindAt && stopRefreshBoundaryMs
-        ? reminder?.remindAt.getTime() + stopRefreshBoundaryMs
-        : undefined;
-    const isBehindRefreshBoundary = !!stopRefreshTimeStamp && new Date().getTime() > stopRefreshTimeStamp;
-    return (React.createElement("p", { className: 'str-chat__message-reminder' },
-        React.createElement("span", null, t('Saved for later')),
-        reminder?.remindAt && timeLeftMs !== null && (React.createElement(React.Fragment, null,
-            React.createElement("span", null, " | "),
-            React.createElement("span", null, isBehindRefreshBoundary
-                ? t('Due since {{ dueSince }}', {
-                    dueSince: t('timestamp/ReminderNotification', {
-                        timestamp: reminder.remindAt,
-                    }),
-                })
-                : t('Due {{ timeLeft }}', {
-                    timeLeft: t('duration/Message reminder', {
-                        milliseconds: timeLeftMs,
-                    }),
-                }))))));
-};

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

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { MessageTextProps } from './MessageText';
-export type StreamedMessageTextProps = Pick<MessageTextProps, 'message' | 'renderText'> & {
-    renderingLetterCount?: number;
-    streamingLetterIntervalMs?: number;
-};
-export declare const StreamedMessageText: (props: StreamedMessageTextProps) => React.JSX.Element;

package/dist/components/Message/StreamedMessageText.js

@@ -1,22 +0,0 @@
-import React, { useEffect } from 'react';
-import { MessageText } from './MessageText';
-import { useChannelStateContext, useMessageContext } from '../../context';
-import { useMessageTextStreaming } from './hooks';
-export const StreamedMessageText = (props) => {
-    const { message: messageFromProps, renderingLetterCount, renderText, streamingLetterIntervalMs, } = props;
-    const { message: messageFromContext } = useMessageContext('StreamedMessageText');
-    const { channel } = useChannelStateContext();
-    const message = messageFromProps || messageFromContext;
-    const { text = '' } = message;
-    const { skipAnimation, streamedMessageText } = useMessageTextStreaming({
-        renderingLetterCount,
-        streamingLetterIntervalMs,
-        text,
-    });
-    useEffect(() => {
-        channel?.on('ai_indicator.stop', () => {
-            skipAnimation();
-        });
-    }, [channel, skipAnimation]);
-    return (React.createElement(MessageText, { message: { ...message, text: streamedMessageText }, renderText: renderText }));
-};

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

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { TimestampFormatterOptions } from '../../i18n/types';
-export interface TimestampProps extends TimestampFormatterOptions {
-    customClass?: string;
-    timestamp?: Date | string;
-}
-export declare function Timestamp(props: TimestampProps): React.JSX.Element | null;

package/dist/components/Message/Timestamp.js

@@ -1,32 +0,0 @@
-import React, { useMemo } from 'react';
-import { useMessageContext } from '../../context/MessageContext';
-import { useTranslationContext } from '../../context/TranslationContext';
-import { getDateString, isDate } from '../../i18n/utils';
-export function Timestamp(props) {
-    const { calendar, calendarFormats, customClass, format, 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/MessageTimestamp',
-    }), [
-        calendar,
-        calendarFormats,
-        format,
-        formatDate,
-        normalizedTimestamp,
-        t,
-        tDateTimeParser,
-    ]);
-    if (!when) {
-        return null;
-    }
-    return (React.createElement("time", { className: customClass, dateTime: normalizedTimestamp, title: normalizedTimestamp }, when));
-}

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

@@ -1,16 +0,0 @@
-export * from './useActionHandler';
-export * from './useDeleteHandler';
-export * from './useEditHandler';
-export * from './useFlagHandler';
-export * from './useMentionsHandler';
-export * from './useMarkUnreadHandler';
-export * from './useMuteHandler';
-export * from './useOpenThreadHandler';
-export * from './usePinHandler';
-export * from './useReactionHandler';
-export * from './useRetryHandler';
-export * from './useUserHandler';
-export * from './useUserRole';
-export * from './useReactionsFetcher';
-export * from './useMessageTextStreaming';
-export * from './useMessageReminder';