stream-chat-react 12.10.0 → 12.11.0

package/dist/plugins/Emojis/EmojiPicker.js

@@ -1,4 +1,3 @@
-/* eslint-disable typescript-sort-keys/interface */
 import React, { useEffect, useState } from 'react';
 import { usePopper } from 'react-popper';
 import Picker from '@emoji-mart/react';

package/dist/plugins/Emojis/index.browser.cjs

@@ -108,7 +108,9 @@ var EmojiPicker = (props) => {
   const { t } = useTranslationContext("EmojiPicker");
   const { insertText, textareaRef } = useMessageInputContext("EmojiPicker");
   const [displayPicker, setDisplayPicker] = (0, import_react4.useState)(false);
-  const [referenceElement, setReferenceElement] = (0, import_react4.useState)(null);
+  const [referenceElement, setReferenceElement] = (0, import_react4.useState)(
+    null
+  );
   const [popperElement, setPopperElement] = (0, import_react4.useState)(null);
   const { attributes, styles } = (0, import_react_popper.usePopper)(referenceElement, popperElement, {
     placement: "top-end",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/Emojis/index.ts", "../../../src/plugins/Emojis/EmojiPicker.tsx", "../../../src/context/TranslationContext.tsx", "../../../src/i18n/utils.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';\nimport { defaultDateTimeParser, defaultTranslatorFunction } from '../i18n/utils';\n\nimport type { TFunction } from 'i18next';\nimport type { TranslationLanguages } from 'stream-chat';\n\nimport type { UnknownType } from '../types/types';\nimport type { TDateTimeParser } from '../i18n/types';\n\nDayjs.extend(calendar);\nDayjs.extend(localizedFormat);\n\nexport type TranslationContextValue = {\n  t: TFunction;\n  tDateTimeParser: TDateTimeParser;\n  userLanguage: TranslationLanguages;\n};\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 Dayjs from 'dayjs';\n\nimport type { TFunction } from 'i18next';\nimport type { Moment } from 'moment-timezone';\nimport type {\n  DateFormatterOptions,\n  PredefinedFormatters,\n  SupportedTranslations,\n  TDateTimeParserInput,\n  TDateTimeParserOutput,\n  TimestampFormatterOptions,\n} from './types';\n\nexport const notValidDateWarning =\n  'MessageTimestamp was called without a message, or message has invalid created_at date.';\nexport const noParsingFunctionWarning =\n  'MessageTimestamp was called but there is no datetime parsing function available';\n\nexport const isNumberOrString = (output: TDateTimeParserOutput): output is number | string =>\n  typeof output === 'string' || typeof output === 'number';\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 function getDateString({\n  calendar,\n  calendarFormats,\n  format,\n  formatDate,\n  messageCreatedAt,\n  t,\n  tDateTimeParser,\n  timestampTranslationKey,\n}: DateFormatterOptions): string | number | null {\n  if (\n    !messageCreatedAt ||\n    (typeof messageCreatedAt === 'string' && !Date.parse(messageCreatedAt))\n  ) {\n    console.warn(notValidDateWarning);\n    return null;\n  }\n\n  if (typeof formatDate === 'function') {\n    return formatDate(new Date(messageCreatedAt));\n  }\n\n  if (t && timestampTranslationKey) {\n    const options: TimestampFormatterOptions = {};\n    if (typeof calendar !== 'undefined' && calendar !== null) options.calendar = calendar;\n    if (typeof calendarFormats !== 'undefined' && calendarFormats !== null)\n      options.calendarFormats = calendarFormats;\n    if (typeof format !== 'undefined' && format !== null) options.format = format;\n\n    const translatedTimestamp = t(timestampTranslationKey, {\n      ...options,\n      timestamp: new Date(messageCreatedAt),\n    });\n    const translationKeyFound = timestampTranslationKey !== translatedTimestamp;\n    if (translationKeyFound) return translatedTimestamp;\n  }\n\n  if (!tDateTimeParser) {\n    console.warn(noParsingFunctionWarning);\n    return null;\n  }\n\n  const parsedTime = tDateTimeParser(messageCreatedAt);\n\n  if (isDayOrMoment(parsedTime)) {\n    /**\n     * parsedTime.calendar is guaranteed on the type but is only\n     * available when a user calls dayjs.extend(calendar)\n     */\n    return calendar && parsedTime.calendar\n      ? parsedTime.calendar(undefined, calendarFormats || undefined)\n      : parsedTime.format(format || undefined);\n  }\n\n  if (isDate(parsedTime)) {\n    return parsedTime.toDateString();\n  }\n\n  if (isNumberOrString(parsedTime)) {\n    return parsedTime;\n  }\n\n  return null;\n}\n\nexport const predefinedFormatters: PredefinedFormatters = {\n  timestampFormatter: (streamI18n) => (\n    value,\n    _,\n    {\n      calendarFormats,\n      ...options\n    }: Pick<TimestampFormatterOptions, 'calendar' | 'format'> & {\n      calendarFormats?: Record<string, string> | string;\n    },\n  ) => {\n    let parsedCalendarFormats;\n    try {\n      if (!options.calendar) {\n        parsedCalendarFormats = {};\n      } else if (typeof calendarFormats === 'string') {\n        parsedCalendarFormats = JSON.parse(calendarFormats);\n      } else if (typeof calendarFormats === 'object') {\n        parsedCalendarFormats = calendarFormats;\n      }\n    } catch (e) {\n      console.error('[TIMESTAMP FORMATTER]', e);\n    }\n\n    const result = getDateString({\n      ...options,\n      calendarFormats: parsedCalendarFormats,\n      messageCreatedAt: value,\n      tDateTimeParser: streamI18n.tDateTimeParser,\n    });\n    if (!result || typeof result === 'number') {\n      return JSON.stringify(value);\n    }\n    return result;\n  },\n};\n\nexport const defaultTranslatorFunction: TFunction = <tResult = string>(key: tResult) => key;\n\nexport const defaultDateTimeParser = (input?: TDateTimeParserInput) => Dayjs(input);\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", "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": "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",
+  "sourcesContent": ["export * from './EmojiPicker';\nexport { EmojiPickerIcon } from './icons';\n", "import 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>(\n    null,\n  );\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';\nimport { defaultDateTimeParser, defaultTranslatorFunction } from '../i18n/utils';\n\nimport type { TFunction } from 'i18next';\nimport type { TranslationLanguages } from 'stream-chat';\n\nimport type { UnknownType } from '../types/types';\nimport type { TDateTimeParser } from '../i18n/types';\n\nDayjs.extend(calendar);\nDayjs.extend(localizedFormat);\n\nexport type TranslationContextValue = {\n  t: TFunction;\n  tDateTimeParser: TDateTimeParser;\n  userLanguage: TranslationLanguages;\n};\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 = (\n    props: Omit<P, keyof TranslationContextValue>,\n  ) => {\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 Dayjs from 'dayjs';\n\nimport type { TFunction } from 'i18next';\nimport type { Moment } from 'moment-timezone';\nimport type {\n  DateFormatterOptions,\n  PredefinedFormatters,\n  SupportedTranslations,\n  TDateTimeParserInput,\n  TDateTimeParserOutput,\n  TimestampFormatterOptions,\n} from './types';\n\nexport const notValidDateWarning =\n  'MessageTimestamp was called without a message, or message has invalid created_at date.';\nexport const noParsingFunctionWarning =\n  'MessageTimestamp was called but there is no datetime parsing function available';\n\nexport const isNumberOrString = (\n  output: TDateTimeParserOutput,\n): output is number | string => typeof output === 'string' || typeof output === 'number';\n\nexport const isDayOrMoment = (\n  output: TDateTimeParserOutput,\n): output is Dayjs.Dayjs | Moment => !!(output as Dayjs.Dayjs | Moment)?.isSame;\n\nexport const isDate = (output: TDateTimeParserOutput): output is Date =>\n  !!(output as Date)?.getMonth;\n\nexport function getDateString({\n  calendar,\n  calendarFormats,\n  format,\n  formatDate,\n  messageCreatedAt,\n  t,\n  tDateTimeParser,\n  timestampTranslationKey,\n}: DateFormatterOptions): string | number | null {\n  if (\n    !messageCreatedAt ||\n    (typeof messageCreatedAt === 'string' && !Date.parse(messageCreatedAt))\n  ) {\n    console.warn(notValidDateWarning);\n    return null;\n  }\n\n  if (typeof formatDate === 'function') {\n    return formatDate(new Date(messageCreatedAt));\n  }\n\n  if (t && timestampTranslationKey) {\n    const options: TimestampFormatterOptions = {};\n    if (typeof calendar !== 'undefined' && calendar !== null) options.calendar = calendar;\n    if (typeof calendarFormats !== 'undefined' && calendarFormats !== null)\n      options.calendarFormats = calendarFormats;\n    if (typeof format !== 'undefined' && format !== null) options.format = format;\n\n    const translatedTimestamp = t(timestampTranslationKey, {\n      ...options,\n      timestamp: new Date(messageCreatedAt),\n    });\n    const translationKeyFound = timestampTranslationKey !== translatedTimestamp;\n    if (translationKeyFound) return translatedTimestamp;\n  }\n\n  if (!tDateTimeParser) {\n    console.warn(noParsingFunctionWarning);\n    return null;\n  }\n\n  const parsedTime = tDateTimeParser(messageCreatedAt);\n\n  if (isDayOrMoment(parsedTime)) {\n    /**\n     * parsedTime.calendar is guaranteed on the type but is only\n     * available when a user calls dayjs.extend(calendar)\n     */\n    return calendar && parsedTime.calendar\n      ? parsedTime.calendar(undefined, calendarFormats || undefined)\n      : parsedTime.format(format || undefined);\n  }\n\n  if (isDate(parsedTime)) {\n    return parsedTime.toDateString();\n  }\n\n  if (isNumberOrString(parsedTime)) {\n    return parsedTime;\n  }\n\n  return null;\n}\n\nexport const predefinedFormatters: PredefinedFormatters = {\n  timestampFormatter:\n    (streamI18n) =>\n    (\n      value,\n      _,\n      {\n        calendarFormats,\n        ...options\n      }: Pick<TimestampFormatterOptions, 'calendar' | 'format'> & {\n        calendarFormats?: Record<string, string> | string;\n      },\n    ) => {\n      let parsedCalendarFormats;\n      try {\n        if (!options.calendar) {\n          parsedCalendarFormats = {};\n        } else if (typeof calendarFormats === 'string') {\n          parsedCalendarFormats = JSON.parse(calendarFormats);\n        } else if (typeof calendarFormats === 'object') {\n          parsedCalendarFormats = calendarFormats;\n        }\n      } catch (e) {\n        console.error('[TIMESTAMP FORMATTER]', e);\n      }\n\n      const result = getDateString({\n        ...options,\n        calendarFormats: parsedCalendarFormats,\n        messageCreatedAt: value,\n        tDateTimeParser: streamI18n.tDateTimeParser,\n      });\n      if (!result || typeof result === 'number') {\n        return JSON.stringify(value);\n      }\n      return result;\n    },\n};\n\nexport const defaultTranslatorFunction: TFunction = <tResult = string>(key: tResult) =>\n  key;\n\nexport const defaultDateTimeParser = (input?: TDateTimeParserInput) => Dayjs(input);\n\nexport const isLanguageSupported = (\n  language: string,\n): language is SupportedTranslations => {\n  const translations = [\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  ];\n  return translations.some((translation) => language === translation);\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": "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",
   "names": ["import_react", "import_dayjs", "Dayjs", "Dayjs", "calendar", "localizedFormat", "React", "import_react", "import_react", "React", "React", "Picker"]
 }

package/dist/plugins/Emojis/index.node.cjs

@@ -108,7 +108,9 @@ var EmojiPicker = (props) => {
   const { t } = useTranslationContext("EmojiPicker");
   const { insertText, textareaRef } = useMessageInputContext("EmojiPicker");
   const [displayPicker, setDisplayPicker] = (0, import_react4.useState)(false);
-  const [referenceElement, setReferenceElement] = (0, import_react4.useState)(null);
+  const [referenceElement, setReferenceElement] = (0, import_react4.useState)(
+    null
+  );
   const [popperElement, setPopperElement] = (0, import_react4.useState)(null);
   const { attributes, styles } = (0, import_react_popper.usePopper)(referenceElement, popperElement, {
     placement: "top-end",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugins/Emojis/index.ts", "../../../src/plugins/Emojis/EmojiPicker.tsx", "../../../src/context/TranslationContext.tsx", "../../../src/i18n/utils.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';\nimport { defaultDateTimeParser, defaultTranslatorFunction } from '../i18n/utils';\n\nimport type { TFunction } from 'i18next';\nimport type { TranslationLanguages } from 'stream-chat';\n\nimport type { UnknownType } from '../types/types';\nimport type { TDateTimeParser } from '../i18n/types';\n\nDayjs.extend(calendar);\nDayjs.extend(localizedFormat);\n\nexport type TranslationContextValue = {\n  t: TFunction;\n  tDateTimeParser: TDateTimeParser;\n  userLanguage: TranslationLanguages;\n};\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 Dayjs from 'dayjs';\n\nimport type { TFunction } from 'i18next';\nimport type { Moment } from 'moment-timezone';\nimport type {\n  DateFormatterOptions,\n  PredefinedFormatters,\n  SupportedTranslations,\n  TDateTimeParserInput,\n  TDateTimeParserOutput,\n  TimestampFormatterOptions,\n} from './types';\n\nexport const notValidDateWarning =\n  'MessageTimestamp was called without a message, or message has invalid created_at date.';\nexport const noParsingFunctionWarning =\n  'MessageTimestamp was called but there is no datetime parsing function available';\n\nexport const isNumberOrString = (output: TDateTimeParserOutput): output is number | string =>\n  typeof output === 'string' || typeof output === 'number';\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 function getDateString({\n  calendar,\n  calendarFormats,\n  format,\n  formatDate,\n  messageCreatedAt,\n  t,\n  tDateTimeParser,\n  timestampTranslationKey,\n}: DateFormatterOptions): string | number | null {\n  if (\n    !messageCreatedAt ||\n    (typeof messageCreatedAt === 'string' && !Date.parse(messageCreatedAt))\n  ) {\n    console.warn(notValidDateWarning);\n    return null;\n  }\n\n  if (typeof formatDate === 'function') {\n    return formatDate(new Date(messageCreatedAt));\n  }\n\n  if (t && timestampTranslationKey) {\n    const options: TimestampFormatterOptions = {};\n    if (typeof calendar !== 'undefined' && calendar !== null) options.calendar = calendar;\n    if (typeof calendarFormats !== 'undefined' && calendarFormats !== null)\n      options.calendarFormats = calendarFormats;\n    if (typeof format !== 'undefined' && format !== null) options.format = format;\n\n    const translatedTimestamp = t(timestampTranslationKey, {\n      ...options,\n      timestamp: new Date(messageCreatedAt),\n    });\n    const translationKeyFound = timestampTranslationKey !== translatedTimestamp;\n    if (translationKeyFound) return translatedTimestamp;\n  }\n\n  if (!tDateTimeParser) {\n    console.warn(noParsingFunctionWarning);\n    return null;\n  }\n\n  const parsedTime = tDateTimeParser(messageCreatedAt);\n\n  if (isDayOrMoment(parsedTime)) {\n    /**\n     * parsedTime.calendar is guaranteed on the type but is only\n     * available when a user calls dayjs.extend(calendar)\n     */\n    return calendar && parsedTime.calendar\n      ? parsedTime.calendar(undefined, calendarFormats || undefined)\n      : parsedTime.format(format || undefined);\n  }\n\n  if (isDate(parsedTime)) {\n    return parsedTime.toDateString();\n  }\n\n  if (isNumberOrString(parsedTime)) {\n    return parsedTime;\n  }\n\n  return null;\n}\n\nexport const predefinedFormatters: PredefinedFormatters = {\n  timestampFormatter: (streamI18n) => (\n    value,\n    _,\n    {\n      calendarFormats,\n      ...options\n    }: Pick<TimestampFormatterOptions, 'calendar' | 'format'> & {\n      calendarFormats?: Record<string, string> | string;\n    },\n  ) => {\n    let parsedCalendarFormats;\n    try {\n      if (!options.calendar) {\n        parsedCalendarFormats = {};\n      } else if (typeof calendarFormats === 'string') {\n        parsedCalendarFormats = JSON.parse(calendarFormats);\n      } else if (typeof calendarFormats === 'object') {\n        parsedCalendarFormats = calendarFormats;\n      }\n    } catch (e) {\n      console.error('[TIMESTAMP FORMATTER]', e);\n    }\n\n    const result = getDateString({\n      ...options,\n      calendarFormats: parsedCalendarFormats,\n      messageCreatedAt: value,\n      tDateTimeParser: streamI18n.tDateTimeParser,\n    });\n    if (!result || typeof result === 'number') {\n      return JSON.stringify(value);\n    }\n    return result;\n  },\n};\n\nexport const defaultTranslatorFunction: TFunction = <tResult = string>(key: tResult) => key;\n\nexport const defaultDateTimeParser = (input?: TDateTimeParserInput) => Dayjs(input);\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", "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": "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",
+  "sourcesContent": ["export * from './EmojiPicker';\nexport { EmojiPickerIcon } from './icons';\n", "import 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>(\n    null,\n  );\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';\nimport { defaultDateTimeParser, defaultTranslatorFunction } from '../i18n/utils';\n\nimport type { TFunction } from 'i18next';\nimport type { TranslationLanguages } from 'stream-chat';\n\nimport type { UnknownType } from '../types/types';\nimport type { TDateTimeParser } from '../i18n/types';\n\nDayjs.extend(calendar);\nDayjs.extend(localizedFormat);\n\nexport type TranslationContextValue = {\n  t: TFunction;\n  tDateTimeParser: TDateTimeParser;\n  userLanguage: TranslationLanguages;\n};\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 = (\n    props: Omit<P, keyof TranslationContextValue>,\n  ) => {\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 Dayjs from 'dayjs';\n\nimport type { TFunction } from 'i18next';\nimport type { Moment } from 'moment-timezone';\nimport type {\n  DateFormatterOptions,\n  PredefinedFormatters,\n  SupportedTranslations,\n  TDateTimeParserInput,\n  TDateTimeParserOutput,\n  TimestampFormatterOptions,\n} from './types';\n\nexport const notValidDateWarning =\n  'MessageTimestamp was called without a message, or message has invalid created_at date.';\nexport const noParsingFunctionWarning =\n  'MessageTimestamp was called but there is no datetime parsing function available';\n\nexport const isNumberOrString = (\n  output: TDateTimeParserOutput,\n): output is number | string => typeof output === 'string' || typeof output === 'number';\n\nexport const isDayOrMoment = (\n  output: TDateTimeParserOutput,\n): output is Dayjs.Dayjs | Moment => !!(output as Dayjs.Dayjs | Moment)?.isSame;\n\nexport const isDate = (output: TDateTimeParserOutput): output is Date =>\n  !!(output as Date)?.getMonth;\n\nexport function getDateString({\n  calendar,\n  calendarFormats,\n  format,\n  formatDate,\n  messageCreatedAt,\n  t,\n  tDateTimeParser,\n  timestampTranslationKey,\n}: DateFormatterOptions): string | number | null {\n  if (\n    !messageCreatedAt ||\n    (typeof messageCreatedAt === 'string' && !Date.parse(messageCreatedAt))\n  ) {\n    console.warn(notValidDateWarning);\n    return null;\n  }\n\n  if (typeof formatDate === 'function') {\n    return formatDate(new Date(messageCreatedAt));\n  }\n\n  if (t && timestampTranslationKey) {\n    const options: TimestampFormatterOptions = {};\n    if (typeof calendar !== 'undefined' && calendar !== null) options.calendar = calendar;\n    if (typeof calendarFormats !== 'undefined' && calendarFormats !== null)\n      options.calendarFormats = calendarFormats;\n    if (typeof format !== 'undefined' && format !== null) options.format = format;\n\n    const translatedTimestamp = t(timestampTranslationKey, {\n      ...options,\n      timestamp: new Date(messageCreatedAt),\n    });\n    const translationKeyFound = timestampTranslationKey !== translatedTimestamp;\n    if (translationKeyFound) return translatedTimestamp;\n  }\n\n  if (!tDateTimeParser) {\n    console.warn(noParsingFunctionWarning);\n    return null;\n  }\n\n  const parsedTime = tDateTimeParser(messageCreatedAt);\n\n  if (isDayOrMoment(parsedTime)) {\n    /**\n     * parsedTime.calendar is guaranteed on the type but is only\n     * available when a user calls dayjs.extend(calendar)\n     */\n    return calendar && parsedTime.calendar\n      ? parsedTime.calendar(undefined, calendarFormats || undefined)\n      : parsedTime.format(format || undefined);\n  }\n\n  if (isDate(parsedTime)) {\n    return parsedTime.toDateString();\n  }\n\n  if (isNumberOrString(parsedTime)) {\n    return parsedTime;\n  }\n\n  return null;\n}\n\nexport const predefinedFormatters: PredefinedFormatters = {\n  timestampFormatter:\n    (streamI18n) =>\n    (\n      value,\n      _,\n      {\n        calendarFormats,\n        ...options\n      }: Pick<TimestampFormatterOptions, 'calendar' | 'format'> & {\n        calendarFormats?: Record<string, string> | string;\n      },\n    ) => {\n      let parsedCalendarFormats;\n      try {\n        if (!options.calendar) {\n          parsedCalendarFormats = {};\n        } else if (typeof calendarFormats === 'string') {\n          parsedCalendarFormats = JSON.parse(calendarFormats);\n        } else if (typeof calendarFormats === 'object') {\n          parsedCalendarFormats = calendarFormats;\n        }\n      } catch (e) {\n        console.error('[TIMESTAMP FORMATTER]', e);\n      }\n\n      const result = getDateString({\n        ...options,\n        calendarFormats: parsedCalendarFormats,\n        messageCreatedAt: value,\n        tDateTimeParser: streamI18n.tDateTimeParser,\n      });\n      if (!result || typeof result === 'number') {\n        return JSON.stringify(value);\n      }\n      return result;\n    },\n};\n\nexport const defaultTranslatorFunction: TFunction = <tResult = string>(key: tResult) =>\n  key;\n\nexport const defaultDateTimeParser = (input?: TDateTimeParserInput) => Dayjs(input);\n\nexport const isLanguageSupported = (\n  language: string,\n): language is SupportedTranslations => {\n  const translations = [\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  ];\n  return translations.some((translation) => language === translation);\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": "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",
   "names": ["import_react", "import_dayjs", "Dayjs", "Dayjs", "calendar", "localizedFormat", "React", "import_react", "import_react", "React", "React", "Picker"]
 }

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

@@ -80,9 +80,10 @@ var float32ArrayToInt16Array = (float32Arr) => {
   }
   return int16Arr;
 };
-var splitDataByChannel = (audioBuffer) => Array.from({ length: audioBuffer.numberOfChannels }, (_, i) => audioBuffer.getChannelData(i)).map(
-  float32ArrayToInt16Array
-);
+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);
@@ -95,7 +96,9 @@ async function encodeToMp3(file, sampleRate) {
     const [leftChannelBlock, rightChannelBlock] = dataByChannel.map(
       (channel) => channel.subarray(i, i + COUNT_SAMPLES_PER_ENCODED_BLOCK)
     );
-    dataBuffer.push(new Int8Array(mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock)));
+    dataBuffer.push(
+      new Int8Array(mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock))
+    );
     remaining -= COUNT_SAMPLES_PER_ENCODED_BLOCK;
   }
   const lastBlock = mp3Encoder.flush();

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

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

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

@@ -80,9 +80,10 @@ var float32ArrayToInt16Array = (float32Arr) => {
   }
   return int16Arr;
 };
-var splitDataByChannel = (audioBuffer) => Array.from({ length: audioBuffer.numberOfChannels }, (_, i) => audioBuffer.getChannelData(i)).map(
-  float32ArrayToInt16Array
-);
+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);
@@ -95,7 +96,9 @@ async function encodeToMp3(file, sampleRate) {
     const [leftChannelBlock, rightChannelBlock] = dataByChannel.map(
       (channel) => channel.subarray(i, i + COUNT_SAMPLES_PER_ENCODED_BLOCK)
     );
-    dataBuffer.push(new Int8Array(mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock)));
+    dataBuffer.push(
+      new Int8Array(mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock))
+    );
     remaining -= COUNT_SAMPLES_PER_ENCODED_BLOCK;
   }
   const lastBlock = mp3Encoder.flush();

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

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

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

@@ -7,6 +7,7 @@
   flex-direction: column;
   justify-content: center;
 
+  &.str-chat__channel-search--active.str-chat__channel-search--inline,
   &.str-chat__channel-search--with-results.str-chat__channel-search--inline {
     height: 100%;
   }

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

@@ -23,6 +23,9 @@
     var(--str-chat__quoted-message-inside-message-input-max-width) +
       calc(var(--str-chat__spacing-px) * 50)
   );
+
+  /* The maximum number of lines displayed for quoted messages, set to "none" to turn off clamping */
+  --str-chat__quoted-message-line-clamp: 5;
 }
 
 .str-chat__message {
@@ -59,12 +62,21 @@
   }
 }
 
+.str-chat__quoted-message-text-value {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--str-chat__quoted-message-line-clamp);
+  line-clamp: var(--str-chat__quoted-message-line-clamp);
+  -webkit-box-orient: vertical;
+}
+
 .str-chat__message,
 .str-chat__quoted-message-preview {
   @mixin chat-bubble-spacing {
     padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
 
     p {
+      white-space: pre-line;
       margin: 0;
     }
   }
@@ -165,10 +177,6 @@
         .str-chat__message-text-inner {
           @include utils.prevent-glitch-text-overflow;
         }
-
-        p {
-          white-space: pre-line;
-        }
       }
     }
   }
@@ -357,7 +365,6 @@
   }
 }
 
-
 .str-chat__message-inner {
   .str-chat__message-options {
     display: none;

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

@@ -332,8 +332,8 @@
   }
 
   .str-chat__poll-creation-dialog {
+    height: 100%;
     width: 100%;
-    height: 700px;
     display: flex;
     flex-direction: column;
 

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

@@ -0,0 +1,148 @@
+@use '../utils';
+
+.str-chat__search {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  &.str-chat__search--active {
+    flex: 1;
+    max-height: 100%;
+  }
+
+  .str-chat__search-bar {
+    @include utils.flex-row-center;
+    padding: var(--str-chat__spacing-2_5)  var(--str-chat__spacing-2);
+    gap: 0.25rem;
+
+    .str-chat__search-bar-button {
+      @include utils.button-reset;
+      padding: var(--str-chat__spacing-1);
+      cursor: pointer;
+    }
+
+    .str-chat__search-input--wrapper {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      padding: var(--str-chat__spacing-1_5) var(--str-chat__spacing-2);
+      min-width: 0;
+
+      .str-chat__search-input--icon {
+        height: 20px;
+        width: 20px;
+        margin-right: 0.5rem;
+      }
+
+      .str-chat__search-input--clear-button {
+        @include utils.button-reset;
+        cursor: pointer;
+        padding: 0;
+
+        &:disabled {
+          cursor: default;
+        }
+
+        .str-chat__search-input--clear-button-icon {
+          height: 20px;
+          width: 20px;
+          mask-size: 20px;
+          -webkit-mask-size: 20px;
+        }
+      }
+
+      input {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+  }
+
+  .str-chat__search-results {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+    .str-chat__search-results-header {
+      width: 100%;
+
+      button {
+        @include utils.button-reset();
+        cursor: pointer;
+      }
+
+      .str-chat__search-results-header__filter-source-buttons {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2_5);
+        width: 100%;
+
+        .str-chat__search-results-header__filter-source-button {
+          padding: 0.5rem 0.75rem;
+          border-radius: var(--str-chat__border-radius-circle);
+          background-color: var(--str-chat__tertiary-surface-color);
+        }
+
+        .str-chat__search-results-header__filter-source-button--active {
+          background-color: var(--str-chat__surface-color);
+          color: var(--str-chat__text-color);
+          font-weight: 500;
+        }
+      }
+    }
+
+    .str-chat__search-results-presearch,
+    .str-chat__search-source-results-empty {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 1.25rem;
+    }
+
+    .str-chat__search-source-results {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+
+      .str-chat__search-source-result-list {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+
+        .str-chat__infinite-scroll-paginator__content {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .str-chat__search-result {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          column-gap: var(--str-chat__spacing-2);
+          padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
+
+          .search__result-text,
+          .str-chat__search-result--display-name {
+            @include utils.ellipsis-text;
+            @include utils.prevent-glitch-text-overflow;
+          }
+        }
+
+        .str-chat__search-source-result-list__footer {
+          height: 4rem;
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+        }
+      }
+    }
+  }
+}