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

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

@@ -0,0 +1,34 @@
+import { readFileAsArrayBuffer } from "../../ReactFileUtilities/utils.mjs";
+//#region src/components/MediaRecorder/transcode/audioProcessing.ts
+/**
+* In the context of resampling audio data, AudioContext is used to decode the input audio file into an AudioBuffer,
+* which is a fundamental data structure representing audio data.
+* @param file
+*/
+var toAudioBuffer = async (file) => {
+	const audioCtx = new AudioContext();
+	const arrayBuffer = await readFileAsArrayBuffer(file);
+	const decodedData = await audioCtx.decodeAudioData(arrayBuffer);
+	if (audioCtx.state !== "closed") await audioCtx.close();
+	return decodedData;
+};
+/**
+* OfflineAudioContext is a specialized type of AudioContext that does not render audio in real-time and is used for offline audio processing tasks.
+* It allows performing audio processing and rendering without actually playing the audio through speakers or outputting it to a destination.
+* In the context of resampling audio data, OfflineAudioContext is used to resample the decoded AudioBuffer from a file to the desired sample rate.
+* It provides more flexibility and control over audio processing, as it can operate at different sample rates and durations compared to real-time audio contexts.
+* @param audioBuffer
+* @param sampleRate
+*/
+var renderAudio = async (audioBuffer, sampleRate) => {
+	const offlineAudioCtx = new OfflineAudioContext(audioBuffer.numberOfChannels, audioBuffer.duration * sampleRate, sampleRate);
+	const source = offlineAudioCtx.createBufferSource();
+	source.buffer = audioBuffer;
+	source.connect(offlineAudioCtx.destination);
+	source.start();
+	return await offlineAudioCtx.startRendering();
+};
+//#endregion
+export { renderAudio, toAudioBuffer };
+
+//# sourceMappingURL=audioProcessing.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"audioProcessing.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/transcode/audioProcessing.ts"],"sourcesContent":["import { readFileAsArrayBuffer } from '../../ReactFileUtilities';\n\n/**\n * In the context of resampling audio data, AudioContext is used to decode the input audio file into an AudioBuffer,\n * which is a fundamental data structure representing audio data.\n * @param file\n */\nexport const toAudioBuffer = async (file: File) => {\n  const audioCtx = new AudioContext();\n\n  const arrayBuffer = await readFileAsArrayBuffer(file);\n  const decodedData = await audioCtx.decodeAudioData(arrayBuffer);\n  if (audioCtx.state !== 'closed') await audioCtx.close();\n  return decodedData;\n};\n\n/**\n * OfflineAudioContext is a specialized type of AudioContext that does not render audio in real-time and is used for offline audio processing tasks.\n * It allows performing audio processing and rendering without actually playing the audio through speakers or outputting it to a destination.\n * In the context of resampling audio data, OfflineAudioContext is used to resample the decoded AudioBuffer from a file to the desired sample rate.\n * It provides more flexibility and control over audio processing, as it can operate at different sample rates and durations compared to real-time audio contexts.\n * @param audioBuffer\n * @param sampleRate\n */\nexport const renderAudio = async (audioBuffer: AudioBuffer, sampleRate: number) => {\n  const offlineAudioCtx = new OfflineAudioContext(\n    audioBuffer.numberOfChannels,\n    audioBuffer.duration * sampleRate,\n    sampleRate,\n  );\n  const source = offlineAudioCtx.createBufferSource();\n  source.buffer = audioBuffer;\n  source.connect(offlineAudioCtx.destination);\n  source.start();\n\n  return await offlineAudioCtx.startRendering();\n};\n"],"mappings":";;;;;;;AAOA,IAAa,gBAAgB,OAAO,SAAe;CACjD,MAAM,WAAW,IAAI,aAAa;CAElC,MAAM,cAAc,MAAM,sBAAsB,IAAI;CACpD,MAAM,cAAc,MAAM,SAAS,gBAAgB,WAAW;CAC9D,IAAI,SAAS,UAAU,UAAU,MAAM,SAAS,MAAM;CACtD,OAAO;AACT;;;;;;;;;AAUA,IAAa,cAAc,OAAO,aAA0B,eAAuB;CACjF,MAAM,kBAAkB,IAAI,oBAC1B,YAAY,kBACZ,YAAY,WAAW,YACvB,UACF;CACA,MAAM,SAAS,gBAAgB,mBAAmB;CAClD,OAAO,SAAS;CAChB,OAAO,QAAQ,gBAAgB,WAAW;CAC1C,OAAO,MAAM;CAEb,OAAO,MAAM,gBAAgB,eAAe;AAC9C"}

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

@@ -0,0 +1,12 @@
+import { createFileFromBlobs, getExtensionFromMimeType } from "../../ReactFileUtilities/utils.mjs";
+import { encodeToWaw } from "./wav.mjs";
+//#region src/components/MediaRecorder/transcode/index.ts
+var transcode = ({ blob, encoder = encodeToWaw, sampleRate }) => encoder(createFileFromBlobs({
+	blobsArray: [blob],
+	fileName: `audio_recording_${(/* @__PURE__ */ new Date()).toISOString()}.${getExtensionFromMimeType(blob.type)}`,
+	mimeType: blob.type
+}), sampleRate);
+//#endregion
+export { transcode };
+
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/transcode/index.ts"],"sourcesContent":["import { encodeToWaw } from './wav';\nimport { createFileFromBlobs, getExtensionFromMimeType } from '../../ReactFileUtilities';\n\nexport type TranscoderConfig = {\n  // defaults to 16000Hz\n  sampleRate: number;\n  // Custom encoder function that converts the recorded audio file into a blob with the desired MIME type\n  encoder?: (file: File, sampleRate: number) => Promise<Blob>;\n};\n\nexport type TranscodeParams = TranscoderConfig & {\n  blob: Blob;\n};\n\nexport const transcode = ({\n  blob,\n  encoder = encodeToWaw,\n  sampleRate,\n}: TranscodeParams): Promise<Blob> =>\n  encoder(\n    createFileFromBlobs({\n      blobsArray: [blob],\n      fileName: `audio_recording_${new Date().toISOString()}.${getExtensionFromMimeType(\n        blob.type,\n      )}`,\n      mimeType: blob.type,\n    }),\n    sampleRate,\n  );\n"],"mappings":";;;AAcA,IAAa,aAAa,EACxB,MACA,UAAU,aACV,iBAEA,QACE,oBAAoB;CAClB,YAAY,CAAC,IAAI;CACjB,UAAU,oCAAmB,IAAI,KAAK,EAAA,CAAE,YAAY,EAAE,GAAG,yBACvD,KAAK,IACP;CACA,UAAU,KAAK;AACjB,CAAC,GACD,UACF"}

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":";;AAEA,IAAM,0BAA0B;AAChC,IAAM,mBAAmB;AACzB,IAAM,sBAAsB;AAE5B,IAAM,SAAS;CACb,cAAc;EAAE,QAAQ;EAAI,OAAO;CAAE;CACrC,iBAAiB;EAAE,QAAQ;EAAI,OAAO,mBAAmB;CAAE;CAC3D,aAAa,EAAE,QAAQ,GAAG;CAC1B,WAAW,EAAE,QAAQ,GAAG;CACxB,eAAe,EAAE,QAAQ,GAAG;CAC5B,UAAU;EAAE,QAAQ;EAAG,OAAO;CAAW;CACzC,YAAY,EAAE,QAAQ,EAAE;CACxB,aAAa;EAAE,QAAQ;EAAG,OAAO;CAAW;CAC5C,aAAa,EAAE,QAAQ,GAAG;CAC1B,cAAc;EAAE,QAAQ;EAAI,OAAO;CAAW;CAC9C,gBAAgB;EAAE,QAAQ;EAAI,OAAO;CAAG;CACxC,cAAc;EAAE,QAAQ;EAAI,OAAO;CAAW;CAC9C,gBAAgB,EAAE,QAAQ,GAAG;AAC/B;AAEA,IAAM,kBAAkB,UACrB,MAAM,WAAW,CAAC,KAAK,KACvB,MAAM,WAAW,CAAC,KAAK,KACvB,MAAM,WAAW,CAAC,KAAK,IACxB,MAAM,WAAW,CAAC;AAGZ,eAAe,MAAM,GACtB,eAAe,MAAM,GACpB,eAAe,MAAM,GACrB,eAAe,MAAM;AAU7B,IAAM,kBAAkB,EACtB,aACA,cACA,iBAC2B;CAC3B,MAAM,WAAW,aAAa,eAAe;CAC7C,MAAM,aAAa,eAAe;CAElC,MAAM,WAAW,IAAI,SAAS,WAAW;CAKzC,MAAM,gBAAgB,KAAK,IACzB,SAAS,aAAa,yBACtB,sBAAsB,uBACxB;CAEA,SAAS,UAAU,OAAO,SAAS,QAAQ,OAAO,SAAS,KAAK;CAChE,SAAS,UAAU,OAAO,WAAW,QAAQ,YAAY,aAAa,GAAG,IAAI;CAC7E,SAAS,UAAU,OAAO,YAAY,QAAQ,OAAO,YAAY,KAAK;CAEtE,SAAS,UAAU,OAAO,aAAa,QAAQ,OAAO,aAAa,KAAK;CACxE,SAAS,UAAU,OAAO,eAAe,QAAQ,OAAO,eAAe,OAAO,IAAI;CAClF,SAAS,UAAU,OAAO,aAAa,QAAQ,OAAO,aAAa,OAAO,IAAI;CAC9E,SAAS,UAAU,OAAO,cAAc,QAAQ,cAAc,IAAI;CAClE,SAAS,UAAU,OAAO,YAAY,QAAQ,YAAY,IAAI;CAC9D,SAAS,UAAU,OAAO,UAAU,QAAQ,UAAU,IAAI;CAC1D,SAAS,UAAU,OAAO,YAAY,QAAQ,YAAY,IAAI;CAC9D,SAAS,UAAU,OAAO,gBAAgB,QAAQ,OAAO,gBAAgB,OAAO,IAAI;CAEpF,SAAS,UAAU,OAAO,aAAa,QAAQ,OAAO,aAAa,KAAK;CACxE,SAAS,UAAU,OAAO,eAAe,QAAQ,eAAe,IAAI;AACtE;AAyBA,IAAM,sBAAsB,gBAC1B,MAAM,KAAK,EAAE,QAAQ,YAAY,iBAAiB,IAAI,GAAG,MACvD,YAAY,eAAe,CAAC,CAC9B;;;;;;;AAaF,IAAM,qBAAqB,EAAE,aAAa,oBAA0C;CAClF,MAAM,WAAW,IAAI,SAAS,WAAW;CACzC,MAAM,eAAe,cAAc;CAEnC,cAAc,SAAS,aAAa,iBAAiB;EACnD,IAAI,cAAc,0BAA0B,eAAe;EAE3D,YAAY,SAAS,iBAAiB;GACpC,SAAS,SACP,aACA,eAAe,IACX,KAAK,IAAI,IAAI,YAAY,IAAI,QAC7B,KAAK,IAAI,GAAG,YAAY,IAAI,OAChC,IACF;GACA,eAAe,eAAe;EAChC,CAAC;CACH,CAAC;AACH;AAEA,IAAa,cAAc,OAAO,MAAY,eAAuB;CACnE,MAAM,cAAc,MAAM,YAAY,MAAM,cAAc,IAAI,GAAG,UAAU;CAE3E,MAAM,gBADkB,YAAY,WAAW,aAE3B,YAAY,mBAAmB,mBACjD;CAEF,MAAM,cAAc,IAAI,YAAY,aAAa;CACjD,eAAe;EAAE;EAAa,cAAc,YAAY;EAAkB;CAAW,CAAC;CACtF,kBAAkB;EAAE;EAAa,eAAe,mBAAmB,WAAW;CAAE,CAAC;CACjF,OAAO,IAAI,KAAK,CAAC,WAAW,GAAG,EAAE,MAAM,YAAY,CAAC;AACtD"}

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

@@ -0,0 +1,113 @@
+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 { areMessagePropsEqual } 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 } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Message/Message.tsx
+var MessageWithContext = (props) => {
+	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 { onUserClick, onUserHover } = useUserHandler(message, {
+		onUserClickHandler: propOnUserClick,
+		onUserHoverHandler: propOnUserHover
+	});
+	const { isMyMessage } = userRoles;
+	const { onUserClick: onUserClickPropToNotPass, onUserHover: onUserHoverPropToNotPass, userRoles: userRolesPropToNotPass, ...rest } = props;
+	return /* @__PURE__ */ jsx(MessageProvider, {
+		value: {
+			...rest,
+			isMessageAIGenerated,
+			isMyMessage: () => isMyMessage,
+			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, sortReactions } = props;
+	const handleAction = useActionHandler(message);
+	const handleReaction = useReactionHandler(message);
+	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 { 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,
+		closeReactionSelectorOnClick,
+		deliveredTo: props.deliveredTo,
+		disableQuotedMessages: props.disableQuotedMessages,
+		formatDate: props.formatDate,
+		groupStyles: props.groupStyles,
+		handleAction,
+		handleDelete,
+		handleFetchReactions,
+		handleFlag,
+		handleMarkUnread,
+		handleMute,
+		handleOpenThread,
+		handlePin,
+		handleReaction,
+		handleRetry,
+		highlighted: props.highlighted,
+		initialMessage: props.initialMessage,
+		lastOwnMessage: props.lastOwnMessage,
+		lastReceivedId: props.lastReceivedId,
+		message,
+		messageListRect: props.messageListRect,
+		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 } 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

@@ -0,0 +1,35 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useMessageAlsoSentInChannelNavigation } from "./hooks/useMessageAlsoSentInChannelNavigation.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#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 = ({ onView } = {}) => {
+	const { IconArrowUpRight } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	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: 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: onView ?? viewReference,
+				type: "button",
+				children: t("message.alsoSent.view.text", "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 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

@@ -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();
+	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.blocked.text", "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();\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/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 { 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
+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("common.messageDeleted.text", "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 { 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

@@ -0,0 +1,42 @@
+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 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();
+	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 == 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("message.editedIndicator.edited.text", "Edited"), /* @__PURE__ */ jsx(PopperTooltip, {
+			offset: [0, 5],
+			placement: "top",
+			referenceElement,
+			visible: tooltipVisible,
+			children: /* @__PURE__ */ jsx(Timestamp$1, {
+				timestamp: convertTimestampToDate(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 { 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

@@ -0,0 +1,71 @@
+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 { 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();
+	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("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", {
+		className: "str-chat__message-replies-count-button-wrapper",
+		children: /* @__PURE__ */ jsxs("button", {
+			className: "str-chat__message-replies-count-button",
+			"data-testid": "replies-count-button",
+			onClick: handleClick,
+			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 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"}