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

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", "../../../src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts"],
-  "sourcesContent": ["export * from './EmojiPicker';\nexport * from './middleware';\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, { useContext } from 'react';\nimport Dayjs from 'dayjs';\nimport calendar from 'dayjs/plugin/calendar';\nimport localizedFormat from 'dayjs/plugin/localizedFormat';\nimport type { PropsWithChildren } from 'react';\nimport type { TFunction } from 'i18next';\nimport type { TranslationLanguages } from 'stream-chat';\n\nimport { getDisplayName } from './utils/getDisplayName';\nimport { defaultDateTimeParser, defaultTranslatorFunction } from '../i18n/utils';\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: unknown): output is Date =>\n  output !== null &&\n  typeof output === 'object' &&\n  typeof (output as Date).getTime === 'function';\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, useContext } from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport type { CooldownTimerState, MessageInputProps } from '../components/MessageInput';\nimport type { MessageInputHookProps } from '../components/MessageInput/hooks/useMessageInputControls';\n\nexport type MessageInputContextValue = MessageInputHookProps &\n  Omit<MessageInputProps, 'Input'> &\n  CooldownTimerState;\n\nexport const MessageInputContext = createContext<MessageInputHookProps | undefined>(\n  undefined,\n);\n\nexport const MessageInputContextProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: MessageInputContextValue;\n}>) => (\n  <MessageInputContext.Provider value={value as unknown as MessageInputContextValue}>\n    {children}\n  </MessageInputContext.Provider>\n);\n\nexport const useMessageInputContext = (\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  componentName?: string,\n) => {\n  const contextValue = useContext(MessageInputContext);\n\n  if (!contextValue) {\n    return {} as MessageInputContextValue;\n  }\n\n  return contextValue as unknown as MessageInputContextValue;\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", "import mergeWith from 'lodash.mergewith';\nimport type {\n  SearchSourceOptions,\n  SearchSourceType,\n  TextComposerMiddlewareOptions,\n  TextComposerMiddlewareParams,\n  TextComposerSuggestion,\n} from 'stream-chat';\nimport {\n  BaseSearchSource,\n  getTokenizedSuggestionDisplayName,\n  getTriggerCharWithToken,\n  insertItemWithTrigger,\n  replaceWordWithEntity,\n} from 'stream-chat';\nimport type {\n  EmojiSearchIndex,\n  EmojiSearchIndexResult,\n} from '../../../components/MessageInput';\n\nclass EmojiSearchSource<\n  T extends TextComposerSuggestion<EmojiSearchIndexResult>,\n> extends BaseSearchSource<T> {\n  readonly type: SearchSourceType = 'emoji';\n  private emojiSearchIndex: EmojiSearchIndex;\n\n  constructor(emojiSearchIndex: EmojiSearchIndex, options?: SearchSourceOptions) {\n    super(options);\n    this.emojiSearchIndex = emojiSearchIndex;\n  }\n\n  async query(searchQuery: string) {\n    if (searchQuery.length === 0) {\n      return { items: [] as T[], next: null };\n    }\n    const emojis = (await this.emojiSearchIndex.search(searchQuery)) ?? [];\n\n    // emojiIndex.search sometimes returns undefined values, so filter those out first\n    return {\n      items: emojis\n        .filter(Boolean)\n        .slice(0, 7)\n        .map(({ emoticons = [], id, name, native, skins = [] }) => {\n          const [firstSkin] = skins;\n\n          return {\n            emoticons,\n            id,\n            name,\n            native: native ?? firstSkin.native,\n          };\n        }) as T[],\n      next: null, // todo: generate cursor\n    };\n  }\n\n  protected filterQueryResults(items: T[]): T[] | Promise<T[]> {\n    return items.map((item) => ({\n      ...item,\n      ...getTokenizedSuggestionDisplayName({\n        displayName: item.id,\n        searchToken: this.searchQuery,\n      }),\n    }));\n  }\n}\n\nconst DEFAULT_OPTIONS: TextComposerMiddlewareOptions = { minChars: 1, trigger: ':' };\n\n/**\n * TextComposer middleware for mentions\n * Usage:\n *\n *  const textComposer = new TextComposer(options);\n *\n *  textComposer.use(new createTextComposerEmojiMiddleware(emojiSearchIndex, {\n *   minChars: 2\n *  }));\n *\n * @param emojiSearchIndex\n * @param {{\n *     minChars: number;\n *     trigger: string;\n *   }} options\n * @returns\n */\nexport const createTextComposerEmojiMiddleware = <\n  T extends EmojiSearchIndexResult = EmojiSearchIndexResult,\n>(\n  emojiSearchIndex: EmojiSearchIndex,\n  options?: Partial<TextComposerMiddlewareOptions>,\n) => {\n  const finalOptions = mergeWith(DEFAULT_OPTIONS, options ?? {});\n  const emojiSearchSource = new EmojiSearchSource(emojiSearchIndex);\n  emojiSearchSource.activate();\n\n  return {\n    id: 'stream-io/emoji-middleware',\n    onChange: async ({ input, nextHandler }: TextComposerMiddlewareParams<T>) => {\n      const { state } = input;\n      if (!state.selection) return nextHandler(input);\n\n      const triggerWithToken = getTriggerCharWithToken({\n        acceptTrailingSpaces: false,\n        text: state.text.slice(0, state.selection.end),\n        trigger: finalOptions.trigger,\n      });\n\n      const triggerWasRemoved =\n        !triggerWithToken || triggerWithToken.length < finalOptions.minChars;\n\n      if (triggerWasRemoved) {\n        const hasSuggestionsForTrigger =\n          input.state.suggestions?.trigger === finalOptions.trigger;\n        const newInput = { ...input };\n        if (hasSuggestionsForTrigger && newInput.state.suggestions) {\n          delete newInput.state.suggestions;\n        }\n        return nextHandler(newInput);\n      }\n\n      const newSearchTriggerred =\n        triggerWithToken && triggerWithToken === finalOptions.trigger;\n\n      if (newSearchTriggerred) {\n        emojiSearchSource.resetStateAndActivate();\n      }\n\n      const textWithReplacedWord = await replaceWordWithEntity({\n        caretPosition: state.selection.end,\n        getEntityString: async (word: string) => {\n          const { items } = await emojiSearchSource.query(word);\n\n          const emoji = items\n            .filter(Boolean)\n            .slice(0, 10)\n            .find(({ emoticons }) => !!emoticons?.includes(word));\n\n          if (!emoji) return null;\n\n          const [firstSkin] = emoji.skins ?? [];\n\n          return emoji.native ?? firstSkin.native;\n        },\n        text: state.text,\n      });\n\n      if (textWithReplacedWord !== state.text) {\n        return {\n          state: {\n            ...state,\n            suggestions: undefined, // to prevent the TextComposerMiddlewareExecutor to run the first page query\n            text: textWithReplacedWord,\n          },\n          stop: true, // Stop other middleware from processing '@' character\n        };\n      }\n\n      return {\n        state: {\n          ...state,\n          suggestions: {\n            query: triggerWithToken.slice(1),\n            searchSource: emojiSearchSource,\n            trigger: finalOptions.trigger,\n          },\n        },\n        stop: true, // Stop other middleware from processing '@' character\n      };\n    },\n    onSuggestionItemSelect: ({\n      input,\n      nextHandler,\n      selectedSuggestion,\n    }: TextComposerMiddlewareParams<T>) => {\n      const { state } = input;\n      if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)\n        return nextHandler(input);\n\n      emojiSearchSource.resetStateAndActivate();\n      return Promise.resolve({\n        state: {\n          ...state,\n          ...insertItemWithTrigger({\n            insertText: `${'native' in selectedSuggestion ? selectedSuggestion.native : ''} `,\n            selection: state.selection,\n            text: state.text,\n            trigger: finalOptions.trigger,\n          }),\n          suggestions: undefined, // Clear suggestions after selection\n        },\n      });\n    },\n  };\n};\n"],
-  "mappings": "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",
-  "names": ["import_react", "import_dayjs", "Dayjs", "Dayjs", "calendar", "localizedFormat", "React", "import_react", "import_react", "React", "React", "Picker", "mergeWith"]
+  "sources": ["../../../src/plugins/Emojis/index.ts", "../../../src/plugins/Emojis/EmojiPicker.tsx", "../../../src/plugins/Emojis/icons.tsx", "../../../src/context/ChannelStateContext.tsx", "../../../src/context/ChatContext.tsx", "../../../src/context/MessageContext.tsx", "../../../src/context/TranslationContext.tsx", "../../../src/i18n/utils.ts", "../../../src/components/MessageInput/hooks/useMessageComposer.ts", "../../../src/components/Threads/ThreadContext.tsx", "../../../src/components/Thread/Thread.tsx", "../../../src/context/MessageInputContext.tsx", "../../../src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts"],
+  "sourcesContent": ["export * from './EmojiPicker';\nexport * from './middleware';\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 { EmojiPickerIcon } from './icons';\nimport { useMessageInputContext, useTranslationContext } from '../../context';\nimport { useMessageComposer } from '../../components';\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 { textareaRef } = useMessageInputContext('EmojiPicker');\n  const { textComposer } = useMessageComposer();\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              const textarea = textareaRef.current;\n              if (!textarea) return;\n              textComposer.insertText({ text: e.native });\n              textarea.focus();\n              if (props.closeOnEmojiSelect) {\n                setDisplayPicker(false);\n              }\n            }}\n            {...props.pickerProps}\n          />\n        </div>\n      )}\n      <button\n        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 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", "import type { PropsWithChildren } from 'react';\nimport React, { useContext } from 'react';\nimport type {\n  Channel,\n  ChannelConfigWithInfo,\n  LocalMessage,\n  Mute,\n  ChannelState as StreamChannelState,\n} from 'stream-chat';\n\nimport type {\n  ChannelUnreadUiState,\n  GiphyVersions,\n  ImageAttachmentSizeHandler,\n  UnknownType,\n  VideoAttachmentSizeHandler,\n} from '../types/types';\n\nexport type ChannelNotifications = Array<{\n  id: string;\n  text: string;\n  type: 'success' | 'error';\n}>;\n\nexport type ChannelState = {\n  suppressAutoscroll: boolean;\n  error?: Error | null;\n  hasMore?: boolean;\n  hasMoreNewer?: boolean;\n  highlightedMessageId?: string;\n  loading?: boolean;\n  loadingMore?: boolean;\n  loadingMoreNewer?: boolean;\n  members?: StreamChannelState['members'];\n  messages?: LocalMessage[];\n  pinnedMessages?: LocalMessage[];\n  read?: StreamChannelState['read'];\n  thread?: LocalMessage | null;\n  threadHasMore?: boolean;\n  threadLoadingMore?: boolean;\n  threadMessages?: LocalMessage[];\n  threadSuppressAutoscroll?: boolean;\n  typing?: StreamChannelState['typing'];\n  watcherCount?: number;\n  watchers?: StreamChannelState['watchers'];\n};\n\nexport type ChannelStateContextValue = Omit<ChannelState, 'typing'> & {\n  channel: Channel;\n  channelCapabilities: Record<string, boolean>;\n  channelConfig: ChannelConfigWithInfo | undefined;\n  imageAttachmentSizeHandler: ImageAttachmentSizeHandler;\n  notifications: ChannelNotifications;\n  shouldGenerateVideoThumbnail: boolean;\n  videoAttachmentSizeHandler: VideoAttachmentSizeHandler;\n  channelUnreadUiState?: ChannelUnreadUiState;\n  giphyVersion?: GiphyVersions;\n  mutes?: Array<Mute>;\n  watcher_count?: number;\n};\n\nexport const ChannelStateContext = React.createContext<\n  ChannelStateContextValue | undefined\n>(undefined);\n\nexport const ChannelStateProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: ChannelStateContextValue;\n}>) => (\n  <ChannelStateContext.Provider value={value as unknown as ChannelStateContextValue}>\n    {children}\n  </ChannelStateContext.Provider>\n);\n\nexport const useChannelStateContext = (componentName?: string) => {\n  const contextValue = useContext(ChannelStateContext);\n\n  if (!contextValue) {\n    console.warn(\n      `The useChannelStateContext hook was called outside of the ChannelStateContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the ${componentName} component.`,\n    );\n\n    return {} as ChannelStateContextValue;\n  }\n\n  return contextValue as unknown as ChannelStateContextValue;\n};\n\n/**\n * Typescript currently does not support partial inference, so if ChannelStateContext\n * typing is desired while using the HOC withChannelStateContext, the Props for the\n * wrapped component must be provided as the first generic.\n */\nexport const withChannelStateContext = <P extends UnknownType>(\n  Component: React.ComponentType<P>,\n) => {\n  const WithChannelStateContextComponent = (\n    props: Omit<P, keyof ChannelStateContextValue>,\n  ) => {\n    const channelStateContext = useChannelStateContext();\n\n    return <Component {...(props as P)} {...channelStateContext} />;\n  };\n\n  WithChannelStateContextComponent.displayName = (\n    Component.displayName ||\n    Component.name ||\n    'Component'\n  ).replace('Base', '');\n\n  return WithChannelStateContextComponent;\n};\n", "import React, { useContext } from 'react';\nimport type { PropsWithChildren } from 'react';\nimport type {\n  AppSettingsAPIResponse,\n  Channel,\n  Mute,\n  SearchController,\n} from 'stream-chat';\n\nimport { getDisplayName } from './utils/getDisplayName';\nimport type { ChatProps } from '../components/Chat/Chat';\nimport type { UnknownType } from '../types/types';\nimport type { ChannelsQueryState } from '../components/Chat/hooks/useChannelsQueryState';\n\ntype CSSClasses =\n  | 'chat'\n  | 'chatContainer'\n  | 'channel'\n  | 'channelList'\n  | 'message'\n  | 'messageList'\n  | 'thread'\n  | 'threadList'\n  | 'virtualMessage'\n  | 'virtualizedMessageList';\n\nexport type CustomClasses = Partial<Record<CSSClasses, string>>;\n\ntype ChannelConfId = string; // e.g.: \"messaging:general\"\n\nexport type ChatContextValue = {\n  /**\n   * Indicates, whether a channels query has been triggered within ChannelList by its channels pagination controller.\n   */\n  channelsQueryState: ChannelsQueryState;\n  closeMobileNav: () => void;\n  getAppSettings: () => Promise<AppSettingsAPIResponse> | null;\n  latestMessageDatesByChannels: Record<ChannelConfId, Date>;\n  mutes: Array<Mute>;\n  openMobileNav: () => void;\n  /** Instance of SearchController class that allows to control all the search operations. */\n  searchController: SearchController;\n  /**\n   * Sets active channel to be rendered within Channel component.\n   * @param newChannel\n   * @param watchers\n   * @param event\n   */\n  setActiveChannel: (\n    newChannel?: Channel,\n    watchers?: { limit?: number; offset?: number },\n    event?: React.BaseSyntheticEvent,\n  ) => void;\n  useImageFlagEmojisOnWindows: boolean;\n  /**\n   * Active channel used to render the contents of the Channel component.\n   */\n  channel?: Channel;\n  /**\n   * Object through which custom classes can be set for main container components of the SDK.\n   */\n  customClasses?: CustomClasses;\n  navOpen?: boolean;\n} & Partial<Pick<ChatProps, 'isMessageAIGenerated'>> &\n  Required<Pick<ChatProps, 'theme' | 'client'>>;\n\nexport const ChatContext = React.createContext<ChatContextValue | undefined>(undefined);\n\nexport const ChatProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: ChatContextValue;\n}>) => (\n  <ChatContext.Provider value={value as unknown as ChatContextValue}>\n    {children}\n  </ChatContext.Provider>\n);\n\nexport const useChatContext = (componentName?: string) => {\n  const contextValue = useContext(ChatContext);\n\n  if (!contextValue) {\n    console.warn(\n      `The useChatContext hook was called outside of the ChatContext 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 ChatContextValue;\n  }\n\n  return contextValue as unknown as ChatContextValue;\n};\n\n/**\n * Typescript currently does not support partial inference so if ChatContext\n * typing is desired while using the HOC withChatContext the Props for the\n * wrapped component must be provided as the first generic.\n */\nexport const withChatContext = <P extends UnknownType>(\n  Component: React.ComponentType<P>,\n) => {\n  const WithChatContextComponent = (props: Omit<P, keyof ChatContextValue>) => {\n    const chatContext = useChatContext();\n\n    return <Component {...(props as P)} {...chatContext} />;\n  };\n  WithChatContextComponent.displayName = `WithChatContext${getDisplayName(Component)}`;\n  return WithChatContextComponent;\n};\n", "import type { PropsWithChildren, ReactNode } from 'react';\nimport React, { useContext } from 'react';\n\nimport type {\n  LocalMessage,\n  Mute,\n  ReactionResponse,\n  ReactionSort,\n  UserResponse,\n} from 'stream-chat';\n\nimport type { ChannelActionContextValue } from './ChannelActionContext';\n\nimport type { ActionHandlerReturnType } from '../components/Message/hooks/useActionHandler';\nimport type { PinPermissions } from '../components/Message/hooks/usePinHandler';\nimport type { ReactEventHandler } from '../components/Message/types';\nimport type { MessageActionsArray } from '../components/Message/utils';\nimport type { MessageInputProps } from '../components/MessageInput/MessageInput';\nimport type { GroupStyle } from '../components/MessageList/utils';\nimport type {\n  ReactionDetailsComparator,\n  ReactionsComparator,\n  ReactionType,\n} from '../components/Reactions/types';\n\nimport type { RenderTextOptions } from '../components/Message/renderText';\nimport type { UnknownType } from '../types/types';\n\nexport type CustomMessageActions = {\n  [key: string]: (\n    message: LocalMessage,\n    event: React.BaseSyntheticEvent,\n  ) => Promise<void> | void;\n};\n\nexport type MessageContextValue = {\n  /** If actions such as edit, delete, flag, mute are enabled on Message */\n  actionsEnabled: boolean;\n  /** Function to exit edit state */\n  clearEditingState: (event?: React.BaseSyntheticEvent) => void;\n  /** If the Message is in edit state */\n  editing: boolean;\n  /**\n   * Returns all allowed actions on message by current user e.g., ['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply'].\n   * Please check [Message](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message.tsx) component for default implementation.\n   */\n  getMessageActions: () => MessageActionsArray<string>;\n  /** Function to send an action in a Channel */\n  handleAction: ActionHandlerReturnType;\n  /** Function to delete a message in a Channel */\n  handleDelete: ReactEventHandler;\n  /** Function to edit a message in a Channel */\n  handleEdit: ReactEventHandler;\n  /** Function to fetch the message reactions */\n  handleFetchReactions: (\n    reactionType?: ReactionType,\n    sort?: ReactionSort,\n  ) => Promise<Array<ReactionResponse>>;\n  /** Function to flag a message in a Channel */\n  handleFlag: ReactEventHandler;\n  /** Function to mark message and the messages that follow it as unread in a Channel */\n  handleMarkUnread: ReactEventHandler;\n  /** Function to mute a user in a Channel */\n  handleMute: ReactEventHandler;\n  /** Function to open a Thread on a Message */\n  handleOpenThread: ReactEventHandler;\n  /** Function to pin a Message in a Channel */\n  handlePin: ReactEventHandler;\n  /** Function to post a reaction on a Message */\n  handleReaction: (\n    reactionType: string,\n    event: React.BaseSyntheticEvent,\n  ) => Promise<void>;\n  /** Function to retry sending a Message */\n  handleRetry: ChannelActionContextValue['retrySendMessage'];\n  /** Function that returns whether the Message belongs to the current user */\n  isMyMessage: () => boolean;\n  /** The message object */\n  message: LocalMessage;\n  /** Indicates whether a message has not been read yet or has been marked unread */\n  messageIsUnread: boolean;\n  /** Handler function for a click event on an @mention in Message */\n  onMentionsClickMessage: ReactEventHandler;\n  /** Handler function for a hover event on an @mention in Message */\n  onMentionsHoverMessage: ReactEventHandler;\n  /** Handler function for a click event on the user that posted the Message */\n  onUserClick: ReactEventHandler;\n  /** Handler function for a hover event on the user that posted the Message */\n  onUserHover: ReactEventHandler;\n  /** Function to toggle the edit state on a Message */\n  setEditingState: ReactEventHandler;\n  /** Additional props for underlying MessageInput component, [available props](https://getstream.io/chat/docs/sdk/react/message-input-components/message_input/#props) */\n  additionalMessageInputProps?: MessageInputProps;\n  /** Call this function to keep message list scrolled to the bottom when the scroll height increases, e.g. an element appears below the last message (only used in the `VirtualizedMessageList`) */\n  autoscrollToBottom?: () => void;\n  /** Message component configuration prop. If true, picking a reaction from the `ReactionSelector` component will close the selector */\n  closeReactionSelectorOnClick?: boolean;\n  /** Object containing custom message actions and function handlers */\n  customMessageActions?: CustomMessageActions;\n  /** If true, the message is the last one in a group sent by a specific user (only used in the `VirtualizedMessageList`) */\n  endOfGroup?: boolean;\n  /** If true, the message is the first one in a group sent by a specific user (only used in the `VirtualizedMessageList`) */\n  firstOfGroup?: boolean;\n  /** Override the default formatting of the date. This is a function that has access to the original date object, returns a string  */\n  formatDate?: (date: Date) => string;\n  /** If true, group messages sent by each user (only used in the `VirtualizedMessageList`) */\n  groupedByUser?: boolean;\n  /** A list of styles to apply to this message, ie. top, bottom, single */\n  groupStyles?: GroupStyle[];\n  /** Whether to highlight and focus the message on load */\n  highlighted?: boolean;\n  /** Whether the threaded message is the first in the thread list */\n  initialMessage?: boolean;\n  /**\n   * A factory function that determines whether a message is AI generated or not.\n   */\n  isMessageAIGenerated?: (message: LocalMessage) => boolean;\n  /** Latest message id on current channel */\n  lastReceivedId?: string | null;\n  /** DOMRect object for parent MessageList component */\n  messageListRect?: DOMRect;\n  /** Array of muted users coming from [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/#mutes) */\n  mutes?: Mute[];\n  /** @deprecated in favor of `channelCapabilities - The user roles allowed to pin Messages in various channel types */\n  pinPermissions?: PinPermissions;\n  /** Sort options to provide to a reactions query */\n  reactionDetailsSort?: ReactionSort;\n  /** A list of users that have read this Message */\n  readBy?: UserResponse[];\n  /** Custom function to render message text content, defaults to the renderText function: [utils](https://github.com/GetStream/stream-chat-react/blob/master/src/utils.tsx) */\n  renderText?: (\n    text?: string,\n    mentioned_users?: UserResponse[],\n    options?: RenderTextOptions,\n  ) => ReactNode;\n  /** Comparator function to sort the list of reacted users\n   * @deprecated use `reactionDetailsSort` instead\n   */\n  sortReactionDetails?: ReactionDetailsComparator;\n  /** Comparator function to sort reactions, defaults to chronological order */\n  sortReactions?: ReactionsComparator;\n  /** Whether or not the Message is in a Thread */\n  threadList?: boolean;\n  /** render HTML instead of markdown. Posting HTML is only allowed server-side */\n  unsafeHTML?: boolean;\n};\n\nexport const MessageContext = React.createContext<MessageContextValue | undefined>(\n  undefined,\n);\n\nexport const MessageProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: MessageContextValue;\n}>) => (\n  <MessageContext.Provider value={value as unknown as MessageContextValue}>\n    {children}\n  </MessageContext.Provider>\n);\n\nexport const useMessageContext = (\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  _componentName?: string,\n) => {\n  const contextValue = useContext(MessageContext);\n\n  if (!contextValue) {\n    return {} as MessageContextValue;\n  }\n\n  return contextValue as unknown as MessageContextValue;\n};\n\n/**\n * Typescript currently does not support partial inference, so if MessageContext\n * typing is desired while using the HOC withMessageContext, the Props for the\n * wrapped component must be provided as the first generic.\n */\nexport const withMessageContext = <P extends UnknownType>(\n  Component: React.ComponentType<P>,\n) => {\n  const WithMessageContextComponent = (props: Omit<P, keyof MessageContextValue>) => {\n    const messageContext = useMessageContext();\n\n    return <Component {...(props as P)} {...messageContext} />;\n  };\n\n  WithMessageContextComponent.displayName = (\n    Component.displayName ||\n    Component.name ||\n    'Component'\n  ).replace('Base', '');\n\n  return WithMessageContextComponent;\n};\n", "import React, { useContext } from 'react';\nimport Dayjs from 'dayjs';\nimport calendar from 'dayjs/plugin/calendar';\nimport localizedFormat from 'dayjs/plugin/localizedFormat';\nimport type { PropsWithChildren } from 'react';\nimport type { TFunction } from 'i18next';\nimport type { TranslationLanguages } from 'stream-chat';\n\nimport { getDisplayName } from './utils/getDisplayName';\nimport { defaultDateTimeParser, defaultTranslatorFunction } from '../i18n/utils';\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: unknown): output is Date =>\n  output !== null &&\n  typeof output === 'object' &&\n  typeof (output as Date).getTime === 'function';\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 { useEffect, useMemo } from 'react';\nimport { FixedSizeQueueCache, MessageComposer } from 'stream-chat';\nimport { useThreadContext } from '../../Threads';\nimport {\n  useChannelStateContext,\n  useChatContext,\n  useMessageContext,\n} from '../../../context';\nimport { useLegacyThreadContext } from '../../Thread';\n\nconst queueCache = new FixedSizeQueueCache<string, MessageComposer>(64);\n\nexport const useMessageComposer = () => {\n  const { client } = useChatContext();\n  const { channel } = useChannelStateContext();\n  const { editing, message: editedMessage } = useMessageContext();\n  // legacy thread will receive new composer\n  const { legacyThread: parentMessage } = useLegacyThreadContext();\n  const threadInstance = useThreadContext();\n\n  const cachedEditedMessage = useMemo(() => {\n    if (!editedMessage) return undefined;\n\n    return editedMessage;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [editedMessage?.id]);\n\n  const cachedParentMessage = useMemo(() => {\n    if (!parentMessage) return undefined;\n\n    return parentMessage;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [parentMessage?.id]);\n\n  // composer hierarchy\n  // edited message (always new) -> thread instance (own) -> thread message (always new) -> channel (own)\n  // editedMessage ?? thread ?? parentMessage ?? channel;\n  const messageComposer = useMemo(() => {\n    if (editing && cachedEditedMessage) {\n      const tag = MessageComposer.constructTag(cachedEditedMessage);\n\n      const cachedComposer = queueCache.get(tag);\n      if (cachedComposer) return cachedComposer;\n\n      return new MessageComposer({\n        client,\n        composition: cachedEditedMessage,\n        compositionContext: cachedEditedMessage,\n      });\n    } else if (threadInstance) {\n      return threadInstance.messageComposer;\n    } else if (cachedParentMessage) {\n      const compositionContext = {\n        ...cachedParentMessage,\n        legacyThreadId: cachedParentMessage.id,\n      };\n\n      const tag = MessageComposer.constructTag(compositionContext);\n\n      const cachedComposer = queueCache.get(tag);\n      if (cachedComposer) return cachedComposer;\n\n      return new MessageComposer({\n        client,\n        compositionContext,\n      });\n    } else {\n      return channel.messageComposer;\n    }\n  }, [\n    cachedEditedMessage,\n    cachedParentMessage,\n    channel,\n    client,\n    editing,\n    threadInstance,\n  ]);\n\n  if (\n    (['legacy_thread', 'message'] as MessageComposer['contextType'][]).includes(\n      messageComposer.contextType,\n    ) &&\n    !queueCache.peek(messageComposer.tag)\n  ) {\n    queueCache.add(messageComposer.tag, messageComposer);\n  }\n\n  useEffect(() => {\n    const unsubscribe = messageComposer.registerSubscriptions();\n    return () => {\n      unsubscribe();\n    };\n  }, [messageComposer]);\n\n  return messageComposer;\n};\n", "import React, { createContext, useContext } from 'react';\n\nimport { Channel } from '../../components';\n\nimport type { PropsWithChildren } from 'react';\nimport type { Thread } from 'stream-chat';\n\nexport type ThreadContextValue = Thread | undefined;\n\nexport const ThreadContext = createContext<ThreadContextValue>(undefined);\n\nexport const useThreadContext = () => useContext(ThreadContext);\n\nexport const ThreadProvider = ({\n  children,\n  thread,\n}: PropsWithChildren<{ thread?: Thread }>) => (\n  <ThreadContext.Provider value={thread}>\n    <Channel channel={thread?.channel}>{children}</Channel>\n  </ThreadContext.Provider>\n);\n", "import React, { useContext, useEffect } from 'react';\nimport clsx from 'clsx';\n\nimport { MESSAGE_ACTIONS } from '../Message';\nimport type { MessageInputProps } from '../MessageInput';\nimport { MessageInput, MessageInputFlat } from '../MessageInput';\nimport type { MessageListProps, VirtualizedMessageListProps } from '../MessageList';\nimport { MessageList, VirtualizedMessageList } from '../MessageList';\nimport { ThreadHeader as DefaultThreadHeader } from './ThreadHeader';\nimport { ThreadHead as DefaultThreadHead } from '../Thread/ThreadHead';\n\nimport {\n  useChannelActionContext,\n  useChannelStateContext,\n  useChatContext,\n  useComponentContext,\n} from '../../context';\nimport { useThreadContext } from '../Threads';\nimport { useStateStore } from '../../store';\n\nimport type { MessageProps, MessageUIComponentProps } from '../Message/types';\nimport type { MessageActionsArray } from '../Message/utils';\nimport type { LocalMessage, ThreadState } from 'stream-chat';\n\nexport type ThreadProps = {\n  /** Additional props for `MessageInput` component: [available props](https://getstream.io/chat/docs/sdk/react/message-input-components/message_input/#props) */\n  additionalMessageInputProps?: MessageInputProps;\n  /** Additional props for `MessageList` component: [available props](https://getstream.io/chat/docs/sdk/react/core-components/message_list/#props) */\n  additionalMessageListProps?: MessageListProps;\n  /** Additional props for `Message` component of the parent message: [available props](https://getstream.io/chat/docs/sdk/react/message-components/message/#props) */\n  additionalParentMessageProps?: Partial<MessageProps>;\n  /** Additional props for `VirtualizedMessageList` component: [available props](https://getstream.io/chat/docs/sdk/react/core-components/virtualized_list/#props) */\n  additionalVirtualizedMessageListProps?: VirtualizedMessageListProps;\n  /** If true, focuses the `MessageInput` component on opening a thread */\n  autoFocus?: boolean;\n  /** Injects date separator components into `Thread`, defaults to `false`. To be passed to the underlying `MessageList` or `VirtualizedMessageList` components */\n  enableDateSeparator?: boolean;\n  /** Custom thread input UI component used to override the default `Input` value stored in `ComponentContext` or the [MessageInputSmall](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputSmall.tsx) default */\n  Input?: React.ComponentType;\n  /** Custom thread message UI component used to override the default `Message` value stored in `ComponentContext` */\n  Message?: React.ComponentType<MessageUIComponentProps>;\n  /** Array of allowed message actions (ex: ['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply']). To disable all actions, provide an empty array. */\n  messageActions?: MessageActionsArray;\n  /** If true, render the `VirtualizedMessageList` instead of the standard `MessageList` component */\n  virtualized?: boolean;\n};\n\nconst LegacyThreadContext = React.createContext<{\n  legacyThread: LocalMessage | undefined;\n}>({ legacyThread: undefined });\n\nexport const useLegacyThreadContext = () => useContext(LegacyThreadContext);\n\n/**\n * The Thread component renders a parent Message with a list of replies\n */\nexport const Thread = (props: ThreadProps) => {\n  const { channel, channelConfig, thread } = useChannelStateContext('Thread');\n  const threadInstance = useThreadContext();\n\n  if (!thread && !threadInstance) return null;\n  if (channelConfig?.replies === false) return null;\n\n  // the wrapper ensures a key variable is set and the component recreates on thread switch\n  return (\n    // FIXME: TS is having trouble here as at least one of the two would always be defined\n    <ThreadInner\n      {...props}\n      key={`thread-${(thread ?? threadInstance)?.id}-${channel?.cid}`}\n    />\n  );\n};\n\nconst selector = (nextValue: ThreadState) => ({\n  isLoadingNext: nextValue.pagination.isLoadingNext,\n  isLoadingPrev: nextValue.pagination.isLoadingPrev,\n  parentMessage: nextValue.parentMessage,\n  replies: nextValue.replies,\n});\n\nconst ThreadInner = (props: ThreadProps & { key: string }) => {\n  const {\n    additionalMessageInputProps,\n    additionalMessageListProps,\n    additionalParentMessageProps,\n    additionalVirtualizedMessageListProps,\n    autoFocus = true,\n    enableDateSeparator = false,\n    Input: PropInput,\n    Message: PropMessage,\n    messageActions = Object.keys(MESSAGE_ACTIONS),\n    virtualized,\n  } = props;\n\n  const threadInstance = useThreadContext();\n\n  const {\n    thread,\n    threadHasMore,\n    threadLoadingMore,\n    threadMessages = [],\n    threadSuppressAutoscroll,\n  } = useChannelStateContext('Thread');\n  const { closeThread, loadMoreThread } = useChannelActionContext('Thread');\n  const { customClasses } = useChatContext('Thread');\n  const {\n    Message: ContextMessage,\n    ThreadHead = DefaultThreadHead,\n    ThreadHeader = DefaultThreadHeader,\n    ThreadInput: ContextInput,\n    VirtualMessage,\n  } = useComponentContext('Thread');\n\n  const { isLoadingNext, isLoadingPrev, parentMessage, replies } =\n    useStateStore(threadInstance?.state, selector) ?? {};\n\n  const ThreadInput =\n    PropInput ?? additionalMessageInputProps?.Input ?? ContextInput ?? MessageInputFlat;\n\n  const ThreadMessage = PropMessage || additionalMessageListProps?.Message;\n  const FallbackMessage = virtualized && VirtualMessage ? VirtualMessage : ContextMessage;\n  const MessageUIComponent = ThreadMessage || FallbackMessage;\n\n  const ThreadMessageList = virtualized ? VirtualizedMessageList : MessageList;\n\n  useEffect(() => {\n    if (threadInstance) return;\n\n    if ((thread?.reply_count ?? 0) > 0) {\n      // FIXME: integrators can customize channel query options but cannot customize channel.getReplies() options\n      loadMoreThread();\n    }\n  }, [thread, loadMoreThread, threadInstance]);\n\n  const threadProps: Pick<\n    VirtualizedMessageListProps,\n    | 'hasMoreNewer'\n    | 'loadMoreNewer'\n    | 'loadingMoreNewer'\n    | 'hasMore'\n    | 'loadMore'\n    | 'loadingMore'\n    | 'messages'\n  > = threadInstance\n    ? {\n        loadingMore: isLoadingPrev,\n        loadingMoreNewer: isLoadingNext,\n        loadMore: threadInstance.loadPrevPage,\n        loadMoreNewer: threadInstance.loadNextPage,\n        messages: replies,\n      }\n    : {\n        hasMore: threadHasMore,\n        loadingMore: threadLoadingMore,\n        loadMore: loadMoreThread,\n        messages: threadMessages,\n      };\n\n  const messageAsThread = thread ?? parentMessage;\n\n  if (!messageAsThread) return null;\n\n  const threadClass =\n    customClasses?.thread ||\n    clsx('str-chat__thread-container str-chat__thread', {\n      'str-chat__thread--virtualized': virtualized,\n    });\n\n  const head = (\n    <ThreadHead\n      key={messageAsThread.id}\n      message={messageAsThread}\n      Message={MessageUIComponent}\n      {...additionalParentMessageProps}\n    />\n  );\n\n  return (\n    // Thread component needs a context which we can use for message composer\n    <LegacyThreadContext.Provider\n      value={{\n        legacyThread: thread ?? undefined,\n      }}\n    >\n      <div className={threadClass}>\n        <ThreadHeader closeThread={closeThread} thread={messageAsThread} />\n        <ThreadMessageList\n          disableDateSeparator={!enableDateSeparator}\n          head={head}\n          Message={MessageUIComponent}\n          messageActions={messageActions}\n          suppressAutoscroll={threadSuppressAutoscroll}\n          threadList\n          {...threadProps}\n          {...(virtualized\n            ? additionalVirtualizedMessageListProps\n            : additionalMessageListProps)}\n        />\n        <MessageInput\n          focus={autoFocus}\n          Input={ThreadInput}\n          isThreadInput\n          parent={thread ?? parentMessage}\n          {...additionalMessageInputProps}\n        />\n      </div>\n    </LegacyThreadContext.Provider>\n  );\n};\n", "import React, { createContext, useContext } from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport type { CooldownTimerState, MessageInputProps } from '../components/MessageInput';\nimport type { MessageInputHookProps } from '../components/MessageInput/hooks/useMessageInputControls';\n\nexport type MessageInputContextValue = MessageInputHookProps &\n  Omit<MessageInputProps, 'Input'> &\n  CooldownTimerState;\n\nexport const MessageInputContext = createContext<MessageInputHookProps | undefined>(\n  undefined,\n);\n\nexport const MessageInputContextProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: MessageInputContextValue;\n}>) => (\n  <MessageInputContext.Provider value={value as unknown as MessageInputContextValue}>\n    {children}\n  </MessageInputContext.Provider>\n);\n\nexport const useMessageInputContext = (\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  componentName?: string,\n) => {\n  const contextValue = useContext(MessageInputContext);\n\n  if (!contextValue) {\n    return {} as MessageInputContextValue;\n  }\n\n  return contextValue as unknown as MessageInputContextValue;\n};\n", "import mergeWith from 'lodash.mergewith';\nimport type {\n  Middleware,\n  SearchSourceOptions,\n  SearchSourceType,\n  TextComposerMiddlewareExecutorState,\n  TextComposerMiddlewareOptions,\n  TextComposerSuggestion,\n} from 'stream-chat';\nimport {\n  BaseSearchSource,\n  getTokenizedSuggestionDisplayName,\n  getTriggerCharWithToken,\n  insertItemWithTrigger,\n  replaceWordWithEntity,\n} from 'stream-chat';\nimport type {\n  EmojiSearchIndex,\n  EmojiSearchIndexResult,\n} from '../../../components/MessageInput';\n\nexport type EmojiSuggestion<T extends EmojiSearchIndexResult = EmojiSearchIndexResult> =\n  TextComposerSuggestion<T>;\n\nclass EmojiSearchSource<\n  T extends TextComposerSuggestion<EmojiSearchIndexResult>,\n> extends BaseSearchSource<T> {\n  readonly type: SearchSourceType = 'emoji';\n  private emojiSearchIndex: EmojiSearchIndex;\n\n  constructor(emojiSearchIndex: EmojiSearchIndex, options?: SearchSourceOptions) {\n    super(options);\n    this.emojiSearchIndex = emojiSearchIndex;\n  }\n\n  async query(searchQuery: string) {\n    if (searchQuery.length === 0) {\n      return { items: [] as T[], next: null };\n    }\n    const emojis = (await this.emojiSearchIndex.search(searchQuery)) ?? [];\n\n    // emojiIndex.search sometimes returns undefined values, so filter those out first\n    return {\n      items: emojis\n        .filter(Boolean)\n        .slice(0, 7)\n        .map(({ emoticons = [], id, name, native, skins = [] }) => {\n          const [firstSkin] = skins;\n\n          return {\n            emoticons,\n            id,\n            name,\n            native: native ?? firstSkin.native,\n          };\n        }) as T[],\n      next: null, // todo: generate cursor\n    };\n  }\n\n  protected filterQueryResults(items: T[]): T[] | Promise<T[]> {\n    return items.map((item) => ({\n      ...item,\n      ...getTokenizedSuggestionDisplayName({\n        displayName: item.id,\n        searchToken: this.searchQuery,\n      }),\n    }));\n  }\n}\n\nconst DEFAULT_OPTIONS: TextComposerMiddlewareOptions = { minChars: 1, trigger: ':' };\n\nexport type EmojiMiddleware<T extends EmojiSearchIndexResult = EmojiSearchIndexResult> =\n  Middleware<\n    TextComposerMiddlewareExecutorState<EmojiSuggestion<T>>,\n    'onChange' | 'onSuggestionItemSelect'\n  >;\n\n/**\n * TextComposer middleware for mentions\n * Usage:\n *\n *  const textComposer = new TextComposer(options);\n *\n *  textComposer.use(new createTextComposerEmojiMiddleware(emojiSearchIndex, {\n *   minChars: 2\n *  }));\n *\n * @param emojiSearchIndex\n * @param {{\n *     minChars: number;\n *     trigger: string;\n *   }} options\n * @returns\n */\nexport const createTextComposerEmojiMiddleware = (\n  emojiSearchIndex: EmojiSearchIndex,\n  options?: Partial<TextComposerMiddlewareOptions>,\n): EmojiMiddleware => {\n  const finalOptions = mergeWith(DEFAULT_OPTIONS, options ?? {});\n  const emojiSearchSource = new EmojiSearchSource(emojiSearchIndex);\n  emojiSearchSource.activate();\n\n  return {\n    id: 'stream-io/emoji-middleware',\n    // eslint-disable-next-line sort-keys\n    handlers: {\n      onChange: async ({ complete, forward, next, state }) => {\n        if (!state.selection) return forward();\n\n        const triggerWithToken = getTriggerCharWithToken({\n          acceptTrailingSpaces: false,\n          text: state.text.slice(0, state.selection.end),\n          trigger: finalOptions.trigger,\n        });\n\n        const triggerWasRemoved =\n          !triggerWithToken || triggerWithToken.length < finalOptions.minChars;\n\n        if (triggerWasRemoved) {\n          const hasSuggestionsForTrigger =\n            state.suggestions?.trigger === finalOptions.trigger;\n          const newState = { ...state };\n          if (hasSuggestionsForTrigger && newState.suggestions) {\n            delete newState.suggestions;\n          }\n          return next(newState);\n        }\n\n        const newSearchTriggerred =\n          triggerWithToken && triggerWithToken === finalOptions.trigger;\n\n        if (newSearchTriggerred) {\n          emojiSearchSource.resetStateAndActivate();\n        }\n\n        const textWithReplacedWord = await replaceWordWithEntity({\n          caretPosition: state.selection.end,\n          getEntityString: async (word: string) => {\n            const { items } = await emojiSearchSource.query(word);\n\n            const emoji = items\n              .filter(Boolean)\n              .slice(0, 10)\n              .find(({ emoticons }) => !!emoticons?.includes(word));\n\n            if (!emoji) return null;\n\n            const [firstSkin] = emoji.skins ?? [];\n\n            return emoji.native ?? firstSkin.native;\n          },\n          text: state.text,\n        });\n\n        if (textWithReplacedWord !== state.text) {\n          return complete({\n            ...state,\n            suggestions: undefined, // to prevent the TextComposerMiddlewareExecutor to run the first page query\n            text: textWithReplacedWord,\n          });\n        }\n\n        return complete({\n          ...state,\n          suggestions: {\n            query: triggerWithToken.slice(1),\n            searchSource: emojiSearchSource,\n            trigger: finalOptions.trigger,\n          },\n        });\n      },\n      onSuggestionItemSelect: ({ complete, forward, state }) => {\n        const { selectedSuggestion } = state.change ?? {};\n        if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)\n          return forward();\n\n        emojiSearchSource.resetStateAndActivate();\n        return complete({\n          ...state,\n          ...insertItemWithTrigger({\n            insertText: `${'native' in selectedSuggestion ? selectedSuggestion.native : ''} `,\n            selection: state.selection,\n            text: state.text,\n            trigger: finalOptions.trigger,\n          }),\n          suggestions: undefined, // Clear suggestions after selection\n        });\n      },\n    },\n  };\n};\n"],
+  "mappings": "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",
+  "names": ["import_react", "React", "import_react", "React", "import_react", "React", "import_react", "React", "import_react", "import_dayjs", "Dayjs", "Dayjs", "calendar", "localizedFormat", "React", "import_react", "import_react", "import_react", "React", "import_react", "React", "Picker", "import_stream_chat", "mergeWith"]
 }

package/dist/plugins/Emojis/middleware/textComposerEmojiMiddleware.d.ts

@@ -1,16 +1,7 @@
-import type { SearchSourceOptions, SearchSourceType, TextComposerMiddlewareOptions, TextComposerMiddlewareParams, TextComposerSuggestion } from 'stream-chat';
-import { BaseSearchSource } from 'stream-chat';
+import type { Middleware, TextComposerMiddlewareExecutorState, TextComposerMiddlewareOptions, TextComposerSuggestion } from 'stream-chat';
 import type { EmojiSearchIndex, EmojiSearchIndexResult } from '../../../components/MessageInput';
-declare class EmojiSearchSource<T extends TextComposerSuggestion<EmojiSearchIndexResult>> extends BaseSearchSource<T> {
-    readonly type: SearchSourceType;
-    private emojiSearchIndex;
-    constructor(emojiSearchIndex: EmojiSearchIndex, options?: SearchSourceOptions);
-    query(searchQuery: string): Promise<{
-        items: T[];
-        next: null;
-    }>;
-    protected filterQueryResults(items: T[]): T[] | Promise<T[]>;
-}
+export type EmojiSuggestion<T extends EmojiSearchIndexResult = EmojiSearchIndexResult> = TextComposerSuggestion<T>;
+export type EmojiMiddleware<T extends EmojiSearchIndexResult = EmojiSearchIndexResult> = Middleware<TextComposerMiddlewareExecutorState<EmojiSuggestion<T>>, 'onChange' | 'onSuggestionItemSelect'>;
 /**
  * TextComposer middleware for mentions
  * Usage:
@@ -28,39 +19,4 @@ declare class EmojiSearchSource<T extends TextComposerSuggestion<EmojiSearchInde
  *   }} options
  * @returns
  */
-export declare const createTextComposerEmojiMiddleware: <T extends EmojiSearchIndexResult = EmojiSearchIndexResult>(emojiSearchIndex: EmojiSearchIndex, options?: Partial<TextComposerMiddlewareOptions>) => {
-    id: string;
-    onChange: ({ input, nextHandler }: TextComposerMiddlewareParams<T>) => Promise<import("stream-chat").TextComposerMiddlewareValue | {
-        state: {
-            suggestions: undefined;
-            text: string;
-            mentionedUsers: import("stream-chat").UserResponse[];
-            selection: import("stream-chat").TextSelection;
-        };
-        stop: boolean;
-    } | {
-        state: {
-            suggestions: {
-                query: string;
-                searchSource: EmojiSearchSource<TextComposerSuggestion<EmojiSearchIndexResult>>;
-                trigger: any;
-            };
-            mentionedUsers: import("stream-chat").UserResponse[];
-            selection: import("stream-chat").TextSelection;
-            text: string;
-        };
-        stop: boolean;
-    }>;
-    onSuggestionItemSelect: ({ input, nextHandler, selectedSuggestion, }: TextComposerMiddlewareParams<T>) => Promise<import("stream-chat").TextComposerMiddlewareValue> | Promise<{
-        state: {
-            suggestions: undefined;
-            text: string;
-            selection: {
-                start: number;
-                end: number;
-            };
-            mentionedUsers: import("stream-chat").UserResponse[];
-        };
-    }>;
-};
-export {};
+export declare const createTextComposerEmojiMiddleware: (emojiSearchIndex: EmojiSearchIndex, options?: Partial<TextComposerMiddlewareOptions>) => EmojiMiddleware;

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

@@ -62,72 +62,66 @@ export const createTextComposerEmojiMiddleware = (emojiSearchIndex, options) =>
     emojiSearchSource.activate();
     return {
         id: 'stream-io/emoji-middleware',
-        onChange: async ({ input, nextHandler }) => {
-            const { state } = input;
-            if (!state.selection)
-                return nextHandler(input);
-            const triggerWithToken = getTriggerCharWithToken({
-                acceptTrailingSpaces: false,
-                text: state.text.slice(0, state.selection.end),
-                trigger: finalOptions.trigger,
-            });
-            const triggerWasRemoved = !triggerWithToken || triggerWithToken.length < finalOptions.minChars;
-            if (triggerWasRemoved) {
-                const hasSuggestionsForTrigger = input.state.suggestions?.trigger === finalOptions.trigger;
-                const newInput = { ...input };
-                if (hasSuggestionsForTrigger && newInput.state.suggestions) {
-                    delete newInput.state.suggestions;
+        // eslint-disable-next-line sort-keys
+        handlers: {
+            onChange: async ({ complete, forward, next, state }) => {
+                if (!state.selection)
+                    return forward();
+                const triggerWithToken = getTriggerCharWithToken({
+                    acceptTrailingSpaces: false,
+                    text: state.text.slice(0, state.selection.end),
+                    trigger: finalOptions.trigger,
+                });
+                const triggerWasRemoved = !triggerWithToken || triggerWithToken.length < finalOptions.minChars;
+                if (triggerWasRemoved) {
+                    const hasSuggestionsForTrigger = state.suggestions?.trigger === finalOptions.trigger;
+                    const newState = { ...state };
+                    if (hasSuggestionsForTrigger && newState.suggestions) {
+                        delete newState.suggestions;
+                    }
+                    return next(newState);
                 }
-                return nextHandler(newInput);
-            }
-            const newSearchTriggerred = triggerWithToken && triggerWithToken === finalOptions.trigger;
-            if (newSearchTriggerred) {
-                emojiSearchSource.resetStateAndActivate();
-            }
-            const textWithReplacedWord = await replaceWordWithEntity({
-                caretPosition: state.selection.end,
-                getEntityString: async (word) => {
-                    const { items } = await emojiSearchSource.query(word);
-                    const emoji = items
-                        .filter(Boolean)
-                        .slice(0, 10)
-                        .find(({ emoticons }) => !!emoticons?.includes(word));
-                    if (!emoji)
-                        return null;
-                    const [firstSkin] = emoji.skins ?? [];
-                    return emoji.native ?? firstSkin.native;
-                },
-                text: state.text,
-            });
-            if (textWithReplacedWord !== state.text) {
-                return {
-                    state: {
+                const newSearchTriggerred = triggerWithToken && triggerWithToken === finalOptions.trigger;
+                if (newSearchTriggerred) {
+                    emojiSearchSource.resetStateAndActivate();
+                }
+                const textWithReplacedWord = await replaceWordWithEntity({
+                    caretPosition: state.selection.end,
+                    getEntityString: async (word) => {
+                        const { items } = await emojiSearchSource.query(word);
+                        const emoji = items
+                            .filter(Boolean)
+                            .slice(0, 10)
+                            .find(({ emoticons }) => !!emoticons?.includes(word));
+                        if (!emoji)
+                            return null;
+                        const [firstSkin] = emoji.skins ?? [];
+                        return emoji.native ?? firstSkin.native;
+                    },
+                    text: state.text,
+                });
+                if (textWithReplacedWord !== state.text) {
+                    return complete({
                         ...state,
                         suggestions: undefined, // to prevent the TextComposerMiddlewareExecutor to run the first page query
                         text: textWithReplacedWord,
-                    },
-                    stop: true, // Stop other middleware from processing '@' character
-                };
-            }
-            return {
-                state: {
+                    });
+                }
+                return complete({
                     ...state,
                     suggestions: {
                         query: triggerWithToken.slice(1),
                         searchSource: emojiSearchSource,
                         trigger: finalOptions.trigger,
                     },
-                },
-                stop: true, // Stop other middleware from processing '@' character
-            };
-        },
-        onSuggestionItemSelect: ({ input, nextHandler, selectedSuggestion, }) => {
-            const { state } = input;
-            if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
-                return nextHandler(input);
-            emojiSearchSource.resetStateAndActivate();
-            return Promise.resolve({
-                state: {
+                });
+            },
+            onSuggestionItemSelect: ({ complete, forward, state }) => {
+                const { selectedSuggestion } = state.change ?? {};
+                if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
+                    return forward();
+                emojiSearchSource.resetStateAndActivate();
+                return complete({
                     ...state,
                     ...insertItemWithTrigger({
                         insertText: `${'native' in selectedSuggestion ? selectedSuggestion.native : ''} `,
@@ -136,8 +130,8 @@ export const createTextComposerEmojiMiddleware = (emojiSearchIndex, options) =>
                         trigger: finalOptions.trigger,
                     }),
                     suggestions: undefined, // Clear suggestions after selection
-                },
-            });
+                });
+            },
         },
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "13.0.0-rc.1",
+  "version": "13.0.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -145,7 +145,7 @@
     "emoji-mart": "^5.4.0",
     "react": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.14.0",
     "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.14.0",
-    "stream-chat": "^9.0.0-rc.13"
+    "stream-chat": "^9.0.0"
   },
   "peerDependenciesMeta": {
     "@breezystack/lamejs": {
@@ -239,7 +239,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "semantic-release": "^24.2.3",
-    "stream-chat": "^9.0.0-rc.13",
+    "stream-chat": "^9.0.0",
     "ts-jest": "^29.2.5",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.17.0"

package/dist/components/MessageInput/hooks/useMessageInputText.js

@@ -1,44 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useMessageComposer } from './useMessageComposer';
-import { useStateStore } from '../../../store';
-const messageComposerStateSelector = (state) => ({
-    text: state.text,
-});
-export const useMessageInputText = (props) => {
-    const { focus } = props;
-    const messageComposer = useMessageComposer();
-    const textareaRef = useRef(undefined);
-    const { text } = useStateStore(messageComposer.textComposer.state, messageComposerStateSelector);
-    // Focus
-    useEffect(() => {
-        if (focus && textareaRef.current) {
-            textareaRef.current.focus();
-        }
-    }, [focus]);
-    // Text + cursor position
-    const newCursorPosition = useRef(undefined);
-    const insertText = useCallback((textToInsert) => {
-        const selection = textareaRef?.current && {
-            end: textareaRef.current.selectionEnd,
-            start: textareaRef.current.selectionStart,
-        };
-        messageComposer.textComposer.insertText({
-            selection,
-            text: textToInsert,
-        });
-        if (selection)
-            newCursorPosition.current = selection.start + textToInsert.length;
-    }, [messageComposer, newCursorPosition, textareaRef]);
-    useEffect(() => {
-        const textareaElement = textareaRef.current;
-        if (textareaElement && newCursorPosition.current !== undefined) {
-            textareaElement.selectionStart = newCursorPosition.current;
-            textareaElement.selectionEnd = newCursorPosition.current;
-            newCursorPosition.current = undefined;
-        }
-    }, [text, newCursorPosition]);
-    return {
-        insertText,
-        textareaRef,
-    };
-};