stream-chat-react 12.0.0-rc.1 → 12.0.0-rc.3

package/dist/{components → plugins}/Emojis/EmojiPicker.js

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { usePopper } from 'react-popper';
 import Picker from '@emoji-mart/react';
 import { useMessageInputContext, useTranslationContext } from '../../context';
-import { EmojiPickerIcon } from '../MessageInput/icons';
+import { EmojiPickerIcon } from './icons';
 const isShadowRoot = (node) => !!node.host;
 const classNames = {
     buttonClassName: 'str-chat__emoji-picker-button',

package/dist/plugins/Emojis/icons.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const EmojiPickerIcon: () => React.JSX.Element;

package/dist/plugins/Emojis/icons.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export const EmojiPickerIcon = () => (React.createElement("svg", { preserveAspectRatio: 'xMinYMin', viewBox: '0 0 28 28', width: '100%', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
+        React.createElement("path", { d: 'M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z' }))));

package/dist/{components → plugins}/Emojis/index.cjs.js

@@ -27,14 +27,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/Emojis/index.ts
+// src/plugins/Emojis/index.ts
 var Emojis_exports = {};
 __export(Emojis_exports, {
-  EmojiPicker: () => EmojiPicker
+  EmojiPicker: () => EmojiPicker,
+  EmojiPickerIcon: () => EmojiPickerIcon
 });
 module.exports = __toCommonJS(Emojis_exports);
 
-// src/components/Emojis/EmojiPicker.tsx
+// src/plugins/Emojis/EmojiPicker.tsx
 var import_react4 = __toESM(require("react"));
 var import_react_popper = require("react-popper");
 var import_react5 = __toESM(require("@emoji-mart/react"));
@@ -230,25 +231,11 @@ var useTranslationContext = (componentName) => {
   return contextValue;
 };
 
-// src/components/MessageInput/icons.tsx
-var import_react2 = __toESM(require("react"));
-var import_nanoid = require("nanoid");
-var EmojiPickerIcon = () => /* @__PURE__ */ import_react2.default.createElement(
-  "svg",
-  {
-    preserveAspectRatio: "xMinYMin",
-    viewBox: "0 0 28 28",
-    width: "100%",
-    xmlns: "http://www.w3.org/2000/svg"
-  },
-  /* @__PURE__ */ import_react2.default.createElement("g", { clipRule: "evenodd", fillRule: "evenodd" }, /* @__PURE__ */ import_react2.default.createElement("path", { d: "M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z" }))
-);
-
 // src/context/MessageInputContext.tsx
-var import_react3 = __toESM(require("react"));
-var MessageInputContext = (0, import_react3.createContext)(void 0);
+var import_react2 = __toESM(require("react"));
+var MessageInputContext = (0, import_react2.createContext)(void 0);
 var useMessageInputContext = (componentName) => {
-  const contextValue = (0, import_react3.useContext)(MessageInputContext);
+  const contextValue = (0, import_react2.useContext)(MessageInputContext);
   if (!contextValue) {
     console.warn(
       `The useMessageInputContext hook was called outside of the MessageInputContext provider. Make sure this hook is called within the MessageInput's UI component. The errored call is located in the ${componentName} component.`
@@ -258,7 +245,20 @@ var useMessageInputContext = (componentName) => {
   return contextValue;
 };
 
-// src/components/Emojis/EmojiPicker.tsx
+// src/plugins/Emojis/icons.tsx
+var import_react3 = __toESM(require("react"));
+var EmojiPickerIcon = () => /* @__PURE__ */ import_react3.default.createElement(
+  "svg",
+  {
+    preserveAspectRatio: "xMinYMin",
+    viewBox: "0 0 28 28",
+    width: "100%",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  /* @__PURE__ */ import_react3.default.createElement("g", { clipRule: "evenodd", fillRule: "evenodd" }, /* @__PURE__ */ import_react3.default.createElement("path", { d: "M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z" }))
+);
+
+// src/plugins/Emojis/EmojiPicker.tsx
 var isShadowRoot = (node) => !!node.host;
 var classNames = {
   buttonClassName: "str-chat__emoji-picker-button",
@@ -328,6 +328,7 @@ var EmojiPicker = (props) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  EmojiPicker
+  EmojiPicker,
+  EmojiPickerIcon
 });
 //# sourceMappingURL=index.cjs.js.map

package/dist/plugins/Emojis/index.cjs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/plugins/Emojis/index.ts", "../../../src/plugins/Emojis/EmojiPicker.tsx", "../../../src/context/TranslationContext.tsx", "../../../src/i18n/Streami18n.ts", "../../../src/context/MessageInputContext.tsx", "../../../src/plugins/Emojis/icons.tsx"],
+  "sourcesContent": ["export * from './EmojiPicker';\nexport { EmojiPickerIcon } from './icons';\n", "/* eslint-disable typescript-sort-keys/interface */\nimport React, { useEffect, useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport Picker from '@emoji-mart/react';\n\nimport type { Options } from '@popperjs/core';\n\nimport { useMessageInputContext, useTranslationContext } from '../../context';\nimport { EmojiPickerIcon } from './icons';\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   * [React Popper options](https://popper.js.org/docs/v2/constructors/#options) to be\n   * passed down to the [react-popper `usePopper`](https://popper.js.org/react-popper/v2/hook/) hook\n   */\n  popperOptions?: Partial<Options>;\n};\n\nconst classNames: EmojiPickerProps = {\n  buttonClassName: 'str-chat__emoji-picker-button',\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 { insertText, textareaRef } = useMessageInputContext('EmojiPicker');\n  const [displayPicker, setDisplayPicker] = useState(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n  const { attributes, styles } = usePopper(referenceElement, popperElement, {\n    placement: 'top-end',\n    ...props.popperOptions,\n  });\n\n  const { buttonClassName, pickerContainerClassName, wrapperClassName } = classNames;\n\n  const { ButtonIconComponent = EmojiPickerIcon } = 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          style={styles.popper}\n          {...attributes.popper}\n          ref={setPopperElement}\n        >\n          <Picker\n            data={async () => (await import('@emoji-mart/data')).default}\n            onEmojiSelect={(e: { native: string }) => {\n              insertText(e.native);\n              textareaRef.current?.focus();\n              if (props.closeOnEmojiSelect) {\n                setDisplayPicker(false);\n              }\n            }}\n            {...props.pickerProps}\n          />\n        </div>\n      )}\n      <button\n        aria-expanded={displayPicker}\n        aria-label={t('aria/Emoji picker')}\n        className={props.buttonClassName ?? buttonClassName}\n        onClick={() => setDisplayPicker((cv) => !cv)}\n        ref={setReferenceElement}\n        type='button'\n      >\n        {ButtonIconComponent && <ButtonIconComponent />}\n      </button>\n    </div>\n  );\n};\n", "import React, { PropsWithChildren, useContext } from 'react';\nimport Dayjs from 'dayjs';\nimport calendar from 'dayjs/plugin/calendar';\nimport localizedFormat from 'dayjs/plugin/localizedFormat';\n\nimport { getDisplayName } from './utils/getDisplayName';\n\nimport type { TFunction } from 'i18next';\nimport type { Moment } from 'moment-timezone';\nimport type { TranslationLanguages } from 'stream-chat';\n\nimport type { UnknownType } from '../types/types';\nimport { defaultTranslatorFunction } from '../i18n';\n\nDayjs.extend(calendar);\nDayjs.extend(localizedFormat);\n\nexport type SupportedTranslations =\n  | 'de'\n  | 'en'\n  | 'es'\n  | 'fr'\n  | 'hi'\n  | 'it'\n  | 'ja'\n  | 'ko'\n  | 'nl'\n  | 'pt'\n  | 'ru'\n  | 'tr';\n\nexport const isLanguageSupported = (language: string): language is SupportedTranslations => {\n  const translations = ['de', 'en', 'es', 'fr', 'hi', 'it', 'ja', 'ko', 'nl', 'pt', 'ru', 'tr'];\n  return translations.some((translation) => language === translation);\n};\n\nexport const isDayOrMoment = (output: TDateTimeParserOutput): output is Dayjs.Dayjs | Moment =>\n  !!(output as Dayjs.Dayjs | Moment)?.isSame;\n\nexport const isDate = (output: TDateTimeParserOutput): output is Date =>\n  !!(output as Date)?.getMonth;\n\nexport const isNumberOrString = (output: TDateTimeParserOutput): output is number | string =>\n  typeof output === 'string' || typeof output === 'number';\n\nexport type TDateTimeParserInput = string | number | Date;\n\nexport type TDateTimeParserOutput = string | number | Date | Dayjs.Dayjs | Moment;\n\nexport type TDateTimeParser = (input?: TDateTimeParserInput) => TDateTimeParserOutput;\n\nexport type TranslationContextValue = {\n  t: TFunction;\n  tDateTimeParser: TDateTimeParser;\n  userLanguage: TranslationLanguages;\n};\n\nexport const defaultDateTimeParser = (input?: TDateTimeParserInput) => Dayjs(input);\n\nexport const TranslationContext = React.createContext<TranslationContextValue>({\n  t: defaultTranslatorFunction,\n  tDateTimeParser: defaultDateTimeParser,\n  userLanguage: 'en',\n});\n\nexport const TranslationProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{ value: TranslationContextValue }>) => (\n  <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>\n);\n\nexport const useTranslationContext = (componentName?: string) => {\n  const contextValue = useContext(TranslationContext);\n\n  if (!contextValue) {\n    console.warn(\n      `The useTranslationContext hook was called outside of the TranslationContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the ${componentName} component.`,\n    );\n\n    return {} as TranslationContextValue;\n  }\n\n  return contextValue;\n};\n\nexport const withTranslationContext = <P extends UnknownType>(\n  Component: React.ComponentType<P>,\n) => {\n  const WithTranslationContextComponent = (props: Omit<P, keyof TranslationContextValue>) => {\n    const translationContext = useTranslationContext();\n\n    return <Component {...(props as P)} {...translationContext} />;\n  };\n\n  WithTranslationContextComponent.displayName = `WithTranslationContext${getDisplayName(\n    Component,\n  )}`;\n\n  return WithTranslationContextComponent;\n};\n", "import i18n, { TFunction } from 'i18next';\nimport Dayjs from 'dayjs';\nimport calendar from 'dayjs/plugin/calendar';\nimport updateLocale from 'dayjs/plugin/updateLocale';\nimport LocalizedFormat from 'dayjs/plugin/localizedFormat';\nimport localeData from 'dayjs/plugin/localeData';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport utc from 'dayjs/plugin/utc';\nimport timezone from 'dayjs/plugin/timezone';\nimport { predefinedFormatters } from './utils';\n\nimport type momentTimezone from 'moment-timezone';\nimport type { TranslationLanguages } from 'stream-chat';\n\nimport type { CustomFormatters, PredefinedFormatters } from './utils';\nimport type { TDateTimeParser } from '../context/TranslationContext';\n\nimport type { UnknownType } from '../types/types';\n\nimport {\n  deTranslations,\n  enTranslations,\n  esTranslations,\n  frTranslations,\n  hiTranslations,\n  itTranslations,\n  jaTranslations,\n  koTranslations,\n  nlTranslations,\n  ptTranslations,\n  ruTranslations,\n  trTranslations,\n} from './translations';\n\nimport 'dayjs/locale/de';\nimport 'dayjs/locale/es';\nimport 'dayjs/locale/fr';\nimport 'dayjs/locale/hi';\nimport 'dayjs/locale/it';\nimport 'dayjs/locale/ja';\nimport 'dayjs/locale/ko';\nimport 'dayjs/locale/nl';\nimport 'dayjs/locale/pt';\nimport 'dayjs/locale/ru';\nimport 'dayjs/locale/tr';\n// These locale imports also set these locale globally.\n// So As a last step I am going to import english locale\n// to make sure I don't mess up language at other places in app.\nimport 'dayjs/locale/en';\n\nconst defaultNS = 'translation';\nconst defaultLng = 'en';\n\ntype CalendarLocaleConfig = {\n  lastDay: string;\n  lastWeek: string;\n  nextDay: string;\n  nextWeek: string;\n  sameDay: string;\n  sameElse: string;\n};\n\nDayjs.extend(updateLocale);\nDayjs.extend(utc);\nDayjs.extend(timezone);\n\nDayjs.updateLocale('de', {\n  calendar: {\n    lastDay: '[gestern um] LT',\n    lastWeek: '[letzten] dddd [um] LT',\n    nextDay: '[morgen um] LT',\n    nextWeek: 'dddd [um] LT',\n    sameDay: '[heute um] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('es', {\n  calendar: {\n    lastDay: '[ayer a las] LT',\n    lastWeek: '[pasado] dddd [a] LT',\n    nextDay: '[ma\u00F1ana a] LT',\n    nextWeek: 'dddd [a] LT',\n    sameDay: '[hoy a las] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('fr', {\n  calendar: {\n    lastDay: '[Hier \u00E0] LT',\n    lastWeek: 'dddd [dernier \u00E0] LT',\n    nextDay: '[Demain \u00E0] LT',\n    nextWeek: 'dddd [\u00E0] LT',\n    sameDay: '[Aujourd\u2019hui \u00E0] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('hi', {\n  calendar: {\n    lastDay: '[\u0915\u0932] LT',\n    lastWeek: '[\u092A\u093F\u091B\u0932\u0947] dddd, LT',\n    nextDay: '[\u0915\u0932] LT',\n    nextWeek: 'dddd, LT',\n    sameDay: '[\u0906\u091C] LT',\n    sameElse: 'L',\n  },\n  // Hindi notation for meridiems are quite fuzzy in practice. While there exists\n  // a rigid notion of a 'Pahar' it is not used as rigidly in modern Hindi.\n  meridiem(hour: number) {\n    if (hour < 4) {\n      return '\u0930\u093E\u0924';\n    } else if (hour < 10) {\n      return '\u0938\u0941\u092C\u0939';\n    } else if (hour < 17) {\n      return '\u0926\u094B\u092A\u0939\u0930';\n    } else if (hour < 20) {\n      return '\u0936\u093E\u092E';\n    } else {\n      return '\u0930\u093E\u0924';\n    }\n  },\n  meridiemHour(hour: number, meridiem: string) {\n    if (hour === 12) {\n      hour = 0;\n    }\n    if (meridiem === '\u0930\u093E\u0924') {\n      return hour < 4 ? hour : hour + 12;\n    } else if (meridiem === '\u0938\u0941\u092C\u0939') {\n      return hour;\n    } else if (meridiem === '\u0926\u094B\u092A\u0939\u0930') {\n      return hour >= 10 ? hour : hour + 12;\n    } else if (meridiem === '\u0936\u093E\u092E') {\n      return hour + 12;\n    }\n    return hour;\n  },\n  meridiemParse: /\u0930\u093E\u0924|\u0938\u0941\u092C\u0939|\u0926\u094B\u092A\u0939\u0930|\u0936\u093E\u092E/,\n});\n\nDayjs.updateLocale('it', {\n  calendar: {\n    lastDay: '[Ieri alle] LT',\n    lastWeek: '[lo scorso] dddd [alle] LT',\n    nextDay: '[Domani alle] LT',\n    nextWeek: 'dddd [alle] LT',\n    sameDay: '[Oggi alle] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('ja', {\n  calendar: {\n    lastDay: '[\u6628\u65E5] LT',\n    lastWeek: 'dddd LT',\n    nextDay: '[\u660E\u65E5] LT',\n    nextWeek: '[\u6B21\u306E] dddd LT',\n    sameDay: '[\u4ECA\u65E5] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('ko', {\n  calendar: {\n    lastDay: '[\uC5B4\uC81C] LT',\n    lastWeek: '[\uC9C0\uB09C] dddd LT',\n    nextDay: '[\uB0B4\uC77C] LT',\n    nextWeek: 'dddd LT',\n    sameDay: '[\uC624\uB298] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('nl', {\n  calendar: {\n    lastDay: '[gisteren om] LT',\n    lastWeek: '[afgelopen] dddd [om] LT',\n    nextDay: '[morgen om] LT',\n    nextWeek: 'dddd [om] LT',\n    sameDay: '[vandaag om] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('pt', {\n  calendar: {\n    lastDay: '[ontem \u00E0s] LT',\n    lastWeek: 'dddd [passada \u00E0s] LT',\n    nextDay: '[amanh\u00E3 \u00E0s] LT',\n    nextWeek: 'dddd [\u00E0s] LT',\n    sameDay: '[hoje \u00E0s] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('ru', {\n  calendar: {\n    lastDay: '[\u0412\u0447\u0435\u0440\u0430, \u0432] LT',\n    nextDay: '[\u0417\u0430\u0432\u0442\u0440\u0430, \u0432] LT',\n    sameDay: '[\u0421\u0435\u0433\u043E\u0434\u043D\u044F, \u0432] LT',\n  },\n});\n\nDayjs.updateLocale('tr', {\n  calendar: {\n    lastDay: '[d\u00FCn] LT',\n    lastWeek: '[ge\u00E7en] dddd [saat] LT',\n    nextDay: '[yar\u0131n saat] LT',\n    nextWeek: '[gelecek] dddd [saat] LT',\n    sameDay: '[bug\u00FCn saat] LT',\n    sameElse: 'L',\n  },\n});\n\nconst en_locale = {\n  formats: {},\n  months: [\n    'January',\n    'February',\n    'March',\n    'April',\n    'May',\n    'June',\n    'July',\n    'August',\n    'September',\n    'October',\n    'November',\n    'December',\n  ],\n  relativeTime: {},\n  weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],\n};\n\ntype DateTimeParserModule = typeof Dayjs | typeof momentTimezone;\n// Type guards to check DayJs\nconst isDayJs = (dateTimeParser: DateTimeParserModule): dateTimeParser is typeof Dayjs =>\n  (dateTimeParser as typeof Dayjs).extend !== undefined;\n\ntype TimezoneParser = {\n  tz: momentTimezone.MomentTimezone | Dayjs.Dayjs;\n};\nconst supportsTz = (dateTimeParser: unknown): dateTimeParser is TimezoneParser =>\n  (dateTimeParser as TimezoneParser).tz !== undefined;\n\nexport type Streami18nOptions = {\n  DateTimeParser?: DateTimeParserModule;\n  dayjsLocaleConfigForLanguage?: Partial<ILocale> & { calendar?: CalendarLocaleConfig };\n  debug?: boolean;\n  disableDateTimeTranslations?: boolean;\n  formatters?: Partial<PredefinedFormatters> & CustomFormatters;\n  language?: TranslationLanguages;\n  logger?: (message?: string) => void;\n  parseMissingKeyHandler?: (key: string, defaultValue?: string) => string;\n  timezone?: string;\n  translationsForLanguage?: Partial<typeof enTranslations>;\n};\n\n/**\n * Wrapper around [i18next](https://www.i18next.com/) class for Stream related translations.\n * Instance of this class should be provided to Chat component to handle translations.\n * Stream provides following list of in-built translations:\n * 1. English (en)\n * 2. Dutch (nl)\n * 3. Russian (ru)\n * 4. Turkish (tr)\n * 5. French (fr)\n * 6. Italian (it)\n * 7. Hindi (hi)\n * 8. Spanish (es)\n * 9. Portuguese (pt)\n * 10. German (de)\n * 11. Japanese (ja)\n * 12. Korean (ko)\n *\n * Simplest way to start using chat components in one of the in-built languages would be following:\n *\n * ```\n * const i18n = new Streami18n({ language 'nl' });\n * <Chat client={chatClient} i18nInstance={i18n}>\n *  ...\n * </Chat>\n * ```\n *\n * If you would like to override certain keys in in-built translation.\n * UI will be automatically updated in this case.\n *\n * ```\n * const i18n = new Streami18n({\n *  language: 'nl',\n *  translationsForLanguage: {\n *    'Nothing yet...': 'Nog Niet ...',\n *    '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',\n *  }\n * });\n *\n * If you would like to register additional languages, use registerTranslation. You can add as many languages as you want:\n *\n * i18n.registerTranslation('zh', {\n *  'Nothing yet...': 'Nog Niet ...',\n *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',\n * });\n *\n * <Chat client={chatClient} i18nInstance={i18n}>\n *  ...\n * </Chat>\n * ```\n *\n * You can use the same function to add whole new language as well.\n *\n * ```\n * const i18n = new Streami18n();\n *\n * i18n.registerTranslation('mr', {\n *  'Nothing yet...': '\u0915\u093E\u0939\u0940\u0939\u0940 \u0928\u093E\u0939\u0940  ...',\n *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} \u0906\u0923\u093F {{ secondUser }} \u091F\u0940\u092A\u0940 \u0915\u0930\u0924 \u0906\u0939\u0947\u0924 ',\n * });\n *\n * // Make sure to call setLanguage to reflect new language in UI.\n * i18n.setLanguage('it');\n * <Chat client={chatClient} i18nInstance={i18n}>\n *  ...\n * </Chat>\n * ```\n *\n * ## Datetime translations\n *\n * Stream react chat components uses [dayjs](https://day.js.org/en/) internally by default to format datetime stamp.\n * e.g., in ChannelPreview, MessageContent components.\n * Dayjs has locale support as well - https://day.js.org/docs/en/i18n/i18n\n * Dayjs is a lightweight alternative to Momentjs with the same modern API.\n *\n * Dayjs provides locale config for plenty of languages, you can check the whole list of locale configs at following url\n * https://github.com/iamkun/dayjs/tree/dev/src/locale\n *\n * You can either provide the dayjs locale config while registering\n * language with Streami18n (either via constructor or registerTranslation()) or you can provide your own Dayjs or Moment instance\n * to Streami18n constructor, which will be then used internally (using the language locale) in components.\n *\n * 1. Via language registration\n *\n * e.g.,\n * ```\n * const i18n = new Streami18n({\n *  language: 'nl',\n *  dayjsLocaleConfigForLanguage: {\n *    months: [...],\n *    monthsShort: [...],\n *    calendar: {\n *      sameDay: ...'\n *    }\n *  }\n * });\n * ```\n *\n * Similarly, you can add locale config for moment while registering translation via `registerTranslation` function.\n *\n * e.g.,\n * ```\n * const i18n = new Streami18n();\n *\n * i18n.registerTranslation(\n *  'mr',\n *  {\n *    'Nothing yet...': '\u0915\u093E\u0939\u0940\u0939\u0940 \u0928\u093E\u0939\u0940  ...',\n *    '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} \u0906\u0923\u093F {{ secondUser }} \u091F\u0940\u092A\u0940 \u0915\u0930\u0924 \u0906\u0939\u0947\u0924 ',\n *  },\n *  {\n *    months: [...],\n *    monthsShort: [...],\n *    calendar: {\n *      sameDay: ...'\n *    }\n *  }\n * );\n *```\n * 2. Provide your own Moment object\n *\n * ```js\n * import 'moment/locale/nl';\n * import 'moment/locale/it';\n * // or if you want to include all locales\n * import 'moment/min/locales';\n *\n * import Moment from moment\n *\n * const i18n = new Streami18n({\n *  language: 'nl',\n *  DateTimeParser: Moment\n * })\n * ```\n *\n * 3. Provide your own Dayjs object\n *\n * ```js\n * import Dayjs from 'dayjs'\n *\n * import 'dayjs/locale/nl';\n * import 'dayjs/locale/it';\n * // or if you want to include all locales\n * import 'dayjs/min/locales';\n *\n * const i18n = new Streami18n({\n *  language: 'nl',\n *  DateTimeParser: Dayjs\n * })\n * ```\n * If you would like to stick with english language for datetimes in Stream components, you can set `disableDateTimeTranslations` to true.\n *\n */\nconst defaultStreami18nOptions = {\n  DateTimeParser: Dayjs,\n  dayjsLocaleConfigForLanguage: null,\n  debug: false,\n  disableDateTimeTranslations: false,\n  language: 'en' as TranslationLanguages,\n  logger: (message?: string) => console.warn(message),\n};\n\nexport const defaultTranslatorFunction: TFunction = <tResult = string>(key: tResult) => key;\n\nexport class Streami18n {\n  i18nInstance = i18n.createInstance();\n  Dayjs = null;\n  setLanguageCallback: (t: TFunction) => void = () => null;\n  initialized = false;\n\n  t: TFunction = defaultTranslatorFunction;\n  tDateTimeParser: TDateTimeParser;\n\n  translations: {\n    [key: string]: {\n      [key: string]: typeof enTranslations | UnknownType;\n    };\n  } = {\n    de: { [defaultNS]: deTranslations },\n    en: { [defaultNS]: enTranslations },\n    es: { [defaultNS]: esTranslations },\n    fr: { [defaultNS]: frTranslations },\n    hi: { [defaultNS]: hiTranslations },\n    it: { [defaultNS]: itTranslations },\n    ja: { [defaultNS]: jaTranslations },\n    ko: { [defaultNS]: koTranslations },\n    nl: { [defaultNS]: nlTranslations },\n    pt: { [defaultNS]: ptTranslations },\n    ru: { [defaultNS]: ruTranslations },\n    tr: { [defaultNS]: trTranslations },\n  };\n\n  /**\n   * dayjs.defineLanguage('nl') also changes the global locale. We don't want to do that\n   * when user calls registerTranslation() function. So instead we will store the locale configs\n   * given to registerTranslation() function in `dayjsLocales` object, and register the required locale\n   * with moment, when setLanguage is called.\n   * */\n  dayjsLocales: { [key: string]: Partial<ILocale> } = {};\n  // dayjsLocales = {};\n\n  /**\n   * Initialize properties used in constructor\n   */\n  logger: (msg?: string) => void;\n  currentLanguage: TranslationLanguages;\n  DateTimeParser: DateTimeParserModule;\n  formatters: PredefinedFormatters & CustomFormatters = predefinedFormatters;\n  isCustomDateTimeParser: boolean;\n  i18nextConfig: {\n    debug: boolean;\n    fallbackLng: false;\n    interpolation: { escapeValue: boolean; formatSeparator: string };\n    keySeparator: false;\n    lng: string;\n    nsSeparator: false;\n    parseMissingKeyHandler?: (key: string, defaultValue?: string) => string;\n  };\n  /**\n   * A valid TZ identifier string (https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)\n   */\n  timezone?: string;\n  /**\n   * Constructor accepts following options:\n   *  - language (String) default: 'en'\n   *    Language code e.g., en, tr\n   *\n   *  - translationsForLanguage (object)\n   *    Translations object. Please check src/i18n/en.json for example.\n   *\n   *  - disableDateTimeTranslations (boolean) default: false\n   *    Disable translations for date-times\n   *\n   *  - debug (boolean) default: false\n   *    Enable debug mode in internal i18n class\n   *\n   *  - logger (function) default: () => {}\n   *    Logger function to log warnings/errors from this class\n   *\n   *  - dayjsLocaleConfigForLanguage (object) default: 'enConfig'\n   *    [Config object](https://momentjs.com/docs/#/i18n/changing-locale/) for internal moment object,\n   *    corresponding to language (param)\n   *\n   *  - DateTimeParser (function) Moment or Dayjs instance/function.\n   *    Make sure to load all the required locales in this Moment or Dayjs instance that you will be provide to Streami18n\n   *\n   * @param {*} options\n   */\n  constructor(options: Streami18nOptions = {}) {\n    const finalOptions = {\n      ...defaultStreami18nOptions,\n      ...options,\n    };\n    // Prepare the i18next configuration.\n    this.logger = finalOptions.logger;\n    this.currentLanguage = finalOptions.language;\n    this.DateTimeParser = finalOptions.DateTimeParser;\n    this.timezone = finalOptions.timezone;\n    this.formatters = { ...predefinedFormatters, ...options?.formatters };\n\n    try {\n      if (this.DateTimeParser && isDayJs(this.DateTimeParser)) {\n        this.DateTimeParser.extend(LocalizedFormat);\n        this.DateTimeParser.extend(calendar);\n        this.DateTimeParser.extend(localeData);\n        this.DateTimeParser.extend(relativeTime);\n      }\n    } catch (error) {\n      throw Error(\n        `Streami18n: Looks like you wanted to provide Dayjs instance, but something went wrong while adding plugins ${error}`,\n      );\n    }\n\n    this.isCustomDateTimeParser = !!options.DateTimeParser;\n    const translationsForLanguage = finalOptions.translationsForLanguage;\n\n    if (translationsForLanguage) {\n      this.translations[this.currentLanguage] = {\n        [defaultNS]:\n          this.translations[this.currentLanguage] &&\n          this.translations[this.currentLanguage][defaultNS]\n            ? {\n                ...this.translations[this.currentLanguage][defaultNS],\n                ...translationsForLanguage,\n              }\n            : translationsForLanguage,\n      };\n    }\n\n    // If translations don't exist for given language, then set it as empty object.\n    if (!this.translations[this.currentLanguage]) {\n      this.translations[this.currentLanguage] = {\n        [defaultNS]: {},\n      };\n    }\n\n    this.i18nextConfig = {\n      debug: finalOptions.debug,\n      fallbackLng: false,\n      interpolation: { escapeValue: false, formatSeparator: '|' },\n      keySeparator: false,\n      lng: this.currentLanguage,\n      nsSeparator: false,\n    };\n\n    if (finalOptions.parseMissingKeyHandler) {\n      this.i18nextConfig.parseMissingKeyHandler = finalOptions.parseMissingKeyHandler;\n    }\n\n    this.validateCurrentLanguage();\n\n    const dayjsLocaleConfigForLanguage = finalOptions.dayjsLocaleConfigForLanguage;\n\n    if (dayjsLocaleConfigForLanguage) {\n      this.addOrUpdateLocale(this.currentLanguage, {\n        ...dayjsLocaleConfigForLanguage,\n      });\n    } else if (!this.localeExists(this.currentLanguage)) {\n      this.logger(\n        `Streami18n: Streami18n(...) - Locale config for ${this.currentLanguage} does not exist in momentjs.` +\n          `Please import the locale file using \"import 'moment/locale/${this.currentLanguage}';\" in your app or ` +\n          `register the locale config with Streami18n using registerTranslation(language, translation, customDayjsLocale)`,\n      );\n    }\n\n    this.tDateTimeParser = (timestamp) => {\n      const language =\n        finalOptions.disableDateTimeTranslations || !this.localeExists(this.currentLanguage)\n          ? defaultLng\n          : this.currentLanguage;\n\n      if (isDayJs(this.DateTimeParser)) {\n        return supportsTz(this.DateTimeParser)\n          ? this.DateTimeParser(timestamp).tz(this.timezone).locale(language)\n          : this.DateTimeParser(timestamp).locale(language);\n      }\n\n      if (supportsTz(this.DateTimeParser) && this.timezone) {\n        return this.DateTimeParser(timestamp).tz(this.timezone).locale(language);\n      }\n      return this.DateTimeParser(timestamp).locale(language);\n    };\n  }\n\n  /**\n   * Initializes the i18next instance with configuration (which enables natural language as default keys)\n   */\n  async init() {\n    this.validateCurrentLanguage();\n\n    try {\n      this.t = await this.i18nInstance.init({\n        ...this.i18nextConfig,\n        lng: this.currentLanguage,\n        resources: this.translations,\n      });\n      this.initialized = true;\n      if (this.formatters) {\n        Object.entries(this.formatters).forEach(([name, formatterFactory]) => {\n          if (!formatterFactory) return;\n          this.i18nInstance.services.formatter?.add(name, formatterFactory(this));\n        });\n      }\n    } catch (error) {\n      this.logger(`Something went wrong with init: ${JSON.stringify(error)}`);\n    }\n\n    return {\n      t: this.t,\n      tDateTimeParser: this.tDateTimeParser,\n    };\n  }\n\n  localeExists = (language: TranslationLanguages) => {\n    if (this.isCustomDateTimeParser) return true;\n\n    return Object.keys(Dayjs.Ls).indexOf(language) > -1;\n  };\n\n  validateCurrentLanguage = () => {\n    const availableLanguages = Object.keys(this.translations);\n    if (availableLanguages.indexOf(this.currentLanguage) === -1) {\n      this.logger(\n        `Streami18n: '${this.currentLanguage}' language is not registered.` +\n          ` Please make sure to call streami18n.registerTranslation('${this.currentLanguage}', {...}) or ` +\n          `use one the built-in supported languages - ${this.getAvailableLanguages()}`,\n      );\n\n      this.currentLanguage = defaultLng;\n    }\n  };\n\n  /** Returns an instance of i18next used within this class instance */\n  geti18Instance = () => this.i18nInstance;\n\n  /** Returns list of available languages. */\n  getAvailableLanguages = () => Object.keys(this.translations);\n\n  /** Returns all the translation dictionary for all inbuilt-languages */\n  getTranslations = () => this.translations;\n\n  /**\n   * Returns current version translator function.\n   */\n  async getTranslators() {\n    if (!this.initialized) {\n      if (this.dayjsLocales[this.currentLanguage]) {\n        this.addOrUpdateLocale(this.currentLanguage, this.dayjsLocales[this.currentLanguage]);\n      }\n\n      return await this.init();\n    } else {\n      return {\n        t: this.t,\n        tDateTimeParser: this.tDateTimeParser,\n      };\n    }\n  }\n\n  registerTranslation(\n    language: TranslationLanguages,\n    translation: typeof enTranslations,\n    customDayjsLocale?: Partial<ILocale>,\n  ) {\n    if (!translation) {\n      this.logger(\n        `Streami18n: registerTranslation(language, translation, customDayjsLocale) called without translation`,\n      );\n      return;\n    }\n\n    if (!this.translations[language]) {\n      this.translations[language] = { [defaultNS]: translation };\n    } else {\n      this.translations[language][defaultNS] = translation;\n    }\n\n    if (customDayjsLocale) {\n      this.dayjsLocales[language] = { ...customDayjsLocale };\n    } else if (!this.localeExists(language)) {\n      this.logger(\n        `Streami18n: registerTranslation(language, translation, customDayjsLocale) - ` +\n          `Locale config for ${language} does not exist in Dayjs.` +\n          `Please import the locale file using \"import 'dayjs/locale/${language}';\" in your app or ` +\n          `register the locale config with Streami18n using registerTranslation(language, translation, customDayjsLocale)`,\n      );\n    }\n\n    if (this.initialized) {\n      this.i18nInstance.addResources(language, defaultNS, translation);\n    }\n  }\n\n  addOrUpdateLocale(key: TranslationLanguages, config: Partial<ILocale>) {\n    if (this.localeExists(key)) {\n      Dayjs.updateLocale(key, { ...config });\n    } else {\n      // Merging the custom locale config with en config, so missing keys can default to english.\n      Dayjs.locale({ name: key, ...en_locale, ...config }, undefined, true);\n    }\n  }\n\n  async setLanguage(language: TranslationLanguages) {\n    this.currentLanguage = language;\n\n    if (!this.initialized) return;\n\n    try {\n      const t = await this.i18nInstance.changeLanguage(language);\n      if (this.dayjsLocales[language]) {\n        this.addOrUpdateLocale(this.currentLanguage, this.dayjsLocales[this.currentLanguage]);\n      }\n\n      this.setLanguageCallback(t);\n      return t;\n    } catch (error) {\n      this.logger(`Failed to set language: ${JSON.stringify(error)}`);\n      return this.t;\n    }\n  }\n\n  registerSetLanguageCallback(callback: (t: TFunction) => void) {\n    this.setLanguageCallback = callback;\n  }\n}\n", "import React, { createContext, PropsWithChildren, useContext } from 'react';\n\nimport type { TriggerSettings } from '../components/MessageInput/DefaultTriggerProvider';\nimport type { CooldownTimerState, MessageInputProps } from '../components/MessageInput';\nimport type {\n  CommandsListState,\n  MentionsListState,\n  MessageInputHookProps,\n  MessageInputState,\n} from '../components/MessageInput/hooks/useMessageInputState';\n\nimport type { CustomTrigger, DefaultStreamChatGenerics } from '../types/types';\n\nexport type MessageInputContextValue<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n  V extends CustomTrigger = CustomTrigger\n> = MessageInputState<StreamChatGenerics> &\n  MessageInputHookProps<StreamChatGenerics> &\n  Omit<MessageInputProps<StreamChatGenerics, V>, 'Input'> &\n  CooldownTimerState & {\n    autocompleteTriggers?: TriggerSettings<StreamChatGenerics, V>;\n  } & CommandsListState &\n  MentionsListState;\n\nexport const MessageInputContext = createContext<\n  (MessageInputState & MessageInputHookProps) | undefined\n>(undefined);\n\nexport const MessageInputContextProvider = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n  V extends CustomTrigger = CustomTrigger\n>({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: MessageInputContextValue<StreamChatGenerics, V>;\n}>) => (\n  <MessageInputContext.Provider value={value as MessageInputContextValue}>\n    {children}\n  </MessageInputContext.Provider>\n);\n\nexport const useMessageInputContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n  V extends CustomTrigger = CustomTrigger\n>(\n  componentName?: string,\n) => {\n  const contextValue = useContext(MessageInputContext);\n\n  if (!contextValue) {\n    console.warn(\n      `The useMessageInputContext hook was called outside of the MessageInputContext provider. Make sure this hook is called within the MessageInput's UI component. The errored call is located in the ${componentName} component.`,\n    );\n\n    return {} as MessageInputContextValue<StreamChatGenerics, V>;\n  }\n\n  return contextValue as MessageInputContextValue<StreamChatGenerics, V>;\n};\n", "import React from 'react';\n\nexport const EmojiPickerIcon = () => (\n  <svg\n    preserveAspectRatio='xMinYMin'\n    viewBox='0 0 28 28'\n    width='100%'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <g clipRule='evenodd' fillRule='evenodd'>\n      <path d='M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z'></path>\n    </g>\n  </svg>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,IAAAA,gBAA2C;AAC3C,0BAA0B;AAC1B,IAAAA,gBAAmB;;;ACHnB,mBAAqD;AACrD,IAAAC,gBAAkB;AAClB,IAAAC,mBAAqB;AACrB,IAAAC,0BAA4B;;;ACH5B,qBAAgC;AAChC,mBAAkB;AAClB,sBAAqB;AACrB,0BAAyB;AACzB,6BAA4B;AAC5B,wBAAuB;AACvB,0BAAyB;AACzB,iBAAgB;AAChB,sBAAqB;AA0BrB,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AAIP,gBAAO;AAcP,aAAAC,QAAM,OAAO,oBAAAC,OAAY;AACzB,aAAAD,QAAM,OAAO,WAAAE,OAAG;AAChB,aAAAF,QAAM,OAAO,gBAAAG,OAAQ;AAErB,aAAAH,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AAAA;AAAA;AAAA,EAGA,SAAS,MAAc;AACrB,QAAI,OAAO,GAAG;AACZ,aAAO;AAAA,IACT,WAAW,OAAO,IAAI;AACpB,aAAO;AAAA,IACT,WAAW,OAAO,IAAI;AACpB,aAAO;AAAA,IACT,WAAW,OAAO,IAAI;AACpB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,aAAa,MAAc,UAAkB;AAC3C,QAAI,SAAS,IAAI;AACf,aAAO;AAAA,IACT;AACA,QAAI,aAAa,sBAAO;AACtB,aAAO,OAAO,IAAI,OAAO,OAAO;AAAA,IAClC,WAAW,aAAa,4BAAQ;AAC9B,aAAO;AAAA,IACT,WAAW,aAAa,kCAAS;AAC/B,aAAO,QAAQ,KAAK,OAAO,OAAO;AAAA,IACpC,WAAW,aAAa,sBAAO;AAC7B,aAAO,OAAO;AAAA,IAChB;AACA,WAAO;AAAA,EACT;AAAA,EACA,eAAe;AACjB,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AA+MM,IAAM,4BAAuC,CAAmB,QAAiB;;;ADtZxF,cAAAI,QAAM,OAAO,iBAAAC,OAAQ;AACrB,cAAAD,QAAM,OAAO,wBAAAE,OAAe;AA0CrB,IAAM,wBAAwB,CAAC,cAAiC,cAAAC,SAAM,KAAK;AAE3E,IAAM,qBAAqB,aAAAC,QAAM,cAAuC;AAAA,EAC7E,GAAG;AAAA,EACH,iBAAiB;AAAA,EACjB,cAAc;AAChB,CAAC;AASM,IAAM,wBAAwB,CAAC,kBAA2B;AAC/D,QAAM,mBAAe,yBAAW,kBAAkB;AAElD,MAAI,CAAC,cAAc;AACjB,YAAQ;AAAA,MACN,gMAAgM,aAAa;AAAA,IAC/M;AAEA,WAAO,CAAC;AAAA,EACV;AAEA,SAAO;AACT;;;AEpFA,IAAAC,gBAAoE;AAwB7D,IAAM,0BAAsB,6BAEjC,MAAS;AAgBJ,IAAM,yBAAyB,CAIpC,kBACG;AACH,QAAM,mBAAe,0BAAW,mBAAmB;AAEnD,MAAI,CAAC,cAAc;AACjB,YAAQ;AAAA,MACN,oMAAoM,aAAa;AAAA,IACnN;AAEA,WAAO,CAAC;AAAA,EACV;AAEA,SAAO;AACT;;;AC3DA,IAAAC,gBAAkB;AAEX,IAAM,kBAAkB,MAC7B,8BAAAC,QAAA;AAAA,EAAC;AAAA;AAAA,IACC,qBAAoB;AAAA,IACpB,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,OAAM;AAAA;AAAA,EAEN,8BAAAA,QAAA,cAAC,OAAE,UAAS,WAAU,UAAS,aAC7B,8BAAAA,QAAA,cAAC,UAAK,GAAE,0dAAyd,CACne;AACF;;;AJFF,IAAM,eAAe,CAAC,SAAmC,CAAC,CAAE,KAAoB;AAoBhF,IAAM,aAA+B;AAAA,EACnC,iBAAiB;AAAA,EACjB,0BAA0B;AAAA,EAC1B,kBAAkB;AACpB;AAEO,IAAM,cAAc,CAAC,UAA4B;AACtD,QAAM,EAAE,EAAE,IAAI,sBAAsB,aAAa;AACjD,QAAM,EAAE,YAAY,YAAY,IAAI,uBAAuB,aAAa;AACxE,QAAM,CAAC,eAAe,gBAAgB,QAAI,wBAAS,KAAK;AACxD,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,wBAAmC,IAAI;AACvF,QAAM,CAAC,eAAe,gBAAgB,QAAI,wBAAgC,IAAI;AAC9E,QAAM,EAAE,YAAY,OAAO,QAAI,+BAAU,kBAAkB,eAAe;AAAA,IACxE,WAAW;AAAA,IACX,GAAG,MAAM;AAAA,EACX,CAAC;AAED,QAAM,EAAE,iBAAiB,0BAA0B,iBAAiB,IAAI;AAExE,QAAM,EAAE,sBAAsB,gBAAgB,IAAI;AAElD,+BAAU,MAAM;AACd,QAAI,CAAC,iBAAiB,CAAC;AAAkB;AAEzC,UAAM,oBAAoB,CAAC,MAAoB;AAC7C,YAAM,SAAS,EAAE;AAEjB,YAAM,WAAW,OAAO,YAAY;AAEpC,UACE,cAAc,SAAS,aAAa,QAAQ,IAAI,SAAS,OAAO,MAAM,KACtE,iBAAiB,SAAS,MAAM,GAChC;AACA;AAAA,MACF;AAEA,uBAAiB,KAAK;AAAA,IACxB;AAEA,WAAO,iBAAiB,eAAe,iBAAiB;AACxD,WAAO,MAAM,OAAO,oBAAoB,eAAe,iBAAiB;AAAA,EAC1E,GAAG,CAAC,kBAAkB,aAAa,CAAC;AAEpC,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAW,MAAM,oBAAoB,oBACvC,iBACC,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM,4BAA4B;AAAA,MAC7C,OAAO,OAAO;AAAA,MACb,GAAG,WAAW;AAAA,MACf,KAAK;AAAA;AAAA,IAEL,8BAAAA,QAAA;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACC,MAAM,aAAa,MAAM,OAAO,kBAAkB,GAAG;AAAA,QACrD,eAAe,CAAC,MAA0B;AACxC,qBAAW,EAAE,MAAM;AACnB,sBAAY,SAAS,MAAM;AAC3B,cAAI,MAAM,oBAAoB;AAC5B,6BAAiB,KAAK;AAAA,UACxB;AAAA,QACF;AAAA,QACC,GAAG,MAAM;AAAA;AAAA,IACZ;AAAA,EACF,GAEF,8BAAAD,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe;AAAA,MACf,cAAY,EAAE,mBAAmB;AAAA,MACjC,WAAW,MAAM,mBAAmB;AAAA,MACpC,SAAS,MAAM,iBAAiB,CAAC,OAAO,CAAC,EAAE;AAAA,MAC3C,KAAK;AAAA,MACL,MAAK;AAAA;AAAA,IAEJ,uBAAuB,8BAAAA,QAAA,cAAC,yBAAoB;AAAA,EAC/C,CACF;AAEJ;",
+  "names": ["import_react", "import_dayjs", "import_calendar", "import_localizedFormat", "Dayjs", "updateLocale", "utc", "timezone", "Dayjs", "calendar", "localizedFormat", "Dayjs", "React", "import_react", "import_react", "React", "React", "Picker"]
+}

package/dist/plugins/Emojis/index.d.ts

@@ -0,0 +1,2 @@
+export * from './EmojiPicker';
+export { EmojiPickerIcon } from './icons';

package/dist/plugins/Emojis/index.js

@@ -0,0 +1,2 @@
+export * from './EmojiPicker';
+export { EmojiPickerIcon } from './icons';

package/dist/plugins/encoders/mp3.cjs.js

@@ -0,0 +1,111 @@
+"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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugins/encoders/mp3.ts
+var mp3_exports = {};
+__export(mp3_exports, {
+  encodeToMp3: () => encodeToMp3
+});
+module.exports = __toCommonJS(mp3_exports);
+
+// src/components/ReactFileUtilities/utils.ts
+var import_react = require("react");
+var readFileAsArrayBuffer = (file) => new Promise((resolve, reject) => {
+  const fileReader = new FileReader();
+  fileReader.onload = () => {
+    resolve(fileReader.result);
+  };
+  fileReader.onerror = () => {
+    reject(fileReader.error);
+  };
+  fileReader.readAsArrayBuffer(file);
+});
+
+// src/components/MediaRecorder/transcode/audioProcessing.ts
+var toAudioBuffer = async (file) => {
+  const audioCtx = new AudioContext();
+  const arrayBuffer = await readFileAsArrayBuffer(file);
+  const decodedData = await audioCtx.decodeAudioData(arrayBuffer);
+  if (audioCtx.state !== "closed")
+    await audioCtx.close();
+  return decodedData;
+};
+var renderAudio = async (audioBuffer, sampleRate) => {
+  const offlineAudioCtx = new OfflineAudioContext(
+    audioBuffer.numberOfChannels,
+    audioBuffer.duration * sampleRate,
+    sampleRate
+  );
+  const source = offlineAudioCtx.createBufferSource();
+  source.buffer = audioBuffer;
+  source.connect(offlineAudioCtx.destination);
+  source.start();
+  return await offlineAudioCtx.startRendering();
+};
+
+// src/plugins/encoders/mp3.ts
+var ENCODING_BIT_RATE = 128;
+var COUNT_SAMPLES_PER_ENCODED_BLOCK = 1152;
+var float32ArrayToInt16Array = (float32Arr) => {
+  const int16Arr = new Int16Array(float32Arr.length);
+  for (let i = 0; i < float32Arr.length; i++) {
+    const float32Value = float32Arr[i];
+    const clampedValue = Math.max(-1, Math.min(1, float32Value));
+    int16Arr[i] = Math.round(clampedValue * 32767);
+  }
+  return int16Arr;
+};
+var splitDataByChannel = (audioBuffer) => Array.from({ length: audioBuffer.numberOfChannels }, (_, i) => audioBuffer.getChannelData(i)).map(
+  float32ArrayToInt16Array
+);
+async function encodeToMp3(file, sampleRate) {
+  const lameJs = await import("@breezystack/lamejs");
+  const audioBuffer = await renderAudio(await toAudioBuffer(file), sampleRate);
+  const channelCount = audioBuffer.numberOfChannels;
+  const dataByChannel = splitDataByChannel(audioBuffer);
+  const mp3Encoder = new lameJs.Mp3Encoder(channelCount, sampleRate, ENCODING_BIT_RATE);
+  const dataBuffer = [];
+  let remaining = dataByChannel[0].length;
+  for (let i = 0; remaining >= COUNT_SAMPLES_PER_ENCODED_BLOCK; i += COUNT_SAMPLES_PER_ENCODED_BLOCK) {
+    const [leftChannelBlock, rightChannelBlock] = dataByChannel.map(
+      (channel) => channel.subarray(i, i + COUNT_SAMPLES_PER_ENCODED_BLOCK)
+    );
+    dataBuffer.push(new Int8Array(mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock)));
+    remaining -= COUNT_SAMPLES_PER_ENCODED_BLOCK;
+  }
+  const lastBlock = mp3Encoder.flush();
+  if (lastBlock.length)
+    dataBuffer.push(new Int8Array(lastBlock));
+  return new Blob(dataBuffer, { type: "audio/mp3;sbu_type=voice" });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  encodeToMp3
+});
+//# sourceMappingURL=mp3.cjs.js.map

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

@@ -0,0 +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) => audioBuffer.getChannelData(i)).map(\n    float32ArrayToInt16Array,\n  );\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(new Int8Array(mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock)));\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(items?: DataTransferItem[]): 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().parseFromString(s, 'text/html').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 = (mimeType: string): 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;AA6HlC,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;;;ACnII,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;AAAU,UAAM,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,KAAK,EAAE,QAAQ,YAAY,iBAAiB,GAAG,CAAC,GAAG,MAAM,YAAY,eAAe,CAAC,CAAC,EAAE;AAAA,EAC5F;AACF;AAEF,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,KAAK,IAAI,UAAU,WAAW,aAAa,kBAAkB,iBAAiB,CAAC,CAAC;AAC3F,iBAAa;AAAA,EACf;AAEA,QAAM,YAAY,WAAW,MAAM;AACnC,MAAI,UAAU;AAAQ,eAAW,KAAK,IAAI,UAAU,SAAS,CAAC;AAC9D,SAAO,IAAI,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAClE;",
+  "names": []
+}

package/dist/{components/MediaRecorder/transcode → plugins/encoders}/mp3.js

@@ -1,5 +1,4 @@
-import { Mp3Encoder } from '@breezystack/lamejs';
-import { renderAudio, toAudioBuffer } from './audioProcessing';
+import { renderAudio, toAudioBuffer, } from '../../components/MediaRecorder/transcode/audioProcessing';
 const ENCODING_BIT_RATE = 128; // kbps;
 const COUNT_SAMPLES_PER_ENCODED_BLOCK = 1152;
 const float32ArrayToInt16Array = (float32Arr) => {
@@ -15,10 +14,11 @@ const float32ArrayToInt16Array = (float32Arr) => {
 };
 const splitDataByChannel = (audioBuffer) => Array.from({ length: audioBuffer.numberOfChannels }, (_, i) => audioBuffer.getChannelData(i)).map(float32ArrayToInt16Array);
 export async function encodeToMp3(file, sampleRate) {
+    const lameJs = await import('@breezystack/lamejs');
     const audioBuffer = await renderAudio(await toAudioBuffer(file), sampleRate);
     const channelCount = audioBuffer.numberOfChannels;
     const dataByChannel = splitDataByChannel(audioBuffer);
-    const mp3Encoder = new Mp3Encoder(channelCount, sampleRate, ENCODING_BIT_RATE);
+    const mp3Encoder = new lameJs.Mp3Encoder(channelCount, sampleRate, ENCODING_BIT_RATE);
     const dataBuffer = [];
     let remaining = dataByChannel[0].length;
     for (let i = 0; remaining >= COUNT_SAMPLES_PER_ENCODED_BLOCK; i += COUNT_SAMPLES_PER_ENCODED_BLOCK) {

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

@@ -23,7 +23,7 @@
 // React SDK's version of Angular SDK's .dropup (mention-list)
 .str-chat__suggestion-list-container {
   position: absolute;
-  bottom: var(--str-chat__spacing-7);
+  bottom: calc(100% + var(--str-chat__spacing-2_5));
   width: 100%;
   padding: var(--str-chat__spacing-2) 0;
 

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

@@ -196,8 +196,10 @@
   @include utils.component-layer-overrides('suggestion-list-container');
 
   .str-chat__suggestion-list {
-    .str-chat__suggestion-list-item > a {
-      text-decoration: none;
+    .str-chat__suggestion-list-item {
+      > a {
+        text-decoration: none;
+      }
     }
 
     .str-chat__suggestion-item--selected {

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

@@ -1,30 +1,59 @@
 .str-chat {
-  /* The size of the avatar, only available in Angular v5+ */
   --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 32);
 
+  .str-chat__avatar--autocomplete-item,
   .stream-chat__avatar--autocomplete-item {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30);
   }
 
+  .str-chat__avatar--channel-header,
   .stream-chat__avatar--channel-header {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 40);
   }
 
+  .str-chat__avatar--channel-preview,
   .stream-chat__avatar--channel-preview {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 49);
   }
 
+  .str-chat__avatar--quoted-message-sender,
   .stream-chat__avatar--quoted-message-sender {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20);
   }
 
+  .str-chat__avatar--reaction,
   .stream-chat__avatar--reaction {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30);
   }
+
+  .str-chat__avatar--message-status,
+  .stream-chat__avatar--message-status {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 15);
+  }
 }
 
 .str-chat__avatar {
   position: relative;
+  height: var(--str-chat__avatar-size);
+  line-height: var(--str-chat__avatar-size);
+  width: var(--str-chat__avatar-size);
+  min-width: var(--str-chat__avatar-size);
+
+  &.str-chat__avatar--one-letter,
+  &.stream-chat__avatar--one-letter {
+    font-size: calc(var(--str-chat__avatar-size) * 0.5);
+  }
+
+  &.str-chat__avatar--multiple-letters,
+  &.stream-chat__avatar--multiple-letters {
+    font-size: calc(var(--str-chat__avatar-size) * 0.3);
+  }
+
+  .str-chat__avatar-image {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;;
+  }
 
   .str-chat__avatar-fallback {
     text-align: center;
@@ -45,25 +74,4 @@
   flex-shrink: 0;
   width: calc(var(--str-chat__spacing-px) * 49);
   height: calc(var(--str-chat__spacing-px) * 49);
-}
-
-.str-chat-angular__avatar {
-  height: var(--str-chat__avatar-size);
-  line-height: var(--str-chat__avatar-size);
-  width: var(--str-chat__avatar-size);
-
-  &.stream-chat__avatar--one-letter {
-    font-size: calc(var(--str-chat__avatar-size) * 0.5);
-  }
-
-  &.stream-chat__avatar--multiple-letters {
-    font-size: calc(var(--str-chat__avatar-size) * 0.3);
-  }
-
-  .str-chat__avatar-image {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;;
-  }
-  
-}
+}

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

@@ -34,11 +34,6 @@
       @include utils.flex-row-center;
     }
   }
-
-  // This is displayed only in theme-v1
-  .str-chat__down-main {
-    display: none;
-  }
 }
 
 .str-chat__channel-list-react {

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

@@ -113,6 +113,7 @@
 
       .channel-search__result-text,
       .str-chat__channel-search-result--display-name {
+        @include utils.ellipsis-text;
         @include utils.prevent-glitch-text-overflow;
       }
     }

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

@@ -1,31 +1,31 @@
 @use '../utils';
 
 .str-chat {
-  /* The border radius used for the borders of the component */
+  /* The border radius used for the borders of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-radius: none;
 
-  /* The text color used for the send button */
+  /* The text color used for the send button. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-send-button-color: var(--str-chat__primary-color);
 
-  /* The text color used for the cancel button */
+  /* The text color used for the cancel button. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-cancel-button-color: var(--str-chat__text-low-emphasis-color);
 
-  /* The background color of the component */
+  /* The background color of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-background-color: transparent;
 
-  /* Top border of the component */
+  /* Top border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-block-start: none;
 
-  /* Bottom border of the component */
+  /* Bottom border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-block-end: none;
 
-  /* Left (right in RTL layout) border of the component */
+  /* Left (right in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-inline-start: none;
 
-  /* Right (left in RTL layout) border of the component */
+  /* Right (left in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-inline-end: none;
 
-  /* Box shadow applied to the component */
+  /* Box shadow applied to the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-box-shadow: none;
 }
 

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

@@ -1,7 +1,7 @@
 @use '../utils';
 
 .str-chat {
-  /* The width/height of the message options buttons */
+  /* The width/height of the message options button(s), for Angular SDK it's only used on desktop devices starting from version 5 */
   --str-chat__message-options-button-size: calc(var(--str-chat__spacing-px) * 26);
 
   /* The maximum allowed width of the message component */
@@ -26,6 +26,12 @@
 }
 
 .str-chat__message {
+  --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size));
+
+  &.str-chat__message-without-touch-support {
+    --str-chat-message-options-size: calc(1 * var(--str-chat__message-options-button-size));
+  }
+
   .str-chat__message-bubble {
     max-width: var(--str-chat__message-max-width);
   }
@@ -127,7 +133,7 @@
       align-items: flex-start;
       justify-content: flex-end;
       flex-direction: row-reverse;
-      width: calc(3 * var(--str-chat__message-options-button-size));
+      width: var(--str-chat-message-options-size);
 
       .str-chat__message-actions-box-button,
       .str-chat__message-reply-in-thread-button,
@@ -287,8 +293,8 @@
 }
 
 // Message options display - default mode: they appear when .str-chat__li is hovered
-.str-chat__ul:not(.str-chat__message-options-in-bubble),
-.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) {
+.str-chat__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support),
+.str-chat__virtual-list:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) {
   /* This rule won't be applied in browsers that don't support :has() */
   .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)),
   .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)) {
@@ -355,11 +361,11 @@
 }
 
 .str-chat__message--other .str-chat__message-inner {
-  margin-inline-end: calc(var(--str-chat__message-options-button-size) * 3);
+  margin-inline-end: var(--str-chat-message-options-size);
 }
 
 .str-chat__message--me .str-chat__message-inner {
-  margin-inline-start: calc(var(--str-chat__message-options-button-size) * 3);
+  margin-inline-start: var(--str-chat-message-options-size);
 }
 
 .str-chat__li--middle,
@@ -512,3 +518,28 @@
 .str-chat__message-text--pointer-cursor {
   cursor: pointer;
 }
+
+.str-chat__message-with-touch-support {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  &.str-chat__message-menu-opened {
+    .str-chat__attachments-container,
+    .str-chat__message-text-inner {
+      pointer-events: none;
+    }
+  }
+
+  .str-chat__message-inner {
+    margin-inline: 0;
+  }
+
+  .str-chat__message-options {
+    display: none;
+  }
+
+  .stream-chat-angular__image-modal-host {
+    -webkit-touch-callout: default;
+  }
+}