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

package/dist/es/components/MediaRecorder/observable/Subject.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Subject.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/observable/Subject.ts"],"sourcesContent":["import { Observable } from './Observable';\nimport type { SubscriptionLike } from './Subscription';\nimport { Subscription } from './Subscription';\nimport type { Observer, ObserverOrNext } from './Observer';\nimport { createObserver } from './Observer';\n\nexport class Subject<T> extends Observable<T> implements SubscriptionLike {\n  private _observers: Map<number, Observer<T>> = new Map();\n  private _observerCounter = 0;\n  thrownError: Error | undefined;\n\n  constructor() {\n    super();\n  }\n\n  get observers() {\n    return Array.from(this._observers.values());\n  }\n\n  next(value: T) {\n    if (this.closed) return;\n    const observers = this.observers;\n    for (let i = 0; i < observers.length; i++) {\n      observers[i].next(value);\n    }\n  }\n\n  error(err: Error) {\n    if (this.closed) return;\n    this.thrownError = err;\n    const { observers } = this;\n    for (let i = 0; i < observers.length; i++) {\n      observers[i].error?.(err);\n    }\n    this._observers.clear();\n  }\n\n  complete() {\n    if (this.closed) return;\n    this._closed = true;\n    const { observers } = this;\n    for (let i = 0; i < observers.length; i++) {\n      observers[i].complete?.();\n    }\n    this._observers.clear();\n  }\n\n  subscribe(observerOrNext: ObserverOrNext<T>): Subscription {\n    const observer = createObserver<T>(observerOrNext);\n    if (this.thrownError || this.closed) {\n      const subscription = new Subscription();\n      subscription.closed = true;\n      return subscription;\n    }\n\n    const observerId = this._observerCounter++;\n    this._observers.set(observerId, observer);\n    return new Subscription(() => {\n      this._observers.delete(observerId);\n    });\n  }\n\n  unsubscribe(): void {\n    this._closed = true;\n    this._observers.clear();\n  }\n}\n"],"mappings":";;;;AAMA,IAAa,UAAb,cAAgC,WAA0C;CAKxE,cAAc;EACZ,MAAM;oCALuC,IAAI,IAAI;0BAC5B;CAK3B;CAEA,IAAI,YAAY;EACd,OAAO,MAAM,KAAK,KAAK,WAAW,OAAO,CAAC;CAC5C;CAEA,KAAK,OAAU;EACb,IAAI,KAAK,QAAQ;EACjB,MAAM,YAAY,KAAK;EACvB,KAAK,IAAI,IAAI,GAAG,IAAI,UAAU,QAAQ,KACpC,UAAU,EAAE,CAAC,KAAK,KAAK;CAE3B;CAEA,MAAM,KAAY;EAChB,IAAI,KAAK,QAAQ;EACjB,KAAK,cAAc;EACnB,MAAM,EAAE,cAAc;EACtB,KAAK,IAAI,IAAI,GAAG,IAAI,UAAU,QAAQ,KACpC,UAAU,EAAE,CAAC,QAAQ,GAAG;EAE1B,KAAK,WAAW,MAAM;CACxB;CAEA,WAAW;EACT,IAAI,KAAK,QAAQ;EACjB,KAAK,UAAU;EACf,MAAM,EAAE,cAAc;EACtB,KAAK,IAAI,IAAI,GAAG,IAAI,UAAU,QAAQ,KACpC,UAAU,EAAE,CAAC,WAAW;EAE1B,KAAK,WAAW,MAAM;CACxB;CAEA,UAAU,gBAAiD;EACzD,MAAM,WAAW,eAAkB,cAAc;EACjD,IAAI,KAAK,eAAe,KAAK,QAAQ;GACnC,MAAM,eAAe,IAAI,aAAa;GACtC,aAAa,SAAS;GACtB,OAAO;EACT;EAEA,MAAM,aAAa,KAAK;EACxB,KAAK,WAAW,IAAI,YAAY,QAAQ;EACxC,OAAO,IAAI,mBAAmB;GAC5B,KAAK,WAAW,OAAO,UAAU;EACnC,CAAC;CACH;CAEA,cAAoB;EAClB,KAAK,UAAU;EACf,KAAK,WAAW,MAAM;CACxB;AACF"}
+{"version":3,"file":"Subject.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/observable/Subject.ts"],"sourcesContent":["import { Observable } from './Observable';\nimport type { SubscriptionLike } from './Subscription';\nimport { Subscription } from './Subscription';\nimport type { Observer, ObserverOrNext } from './Observer';\nimport { createObserver } from './Observer';\n\nexport class Subject<T> extends Observable<T> implements SubscriptionLike {\n  private _observers: Map<number, Observer<T>> = new Map();\n  private _observerCounter = 0;\n  thrownError: Error | undefined;\n\n  constructor() {\n    super();\n  }\n\n  get observers() {\n    return Array.from(this._observers.values());\n  }\n\n  next(value: T) {\n    if (this.closed) return;\n    const observers = this.observers;\n    for (let i = 0; i < observers.length; i++) {\n      observers[i].next(value);\n    }\n  }\n\n  error(err: Error) {\n    if (this.closed) return;\n    this.thrownError = err;\n    const { observers } = this;\n    for (let i = 0; i < observers.length; i++) {\n      observers[i].error?.(err);\n    }\n    this._observers.clear();\n  }\n\n  complete() {\n    if (this.closed) return;\n    this._closed = true;\n    const { observers } = this;\n    for (let i = 0; i < observers.length; i++) {\n      observers[i].complete?.();\n    }\n    this._observers.clear();\n  }\n\n  subscribe(observerOrNext: ObserverOrNext<T>): Subscription {\n    const observer = createObserver<T>(observerOrNext);\n    if (this.thrownError || this.closed) {\n      const subscription = new Subscription();\n      subscription.closed = true;\n      return subscription;\n    }\n\n    const observerId = this._observerCounter++;\n    this._observers.set(observerId, observer);\n    return new Subscription(() => {\n      this._observers.delete(observerId);\n    });\n  }\n\n  unsubscribe(): void {\n    this._closed = true;\n    this._observers.clear();\n  }\n}\n"],"mappings":";;;;AAMA,IAAa,UAAb,cAAgC,WAA0C;CACxE,6BAA+C,IAAI,IAAI;CACvD,mBAA2B;CAC3B;CAEA,cAAc;EACZ,MAAM;CACR;CAEA,IAAI,YAAY;EACd,OAAO,MAAM,KAAK,KAAK,WAAW,OAAO,CAAC;CAC5C;CAEA,KAAK,OAAU;EACb,IAAI,KAAK,QAAQ;EACjB,MAAM,YAAY,KAAK;EACvB,KAAK,IAAI,IAAI,GAAG,IAAI,UAAU,QAAQ,KACpC,UAAU,EAAE,CAAC,KAAK,KAAK;CAE3B;CAEA,MAAM,KAAY;EAChB,IAAI,KAAK,QAAQ;EACjB,KAAK,cAAc;EACnB,MAAM,EAAE,cAAc;EACtB,KAAK,IAAI,IAAI,GAAG,IAAI,UAAU,QAAQ,KACpC,UAAU,EAAE,CAAC,QAAQ,GAAG;EAE1B,KAAK,WAAW,MAAM;CACxB;CAEA,WAAW;EACT,IAAI,KAAK,QAAQ;EACjB,KAAK,UAAU;EACf,MAAM,EAAE,cAAc;EACtB,KAAK,IAAI,IAAI,GAAG,IAAI,UAAU,QAAQ,KACpC,UAAU,EAAE,CAAC,WAAW;EAE1B,KAAK,WAAW,MAAM;CACxB;CAEA,UAAU,gBAAiD;EACzD,MAAM,WAAW,eAAkB,cAAc;EACjD,IAAI,KAAK,eAAe,KAAK,QAAQ;GACnC,MAAM,eAAe,IAAI,aAAa;GACtC,aAAa,SAAS;GACtB,OAAO;EACT;EAEA,MAAM,aAAa,KAAK;EACxB,KAAK,WAAW,IAAI,YAAY,QAAQ;EACxC,OAAO,IAAI,mBAAmB;GAC5B,KAAK,WAAW,OAAO,UAAU;EACnC,CAAC;CACH;CAEA,cAAoB;EAClB,KAAK,UAAU;EACf,KAAK,WAAW,MAAM;CACxB;AACF"}

package/dist/es/components/MediaRecorder/observable/Subscription.mjs

@@ -1,7 +1,8 @@
 //#region src/components/MediaRecorder/observable/Subscription.ts
 var Subscription = class {
+	closed = false;
+	_unsubscribe;
 	constructor(unsubscribe) {
-		this.closed = false;
 		this._unsubscribe = unsubscribe;
 	}
 	unsubscribe() {

package/dist/es/components/MediaRecorder/observable/Subscription.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Subscription.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/observable/Subscription.ts"],"sourcesContent":["export interface SubscriptionLike {\n  closed: boolean;\n\n  unsubscribe(): void;\n}\n\nexport class Subscription implements SubscriptionLike {\n  closed = false;\n  private _unsubscribe: (() => void) | undefined;\n\n  constructor(unsubscribe?: () => void) {\n    this._unsubscribe = unsubscribe;\n  }\n\n  unsubscribe() {\n    this.closed = true;\n    this._unsubscribe?.();\n  }\n}\n"],"mappings":";AAMA,IAAa,eAAb,MAAsD;CAIpD,YAAY,aAA0B;gBAH7B;EAIP,KAAK,eAAe;CACtB;CAEA,cAAc;EACZ,KAAK,SAAS;EACd,KAAK,eAAe;CACtB;AACF"}
+{"version":3,"file":"Subscription.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/observable/Subscription.ts"],"sourcesContent":["export interface SubscriptionLike {\n  closed: boolean;\n\n  unsubscribe(): void;\n}\n\nexport class Subscription implements SubscriptionLike {\n  closed = false;\n  private _unsubscribe: (() => void) | undefined;\n\n  constructor(unsubscribe?: () => void) {\n    this._unsubscribe = unsubscribe;\n  }\n\n  unsubscribe() {\n    this.closed = true;\n    this._unsubscribe?.();\n  }\n}\n"],"mappings":";AAMA,IAAa,eAAb,MAAsD;CACpD,SAAS;CACT;CAEA,YAAY,aAA0B;EACpC,KAAK,eAAe;CACtB;CAEA,cAAc;EACZ,KAAK,SAAS;EACd,KAAK,eAAe;CACtB;AACF"}

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

@@ -1,10 +1,9 @@
-import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
 import { useChatContext } from "../../context/ChatContext.mjs";
 import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { MessageProvider } from "../../context/MessageContext.mjs";
 import { useMessageTranslationViewContext } from "../../context/MessageTranslationViewContext.mjs";
 import { useActionHandler } from "./hooks/useActionHandler.mjs";
-import { MESSAGE_ACTIONS, areMessagePropsEqual, getMessageActions } from "./utils.mjs";
+import { areMessagePropsEqual } from "./utils.mjs";
 import { useDeleteHandler } from "./hooks/useDeleteHandler.mjs";
 import { useFlagHandler } from "./hooks/useFlagHandler.mjs";
 import { useMentionsHandler } from "./hooks/useMentionsHandler.mjs";
@@ -18,62 +17,27 @@ import { useUserHandler } from "./hooks/useUserHandler.mjs";
 import { useUserRole } from "./hooks/useUserRole.mjs";
 import { useReactionsFetcher } from "./hooks/useReactionsFetcher.mjs";
 import { MessageUI } from "./MessageUI.mjs";
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Message/Message.tsx
 var MessageWithContext = (props) => {
-	const { canPin, Message: propMessage, message, messageActions = Object.keys(MESSAGE_ACTIONS), onUserClick: propOnUserClick, onUserHover: propOnUserHover, userRoles } = props;
-	const { client, isMessageAIGenerated } = useChatContext("Message");
-	const { channelConfig, read } = useChannelStateContext("Message");
-	const { Message: contextMessage = MessageUI, MessageUI: contextMessageUI = contextMessage } = useComponentContext("Message");
+	const { message, onUserClick: propOnUserClick, onUserHover: propOnUserHover, userRoles } = props;
+	const { isMessageAIGenerated } = useChatContext();
+	const { MessageUI: MessageUIComponent = MessageUI } = useComponentContext();
 	const { getTranslationView, setTranslationView: setTranslationViewInContext } = useMessageTranslationViewContext();
 	const translationView = getTranslationView(message.id, !!message.i18n);
 	const setTranslationView = useCallback((view) => setTranslationViewInContext(message.id, view), [message.id, setTranslationViewInContext]);
-	const actionsEnabled = message.type === "regular" && message.status === "received";
-	const MessageUIComponent = propMessage ?? contextMessageUI;
 	const { onUserClick, onUserHover } = useUserHandler(message, {
 		onUserClickHandler: propOnUserClick,
 		onUserHoverHandler: propOnUserHover
 	});
-	const { canDelete, canEdit, canFlag, canMarkUnread, canMute, canQuote, canReact, canReply, isMyMessage } = userRoles;
-	const messageIsUnread = useMemo(() => !!(!isMyMessage && client.user?.id && read && (!read[client.user.id] || message?.created_at && new Date(message.created_at).getTime() > read[client.user.id].last_read.getTime())), [
-		client,
-		isMyMessage,
-		message.created_at,
-		read
-	]);
-	const messageActionsHandler = useCallback(() => getMessageActions(messageActions, {
-		canDelete,
-		canEdit,
-		canFlag,
-		canMarkUnread,
-		canMute,
-		canPin,
-		canQuote,
-		canReact,
-		canReply
-	}, channelConfig), [
-		messageActions,
-		canDelete,
-		canEdit,
-		canFlag,
-		canMarkUnread,
-		canMute,
-		canPin,
-		canQuote,
-		canReact,
-		canReply,
-		channelConfig
-	]);
-	const { canPin: canPinPropToNotPass, messageActions: messageActionsPropToNotPass, onUserClick: onUserClickPropToNotPass, onUserHover: onUserHoverPropToNotPass, userRoles: userRolesPropToNotPass, ...rest } = props;
+	const { isMyMessage } = userRoles;
+	const { onUserClick: onUserClickPropToNotPass, onUserHover: onUserHoverPropToNotPass, userRoles: userRolesPropToNotPass, ...rest } = props;
 	return /* @__PURE__ */ jsx(MessageProvider, {
 		value: {
 			...rest,
-			actionsEnabled,
-			getMessageActions: messageActionsHandler,
 			isMessageAIGenerated,
 			isMyMessage: () => isMyMessage,
-			messageIsUnread,
 			onUserClick,
 			onUserHover,
 			setTranslationView,
@@ -88,12 +52,9 @@ var MemoizedMessage = React.memo(MessageWithContext, areMessagePropsEqual);
 * an individual message. The actual UI of the message is delegated via the Message prop on Channel.
 */
 var Message = (props) => {
-	const { closeReactionSelectorOnClick, disableQuotedMessages, message, onMentionsClick: propOnMentionsClick, onMentionsHover: propOnMentionsHover, openThread: propOpenThread, reactionDetailsSort, retrySendMessage: propRetrySendMessage, sortReactions } = props;
-	const { highlightedMessageId, mutes } = useChannelStateContext("Message");
+	const { closeReactionSelectorOnClick, disableQuotedMessages, message, onMentionsClick: propOnMentionsClick, onMentionsHover: propOnMentionsHover, openThread: propOpenThread, reactionDetailsSort, sortReactions } = props;
 	const handleAction = useActionHandler(message);
-	const handleOpenThread = useOpenThreadHandler(message, propOpenThread);
 	const handleReaction = useReactionHandler(message);
-	const handleRetry = useRetryHandler(propRetrySendMessage);
 	const userRoles = useUserRole(message, disableQuotedMessages);
 	const handleFetchReactions = useReactionsFetcher(message);
 	const handleDelete = useDeleteHandler(message);
@@ -104,12 +65,13 @@ var Message = (props) => {
 		onMentionsClick: propOnMentionsClick,
 		onMentionsHover: propOnMentionsHover
 	});
-	const { canPin, handlePin } = usePinHandler(message);
-	const highlighted = highlightedMessageId === message.id;
+	const { handlePin } = usePinHandler(message);
+	const handleOpenThread = useOpenThreadHandler(message, propOpenThread);
+	const retryHandler = useRetryHandler();
+	const handleRetry = useCallback((retriedMessage) => retryHandler({ localMessage: retriedMessage }), [retryHandler]);
 	return /* @__PURE__ */ jsx(MemoizedMessage, {
 		additionalMessageComposerProps: props.additionalMessageComposerProps,
 		autoscrollToBottom: props.autoscrollToBottom,
-		canPin,
 		closeReactionSelectorOnClick,
 		deliveredTo: props.deliveredTo,
 		disableQuotedMessages: props.disableQuotedMessages,
@@ -125,15 +87,12 @@ var Message = (props) => {
 		handlePin,
 		handleReaction,
 		handleRetry,
-		highlighted,
+		highlighted: props.highlighted,
 		initialMessage: props.initialMessage,
 		lastOwnMessage: props.lastOwnMessage,
 		lastReceivedId: props.lastReceivedId,
 		message,
-		Message: props.Message,
-		messageActions: props.messageActions,
 		messageListRect: props.messageListRect,
-		mutes,
 		onMentionsClickMessage: onMentionsClick,
 		onMentionsHoverMessage: onMentionsHover,
 		onUserClick: props.onUserClick,

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

@@ -1 +1 @@
-{"version":3,"file":"Message.mjs","names":[],"sources":["../../../../src/components/Message/Message.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\n\nimport {\n  useActionHandler,\n  useDeleteHandler,\n  useFlagHandler,\n  useMarkUnreadHandler,\n  useMentionsHandler,\n  useMuteHandler,\n  useOpenThreadHandler,\n  usePinHandler,\n  useReactionHandler,\n  useReactionsFetcher,\n  useRetryHandler,\n  useUserHandler,\n  useUserRole,\n} from './hooks';\nimport { areMessagePropsEqual, getMessageActions, MESSAGE_ACTIONS } from './utils';\n\nimport type { MessageContextValue } from '../../context';\nimport {\n  MessageProvider,\n  useChannelStateContext,\n  useChatContext,\n  useComponentContext,\n  useMessageTranslationViewContext,\n} from '../../context';\n\nimport { MessageUI as DefaultMessageUI } from './MessageUI';\n\nimport type { MessageProps } from './types';\n\ntype MessagePropsToOmit =\n  | 'onMentionsClick'\n  | 'onMentionsHover'\n  | 'openThread'\n  | 'retrySendMessage';\n\ntype MessageContextPropsToPick =\n  | 'handleAction'\n  | 'handleDelete'\n  | 'handleFetchReactions'\n  | 'handleFlag'\n  | 'handleMarkUnread'\n  | 'handleMute'\n  | 'handleOpenThread'\n  | 'handlePin'\n  | 'handleReaction'\n  | 'handleRetry'\n  | 'mutes'\n  | 'onMentionsClickMessage'\n  | 'onMentionsHoverMessage'\n  | 'reactionDetailsSort'\n  | 'sortReactions';\n\ntype MessageWithContextProps = Omit<MessageProps, MessagePropsToOmit> &\n  Pick<MessageContextValue, MessageContextPropsToPick> & {\n    canPin: boolean;\n    userRoles: ReturnType<typeof useUserRole>;\n  };\n\nconst MessageWithContext = (props: MessageWithContextProps) => {\n  const {\n    canPin,\n    Message: propMessage,\n    message,\n    messageActions = Object.keys(MESSAGE_ACTIONS),\n    onUserClick: propOnUserClick,\n    onUserHover: propOnUserHover,\n    userRoles,\n  } = props;\n\n  const { client, isMessageAIGenerated } = useChatContext('Message');\n  const { channelConfig, read } = useChannelStateContext('Message');\n  const {\n    Message: contextMessage = DefaultMessageUI,\n    // TODO: remove this passthrough once we drop Message from the ComponentContext\n    MessageUI: contextMessageUI = contextMessage,\n  } = useComponentContext('Message');\n  const { getTranslationView, setTranslationView: setTranslationViewInContext } =\n    useMessageTranslationViewContext();\n\n  const translationView = getTranslationView(message.id, !!message.i18n);\n  const setTranslationView = useCallback(\n    (view: 'original' | 'translated') => setTranslationViewInContext(message.id, view),\n    [message.id, setTranslationViewInContext],\n  );\n\n  const actionsEnabled = message.type === 'regular' && message.status === 'received';\n  const MessageUIComponent = propMessage ?? contextMessageUI;\n\n  const { onUserClick, onUserHover } = useUserHandler(message, {\n    onUserClickHandler: propOnUserClick,\n    onUserHoverHandler: propOnUserHover,\n  });\n\n  const {\n    canDelete,\n    canEdit,\n    canFlag,\n    canMarkUnread,\n    canMute,\n    canQuote,\n    canReact,\n    canReply,\n    isMyMessage,\n  } = userRoles;\n\n  const messageIsUnread = useMemo(\n    () =>\n      !!(\n        !isMyMessage &&\n        client.user?.id &&\n        read &&\n        (!read[client.user.id] ||\n          (message?.created_at &&\n            new Date(message.created_at).getTime() >\n              read[client.user.id].last_read.getTime()))\n      ),\n    [client, isMyMessage, message.created_at, read],\n  );\n\n  const messageActionsHandler = useCallback(\n    () =>\n      getMessageActions(\n        messageActions,\n        {\n          canDelete,\n          canEdit,\n          canFlag,\n          canMarkUnread,\n          canMute,\n          canPin,\n          canQuote,\n          canReact,\n          canReply,\n        },\n        channelConfig,\n      ),\n\n    [\n      messageActions,\n      canDelete,\n      canEdit,\n      canFlag,\n      canMarkUnread,\n      canMute,\n      canPin,\n      canQuote,\n      canReact,\n      canReply,\n      channelConfig,\n    ],\n  );\n\n  const {\n    canPin: canPinPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars\n    messageActions: messageActionsPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onUserClick: onUserClickPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onUserHover: onUserHoverPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars\n    userRoles: userRolesPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars\n    ...rest\n  } = props;\n\n  const messageContextValue: MessageContextValue = {\n    ...rest,\n    actionsEnabled,\n    getMessageActions: messageActionsHandler,\n    isMessageAIGenerated,\n    isMyMessage: () => isMyMessage,\n    messageIsUnread,\n    onUserClick,\n    onUserHover,\n    setTranslationView,\n    translationView,\n  };\n\n  return (\n    <MessageProvider value={messageContextValue}>\n      <MessageUIComponent />\n    </MessageProvider>\n  );\n};\n\nconst MemoizedMessage = React.memo(\n  MessageWithContext,\n  areMessagePropsEqual,\n) as typeof MessageWithContext;\n\n/**\n * The Message component is a context provider which implements all the logic required for rendering\n * an individual message. The actual UI of the message is delegated via the Message prop on Channel.\n */\nexport const Message = (props: MessageProps) => {\n  const {\n    closeReactionSelectorOnClick,\n    disableQuotedMessages,\n    message,\n    onMentionsClick: propOnMentionsClick,\n    onMentionsHover: propOnMentionsHover,\n    openThread: propOpenThread,\n    reactionDetailsSort,\n    retrySendMessage: propRetrySendMessage,\n    sortReactions,\n  } = props;\n\n  const { highlightedMessageId, mutes } = useChannelStateContext('Message');\n\n  const handleAction = useActionHandler(message);\n  const handleOpenThread = useOpenThreadHandler(message, propOpenThread);\n  const handleReaction = useReactionHandler(message);\n  const handleRetry = useRetryHandler(propRetrySendMessage);\n  const userRoles = useUserRole(message, disableQuotedMessages);\n\n  const handleFetchReactions = useReactionsFetcher(message);\n\n  const handleDelete = useDeleteHandler(message);\n\n  const handleFlag = useFlagHandler(message);\n\n  const handleMarkUnread = useMarkUnreadHandler(message);\n\n  const handleMute = useMuteHandler(message);\n\n  const { onMentionsClick, onMentionsHover } = useMentionsHandler(message, {\n    onMentionsClick: propOnMentionsClick,\n    onMentionsHover: propOnMentionsHover,\n  });\n\n  const { canPin, handlePin } = usePinHandler(message);\n\n  const highlighted = highlightedMessageId === message.id;\n\n  return (\n    <MemoizedMessage\n      additionalMessageComposerProps={props.additionalMessageComposerProps}\n      autoscrollToBottom={props.autoscrollToBottom}\n      canPin={canPin}\n      closeReactionSelectorOnClick={closeReactionSelectorOnClick}\n      deliveredTo={props.deliveredTo}\n      disableQuotedMessages={props.disableQuotedMessages}\n      formatDate={props.formatDate}\n      groupStyles={props.groupStyles}\n      handleAction={handleAction}\n      handleDelete={handleDelete}\n      handleFetchReactions={handleFetchReactions}\n      handleFlag={handleFlag}\n      handleMarkUnread={handleMarkUnread}\n      handleMute={handleMute}\n      handleOpenThread={handleOpenThread}\n      handlePin={handlePin}\n      handleReaction={handleReaction}\n      handleRetry={handleRetry}\n      highlighted={highlighted}\n      initialMessage={props.initialMessage}\n      lastOwnMessage={props.lastOwnMessage}\n      lastReceivedId={props.lastReceivedId}\n      message={message}\n      Message={props.Message}\n      messageActions={props.messageActions}\n      messageListRect={props.messageListRect}\n      mutes={mutes}\n      onMentionsClickMessage={onMentionsClick}\n      onMentionsHoverMessage={onMentionsHover}\n      onUserClick={props.onUserClick}\n      onUserHover={props.onUserHover}\n      reactionDetailsSort={reactionDetailsSort}\n      readBy={props.readBy}\n      renderText={props.renderText}\n      returnAllReadData={props.returnAllReadData}\n      sortReactions={sortReactions}\n      threadList={props.threadList}\n      unsafeHTML={props.unsafeHTML}\n      userRoles={userRoles}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6DA,IAAM,sBAAsB,UAAmC;CAC7D,MAAM,EACJ,QACA,SAAS,aACT,SACA,iBAAiB,OAAO,KAAK,eAAe,GAC5C,aAAa,iBACb,aAAa,iBACb,cACE;CAEJ,MAAM,EAAE,QAAQ,yBAAyB,eAAe,SAAS;CACjE,MAAM,EAAE,eAAe,SAAS,uBAAuB,SAAS;CAChE,MAAM,EACJ,SAAS,iBAAiB,WAE1B,WAAW,mBAAmB,mBAC5B,oBAAoB,SAAS;CACjC,MAAM,EAAE,oBAAoB,oBAAoB,gCAC9C,iCAAiC;CAEnC,MAAM,kBAAkB,mBAAmB,QAAQ,IAAI,CAAC,CAAC,QAAQ,IAAI;CACrE,MAAM,qBAAqB,aACxB,SAAoC,4BAA4B,QAAQ,IAAI,IAAI,GACjF,CAAC,QAAQ,IAAI,2BAA2B,CAC1C;CAEA,MAAM,iBAAiB,QAAQ,SAAS,aAAa,QAAQ,WAAW;CACxE,MAAM,qBAAqB,eAAe;CAE1C,MAAM,EAAE,aAAa,gBAAgB,eAAe,SAAS;EAC3D,oBAAoB;EACpB,oBAAoB;CACtB,CAAC;CAED,MAAM,EACJ,WACA,SACA,SACA,eACA,SACA,UACA,UACA,UACA,gBACE;CAEJ,MAAM,kBAAkB,cAEpB,CAAC,EACC,CAAC,eACD,OAAO,MAAM,MACb,SACC,CAAC,KAAK,OAAO,KAAK,OAChB,SAAS,cACR,IAAI,KAAK,QAAQ,UAAU,CAAC,CAAC,QAAQ,IACnC,KAAK,OAAO,KAAK,GAAG,CAAC,UAAU,QAAQ,KAEjD;EAAC;EAAQ;EAAa,QAAQ;EAAY;CAAI,CAChD;CAEA,MAAM,wBAAwB,kBAE1B,kBACE,gBACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,GACA,aACF,GAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,EACJ,QAAQ,qBACR,gBAAgB,6BAChB,aAAa,0BACb,aAAa,0BACb,WAAW,wBACX,GAAG,SACD;CAeJ,OACE,oBAAC,iBAAD;EAAiB,OAAO;GAbxB,GAAG;GACH;GACA,mBAAmB;GACnB;GACA,mBAAmB;GACnB;GACA;GACA;GACA;GACA;EAIwB;YACtB,oBAAC,oBAAD,CAAqB,CAAA;CACN,CAAA;AAErB;AAEA,IAAM,kBAAkB,MAAM,KAC5B,oBACA,oBACF;;;;;AAMA,IAAa,WAAW,UAAwB;CAC9C,MAAM,EACJ,8BACA,uBACA,SACA,iBAAiB,qBACjB,iBAAiB,qBACjB,YAAY,gBACZ,qBACA,kBAAkB,sBAClB,kBACE;CAEJ,MAAM,EAAE,sBAAsB,UAAU,uBAAuB,SAAS;CAExE,MAAM,eAAe,iBAAiB,OAAO;CAC7C,MAAM,mBAAmB,qBAAqB,SAAS,cAAc;CACrE,MAAM,iBAAiB,mBAAmB,OAAO;CACjD,MAAM,cAAc,gBAAgB,oBAAoB;CACxD,MAAM,YAAY,YAAY,SAAS,qBAAqB;CAE5D,MAAM,uBAAuB,oBAAoB,OAAO;CAExD,MAAM,eAAe,iBAAiB,OAAO;CAE7C,MAAM,aAAa,eAAe,OAAO;CAEzC,MAAM,mBAAmB,qBAAqB,OAAO;CAErD,MAAM,aAAa,eAAe,OAAO;CAEzC,MAAM,EAAE,iBAAiB,oBAAoB,mBAAmB,SAAS;EACvE,iBAAiB;EACjB,iBAAiB;CACnB,CAAC;CAED,MAAM,EAAE,QAAQ,cAAc,cAAc,OAAO;CAEnD,MAAM,cAAc,yBAAyB,QAAQ;CAErD,OACE,oBAAC,iBAAD;EACE,gCAAgC,MAAM;EACtC,oBAAoB,MAAM;EAClB;EACsB;EAC9B,aAAa,MAAM;EACnB,uBAAuB,MAAM;EAC7B,YAAY,MAAM;EAClB,aAAa,MAAM;EACL;EACA;EACQ;EACV;EACM;EACN;EACM;EACP;EACK;EACH;EACA;EACb,gBAAgB,MAAM;EACtB,gBAAgB,MAAM;EACtB,gBAAgB,MAAM;EACb;EACT,SAAS,MAAM;EACf,gBAAgB,MAAM;EACtB,iBAAiB,MAAM;EAChB;EACP,wBAAwB;EACxB,wBAAwB;EACxB,aAAa,MAAM;EACnB,aAAa,MAAM;EACE;EACrB,QAAQ,MAAM;EACd,YAAY,MAAM;EAClB,mBAAmB,MAAM;EACV;EACf,YAAY,MAAM;EAClB,YAAY,MAAM;EACP;CACZ,CAAA;AAEL"}
+{"version":3,"file":"Message.mjs","names":[],"sources":["../../../../src/components/Message/Message.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport {\n  useActionHandler,\n  useDeleteHandler,\n  useFlagHandler,\n  useMarkUnreadHandler,\n  useMentionsHandler,\n  useMuteHandler,\n  useOpenThreadHandler,\n  usePinHandler,\n  useReactionHandler,\n  useReactionsFetcher,\n  useRetryHandler,\n  useUserHandler,\n  useUserRole,\n} from './hooks';\nimport { areMessagePropsEqual } from './utils';\n\nimport type { LocalMessage } from 'stream-chat';\nimport type { MessageContextValue } from '../../context';\nimport {\n  MessageProvider,\n  useChatContext,\n  useComponentContext,\n  useMessageTranslationViewContext,\n} from '../../context';\n\nimport { MessageUI as DefaultMessageUI } from './MessageUI';\n\nimport type { MessageProps } from './types';\n\ntype MessagePropsToOmit = 'onMentionsClick' | 'onMentionsHover' | 'retrySendMessage';\n\ntype MessageContextPropsToPick =\n  | 'handleAction'\n  | 'handleDelete'\n  | 'handleFetchReactions'\n  | 'handleFlag'\n  | 'handleMarkUnread'\n  | 'handleMute'\n  | 'handleOpenThread'\n  | 'handlePin'\n  | 'handleReaction'\n  | 'handleRetry'\n  | 'onMentionsClickMessage'\n  | 'onMentionsHoverMessage'\n  | 'reactionDetailsSort'\n  | 'sortReactions';\n\ntype MessageWithContextProps = Omit<MessageProps, MessagePropsToOmit> &\n  Pick<MessageContextValue, MessageContextPropsToPick> & {\n    userRoles: ReturnType<typeof useUserRole>;\n  };\n\nconst MessageWithContext = (props: MessageWithContextProps) => {\n  const {\n    message,\n    onUserClick: propOnUserClick,\n    onUserHover: propOnUserHover,\n    userRoles,\n  } = props;\n\n  const { isMessageAIGenerated } = useChatContext();\n  const { MessageUI: MessageUIComponent = DefaultMessageUI } = useComponentContext();\n  const { getTranslationView, setTranslationView: setTranslationViewInContext } =\n    useMessageTranslationViewContext();\n\n  const translationView = getTranslationView(message.id, !!message.i18n);\n  const setTranslationView = useCallback(\n    (view: 'original' | 'translated') => setTranslationViewInContext(message.id, view),\n    [message.id, setTranslationViewInContext],\n  );\n\n  const { onUserClick, onUserHover } = useUserHandler(message, {\n    onUserClickHandler: propOnUserClick,\n    onUserHoverHandler: propOnUserHover,\n  });\n\n  const { isMyMessage } = userRoles;\n\n  const {\n    onUserClick: onUserClickPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onUserHover: onUserHoverPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars\n    userRoles: userRolesPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars\n    ...rest\n  } = props;\n\n  const messageContextValue: MessageContextValue = {\n    ...rest,\n    isMessageAIGenerated,\n    isMyMessage: () => isMyMessage,\n    onUserClick,\n    onUserHover,\n    setTranslationView,\n    translationView,\n  };\n\n  return (\n    <MessageProvider value={messageContextValue}>\n      <MessageUIComponent />\n    </MessageProvider>\n  );\n};\n\nconst MemoizedMessage = React.memo(\n  MessageWithContext,\n  areMessagePropsEqual,\n) as typeof MessageWithContext;\n\n/**\n * The Message component is a context provider which implements all the logic required for rendering\n * an individual message. The actual UI of the message is delegated via the Message prop on Channel.\n */\nexport const Message = (props: MessageProps) => {\n  const {\n    closeReactionSelectorOnClick,\n    disableQuotedMessages,\n    message,\n    onMentionsClick: propOnMentionsClick,\n    onMentionsHover: propOnMentionsHover,\n    openThread: propOpenThread,\n    reactionDetailsSort,\n    sortReactions,\n  } = props;\n\n  // MERGE-RECONCILE: master removed PR #2909's per-action notification-getter props\n  // (getDeleteMessageErrorNotification, getFetchReactionsErrorNotification, etc.) and the\n  // `notify` bridge; the merged handler hooks emit errors via client.notifications\n  // internally. Handlers are called with `(message)` only (master's canonical style).\n  // The per-action custom error/success message API is a dropped PR feature — re-graft if\n  // custom notification text is required.\n  const handleAction = useActionHandler(message);\n  const handleReaction = useReactionHandler(message);\n  const userRoles = useUserRole(message, disableQuotedMessages);\n\n  const handleFetchReactions = useReactionsFetcher(message);\n\n  const handleDelete = useDeleteHandler(message);\n\n  const handleFlag = useFlagHandler(message);\n\n  const handleMarkUnread = useMarkUnreadHandler(message);\n\n  const handleMute = useMuteHandler(message);\n\n  const { onMentionsClick, onMentionsHover } = useMentionsHandler(message, {\n    onMentionsClick: propOnMentionsClick,\n    onMentionsHover: propOnMentionsHover,\n  });\n\n  const { handlePin } = usePinHandler(message);\n  const handleOpenThread = useOpenThreadHandler(message, propOpenThread);\n  const retryHandler = useRetryHandler();\n  const handleRetry = useCallback(\n    (retriedMessage: LocalMessage) => retryHandler({ localMessage: retriedMessage }),\n    [retryHandler],\n  );\n\n  return (\n    <MemoizedMessage\n      additionalMessageComposerProps={props.additionalMessageComposerProps}\n      autoscrollToBottom={props.autoscrollToBottom}\n      closeReactionSelectorOnClick={closeReactionSelectorOnClick}\n      deliveredTo={props.deliveredTo}\n      disableQuotedMessages={props.disableQuotedMessages}\n      formatDate={props.formatDate}\n      groupStyles={props.groupStyles}\n      handleAction={handleAction}\n      handleDelete={handleDelete}\n      handleFetchReactions={handleFetchReactions}\n      handleFlag={handleFlag}\n      handleMarkUnread={handleMarkUnread}\n      handleMute={handleMute}\n      handleOpenThread={handleOpenThread}\n      handlePin={handlePin}\n      handleReaction={handleReaction}\n      handleRetry={handleRetry}\n      highlighted={props.highlighted}\n      initialMessage={props.initialMessage}\n      lastOwnMessage={props.lastOwnMessage}\n      lastReceivedId={props.lastReceivedId}\n      message={message}\n      messageListRect={props.messageListRect}\n      onMentionsClickMessage={onMentionsClick}\n      onMentionsHoverMessage={onMentionsHover}\n      onUserClick={props.onUserClick}\n      onUserHover={props.onUserHover}\n      reactionDetailsSort={reactionDetailsSort}\n      readBy={props.readBy}\n      renderText={props.renderText}\n      returnAllReadData={props.returnAllReadData}\n      sortReactions={sortReactions}\n      threadList={props.threadList}\n      unsafeHTML={props.unsafeHTML}\n      userRoles={userRoles}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuDA,IAAM,sBAAsB,UAAmC;CAC7D,MAAM,EACJ,SACA,aAAa,iBACb,aAAa,iBACb,cACE;CAEJ,MAAM,EAAE,yBAAyB,eAAe;CAChD,MAAM,EAAE,WAAW,qBAAqB,cAAqB,oBAAoB;CACjF,MAAM,EAAE,oBAAoB,oBAAoB,gCAC9C,iCAAiC;CAEnC,MAAM,kBAAkB,mBAAmB,QAAQ,IAAI,CAAC,CAAC,QAAQ,IAAI;CACrE,MAAM,qBAAqB,aACxB,SAAoC,4BAA4B,QAAQ,IAAI,IAAI,GACjF,CAAC,QAAQ,IAAI,2BAA2B,CAC1C;CAEA,MAAM,EAAE,aAAa,gBAAgB,eAAe,SAAS;EAC3D,oBAAoB;EACpB,oBAAoB;CACtB,CAAC;CAED,MAAM,EAAE,gBAAgB;CAExB,MAAM,EACJ,aAAa,0BACb,aAAa,0BACb,WAAW,wBACX,GAAG,SACD;CAYJ,OACE,oBAAC,iBAAD;EAAiB,OAAO;GAVxB,GAAG;GACH;GACA,mBAAmB;GACnB;GACA;GACA;GACA;EAIwB;YACtB,oBAAC,oBAAD,CAAqB,CAAA;CACN,CAAA;AAErB;AAEA,IAAM,kBAAkB,MAAM,KAC5B,oBACA,oBACF;;;;;AAMA,IAAa,WAAW,UAAwB;CAC9C,MAAM,EACJ,8BACA,uBACA,SACA,iBAAiB,qBACjB,iBAAiB,qBACjB,YAAY,gBACZ,qBACA,kBACE;CAQJ,MAAM,eAAe,iBAAiB,OAAO;CAC7C,MAAM,iBAAiB,mBAAmB,OAAO;CACjD,MAAM,YAAY,YAAY,SAAS,qBAAqB;CAE5D,MAAM,uBAAuB,oBAAoB,OAAO;CAExD,MAAM,eAAe,iBAAiB,OAAO;CAE7C,MAAM,aAAa,eAAe,OAAO;CAEzC,MAAM,mBAAmB,qBAAqB,OAAO;CAErD,MAAM,aAAa,eAAe,OAAO;CAEzC,MAAM,EAAE,iBAAiB,oBAAoB,mBAAmB,SAAS;EACvE,iBAAiB;EACjB,iBAAiB;CACnB,CAAC;CAED,MAAM,EAAE,cAAc,cAAc,OAAO;CAC3C,MAAM,mBAAmB,qBAAqB,SAAS,cAAc;CACrE,MAAM,eAAe,gBAAgB;CACrC,MAAM,cAAc,aACjB,mBAAiC,aAAa,EAAE,cAAc,eAAe,CAAC,GAC/E,CAAC,YAAY,CACf;CAEA,OACE,oBAAC,iBAAD;EACE,gCAAgC,MAAM;EACtC,oBAAoB,MAAM;EACI;EAC9B,aAAa,MAAM;EACnB,uBAAuB,MAAM;EAC7B,YAAY,MAAM;EAClB,aAAa,MAAM;EACL;EACA;EACQ;EACV;EACM;EACN;EACM;EACP;EACK;EACH;EACb,aAAa,MAAM;EACnB,gBAAgB,MAAM;EACtB,gBAAgB,MAAM;EACtB,gBAAgB,MAAM;EACb;EACT,iBAAiB,MAAM;EACvB,wBAAwB;EACxB,wBAAwB;EACxB,aAAa,MAAM;EACnB,aAAa,MAAM;EACE;EACrB,QAAQ,MAAM;EACd,YAAY,MAAM;EAClB,mBAAmB,MAAM;EACV;EACf,YAAY,MAAM;EAClB,YAAY,MAAM;EACP;CACZ,CAAA;AAEL"}

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

@@ -1,74 +1,30 @@
-import { useChannelActionContext } from "../../context/ChannelActionContext.mjs";
-import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
-import { useMessageContext } from "../../context/MessageContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
-import { useNotificationApi } from "../Notifications/hooks/useNotificationApi.mjs";
-import { useEffect, useRef } from "react";
+import { useMessageAlsoSentInChannelNavigation } from "./hooks/useMessageAlsoSentInChannelNavigation.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { formatMessage } from "stream-chat";
 //#region src/components/Message/MessageAlsoSentInChannelIndicator.tsx
 /**
 * Indicator shown when the message was also sent to the main channel (show_in_channel === true).
+* The navigation lives in {@link useMessageAlsoSentInChannelNavigation} so it can be reused.
 */
-var MessageAlsoSentInChannelIndicator = () => {
+var MessageAlsoSentInChannelIndicator = ({ onView } = {}) => {
 	const { IconArrowUpRight } = useComponentContextIcons();
-	const { addNotification } = useNotificationApi();
 	const { t } = useTranslationContext();
-	const { channel } = useChannelStateContext();
-	const { jumpToMessage, openThread } = useChannelActionContext();
-	const { message, threadList } = useMessageContext("MessageAlsoSentInChannelIndicator");
-	const targetMessageRef = useRef(void 0);
-	const queryParent = () => channel.getClient().search({ cid: channel.cid }, { id: message.parent_id }).then(({ results }) => {
-		if (!results.length) throw new Error("Thread has not been found");
-		targetMessageRef.current = formatMessage(results[0].message);
-	}).catch((error) => {
-		addNotification({
-			context: { threadReply: message },
-			emitter: "MessageIsThreadReplyInChannelButtonIndicator",
-			error,
-			message: t("Thread has not been found"),
-			severity: "error",
-			type: "api:reply:search:failed"
-		});
-	});
-	const jumpToReplyInChannelMessages = async (id) => {
-		await jumpToMessage(id);
-	};
-	useEffect(() => {
-		if (targetMessageRef.current || targetMessageRef.current === null || !message.parent_id) return;
-		const localMessage = channel.state.findMessage(message.parent_id);
-		if (localMessage) {
-			targetMessageRef.current = localMessage;
-			return;
-		}
-	}, [channel, message]);
-	const handleClickViewReference = async () => {
-		if (!targetMessageRef.current) if (threadList) {
-			await jumpToReplyInChannelMessages(message.id);
-			return;
-		} else await queryParent();
-		const target = targetMessageRef.current;
-		if (!target) {
-			targetMessageRef.current = null;
-			return;
-		}
-		if (threadList) await jumpToReplyInChannelMessages(message.id);
-		else openThread(target);
-	};
-	if (!message?.show_in_channel) return null;
+	const { isInThread, isShownInChannel, viewReference } = useMessageAlsoSentInChannelNavigation();
+	if (!isShownInChannel) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__message-also-sent-in-channel",
 		role: "status",
 		children: [
 			/* @__PURE__ */ jsx(IconArrowUpRight, {}),
-			/* @__PURE__ */ jsx("span", { children: threadList ? t("Also sent in channel") : t("Replied to a thread") }),
+			/* @__PURE__ */ jsx("span", { children: isInThread ? t("message.alsoSent.alsoSentChannel.text", "Also sent in channel") : t("message.alsoSent.repliedThread.text", "Replied to a thread") }),
 			/* @__PURE__ */ jsx("span", { children: " · " }),
 			/* @__PURE__ */ jsx("button", {
 				className: "str-chat__message-also-sent-in-channel__link-button",
-				onClick: handleClickViewReference,
+				onClick: onView ?? viewReference,
 				type: "button",
-				children: t("View")
+				children: t("message.alsoSent.view.text", "View")
 			})
 		]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"MessageAlsoSentInChannelIndicator.mjs","names":[],"sources":["../../../../src/components/Message/MessageAlsoSentInChannelIndicator.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nimport { useNotificationApi } from '../Notifications';\nimport {\n  useChannelActionContext,\n  useChannelStateContext,\n  useComponentContextIcons,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\nimport { formatMessage, type LocalMessage } from 'stream-chat';\n\n/**\n * Indicator shown when the message was also sent to the main channel (show_in_channel === true).\n */\nexport const MessageAlsoSentInChannelIndicator = () => {\n  const { IconArrowUpRight } = useComponentContextIcons();\n\n  const { addNotification } = useNotificationApi();\n  const { t } = useTranslationContext();\n  const { channel } = useChannelStateContext();\n  const { jumpToMessage, openThread } = useChannelActionContext();\n  const { message, threadList } = useMessageContext('MessageAlsoSentInChannelIndicator');\n  const targetMessageRef = useRef<LocalMessage | null | undefined>(undefined);\n\n  const queryParent = () =>\n    channel\n      .getClient()\n      .search({ cid: channel.cid }, { id: message.parent_id })\n      .then(({ results }) => {\n        if (!results.length) {\n          throw new Error('Thread has not been found');\n        }\n        targetMessageRef.current = formatMessage(results[0].message);\n      })\n      .catch((error: Error) => {\n        addNotification({\n          context: { threadReply: message },\n          emitter: 'MessageIsThreadReplyInChannelButtonIndicator',\n          error,\n          message: t('Thread has not been found'),\n          severity: 'error',\n          type: 'api:reply:search:failed',\n        });\n      });\n\n  // todo: it is not possible to jump to a message in thread\n  const jumpToReplyInChannelMessages = async (id: string) => {\n    await jumpToMessage(id);\n    // todo: we do not have API to control, whether thread of channel message list is show - on mobile devices important\n  };\n\n  useEffect(() => {\n    if (\n      targetMessageRef.current ||\n      targetMessageRef.current === null ||\n      !message.parent_id\n    )\n      return;\n    const localMessage = channel.state.findMessage(message.parent_id);\n    if (localMessage) {\n      targetMessageRef.current = localMessage;\n      return;\n    }\n  }, [channel, message]);\n\n  const handleClickViewReference = async () => {\n    if (!targetMessageRef.current) {\n      // search query is performed here in order to prevent multiple search queries in useEffect\n      // due to the message list 3x remounting its items\n      if (threadList) {\n        await jumpToReplyInChannelMessages(message.id); // we are in thread, and we want to jump to this reply in the main message list\n        return;\n      } else await queryParent(); // we are in the main list and need to query the thread\n    }\n    const target = targetMessageRef.current;\n    if (!target) {\n      // prevent further search queries if the message is not found in the DB\n      targetMessageRef.current = null;\n      return;\n    }\n\n    if (threadList) await jumpToReplyInChannelMessages(message.id);\n    else openThread(target);\n  };\n\n  if (!message?.show_in_channel) return null;\n\n  return (\n    <div className='str-chat__message-also-sent-in-channel' role='status'>\n      <IconArrowUpRight />\n      <span>{threadList ? t('Also sent in channel') : t('Replied to a thread')}</span>\n      <span> · </span>\n      <button\n        className='str-chat__message-also-sent-in-channel__link-button'\n        onClick={handleClickViewReference}\n        type='button'\n      >\n        {t('View')}\n      </button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAa,0CAA0C;CACrD,MAAM,EAAE,qBAAqB,yBAAyB;CAEtD,MAAM,EAAE,oBAAoB,mBAAmB;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,YAAY,uBAAuB;CAC3C,MAAM,EAAE,eAAe,eAAe,wBAAwB;CAC9D,MAAM,EAAE,SAAS,eAAe,kBAAkB,mCAAmC;CACrF,MAAM,mBAAmB,OAAwC,KAAA,CAAS;CAE1E,MAAM,oBACJ,QACG,UAAU,CAAC,CACX,OAAO,EAAE,KAAK,QAAQ,IAAI,GAAG,EAAE,IAAI,QAAQ,UAAU,CAAC,CAAC,CACvD,MAAM,EAAE,cAAc;EACrB,IAAI,CAAC,QAAQ,QACX,MAAM,IAAI,MAAM,2BAA2B;EAE7C,iBAAiB,UAAU,cAAc,QAAQ,EAAE,CAAC,OAAO;CAC7D,CAAC,CAAC,CACD,OAAO,UAAiB;EACvB,gBAAgB;GACd,SAAS,EAAE,aAAa,QAAQ;GAChC,SAAS;GACT;GACA,SAAS,EAAE,2BAA2B;GACtC,UAAU;GACV,MAAM;EACR,CAAC;CACH,CAAC;CAGL,MAAM,+BAA+B,OAAO,OAAe;EACzD,MAAM,cAAc,EAAE;CAExB;CAEA,gBAAgB;EACd,IACE,iBAAiB,WACjB,iBAAiB,YAAY,QAC7B,CAAC,QAAQ,WAET;EACF,MAAM,eAAe,QAAQ,MAAM,YAAY,QAAQ,SAAS;EAChE,IAAI,cAAc;GAChB,iBAAiB,UAAU;GAC3B;EACF;CACF,GAAG,CAAC,SAAS,OAAO,CAAC;CAErB,MAAM,2BAA2B,YAAY;EAC3C,IAAI,CAAC,iBAAiB,SAGpB,IAAI,YAAY;GACd,MAAM,6BAA6B,QAAQ,EAAE;GAC7C;EACF,OAAO,MAAM,YAAY;EAE3B,MAAM,SAAS,iBAAiB;EAChC,IAAI,CAAC,QAAQ;GAEX,iBAAiB,UAAU;GAC3B;EACF;EAEA,IAAI,YAAY,MAAM,6BAA6B,QAAQ,EAAE;OACxD,WAAW,MAAM;CACxB;CAEA,IAAI,CAAC,SAAS,iBAAiB,OAAO;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAU;EAAyC,MAAK;YAA7D;GACE,oBAAC,kBAAD,CAAmB,CAAA;GACnB,oBAAC,QAAD,EAAA,UAAO,aAAa,EAAE,sBAAsB,IAAI,EAAE,qBAAqB,EAAQ,CAAA;GAC/E,oBAAC,QAAD,EAAA,UAAM,MAAS,CAAA;GACf,oBAAC,UAAD;IACE,WAAU;IACV,SAAS;IACT,MAAK;cAEJ,EAAE,MAAM;GACH,CAAA;EACL;;AAET"}
+{"version":3,"file":"MessageAlsoSentInChannelIndicator.mjs","names":[],"sources":["../../../../src/components/Message/MessageAlsoSentInChannelIndicator.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\nimport { useMessageAlsoSentInChannelNavigation } from './hooks';\n\nexport type MessageAlsoSentInChannelIndicatorProps = {\n  /**\n   * Overrides the \"View\" click handler. Defaults to the built-in reference navigation\n   * (`useMessageAlsoSentInChannelNavigation().viewReference`). Integrators can supply their own —\n   * e.g. to run extra layout side effects around the jump — by composing that hook, without\n   * re-implementing the component. Returning a promise is supported.\n   */\n  onView?: () => void | Promise<void>;\n};\n\n/**\n * Indicator shown when the message was also sent to the main channel (show_in_channel === true).\n * The navigation lives in {@link useMessageAlsoSentInChannelNavigation} so it can be reused.\n */\nexport const MessageAlsoSentInChannelIndicator = ({\n  onView,\n}: MessageAlsoSentInChannelIndicatorProps = {}) => {\n  const { IconArrowUpRight } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { isInThread, isShownInChannel, viewReference } =\n    useMessageAlsoSentInChannelNavigation();\n\n  if (!isShownInChannel) return null;\n\n  return (\n    <div className='str-chat__message-also-sent-in-channel' role='status'>\n      <IconArrowUpRight />\n      <span>\n        {isInThread\n          ? t('message.alsoSent.alsoSentChannel.text', 'Also sent in channel')\n          : t('message.alsoSent.repliedThread.text', 'Replied to a thread')}\n      </span>\n      <span> · </span>\n      <button\n        className='str-chat__message-also-sent-in-channel__link-button'\n        onClick={onView ?? viewReference}\n        type='button'\n      >\n        {t('message.alsoSent.view.text', 'View')}\n      </button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,qCAAqC,EAChD,WAC0C,CAAC,MAAM;CACjD,MAAM,EAAE,qBAAqB,yBAAyB;CACtD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,YAAY,kBAAkB,kBACpC,sCAAsC;CAExC,IAAI,CAAC,kBAAkB,OAAO;CAE9B,OACE,qBAAC,OAAD;EAAK,WAAU;EAAyC,MAAK;YAA7D;GACE,oBAAC,kBAAD,CAAmB,CAAA;GACnB,oBAAC,QAAD,EAAA,UACG,aACG,EAAE,yCAAyC,sBAAsB,IACjE,EAAE,uCAAuC,qBAAqB,EAC9D,CAAA;GACN,oBAAC,QAAD,EAAA,UAAM,MAAS,CAAA;GACf,oBAAC,UAAD;IACE,WAAU;IACV,SAAS,UAAU;IACnB,MAAK;cAEJ,EAAE,8BAA8B,MAAM;GACjC,CAAA;EACL;;AAET"}

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

@@ -7,7 +7,7 @@ import clsx from "clsx";
 //#region src/components/Message/MessageBlocked.tsx
 var MessageBlocked = () => {
 	const { message } = useMessageContext();
-	const { t } = useTranslationContext("MessageBlocked");
+	const { t } = useTranslationContext();
 	const { isMyMessage } = useUserRole(message);
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("str-chat__message str-chat__message--blocked", message.type, {
@@ -17,7 +17,7 @@ var MessageBlocked = () => {
 		"data-testid": "message-blocked-component",
 		children: /* @__PURE__ */ jsx("div", {
 			className: "str-chat__message--blocked-inner",
-			children: t("Message was blocked by moderation policies")
+			children: t("message.blocked.text", "Message was blocked by moderation policies")
 		})
 	}, message.id);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MessageBlocked.mjs","names":[],"sources":["../../../../src/components/Message/MessageBlocked.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { useUserRole } from './hooks/useUserRole';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useMessageContext } from '../../context';\n\nexport const MessageBlocked = () => {\n  const { message } = useMessageContext();\n  const { t } = useTranslationContext('MessageBlocked');\n\n  const { isMyMessage } = useUserRole(message);\n\n  const messageClasses = clsx(\n    'str-chat__message str-chat__message--blocked',\n    message.type,\n    {\n      'str-chat__message--me': isMyMessage,\n      'str-chat__message--other': !isMyMessage,\n    },\n  );\n\n  return (\n    <div\n      className={messageClasses}\n      data-testid='message-blocked-component'\n      key={message.id}\n    >\n      <div className='str-chat__message--blocked-inner'>\n        {t('Message was blocked by moderation policies')}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,uBAAuB;CAClC,MAAM,EAAE,YAAY,kBAAkB;CACtC,MAAM,EAAE,MAAM,sBAAsB,gBAAgB;CAEpD,MAAM,EAAE,gBAAgB,YAAY,OAAO;CAW3C,OACE,oBAAC,OAAD;EACE,WAXmB,KACrB,gDACA,QAAQ,MACR;GACE,yBAAyB;GACzB,4BAA4B,CAAC;EAC/B,CAKa;EACX,eAAY;YAGZ,oBAAC,OAAD;GAAK,WAAU;aACZ,EAAE,4CAA4C;EAC5C,CAAA;CACF,GALE,QAAQ,EAKV;AAET"}
+{"version":3,"file":"MessageBlocked.mjs","names":[],"sources":["../../../../src/components/Message/MessageBlocked.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { useUserRole } from './hooks/useUserRole';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useMessageContext } from '../../context';\n\nexport const MessageBlocked = () => {\n  const { message } = useMessageContext();\n  const { t } = useTranslationContext();\n\n  const { isMyMessage } = useUserRole(message);\n\n  const messageClasses = clsx(\n    'str-chat__message str-chat__message--blocked',\n    message.type,\n    {\n      'str-chat__message--me': isMyMessage,\n      'str-chat__message--other': !isMyMessage,\n    },\n  );\n\n  return (\n    <div\n      className={messageClasses}\n      data-testid='message-blocked-component'\n      key={message.id}\n    >\n      <div className='str-chat__message--blocked-inner'>\n        {t('message.blocked.text', 'Message was blocked by moderation policies')}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,uBAAuB;CAClC,MAAM,EAAE,YAAY,kBAAkB;CACtC,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,EAAE,gBAAgB,YAAY,OAAO;CAW3C,OACE,oBAAC,OAAD;EACE,WAXmB,KACrB,gDACA,QAAQ,MACR;GACE,yBAAyB;GACzB,4BAA4B,CAAC;EAC/B,CAKa;EACX,eAAY;YAGZ,oBAAC,OAAD;GAAK,WAAU;aACZ,EAAE,wBAAwB,4CAA4C;EACpE,CAAA;CACF,GALE,QAAQ,EAKV;AAET"}

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

@@ -1,6 +1,6 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { MessageBubble } from "./MessageBubble.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Message/MessageDeletedBubble.tsx
@@ -11,7 +11,7 @@ var MessageDeletedBubble = () => {
 		"data-testid": "message-deleted-bubble",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "str-chat__message-text",
-			children: [/* @__PURE__ */ jsx(IconNoSign, {}), /* @__PURE__ */ jsx("span", { children: t("Message deleted") })]
+			children: [/* @__PURE__ */ jsx(IconNoSign, {}), /* @__PURE__ */ jsx("span", { children: t("common.messageDeleted.text", "Message deleted") })]
 		})
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MessageDeletedBubble.mjs","names":[],"sources":["../../../../src/components/Message/MessageDeletedBubble.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useComponentContextIcons } from '../../context';\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nimport type { LocalMessage } from 'stream-chat';\nimport { MessageBubble } from './MessageBubble';\n\nexport type MessageDeletedProps = {\n  message: LocalMessage;\n};\n\nexport const MessageDeletedBubble = () => {\n  const { IconNoSign } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n\n  return (\n    <MessageBubble data-testid={'message-deleted-bubble'}>\n      <div className='str-chat__message-text'>\n        <IconNoSign />\n        <span>{t('Message deleted')}</span>\n      </div>\n    </MessageBubble>\n  );\n};\n"],"mappings":";;;;;;AAYA,IAAa,6BAA6B;CACxC,MAAM,EAAE,eAAe,yBAAyB;CAEhD,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,oBAAC,eAAD;EAAe,eAAa;YAC1B,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,YAAD,CAAa,CAAA,GACb,oBAAC,QAAD,EAAA,UAAO,EAAE,iBAAiB,EAAQ,CAAA,CAC/B;;CACQ,CAAA;AAEnB"}
+{"version":3,"file":"MessageDeletedBubble.mjs","names":[],"sources":["../../../../src/components/Message/MessageDeletedBubble.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nimport type { LocalMessage } from 'stream-chat';\nimport { MessageBubble } from './MessageBubble';\nimport { useComponentContextIcons } from '../../context';\n\nexport type MessageDeletedProps = {\n  message: LocalMessage;\n};\n\nexport const MessageDeletedBubble = () => {\n  const { IconNoSign } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  return (\n    <MessageBubble data-testid={'message-deleted-bubble'}>\n      <div className='str-chat__message-text'>\n        <IconNoSign />\n        <span>{t('common.messageDeleted.text', 'Message deleted')}</span>\n      </div>\n    </MessageBubble>\n  );\n};\n"],"mappings":";;;;;;AAYA,IAAa,6BAA6B;CACxC,MAAM,EAAE,eAAe,yBAAyB;CAChD,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,oBAAC,eAAD;EAAe,eAAa;YAC1B,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,YAAD,CAAa,CAAA,GACb,oBAAC,QAAD,EAAA,UAAO,EAAE,8BAA8B,iBAAiB,EAAQ,CAAA,CAC7D;;CACQ,CAAA;AAEnB"}

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

@@ -1,34 +1,35 @@
 import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { useMessageContext } from "../../context/MessageContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Timestamp } from "./Timestamp.mjs";
 import { PopperTooltip } from "../Tooltip/Tooltip.mjs";
 import { useEnterLeaveHandlers } from "../Tooltip/hooks/useEnterLeaveHandlers.mjs";
-import { Timestamp } from "./Timestamp.mjs";
 import React, { useState } from "react";
+import { convertTimestampToDate } from "stream-chat";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Message/MessageEditedIndicator.tsx
 var UnMemoizedMessageEditedIndicator = (props) => {
 	const { customClass, message: propMessage, ...timestampProps } = props;
-	const { message: contextMessage } = useMessageContext("MessageEditedIndicator");
-	const { t } = useTranslationContext("MessageEditedIndicator");
-	const { Timestamp: Timestamp$1 = Timestamp } = useComponentContext("MessageEditedIndicator");
+	const { message: contextMessage } = useMessageContext();
+	const { t } = useTranslationContext();
+	const { Timestamp: Timestamp$1 = Timestamp } = useComponentContext();
 	const message = propMessage ?? contextMessage;
 	const [referenceElement, setReferenceElement] = useState(null);
 	const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
-	if (!message?.message_text_updated_at) return null;
+	if (message?.message_text_updated_at == null) return null;
 	return /* @__PURE__ */ jsxs("span", {
 		className: customClass ?? "str-chat__message-edited-indicator",
 		"data-testid": "message-edited-indicator",
 		onMouseEnter: handleEnter,
 		onMouseLeave: handleLeave,
 		ref: setReferenceElement,
-		children: [t("Edited"), /* @__PURE__ */ jsx(PopperTooltip, {
+		children: [t("message.editedIndicator.edited.text", "Edited"), /* @__PURE__ */ jsx(PopperTooltip, {
 			offset: [0, 5],
 			placement: "top",
 			referenceElement,
 			visible: tooltipVisible,
 			children: /* @__PURE__ */ jsx(Timestamp$1, {
-				timestamp: message.message_text_updated_at,
+				timestamp: convertTimestampToDate(message.message_text_updated_at),
 				...timestampProps
 			})
 		})]

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

@@ -1 +1 @@
-{"version":3,"file":"MessageEditedIndicator.mjs","names":[],"sources":["../../../../src/components/Message/MessageEditedIndicator.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { LocalMessage } from 'stream-chat';\nimport type { TimestampFormatterOptions } from '../../i18n/types';\nimport { PopperTooltip } from '../Tooltip';\nimport { useEnterLeaveHandlers } from '../Tooltip/hooks';\nimport { Timestamp as DefaultTimestamp } from './Timestamp';\nimport {\n  useComponentContext,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\n\nexport type MessageEditedIndicatorProps = TimestampFormatterOptions & {\n  /* Adds a CSS class name to the component's outer 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 UnMemoizedMessageEditedIndicator = (props: MessageEditedIndicatorProps) => {\n  const { customClass, message: propMessage, ...timestampProps } = props;\n  const { message: contextMessage } = useMessageContext('MessageEditedIndicator');\n  const { t } = useTranslationContext('MessageEditedIndicator');\n  const { Timestamp = DefaultTimestamp } = useComponentContext('MessageEditedIndicator');\n  const message = propMessage ?? contextMessage;\n\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);\n  const { handleEnter, handleLeave, tooltipVisible } =\n    useEnterLeaveHandlers<HTMLSpanElement>();\n\n  if (!message?.message_text_updated_at) {\n    return null;\n  }\n\n  return (\n    <span\n      className={customClass ?? 'str-chat__message-edited-indicator'}\n      data-testid='message-edited-indicator'\n      onMouseEnter={handleEnter}\n      onMouseLeave={handleLeave}\n      ref={setReferenceElement}\n    >\n      {t('Edited')}\n      <PopperTooltip\n        offset={[0, 5]}\n        placement='top'\n        referenceElement={referenceElement}\n        visible={tooltipVisible}\n      >\n        <Timestamp timestamp={message.message_text_updated_at} {...timestampProps} />\n      </PopperTooltip>\n    </span>\n  );\n};\n\nexport const MessageEditedIndicator = React.memo(\n  UnMemoizedMessageEditedIndicator,\n) as typeof UnMemoizedMessageEditedIndicator;\n"],"mappings":";;;;;;;;;AAmBA,IAAM,oCAAoC,UAAuC;CAC/E,MAAM,EAAE,aAAa,SAAS,aAAa,GAAG,mBAAmB;CACjE,MAAM,EAAE,SAAS,mBAAmB,kBAAkB,wBAAwB;CAC9E,MAAM,EAAE,MAAM,sBAAsB,wBAAwB;CAC5D,MAAM,EAAE,WAAA,cAAY,cAAqB,oBAAoB,wBAAwB;CACrF,MAAM,UAAU,eAAe;CAE/B,MAAM,CAAC,kBAAkB,uBAAuB,SAAiC,IAAI;CACrF,MAAM,EAAE,aAAa,aAAa,mBAChC,sBAAuC;CAEzC,IAAI,CAAC,SAAS,yBACZ,OAAO;CAGT,OACE,qBAAC,QAAD;EACE,WAAW,eAAe;EAC1B,eAAY;EACZ,cAAc;EACd,cAAc;EACd,KAAK;YALP,CAOG,EAAE,QAAQ,GACX,oBAAC,eAAD;GACE,QAAQ,CAAC,GAAG,CAAC;GACb,WAAU;GACQ;GAClB,SAAS;aAET,oBAAC,aAAD;IAAW,WAAW,QAAQ;IAAyB,GAAI;GAAiB,CAAA;EAC/D,CAAA,CACX;;AAEV;AAEA,IAAa,yBAAyB,MAAM,KAC1C,gCACF"}
+{"version":3,"file":"MessageEditedIndicator.mjs","names":[],"sources":["../../../../src/components/Message/MessageEditedIndicator.tsx"],"sourcesContent":["import { convertTimestampToDate } from 'stream-chat';\nimport React, { useState } from 'react';\nimport type { LocalMessage } from 'stream-chat';\nimport type { TimestampFormatterOptions } from '../../i18n/types';\nimport { PopperTooltip } from '../Tooltip';\nimport { useEnterLeaveHandlers } from '../Tooltip/hooks';\nimport { Timestamp as DefaultTimestamp } from './Timestamp';\nimport {\n  useComponentContext,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\n\nexport type MessageEditedIndicatorProps = TimestampFormatterOptions & {\n  /* Adds a CSS class name to the component's outer 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 UnMemoizedMessageEditedIndicator = (props: MessageEditedIndicatorProps) => {\n  const { customClass, message: propMessage, ...timestampProps } = props;\n  const { message: contextMessage } = useMessageContext();\n  const { t } = useTranslationContext();\n  const { Timestamp = DefaultTimestamp } = useComponentContext();\n  const message = propMessage ?? contextMessage;\n\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);\n  const { handleEnter, handleLeave, tooltipVisible } =\n    useEnterLeaveHandlers<HTMLSpanElement>();\n\n  if (message?.message_text_updated_at == null) {\n    return null;\n  }\n\n  return (\n    <span\n      className={customClass ?? 'str-chat__message-edited-indicator'}\n      data-testid='message-edited-indicator'\n      onMouseEnter={handleEnter}\n      onMouseLeave={handleLeave}\n      ref={setReferenceElement}\n    >\n      {t('message.editedIndicator.edited.text', 'Edited')}\n      <PopperTooltip\n        offset={[0, 5]}\n        placement='top'\n        referenceElement={referenceElement}\n        visible={tooltipVisible}\n      >\n        <Timestamp\n          timestamp={convertTimestampToDate(message.message_text_updated_at)}\n          {...timestampProps}\n        />\n      </PopperTooltip>\n    </span>\n  );\n};\n\nexport const MessageEditedIndicator = React.memo(\n  UnMemoizedMessageEditedIndicator,\n) as typeof UnMemoizedMessageEditedIndicator;\n"],"mappings":";;;;;;;;;;AAoBA,IAAM,oCAAoC,UAAuC;CAC/E,MAAM,EAAE,aAAa,SAAS,aAAa,GAAG,mBAAmB;CACjE,MAAM,EAAE,SAAS,mBAAmB,kBAAkB;CACtD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAA,cAAY,cAAqB,oBAAoB;CAC7D,MAAM,UAAU,eAAe;CAE/B,MAAM,CAAC,kBAAkB,uBAAuB,SAAiC,IAAI;CACrF,MAAM,EAAE,aAAa,aAAa,mBAChC,sBAAuC;CAEzC,IAAI,SAAS,2BAA2B,MACtC,OAAO;CAGT,OACE,qBAAC,QAAD;EACE,WAAW,eAAe;EAC1B,eAAY;EACZ,cAAc;EACd,cAAc;EACd,KAAK;YALP,CAOG,EAAE,uCAAuC,QAAQ,GAClD,oBAAC,eAAD;GACE,QAAQ,CAAC,GAAG,CAAC;GACb,WAAU;GACQ;GAClB,SAAS;aAET,oBAAC,aAAD;IACE,WAAW,uBAAuB,QAAQ,uBAAuB;IACjE,GAAI;GACL,CAAA;EACY,CAAA,CACX;;AAEV;AAEA,IAAa,yBAAyB,MAAM,KAC1C,gCACF"}

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

@@ -1,19 +1,54 @@
-import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
 import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { MessageContext } from "../../context/MessageContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { AvatarStack } from "../Avatar/AvatarStack.mjs";
 import { extractDisplayInfo } from "../Avatar/utils.mjs";
-import React, { useMemo } from "react";
+import { useChannel } from "../../context/useChannel.mjs";
+import { useWorkspaceNavigation } from "../../context/WorkspaceNavigationContext.mjs";
+import React, { useCallback, useContext, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Message/MessageRepliesCountButton.tsx
 function UnMemoizedMessageRepliesCountButton(props) {
-	const { AvatarStack: AvatarStack$1 = AvatarStack, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext(MessageRepliesCountButton.name);
-	const { labelPlural, labelSingle, onClick, reply_count: replyCount = 0, thread_participants: threadParticipants = [] } = props;
-	const { channelCapabilities } = useChannelStateContext();
-	const { t } = useTranslationContext("MessageRepliesCountButton");
+	const { AvatarStack: AvatarStack$1 = AvatarStack, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
+	const { labelPlural, labelSingle, onClick, reply_count: replyCountFromProps = 0, thread_participants: threadParticipantsFromProps = [] } = props;
+	const { message: contextMessage } = useContext(MessageContext) ?? {};
+	const channel = useChannel();
+	const { openThread } = useWorkspaceNavigation();
+	const replyMetadataSelector = useMemo(() => () => {
+		const targetMessage = contextMessage?.id ? channel.messagePaginator.getItem(contextMessage.id) : void 0;
+		return {
+			replyCountFromPaginator: targetMessage?.reply_count,
+			threadParticipantsFromPaginator: targetMessage?.thread_participants
+		};
+	}, [channel.messagePaginator, contextMessage?.id]);
+	const { replyCountFromPaginator, threadParticipantsFromPaginator } = useStateStore(channel.messagePaginator.state, replyMetadataSelector) ?? {};
+	const replyCount = replyCountFromPaginator ?? replyCountFromProps;
+	const threadParticipants = threadParticipantsFromPaginator ?? threadParticipantsFromProps;
+	const { t } = useTranslationContext();
 	const avatarStackDisplayInfo = useMemo(() => threadParticipants.slice(0, 3).map((user) => extractDisplayInfo$1({ user })), [extractDisplayInfo$1, threadParticipants]);
+	const handleClick = useCallback((event) => {
+		if (onClick) {
+			onClick(event);
+			return;
+		}
+		if (!contextMessage) return;
+		openThread({
+			channel,
+			message: contextMessage
+		});
+	}, [
+		channel,
+		contextMessage,
+		onClick,
+		openThread
+	]);
 	if (!replyCount) return null;
-	let replyCountText = t("replyCount", { count: replyCount });
+	let replyCountText = t("common.replyCount.label", {
+		count: replyCount,
+		defaultValue_one: "1 reply",
+		defaultValue_other: "{{ count }} replies"
+	});
 	if (labelPlural && replyCount > 1) replyCountText = `${replyCount} ${labelPlural}`;
 	else if (labelSingle) replyCountText = `1 ${labelSingle}`;
 	return /* @__PURE__ */ jsx("div", {
@@ -21,8 +56,7 @@ function UnMemoizedMessageRepliesCountButton(props) {
 		children: /* @__PURE__ */ jsxs("button", {
 			className: "str-chat__message-replies-count-button",
 			"data-testid": "replies-count-button",
-			disabled: !channelCapabilities["send-reply"],
-			onClick,
+			onClick: handleClick,
 			children: [replyCountText, /* @__PURE__ */ jsx(AvatarStack$1, {
 				displayInfo: avatarStackDisplayInfo,
 				size: "xs"

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

@@ -1 +1 @@
-{"version":3,"file":"MessageRepliesCountButton.mjs","names":[],"sources":["../../../../src/components/Message/MessageRepliesCountButton.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react';\nimport type { UserResponse } from 'stream-chat';\nimport React, { useMemo } from 'react';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useChannelStateContext, useComponentContext } from '../../context';\nimport { AvatarStack as DefaultAvatarStack } from '../Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';\n\nexport type MessageRepliesCountButtonProps = {\n  /* If supplied, adds custom text to the end of a multiple replies message */\n  labelPlural?: string;\n  /* If supplied, adds custom text to the end of a single reply message */\n  labelSingle?: string;\n  /* Function to navigate into an existing thread on a message */\n  onClick?: MouseEventHandler;\n  /* The amount of replies (i.e., threaded messages) on a message */\n  reply_count?: number;\n  thread_participants?: UserResponse[];\n};\n\nfunction UnMemoizedMessageRepliesCountButton(props: MessageRepliesCountButtonProps) {\n  const {\n    AvatarStack = DefaultAvatarStack,\n    extractDisplayInfo = defaultExtractDisplayInfo,\n  } = useComponentContext(MessageRepliesCountButton.name);\n  const {\n    labelPlural,\n    labelSingle,\n    onClick,\n    reply_count: replyCount = 0,\n    thread_participants: threadParticipants = [],\n  } = props;\n  const { channelCapabilities } = useChannelStateContext();\n\n  const { t } = useTranslationContext('MessageRepliesCountButton');\n\n  const avatarStackDisplayInfo = useMemo(\n    () => threadParticipants.slice(0, 3).map((user) => extractDisplayInfo({ user })),\n    [extractDisplayInfo, threadParticipants],\n  );\n\n  if (!replyCount) return null;\n\n  let replyCountText = t('replyCount', { count: replyCount });\n\n  if (labelPlural && replyCount > 1) {\n    replyCountText = `${replyCount} ${labelPlural}`;\n  } else if (labelSingle) {\n    replyCountText = `1 ${labelSingle}`;\n  }\n\n  return (\n    <div className='str-chat__message-replies-count-button-wrapper'>\n      <button\n        className='str-chat__message-replies-count-button'\n        data-testid='replies-count-button'\n        disabled={!channelCapabilities['send-reply']}\n        onClick={onClick}\n      >\n        {replyCountText}\n\n        <AvatarStack displayInfo={avatarStackDisplayInfo} size='xs' />\n      </button>\n    </div>\n  );\n}\n\nexport const MessageRepliesCountButton = React.memo(\n  UnMemoizedMessageRepliesCountButton,\n) as typeof UnMemoizedMessageRepliesCountButton;\n"],"mappings":";;;;;;;;AAqBA,SAAS,oCAAoC,OAAuC;CAClF,MAAM,EACJ,aAAA,gBAAc,aACd,oBAAA,uBAAqB,uBACnB,oBAAoB,0BAA0B,IAAI;CACtD,MAAM,EACJ,aACA,aACA,SACA,aAAa,aAAa,GAC1B,qBAAqB,qBAAqB,CAAC,MACzC;CACJ,MAAM,EAAE,wBAAwB,uBAAuB;CAEvD,MAAM,EAAE,MAAM,sBAAsB,2BAA2B;CAE/D,MAAM,yBAAyB,cACvB,mBAAmB,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,SAAS,qBAAmB,EAAE,KAAK,CAAC,CAAC,GAC/E,CAAC,sBAAoB,kBAAkB,CACzC;CAEA,IAAI,CAAC,YAAY,OAAO;CAExB,IAAI,iBAAiB,EAAE,cAAc,EAAE,OAAO,WAAW,CAAC;CAE1D,IAAI,eAAe,aAAa,GAC9B,iBAAiB,GAAG,WAAW,GAAG;MAC7B,IAAI,aACT,iBAAiB,KAAK;CAGxB,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,UAAD;GACE,WAAU;GACV,eAAY;GACZ,UAAU,CAAC,oBAAoB;GACtB;aAJX,CAMG,gBAED,oBAAC,eAAD;IAAa,aAAa;IAAwB,MAAK;GAAM,CAAA,CACvD;;CACL,CAAA;AAET;AAEA,IAAa,4BAA4B,MAAM,KAC7C,mCACF"}
+{"version":3,"file":"MessageRepliesCountButton.mjs","names":[],"sources":["../../../../src/components/Message/MessageRepliesCountButton.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport type { UserResponse } from 'stream-chat';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport {\n  MessageContext,\n  useChannel,\n  useComponentContext,\n  useWorkspaceNavigation,\n} from '../../context';\nimport { useStateStore } from '../../store';\nimport { AvatarStack as DefaultAvatarStack } from '../Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';\n\nexport type MessageRepliesCountButtonProps = {\n  /* If supplied, adds custom text to the end of a multiple replies message */\n  labelPlural?: string;\n  /* If supplied, adds custom text to the end of a single reply message */\n  labelSingle?: string;\n  /* Function to navigate into an existing thread on a message */\n  onClick?: MouseEventHandler;\n  /* The amount of replies (i.e., threaded messages) on a message */\n  reply_count?: number;\n  thread_participants?: UserResponse[];\n};\n\nfunction UnMemoizedMessageRepliesCountButton(props: MessageRepliesCountButtonProps) {\n  const {\n    AvatarStack = DefaultAvatarStack,\n    extractDisplayInfo = defaultExtractDisplayInfo,\n  } = useComponentContext();\n  const {\n    labelPlural,\n    labelSingle,\n    onClick,\n    reply_count: replyCountFromProps = 0,\n    thread_participants: threadParticipantsFromProps = [],\n  } = props;\n  // reply counts also render outside a message, from props alone\n  const { message: contextMessage } = useContext(MessageContext) ?? {};\n  const channel = useChannel();\n  const { openThread } = useWorkspaceNavigation();\n  const replyMetadataSelector = useMemo(\n    () => () => {\n      const targetMessage = contextMessage?.id\n        ? channel.messagePaginator.getItem(contextMessage.id)\n        : undefined;\n\n      return {\n        replyCountFromPaginator: targetMessage?.reply_count,\n        threadParticipantsFromPaginator: targetMessage?.thread_participants,\n      };\n    },\n    [channel.messagePaginator, contextMessage?.id],\n  );\n  const { replyCountFromPaginator, threadParticipantsFromPaginator } =\n    useStateStore(channel.messagePaginator.state, replyMetadataSelector) ?? {};\n  const replyCount = replyCountFromPaginator ?? replyCountFromProps;\n  const threadParticipants =\n    threadParticipantsFromPaginator ?? threadParticipantsFromProps;\n\n  const { t } = useTranslationContext();\n\n  const avatarStackDisplayInfo = useMemo(\n    () => threadParticipants.slice(0, 3).map((user) => extractDisplayInfo({ user })),\n    [extractDisplayInfo, threadParticipants],\n  );\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (event) => {\n      if (onClick) {\n        onClick(event);\n        return;\n      }\n\n      if (!contextMessage) return;\n      void openThread({ channel, message: contextMessage });\n    },\n    [channel, contextMessage, onClick, openThread],\n  );\n\n  if (!replyCount) return null;\n\n  let replyCountText = t('common.replyCount.label', {\n    count: replyCount,\n    defaultValue_one: '1 reply',\n    defaultValue_other: '{{ count }} replies',\n  });\n\n  if (labelPlural && replyCount > 1) {\n    replyCountText = `${replyCount} ${labelPlural}`;\n  } else if (labelSingle) {\n    replyCountText = `1 ${labelSingle}`;\n  }\n\n  return (\n    <div className='str-chat__message-replies-count-button-wrapper'>\n      <button\n        className='str-chat__message-replies-count-button'\n        data-testid='replies-count-button'\n        onClick={handleClick}\n      >\n        {replyCountText}\n\n        <AvatarStack displayInfo={avatarStackDisplayInfo} size='xs' />\n      </button>\n    </div>\n  );\n}\n\nexport const MessageRepliesCountButton = React.memo(\n  UnMemoizedMessageRepliesCountButton,\n) as typeof UnMemoizedMessageRepliesCountButton;\n"],"mappings":";;;;;;;;;;;AA2BA,SAAS,oCAAoC,OAAuC;CAClF,MAAM,EACJ,aAAA,gBAAc,aACd,oBAAA,uBAAqB,uBACnB,oBAAoB;CACxB,MAAM,EACJ,aACA,aACA,SACA,aAAa,sBAAsB,GACnC,qBAAqB,8BAA8B,CAAC,MAClD;CAEJ,MAAM,EAAE,SAAS,mBAAmB,WAAW,cAAc,KAAK,CAAC;CACnE,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,eAAe,uBAAuB;CAC9C,MAAM,wBAAwB,oBAChB;EACV,MAAM,gBAAgB,gBAAgB,KAClC,QAAQ,iBAAiB,QAAQ,eAAe,EAAE,IAClD,KAAA;EAEJ,OAAO;GACL,yBAAyB,eAAe;GACxC,iCAAiC,eAAe;EAClD;CACF,GACA,CAAC,QAAQ,kBAAkB,gBAAgB,EAAE,CAC/C;CACA,MAAM,EAAE,yBAAyB,oCAC/B,cAAc,QAAQ,iBAAiB,OAAO,qBAAqB,KAAK,CAAC;CAC3E,MAAM,aAAa,2BAA2B;CAC9C,MAAM,qBACJ,mCAAmC;CAErC,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,yBAAyB,cACvB,mBAAmB,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,SAAS,qBAAmB,EAAE,KAAK,CAAC,CAAC,GAC/E,CAAC,sBAAoB,kBAAkB,CACzC;CAEA,MAAM,cAAc,aACjB,UAAU;EACT,IAAI,SAAS;GACX,QAAQ,KAAK;GACb;EACF;EAEA,IAAI,CAAC,gBAAgB;EACrB,WAAgB;GAAE;GAAS,SAAS;EAAe,CAAC;CACtD,GACA;EAAC;EAAS;EAAgB;EAAS;CAAU,CAC/C;CAEA,IAAI,CAAC,YAAY,OAAO;CAExB,IAAI,iBAAiB,EAAE,2BAA2B;EAChD,OAAO;EACP,kBAAkB;EAClB,oBAAoB;CACtB,CAAC;CAED,IAAI,eAAe,aAAa,GAC9B,iBAAiB,GAAG,WAAW,GAAG;MAC7B,IAAI,aACT,iBAAiB,KAAK;CAGxB,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,UAAD;GACE,WAAU;GACV,eAAY;GACZ,SAAS;aAHX,CAKG,gBAED,oBAAC,eAAD;IAAa,aAAa;IAAwB,MAAK;GAAM,CAAA,CACvD;;CACL,CAAA;AAET;AAEA,IAAa,4BAA4B,MAAM,KAC7C,mCACF"}

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

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