stream-chat-react 14.11.1 → 15.0.0-rc.1

package/dist/es/components/Message/MessageStatus.mjs

@@ -0,0 +1,87 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useMessageContext } from "../../context/MessageContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { getReadByTooltipText, mapToUserNameOrId } from "./utils.mjs";
+import { PopperTooltip } from "../Tooltip/Tooltip.mjs";
+import { useEnterLeaveHandlers } from "../Tooltip/hooks/useEnterLeaveHandlers.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import React, { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Message/MessageStatus.tsx
+var UnMemoizedMessageStatus = (props) => {
+	const { IconCheckmark1Small, IconChecks, IconClock } = useComponentContextIcons();
+	const { MessageDeliveredStatus, MessageReadStatus, MessageSendingStatus, MessageSentStatus, messageType = "simple", tooltipUserNameMapper = mapToUserNameOrId } = props;
+	const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
+	const { client } = useChatContext();
+	const threadInstance = useThreadContext();
+	const { deliveredTo, isMyMessage, lastOwnMessage, message, readBy, returnAllReadData } = useMessageContext();
+	const { t } = useTranslationContext();
+	const [referenceElement, setReferenceElement] = useState(null);
+	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 failed = message.status === "failed";
+	const read = !failed && !!(readBy?.length && !justReadByMe && !threadInstance);
+	const delivered = !failed && !!(deliveredTo?.length && !deliveredOnlyToMe && !read && !threadInstance);
+	const sent = (returnAllReadData || lastOwnMessage?.id === message.id) && message.status === "received" && !delivered && !read && !threadInstance;
+	const readersWithoutOwnUser = read ? readBy.filter((item) => item.id !== client.user?.id) : [];
+	return /* @__PURE__ */ jsxs("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,
+		children: [
+			sending && (MessageSendingStatus ? /* @__PURE__ */ jsx(MessageSendingStatus, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PopperTooltip, {
+				offset: [0, 5],
+				referenceElement,
+				visible: tooltipVisible,
+				children: t("message.status.sending.text", "Sending...")
+			}), /* @__PURE__ */ jsx(IconClock, { className: "str-chat__message-status-sending" })] })),
+			sent && (MessageSentStatus ? /* @__PURE__ */ jsx(MessageSentStatus, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PopperTooltip, {
+				offset: [0, 5],
+				referenceElement,
+				visible: tooltipVisible,
+				children: t("message.status.sent.text", "Sent")
+			}), /* @__PURE__ */ jsx(IconCheckmark1Small, { className: "str-chat__message-status-sent" })] })),
+			delivered && (MessageDeliveredStatus ? /* @__PURE__ */ jsx(MessageDeliveredStatus, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PopperTooltip, {
+				offset: [0, 5],
+				referenceElement,
+				visible: tooltipVisible,
+				children: t("message.status.delivered.text", "Delivered")
+			}), /* @__PURE__ */ jsx(IconChecks, { className: "str-chat__message-status-delivered" })] })),
+			read && (MessageReadStatus ? /* @__PURE__ */ jsx(MessageReadStatus, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(PopperTooltip, {
+					offset: [0, 5],
+					referenceElement,
+					visible: tooltipVisible,
+					children: getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)
+				}),
+				/* @__PURE__ */ jsx(IconChecks, { className: "str-chat__message-status-read" }),
+				readersWithoutOwnUser.length > 1 && /* @__PURE__ */ jsx("span", {
+					className: `str-chat__message-${messageType}-status-number`,
+					"data-testid": "message-status-read-by-many",
+					children: readersWithoutOwnUser.length
+				})
+			] }))
+		]
+	});
+};
+var MessageStatus = React.memo(UnMemoizedMessageStatus);
+//#endregion
+export { MessageStatus };
+
+//# sourceMappingURL=MessageStatus.mjs.map

package/dist/es/components/Message/MessageStatus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageStatus.mjs","names":[],"sources":["../../../../src/components/Message/MessageStatus.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport clsx from 'clsx';\nimport type { TooltipUsernameMapper } from './utils';\nimport { getReadByTooltipText, mapToUserNameOrId } from './utils';\nimport { PopperTooltip } from '../Tooltip';\nimport { useEnterLeaveHandlers } from '../Tooltip/hooks';\n\nimport { useChatContext } from '../../context/ChatContext';\nimport { useMessageContext } from '../../context/MessageContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useThreadContext } from '../Threads';\nimport { useComponentContextIcons } from '../../context';\n\nexport type MessageStatusProps = {\n  /* Custom component to render when message is considered delivered, not read. The default UI renders MessageDeliveredIcon and a tooltip with string 'Delivered'. */\n  MessageDeliveredStatus?: React.ComponentType;\n  /* Custom component to render when message is considered delivered and read. The default UI renders the last reader's Avatar and a tooltip with string readers' names. */\n  MessageReadStatus?: React.ComponentType;\n  /* Custom component to render when message is considered as being the in the process of delivery. The default UI renders a clock icon and a tooltip with string 'Sending...'. */\n  MessageSendingStatus?: React.ComponentType;\n  /* Custom component to render when message is considered created on the server, but not delivered. The default UI renders MessageSentIcon and a tooltip with string 'Sent'. */\n  MessageSentStatus?: React.ComponentType;\n  /* Message type string to be added to CSS class names. */\n  messageType?: string;\n  /* Allows to customize the username(s) that appear on the message status tooltip */\n  tooltipUserNameMapper?: TooltipUsernameMapper;\n};\n\nconst UnMemoizedMessageStatus = (props: MessageStatusProps) => {\n  const { IconCheckmark1Small, IconChecks, IconClock } = useComponentContextIcons();\n  const {\n    MessageDeliveredStatus,\n    MessageReadStatus,\n    MessageSendingStatus,\n    MessageSentStatus,\n    messageType = 'simple',\n    tooltipUserNameMapper = mapToUserNameOrId,\n  } = props;\n\n  const { handleEnter, handleLeave, tooltipVisible } =\n    useEnterLeaveHandlers<HTMLSpanElement>();\n\n  const { client } = useChatContext();\n  const threadInstance = useThreadContext();\n  const { deliveredTo, isMyMessage, lastOwnMessage, message, readBy, returnAllReadData } =\n    useMessageContext();\n  const { t } = useTranslationContext();\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);\n\n  if (!isMyMessage() || message.type === 'error') return null;\n\n  const justReadByMe = readBy?.length === 1 && readBy[0].id === client.user?.id;\n  const deliveredOnlyToMe =\n    deliveredTo?.length === 1 && deliveredTo[0].id === client.user?.id;\n  const sending = message.status === 'sending';\n  // Delivery and read state comes from the other members' timestamp cursors\n  // (`MessageReceiptsTracker.deliveredForMessage` returns everyone whose cursor is at or past\n  // this message's `created_at`), not from the message itself. A message that never reached the\n  // server still carries a locally stamped `created_at`, so without this guard it is reported as\n  // delivered — a double tick on a message nobody received.\n  const failed = message.status === 'failed';\n  const read = !failed && !!(readBy?.length && !justReadByMe && !threadInstance);\n  const delivered =\n    !failed && !!(deliveredTo?.length && !deliveredOnlyToMe && !read && !threadInstance);\n  const sent =\n    (returnAllReadData || lastOwnMessage?.id === message.id) &&\n    message.status === 'received' &&\n    !delivered &&\n    !read &&\n    !threadInstance;\n\n  const readersWithoutOwnUser = read\n    ? readBy.filter((item) => item.id !== client.user?.id)\n    : [];\n\n  return (\n    <span\n      className={clsx(\n        `str-chat__message-${messageType}-status str-chat__message-status`,\n        {\n          'str-chat__message-status-delivered': delivered,\n          'str-chat__message-status-read-by': read,\n          'str-chat__message-status-sending': sending,\n          'str-chat__message-status-sent': sent,\n        },\n      )}\n      data-testid={clsx({\n        'message-status-delivered': delivered,\n        'message-status-read-by': read,\n        'message-status-sending': sending,\n        'message-status-sent': sent,\n      })}\n      onMouseEnter={handleEnter}\n      onMouseLeave={handleLeave}\n      ref={setReferenceElement}\n    >\n      {sending &&\n        (MessageSendingStatus ? (\n          <MessageSendingStatus />\n        ) : (\n          <>\n            <PopperTooltip\n              offset={[0, 5]}\n              referenceElement={referenceElement}\n              visible={tooltipVisible}\n            >\n              {t('message.status.sending.text', 'Sending...')}\n            </PopperTooltip>\n            <IconClock className='str-chat__message-status-sending' />\n          </>\n        ))}\n\n      {sent &&\n        (MessageSentStatus ? (\n          <MessageSentStatus />\n        ) : (\n          <>\n            <PopperTooltip\n              offset={[0, 5]}\n              referenceElement={referenceElement}\n              visible={tooltipVisible}\n            >\n              {t('message.status.sent.text', 'Sent')}\n            </PopperTooltip>\n            <IconCheckmark1Small className='str-chat__message-status-sent' />\n          </>\n        ))}\n\n      {delivered &&\n        (MessageDeliveredStatus ? (\n          <MessageDeliveredStatus />\n        ) : (\n          <>\n            <PopperTooltip\n              offset={[0, 5]}\n              referenceElement={referenceElement}\n              visible={tooltipVisible}\n            >\n              {t('message.status.delivered.text', 'Delivered')}\n            </PopperTooltip>\n            <IconChecks className='str-chat__message-status-delivered' />\n          </>\n        ))}\n\n      {read &&\n        (MessageReadStatus ? (\n          <MessageReadStatus />\n        ) : (\n          <>\n            <PopperTooltip\n              offset={[0, 5]}\n              referenceElement={referenceElement}\n              visible={tooltipVisible}\n            >\n              {getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)}\n            </PopperTooltip>\n\n            <IconChecks className='str-chat__message-status-read' />\n\n            {readersWithoutOwnUser.length > 1 && (\n              <span\n                className={`str-chat__message-${messageType}-status-number`}\n                data-testid='message-status-read-by-many'\n              >\n                {readersWithoutOwnUser.length}\n              </span>\n            )}\n          </>\n        ))}\n    </span>\n  );\n};\n\nexport const MessageStatus = React.memo(\n  UnMemoizedMessageStatus,\n) as typeof UnMemoizedMessageStatus;\n"],"mappings":"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"}

package/dist/es/components/Message/MessageText.mjs

@@ -0,0 +1,101 @@
+import { useMessageContext } from "../../context/MessageContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { getTranslatedMessageText } from "../../context/MessageTranslationViewContext.mjs";
+import { messageHasAttachments, messageTextHasEmojisOnly } from "./utils.mjs";
+import { getRenderTextMentionEntities } from "./renderText/rehypePlugins/mentionsMarkdownPlugin.mjs";
+import { renderText } from "./renderText/renderText.mjs";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Message/MessageText.tsx
+var UnMemoizedMessageTextComponent = (props) => {
+	const { customInnerClass, customWrapperClass = "", message: propMessage, renderText: propsRenderText } = props;
+	const { message: contextMessage, onMentionsClickMessage, onMentionsHoverMessage, renderText: contextRenderText, translationView = "translated", unsafeHTML } = useMessageContext();
+	const renderText$1 = propsRenderText ?? contextRenderText ?? renderText;
+	const { t, userLanguage } = useTranslationContext();
+	const message = propMessage || contextMessage;
+	const hasAttachment = messageHasAttachments(message);
+	const messageContextId = useStableId();
+	const messageTextId = useStableId();
+	const messageTextToRender = translationView === "original" ? message.text : getTranslatedMessageText({
+		language: userLanguage,
+		message
+	}) || message.text;
+	const renderTextMentionEntities = useMemo(() => getRenderTextMentionEntities({
+		mentioned_channel: message.mentioned_channel,
+		mentioned_groups: message.mentioned_groups,
+		mentioned_here: message.mentioned_here,
+		mentioned_roles: message.mentioned_roles,
+		mentioned_users: message.mentioned_users
+	}), [
+		message.mentioned_channel,
+		message.mentioned_groups,
+		message.mentioned_here,
+		message.mentioned_roles,
+		message.mentioned_users
+	]);
+	const messageText = useMemo(() => renderText$1(messageTextToRender, message.mentioned_users, { messageMentionEntities: renderTextMentionEntities }), [
+		message.mentioned_users,
+		messageTextToRender,
+		renderText$1,
+		renderTextMentionEntities
+	]);
+	const wrapperClass = customWrapperClass || "str-chat__message-text";
+	const innerClass = customInnerClass;
+	const isMentionsInteractionEnabled = Boolean(renderTextMentionEntities.length) && typeof onMentionsClickMessage === "function";
+	const senderName = message.user?.name;
+	const messageContext = senderName ? t("message.text.message.withUser.ariaLabel", "Message from {{ user }},", { user: senderName }) : t("message.text.message.ariaLabel", "Message,");
+	const messageLabelledBy = `${messageContextId} ${messageTextId}`;
+	const handleMentionsKeyDown = (event) => {
+		if (!isMentionsInteractionEnabled || event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		onMentionsClickMessage(event);
+	};
+	if (!messageTextToRender) return null;
+	/**
+	* The component has two mutually exclusive focus models. The reason is this bit of behavior:
+	*
+	* if mentions are not interactive:
+	*  - the whole message text block is just a readable focus stop
+	*  - outer wrapper gets tabIndex={0}
+	*  - inner wrapper is not focusable
+	* if mentions are interactive:
+	*  - keyboard interaction needs to land on the inner element, because that’s where onClick, onKeyDown, and mention hover/click behavior live
+	*  - inner wrapper gets tabIndex={0}
+	*  - outer wrapper must stop being focusable, otherwise you create an extra dead focus stop before the actual interactive target
+	*/
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-labelledby": isMentionsInteractionEnabled ? void 0 : messageLabelledBy,
+		className: wrapperClass,
+		tabIndex: isMentionsInteractionEnabled ? void 0 : 0,
+		children: [/* @__PURE__ */ jsx(VisuallyHidden, {
+			id: messageContextId,
+			children: messageContext
+		}), /* @__PURE__ */ jsx("div", {
+			"aria-labelledby": isMentionsInteractionEnabled ? messageLabelledBy : void 0,
+			className: clsx(innerClass, {
+				[` str-chat__message-text-inner--is-emoji`]: messageTextHasEmojisOnly(message) && !message.quoted_message,
+				[`str-chat__message-text-inner--has-attachment`]: hasAttachment
+			}),
+			"data-testid": "message-text-inner-wrapper",
+			onClick: onMentionsClickMessage,
+			onKeyDown: isMentionsInteractionEnabled ? handleMentionsKeyDown : void 0,
+			onMouseOver: onMentionsHoverMessage,
+			tabIndex: isMentionsInteractionEnabled ? 0 : void 0,
+			children: unsafeHTML && message.html ? /* @__PURE__ */ jsx("div", {
+				dangerouslySetInnerHTML: { __html: message.html },
+				id: messageTextId
+			}) : /* @__PURE__ */ jsx("div", {
+				id: messageTextId,
+				children: messageText
+			})
+		})]
+	});
+};
+var MessageText = React.memo(UnMemoizedMessageTextComponent);
+//#endregion
+export { MessageText };
+
+//# sourceMappingURL=MessageText.mjs.map

package/dist/es/components/Message/MessageText.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageText.mjs","names":[],"sources":["../../../../src/components/Message/MessageText.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useMemo } from 'react';\nimport { messageHasAttachments, messageTextHasEmojisOnly } from './utils';\nimport { useStableId } from '../UtilityComponents/useStableId';\n\nimport type { MessageContextValue } from '../../context';\nimport { useMessageContext, useTranslationContext } from '../../context';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport { renderText as defaultRenderText } from './renderText';\nimport { getRenderTextMentionEntities } from './renderText/rehypePlugins';\n\nimport type { LocalMessage } from 'stream-chat';\nimport { getTranslatedMessageText } from '../../context/MessageTranslationViewContext';\n\nexport type MessageTextProps = {\n  /* Replaces the CSS class name placed on the component's inner `div` container */\n  customInnerClass?: string;\n  /* Adds a CSS class name to the component's outer `div` container */\n  customWrapperClass?: string;\n  /* The `StreamChat` message object, which provides necessary data to the underlying UI components (overrides the value stored in `MessageContext`) */\n  message?: LocalMessage;\n} & Pick<MessageContextValue, 'renderText'>;\n\nconst UnMemoizedMessageTextComponent = (props: MessageTextProps) => {\n  const {\n    customInnerClass,\n    customWrapperClass = '',\n    message: propMessage,\n    renderText: propsRenderText,\n  } = props;\n\n  const {\n    message: contextMessage,\n    onMentionsClickMessage,\n    onMentionsHoverMessage,\n    renderText: contextRenderText,\n    translationView = 'translated',\n    unsafeHTML,\n  } = useMessageContext();\n\n  const renderText = propsRenderText ?? contextRenderText ?? defaultRenderText;\n\n  const { t, userLanguage } = useTranslationContext();\n  const message = propMessage || contextMessage;\n  const hasAttachment = messageHasAttachments(message);\n  const messageContextId = useStableId();\n  const messageTextId = useStableId();\n\n  const messageTextToRender =\n    translationView === 'original'\n      ? message.text\n      : getTranslatedMessageText({ language: userLanguage, message }) || message.text;\n  const renderTextMentionEntities = useMemo(\n    () =>\n      getRenderTextMentionEntities({\n        mentioned_channel: message.mentioned_channel,\n        mentioned_groups: message.mentioned_groups,\n        mentioned_here: message.mentioned_here,\n        mentioned_roles: message.mentioned_roles,\n        mentioned_users: message.mentioned_users,\n      }),\n    [\n      message.mentioned_channel,\n      message.mentioned_groups,\n      message.mentioned_here,\n      message.mentioned_roles,\n      message.mentioned_users,\n    ],\n  );\n\n  const messageText = useMemo(\n    () =>\n      renderText(messageTextToRender, message.mentioned_users, {\n        messageMentionEntities: renderTextMentionEntities,\n      }),\n    [message.mentioned_users, messageTextToRender, renderText, renderTextMentionEntities],\n  );\n\n  const wrapperClass = customWrapperClass || 'str-chat__message-text';\n  const innerClass = customInnerClass;\n  const hasMentions = Boolean(renderTextMentionEntities.length);\n  const isMentionsInteractionEnabled =\n    hasMentions && typeof onMentionsClickMessage === 'function';\n  const senderName = message.user?.name;\n  const messageContext = senderName\n    ? t('message.text.message.withUser.ariaLabel', 'Message from {{ user }},', {\n        user: senderName,\n      })\n    : t('message.text.message.ariaLabel', 'Message,');\n  // `aria-labelledby` accepts a space-separated list of element ids. We point to the\n  // hidden message context and the rendered message text so screen readers announce both.\n  const messageLabelledBy = `${messageContextId} ${messageTextId}`;\n\n  const handleMentionsKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!isMentionsInteractionEnabled || (event.key !== 'Enter' && event.key !== ' ')) {\n      return;\n    }\n\n    event.preventDefault();\n    onMentionsClickMessage(event);\n  };\n\n  if (!messageTextToRender) return null;\n\n  /**\n   * The component has two mutually exclusive focus models. The reason is this bit of behavior:\n   *\n   * if mentions are not interactive:\n   *  - the whole message text block is just a readable focus stop\n   *  - outer wrapper gets tabIndex={0}\n   *  - inner wrapper is not focusable\n   * if mentions are interactive:\n   *  - keyboard interaction needs to land on the inner element, because that’s where onClick, onKeyDown, and mention hover/click behavior live\n   *  - inner wrapper gets tabIndex={0}\n   *  - outer wrapper must stop being focusable, otherwise you create an extra dead focus stop before the actual interactive target\n   */\n  return (\n    <div\n      aria-labelledby={isMentionsInteractionEnabled ? undefined : messageLabelledBy}\n      className={wrapperClass}\n      tabIndex={isMentionsInteractionEnabled ? undefined : 0}\n    >\n      <VisuallyHidden id={messageContextId}>{messageContext}</VisuallyHidden>\n      <div\n        aria-labelledby={isMentionsInteractionEnabled ? messageLabelledBy : undefined}\n        className={clsx(innerClass, {\n          [` str-chat__message-text-inner--is-emoji`]:\n            messageTextHasEmojisOnly(message) && !message.quoted_message,\n          [`str-chat__message-text-inner--has-attachment`]: hasAttachment,\n        })}\n        data-testid='message-text-inner-wrapper'\n        onClick={onMentionsClickMessage}\n        onKeyDown={isMentionsInteractionEnabled ? handleMentionsKeyDown : undefined}\n        onMouseOver={onMentionsHoverMessage}\n        tabIndex={isMentionsInteractionEnabled ? 0 : undefined}\n      >\n        {unsafeHTML && message.html ? (\n          <div dangerouslySetInnerHTML={{ __html: message.html }} id={messageTextId} />\n        ) : (\n          <div id={messageTextId}>{messageText}</div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const MessageText = React.memo(\n  UnMemoizedMessageTextComponent,\n) as typeof UnMemoizedMessageTextComponent;\n"],"mappings":";;;;;;;;;;;;AAuBA,IAAM,kCAAkC,UAA4B;CAClE,MAAM,EACJ,kBACA,qBAAqB,IACrB,SAAS,aACT,YAAY,oBACV;CAEJ,MAAM,EACJ,SAAS,gBACT,wBACA,wBACA,YAAY,mBACZ,kBAAkB,cAClB,eACE,kBAAkB;CAEtB,MAAM,eAAa,mBAAmB,qBAAqB;CAE3D,MAAM,EAAE,GAAG,iBAAiB,sBAAsB;CAClD,MAAM,UAAU,eAAe;CAC/B,MAAM,gBAAgB,sBAAsB,OAAO;CACnD,MAAM,mBAAmB,YAAY;CACrC,MAAM,gBAAgB,YAAY;CAElC,MAAM,sBACJ,oBAAoB,aAChB,QAAQ,OACR,yBAAyB;EAAE,UAAU;EAAc;CAAQ,CAAC,KAAK,QAAQ;CAC/E,MAAM,4BAA4B,cAE9B,6BAA6B;EAC3B,mBAAmB,QAAQ;EAC3B,kBAAkB,QAAQ;EAC1B,gBAAgB,QAAQ;EACxB,iBAAiB,QAAQ;EACzB,iBAAiB,QAAQ;CAC3B,CAAC,GACH;EACE,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;CACV,CACF;CAEA,MAAM,cAAc,cAEhB,aAAW,qBAAqB,QAAQ,iBAAiB,EACvD,wBAAwB,0BAC1B,CAAC,GACH;EAAC,QAAQ;EAAiB;EAAqB;EAAY;CAAyB,CACtF;CAEA,MAAM,eAAe,sBAAsB;CAC3C,MAAM,aAAa;CAEnB,MAAM,+BADc,QAAQ,0BAA0B,MAEpD,KAAe,OAAO,2BAA2B;CACnD,MAAM,aAAa,QAAQ,MAAM;CACjC,MAAM,iBAAiB,aACnB,EAAE,2CAA2C,4BAA4B,EACvE,MAAM,WACR,CAAC,IACD,EAAE,kCAAkC,UAAU;CAGlD,MAAM,oBAAoB,GAAG,iBAAiB,GAAG;CAEjD,MAAM,yBAAyB,UAA+C;EAC5E,IAAI,CAAC,gCAAiC,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAC3E;EAGF,MAAM,eAAe;EACrB,uBAAuB,KAAK;CAC9B;CAEA,IAAI,CAAC,qBAAqB,OAAO;;;;;;;;;;;;;CAcjC,OACE,qBAAC,OAAD;EACE,mBAAiB,+BAA+B,KAAA,IAAY;EAC5D,WAAW;EACX,UAAU,+BAA+B,KAAA,IAAY;YAHvD,CAKE,oBAAC,gBAAD;GAAgB,IAAI;aAAmB;EAA+B,CAAA,GACtE,oBAAC,OAAD;GACE,mBAAiB,+BAA+B,oBAAoB,KAAA;GACpE,WAAW,KAAK,YAAY;KACzB,4CACC,yBAAyB,OAAO,KAAK,CAAC,QAAQ;KAC/C,iDAAiD;GACpD,CAAC;GACD,eAAY;GACZ,SAAS;GACT,WAAW,+BAA+B,wBAAwB,KAAA;GAClE,aAAa;GACb,UAAU,+BAA+B,IAAI,KAAA;aAE5C,cAAc,QAAQ,OACrB,oBAAC,OAAD;IAAK,yBAAyB,EAAE,QAAQ,QAAQ,KAAK;IAAG,IAAI;GAAgB,CAAA,IAE5E,oBAAC,OAAD;IAAK,IAAI;cAAgB;GAAiB,CAAA;EAEzC,CAAA,CACF;;AAET;AAEA,IAAa,cAAc,MAAM,KAC/B,8BACF"}

package/dist/es/components/Message/MessageTimestamp.mjs

@@ -0,0 +1,21 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useMessageContext } from "../../context/MessageContext.mjs";
+import { Timestamp } from "./Timestamp.mjs";
+import React from "react";
+import { convertTimestampToDate } from "stream-chat";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Message/MessageTimestamp.tsx
+var UnMemoizedMessageTimestamp = (props) => {
+	const { message: propMessage, ...timestampProps } = props;
+	const { message: contextMessage } = useMessageContext();
+	const { Timestamp: Timestamp$1 = Timestamp } = useComponentContext();
+	return /* @__PURE__ */ jsx(Timestamp$1, {
+		timestamp: convertTimestampToDate((propMessage || contextMessage).created_at),
+		...timestampProps
+	});
+};
+var MessageTimestamp = React.memo(UnMemoizedMessageTimestamp);
+//#endregion
+export { MessageTimestamp };
+
+//# sourceMappingURL=MessageTimestamp.mjs.map

package/dist/es/components/Message/MessageTimestamp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageTimestamp.mjs","names":[],"sources":["../../../../src/components/Message/MessageTimestamp.tsx"],"sourcesContent":["import { convertTimestampToDate } from 'stream-chat';\nimport React from 'react';\nimport { useMessageContext } from '../../context/MessageContext';\nimport { Timestamp as DefaultTimestamp } from './Timestamp';\nimport { useComponentContext } from '../../context';\n\nimport type { LocalMessage } from 'stream-chat';\nimport type { TimestampFormatterOptions } from '../../i18n/types';\n\nexport type MessageTimestampProps = TimestampFormatterOptions & {\n  /* Adds a CSS class name to the component's outer `time` container. */\n  customClass?: string;\n  /* The `StreamChat` message object, which provides necessary data to the underlying UI components (overrides the value from `MessageContext`) */\n  message?: LocalMessage;\n};\n\nconst UnMemoizedMessageTimestamp = (props: MessageTimestampProps) => {\n  const { message: propMessage, ...timestampProps } = props;\n  const { message: contextMessage } = useMessageContext();\n  const { Timestamp = DefaultTimestamp } = useComponentContext();\n  const message = propMessage || contextMessage;\n  return (\n    <Timestamp\n      timestamp={convertTimestampToDate(message.created_at)}\n      {...timestampProps}\n    />\n  );\n};\n\nexport const MessageTimestamp = React.memo(\n  UnMemoizedMessageTimestamp,\n) as typeof UnMemoizedMessageTimestamp;\n"],"mappings":";;;;;;;AAgBA,IAAM,8BAA8B,UAAiC;CACnE,MAAM,EAAE,SAAS,aAAa,GAAG,mBAAmB;CACpD,MAAM,EAAE,SAAS,mBAAmB,kBAAkB;CACtD,MAAM,EAAE,WAAA,cAAY,cAAqB,oBAAoB;CAE7D,OACE,oBAAC,aAAD;EACE,WAAW,wBAHC,eAAe,eAAA,CAGe,UAAU;EACpD,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,mBAAmB,MAAM,KACpC,0BACF"}

package/dist/es/components/Message/MessageTranslationIndicator.mjs

@@ -0,0 +1,53 @@
+import { useMessageContext } from "../../context/MessageContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../Button/Button.mjs";
+import { getTranslatedMessageText } from "../../context/MessageTranslationViewContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Message/MessageTranslationIndicator.tsx
+var MessageTranslationIndicator = ({ message: propMessage }) => {
+	const { IconTranslate } = useComponentContextIcons();
+	const { t, userLanguage } = useTranslationContext();
+	const { message: contextMessage, setTranslationView, translationView } = useMessageContext();
+	const message = propMessage ?? contextMessage;
+	const translatedTextForUser = useMemo(() => getTranslatedMessageText({
+		language: userLanguage,
+		message
+	}), [userLanguage, message]);
+	const hasTranslationForUserLanguage = useMemo(() => translatedTextForUser != null && message?.text !== void 0 && translatedTextForUser !== message.text, [translatedTextForUser, message?.text]);
+	const viewingOriginal = useMemo(() => translationView === "original" || translationView === void 0 && !hasTranslationForUserLanguage, [translationView, hasTranslationForUserLanguage]);
+	const handleToggle = useCallback(() => {
+		setTranslationView?.(viewingOriginal ? "translated" : "original");
+	}, [setTranslationView, viewingOriginal]);
+	const sourceLanguageName = useMemo(() => {
+		const sourceLanguageCode = message?.i18n?.language;
+		if (!sourceLanguageCode) return "";
+		const languageKey = `language.${sourceLanguageCode}`;
+		const translatedName = t(languageKey);
+		return translatedName === languageKey ? sourceLanguageCode : translatedName;
+	}, [message?.i18n?.language, t]);
+	if (!message?.i18n || !setTranslationView) return null;
+	if (!hasTranslationForUserLanguage) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__message-translation-indicator",
+		children: [
+			/* @__PURE__ */ jsx(IconTranslate, {}),
+			/* @__PURE__ */ jsx("span", {
+				className: "str-chat__message-translation-indicator__sign",
+				children: viewingOriginal ? t("message.translationIndicator.original.text", "Original") : sourceLanguageName ? t("message.translationIndicator.translated.withLanguage.text", "Translated from {{ language }}", { language: sourceLanguageName }) : t("message.translationIndicator.translated.text", "Translated")
+			}),
+			/* @__PURE__ */ jsx("span", { children: " · " }),
+			/* @__PURE__ */ jsx(Button, {
+				className: "str-chat__message-translation-indicator__translation-toggle",
+				onClick: handleToggle,
+				type: "button",
+				children: viewingOriginal ? t("message.translationIndicator.viewTranslation.text", "View translation") : t("message.translationIndicator.viewOriginal.text", "View original")
+			})
+		]
+	});
+};
+//#endregion
+export { MessageTranslationIndicator };
+
+//# sourceMappingURL=MessageTranslationIndicator.mjs.map

package/dist/es/components/Message/MessageTranslationIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageTranslationIndicator.mjs","names":[],"sources":["../../../../src/components/Message/MessageTranslationIndicator.tsx"],"sourcesContent":["import type { LocalMessage } from 'stream-chat';\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  getTranslatedMessageText,\n  useComponentContextIcons,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\nimport { Button } from '../Button';\n\nexport type TranslationIndicatorProps = {\n  message?: LocalMessage;\n};\n\nexport const MessageTranslationIndicator = ({\n  message: propMessage,\n}: TranslationIndicatorProps) => {\n  const { IconTranslate } = useComponentContextIcons();\n  const { t, userLanguage } = useTranslationContext();\n  const {\n    message: contextMessage,\n    setTranslationView,\n    translationView,\n  } = useMessageContext();\n  const message = propMessage ?? contextMessage;\n\n  const translatedTextForUser = useMemo(\n    () => getTranslatedMessageText({ language: userLanguage, message }),\n    [userLanguage, message],\n  );\n\n  const hasTranslationForUserLanguage = useMemo(\n    () =>\n      translatedTextForUser != null &&\n      message?.text !== undefined &&\n      translatedTextForUser !== message.text,\n    [translatedTextForUser, message?.text],\n  );\n\n  const viewingOriginal = useMemo(\n    () =>\n      translationView === 'original' ||\n      (translationView === undefined && !hasTranslationForUserLanguage),\n    [translationView, hasTranslationForUserLanguage],\n  );\n\n  const handleToggle = useCallback(() => {\n    setTranslationView?.(viewingOriginal ? 'translated' : 'original');\n  }, [setTranslationView, viewingOriginal]);\n\n  const sourceLanguageName = useMemo(() => {\n    const sourceLanguageCode = message?.i18n?.language;\n    if (!sourceLanguageCode) return '';\n    // `language.*` keys are part of the catalog now (core derives them from the same\n    // `TranslationLanguage` union this code is), so the key is checked at compile time rather than\n    // escaping through `asDynamicKey()`.\n    //\n    // The miss-detection stays, though: `message.i18n.language` is *server* data while the union is\n    // generated when the SDK is built, so a language the translation API learns after this release has\n    // no entry and i18next echoes the key back. Without the comparison the indicator reads\n    // \"Translated from language.sw\" rather than falling back to the bare code.\n    const languageKey = `language.${sourceLanguageCode}` as const;\n    const translatedName = t(languageKey);\n    return translatedName === languageKey ? sourceLanguageCode : translatedName;\n  }, [message?.i18n?.language, t]);\n\n  if (!message?.i18n || !setTranslationView) return null;\n  if (!hasTranslationForUserLanguage) return null;\n\n  return (\n    <div className='str-chat__message-translation-indicator'>\n      <IconTranslate />\n      <span className='str-chat__message-translation-indicator__sign'>\n        {viewingOriginal\n          ? t('message.translationIndicator.original.text', 'Original')\n          : sourceLanguageName\n            ? t(\n                'message.translationIndicator.translated.withLanguage.text',\n                'Translated from {{ language }}',\n                { language: sourceLanguageName },\n              )\n            : t('message.translationIndicator.translated.text', 'Translated')}\n      </span>\n      <span> · </span>\n      <Button\n        className='str-chat__message-translation-indicator__translation-toggle'\n        onClick={handleToggle}\n        type='button'\n      >\n        {viewingOriginal\n          ? t('message.translationIndicator.viewTranslation.text', 'View translation')\n          : t('message.translationIndicator.viewOriginal.text', 'View original')}\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAcA,IAAa,+BAA+B,EAC1C,SAAS,kBACsB;CAC/B,MAAM,EAAE,kBAAkB,yBAAyB;CACnD,MAAM,EAAE,GAAG,iBAAiB,sBAAsB;CAClD,MAAM,EACJ,SAAS,gBACT,oBACA,oBACE,kBAAkB;CACtB,MAAM,UAAU,eAAe;CAE/B,MAAM,wBAAwB,cACtB,yBAAyB;EAAE,UAAU;EAAc;CAAQ,CAAC,GAClE,CAAC,cAAc,OAAO,CACxB;CAEA,MAAM,gCAAgC,cAElC,yBAAyB,QACzB,SAAS,SAAS,KAAA,KAClB,0BAA0B,QAAQ,MACpC,CAAC,uBAAuB,SAAS,IAAI,CACvC;CAEA,MAAM,kBAAkB,cAEpB,oBAAoB,cACnB,oBAAoB,KAAA,KAAa,CAAC,+BACrC,CAAC,iBAAiB,6BAA6B,CACjD;CAEA,MAAM,eAAe,kBAAkB;EACrC,qBAAqB,kBAAkB,eAAe,UAAU;CAClE,GAAG,CAAC,oBAAoB,eAAe,CAAC;CAExC,MAAM,qBAAqB,cAAc;EACvC,MAAM,qBAAqB,SAAS,MAAM;EAC1C,IAAI,CAAC,oBAAoB,OAAO;EAShC,MAAM,cAAc,YAAY;EAChC,MAAM,iBAAiB,EAAE,WAAW;EACpC,OAAO,mBAAmB,cAAc,qBAAqB;CAC/D,GAAG,CAAC,SAAS,MAAM,UAAU,CAAC,CAAC;CAE/B,IAAI,CAAC,SAAS,QAAQ,CAAC,oBAAoB,OAAO;CAClD,IAAI,CAAC,+BAA+B,OAAO;CAE3C,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,eAAD,CAAgB,CAAA;GAChB,oBAAC,QAAD;IAAM,WAAU;cACb,kBACG,EAAE,8CAA8C,UAAU,IAC1D,qBACE,EACE,6DACA,kCACA,EAAE,UAAU,mBAAmB,CACjC,IACA,EAAE,gDAAgD,YAAY;GAChE,CAAA;GACN,oBAAC,QAAD,EAAA,UAAM,MAAS,CAAA;GACf,oBAAC,QAAD;IACE,WAAU;IACV,SAAS;IACT,MAAK;cAEJ,kBACG,EAAE,qDAAqD,kBAAkB,IACzE,EAAE,kDAAkD,eAAe;GACjE,CAAA;EACL;;AAET"}

package/dist/es/components/Message/MessageUI.mjs

@@ -0,0 +1,186 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useMessageContext } from "../../context/MessageContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Avatar } from "../Avatar/Avatar.mjs";
+import { ErrorBadge } from "../Badge/Badge.mjs";
+import { extractDisplayInfo } from "../Avatar/utils.mjs";
+import { areMessageUIPropsEqual, countEmojis, isMessageBlocked, isMessageBounced, isMessageDeleted, isMessageEdited, isMessageErrorRetryable, messageHasAttachments, messageHasGiphyAttachment, messageHasQuotedMessage, messageHasReactions, messageHasSingleAttachment, messageTextHasEmojisOnly } from "./utils.mjs";
+import { useMessageReminder } from "./hooks/useMessageReminder.mjs";
+import { MessageBounceModal } from "../MessageBounce/MessageBounceModal.mjs";
+import { MessageBouncePrompt } from "../MessageBounce/MessageBouncePrompt.mjs";
+import { MessageBubble } from "./MessageBubble.mjs";
+import { MessageDeletedBubble } from "./MessageDeletedBubble.mjs";
+import { MessageBlocked } from "./MessageBlocked.mjs";
+import { MessageReactions } from "../Reactions/MessageReactions.mjs";
+import { MessageActions } from "../MessageActions/MessageActions.mjs";
+import { MessageRepliesCountButton } from "./MessageRepliesCountButton.mjs";
+import { MessageStatus } from "./MessageStatus.mjs";
+import { MessageText } from "./MessageText.mjs";
+import { MessageEditedIndicator } from "./MessageEditedIndicator.mjs";
+import { MessageTimestamp } from "./MessageTimestamp.mjs";
+import { StreamedMessageText } from "./StreamedMessageText.mjs";
+import { isDateSeparatorMessage } from "../MessageList/utils.mjs";
+import { MessageAlsoSentInChannelIndicator } from "./MessageAlsoSentInChannelIndicator.mjs";
+import { ReminderNotification } from "./ReminderNotification.mjs";
+import { MessageTranslationIndicator } from "./MessageTranslationIndicator.mjs";
+import { Attachment } from "../Attachment/Attachment.mjs";
+import { Poll } from "../Poll/Poll.mjs";
+import { PinIndicator } from "./PinIndicator.mjs";
+import { QuotedMessage } from "./QuotedMessage.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import React, { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Message/MessageUI.tsx
+var MessageUIWithContext = ({ endOfGroup, firstOfGroup, groupedByUser, handleAction, highlighted, isMessageAIGenerated, isMyMessage, message, onUserClick, onUserHover, renderText, showAvatar = "incoming" }) => {
+	const channel = useChannel();
+	const threadInstance = useThreadContext();
+	const { client } = useChatContext();
+	const { t } = useTranslationContext();
+	const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
+	const reminder = useMessageReminder(message.id);
+	const { Attachment: Attachment$1 = Attachment, Avatar: Avatar$1 = Avatar, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo, MessageActions: MessageActions$1 = MessageActions, MessageAlsoSentInChannelIndicator: MessageAlsoSentInChannelIndicator$1 = MessageAlsoSentInChannelIndicator, MessageBlocked: MessageBlocked$1 = MessageBlocked, MessageBouncePrompt: MessageBouncePrompt$1 = MessageBouncePrompt, MessageDeleted, MessageDeletedBubble: MessageDeletedBubble$1 = MessageDeletedBubble, MessageEditedIndicator: MessageEditedIndicator$1 = MessageEditedIndicator, MessageReactions: MessageReactions$1 = MessageReactions, MessageRepliesCountButton: MessageRepliesCountButton$1 = MessageRepliesCountButton, MessageStatus: MessageStatus$1 = MessageStatus, MessageTimestamp: MessageTimestamp$1 = MessageTimestamp, MessageTranslationIndicator: MessageTranslationIndicator$1 = MessageTranslationIndicator, PinIndicator: PinIndicator$1 = PinIndicator, QuotedMessage: QuotedMessage$1 = QuotedMessage, ReminderNotification: ReminderNotification$1 = ReminderNotification, StreamedMessageText: StreamedMessageText$1 = StreamedMessageText } = useComponentContext();
+	const isAIGenerated = useMemo(() => isMessageAIGenerated?.(message), [isMessageAIGenerated, message]);
+	const isDeleted = isMessageDeleted(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 (MessageDeleted && isDeleted) return /* @__PURE__ */ jsx(MessageDeleted, { message });
+	if (isMessageBlocked(message)) return /* @__PURE__ */ jsx(MessageBlocked$1, {});
+	const poll = message.poll_id && client.polls.fromState(message.poll_id);
+	const memberCount = Object.keys(channel?.state?.members ?? {}).length;
+	const hasAttachment = !isDeleted && messageHasAttachments(message);
+	const hasSingleAttachment = !isDeleted && messageHasSingleAttachment(message);
+	const hasGiphyAttachment = !isDeleted && messageHasGiphyAttachment(message);
+	const hasReactions = !isDeleted && messageHasReactions(message);
+	const hasQuotedMessage = !isDeleted && messageHasQuotedMessage(message);
+	const textHasEmojisOnly = !isDeleted && messageTextHasEmojisOnly(message);
+	const allowRetry = isMessageErrorRetryable(message);
+	const isBounced = isMessageBounced(message);
+	const isEdited = isMessageEdited(message) && !isAIGenerated;
+	const showMetadata = !groupedByUser || endOfGroup;
+	const showReplyCountButton = !threadInstance && !!message.reply_count;
+	const rootClassName = clsx("str-chat__message", `str-chat__message--${message.type}`, `str-chat__message--${message.status}`, {
+		"str-chat__message--has-attachment": hasAttachment,
+		"str-chat__message--has-giphy-attachment": hasGiphyAttachment,
+		"str-chat__message--has-no-text": !message.text,
+		"str-chat__message--has-quoted-message": hasQuotedMessage,
+		"str-chat__message--has-single-attachment": hasSingleAttachment,
+		"str-chat__message--has-text": !!message.text,
+		"str-chat__message--highlighted": highlighted,
+		"str-chat__message--is-emoji-only": textHasEmojisOnly,
+		[`str-chat__message--is-emoji-only-count-${countEmojis(message.text)}`]: textHasEmojisOnly,
+		"str-chat__message--me": isMyMessage(),
+		"str-chat__message--other": !isMyMessage(),
+		"str-chat__message--pinned": message.pinned,
+		"str-chat__message--with-avatar": (() => {
+			if (!message.user) return false;
+			if (showAvatar === "incoming") return !isMyMessage();
+			if (showAvatar === "outgoing") return isMyMessage();
+			return showAvatar;
+		})(),
+		"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,
+		"str-chat__virtual-message__wrapper--end": endOfGroup,
+		"str-chat__virtual-message__wrapper--first": firstOfGroup,
+		"str-chat__virtual-message__wrapper--group": groupedByUser
+	});
+	let handleClick;
+	if (isBounced) handleClick = () => setIsBounceDialogOpen(true);
+	const isMessageInnerInteractive = !!handleClick;
+	const messageInnerAriaLabel = isMessageInnerInteractive ? t("message.ui.reviewBouncedMessage.ariaLabel", "Review bounced message") : void 0;
+	const handleMessageInnerKeyDown = (event) => {
+		if (!handleClick || event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		handleClick();
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [isBounceDialogOpen && /* @__PURE__ */ jsx(MessageBounceModal, {
+		MessageBouncePrompt: MessageBouncePrompt$1,
+		onClose: () => setIsBounceDialogOpen(false),
+		open: isBounceDialogOpen
+	}), /* @__PURE__ */ jsxs("div", {
+		className: rootClassName,
+		children: [
+			message.pinned && /* @__PURE__ */ jsx(PinIndicator$1, { message }),
+			message.show_in_channel && /* @__PURE__ */ jsx(MessageAlsoSentInChannelIndicator$1, {}),
+			!!reminder && /* @__PURE__ */ jsx(ReminderNotification$1, { reminder }),
+			/* @__PURE__ */ jsx(MessageTranslationIndicator$1, { message }),
+			message.user && /* @__PURE__ */ jsx(Avatar$1, {
+				...extractDisplayInfo$1({ user: message.user ?? void 0 }),
+				className: "str-chat__avatar--with-border",
+				onClick: onUserClick,
+				onMouseOver: onUserHover,
+				size: "md"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"aria-label": messageInnerAriaLabel,
+				className: clsx("str-chat__message-inner", { "str-chat__message-inner--error": allowRetry || isBounced }),
+				"data-testid": "message-inner",
+				onClick: handleClick,
+				onKeyDown: isMessageInnerInteractive ? handleMessageInnerKeyDown : void 0,
+				role: isMessageInnerInteractive ? "button" : void 0,
+				tabIndex: isMessageInnerInteractive ? 0 : void 0,
+				children: [
+					!isDeleted && /* @__PURE__ */ jsx(MessageActions$1, {}),
+					showReplyCountButton && /* @__PURE__ */ jsx(MessageRepliesCountButton$1, {
+						reply_count: message.reply_count,
+						thread_participants: message.thread_participants
+					}),
+					isDeleted ? /* @__PURE__ */ jsx(MessageDeletedBubble$1, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsxs(MessageBubble, { children: [
+							poll && /* @__PURE__ */ jsx(Poll, { poll }),
+							message.quoted_message && /* @__PURE__ */ jsx(QuotedMessage$1, {}),
+							finalAttachments?.length ? /* @__PURE__ */ jsx(Attachment$1, {
+								actionHandler: handleAction,
+								attachments: finalAttachments
+							}) : null,
+							isAIGenerated ? /* @__PURE__ */ jsx(StreamedMessageText$1, {
+								message,
+								renderText
+							}) : /* @__PURE__ */ jsx(MessageText, {
+								message,
+								renderText
+							})
+						] }),
+						/* @__PURE__ */ jsx("div", {
+							className: "str-chat__message-reactions-host",
+							children: hasReactions && /* @__PURE__ */ jsx(MessageReactions$1, { reverse: true })
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "str-chat__message-error-indicator",
+							children: /* @__PURE__ */ jsx(ErrorBadge, {})
+						})
+					] })
+				]
+			}),
+			showMetadata && /* @__PURE__ */ jsxs("div", {
+				className: "str-chat__message-metadata",
+				children: [
+					/* @__PURE__ */ jsx(MessageStatus$1, {}),
+					!isMyMessage() && !!message.user && memberCount > 2 && /* @__PURE__ */ jsx("span", {
+						className: "str-chat__message-metadata__name",
+						children: message.user.name || message.user.id
+					}),
+					/* @__PURE__ */ jsx(MessageTimestamp$1, { customClass: "str-chat__message-metadata__timestamp" }),
+					!isDeleted && isEdited && /* @__PURE__ */ jsx(MessageEditedIndicator$1, {})
+				]
+			})
+		]
+	}, message.id)] });
+};
+var MemoizedMessageUI = React.memo(MessageUIWithContext, areMessageUIPropsEqual);
+/**
+* The default UI component that renders a message and receives functionality and logic from the MessageContext.
+*/
+var MessageUI = (props) => {
+	return /* @__PURE__ */ jsx(MemoizedMessageUI, {
+		...useMessageContext(),
+		...props
+	});
+};
+//#endregion
+export { MessageUI };
+
+//# sourceMappingURL=MessageUI.mjs.map

package/dist/es/components/Message/MessageUI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageUI.mjs","names":[],"sources":["../../../../src/components/Message/MessageUI.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport clsx from 'clsx';\nimport { MessageBouncePrompt as DefaultMessageBouncePrompt } from '../MessageBounce';\nimport { MessageDeletedBubble as DefaultMessageDeletedBubble } from './MessageDeletedBubble';\nimport { MessageBlocked as DefaultMessageBlocked } from './MessageBlocked';\nimport { MessageActions as DefaultMessageActions } from '../MessageActions';\nimport { MessageRepliesCountButton as DefaultMessageRepliesCountButton } from './MessageRepliesCountButton';\nimport { MessageStatus as DefaultMessageStatus } from './MessageStatus';\nimport { MessageText } from './MessageText';\nimport { MessageEditedIndicator as DefaultMessageEditedIndicator } from './MessageEditedIndicator';\nimport { MessageTimestamp as DefaultMessageTimestamp } from './MessageTimestamp';\nimport { StreamedMessageText as DefaultStreamedMessageText } from './StreamedMessageText';\nimport { isDateSeparatorMessage } from '../MessageList';\nimport { MessageAlsoSentInChannelIndicator as DefaultMessageAlsoSentInChannelIndicator } from './MessageAlsoSentInChannelIndicator';\nimport { ReminderNotification as DefaultReminderNotification } from './ReminderNotification';\nimport { MessageTranslationIndicator as DefaultMessageTranslationIndicator } from './MessageTranslationIndicator';\nimport { useMessageReminder } from './hooks';\nimport {\n  areMessageUIPropsEqual,\n  countEmojis,\n  isMessageBlocked,\n  isMessageBounced,\n  isMessageDeleted,\n  isMessageEdited,\n  isMessageErrorRetryable,\n  messageHasAttachments,\n  messageHasGiphyAttachment,\n  messageHasQuotedMessage,\n  messageHasReactions,\n  messageHasSingleAttachment,\n  messageTextHasEmojisOnly,\n} from './utils';\n\nimport { Avatar as DefaultAvatar } from '../Avatar';\nimport { Attachment as DefaultAttachment } from '../Attachment';\nimport { Poll } from '../Poll';\nimport { MessageReactions as DefaultMessageReactions } from '../Reactions';\nimport { MessageBounceModal } from '../MessageBounce/MessageBounceModal';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport type { MessageContextValue } from '../../context/MessageContext';\nimport { useMessageContext } from '../../context/MessageContext';\n\nimport { useChannel, useChatContext, useTranslationContext } from '../../context';\nimport { useThreadContext } from '../Threads';\n\nimport type { MessageUIComponentProps } from './types';\nimport { PinIndicator as DefaultPinIndicator } from './PinIndicator';\nimport { QuotedMessage as DefaultQuotedMessage } from './QuotedMessage';\nimport { MessageBubble } from './MessageBubble';\nimport { ErrorBadge } from '../Badge';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';\n\ntype MessageUIWithContextProps = MessageContextValue;\n\nconst MessageUIWithContext = ({\n  endOfGroup,\n  firstOfGroup,\n  groupedByUser,\n  handleAction,\n  highlighted,\n  isMessageAIGenerated,\n  isMyMessage,\n  message,\n  onUserClick,\n  onUserHover,\n  renderText,\n  showAvatar = 'incoming',\n}: MessageUIWithContextProps) => {\n  const channel = useChannel();\n  const threadInstance = useThreadContext();\n  const { client } = useChatContext();\n  const { t } = useTranslationContext();\n  const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);\n  const reminder = useMessageReminder(message.id);\n\n  const {\n    Attachment = DefaultAttachment,\n    Avatar = DefaultAvatar,\n    extractDisplayInfo = defaultExtractDisplayInfo,\n    MessageActions = DefaultMessageActions,\n    MessageAlsoSentInChannelIndicator = DefaultMessageAlsoSentInChannelIndicator,\n    MessageBlocked = DefaultMessageBlocked,\n    MessageBouncePrompt = DefaultMessageBouncePrompt,\n    MessageDeleted,\n    MessageDeletedBubble = DefaultMessageDeletedBubble,\n    MessageEditedIndicator = DefaultMessageEditedIndicator,\n    MessageReactions = DefaultMessageReactions,\n    MessageRepliesCountButton = DefaultMessageRepliesCountButton,\n    MessageStatus = DefaultMessageStatus,\n    MessageTimestamp = DefaultMessageTimestamp,\n    MessageTranslationIndicator = DefaultMessageTranslationIndicator,\n    PinIndicator = DefaultPinIndicator,\n    QuotedMessage = DefaultQuotedMessage,\n    ReminderNotification = DefaultReminderNotification,\n    StreamedMessageText = DefaultStreamedMessageText,\n  } = useComponentContext();\n\n  const isAIGenerated = useMemo(\n    () => isMessageAIGenerated?.(message),\n    [isMessageAIGenerated, message],\n  );\n  const isDeleted = isMessageDeleted(message);\n\n  const finalAttachments = useMemo(\n    () =>\n      !message.shared_location && !message.attachments\n        ? []\n        : !message.shared_location\n          ? message.attachments\n          : [message.shared_location, ...(message.attachments ?? [])],\n    [message],\n  );\n\n  if (isDateSeparatorMessage(message)) {\n    return null;\n  }\n\n  if (MessageDeleted && isDeleted) {\n    return <MessageDeleted message={message} />;\n  }\n\n  if (isMessageBlocked(message)) {\n    return <MessageBlocked />;\n  }\n\n  const poll = message.poll_id && client.polls.fromState(message.poll_id);\n\n  const memberCount = Object.keys(channel?.state?.members ?? {}).length;\n  const hasAttachment = !isDeleted && messageHasAttachments(message);\n  const hasSingleAttachment = !isDeleted && messageHasSingleAttachment(message);\n  const hasGiphyAttachment = !isDeleted && messageHasGiphyAttachment(message);\n  const hasReactions = !isDeleted && messageHasReactions(message);\n  const hasQuotedMessage = !isDeleted && messageHasQuotedMessage(message);\n  const textHasEmojisOnly = !isDeleted && messageTextHasEmojisOnly(message);\n\n  const allowRetry = isMessageErrorRetryable(message);\n  const isBounced = isMessageBounced(message);\n  const isEdited = isMessageEdited(message) && !isAIGenerated;\n\n  const showMetadata = !groupedByUser || endOfGroup;\n  const showReplyCountButton = !threadInstance && !!message.reply_count;\n\n  const rootClassName = clsx(\n    'str-chat__message',\n    `str-chat__message--${message.type}`,\n    `str-chat__message--${message.status}`,\n    {\n      'str-chat__message--has-attachment': hasAttachment,\n      'str-chat__message--has-giphy-attachment': hasGiphyAttachment,\n      'str-chat__message--has-no-text': !message.text,\n      'str-chat__message--has-quoted-message': hasQuotedMessage,\n      'str-chat__message--has-single-attachment': hasSingleAttachment,\n      'str-chat__message--has-text': !!message.text,\n      'str-chat__message--highlighted': highlighted,\n      'str-chat__message--is-emoji-only': textHasEmojisOnly,\n      [`str-chat__message--is-emoji-only-count-${countEmojis(message.text)}`]:\n        textHasEmojisOnly,\n      'str-chat__message--me': isMyMessage(),\n      'str-chat__message--other': !isMyMessage(),\n      'str-chat__message--pinned': message.pinned,\n      'str-chat__message--with-avatar': (() => {\n        if (!message.user) return false;\n        if (showAvatar === 'incoming') return !isMyMessage();\n        if (showAvatar === 'outgoing') return isMyMessage();\n        return showAvatar;\n      })(),\n      'str-chat__message--with-reactions': hasReactions,\n      'str-chat__message-send-can-be-retried':\n        message?.status === 'failed' && message?.error?.status !== 403,\n      'str-chat__message-with-thread-link': showReplyCountButton,\n      'str-chat__virtual-message__wrapper--end': endOfGroup,\n      'str-chat__virtual-message__wrapper--first': firstOfGroup,\n      'str-chat__virtual-message__wrapper--group': groupedByUser,\n    },\n  );\n\n  let handleClick: (() => void) | undefined;\n\n  if (isBounced) {\n    handleClick = () => setIsBounceDialogOpen(true);\n  }\n\n  const isMessageInnerInteractive = !!handleClick;\n  const messageInnerAriaLabel = isMessageInnerInteractive\n    ? t('message.ui.reviewBouncedMessage.ariaLabel', 'Review bounced message')\n    : undefined;\n\n  const handleMessageInnerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!handleClick || (event.key !== 'Enter' && event.key !== ' ')) return;\n\n    event.preventDefault();\n    handleClick();\n  };\n\n  return (\n    <>\n      {isBounceDialogOpen && (\n        <MessageBounceModal\n          MessageBouncePrompt={MessageBouncePrompt}\n          onClose={() => setIsBounceDialogOpen(false)}\n          open={isBounceDialogOpen}\n        />\n      )}\n      <div className={rootClassName} key={message.id}>\n        {message.pinned && <PinIndicator message={message} />}\n        {message.show_in_channel && <MessageAlsoSentInChannelIndicator />}\n        {!!reminder && <ReminderNotification reminder={reminder} />}\n        <MessageTranslationIndicator message={message} />\n        {message.user && (\n          <Avatar\n            {...extractDisplayInfo({ user: message.user ?? undefined })}\n            className='str-chat__avatar--with-border'\n            onClick={onUserClick}\n            onMouseOver={onUserHover}\n            size='md'\n          />\n        )}\n        <div\n          aria-label={messageInnerAriaLabel}\n          className={clsx('str-chat__message-inner', {\n            'str-chat__message-inner--error': allowRetry || isBounced,\n          })}\n          data-testid='message-inner'\n          onClick={handleClick}\n          onKeyDown={isMessageInnerInteractive ? handleMessageInnerKeyDown : undefined}\n          role={isMessageInnerInteractive ? 'button' : undefined}\n          tabIndex={isMessageInnerInteractive ? 0 : undefined}\n        >\n          {!isDeleted && <MessageActions />}\n          {showReplyCountButton && (\n            <MessageRepliesCountButton\n              reply_count={message.reply_count}\n              thread_participants={message.thread_participants}\n            />\n          )}\n          {isDeleted ? (\n            <MessageDeletedBubble />\n          ) : (\n            <>\n              <MessageBubble>\n                {poll && <Poll poll={poll} />}\n                {message.quoted_message && <QuotedMessage />}\n                {finalAttachments?.length ? (\n                  <Attachment\n                    actionHandler={handleAction}\n                    attachments={finalAttachments}\n                  />\n                ) : null}\n                {isAIGenerated ? (\n                  <StreamedMessageText message={message} renderText={renderText} />\n                ) : (\n                  <MessageText message={message} renderText={renderText} />\n                )}\n              </MessageBubble>\n              <div className='str-chat__message-reactions-host'>\n                {hasReactions && <MessageReactions reverse />}\n              </div>\n              <div className='str-chat__message-error-indicator'>\n                <ErrorBadge />\n              </div>\n            </>\n          )}\n        </div>\n        {showMetadata && (\n          <div className='str-chat__message-metadata'>\n            <MessageStatus />\n            {!isMyMessage() && !!message.user && memberCount > 2 && (\n              <span className='str-chat__message-metadata__name'>\n                {message.user.name || message.user.id}\n              </span>\n            )}\n            <MessageTimestamp customClass='str-chat__message-metadata__timestamp' />\n            {!isDeleted && isEdited && <MessageEditedIndicator />}\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nconst MemoizedMessageUI = React.memo(\n  MessageUIWithContext,\n  areMessageUIPropsEqual,\n) as typeof MessageUIWithContext;\n\n/**\n * The default UI component that renders a message and receives functionality and logic from the MessageContext.\n */\nexport const MessageUI = (props: MessageUIComponentProps) => {\n  const messageContext = useMessageContext();\n\n  return <MemoizedMessageUI {...messageContext} {...props} />;\n};\n"],"mappings":"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"}

package/dist/es/components/Message/PinIndicator.mjs

@@ -0,0 +1,34 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Message/PinIndicator.tsx
+/**
+* Default pinned message indicator. Renders "Pinned by [name]" with pin icon above the message bubble.
+* Name is taken from message.pinned_by (who pinned).
+*/
+var PinIndicator = ({ message }) => {
+	const { IconPin } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { client } = useChatContext();
+	if (!message) return null;
+	const isOwnPin = !!message.pinned_by?.id && message.pinned_by.id === client.user?.id;
+	const name = message.pinned_by?.name ?? message.pinned_by?.id ?? "";
+	const label = isOwnPin ? t("message.pinIndicator.pinned.label", "Pinned by You") : name ? t("message.pinIndicator.pinned.withName.label", "Pinned by {{ name }}", { name }) : t("common.messagePinned.label", "Message pinned");
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__message-pin-indicator",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__message-pin-indicator__content",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "str-chat__message-pin-indicator__icon",
+				children: /* @__PURE__ */ jsx(IconPin, {})
+			}), /* @__PURE__ */ jsx("span", { children: label })]
+		})
+	});
+};
+//#endregion
+export { PinIndicator };
+
+//# sourceMappingURL=PinIndicator.mjs.map

package/dist/es/components/Message/PinIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinIndicator.mjs","names":[],"sources":["../../../../src/components/Message/PinIndicator.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport type { LocalMessage } from 'stream-chat';\n\nexport type PinIndicatorProps = {\n  message?: LocalMessage;\n};\n\n/**\n * Default pinned message indicator. Renders \"Pinned by [name]\" with pin icon above the message bubble.\n * Name is taken from message.pinned_by (who pinned).\n */\nexport const PinIndicator = ({ message }: PinIndicatorProps) => {\n  const { IconPin } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { client } = useChatContext();\n\n  if (!message) return null;\n\n  const isOwnPin = !!message.pinned_by?.id && message.pinned_by.id === client.user?.id;\n  const name = message.pinned_by?.name ?? message.pinned_by?.id ?? '';\n\n  const label = isOwnPin\n    ? t('message.pinIndicator.pinned.label', 'Pinned by You')\n    : name\n      ? t('message.pinIndicator.pinned.withName.label', 'Pinned by {{ name }}', { name })\n      : t('common.messagePinned.label', 'Message pinned');\n\n  return (\n    <div className='str-chat__message-pin-indicator'>\n      <div className='str-chat__message-pin-indicator__content'>\n        <span aria-hidden className='str-chat__message-pin-indicator__icon'>\n          <IconPin />\n        </span>\n        <span>{label}</span>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAiBA,IAAa,gBAAgB,EAAE,cAAiC;CAC9D,MAAM,EAAE,YAAY,yBAAyB;CAC7C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAW,eAAe;CAElC,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,WAAW,CAAC,CAAC,QAAQ,WAAW,MAAM,QAAQ,UAAU,OAAO,OAAO,MAAM;CAClF,MAAM,OAAO,QAAQ,WAAW,QAAQ,QAAQ,WAAW,MAAM;CAEjE,MAAM,QAAQ,WACV,EAAE,qCAAqC,eAAe,IACtD,OACE,EAAE,8CAA8C,wBAAwB,EAAE,KAAK,CAAC,IAChF,EAAE,8BAA8B,gBAAgB;CAEtD,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,eAAA;IAAY,WAAU;cAC1B,oBAAC,SAAD,CAAU,CAAA;GACN,CAAA,GACN,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,CAChB;;CACF,CAAA;AAET"}

package/dist/es/components/Message/QuotedMessage.mjs

@@ -0,0 +1,26 @@
+import { useMessageContext } from "../../context/MessageContext.mjs";
+import { useMessagePaginator } from "../../hooks/useMessagePaginator.mjs";
+import { QuotedMessagePreviewUI } from "../MessageComposer/QuotedMessagePreview.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Message/QuotedMessage.tsx
+var QuotedMessage = ({ renderText: propsRenderText }) => {
+	const { message, renderText: contextRenderText } = useMessageContext();
+	const messagePaginator = useMessagePaginator();
+	const renderText = propsRenderText ?? contextRenderText;
+	const { quoted_message } = message;
+	return quoted_message ? /* @__PURE__ */ jsx(QuotedMessagePreviewUI, {
+		onClick: (e) => {
+			if (!quoted_message) return;
+			e.stopPropagation();
+			e.preventDefault();
+			messagePaginator.jumpToMessage(quoted_message.id);
+		},
+		quotedMessage: quoted_message,
+		renderText
+	}) : null;
+};
+//#endregion
+export { QuotedMessage };
+
+//# sourceMappingURL=QuotedMessage.mjs.map