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

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

@@ -1 +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 { useComponentContextIcons } from '../../context';\nimport { useMessageContext } from '../../context/MessageContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\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 {\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('MessageStatus');\n  const {\n    deliveredTo,\n    isMyMessage,\n    lastOwnMessage,\n    message,\n    readBy,\n    returnAllReadData,\n    threadList,\n  } = useMessageContext('MessageStatus');\n  const { t } = useTranslationContext('MessageStatus');\n  const { IconCheckmark1Small, IconChecks, IconClock } = useComponentContextIcons();\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 && !threadList);\n  const delivered =\n    !failed && !!(deliveredTo?.length && !deliveredOnlyToMe && !read && !threadList);\n  const sent =\n    (returnAllReadData || lastOwnMessage?.id === message.id) &&\n    message.status === 'received' &&\n    !delivered &&\n    !read &&\n    !threadList;\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('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('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('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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"}
+{"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

@@ -1,8 +1,8 @@
 import { useMessageContext } from "../../context/MessageContext.mjs";
-import { getTranslatedMessageText } from "../../context/MessageTranslationViewContext.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";
@@ -12,9 +12,9 @@ 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("MessageText");
+	const { message: contextMessage, onMentionsClickMessage, onMentionsHoverMessage, renderText: contextRenderText, translationView = "translated", unsafeHTML } = useMessageContext();
 	const renderText$1 = propsRenderText ?? contextRenderText ?? renderText;
-	const { t, userLanguage } = useTranslationContext("MessageText");
+	const { t, userLanguage } = useTranslationContext();
 	const message = propMessage || contextMessage;
 	const hasAttachment = messageHasAttachments(message);
 	const messageContextId = useStableId();
@@ -46,7 +46,7 @@ var UnMemoizedMessageTextComponent = (props) => {
 	const innerClass = customInnerClass;
 	const isMentionsInteractionEnabled = Boolean(renderTextMentionEntities.length) && typeof onMentionsClickMessage === "function";
 	const senderName = message.user?.name;
-	const messageContext = senderName ? t("aria/Message from {{ user }},", { user: senderName }) : t("aria/Message,");
+	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;

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

@@ -1 +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('MessageText');\n\n  const renderText = propsRenderText ?? contextRenderText ?? defaultRenderText;\n\n  const { t, userLanguage } = useTranslationContext('MessageText');\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('aria/Message from {{ user }},', { user: senderName })\n    : t('aria/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,aAAa;CAEnC,MAAM,eAAa,mBAAmB,qBAAqB;CAE3D,MAAM,EAAE,GAAG,iBAAiB,sBAAsB,aAAa;CAC/D,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,iCAAiC,EAAE,MAAM,WAAW,CAAC,IACvD,EAAE,eAAe;CAGrB,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"}
+{"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

@@ -2,14 +2,15 @@ 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("MessageTimestamp");
-	const { Timestamp: Timestamp$1 = Timestamp } = useComponentContext("MessageTimestamp");
+	const { message: contextMessage } = useMessageContext();
+	const { Timestamp: Timestamp$1 = Timestamp } = useComponentContext();
 	return /* @__PURE__ */ jsx(Timestamp$1, {
-		timestamp: (propMessage || contextMessage).created_at,
+		timestamp: convertTimestampToDate((propMessage || contextMessage).created_at),
 		...timestampProps
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MessageTimestamp.mjs","names":[],"sources":["../../../../src/components/Message/MessageTimestamp.tsx"],"sourcesContent":["import 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('MessageTimestamp');\n  const { Timestamp = DefaultTimestamp } = useComponentContext('MessageTimestamp');\n  const message = propMessage || contextMessage;\n  return <Timestamp timestamp={message.created_at} {...timestampProps} />;\n};\n\nexport const MessageTimestamp = React.memo(\n  UnMemoizedMessageTimestamp,\n) as typeof UnMemoizedMessageTimestamp;\n"],"mappings":";;;;;;AAeA,IAAM,8BAA8B,UAAiC;CACnE,MAAM,EAAE,SAAS,aAAa,GAAG,mBAAmB;CACpD,MAAM,EAAE,SAAS,mBAAmB,kBAAkB,kBAAkB;CACxE,MAAM,EAAE,WAAA,cAAY,cAAqB,oBAAoB,kBAAkB;CAE/E,OAAO,oBAAC,aAAD;EAAW,YADF,eAAe,eAAA,CACM;EAAY,GAAI;CAAiB,CAAA;AACxE;AAEA,IAAa,mBAAmB,MAAM,KACpC,0BACF"}
+{"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

@@ -1,15 +1,15 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useMessageContext } from "../../context/MessageContext.mjs";
-import { getTranslatedMessageText } from "../../context/MessageTranslationViewContext.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("MessageTranslationIndicator");
+	const { message: contextMessage, setTranslationView, translationView } = useMessageContext();
 	const message = propMessage ?? contextMessage;
 	const translatedTextForUser = useMemo(() => getTranslatedMessageText({
 		language: userLanguage,
@@ -23,9 +23,9 @@ var MessageTranslationIndicator = ({ message: propMessage }) => {
 	const sourceLanguageName = useMemo(() => {
 		const sourceLanguageCode = message?.i18n?.language;
 		if (!sourceLanguageCode) return "";
-		const languageKey = "language/" + sourceLanguageCode;
+		const languageKey = `language.${sourceLanguageCode}`;
 		const translatedName = t(languageKey);
-		return translatedName && translatedName !== languageKey ? translatedName : sourceLanguageCode;
+		return translatedName === languageKey ? sourceLanguageCode : translatedName;
 	}, [message?.i18n?.language, t]);
 	if (!message?.i18n || !setTranslationView) return null;
 	if (!hasTranslationForUserLanguage) return null;
@@ -35,14 +35,14 @@ var MessageTranslationIndicator = ({ message: propMessage }) => {
 			/* @__PURE__ */ jsx(IconTranslate, {}),
 			/* @__PURE__ */ jsx("span", {
 				className: "str-chat__message-translation-indicator__sign",
-				children: viewingOriginal ? t("Original") : sourceLanguageName ? t("Translated from {{ language }}", { language: sourceLanguageName }) : t("Translated")
+				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("View translation") : t("View original")
+				children: viewingOriginal ? t("message.translationIndicator.viewTranslation.text", "View translation") : t("message.translationIndicator.viewOriginal.text", "View original")
 			})
 		]
 	});

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

@@ -1 +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\n  const { t, userLanguage } = useTranslationContext();\n  const {\n    message: contextMessage,\n    setTranslationView,\n    translationView,\n  } = useMessageContext('MessageTranslationIndicator');\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    const languageKey = 'language/' + sourceLanguageCode;\n    const translatedName = t(languageKey);\n    return translatedName && translatedName !== languageKey\n      ? translatedName\n      : sourceLanguageCode;\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('Original')\n          : sourceLanguageName\n            ? t('Translated from {{ language }}', { language: sourceLanguageName })\n            : t('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 ? t('View translation') : t('View original')}\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAcA,IAAa,+BAA+B,EAC1C,SAAS,kBACsB;CAC/B,MAAM,EAAE,kBAAkB,yBAAyB;CAEnD,MAAM,EAAE,GAAG,iBAAiB,sBAAsB;CAClD,MAAM,EACJ,SAAS,gBACT,oBACA,oBACE,kBAAkB,6BAA6B;CACnD,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;EAChC,MAAM,cAAc,cAAc;EAClC,MAAM,iBAAiB,EAAE,WAAW;EACpC,OAAO,kBAAkB,mBAAmB,cACxC,iBACA;CACN,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,UAAU,IACZ,qBACE,EAAE,kCAAkC,EAAE,UAAU,mBAAmB,CAAC,IACpE,EAAE,YAAY;GAChB,CAAA;GACN,oBAAC,QAAD,EAAA,UAAM,MAAS,CAAA;GACf,oBAAC,QAAD;IACE,WAAU;IACV,SAAS;IACT,MAAK;cAEJ,kBAAkB,EAAE,kBAAkB,IAAI,EAAE,eAAe;GACtD,CAAA;EACL;;AAET"}
+{"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

@@ -1,45 +1,47 @@
-import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
 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 { areMessageUIPropsEqual, countEmojis, isMessageBlocked, isMessageBounced, isMessageDeleted, isMessageEdited, isMessageErrorRetryable, messageHasAttachments, messageHasGiphyAttachment, messageHasQuotedMessage, messageHasReactions, messageHasSingleAttachment, messageTextHasEmojisOnly } from "./utils.mjs";
-import { useMessageReminder } from "./hooks/useMessageReminder.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 { MessageAlsoSentInChannelIndicator } from "./MessageAlsoSentInChannelIndicator.mjs";
-import { extractDisplayInfo } from "../Avatar/utils.mjs";
+import { MessageReactions } from "../Reactions/MessageReactions.mjs";
+import { MessageActions } from "../MessageActions/MessageActions.mjs";
 import { MessageRepliesCountButton } from "./MessageRepliesCountButton.mjs";
-import { PinIndicator } from "./PinIndicator.mjs";
 import { MessageStatus } from "./MessageStatus.mjs";
 import { MessageText } from "./MessageText.mjs";
-import { MessageTimestamp } from "./MessageTimestamp.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 { QuotedMessage } from "./QuotedMessage.mjs";
-import { ReminderNotification } from "./ReminderNotification.mjs";
-import { StreamedMessageText } from "./StreamedMessageText.mjs";
 import { Poll } from "../Poll/Poll.mjs";
-import { MessageReactions } from "../Reactions/MessageReactions.mjs";
-import { MessageActions } from "../MessageActions/MessageActions.mjs";
-import { isDateSeparatorMessage } from "../MessageList/utils.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, handleOpenThread, highlighted, isMessageAIGenerated, isMyMessage, message, onUserClick, onUserHover, renderText, showAvatar = "incoming", threadList }) => {
-	const { channel } = useChannelStateContext();
+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("MessageUI");
+	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("MessageUI");
+	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]);
@@ -58,7 +60,7 @@ var MessageUIWithContext = ({ endOfGroup, firstOfGroup, groupedByUser, handleAct
 	const isBounced = isMessageBounced(message);
 	const isEdited = isMessageEdited(message) && !isAIGenerated;
 	const showMetadata = !groupedByUser || endOfGroup;
-	const showReplyCountButton = !threadList && !!message.reply_count;
+	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,
@@ -88,7 +90,7 @@ var MessageUIWithContext = ({ endOfGroup, firstOfGroup, groupedByUser, handleAct
 	let handleClick;
 	if (isBounced) handleClick = () => setIsBounceDialogOpen(true);
 	const isMessageInnerInteractive = !!handleClick;
-	const messageInnerAriaLabel = isMessageInnerInteractive ? t("aria/Review bounced message") : void 0;
+	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();
@@ -123,7 +125,6 @@ var MessageUIWithContext = ({ endOfGroup, firstOfGroup, groupedByUser, handleAct
 				children: [
 					!isDeleted && /* @__PURE__ */ jsx(MessageActions$1, {}),
 					showReplyCountButton && /* @__PURE__ */ jsx(MessageRepliesCountButton$1, {
-						onClick: handleOpenThread,
 						reply_count: message.reply_count,
 						thread_participants: message.thread_participants
 					}),
@@ -175,7 +176,7 @@ var MemoizedMessageUI = React.memo(MessageUIWithContext, areMessageUIPropsEqual)
 */
 var MessageUI = (props) => {
 	return /* @__PURE__ */ jsx(MemoizedMessageUI, {
-		...useMessageContext("MessageUI"),
+		...useMessageContext(),
 		...props
 	});
 };

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

@@ -1 +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 {\n  useChannelStateContext,\n  useChatContext,\n  useTranslationContext,\n} from '../../context';\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  handleOpenThread,\n  highlighted,\n  isMessageAIGenerated,\n  isMyMessage,\n  message,\n  onUserClick,\n  onUserHover,\n  renderText,\n  showAvatar = 'incoming',\n  threadList,\n}: MessageUIWithContextProps) => {\n  const { channel } = useChannelStateContext();\n  const { client } = useChatContext();\n  const { t } = useTranslationContext('MessageUI');\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('MessageUI');\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 = !threadList && !!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('aria/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              onClick={handleOpenThread}\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('MessageUI');\n\n  return <MemoizedMessageUI {...messageContext} {...props} />;\n};\n"],"mappings":"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"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,IAAM,wBAAwB,EAC5B,YACA,cACA,eACA,cACA,aACA,sBACA,aACA,SACA,aACA,aACA,YACA,aAAa,iBACkB;CAC/B,MAAM,UAAU,WAAW;CAC3B,MAAM,iBAAiB,iBAAiB;CACxC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,KAAK;CAClE,MAAM,WAAW,mBAAmB,QAAQ,EAAE;CAE9C,MAAM,EACJ,YAAA,eAAa,YACb,QAAA,WAAS,QACT,oBAAA,uBAAqB,oBACrB,gBAAA,mBAAiB,gBACjB,mCAAA,sCAAoC,mCACpC,gBAAA,mBAAiB,gBACjB,qBAAA,wBAAsB,qBACtB,gBACA,sBAAA,yBAAuB,sBACvB,wBAAA,2BAAyB,wBACzB,kBAAA,qBAAmB,kBACnB,2BAAA,8BAA4B,2BAC5B,eAAA,kBAAgB,eAChB,kBAAA,qBAAmB,kBACnB,6BAAA,gCAA8B,6BAC9B,cAAA,iBAAe,cACf,eAAA,kBAAgB,eAChB,sBAAA,yBAAuB,sBACvB,qBAAA,wBAAsB,wBACpB,oBAAoB;CAExB,MAAM,gBAAgB,cACd,uBAAuB,OAAO,GACpC,CAAC,sBAAsB,OAAO,CAChC;CACA,MAAM,YAAY,iBAAiB,OAAO;CAE1C,MAAM,mBAAmB,cAErB,CAAC,QAAQ,mBAAmB,CAAC,QAAQ,cACjC,CAAC,IACD,CAAC,QAAQ,kBACP,QAAQ,cACR,CAAC,QAAQ,iBAAiB,GAAI,QAAQ,eAAe,CAAC,CAAE,GAChE,CAAC,OAAO,CACV;CAEA,IAAI,uBAAuB,OAAO,GAChC,OAAO;CAGT,IAAI,kBAAkB,WACpB,OAAO,oBAAC,gBAAD,EAAyB,QAAU,CAAA;CAG5C,IAAI,iBAAiB,OAAO,GAC1B,OAAO,oBAAC,kBAAD,CAAiB,CAAA;CAG1B,MAAM,OAAO,QAAQ,WAAW,OAAO,MAAM,UAAU,QAAQ,OAAO;CAEtE,MAAM,cAAc,OAAO,KAAK,SAAS,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC;CAC/D,MAAM,gBAAgB,CAAC,aAAa,sBAAsB,OAAO;CACjE,MAAM,sBAAsB,CAAC,aAAa,2BAA2B,OAAO;CAC5E,MAAM,qBAAqB,CAAC,aAAa,0BAA0B,OAAO;CAC1E,MAAM,eAAe,CAAC,aAAa,oBAAoB,OAAO;CAC9D,MAAM,mBAAmB,CAAC,aAAa,wBAAwB,OAAO;CACtE,MAAM,oBAAoB,CAAC,aAAa,yBAAyB,OAAO;CAExE,MAAM,aAAa,wBAAwB,OAAO;CAClD,MAAM,YAAY,iBAAiB,OAAO;CAC1C,MAAM,WAAW,gBAAgB,OAAO,KAAK,CAAC;CAE9C,MAAM,eAAe,CAAC,iBAAiB;CACvC,MAAM,uBAAuB,CAAC,kBAAkB,CAAC,CAAC,QAAQ;CAE1D,MAAM,gBAAgB,KACpB,qBACA,sBAAsB,QAAQ,QAC9B,sBAAsB,QAAQ,UAC9B;EACE,qCAAqC;EACrC,2CAA2C;EAC3C,kCAAkC,CAAC,QAAQ;EAC3C,yCAAyC;EACzC,4CAA4C;EAC5C,+BAA+B,CAAC,CAAC,QAAQ;EACzC,kCAAkC;EAClC,oCAAoC;GACnC,0CAA0C,YAAY,QAAQ,IAAI,MACjE;EACF,yBAAyB,YAAY;EACrC,4BAA4B,CAAC,YAAY;EACzC,6BAA6B,QAAQ;EACrC,yCAAyC;GACvC,IAAI,CAAC,QAAQ,MAAM,OAAO;GAC1B,IAAI,eAAe,YAAY,OAAO,CAAC,YAAY;GACnD,IAAI,eAAe,YAAY,OAAO,YAAY;GAClD,OAAO;EACT,EAAA,CAAG;EACH,qCAAqC;EACrC,yCACE,SAAS,WAAW,YAAY,SAAS,OAAO,WAAW;EAC7D,sCAAsC;EACtC,2CAA2C;EAC3C,6CAA6C;EAC7C,6CAA6C;CAC/C,CACF;CAEA,IAAI;CAEJ,IAAI,WACF,oBAAoB,sBAAsB,IAAI;CAGhD,MAAM,4BAA4B,CAAC,CAAC;CACpC,MAAM,wBAAwB,4BAC1B,EAAE,6CAA6C,wBAAwB,IACvE,KAAA;CAEJ,MAAM,6BAA6B,UAA+C;EAChF,IAAI,CAAC,eAAgB,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAM;EAElE,MAAM,eAAe;EACrB,YAAY;CACd;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,sBACC,oBAAC,oBAAD;EACuB,qBAAA;EACrB,eAAe,sBAAsB,KAAK;EAC1C,MAAM;CACP,CAAA,GAEH,qBAAC,OAAD;EAAK,WAAW;YAAhB;GACG,QAAQ,UAAU,oBAAC,gBAAD,EAAuB,QAAU,CAAA;GACnD,QAAQ,mBAAmB,oBAAC,qCAAD,CAAoC,CAAA;GAC/D,CAAC,CAAC,YAAY,oBAAC,wBAAD,EAAgC,SAAW,CAAA;GAC1D,oBAAC,+BAAD,EAAsC,QAAU,CAAA;GAC/C,QAAQ,QACP,oBAAC,UAAD;IACE,GAAI,qBAAmB,EAAE,MAAM,QAAQ,QAAQ,KAAA,EAAU,CAAC;IAC1D,WAAU;IACV,SAAS;IACT,aAAa;IACb,MAAK;GACN,CAAA;GAEH,qBAAC,OAAD;IACE,cAAY;IACZ,WAAW,KAAK,2BAA2B,EACzC,kCAAkC,cAAc,UAClD,CAAC;IACD,eAAY;IACZ,SAAS;IACT,WAAW,4BAA4B,4BAA4B,KAAA;IACnE,MAAM,4BAA4B,WAAW,KAAA;IAC7C,UAAU,4BAA4B,IAAI,KAAA;cAT5C;KAWG,CAAC,aAAa,oBAAC,kBAAD,CAAiB,CAAA;KAC/B,wBACC,oBAAC,6BAAD;MACE,aAAa,QAAQ;MACrB,qBAAqB,QAAQ;KAC9B,CAAA;KAEF,YACC,oBAAC,wBAAD,CAAuB,CAAA,IAEvB,qBAAA,YAAA,EAAA,UAAA;MACE,qBAAC,eAAD,EAAA,UAAA;OACG,QAAQ,oBAAC,MAAD,EAAY,KAAO,CAAA;OAC3B,QAAQ,kBAAkB,oBAAC,iBAAD,CAAgB,CAAA;OAC1C,kBAAkB,SACjB,oBAAC,cAAD;QACE,eAAe;QACf,aAAa;OACd,CAAA,IACC;OACH,gBACC,oBAAC,uBAAD;QAA8B;QAAqB;OAAa,CAAA,IAEhE,oBAAC,aAAD;QAAsB;QAAqB;OAAa,CAAA;MAE7C,EAAA,CAAA;MACf,oBAAC,OAAD;OAAK,WAAU;iBACZ,gBAAgB,oBAAC,oBAAD,EAAkB,SAAA,KAAS,CAAA;MACzC,CAAA;MACL,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,YAAD,CAAa,CAAA;MACV,CAAA;KACL,EAAA,CAAA;IAED;;GACJ,gBACC,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,iBAAD,CAAgB,CAAA;KACf,CAAC,YAAY,KAAK,CAAC,CAAC,QAAQ,QAAQ,cAAc,KACjD,oBAAC,QAAD;MAAM,WAAU;gBACb,QAAQ,KAAK,QAAQ,QAAQ,KAAK;KAC/B,CAAA;KAER,oBAAC,oBAAD,EAAkB,aAAY,wCAAyC,CAAA;KACtE,CAAC,aAAa,YAAY,oBAAC,0BAAD,CAAyB,CAAA;IACjD;;EAEJ;IAxE+B,QAAQ,EAwEvC,CACL,EAAA,CAAA;AAEN;AAEA,IAAM,oBAAoB,MAAM,KAC9B,sBACA,sBACF;;;;AAKA,IAAa,aAAa,UAAmC;CAG3D,OAAO,oBAAC,mBAAD;EAAmB,GAFH,kBAEO;EAAgB,GAAI;CAAQ,CAAA;AAC5D"}

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

@@ -1,6 +1,6 @@
 import { useChatContext } from "../../context/ChatContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.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
@@ -9,13 +9,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Name is taken from message.pinned_by (who pinned).
 */
 var PinIndicator = ({ message }) => {
+	const { IconPin } = useComponentContextIcons();
 	const { t } = useTranslationContext();
 	const { client } = useChatContext();
-	const { IconPin } = useComponentContextIcons();
 	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("Pinned by You") : name ? t("Pinned by {{ name }}", { name }) : t("Message pinned");
+	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", {

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

@@ -1 +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 { t } = useTranslationContext();\n  const { client } = useChatContext();\n  const { IconPin } = useComponentContextIcons();\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('Pinned by You')\n    : name\n      ? t('Pinned by {{ name }}', { name })\n      : t('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,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,YAAY,yBAAyB;CAE7C,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,eAAe,IACjB,OACE,EAAE,wBAAwB,EAAE,KAAK,CAAC,IAClC,EAAE,gBAAgB;CAExB,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"}
+{"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

@@ -1,12 +1,12 @@
-import { useChannelActionContext } from "../../context/ChannelActionContext.mjs";
 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("QuotedMessage");
-	const { jumpToMessage } = useChannelActionContext("QuotedMessage");
+	const { message, renderText: contextRenderText } = useMessageContext();
+	const messagePaginator = useMessagePaginator();
 	const renderText = propsRenderText ?? contextRenderText;
 	const { quoted_message } = message;
 	return quoted_message ? /* @__PURE__ */ jsx(QuotedMessagePreviewUI, {
@@ -14,7 +14,7 @@ var QuotedMessage = ({ renderText: propsRenderText }) => {
 			if (!quoted_message) return;
 			e.stopPropagation();
 			e.preventDefault();
-			jumpToMessage(quoted_message.id);
+			messagePaginator.jumpToMessage(quoted_message.id);
 		},
 		quotedMessage: quoted_message,
 		renderText

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

@@ -1 +1 @@
-{"version":3,"file":"QuotedMessage.mjs","names":[],"sources":["../../../../src/components/Message/QuotedMessage.tsx"],"sourcesContent":["import React from 'react';\nimport type { MessageContextValue } from '../../context/MessageContext';\nimport { useMessageContext } from '../../context/MessageContext';\nimport { useChannelActionContext } from '../../context/ChannelActionContext';\nimport { QuotedMessagePreviewUI } from '../MessageComposer/QuotedMessagePreview';\n\nexport type QuotedMessageProps = Pick<MessageContextValue, 'renderText'>;\n\nexport const QuotedMessage = ({ renderText: propsRenderText }: QuotedMessageProps) => {\n  const { message, renderText: contextRenderText } = useMessageContext('QuotedMessage');\n  const { jumpToMessage } = useChannelActionContext('QuotedMessage');\n\n  const renderText = propsRenderText ?? contextRenderText;\n\n  const { quoted_message } = message;\n\n  return quoted_message ? (\n    <QuotedMessagePreviewUI\n      onClick={(e) => {\n        if (!quoted_message) return;\n        e.stopPropagation();\n        e.preventDefault();\n        jumpToMessage(quoted_message.id);\n      }}\n      quotedMessage={quoted_message}\n      renderText={renderText}\n    />\n  ) : null;\n};\n"],"mappings":";;;;;;AAQA,IAAa,iBAAiB,EAAE,YAAY,sBAA0C;CACpF,MAAM,EAAE,SAAS,YAAY,sBAAsB,kBAAkB,eAAe;CACpF,MAAM,EAAE,kBAAkB,wBAAwB,eAAe;CAEjE,MAAM,aAAa,mBAAmB;CAEtC,MAAM,EAAE,mBAAmB;CAE3B,OAAO,iBACL,oBAAC,wBAAD;EACE,UAAU,MAAM;GACd,IAAI,CAAC,gBAAgB;GACrB,EAAE,gBAAgB;GAClB,EAAE,eAAe;GACjB,cAAc,eAAe,EAAE;EACjC;EACA,eAAe;EACH;CACb,CAAA,IACC;AACN"}
+{"version":3,"file":"QuotedMessage.mjs","names":[],"sources":["../../../../src/components/Message/QuotedMessage.tsx"],"sourcesContent":["import React from 'react';\nimport type { MessageContextValue } from '../../context/MessageContext';\nimport { useMessageContext } from '../../context/MessageContext';\nimport { QuotedMessagePreviewUI } from '../MessageComposer/QuotedMessagePreview';\nimport { useMessagePaginator } from '../../hooks';\n\nexport type QuotedMessageProps = Pick<MessageContextValue, 'renderText'>;\n\nexport const QuotedMessage = ({ renderText: propsRenderText }: QuotedMessageProps) => {\n  const { message, renderText: contextRenderText } = useMessageContext();\n  const messagePaginator = useMessagePaginator();\n\n  const renderText = propsRenderText ?? contextRenderText;\n\n  const { quoted_message } = message;\n\n  return quoted_message ? (\n    <QuotedMessagePreviewUI\n      onClick={(e) => {\n        if (!quoted_message) return;\n        e.stopPropagation();\n        e.preventDefault();\n        messagePaginator.jumpToMessage(quoted_message.id);\n      }}\n      quotedMessage={quoted_message}\n      renderText={renderText}\n    />\n  ) : null;\n};\n"],"mappings":";;;;;;AAQA,IAAa,iBAAiB,EAAE,YAAY,sBAA0C;CACpF,MAAM,EAAE,SAAS,YAAY,sBAAsB,kBAAkB;CACrE,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,aAAa,mBAAmB;CAEtC,MAAM,EAAE,mBAAmB;CAE3B,OAAO,iBACL,oBAAC,wBAAD;EACE,UAAU,MAAM;GACd,IAAI,CAAC,gBAAgB;GACrB,EAAE,gBAAgB;GAClB,EAAE,eAAe;GACjB,iBAAiB,cAAc,eAAe,EAAE;EAClD;EACA,eAAe;EACH;CACb,CAAA,IACC;AACN"}

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

@@ -1,7 +1,8 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import "react";
+import { nsToDate, nsToMs } from "stream-chat";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Message/ReminderNotification.tsx
 var reminderStateSelector = (state) => ({ timeLeftMs: state.timeLeftMs });
@@ -10,7 +11,7 @@ function SavedForLaterContent() {
 	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__message-saved-for-later",
-		children: [/* @__PURE__ */ jsx(IconBookmark, {}), /* @__PURE__ */ jsx("span", { children: t("Saved for later") })]
+		children: [/* @__PURE__ */ jsx(IconBookmark, {}), /* @__PURE__ */ jsx("span", { children: t("common.savedLater.text", "Saved for later") })]
 	});
 }
 var THRESHOLD_RELATIVE_MINUTES = 59;
@@ -19,25 +20,25 @@ function RemindMeContent({ reminder }) {
 	const { t } = useTranslationContext();
 	const { timeLeftMs } = useStateStore(reminder?.state, reminderStateSelector) ?? {};
 	const stopRefreshBoundaryMs = reminder?.timer.stopRefreshBoundaryMs;
-	const stopRefreshTimeStamp = reminder?.remindAt && stopRefreshBoundaryMs ? reminder.remindAt.getTime() + stopRefreshBoundaryMs : void 0;
-	const isBehindRefreshBoundary = !!stopRefreshTimeStamp && (/* @__PURE__ */ new Date()).getTime() > stopRefreshTimeStamp;
-	if (timeLeftMs === null || !reminder.remindAt) return null;
+	const stopRefreshTimeStamp = reminder?.remindAt != null && stopRefreshBoundaryMs != null ? nsToMs(reminder.remindAt) + stopRefreshBoundaryMs : void 0;
+	const isBehindRefreshBoundary = stopRefreshTimeStamp != null && (/* @__PURE__ */ new Date()).getTime() > stopRefreshTimeStamp;
+	if (timeLeftMs === null || reminder.remindAt == null) return null;
 	const nowMs = Date.now();
-	const diffMs = reminder.remindAt.getTime() - nowMs;
+	const diffMs = nsToMs(reminder.remindAt) - nowMs;
 	const useAbsoluteFormat = Math.abs(diffMs) / (60 * 1e3) > THRESHOLD_RELATIVE_MINUTES;
 	const renderTime = () => {
 		if (isBehindRefreshBoundary) {
-			if (useAbsoluteFormat) return t("Due since {{ dueSince }}", { dueSince: t("timestamp/ReminderNotification", { timestamp: reminder.remindAt }) });
-			return t("Due since {{ dueSince }}", { dueSince: t("duration/Message reminder", { milliseconds: diffMs }) });
+			if (useAbsoluteFormat) return t("message.reminderNotification.dueSince.label", "Due since {{ dueSince }}", { dueSince: t("timestamp.ReminderNotification", { timestamp: reminder.remindAt != null ? nsToDate(reminder.remindAt) : void 0 }) });
+			return t("message.reminderNotification.dueSince.label", "Due since {{ dueSince }}", { dueSince: t("duration.messageReminder", { milliseconds: diffMs }) });
 		}
-		if (useAbsoluteFormat) return t("timestamp/ReminderNotification", { timestamp: reminder.remindAt });
-		return t("Due {{ timeLeft }}", { timeLeft: t("duration/Message reminder", { milliseconds: timeLeftMs }) });
+		if (useAbsoluteFormat) return t("timestamp.ReminderNotification", { timestamp: reminder.remindAt != null ? nsToDate(reminder.remindAt) : void 0 });
+		return t("message.reminderNotification.due.label", "Due {{ timeLeft }}", { timeLeft: t("duration.messageReminder", { milliseconds: timeLeftMs }) });
 	};
 	return /* @__PURE__ */ jsxs("p", {
 		className: "str-chat__message-reminder",
 		children: [
 			/* @__PURE__ */ jsx(IconBell, {}),
-			/* @__PURE__ */ jsx("span", { children: t("Reminder set") }),
+			/* @__PURE__ */ jsx("span", { children: t("common.reminderSet.text", "Reminder set") }),
 			/* @__PURE__ */ jsx("span", { children: " · " }),
 			/* @__PURE__ */ jsx("span", {
 				className: "str-chat__message-reminder__time-left",
@@ -48,7 +49,7 @@ function RemindMeContent({ reminder }) {
 }
 var ReminderNotification = ({ reminder }) => {
 	if (!reminder) return null;
-	if (!reminder.remindAt) return /* @__PURE__ */ jsx(SavedForLaterContent, {});
+	if (reminder.remindAt == null) return /* @__PURE__ */ jsx(SavedForLaterContent, {});
 	return /* @__PURE__ */ jsx(RemindMeContent, { reminder });
 };
 //#endregion