stream-chat-react 13.14.2 → 14.0.0-beta.1

package/dist/audioProcessing-BbOs2wMd.js

@@ -0,0 +1,123 @@
+"use strict";
+const React = require("react");
+const useHandleFileChangeWrapper = (resetOnChange = false, handler) => React.useCallback(
+  ({ currentTarget }) => {
+    const { files } = currentTarget;
+    if (!files) return;
+    try {
+      handler?.(Array.from(files));
+    } catch (error) {
+      console.error(error);
+    }
+    if (resetOnChange) currentTarget.value = "";
+  },
+  [handler, resetOnChange]
+);
+async function dataTransferItemsToFiles(items) {
+  if (!items || !items.length) {
+    return [];
+  }
+  const fileLikes = getFileLikes(items);
+  if (fileLikes.length) {
+    return fileLikes;
+  }
+  const blobPromises = [];
+  for (const item of items) {
+    if (item.type === "text/html") {
+      blobPromises.push(
+        new Promise((accept) => {
+          item.getAsString(async (s) => {
+            const imagePromises = extractImageSources(s).map(
+              (src) => getImageSource(fileLikes, src)
+            );
+            await Promise.all(imagePromises);
+            accept();
+          });
+        })
+      );
+    }
+  }
+  await Promise.all(blobPromises);
+  return fileLikes;
+}
+function getFileLikes(items) {
+  const fileLikes = [];
+  for (const item of items) {
+    if (item.kind === "file") {
+      const file = item.getAsFile();
+      if (file) {
+        fileLikes.push(file);
+      }
+    }
+  }
+  return fileLikes;
+}
+async function getImageSource(fileLikes, src) {
+  let res;
+  try {
+    res = await fetch(src);
+  } catch (e) {
+    return;
+  }
+  const contentType = res.headers.get("Content-type") || "application/octet-stream";
+  const buf = await res.arrayBuffer();
+  const blob = new Blob([buf], { type: contentType });
+  fileLikes.push(blob);
+}
+const extractImageSources = (s) => {
+  const imageTags = new DOMParser().parseFromString(s, "text/html").getElementsByTagName("img");
+  return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);
+};
+const createFileFromBlobs = ({
+  blobsArray,
+  fileName,
+  mimeType
+}) => {
+  const concatenatedBlob = new Blob(blobsArray, { type: mimeType });
+  return new File([concatenatedBlob], fileName, { type: concatenatedBlob.type });
+};
+const getExtensionFromMimeType = (mimeType) => {
+  const match = mimeType.match(/\/([^/;]+)/);
+  return match && match[1];
+};
+const getRecordedMediaTypeFromMimeType = (mimeType) => {
+  const match = mimeType.match(/^(audio|video)\/.*$/);
+  return match && match[1];
+};
+const readFileAsArrayBuffer = (file) => new Promise((resolve, reject) => {
+  const fileReader = new FileReader();
+  fileReader.onload = () => {
+    resolve(fileReader.result);
+  };
+  fileReader.onerror = () => {
+    reject(fileReader.error);
+  };
+  fileReader.readAsArrayBuffer(file);
+});
+const 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;
+};
+const 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();
+};
+exports.createFileFromBlobs = createFileFromBlobs;
+exports.dataTransferItemsToFiles = dataTransferItemsToFiles;
+exports.getExtensionFromMimeType = getExtensionFromMimeType;
+exports.getRecordedMediaTypeFromMimeType = getRecordedMediaTypeFromMimeType;
+exports.renderAudio = renderAudio;
+exports.toAudioBuffer = toAudioBuffer;
+exports.useHandleFileChangeWrapper = useHandleFileChangeWrapper;
+//# sourceMappingURL=audioProcessing-BbOs2wMd.js.map

package/dist/audioProcessing-BbOs2wMd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audioProcessing-BbOs2wMd.js","sources":["../src/components/ReactFileUtilities/utils.ts","../src/components/MediaRecorder/transcode/audioProcessing.ts"],"sourcesContent":["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"],"names":["useCallback"],"mappings":"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"}

package/dist/audioProcessing-ByEVSjGG.mjs

@@ -0,0 +1,124 @@
+import { useCallback } from "react";
+const useHandleFileChangeWrapper = (resetOnChange = false, handler) => useCallback(
+  ({ currentTarget }) => {
+    const { files } = currentTarget;
+    if (!files) return;
+    try {
+      handler?.(Array.from(files));
+    } catch (error) {
+      console.error(error);
+    }
+    if (resetOnChange) currentTarget.value = "";
+  },
+  [handler, resetOnChange]
+);
+async function dataTransferItemsToFiles(items) {
+  if (!items || !items.length) {
+    return [];
+  }
+  const fileLikes = getFileLikes(items);
+  if (fileLikes.length) {
+    return fileLikes;
+  }
+  const blobPromises = [];
+  for (const item of items) {
+    if (item.type === "text/html") {
+      blobPromises.push(
+        new Promise((accept) => {
+          item.getAsString(async (s) => {
+            const imagePromises = extractImageSources(s).map(
+              (src) => getImageSource(fileLikes, src)
+            );
+            await Promise.all(imagePromises);
+            accept();
+          });
+        })
+      );
+    }
+  }
+  await Promise.all(blobPromises);
+  return fileLikes;
+}
+function getFileLikes(items) {
+  const fileLikes = [];
+  for (const item of items) {
+    if (item.kind === "file") {
+      const file = item.getAsFile();
+      if (file) {
+        fileLikes.push(file);
+      }
+    }
+  }
+  return fileLikes;
+}
+async function getImageSource(fileLikes, src) {
+  let res;
+  try {
+    res = await fetch(src);
+  } catch (e) {
+    return;
+  }
+  const contentType = res.headers.get("Content-type") || "application/octet-stream";
+  const buf = await res.arrayBuffer();
+  const blob = new Blob([buf], { type: contentType });
+  fileLikes.push(blob);
+}
+const extractImageSources = (s) => {
+  const imageTags = new DOMParser().parseFromString(s, "text/html").getElementsByTagName("img");
+  return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);
+};
+const createFileFromBlobs = ({
+  blobsArray,
+  fileName,
+  mimeType
+}) => {
+  const concatenatedBlob = new Blob(blobsArray, { type: mimeType });
+  return new File([concatenatedBlob], fileName, { type: concatenatedBlob.type });
+};
+const getExtensionFromMimeType = (mimeType) => {
+  const match = mimeType.match(/\/([^/;]+)/);
+  return match && match[1];
+};
+const getRecordedMediaTypeFromMimeType = (mimeType) => {
+  const match = mimeType.match(/^(audio|video)\/.*$/);
+  return match && match[1];
+};
+const readFileAsArrayBuffer = (file) => new Promise((resolve, reject) => {
+  const fileReader = new FileReader();
+  fileReader.onload = () => {
+    resolve(fileReader.result);
+  };
+  fileReader.onerror = () => {
+    reject(fileReader.error);
+  };
+  fileReader.readAsArrayBuffer(file);
+});
+const 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;
+};
+const 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();
+};
+export {
+  getRecordedMediaTypeFromMimeType as a,
+  createFileFromBlobs as c,
+  dataTransferItemsToFiles as d,
+  getExtensionFromMimeType as g,
+  renderAudio as r,
+  toAudioBuffer as t,
+  useHandleFileChangeWrapper as u
+};
+//# sourceMappingURL=audioProcessing-ByEVSjGG.mjs.map

package/dist/audioProcessing-ByEVSjGG.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"audioProcessing-ByEVSjGG.mjs","sources":["../src/components/ReactFileUtilities/utils.ts","../src/components/MediaRecorder/transcode/audioProcessing.ts"],"sourcesContent":["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"],"names":[],"mappings":"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"}

package/dist/cjs/emojis.js

@@ -0,0 +1,229 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Picker = require("@emoji-mart/react");
+const WithAudioPlayback = require("../WithAudioPlayback-TERIQpZ6.js");
+const mergeWith = require("lodash.mergewith");
+const streamChat = require("stream-chat");
+const isShadowRoot = (node) => !!node.host;
+const defaultButtonClassName = "str-chat__emoji-picker-button";
+const classNames = {
+  pickerContainerClassName: "str-chat__message-textarea-emoji-picker-container",
+  wrapperClassName: "str-chat__message-textarea-emoji-picker"
+};
+const EmojiPicker = (props) => {
+  const { t } = WithAudioPlayback.useTranslationContext("EmojiPicker");
+  const { textareaRef } = WithAudioPlayback.useMessageComposerContext();
+  const { textComposer } = WithAudioPlayback.useMessageComposerController();
+  const isCooldownActive = WithAudioPlayback.useIsCooldownActive();
+  const [displayPicker, setDisplayPicker] = React.useState(false);
+  const [referenceElement, setReferenceElement] = React.useState(
+    null
+  );
+  const [popperElement, setPopperElement] = React.useState(null);
+  const { refs, strategy, x, y } = WithAudioPlayback.usePopoverPosition({
+    placement: props.placement ?? "top-end"
+  });
+  React.useEffect(() => {
+    refs.setReference(referenceElement);
+  }, [referenceElement, refs]);
+  React.useEffect(() => {
+    refs.setFloating(popperElement);
+  }, [popperElement, refs]);
+  const { pickerContainerClassName, wrapperClassName } = classNames;
+  const { ButtonIconComponent = WithAudioPlayback.IconEmojiSmile } = props;
+  React.useEffect(() => {
+    if (!popperElement || !referenceElement) return;
+    const handlePointerDown = (e) => {
+      const target = e.target;
+      const rootNode = target.getRootNode();
+      if (popperElement.contains(isShadowRoot(rootNode) ? rootNode.host : target) || referenceElement.contains(target)) {
+        return;
+      }
+      setDisplayPicker(false);
+    };
+    window.addEventListener("pointerdown", handlePointerDown);
+    return () => window.removeEventListener("pointerdown", handlePointerDown);
+  }, [referenceElement, popperElement]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: props.wrapperClassName ?? wrapperClassName, children: [
+    displayPicker && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: props.pickerContainerClassName ?? pickerContainerClassName,
+        ref: setPopperElement,
+        style: { left: x ?? 0, position: strategy, top: y ?? 0 },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Picker,
+          {
+            data: async () => (await import("@emoji-mart/data")).default,
+            onEmojiSelect: (e) => {
+              const textarea = textareaRef.current;
+              if (!textarea) return;
+              textComposer.insertText({ text: e.native });
+              textarea.focus();
+              if (props.closeOnEmojiSelect) {
+                setDisplayPicker(false);
+              }
+            },
+            ...props.pickerProps
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      WithAudioPlayback.Button,
+      {
+        appearance: "ghost",
+        "aria-expanded": displayPicker,
+        "aria-label": t("aria/Emoji picker"),
+        circular: true,
+        className: props.buttonClassName ?? defaultButtonClassName,
+        disabled: isCooldownActive,
+        onClick: () => setDisplayPicker((cv) => !cv),
+        ref: setReferenceElement,
+        size: "sm",
+        type: "button",
+        variant: "secondary",
+        children: ButtonIconComponent && /* @__PURE__ */ jsxRuntime.jsx(ButtonIconComponent, {})
+      }
+    )
+  ] });
+};
+class EmojiSearchSource extends streamChat.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) ?? [];
+    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,
+      ...streamChat.getTokenizedSuggestionDisplayName({
+        displayName: item.id,
+        searchToken: this.searchQuery
+      })
+    }));
+  }
+}
+const DEFAULT_OPTIONS = { minChars: 1, trigger: ":" };
+const createTextComposerEmojiMiddleware = (emojiSearchIndex, options) => {
+  const finalOptions = mergeWith(DEFAULT_OPTIONS, options ?? {});
+  const emojiSearchSource = new EmojiSearchSource(emojiSearchIndex);
+  emojiSearchSource.activate();
+  return {
+    id: "stream-io/emoji-middleware",
+    // eslint-disable-next-line sort-keys
+    handlers: {
+      onChange: async ({ complete, forward, next, state }) => {
+        if (!state.selection) return forward();
+        const triggerWithToken = streamChat.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 = state.suggestions?.trigger === finalOptions.trigger;
+          const newState = { ...state };
+          if (hasSuggestionsForTrigger && newState.suggestions) {
+            delete newState.suggestions;
+          }
+          return next(newState);
+        }
+        const newSearchTriggerred = triggerWithToken && triggerWithToken === finalOptions.trigger;
+        if (newSearchTriggerred) {
+          emojiSearchSource.resetStateAndActivate();
+        }
+        const textWithReplacedWord = await streamChat.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 complete({
+            ...state,
+            suggestions: void 0,
+            // to prevent the TextComposerMiddlewareExecutor to run the first page query
+            text: textWithReplacedWord
+          });
+        }
+        return complete({
+          ...state,
+          suggestions: {
+            query: triggerWithToken.slice(1),
+            searchSource: emojiSearchSource,
+            trigger: finalOptions.trigger
+          }
+        });
+      },
+      onSuggestionItemSelect: ({ complete, forward, state }) => {
+        const { selectedSuggestion } = state.change ?? {};
+        if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
+          return forward();
+        emojiSearchSource.resetStateAndActivate();
+        return complete({
+          ...state,
+          ...streamChat.insertItemWithTrigger({
+            insertText: `${"native" in selectedSuggestion ? selectedSuggestion.native : ""} `,
+            selection: state.selection,
+            text: state.text,
+            trigger: finalOptions.trigger
+          }),
+          suggestions: void 0
+          // Clear suggestions after selection
+        });
+      }
+    }
+  };
+};
+exports.EmojiPicker = EmojiPicker;
+exports.createTextComposerEmojiMiddleware = createTextComposerEmojiMiddleware;
+//# sourceMappingURL=emojis.js.map

package/dist/cjs/emojis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emojis.js","sources":["../../src/plugins/Emojis/EmojiPicker.tsx","../../src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport Picker from '@emoji-mart/react';\n\nimport { useMessageComposerContext, useTranslationContext } from '../../context';\nimport {\n  Button,\n  IconEmojiSmile,\n  type PopperLikePlacement,\n  useMessageComposerController,\n} from '../../components';\nimport { usePopoverPosition } from '../../components/Dialog/hooks/usePopoverPosition';\nimport { useIsCooldownActive } from '../../components/MessageComposer/hooks/useIsCooldownActive';\n\nconst isShadowRoot = (node: Node): node is ShadowRoot => !!(node as ShadowRoot).host;\n\nexport type EmojiPickerProps = {\n  ButtonIconComponent?: React.ComponentType;\n  buttonClassName?: string;\n  pickerContainerClassName?: string;\n  wrapperClassName?: string;\n  closeOnEmojiSelect?: boolean;\n  /**\n   * Untyped [properties](https://github.com/missive/emoji-mart/tree/v5.5.2#options--props) to be\n   * passed down to the [emoji-mart `Picker`](https://github.com/missive/emoji-mart/tree/v5.5.2#-picker) component\n   */\n  pickerProps?: Partial<{ theme: 'auto' | 'light' | 'dark' } & Record<string, unknown>>;\n  /**\n   * Floating UI placement (default: 'top-end') for the picker popover\n   */\n  placement?: PopperLikePlacement;\n  /**\n   * Deprecated: Popper options, use `placement` instead.\n   */\n  popperOptions?: Partial<{ placement: PopperLikePlacement }>;\n};\n\nconst defaultButtonClassName = 'str-chat__emoji-picker-button';\n\nconst classNames: Pick<\n  EmojiPickerProps,\n  'pickerContainerClassName' | 'wrapperClassName'\n> = {\n  pickerContainerClassName: 'str-chat__message-textarea-emoji-picker-container',\n  wrapperClassName: 'str-chat__message-textarea-emoji-picker',\n};\n\nexport const EmojiPicker = (props: EmojiPickerProps) => {\n  const { t } = useTranslationContext('EmojiPicker');\n  const { textareaRef } = useMessageComposerContext('EmojiPicker');\n  const { textComposer } = useMessageComposerController();\n  const isCooldownActive = useIsCooldownActive();\n  const [displayPicker, setDisplayPicker] = useState(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(\n    null,\n  );\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n  const { refs, strategy, x, y } = usePopoverPosition({\n    placement: props.placement ?? 'top-end',\n  });\n\n  useEffect(() => {\n    refs.setReference(referenceElement);\n  }, [referenceElement, refs]);\n  useEffect(() => {\n    refs.setFloating(popperElement);\n  }, [popperElement, refs]);\n\n  const { pickerContainerClassName, wrapperClassName } = classNames;\n\n  const { ButtonIconComponent = IconEmojiSmile } = props;\n\n  useEffect(() => {\n    if (!popperElement || !referenceElement) return;\n\n    const handlePointerDown = (e: PointerEvent) => {\n      const target = e.target as HTMLElement;\n\n      const rootNode = target.getRootNode();\n\n      if (\n        popperElement.contains(isShadowRoot(rootNode) ? rootNode.host : target) ||\n        referenceElement.contains(target)\n      ) {\n        return;\n      }\n\n      setDisplayPicker(false);\n    };\n\n    window.addEventListener('pointerdown', handlePointerDown);\n    return () => window.removeEventListener('pointerdown', handlePointerDown);\n  }, [referenceElement, popperElement]);\n\n  return (\n    <div className={props.wrapperClassName ?? wrapperClassName}>\n      {displayPicker && (\n        <div\n          className={props.pickerContainerClassName ?? pickerContainerClassName}\n          ref={setPopperElement}\n          style={{ left: x ?? 0, position: strategy, top: y ?? 0 }}\n        >\n          <Picker\n            data={async () => (await import('@emoji-mart/data')).default}\n            onEmojiSelect={(e: { native: string }) => {\n              const textarea = textareaRef.current;\n              if (!textarea) return;\n              textComposer.insertText({ text: e.native });\n              textarea.focus();\n              if (props.closeOnEmojiSelect) {\n                setDisplayPicker(false);\n              }\n            }}\n            {...props.pickerProps}\n          />\n        </div>\n      )}\n      <Button\n        appearance='ghost'\n        aria-expanded={displayPicker}\n        aria-label={t('aria/Emoji picker')}\n        circular\n        className={props.buttonClassName ?? defaultButtonClassName}\n        disabled={isCooldownActive}\n        onClick={() => setDisplayPicker((cv) => !cv)}\n        ref={setReferenceElement}\n        size='sm'\n        type='button'\n        variant='secondary'\n      >\n        {ButtonIconComponent && <ButtonIconComponent />}\n      </Button>\n    </div>\n  );\n};\n","import mergeWith from 'lodash.mergewith';\nimport type {\n  Middleware,\n  SearchSourceOptions,\n  SearchSourceType,\n  TextComposerMiddlewareExecutorState,\n  TextComposerMiddlewareOptions,\n  TextComposerSuggestion,\n} from 'stream-chat';\nimport {\n  BaseSearchSource,\n  getTokenizedSuggestionDisplayName,\n  getTriggerCharWithToken,\n  insertItemWithTrigger,\n  replaceWordWithEntity,\n} from 'stream-chat';\nimport type {\n  EmojiSearchIndex,\n  EmojiSearchIndexResult,\n} from '../../../components/MessageComposer';\n\nexport type EmojiSuggestion<T extends EmojiSearchIndexResult = EmojiSearchIndexResult> =\n  TextComposerSuggestion<T>;\n\nclass EmojiSearchSource<\n  T extends TextComposerSuggestion<EmojiSearchIndexResult>,\n> extends BaseSearchSource<T> {\n  readonly type: SearchSourceType = 'emoji';\n  private emojiSearchIndex: EmojiSearchIndex;\n\n  constructor(emojiSearchIndex: EmojiSearchIndex, options?: SearchSourceOptions) {\n    super(options);\n    this.emojiSearchIndex = emojiSearchIndex;\n  }\n\n  async query(searchQuery: string) {\n    if (searchQuery.length === 0) {\n      return { items: [] as T[], next: null };\n    }\n    const emojis = (await this.emojiSearchIndex.search(searchQuery)) ?? [];\n\n    // emojiIndex.search sometimes returns undefined values, so filter those out first\n    return {\n      items: emojis\n        .filter(Boolean)\n        .slice(0, 7)\n        .map(({ emoticons = [], id, name, native, skins = [] }) => {\n          const [firstSkin] = skins;\n\n          return {\n            emoticons,\n            id,\n            name,\n            native: native ?? firstSkin.native,\n          };\n        }) as T[],\n      next: null, // todo: generate cursor\n    };\n  }\n\n  protected filterQueryResults(items: T[]): T[] | Promise<T[]> {\n    return items.map((item) => ({\n      ...item,\n      ...getTokenizedSuggestionDisplayName({\n        displayName: item.id,\n        searchToken: this.searchQuery,\n      }),\n    }));\n  }\n}\n\nconst DEFAULT_OPTIONS: TextComposerMiddlewareOptions = { minChars: 1, trigger: ':' };\n\nexport type EmojiMiddleware<T extends EmojiSearchIndexResult = EmojiSearchIndexResult> =\n  Middleware<\n    TextComposerMiddlewareExecutorState<EmojiSuggestion<T>>,\n    'onChange' | 'onSuggestionItemSelect'\n  >;\n\n/**\n * TextComposer middleware for mentions\n * Usage:\n *\n *  const textComposer = new TextComposer(options);\n *\n *  textComposer.use(new createTextComposerEmojiMiddleware(emojiSearchIndex, {\n *   minChars: 2\n *  }));\n *\n * @param emojiSearchIndex\n * @param {{\n *     minChars: number;\n *     trigger: string;\n *   }} options\n * @returns\n */\nexport const createTextComposerEmojiMiddleware = (\n  emojiSearchIndex: EmojiSearchIndex,\n  options?: Partial<TextComposerMiddlewareOptions>,\n): EmojiMiddleware => {\n  const finalOptions = mergeWith(DEFAULT_OPTIONS, options ?? {});\n  const emojiSearchSource = new EmojiSearchSource(emojiSearchIndex);\n  emojiSearchSource.activate();\n\n  return {\n    id: 'stream-io/emoji-middleware',\n    // eslint-disable-next-line sort-keys\n    handlers: {\n      onChange: async ({ complete, forward, next, state }) => {\n        if (!state.selection) return forward();\n\n        const triggerWithToken = getTriggerCharWithToken({\n          acceptTrailingSpaces: false,\n          text: state.text.slice(0, state.selection.end),\n          trigger: finalOptions.trigger,\n        });\n\n        const triggerWasRemoved =\n          !triggerWithToken || triggerWithToken.length < finalOptions.minChars;\n\n        if (triggerWasRemoved) {\n          const hasSuggestionsForTrigger =\n            state.suggestions?.trigger === finalOptions.trigger;\n          const newState = { ...state };\n          if (hasSuggestionsForTrigger && newState.suggestions) {\n            delete newState.suggestions;\n          }\n          return next(newState);\n        }\n\n        const newSearchTriggerred =\n          triggerWithToken && triggerWithToken === finalOptions.trigger;\n\n        if (newSearchTriggerred) {\n          emojiSearchSource.resetStateAndActivate();\n        }\n\n        const textWithReplacedWord = await replaceWordWithEntity({\n          caretPosition: state.selection.end,\n          getEntityString: async (word: string) => {\n            const { items } = await emojiSearchSource.query(word);\n\n            const emoji = items\n              .filter(Boolean)\n              .slice(0, 10)\n              .find(({ emoticons }) => !!emoticons?.includes(word));\n\n            if (!emoji) return null;\n\n            const [firstSkin] = emoji.skins ?? [];\n\n            return emoji.native ?? firstSkin.native;\n          },\n          text: state.text,\n        });\n\n        if (textWithReplacedWord !== state.text) {\n          return complete({\n            ...state,\n            suggestions: undefined, // to prevent the TextComposerMiddlewareExecutor to run the first page query\n            text: textWithReplacedWord,\n          });\n        }\n\n        return complete({\n          ...state,\n          suggestions: {\n            query: triggerWithToken.slice(1),\n            searchSource: emojiSearchSource,\n            trigger: finalOptions.trigger,\n          },\n        });\n      },\n      onSuggestionItemSelect: ({ complete, forward, state }) => {\n        const { selectedSuggestion } = state.change ?? {};\n        if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)\n          return forward();\n\n        emojiSearchSource.resetStateAndActivate();\n        return complete({\n          ...state,\n          ...insertItemWithTrigger({\n            insertText: `${'native' in selectedSuggestion ? selectedSuggestion.native : ''} `,\n            selection: state.selection,\n            text: state.text,\n            trigger: finalOptions.trigger,\n          }),\n          suggestions: undefined, // Clear suggestions after selection\n        });\n      },\n    },\n  };\n};\n"],"names":["useTranslationContext","useMessageComposerContext","useMessageComposerController","useIsCooldownActive","useState","usePopoverPosition","useEffect","IconEmojiSmile","jsxs","jsx","Button","BaseSearchSource","getTokenizedSuggestionDisplayName","getTriggerCharWithToken","replaceWordWithEntity","insertItemWithTrigger"],"mappings":"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"}