stream-chat-react 14.11.1 → 14.12.0

package/dist/es/components/MediaRecorder/transcode/wav.mjs

@@ -0,0 +1,99 @@
+import { renderAudio, toAudioBuffer } from "./audioProcessing.mjs";
+//#region src/components/MediaRecorder/transcode/wav.ts
+var WAV_HEADER_LENGTH_BYTES = 44;
+var BYTES_PER_SAMPLE = 2;
+var RIFF_FILE_MAX_BYTES = 4294967295;
+var HEADER = {
+	AUDIO_FORMAT: {
+		offset: 20,
+		value: 1
+	},
+	BITS_PER_SAMPLE: {
+		offset: 34,
+		value: BYTES_PER_SAMPLE * 8
+	},
+	BLOCK_ALIGN: { offset: 32 },
+	BYTE_RATE: { offset: 28 },
+	CHANNEL_COUNT: { offset: 22 },
+	CHUNK_ID: {
+		offset: 0,
+		value: 1380533830
+	},
+	CHUNK_SIZE: { offset: 4 },
+	FILE_FORMAT: {
+		offset: 8,
+		value: 1463899717
+	},
+	SAMPLE_RATE: { offset: 24 },
+	SUBCHUNK1_ID: {
+		offset: 12,
+		value: 1718449184
+	},
+	SUBCHUNK1_SIZE: {
+		offset: 16,
+		value: 16
+	},
+	SUBCHUNK2_ID: {
+		offset: 36,
+		value: 1684108385
+	},
+	SUBCHUNK2_SIZE: { offset: 40 }
+};
+var fourCharsToInt = (chars) => chars.charCodeAt(0) << 24 | chars.charCodeAt(1) << 16 | chars.charCodeAt(2) << 8 | chars.charCodeAt(3);
+fourCharsToInt("data"), fourCharsToInt("fmt "), fourCharsToInt("RIFF"), fourCharsToInt("WAVE");
+var writeWavHeader = ({ arrayBuffer, channelCount, sampleRate }) => {
+	const byteRate = sampleRate * channelCount * BYTES_PER_SAMPLE;
+	const blockAlign = channelCount * BYTES_PER_SAMPLE;
+	const dataView = new DataView(arrayBuffer);
+	const dataChunkSize = Math.min(dataView.byteLength - WAV_HEADER_LENGTH_BYTES, RIFF_FILE_MAX_BYTES - WAV_HEADER_LENGTH_BYTES);
+	dataView.setUint32(HEADER.CHUNK_ID.offset, HEADER.CHUNK_ID.value);
+	dataView.setUint32(HEADER.CHUNK_SIZE.offset, arrayBuffer.byteLength - 8, true);
+	dataView.setUint32(HEADER.FILE_FORMAT.offset, HEADER.FILE_FORMAT.value);
+	dataView.setUint32(HEADER.SUBCHUNK1_ID.offset, HEADER.SUBCHUNK1_ID.value);
+	dataView.setUint32(HEADER.SUBCHUNK1_SIZE.offset, HEADER.SUBCHUNK1_SIZE.value, true);
+	dataView.setUint16(HEADER.AUDIO_FORMAT.offset, HEADER.AUDIO_FORMAT.value, true);
+	dataView.setUint16(HEADER.CHANNEL_COUNT.offset, channelCount, true);
+	dataView.setUint32(HEADER.SAMPLE_RATE.offset, sampleRate, true);
+	dataView.setUint32(HEADER.BYTE_RATE.offset, byteRate, true);
+	dataView.setUint16(HEADER.BLOCK_ALIGN.offset, blockAlign, true);
+	dataView.setUint16(HEADER.BITS_PER_SAMPLE.offset, HEADER.BITS_PER_SAMPLE.value, true);
+	dataView.setUint32(HEADER.SUBCHUNK2_ID.offset, HEADER.SUBCHUNK2_ID.value);
+	dataView.setUint32(HEADER.SUBCHUNK2_SIZE.offset, dataChunkSize, true);
+};
+var splitDataByChannel = (audioBuffer) => Array.from({ length: audioBuffer.numberOfChannels }, (_, i) => audioBuffer.getChannelData(i));
+/**
+* In a WAV file, samples for each channel are usually interleaved, meaning samples from each channel are grouped together sequentially.
+* For example, in a stereo audio file (2 channels), samples alternate between the left and right channels.
+* @param arrayBuffer
+* @param dataByChannel
+*/
+var writeWavAudioData = ({ arrayBuffer, dataByChannel }) => {
+	const dataView = new DataView(arrayBuffer);
+	const channelCount = dataByChannel.length;
+	dataByChannel.forEach((channelData, channelIndex) => {
+		let writeOffset = WAV_HEADER_LENGTH_BYTES + channelCount * channelIndex;
+		channelData.forEach((float32Value) => {
+			dataView.setInt16(writeOffset, float32Value < 0 ? Math.max(-1, float32Value) * 32768 : Math.min(1, float32Value) * 32767, true);
+			writeOffset += channelCount * BYTES_PER_SAMPLE;
+		});
+	});
+};
+var encodeToWaw = async (file, sampleRate) => {
+	const audioBuffer = await renderAudio(await toAudioBuffer(file), sampleRate);
+	const fileSizeBytes = audioBuffer.duration * sampleRate * audioBuffer.numberOfChannels * BYTES_PER_SAMPLE + WAV_HEADER_LENGTH_BYTES;
+	const arrayBuffer = new ArrayBuffer(fileSizeBytes);
+	writeWavHeader({
+		arrayBuffer,
+		channelCount: audioBuffer.numberOfChannels,
+		sampleRate
+	});
+	writeWavAudioData({
+		arrayBuffer,
+		dataByChannel: splitDataByChannel(audioBuffer)
+	});
+	return new Blob([arrayBuffer], { type: "audio/wav" });
+};
+//#endregion
+export { encodeToWaw };
+
+//# sourceMappingURL=wav.mjs.map

package/dist/es/components/MediaRecorder/transcode/wav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"wav.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/transcode/wav.ts"],"sourcesContent":["import { renderAudio, toAudioBuffer } from './audioProcessing';\n\nconst WAV_HEADER_LENGTH_BYTES = 44 as const;\nconst BYTES_PER_SAMPLE = 2 as const;\nconst RIFF_FILE_MAX_BYTES = 4294967295 as const;\n\nconst HEADER = {\n  AUDIO_FORMAT: { offset: 20, value: 1 }, // PCM = 1\n  BITS_PER_SAMPLE: { offset: 34, value: BYTES_PER_SAMPLE * 8 }, // 16 bits encoding\n  BLOCK_ALIGN: { offset: 32 },\n  BYTE_RATE: { offset: 28 },\n  CHANNEL_COUNT: { offset: 22 }, // 1 - mono, 2 - stereo\n  CHUNK_ID: { offset: 0, value: 0x52494646 }, // hex representation of string \"RIFF\" (Resource Interchange File Format) - identifies the file structure that defines a class of more specific file formats, e.g. WAVE\n  CHUNK_SIZE: { offset: 4 },\n  FILE_FORMAT: { offset: 8, value: 0x57415645 }, // hex representation of string \"WAVE\"\n  SAMPLE_RATE: { offset: 24 },\n  SUBCHUNK1_ID: { offset: 12, value: 0x666d7420 }, // hex representation of string \"fmt \" - identifies the start of \"format\" section of the header\n  SUBCHUNK1_SIZE: { offset: 16, value: 16 }, // Subchunk1 Size without SUBCHUNK1_ID and SUBCHUNK1_SIZE fields\n  SUBCHUNK2_ID: { offset: 36, value: 0x64617461 }, // hex representation of string \"data\" - identifies the start of actual audio data section\n  SUBCHUNK2_SIZE: { offset: 40 }, // actual audio data size\n} as const;\n\nconst fourCharsToInt = (chars: string) =>\n  (chars.charCodeAt(0) << 24) |\n  (chars.charCodeAt(1) << 16) |\n  (chars.charCodeAt(2) << 8) |\n  chars.charCodeAt(3);\n\nconst WAV_HEADER_FLAGS = {\n  data: fourCharsToInt('data'),\n  fmt: fourCharsToInt('fmt '),\n  RIFF: fourCharsToInt('RIFF'),\n  WAVE: fourCharsToInt('WAVE'),\n};\n\ntype WriteWaveHeaderParams = {\n  arrayBuffer: ArrayBuffer;\n  // 1 - mono, 2 - stereo\n  channelCount: number;\n  // Number of samples per second, e.g. 44100Hz\n  sampleRate: number;\n};\nconst writeWavHeader = ({\n  arrayBuffer,\n  channelCount,\n  sampleRate,\n}: WriteWaveHeaderParams) => {\n  const byteRate = sampleRate * channelCount * BYTES_PER_SAMPLE; // bytes/sec\n  const blockAlign = channelCount * BYTES_PER_SAMPLE;\n\n  const dataView = new DataView(arrayBuffer);\n  /*\n   * The maximum size of a RIFF file is 4294967295 bytes and since the header takes up 44 bytes there are 4294967251 bytes left for the\n   * data chunk.\n   */\n  const dataChunkSize = Math.min(\n    dataView.byteLength - WAV_HEADER_LENGTH_BYTES,\n    RIFF_FILE_MAX_BYTES - WAV_HEADER_LENGTH_BYTES,\n  );\n\n  dataView.setUint32(HEADER.CHUNK_ID.offset, HEADER.CHUNK_ID.value); // \"RIFF\"\n  dataView.setUint32(HEADER.CHUNK_SIZE.offset, arrayBuffer.byteLength - 8, true); // adjustment for the first two headers - chunk id + file size\n  dataView.setUint32(HEADER.FILE_FORMAT.offset, HEADER.FILE_FORMAT.value); // \"WAVE\"\n\n  dataView.setUint32(HEADER.SUBCHUNK1_ID.offset, HEADER.SUBCHUNK1_ID.value); // \"fmt \"\n  dataView.setUint32(HEADER.SUBCHUNK1_SIZE.offset, HEADER.SUBCHUNK1_SIZE.value, true);\n  dataView.setUint16(HEADER.AUDIO_FORMAT.offset, HEADER.AUDIO_FORMAT.value, true);\n  dataView.setUint16(HEADER.CHANNEL_COUNT.offset, channelCount, true);\n  dataView.setUint32(HEADER.SAMPLE_RATE.offset, sampleRate, true);\n  dataView.setUint32(HEADER.BYTE_RATE.offset, byteRate, true);\n  dataView.setUint16(HEADER.BLOCK_ALIGN.offset, blockAlign, true);\n  dataView.setUint16(HEADER.BITS_PER_SAMPLE.offset, HEADER.BITS_PER_SAMPLE.value, true);\n\n  dataView.setUint32(HEADER.SUBCHUNK2_ID.offset, HEADER.SUBCHUNK2_ID.value); // \"data\"\n  dataView.setUint32(HEADER.SUBCHUNK2_SIZE.offset, dataChunkSize, true);\n};\n\nexport const readWavHeader = (dataView: DataView) => {\n  const header = dataView.getUint32(0, false);\n  if (WAV_HEADER_FLAGS.RIFF !== header) {\n    console.error('Missing RIFF header in WAVE file');\n    return;\n  }\n  if (WAV_HEADER_FLAGS.WAVE !== dataView.getUint32(HEADER.FILE_FORMAT.offset, false)) {\n    console.error('Missing WAVE header in WAVE file');\n    return;\n  }\n  if (WAV_HEADER_FLAGS.fmt !== dataView.getUint32(HEADER.SUBCHUNK1_ID.offset, false)) {\n    console.error('Missing fmt header in WAVE file');\n    return;\n  }\n\n  return {\n    audioDataSizeBytes: dataView.getUint32(HEADER.SUBCHUNK2_SIZE.offset, true),\n    audioDataStartOffset: WAV_HEADER_LENGTH_BYTES,\n    channelCount: dataView.getUint16(HEADER.CHANNEL_COUNT.offset, true),\n    sampleRate: dataView.getUint32(HEADER.SAMPLE_RATE.offset, true),\n  };\n};\n\nconst splitDataByChannel = (audioBuffer: AudioBuffer) =>\n  Array.from({ length: audioBuffer.numberOfChannels }, (_, i) =>\n    audioBuffer.getChannelData(i),\n  );\n\ntype WriteAudioDataParams = {\n  arrayBuffer: ArrayBuffer;\n  dataByChannel: Float32Array[];\n};\n\n/**\n * In a WAV file, samples for each channel are usually interleaved, meaning samples from each channel are grouped together sequentially.\n * For example, in a stereo audio file (2 channels), samples alternate between the left and right channels.\n * @param arrayBuffer\n * @param dataByChannel\n */\nconst writeWavAudioData = ({ arrayBuffer, dataByChannel }: WriteAudioDataParams) => {\n  const dataView = new DataView(arrayBuffer);\n  const channelCount = dataByChannel.length;\n\n  dataByChannel.forEach((channelData, channelIndex) => {\n    let writeOffset = WAV_HEADER_LENGTH_BYTES + channelCount * channelIndex;\n\n    channelData.forEach((float32Value) => {\n      dataView.setInt16(\n        writeOffset,\n        float32Value < 0\n          ? Math.max(-1, float32Value) * 32768\n          : Math.min(1, float32Value) * 32767,\n        true,\n      );\n      writeOffset += channelCount * BYTES_PER_SAMPLE;\n    });\n  });\n};\n\nexport const encodeToWaw = async (file: File, sampleRate: number) => {\n  const audioBuffer = await renderAudio(await toAudioBuffer(file), sampleRate);\n  const numberOfSamples = audioBuffer.duration * sampleRate;\n  const fileSizeBytes =\n    numberOfSamples * audioBuffer.numberOfChannels * BYTES_PER_SAMPLE +\n    WAV_HEADER_LENGTH_BYTES;\n\n  const arrayBuffer = new ArrayBuffer(fileSizeBytes);\n  writeWavHeader({ arrayBuffer, channelCount: audioBuffer.numberOfChannels, sampleRate });\n  writeWavAudioData({ arrayBuffer, dataByChannel: splitDataByChannel(audioBuffer) });\n  return new Blob([arrayBuffer], { type: 'audio/wav' });\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,154 @@
+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 { useDeleteHandler } from "./hooks/useDeleteHandler.mjs";
+import { useFlagHandler } from "./hooks/useFlagHandler.mjs";
+import { useMentionsHandler } from "./hooks/useMentionsHandler.mjs";
+import { useMarkUnreadHandler } from "./hooks/useMarkUnreadHandler.mjs";
+import { useMuteHandler } from "./hooks/useMuteHandler.mjs";
+import { useOpenThreadHandler } from "./hooks/useOpenThreadHandler.mjs";
+import { usePinHandler } from "./hooks/usePinHandler.mjs";
+import { useReactionHandler } from "./hooks/useReactionHandler.mjs";
+import { useRetryHandler } from "./hooks/useRetryHandler.mjs";
+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 { 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 { 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;
+	return /* @__PURE__ */ jsx(MessageProvider, {
+		value: {
+			...rest,
+			actionsEnabled,
+			getMessageActions: messageActionsHandler,
+			isMessageAIGenerated,
+			isMyMessage: () => isMyMessage,
+			messageIsUnread,
+			onUserClick,
+			onUserHover,
+			setTranslationView,
+			translationView
+		},
+		children: /* @__PURE__ */ jsx(MessageUIComponent, {})
+	});
+};
+var MemoizedMessage = React.memo(MessageWithContext, areMessagePropsEqual);
+/**
+* The Message component is a context provider which implements all the logic required for rendering
+* 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 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);
+	const handleFlag = useFlagHandler(message);
+	const handleMarkUnread = useMarkUnreadHandler(message);
+	const handleMute = useMuteHandler(message);
+	const { onMentionsClick, onMentionsHover } = useMentionsHandler(message, {
+		onMentionsClick: propOnMentionsClick,
+		onMentionsHover: propOnMentionsHover
+	});
+	const { canPin, handlePin } = usePinHandler(message);
+	const highlighted = highlightedMessageId === message.id;
+	return /* @__PURE__ */ jsx(MemoizedMessage, {
+		additionalMessageComposerProps: props.additionalMessageComposerProps,
+		autoscrollToBottom: props.autoscrollToBottom,
+		canPin,
+		closeReactionSelectorOnClick,
+		deliveredTo: props.deliveredTo,
+		disableQuotedMessages: props.disableQuotedMessages,
+		formatDate: props.formatDate,
+		groupStyles: props.groupStyles,
+		handleAction,
+		handleDelete,
+		handleFetchReactions,
+		handleFlag,
+		handleMarkUnread,
+		handleMute,
+		handleOpenThread,
+		handlePin,
+		handleReaction,
+		handleRetry,
+		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,
+		onUserHover: props.onUserHover,
+		reactionDetailsSort,
+		readBy: props.readBy,
+		renderText: props.renderText,
+		returnAllReadData: props.returnAllReadData,
+		sortReactions,
+		threadList: props.threadList,
+		unsafeHTML: props.unsafeHTML,
+		userRoles
+	});
+};
+//#endregion
+export { Message };
+
+//# sourceMappingURL=Message.mjs.map

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

@@ -0,0 +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":"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"}

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

@@ -0,0 +1,79 @@
+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 { 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).
+*/
+var MessageAlsoSentInChannelIndicator = () => {
+	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;
+	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: " · " }),
+			/* @__PURE__ */ jsx("button", {
+				className: "str-chat__message-also-sent-in-channel__link-button",
+				onClick: handleClickViewReference,
+				type: "button",
+				children: t("View")
+			})
+		]
+	});
+};
+//#endregion
+export { MessageAlsoSentInChannelIndicator };
+
+//# sourceMappingURL=MessageAlsoSentInChannelIndicator.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,27 @@
+import { useMessageContext } from "../../context/MessageContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useUserRole } from "./hooks/useUserRole.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Message/MessageBlocked.tsx
+var MessageBlocked = () => {
+	const { message } = useMessageContext();
+	const { t } = useTranslationContext("MessageBlocked");
+	const { isMyMessage } = useUserRole(message);
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__message str-chat__message--blocked", message.type, {
+			"str-chat__message--me": isMyMessage,
+			"str-chat__message--other": !isMyMessage
+		}),
+		"data-testid": "message-blocked-component",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "str-chat__message--blocked-inner",
+			children: t("Message was blocked by moderation policies")
+		})
+	}, message.id);
+};
+//#endregion
+export { MessageBlocked };
+
+//# sourceMappingURL=MessageBlocked.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,12 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Message/MessageBubble.tsx
+var MessageBubble = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	className: clsx("str-chat__message-bubble", className)
+});
+//#endregion
+export { MessageBubble };
+
+//# sourceMappingURL=MessageBubble.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBubble.mjs","names":[],"sources":["../../../../src/components/Message/MessageBubble.tsx"],"sourcesContent":["import React, { type ComponentProps } from 'react';\nimport clsx from 'clsx';\n\nexport const MessageBubble = ({ className, ...props }: ComponentProps<'div'>) => (\n  <div {...props} className={clsx('str-chat__message-bubble', className)} />\n);\n"],"mappings":";;;;AAGA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAC5C,oBAAC,OAAD;CAAK,GAAI;CAAO,WAAW,KAAK,4BAA4B,SAAS;AAAI,CAAA"}

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

@@ -0,0 +1,21 @@
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { MessageBubble } from "./MessageBubble.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Message/MessageDeletedBubble.tsx
+var MessageDeletedBubble = () => {
+	const { IconNoSign } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsx(MessageBubble, {
+		"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") })]
+		})
+	});
+};
+//#endregion
+export { MessageDeletedBubble };
+
+//# sourceMappingURL=MessageDeletedBubble.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,41 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useMessageContext } from "../../context/MessageContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.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 { 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 = propMessage ?? contextMessage;
+	const [referenceElement, setReferenceElement] = useState(null);
+	const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
+	if (!message?.message_text_updated_at) 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, {
+			offset: [0, 5],
+			placement: "top",
+			referenceElement,
+			visible: tooltipVisible,
+			children: /* @__PURE__ */ jsx(Timestamp$1, {
+				timestamp: message.message_text_updated_at,
+				...timestampProps
+			})
+		})]
+	});
+};
+var MessageEditedIndicator = React.memo(UnMemoizedMessageEditedIndicator);
+//#endregion
+export { MessageEditedIndicator };
+
+//# sourceMappingURL=MessageEditedIndicator.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,37 @@
+import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.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 { 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 avatarStackDisplayInfo = useMemo(() => threadParticipants.slice(0, 3).map((user) => extractDisplayInfo$1({ user })), [extractDisplayInfo$1, threadParticipants]);
+	if (!replyCount) return null;
+	let replyCountText = t("replyCount", { count: replyCount });
+	if (labelPlural && replyCount > 1) replyCountText = `${replyCount} ${labelPlural}`;
+	else if (labelSingle) replyCountText = `1 ${labelSingle}`;
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__message-replies-count-button-wrapper",
+		children: /* @__PURE__ */ jsxs("button", {
+			className: "str-chat__message-replies-count-button",
+			"data-testid": "replies-count-button",
+			disabled: !channelCapabilities["send-reply"],
+			onClick,
+			children: [replyCountText, /* @__PURE__ */ jsx(AvatarStack$1, {
+				displayInfo: avatarStackDisplayInfo,
+				size: "xs"
+			})]
+		})
+	});
+}
+var MessageRepliesCountButton = React.memo(UnMemoizedMessageRepliesCountButton);
+//#endregion
+export { MessageRepliesCountButton };
+
+//# sourceMappingURL=MessageRepliesCountButton.mjs.map

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

@@ -0,0 +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"}