stream-chat-react 12.14.0 → 13.0.0-rc.1

package/dist/plugins/Emojis/middleware/textComposerEmojiMiddleware.js

@@ -0,0 +1,143 @@
+import mergeWith from 'lodash.mergewith';
+import { BaseSearchSource, getTokenizedSuggestionDisplayName, getTriggerCharWithToken, insertItemWithTrigger, replaceWordWithEntity, } from 'stream-chat';
+class EmojiSearchSource extends BaseSearchSource {
+    constructor(emojiSearchIndex, options) {
+        super(options);
+        this.type = 'emoji';
+        this.emojiSearchIndex = emojiSearchIndex;
+    }
+    async query(searchQuery) {
+        if (searchQuery.length === 0) {
+            return { items: [], next: null };
+        }
+        const emojis = (await this.emojiSearchIndex.search(searchQuery)) ?? [];
+        // emojiIndex.search sometimes returns undefined values, so filter those out first
+        return {
+            items: emojis
+                .filter(Boolean)
+                .slice(0, 7)
+                .map(({ emoticons = [], id, name, native, skins = [] }) => {
+                const [firstSkin] = skins;
+                return {
+                    emoticons,
+                    id,
+                    name,
+                    native: native ?? firstSkin.native,
+                };
+            }),
+            next: null, // todo: generate cursor
+        };
+    }
+    filterQueryResults(items) {
+        return items.map((item) => ({
+            ...item,
+            ...getTokenizedSuggestionDisplayName({
+                displayName: item.id,
+                searchToken: this.searchQuery,
+            }),
+        }));
+    }
+}
+const DEFAULT_OPTIONS = { minChars: 1, trigger: ':' };
+/**
+ * TextComposer middleware for mentions
+ * Usage:
+ *
+ *  const textComposer = new TextComposer(options);
+ *
+ *  textComposer.use(new createTextComposerEmojiMiddleware(emojiSearchIndex, {
+ *   minChars: 2
+ *  }));
+ *
+ * @param emojiSearchIndex
+ * @param {{
+ *     minChars: number;
+ *     trigger: string;
+ *   }} options
+ * @returns
+ */
+export const createTextComposerEmojiMiddleware = (emojiSearchIndex, options) => {
+    const finalOptions = mergeWith(DEFAULT_OPTIONS, options ?? {});
+    const emojiSearchSource = new EmojiSearchSource(emojiSearchIndex);
+    emojiSearchSource.activate();
+    return {
+        id: 'stream-io/emoji-middleware',
+        onChange: async ({ input, nextHandler }) => {
+            const { state } = input;
+            if (!state.selection)
+                return nextHandler(input);
+            const triggerWithToken = getTriggerCharWithToken({
+                acceptTrailingSpaces: false,
+                text: state.text.slice(0, state.selection.end),
+                trigger: finalOptions.trigger,
+            });
+            const triggerWasRemoved = !triggerWithToken || triggerWithToken.length < finalOptions.minChars;
+            if (triggerWasRemoved) {
+                const hasSuggestionsForTrigger = input.state.suggestions?.trigger === finalOptions.trigger;
+                const newInput = { ...input };
+                if (hasSuggestionsForTrigger && newInput.state.suggestions) {
+                    delete newInput.state.suggestions;
+                }
+                return nextHandler(newInput);
+            }
+            const newSearchTriggerred = triggerWithToken && triggerWithToken === finalOptions.trigger;
+            if (newSearchTriggerred) {
+                emojiSearchSource.resetStateAndActivate();
+            }
+            const textWithReplacedWord = await replaceWordWithEntity({
+                caretPosition: state.selection.end,
+                getEntityString: async (word) => {
+                    const { items } = await emojiSearchSource.query(word);
+                    const emoji = items
+                        .filter(Boolean)
+                        .slice(0, 10)
+                        .find(({ emoticons }) => !!emoticons?.includes(word));
+                    if (!emoji)
+                        return null;
+                    const [firstSkin] = emoji.skins ?? [];
+                    return emoji.native ?? firstSkin.native;
+                },
+                text: state.text,
+            });
+            if (textWithReplacedWord !== state.text) {
+                return {
+                    state: {
+                        ...state,
+                        suggestions: undefined, // to prevent the TextComposerMiddlewareExecutor to run the first page query
+                        text: textWithReplacedWord,
+                    },
+                    stop: true, // Stop other middleware from processing '@' character
+                };
+            }
+            return {
+                state: {
+                    ...state,
+                    suggestions: {
+                        query: triggerWithToken.slice(1),
+                        searchSource: emojiSearchSource,
+                        trigger: finalOptions.trigger,
+                    },
+                },
+                stop: true, // Stop other middleware from processing '@' character
+            };
+        },
+        onSuggestionItemSelect: ({ input, nextHandler, selectedSuggestion, }) => {
+            const { state } = input;
+            if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
+                return nextHandler(input);
+            emojiSearchSource.resetStateAndActivate();
+            return Promise.resolve({
+                state: {
+                    ...state,
+                    ...insertItemWithTrigger({
+                        insertText: `${'native' in selectedSuggestion ? selectedSuggestion.native : ''} `,
+                        selection: state.selection,
+                        text: state.text,
+                        trigger: finalOptions.trigger,
+                    }),
+                    suggestions: undefined, // Clear suggestions after selection
+                },
+            });
+        },
+    };
+};

package/dist/plugins/encoders/mp3.browser.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/encoders/mp3.ts", "../../../src/components/ReactFileUtilities/utils.ts", "../../../src/components/MediaRecorder/transcode/audioProcessing.ts"],
-  "sourcesContent": ["import {\n  renderAudio,\n  toAudioBuffer,\n} from '../../components/MediaRecorder/transcode/audioProcessing';\n\nconst ENCODING_BIT_RATE = 128; // kbps;\nconst COUNT_SAMPLES_PER_ENCODED_BLOCK = 1152;\n\nconst float32ArrayToInt16Array = (float32Arr: Float32Array) => {\n  const int16Arr = new Int16Array(float32Arr.length);\n  for (let i = 0; i < float32Arr.length; i++) {\n    const float32Value = float32Arr[i];\n    // Clamp the float value between -1 and 1\n    const clampedValue = Math.max(-1, Math.min(1, float32Value));\n    // Convert the float value to a signed 16-bit integer\n    int16Arr[i] = Math.round(clampedValue * 32767);\n  }\n  return int16Arr;\n};\n\nconst splitDataByChannel = (audioBuffer: AudioBuffer) =>\n  Array.from({ length: audioBuffer.numberOfChannels }, (_, i) =>\n    audioBuffer.getChannelData(i),\n  ).map(float32ArrayToInt16Array);\n\nexport async function encodeToMp3(file: File, sampleRate: number) {\n  const lameJs = await import('@breezystack/lamejs');\n  const audioBuffer = await renderAudio(await toAudioBuffer(file), sampleRate);\n  const channelCount = audioBuffer.numberOfChannels;\n  const dataByChannel = splitDataByChannel(audioBuffer);\n  const mp3Encoder = new lameJs.Mp3Encoder(channelCount, sampleRate, ENCODING_BIT_RATE);\n\n  const dataBuffer: Int8Array[] = [];\n  let remaining = dataByChannel[0].length;\n  for (\n    let i = 0;\n    remaining >= COUNT_SAMPLES_PER_ENCODED_BLOCK;\n    i += COUNT_SAMPLES_PER_ENCODED_BLOCK\n  ) {\n    const [leftChannelBlock, rightChannelBlock] = dataByChannel.map((channel) =>\n      channel.subarray(i, i + COUNT_SAMPLES_PER_ENCODED_BLOCK),\n    );\n    dataBuffer.push(\n      new Int8Array(mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock)),\n    );\n    remaining -= COUNT_SAMPLES_PER_ENCODED_BLOCK;\n  }\n\n  const lastBlock = mp3Encoder.flush();\n  if (lastBlock.length) dataBuffer.push(new Int8Array(lastBlock));\n  return new Blob(dataBuffer, { type: 'audio/mp3;sbu_type=voice' });\n}\n", "import { FileLike, RecordedMediaType } from './types';\nimport { ChangeEvent, useCallback } from 'react';\n\nexport const useHandleFileChangeWrapper = (\n  resetOnChange = false,\n  handler?: (files: Array<File>) => void,\n) =>\n  useCallback(\n    ({ currentTarget }: ChangeEvent<HTMLInputElement>) => {\n      const { files } = currentTarget;\n\n      if (!files) return;\n\n      try {\n        handler?.(Array.from(files));\n      } catch (error) {\n        console.error(error);\n      }\n\n      if (resetOnChange) currentTarget.value = '';\n    },\n    [handler, resetOnChange],\n  );\n\nexport function dataTransferItemsHaveFiles(items?: DataTransferItem[]): boolean {\n  if (!items || !items.length) {\n    return false;\n  }\n  for (const item of items) {\n    if (item.kind === 'file' || item.type === 'text/html') {\n      return true;\n    }\n  }\n  return false;\n}\n\nexport async function dataTransferItemsToFiles(\n  items?: DataTransferItem[],\n): Promise<FileLike[]> {\n  if (!items || !items.length) {\n    return [];\n  }\n\n  // If there are files inside the DataTransferItem prefer those\n  const fileLikes = getFileLikes(items);\n  if (fileLikes.length) {\n    return fileLikes;\n  }\n\n  // Otherwise extract images from html\n  const blobPromises = [];\n  for (const item of items) {\n    if (item.type === 'text/html') {\n      blobPromises.push(\n        new Promise<void>((accept) => {\n          item.getAsString(async (s) => {\n            const imagePromises = extractImageSources(s).map((src) =>\n              getImageSource(fileLikes, src),\n            );\n\n            await Promise.all(imagePromises);\n            accept();\n          });\n        }),\n      );\n    }\n  }\n  await Promise.all(blobPromises);\n  return fileLikes;\n}\n\nfunction getFileLikes(items: DataTransferItem[]) {\n  const fileLikes = [];\n  for (const item of items) {\n    if (item.kind === 'file') {\n      const file = item.getAsFile();\n      if (file) {\n        fileLikes.push(file);\n      }\n    }\n  }\n  return fileLikes;\n}\n\nasync function getImageSource(fileLikes: FileLike[], src: string) {\n  let res;\n  try {\n    res = await fetch(src);\n  } catch (e) {\n    return;\n  }\n  const contentType = res.headers.get('Content-type') || 'application/octet-stream';\n  const buf = await res.arrayBuffer();\n  const blob = new Blob([buf], { type: contentType });\n  fileLikes.push(blob);\n}\n\nconst extractImageSources = (s: string) => {\n  const imageTags = new DOMParser()\n    .parseFromString(s, 'text/html')\n    .getElementsByTagName('img');\n  return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);\n};\n\nexport const isBlobButNotFile = (obj: unknown): obj is Blob =>\n  obj instanceof Blob && !(obj instanceof File);\n\nexport const createFileFromBlobs = ({\n  blobsArray,\n  fileName,\n  mimeType,\n}: {\n  blobsArray: Blob[];\n  fileName: string;\n  mimeType: string;\n}) => {\n  const concatenatedBlob = new Blob(blobsArray, { type: mimeType });\n  return new File([concatenatedBlob], fileName, { type: concatenatedBlob.type });\n};\n\nexport const getExtensionFromMimeType = (mimeType: string) => {\n  const match = mimeType.match(/\\/([^/;]+)/);\n  return match && match[1];\n};\n\nexport const getRecordedMediaTypeFromMimeType = (\n  mimeType: string,\n): RecordedMediaType | null => {\n  const match = mimeType.match(/^(audio|video)\\/.*$/);\n  return match && (match[1] as RecordedMediaType);\n};\n\nexport const readFileAsArrayBuffer = (file: File): Promise<ArrayBuffer> =>\n  new Promise((resolve, reject) => {\n    const fileReader = new FileReader();\n    fileReader.onload = () => {\n      resolve(fileReader.result as ArrayBuffer);\n    };\n\n    fileReader.onerror = () => {\n      reject(fileReader.error);\n    };\n\n    fileReader.readAsArrayBuffer(file);\n  });\n\nexport const generateFileName = (mimeType: string) =>\n  `file_${new Date().toISOString()}.${getExtensionFromMimeType(mimeType)}`;\n", "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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,mBAAyC;AAmIlC,IAAM,wBAAwB,CAAC,SACpC,IAAI,QAAQ,CAAC,SAAS,WAAW;AAC/B,QAAM,aAAa,IAAI,WAAW;AAClC,aAAW,SAAS,MAAM;AACxB,YAAQ,WAAW,MAAqB;AAAA,EAC1C;AAEA,aAAW,UAAU,MAAM;AACzB,WAAO,WAAW,KAAK;AAAA,EACzB;AAEA,aAAW,kBAAkB,IAAI;AACnC,CAAC;;;ACzII,IAAM,gBAAgB,OAAO,SAAe;AACjD,QAAM,WAAW,IAAI,aAAa;AAElC,QAAM,cAAc,MAAM,sBAAsB,IAAI;AACpD,QAAM,cAAc,MAAM,SAAS,gBAAgB,WAAW;AAC9D,MAAI,SAAS,UAAU,SAAU,OAAM,SAAS,MAAM;AACtD,SAAO;AACT;AAUO,IAAM,cAAc,OAAO,aAA0B,eAAuB;AACjF,QAAM,kBAAkB,IAAI;AAAA,IAC1B,YAAY;AAAA,IACZ,YAAY,WAAW;AAAA,IACvB;AAAA,EACF;AACA,QAAM,SAAS,gBAAgB,mBAAmB;AAClD,SAAO,SAAS;AAChB,SAAO,QAAQ,gBAAgB,WAAW;AAC1C,SAAO,MAAM;AAEb,SAAO,MAAM,gBAAgB,eAAe;AAC9C;;;AF/BA,IAAM,oBAAoB;AAC1B,IAAM,kCAAkC;AAExC,IAAM,2BAA2B,CAAC,eAA6B;AAC7D,QAAM,WAAW,IAAI,WAAW,WAAW,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;AAC1C,UAAM,eAAe,WAAW,CAAC;AAEjC,UAAM,eAAe,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,YAAY,CAAC;AAE3D,aAAS,CAAC,IAAI,KAAK,MAAM,eAAe,KAAK;AAAA,EAC/C;AACA,SAAO;AACT;AAEA,IAAM,qBAAqB,CAAC,gBAC1B,MAAM;AAAA,EAAK,EAAE,QAAQ,YAAY,iBAAiB;AAAA,EAAG,CAAC,GAAG,MACvD,YAAY,eAAe,CAAC;AAC9B,EAAE,IAAI,wBAAwB;AAEhC,eAAsB,YAAY,MAAY,YAAoB;AAChE,QAAM,SAAS,MAAM,OAAO,qBAAqB;AACjD,QAAM,cAAc,MAAM,YAAY,MAAM,cAAc,IAAI,GAAG,UAAU;AAC3E,QAAM,eAAe,YAAY;AACjC,QAAM,gBAAgB,mBAAmB,WAAW;AACpD,QAAM,aAAa,IAAI,OAAO,WAAW,cAAc,YAAY,iBAAiB;AAEpF,QAAM,aAA0B,CAAC;AACjC,MAAI,YAAY,cAAc,CAAC,EAAE;AACjC,WACM,IAAI,GACR,aAAa,iCACb,KAAK,iCACL;AACA,UAAM,CAAC,kBAAkB,iBAAiB,IAAI,cAAc;AAAA,MAAI,CAAC,YAC/D,QAAQ,SAAS,GAAG,IAAI,+BAA+B;AAAA,IACzD;AACA,eAAW;AAAA,MACT,IAAI,UAAU,WAAW,aAAa,kBAAkB,iBAAiB,CAAC;AAAA,IAC5E;AACA,iBAAa;AAAA,EACf;AAEA,QAAM,YAAY,WAAW,MAAM;AACnC,MAAI,UAAU,OAAQ,YAAW,KAAK,IAAI,UAAU,SAAS,CAAC;AAC9D,SAAO,IAAI,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAClE;",
+  "sourcesContent": ["import {\n  renderAudio,\n  toAudioBuffer,\n} from '../../components/MediaRecorder/transcode/audioProcessing';\n\nconst ENCODING_BIT_RATE = 128; // kbps;\nconst COUNT_SAMPLES_PER_ENCODED_BLOCK = 1152;\n\nconst float32ArrayToInt16Array = (float32Arr: Float32Array) => {\n  const int16Arr = new Int16Array(float32Arr.length);\n  for (let i = 0; i < float32Arr.length; i++) {\n    const float32Value = float32Arr[i];\n    // Clamp the float value between -1 and 1\n    const clampedValue = Math.max(-1, Math.min(1, float32Value));\n    // Convert the float value to a signed 16-bit integer\n    int16Arr[i] = Math.round(clampedValue * 32767);\n  }\n  return int16Arr;\n};\n\nconst splitDataByChannel = (audioBuffer: AudioBuffer) =>\n  Array.from({ length: audioBuffer.numberOfChannels }, (_, i) =>\n    audioBuffer.getChannelData(i),\n  ).map(float32ArrayToInt16Array);\n\nexport async function encodeToMp3(file: File, sampleRate: number) {\n  const lameJs = await import('@breezystack/lamejs');\n  const audioBuffer = await renderAudio(await toAudioBuffer(file), sampleRate);\n  const channelCount = audioBuffer.numberOfChannels;\n  const dataByChannel = splitDataByChannel(audioBuffer);\n  const mp3Encoder = new lameJs.Mp3Encoder(channelCount, sampleRate, ENCODING_BIT_RATE);\n\n  const dataBuffer: Int8Array[] = [];\n  let remaining = dataByChannel[0].length;\n  for (\n    let i = 0;\n    remaining >= COUNT_SAMPLES_PER_ENCODED_BLOCK;\n    i += COUNT_SAMPLES_PER_ENCODED_BLOCK\n  ) {\n    const [leftChannelBlock, rightChannelBlock] = dataByChannel.map((channel) =>\n      channel.subarray(i, i + COUNT_SAMPLES_PER_ENCODED_BLOCK),\n    );\n    dataBuffer.push(\n      new Int8Array(mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock)),\n    );\n    remaining -= COUNT_SAMPLES_PER_ENCODED_BLOCK;\n  }\n\n  const lastBlock = mp3Encoder.flush();\n  if (lastBlock.length) dataBuffer.push(new Int8Array(lastBlock));\n  return new Blob(dataBuffer, { type: 'audio/mp3;sbu_type=voice' });\n}\n", "import type { FileLike, RecordedMediaType } from './types';\nimport type { ChangeEvent } from 'react';\nimport { useCallback } from 'react';\n\nexport const useHandleFileChangeWrapper = (\n  resetOnChange = false,\n  handler?: (files: Array<File>) => void,\n) =>\n  useCallback(\n    ({ currentTarget }: ChangeEvent<HTMLInputElement>) => {\n      const { files } = currentTarget;\n\n      if (!files) return;\n\n      try {\n        handler?.(Array.from(files));\n      } catch (error) {\n        console.error(error);\n      }\n\n      if (resetOnChange) currentTarget.value = '';\n    },\n    [handler, resetOnChange],\n  );\n\nexport function dataTransferItemsHaveFiles(items?: DataTransferItem[]): boolean {\n  if (!items || !items.length) {\n    return false;\n  }\n  for (const item of items) {\n    if (item.kind === 'file' || item.type === 'text/html') {\n      return true;\n    }\n  }\n  return false;\n}\n\nexport async function dataTransferItemsToFiles(\n  items?: DataTransferItem[],\n): Promise<FileLike[]> {\n  if (!items || !items.length) {\n    return [];\n  }\n\n  // If there are files inside the DataTransferItem prefer those\n  const fileLikes = getFileLikes(items);\n  if (fileLikes.length) {\n    return fileLikes;\n  }\n\n  // Otherwise extract images from html\n  const blobPromises = [];\n  for (const item of items) {\n    if (item.type === 'text/html') {\n      blobPromises.push(\n        new Promise<void>((accept) => {\n          item.getAsString(async (s) => {\n            const imagePromises = extractImageSources(s).map((src) =>\n              getImageSource(fileLikes, src),\n            );\n\n            await Promise.all(imagePromises);\n            accept();\n          });\n        }),\n      );\n    }\n  }\n  await Promise.all(blobPromises);\n  return fileLikes;\n}\n\nfunction getFileLikes(items: DataTransferItem[]) {\n  const fileLikes = [];\n  for (const item of items) {\n    if (item.kind === 'file') {\n      const file = item.getAsFile();\n      if (file) {\n        fileLikes.push(file);\n      }\n    }\n  }\n  return fileLikes;\n}\n\nasync function getImageSource(fileLikes: FileLike[], src: string) {\n  let res;\n  try {\n    res = await fetch(src);\n  } catch (e) {\n    return;\n  }\n  const contentType = res.headers.get('Content-type') || 'application/octet-stream';\n  const buf = await res.arrayBuffer();\n  const blob = new Blob([buf], { type: contentType });\n  fileLikes.push(blob);\n}\n\nconst extractImageSources = (s: string) => {\n  const imageTags = new DOMParser()\n    .parseFromString(s, 'text/html')\n    .getElementsByTagName('img');\n  return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);\n};\n\nexport const isBlobButNotFile = (obj: unknown): obj is Blob =>\n  obj instanceof Blob && !(obj instanceof File);\n\nexport const createFileFromBlobs = ({\n  blobsArray,\n  fileName,\n  mimeType,\n}: {\n  blobsArray: Blob[];\n  fileName: string;\n  mimeType: string;\n}) => {\n  const concatenatedBlob = new Blob(blobsArray, { type: mimeType });\n  return new File([concatenatedBlob], fileName, { type: concatenatedBlob.type });\n};\n\nexport const getExtensionFromMimeType = (mimeType: string) => {\n  const match = mimeType.match(/\\/([^/;]+)/);\n  return match && match[1];\n};\n\nexport const getRecordedMediaTypeFromMimeType = (\n  mimeType: string,\n): RecordedMediaType | null => {\n  const match = mimeType.match(/^(audio|video)\\/.*$/);\n  return match && (match[1] as RecordedMediaType);\n};\n\nexport const readFileAsArrayBuffer = (file: File): Promise<ArrayBuffer> =>\n  new Promise((resolve, reject) => {\n    const fileReader = new FileReader();\n    fileReader.onload = () => {\n      resolve(fileReader.result as ArrayBuffer);\n    };\n\n    fileReader.onerror = () => {\n      reject(fileReader.error);\n    };\n\n    fileReader.readAsArrayBuffer(file);\n  });\n\nexport const generateFileName = (mimeType: string) =>\n  `file_${new Date().toISOString()}.${getExtensionFromMimeType(mimeType)}`;\n", "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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAA4B;AAmIrB,IAAM,wBAAwB,CAAC,SACpC,IAAI,QAAQ,CAAC,SAAS,WAAW;AAC/B,QAAM,aAAa,IAAI,WAAW;AAClC,aAAW,SAAS,MAAM;AACxB,YAAQ,WAAW,MAAqB;AAAA,EAC1C;AAEA,aAAW,UAAU,MAAM;AACzB,WAAO,WAAW,KAAK;AAAA,EACzB;AAEA,aAAW,kBAAkB,IAAI;AACnC,CAAC;;;AC1II,IAAM,gBAAgB,OAAO,SAAe;AACjD,QAAM,WAAW,IAAI,aAAa;AAElC,QAAM,cAAc,MAAM,sBAAsB,IAAI;AACpD,QAAM,cAAc,MAAM,SAAS,gBAAgB,WAAW;AAC9D,MAAI,SAAS,UAAU,SAAU,OAAM,SAAS,MAAM;AACtD,SAAO;AACT;AAUO,IAAM,cAAc,OAAO,aAA0B,eAAuB;AACjF,QAAM,kBAAkB,IAAI;AAAA,IAC1B,YAAY;AAAA,IACZ,YAAY,WAAW;AAAA,IACvB;AAAA,EACF;AACA,QAAM,SAAS,gBAAgB,mBAAmB;AAClD,SAAO,SAAS;AAChB,SAAO,QAAQ,gBAAgB,WAAW;AAC1C,SAAO,MAAM;AAEb,SAAO,MAAM,gBAAgB,eAAe;AAC9C;;;AF/BA,IAAM,oBAAoB;AAC1B,IAAM,kCAAkC;AAExC,IAAM,2BAA2B,CAAC,eAA6B;AAC7D,QAAM,WAAW,IAAI,WAAW,WAAW,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;AAC1C,UAAM,eAAe,WAAW,CAAC;AAEjC,UAAM,eAAe,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,YAAY,CAAC;AAE3D,aAAS,CAAC,IAAI,KAAK,MAAM,eAAe,KAAK;AAAA,EAC/C;AACA,SAAO;AACT;AAEA,IAAM,qBAAqB,CAAC,gBAC1B,MAAM;AAAA,EAAK,EAAE,QAAQ,YAAY,iBAAiB;AAAA,EAAG,CAAC,GAAG,MACvD,YAAY,eAAe,CAAC;AAC9B,EAAE,IAAI,wBAAwB;AAEhC,eAAsB,YAAY,MAAY,YAAoB;AAChE,QAAM,SAAS,MAAM,OAAO,qBAAqB;AACjD,QAAM,cAAc,MAAM,YAAY,MAAM,cAAc,IAAI,GAAG,UAAU;AAC3E,QAAM,eAAe,YAAY;AACjC,QAAM,gBAAgB,mBAAmB,WAAW;AACpD,QAAM,aAAa,IAAI,OAAO,WAAW,cAAc,YAAY,iBAAiB;AAEpF,QAAM,aAA0B,CAAC;AACjC,MAAI,YAAY,cAAc,CAAC,EAAE;AACjC,WACM,IAAI,GACR,aAAa,iCACb,KAAK,iCACL;AACA,UAAM,CAAC,kBAAkB,iBAAiB,IAAI,cAAc;AAAA,MAAI,CAAC,YAC/D,QAAQ,SAAS,GAAG,IAAI,+BAA+B;AAAA,IACzD;AACA,eAAW;AAAA,MACT,IAAI,UAAU,WAAW,aAAa,kBAAkB,iBAAiB,CAAC;AAAA,IAC5E;AACA,iBAAa;AAAA,EACf;AAEA,QAAM,YAAY,WAAW,MAAM;AACnC,MAAI,UAAU,OAAQ,YAAW,KAAK,IAAI,UAAU,SAAS,CAAC;AAC9D,SAAO,IAAI,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAClE;",
   "names": []
 }

package/dist/plugins/encoders/mp3.node.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/encoders/mp3.ts", "../../../src/components/ReactFileUtilities/utils.ts", "../../../src/components/MediaRecorder/transcode/audioProcessing.ts"],
-  "sourcesContent": ["import {\n  renderAudio,\n  toAudioBuffer,\n} from '../../components/MediaRecorder/transcode/audioProcessing';\n\nconst ENCODING_BIT_RATE = 128; // kbps;\nconst COUNT_SAMPLES_PER_ENCODED_BLOCK = 1152;\n\nconst float32ArrayToInt16Array = (float32Arr: Float32Array) => {\n  const int16Arr = new Int16Array(float32Arr.length);\n  for (let i = 0; i < float32Arr.length; i++) {\n    const float32Value = float32Arr[i];\n    // Clamp the float value between -1 and 1\n    const clampedValue = Math.max(-1, Math.min(1, float32Value));\n    // Convert the float value to a signed 16-bit integer\n    int16Arr[i] = Math.round(clampedValue * 32767);\n  }\n  return int16Arr;\n};\n\nconst splitDataByChannel = (audioBuffer: AudioBuffer) =>\n  Array.from({ length: audioBuffer.numberOfChannels }, (_, i) =>\n    audioBuffer.getChannelData(i),\n  ).map(float32ArrayToInt16Array);\n\nexport async function encodeToMp3(file: File, sampleRate: number) {\n  const lameJs = await import('@breezystack/lamejs');\n  const audioBuffer = await renderAudio(await toAudioBuffer(file), sampleRate);\n  const channelCount = audioBuffer.numberOfChannels;\n  const dataByChannel = splitDataByChannel(audioBuffer);\n  const mp3Encoder = new lameJs.Mp3Encoder(channelCount, sampleRate, ENCODING_BIT_RATE);\n\n  const dataBuffer: Int8Array[] = [];\n  let remaining = dataByChannel[0].length;\n  for (\n    let i = 0;\n    remaining >= COUNT_SAMPLES_PER_ENCODED_BLOCK;\n    i += COUNT_SAMPLES_PER_ENCODED_BLOCK\n  ) {\n    const [leftChannelBlock, rightChannelBlock] = dataByChannel.map((channel) =>\n      channel.subarray(i, i + COUNT_SAMPLES_PER_ENCODED_BLOCK),\n    );\n    dataBuffer.push(\n      new Int8Array(mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock)),\n    );\n    remaining -= COUNT_SAMPLES_PER_ENCODED_BLOCK;\n  }\n\n  const lastBlock = mp3Encoder.flush();\n  if (lastBlock.length) dataBuffer.push(new Int8Array(lastBlock));\n  return new Blob(dataBuffer, { type: 'audio/mp3;sbu_type=voice' });\n}\n", "import { FileLike, RecordedMediaType } from './types';\nimport { ChangeEvent, useCallback } from 'react';\n\nexport const useHandleFileChangeWrapper = (\n  resetOnChange = false,\n  handler?: (files: Array<File>) => void,\n) =>\n  useCallback(\n    ({ currentTarget }: ChangeEvent<HTMLInputElement>) => {\n      const { files } = currentTarget;\n\n      if (!files) return;\n\n      try {\n        handler?.(Array.from(files));\n      } catch (error) {\n        console.error(error);\n      }\n\n      if (resetOnChange) currentTarget.value = '';\n    },\n    [handler, resetOnChange],\n  );\n\nexport function dataTransferItemsHaveFiles(items?: DataTransferItem[]): boolean {\n  if (!items || !items.length) {\n    return false;\n  }\n  for (const item of items) {\n    if (item.kind === 'file' || item.type === 'text/html') {\n      return true;\n    }\n  }\n  return false;\n}\n\nexport async function dataTransferItemsToFiles(\n  items?: DataTransferItem[],\n): Promise<FileLike[]> {\n  if (!items || !items.length) {\n    return [];\n  }\n\n  // If there are files inside the DataTransferItem prefer those\n  const fileLikes = getFileLikes(items);\n  if (fileLikes.length) {\n    return fileLikes;\n  }\n\n  // Otherwise extract images from html\n  const blobPromises = [];\n  for (const item of items) {\n    if (item.type === 'text/html') {\n      blobPromises.push(\n        new Promise<void>((accept) => {\n          item.getAsString(async (s) => {\n            const imagePromises = extractImageSources(s).map((src) =>\n              getImageSource(fileLikes, src),\n            );\n\n            await Promise.all(imagePromises);\n            accept();\n          });\n        }),\n      );\n    }\n  }\n  await Promise.all(blobPromises);\n  return fileLikes;\n}\n\nfunction getFileLikes(items: DataTransferItem[]) {\n  const fileLikes = [];\n  for (const item of items) {\n    if (item.kind === 'file') {\n      const file = item.getAsFile();\n      if (file) {\n        fileLikes.push(file);\n      }\n    }\n  }\n  return fileLikes;\n}\n\nasync function getImageSource(fileLikes: FileLike[], src: string) {\n  let res;\n  try {\n    res = await fetch(src);\n  } catch (e) {\n    return;\n  }\n  const contentType = res.headers.get('Content-type') || 'application/octet-stream';\n  const buf = await res.arrayBuffer();\n  const blob = new Blob([buf], { type: contentType });\n  fileLikes.push(blob);\n}\n\nconst extractImageSources = (s: string) => {\n  const imageTags = new DOMParser()\n    .parseFromString(s, 'text/html')\n    .getElementsByTagName('img');\n  return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);\n};\n\nexport const isBlobButNotFile = (obj: unknown): obj is Blob =>\n  obj instanceof Blob && !(obj instanceof File);\n\nexport const createFileFromBlobs = ({\n  blobsArray,\n  fileName,\n  mimeType,\n}: {\n  blobsArray: Blob[];\n  fileName: string;\n  mimeType: string;\n}) => {\n  const concatenatedBlob = new Blob(blobsArray, { type: mimeType });\n  return new File([concatenatedBlob], fileName, { type: concatenatedBlob.type });\n};\n\nexport const getExtensionFromMimeType = (mimeType: string) => {\n  const match = mimeType.match(/\\/([^/;]+)/);\n  return match && match[1];\n};\n\nexport const getRecordedMediaTypeFromMimeType = (\n  mimeType: string,\n): RecordedMediaType | null => {\n  const match = mimeType.match(/^(audio|video)\\/.*$/);\n  return match && (match[1] as RecordedMediaType);\n};\n\nexport const readFileAsArrayBuffer = (file: File): Promise<ArrayBuffer> =>\n  new Promise((resolve, reject) => {\n    const fileReader = new FileReader();\n    fileReader.onload = () => {\n      resolve(fileReader.result as ArrayBuffer);\n    };\n\n    fileReader.onerror = () => {\n      reject(fileReader.error);\n    };\n\n    fileReader.readAsArrayBuffer(file);\n  });\n\nexport const generateFileName = (mimeType: string) =>\n  `file_${new Date().toISOString()}.${getExtensionFromMimeType(mimeType)}`;\n", "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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,mBAAyC;AAmIlC,IAAM,wBAAwB,CAAC,SACpC,IAAI,QAAQ,CAAC,SAAS,WAAW;AAC/B,QAAM,aAAa,IAAI,WAAW;AAClC,aAAW,SAAS,MAAM;AACxB,YAAQ,WAAW,MAAqB;AAAA,EAC1C;AAEA,aAAW,UAAU,MAAM;AACzB,WAAO,WAAW,KAAK;AAAA,EACzB;AAEA,aAAW,kBAAkB,IAAI;AACnC,CAAC;;;ACzII,IAAM,gBAAgB,OAAO,SAAe;AACjD,QAAM,WAAW,IAAI,aAAa;AAElC,QAAM,cAAc,MAAM,sBAAsB,IAAI;AACpD,QAAM,cAAc,MAAM,SAAS,gBAAgB,WAAW;AAC9D,MAAI,SAAS,UAAU,SAAU,OAAM,SAAS,MAAM;AACtD,SAAO;AACT;AAUO,IAAM,cAAc,OAAO,aAA0B,eAAuB;AACjF,QAAM,kBAAkB,IAAI;AAAA,IAC1B,YAAY;AAAA,IACZ,YAAY,WAAW;AAAA,IACvB;AAAA,EACF;AACA,QAAM,SAAS,gBAAgB,mBAAmB;AAClD,SAAO,SAAS;AAChB,SAAO,QAAQ,gBAAgB,WAAW;AAC1C,SAAO,MAAM;AAEb,SAAO,MAAM,gBAAgB,eAAe;AAC9C;;;AF/BA,IAAM,oBAAoB;AAC1B,IAAM,kCAAkC;AAExC,IAAM,2BAA2B,CAAC,eAA6B;AAC7D,QAAM,WAAW,IAAI,WAAW,WAAW,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;AAC1C,UAAM,eAAe,WAAW,CAAC;AAEjC,UAAM,eAAe,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,YAAY,CAAC;AAE3D,aAAS,CAAC,IAAI,KAAK,MAAM,eAAe,KAAK;AAAA,EAC/C;AACA,SAAO;AACT;AAEA,IAAM,qBAAqB,CAAC,gBAC1B,MAAM;AAAA,EAAK,EAAE,QAAQ,YAAY,iBAAiB;AAAA,EAAG,CAAC,GAAG,MACvD,YAAY,eAAe,CAAC;AAC9B,EAAE,IAAI,wBAAwB;AAEhC,eAAsB,YAAY,MAAY,YAAoB;AAChE,QAAM,SAAS,MAAM,OAAO,qBAAqB;AACjD,QAAM,cAAc,MAAM,YAAY,MAAM,cAAc,IAAI,GAAG,UAAU;AAC3E,QAAM,eAAe,YAAY;AACjC,QAAM,gBAAgB,mBAAmB,WAAW;AACpD,QAAM,aAAa,IAAI,OAAO,WAAW,cAAc,YAAY,iBAAiB;AAEpF,QAAM,aAA0B,CAAC;AACjC,MAAI,YAAY,cAAc,CAAC,EAAE;AACjC,WACM,IAAI,GACR,aAAa,iCACb,KAAK,iCACL;AACA,UAAM,CAAC,kBAAkB,iBAAiB,IAAI,cAAc;AAAA,MAAI,CAAC,YAC/D,QAAQ,SAAS,GAAG,IAAI,+BAA+B;AAAA,IACzD;AACA,eAAW;AAAA,MACT,IAAI,UAAU,WAAW,aAAa,kBAAkB,iBAAiB,CAAC;AAAA,IAC5E;AACA,iBAAa;AAAA,EACf;AAEA,QAAM,YAAY,WAAW,MAAM;AACnC,MAAI,UAAU,OAAQ,YAAW,KAAK,IAAI,UAAU,SAAS,CAAC;AAC9D,SAAO,IAAI,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAClE;",
+  "sourcesContent": ["import {\n  renderAudio,\n  toAudioBuffer,\n} from '../../components/MediaRecorder/transcode/audioProcessing';\n\nconst ENCODING_BIT_RATE = 128; // kbps;\nconst COUNT_SAMPLES_PER_ENCODED_BLOCK = 1152;\n\nconst float32ArrayToInt16Array = (float32Arr: Float32Array) => {\n  const int16Arr = new Int16Array(float32Arr.length);\n  for (let i = 0; i < float32Arr.length; i++) {\n    const float32Value = float32Arr[i];\n    // Clamp the float value between -1 and 1\n    const clampedValue = Math.max(-1, Math.min(1, float32Value));\n    // Convert the float value to a signed 16-bit integer\n    int16Arr[i] = Math.round(clampedValue * 32767);\n  }\n  return int16Arr;\n};\n\nconst splitDataByChannel = (audioBuffer: AudioBuffer) =>\n  Array.from({ length: audioBuffer.numberOfChannels }, (_, i) =>\n    audioBuffer.getChannelData(i),\n  ).map(float32ArrayToInt16Array);\n\nexport async function encodeToMp3(file: File, sampleRate: number) {\n  const lameJs = await import('@breezystack/lamejs');\n  const audioBuffer = await renderAudio(await toAudioBuffer(file), sampleRate);\n  const channelCount = audioBuffer.numberOfChannels;\n  const dataByChannel = splitDataByChannel(audioBuffer);\n  const mp3Encoder = new lameJs.Mp3Encoder(channelCount, sampleRate, ENCODING_BIT_RATE);\n\n  const dataBuffer: Int8Array[] = [];\n  let remaining = dataByChannel[0].length;\n  for (\n    let i = 0;\n    remaining >= COUNT_SAMPLES_PER_ENCODED_BLOCK;\n    i += COUNT_SAMPLES_PER_ENCODED_BLOCK\n  ) {\n    const [leftChannelBlock, rightChannelBlock] = dataByChannel.map((channel) =>\n      channel.subarray(i, i + COUNT_SAMPLES_PER_ENCODED_BLOCK),\n    );\n    dataBuffer.push(\n      new Int8Array(mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock)),\n    );\n    remaining -= COUNT_SAMPLES_PER_ENCODED_BLOCK;\n  }\n\n  const lastBlock = mp3Encoder.flush();\n  if (lastBlock.length) dataBuffer.push(new Int8Array(lastBlock));\n  return new Blob(dataBuffer, { type: 'audio/mp3;sbu_type=voice' });\n}\n", "import type { FileLike, RecordedMediaType } from './types';\nimport type { ChangeEvent } from 'react';\nimport { useCallback } from 'react';\n\nexport const useHandleFileChangeWrapper = (\n  resetOnChange = false,\n  handler?: (files: Array<File>) => void,\n) =>\n  useCallback(\n    ({ currentTarget }: ChangeEvent<HTMLInputElement>) => {\n      const { files } = currentTarget;\n\n      if (!files) return;\n\n      try {\n        handler?.(Array.from(files));\n      } catch (error) {\n        console.error(error);\n      }\n\n      if (resetOnChange) currentTarget.value = '';\n    },\n    [handler, resetOnChange],\n  );\n\nexport function dataTransferItemsHaveFiles(items?: DataTransferItem[]): boolean {\n  if (!items || !items.length) {\n    return false;\n  }\n  for (const item of items) {\n    if (item.kind === 'file' || item.type === 'text/html') {\n      return true;\n    }\n  }\n  return false;\n}\n\nexport async function dataTransferItemsToFiles(\n  items?: DataTransferItem[],\n): Promise<FileLike[]> {\n  if (!items || !items.length) {\n    return [];\n  }\n\n  // If there are files inside the DataTransferItem prefer those\n  const fileLikes = getFileLikes(items);\n  if (fileLikes.length) {\n    return fileLikes;\n  }\n\n  // Otherwise extract images from html\n  const blobPromises = [];\n  for (const item of items) {\n    if (item.type === 'text/html') {\n      blobPromises.push(\n        new Promise<void>((accept) => {\n          item.getAsString(async (s) => {\n            const imagePromises = extractImageSources(s).map((src) =>\n              getImageSource(fileLikes, src),\n            );\n\n            await Promise.all(imagePromises);\n            accept();\n          });\n        }),\n      );\n    }\n  }\n  await Promise.all(blobPromises);\n  return fileLikes;\n}\n\nfunction getFileLikes(items: DataTransferItem[]) {\n  const fileLikes = [];\n  for (const item of items) {\n    if (item.kind === 'file') {\n      const file = item.getAsFile();\n      if (file) {\n        fileLikes.push(file);\n      }\n    }\n  }\n  return fileLikes;\n}\n\nasync function getImageSource(fileLikes: FileLike[], src: string) {\n  let res;\n  try {\n    res = await fetch(src);\n  } catch (e) {\n    return;\n  }\n  const contentType = res.headers.get('Content-type') || 'application/octet-stream';\n  const buf = await res.arrayBuffer();\n  const blob = new Blob([buf], { type: contentType });\n  fileLikes.push(blob);\n}\n\nconst extractImageSources = (s: string) => {\n  const imageTags = new DOMParser()\n    .parseFromString(s, 'text/html')\n    .getElementsByTagName('img');\n  return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);\n};\n\nexport const isBlobButNotFile = (obj: unknown): obj is Blob =>\n  obj instanceof Blob && !(obj instanceof File);\n\nexport const createFileFromBlobs = ({\n  blobsArray,\n  fileName,\n  mimeType,\n}: {\n  blobsArray: Blob[];\n  fileName: string;\n  mimeType: string;\n}) => {\n  const concatenatedBlob = new Blob(blobsArray, { type: mimeType });\n  return new File([concatenatedBlob], fileName, { type: concatenatedBlob.type });\n};\n\nexport const getExtensionFromMimeType = (mimeType: string) => {\n  const match = mimeType.match(/\\/([^/;]+)/);\n  return match && match[1];\n};\n\nexport const getRecordedMediaTypeFromMimeType = (\n  mimeType: string,\n): RecordedMediaType | null => {\n  const match = mimeType.match(/^(audio|video)\\/.*$/);\n  return match && (match[1] as RecordedMediaType);\n};\n\nexport const readFileAsArrayBuffer = (file: File): Promise<ArrayBuffer> =>\n  new Promise((resolve, reject) => {\n    const fileReader = new FileReader();\n    fileReader.onload = () => {\n      resolve(fileReader.result as ArrayBuffer);\n    };\n\n    fileReader.onerror = () => {\n      reject(fileReader.error);\n    };\n\n    fileReader.readAsArrayBuffer(file);\n  });\n\nexport const generateFileName = (mimeType: string) =>\n  `file_${new Date().toISOString()}.${getExtensionFromMimeType(mimeType)}`;\n", "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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAA4B;AAmIrB,IAAM,wBAAwB,CAAC,SACpC,IAAI,QAAQ,CAAC,SAAS,WAAW;AAC/B,QAAM,aAAa,IAAI,WAAW;AAClC,aAAW,SAAS,MAAM;AACxB,YAAQ,WAAW,MAAqB;AAAA,EAC1C;AAEA,aAAW,UAAU,MAAM;AACzB,WAAO,WAAW,KAAK;AAAA,EACzB;AAEA,aAAW,kBAAkB,IAAI;AACnC,CAAC;;;AC1II,IAAM,gBAAgB,OAAO,SAAe;AACjD,QAAM,WAAW,IAAI,aAAa;AAElC,QAAM,cAAc,MAAM,sBAAsB,IAAI;AACpD,QAAM,cAAc,MAAM,SAAS,gBAAgB,WAAW;AAC9D,MAAI,SAAS,UAAU,SAAU,OAAM,SAAS,MAAM;AACtD,SAAO;AACT;AAUO,IAAM,cAAc,OAAO,aAA0B,eAAuB;AACjF,QAAM,kBAAkB,IAAI;AAAA,IAC1B,YAAY;AAAA,IACZ,YAAY,WAAW;AAAA,IACvB;AAAA,EACF;AACA,QAAM,SAAS,gBAAgB,mBAAmB;AAClD,SAAO,SAAS;AAChB,SAAO,QAAQ,gBAAgB,WAAW;AAC1C,SAAO,MAAM;AAEb,SAAO,MAAM,gBAAgB,eAAe;AAC9C;;;AF/BA,IAAM,oBAAoB;AAC1B,IAAM,kCAAkC;AAExC,IAAM,2BAA2B,CAAC,eAA6B;AAC7D,QAAM,WAAW,IAAI,WAAW,WAAW,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;AAC1C,UAAM,eAAe,WAAW,CAAC;AAEjC,UAAM,eAAe,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,YAAY,CAAC;AAE3D,aAAS,CAAC,IAAI,KAAK,MAAM,eAAe,KAAK;AAAA,EAC/C;AACA,SAAO;AACT;AAEA,IAAM,qBAAqB,CAAC,gBAC1B,MAAM;AAAA,EAAK,EAAE,QAAQ,YAAY,iBAAiB;AAAA,EAAG,CAAC,GAAG,MACvD,YAAY,eAAe,CAAC;AAC9B,EAAE,IAAI,wBAAwB;AAEhC,eAAsB,YAAY,MAAY,YAAoB;AAChE,QAAM,SAAS,MAAM,OAAO,qBAAqB;AACjD,QAAM,cAAc,MAAM,YAAY,MAAM,cAAc,IAAI,GAAG,UAAU;AAC3E,QAAM,eAAe,YAAY;AACjC,QAAM,gBAAgB,mBAAmB,WAAW;AACpD,QAAM,aAAa,IAAI,OAAO,WAAW,cAAc,YAAY,iBAAiB;AAEpF,QAAM,aAA0B,CAAC;AACjC,MAAI,YAAY,cAAc,CAAC,EAAE;AACjC,WACM,IAAI,GACR,aAAa,iCACb,KAAK,iCACL;AACA,UAAM,CAAC,kBAAkB,iBAAiB,IAAI,cAAc;AAAA,MAAI,CAAC,YAC/D,QAAQ,SAAS,GAAG,IAAI,+BAA+B;AAAA,IACzD;AACA,eAAW;AAAA,MACT,IAAI,UAAU,WAAW,aAAa,kBAAkB,iBAAiB,CAAC;AAAA,IAC5E;AACA,iBAAa;AAAA,EACf;AAEA,QAAM,YAAY,WAAW,MAAM;AACnC,MAAI,UAAU,OAAQ,YAAW,KAAK,IAAI,UAAU,SAAS,CAAC;AAC9D,SAAO,IAAI,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAClE;",
   "names": []
 }

package/dist/scss/v2/Autocomplete/Autocomplete-layout.scss

@@ -38,6 +38,16 @@
     padding: unset;
     margin: unset;
   }
+
+  .str-chat__suggestion-list--react {
+    overflow-y: unset;
+
+    .str-chat__suggestion-list-item {
+      > button {
+        width: 100%;
+      }
+    }
+  }
 }
 
 .str-chat__slash-command {
@@ -58,6 +68,8 @@
   .str-chat__user-item--name {
     @include utils.ellipsis-text;
     @include utils.prevent-glitch-text-overflow;
+    display: flex;
+    align-items: center;
     width: 100%;
   }
 }
@@ -69,6 +81,8 @@
 
   .str-chat__emoji-item--name {
     @include utils.ellipsis-text;
+    display: flex;
+    align-items: center;
     width: 100%;
   }
 }

package/dist/scss/v2/Autocomplete/Autocomplete-theme.scss

@@ -156,6 +156,8 @@
 
 .str-chat__slash-command {
   @include utils.component-layer-overrides('slash-command');
+  text-align: left;
+  font: var(--str-chat__subtitle-text);
 
   .str-chat__slash-command-header {
     .str-chat__slash-command-name {
@@ -206,4 +208,13 @@
       background-color: var(--str-chat__suggestion-list-item--selected-background-color);
     }
   }
+
+  .str-chat__suggestion-list--react {
+    .str-chat__suggestion-list-item {
+      > button {
+        @include utils.button-reset;
+        text-decoration: none;
+      }
+    }
+  }
 }

package/dist/scss/v2/DropzoneContainer/DropzoneContainer-layout.scss

@@ -0,0 +1,14 @@
+@use '../utils';
+
+.str-chat__dropzone-container {
+  @include utils.flex-row-center;
+
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 5;
+
+  p {
+    margin: unset;
+  }
+}

package/dist/scss/v2/DropzoneContainer/DropzoneContainer-theme.scss

@@ -0,0 +1,17 @@
+.str-chat {
+  /* The text/icon color of the dropzone container */
+  --str-chat__dropzone-container-color: var(--str-chat__on-primary-color);
+
+  /* The background color of the dropzone container */
+  --str-chat__dropzone-container-background-color: var(--str-chat__primary-overlay-color);
+
+  /* The backdrop filter applied to the dropzone container */
+  --str-chat__dropzone-container-backdrop-filter: blur(3px);
+}
+
+.str-chat__dropzone-container {
+  background-color: var(--str-chat__dropzone-container-background-color);
+  color: var(--str-chat__dropzone-container-color);
+  backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
+  font: var(--str-chat__subtitle-text);
+}

package/dist/scss/v2/LinkPreview/LinkPreview-layout.scss

@@ -46,4 +46,22 @@
     @include utils.button-reset;
     cursor: pointer;
   }
+}
+
+.str-chat__link-preview-card--loading {
+  .str-chat__link-preview-card__content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+
+    .str-chat__link-preview-card__content-title {
+      height: calc(var(--str-chat__spacing-px) * 16);
+      width: 100%
+    }
+
+    .str-chat__link-preview-card__content-description {
+      height: calc(var(--str-chat__spacing-px) * 12);
+      width: 100%;
+    }
+  }
 }

package/dist/scss/v2/LinkPreview/LinkPreview-theme.scss

@@ -1,3 +1,9 @@
+@use '../utils';
+
+.str-chat {
+  --str-chat__link-preview-loading-state-color: var(--str-chat__disabled-color);
+}
+
 .str-chat__link-preview-card {
   .str-chat__link-preview-card__content {
     border-left: 2px solid var(--str-chat__primary-color);
@@ -14,4 +20,13 @@
   .str-chat__link-preview-card__dismiss-button svg path {
     fill: var(--str-chat__text-low-emphasis-color);
   }
+}
+
+.str-chat__link-preview-card--loading {
+  .str-chat__link-preview-card__content-title,
+  .str-chat__link-preview-card__content-description {
+    @include utils.loading-item-background('link-preview');
+    @include utils.loading-animation;
+    border-radius: calc(var(--str-chat__spacing-px) * 3);
+  }
 }

package/dist/scss/v2/MessageInput/MessageInput-layout.scss

@@ -26,19 +26,6 @@
     }
   }
 
-  .str-chat__dropzone-container {
-    @include utils.flex-row-center;
-
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    z-index: 5;
-
-    p {
-      margin: unset;
-    }
-  }
-
   .str-chat__message-input-inner {
     flex-grow: 1;
     width: 100%;

package/dist/scss/v2/MessageInput/MessageInput-theme.scss

@@ -25,15 +25,6 @@
   /* Box shadow applied to the component */
   --str-chat__message-input-box-shadow: none;
 
-  /* The text/icon color of the dropzone container */
-  --str-chat__dropzone-container-color: var(--str-chat__on-primary-color);
-
-  /* The background color of the dropzone container */
-  --str-chat__dropzone-container-background-color: var(--str-chat__primary-overlay-color);
-
-  /* The backdrop filter applied to the dropzone container */
-  --str-chat__dropzone-container-backdrop-filter: blur(3px);
-
   /* The border radius used for the borders of the textarea */
   --str-chat__message-textarea-border-radius: var(--str-chat__border-radius-md);
 
@@ -179,19 +170,14 @@
   --str-chat__attachment-selector-actions-menu-button-icon-color: var(--str-chat__primary-color);
 
   /* Color applied to an attachment selector menu item icon when hovered over or focused */
-  --str-chat__attachment-selector-actions-menu-button-icon-color-active: var(--str-chat__primary-color);
+  --str-chat__attachment-selector-actions-menu-button-icon-color-active: var(
+    --str-chat__primary-color
+  );
 }
 
 .str-chat__message-input {
   @include utils.component-layer-overrides('message-input');
 
-  .str-chat__dropzone-container {
-    background-color: var(--str-chat__dropzone-container-background-color);
-    color: var(--str-chat__dropzone-container-color);
-    backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
-    font: var(--str-chat__subtitle-text);
-  }
-
   .str-chat__file-input-container {
     --str-chat-icon-color: var(--str-chat__message-input-tools-color);
     @include utils.component-layer-overrides('message-input-tools');
@@ -326,11 +312,14 @@
       background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color);
     }
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       color: var(--str-chat__text-color);
 
       .str-chat__dialog-menu__button-icon {
-        background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color-active);
+        background-color: var(
+          --str-chat__attachment-selector-actions-menu-button-icon-color-active
+        );
       }
     }
   }

package/dist/scss/v2/index.layout.scss

@@ -16,7 +16,8 @@
 @use 'common/CTAButton/CTAButton-layout';
 @use 'common/CircleFAButton/CircleFAButton-layout';
 @use 'Dialog/Dialog-layout';
-@use 'DragAndDropContainer/DragAmdDropContainer-layout';
+@use 'DragAndDropContainer/DragAndDropContainer-layout';
+@use 'DropzoneContainer/DropzoneContainer-layout';
 @use 'EditMessageForm/EditMessageForm-layout';
 @use 'Form/Form-layout';
 @use 'ImageCarousel/ImageCarousel-layout';

package/dist/scss/v2/index.scss

@@ -19,6 +19,7 @@
 @use 'ChannelSearch/ChannelSearch-theme';
 @use 'Dialog/Dialog-theme';
 @use 'DragAndDropContainer/DragAndDropContainer-theme';
+@use 'DropzoneContainer/DropzoneContainer-theme';
 @use 'EditMessageForm/EditMessageForm-theme';
 @use 'Form/Form-theme';
 @use 'Icon/Icon-theme';

package/dist/types/defaultDataInterfaces.d.ts

@@ -0,0 +1,25 @@
+export interface DefaultChannelData {
+    image?: string;
+    name?: string;
+    subtitle?: string;
+}
+export interface DefaultAttachmentData {
+}
+export interface DefaultCommandData {
+}
+export interface DefaultEventData {
+}
+export interface DefaultMemberData {
+}
+export interface DefaultMessageData {
+}
+export interface DefaultPollOptionData {
+}
+export interface DefaultPollData {
+}
+export interface DefaultReactionData {
+}
+export interface DefaultUserData {
+}
+export interface DefaultThreadData {
+}

package/dist/types/index.d.ts

@@ -1 +1,2 @@
-export type { DefaultStreamChatGenerics, ChannelUnreadUiState } from './types';
+export type { ChannelUnreadUiState } from './types';
+export type * from './defaultDataInterfaces';

package/dist/types/types.d.ts

@@ -1,57 +1,9 @@
 import type { PropsWithChildren } from 'react';
 import type { LoadingIndicatorProps } from '../components/Loading/LoadingIndicator';
-import type { APIErrorResponse, Attachment, ErrorFromResponse, Event, ExtendableGenerics, LiteralStringForUnion, Mute, ChannelState as StreamChannelState } from 'stream-chat';
+import type { Attachment, ChannelState as StreamChannelState } from 'stream-chat';
 export type UnknownType = Record<string, unknown>;
 export type PropsWithChildrenOnly = PropsWithChildren<Record<never, never>>;
-export type CustomTrigger = {
-    [key: string]: {
-        componentProps: UnknownType;
-        data: UnknownType;
-    };
-};
 export type CustomMessageType = 'channel.intro' | 'message.date';
-export type DefaultAttachmentType = UnknownType & {
-    asset_url?: string;
-    file_size?: number;
-    id?: string;
-    images?: Array<{
-        image_url?: string;
-        thumb_url?: string;
-    }>;
-};
-export type DefaultChannelType = UnknownType & {
-    frozen?: boolean;
-    image?: string;
-    member_count?: number;
-    subtitle?: string;
-};
-export type DefaultMessageType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = UnknownType & {
-    customType?: CustomMessageType;
-    date?: string | Date;
-    error?: ErrorFromResponse<APIErrorResponse>;
-    errorStatusCode?: number;
-    event?: Event<StreamChatGenerics>;
-    unread?: boolean;
-};
-export type DefaultUserTypeInternal = {
-    image?: string;
-    status?: string;
-};
-export type DefaultUserType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = UnknownType & DefaultUserTypeInternal & {
-    mutes?: Array<Mute<StreamChatGenerics>>;
-};
-export type DefaultStreamChatGenerics = ExtendableGenerics & {
-    attachmentType: DefaultAttachmentType;
-    channelType: DefaultChannelType;
-    commandType: LiteralStringForUnion;
-    eventType: UnknownType;
-    memberType: UnknownType;
-    messageType: DefaultMessageType;
-    pollOptionType: UnknownType;
-    pollType: UnknownType;
-    reactionType: UnknownType;
-    userType: DefaultUserType;
-};
 export type GiphyVersions = 'original' | 'fixed_height' | 'fixed_height_still' | 'fixed_height_downsampled' | 'fixed_width' | 'fixed_width_still' | 'fixed_width_downsampled';
 export type PaginatorProps = {
     /** callback to load the next page */
@@ -91,19 +43,7 @@ export type VideoAttachmentConfiguration = ImageAttachmentConfiguration & {
 };
 export type ImageAttachmentSizeHandler = (attachment: Attachment, element: HTMLElement) => ImageAttachmentConfiguration;
 export type VideoAttachmentSizeHandler = (attachment: Attachment, element: HTMLElement, shouldGenerateVideoThumbnail: boolean) => VideoAttachmentConfiguration;
-export type ChannelUnreadUiState<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Omit<ValuesType<StreamChannelState<StreamChatGenerics>['read']>, 'user'>;
-export type SendMessageOptions = {
-    force_moderation?: boolean;
-    is_pending_message?: boolean;
-    keep_channel_hidden?: boolean;
-    pending?: boolean;
-    pending_message_metadata?: Record<string, string>;
-    skip_enrich_url?: boolean;
-    skip_push?: boolean;
-};
-export type UpdateMessageOptions = {
-    skip_enrich_url?: boolean;
-};
+export type ChannelUnreadUiState = Omit<ValuesType<StreamChannelState['read']>, 'user'>;
 export type Readable<T> = {
     [key in keyof T]: T[key];
 } & {};

package/dist/utils/getChannel.d.ts

@@ -1,11 +1,10 @@
 import type { Channel, ChannelQueryOptions, StreamChat } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../types/types';
-type GetChannelParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    client: StreamChat<StreamChatGenerics>;
-    channel?: Channel<StreamChatGenerics>;
+type GetChannelParams = {
+    client: StreamChat;
+    channel?: Channel;
     id?: string;
     members?: string[];
-    options?: ChannelQueryOptions<StreamChatGenerics>;
+    options?: ChannelQueryOptions;
     type?: string;
 };
 /**
@@ -17,5 +16,5 @@ type GetChannelParams<StreamChatGenerics extends DefaultStreamChatGenerics = Def
  * @param id
  * @param channel
  */
-export declare const getChannel: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channel, client, id, members, options, type, }: GetChannelParams<StreamChatGenerics>) => Promise<Channel<StreamChatGenerics>>;
+export declare const getChannel: ({ channel, client, id, members, options, type, }: GetChannelParams) => Promise<Channel>;
 export {};

package/dist/utils/mergeDeep.d.ts

@@ -1,3 +1,2 @@
-import { UR } from 'stream-chat';
-export declare const mergeDeep: <TObject extends UR, TSource extends UR>(target: TObject, source: TSource) => TObject & TSource;
-export declare const mergeDeepUndefined: <TObject extends UR, TSource extends UR>(target: TObject, source: TSource) => TObject & TSource;
+export declare const mergeDeep: <TObject, TSource>(target: TObject, source: TSource) => TObject & TSource;
+export declare const mergeDeepUndefined: <TObject, TSource>(target: TObject, source: TSource) => TObject & TSource;