stream-chat-react
Version:
React components to create chat conversations or livestream style chat
49 lines (48 loc) • 3.51 kB
JavaScript
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));
};