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

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

@@ -31,7 +31,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var Emojis_exports = {};
 __export(Emojis_exports, {
   EmojiPicker: () => EmojiPicker,
-  EmojiPickerIcon: () => EmojiPickerIcon
+  EmojiPickerIcon: () => EmojiPickerIcon,
+  createTextComposerEmojiMiddleware: () => createTextComposerEmojiMiddleware
 });
 module.exports = __toCommonJS(Emojis_exports);
 
@@ -72,13 +73,12 @@ var useTranslationContext = (componentName) => {
 
 // src/context/MessageInputContext.tsx
 var import_react2 = __toESM(require("react"));
-var MessageInputContext = (0, import_react2.createContext)(void 0);
+var MessageInputContext = (0, import_react2.createContext)(
+  void 0
+);
 var useMessageInputContext = (componentName) => {
   const contextValue = (0, import_react2.useContext)(MessageInputContext);
   if (!contextValue) {
-    console.warn(
-      `The useMessageInputContext hook was called outside of the MessageInputContext provider. Make sure this hook is called within the MessageInput's UI component. The errored call is located in the ${componentName} component.`
-    );
     return {};
   }
   return contextValue;
@@ -166,4 +166,132 @@ var EmojiPicker = (props) => {
     ButtonIconComponent && /* @__PURE__ */ import_react4.default.createElement(ButtonIconComponent, null)
   ));
 };
+
+// src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts
+var import_lodash = __toESM(require("lodash.mergewith"));
+var import_stream_chat = require("stream-chat");
+var EmojiSearchSource = class extends import_stream_chat.BaseSearchSource {
+  constructor(emojiSearchIndex, options) {
+    super(options);
+    this.type = "emoji";
+    this.emojiSearchIndex = emojiSearchIndex;
+  }
+  async query(searchQuery) {
+    if (searchQuery.length === 0) {
+      return { items: [], next: null };
+    }
+    const emojis = await this.emojiSearchIndex.search(searchQuery) ?? [];
+    return {
+      items: emojis.filter(Boolean).slice(0, 7).map(({ emoticons = [], id, name, native, skins = [] }) => {
+        const [firstSkin] = skins;
+        return {
+          emoticons,
+          id,
+          name,
+          native: native ?? firstSkin.native
+        };
+      }),
+      next: null
+      // todo: generate cursor
+    };
+  }
+  filterQueryResults(items) {
+    return items.map((item) => ({
+      ...item,
+      ...(0, import_stream_chat.getTokenizedSuggestionDisplayName)({
+        displayName: item.id,
+        searchToken: this.searchQuery
+      })
+    }));
+  }
+};
+var DEFAULT_OPTIONS = { minChars: 1, trigger: ":" };
+var createTextComposerEmojiMiddleware = (emojiSearchIndex, options) => {
+  const finalOptions = (0, import_lodash.default)(DEFAULT_OPTIONS, options ?? {});
+  const emojiSearchSource = new EmojiSearchSource(emojiSearchIndex);
+  emojiSearchSource.activate();
+  return {
+    id: "stream-io/emoji-middleware",
+    onChange: async ({ input, nextHandler }) => {
+      const { state } = input;
+      if (!state.selection) return nextHandler(input);
+      const triggerWithToken = (0, import_stream_chat.getTriggerCharWithToken)({
+        acceptTrailingSpaces: false,
+        text: state.text.slice(0, state.selection.end),
+        trigger: finalOptions.trigger
+      });
+      const triggerWasRemoved = !triggerWithToken || triggerWithToken.length < finalOptions.minChars;
+      if (triggerWasRemoved) {
+        const hasSuggestionsForTrigger = input.state.suggestions?.trigger === finalOptions.trigger;
+        const newInput = { ...input };
+        if (hasSuggestionsForTrigger && newInput.state.suggestions) {
+          delete newInput.state.suggestions;
+        }
+        return nextHandler(newInput);
+      }
+      const newSearchTriggerred = triggerWithToken && triggerWithToken === finalOptions.trigger;
+      if (newSearchTriggerred) {
+        emojiSearchSource.resetStateAndActivate();
+      }
+      const textWithReplacedWord = await (0, import_stream_chat.replaceWordWithEntity)({
+        caretPosition: state.selection.end,
+        getEntityString: async (word) => {
+          const { items } = await emojiSearchSource.query(word);
+          const emoji = items.filter(Boolean).slice(0, 10).find(({ emoticons }) => !!emoticons?.includes(word));
+          if (!emoji) return null;
+          const [firstSkin] = emoji.skins ?? [];
+          return emoji.native ?? firstSkin.native;
+        },
+        text: state.text
+      });
+      if (textWithReplacedWord !== state.text) {
+        return {
+          state: {
+            ...state,
+            suggestions: void 0,
+            // to prevent the TextComposerMiddlewareExecutor to run the first page query
+            text: textWithReplacedWord
+          },
+          stop: true
+          // Stop other middleware from processing '@' character
+        };
+      }
+      return {
+        state: {
+          ...state,
+          suggestions: {
+            query: triggerWithToken.slice(1),
+            searchSource: emojiSearchSource,
+            trigger: finalOptions.trigger
+          }
+        },
+        stop: true
+        // Stop other middleware from processing '@' character
+      };
+    },
+    onSuggestionItemSelect: ({
+      input,
+      nextHandler,
+      selectedSuggestion
+    }) => {
+      const { state } = input;
+      if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
+        return nextHandler(input);
+      emojiSearchSource.resetStateAndActivate();
+      return Promise.resolve({
+        state: {
+          ...state,
+          ...(0, import_stream_chat.insertItemWithTrigger)({
+            insertText: `${"native" in selectedSuggestion ? selectedSuggestion.native : ""} `,
+            selection: state.selection,
+            text: state.text,
+            trigger: finalOptions.trigger
+          }),
+          suggestions: void 0
+          // Clear suggestions after selection
+        }
+      });
+    }
+  };
+};
 //# sourceMappingURL=index.browser.cjs.map

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", "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"]
+  "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"]
 }

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

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

package/dist/plugins/Emojis/index.js

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

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

@@ -31,7 +31,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var Emojis_exports = {};
 __export(Emojis_exports, {
   EmojiPicker: () => EmojiPicker,
-  EmojiPickerIcon: () => EmojiPickerIcon
+  EmojiPickerIcon: () => EmojiPickerIcon,
+  createTextComposerEmojiMiddleware: () => createTextComposerEmojiMiddleware
 });
 module.exports = __toCommonJS(Emojis_exports);
 
@@ -72,13 +73,12 @@ var useTranslationContext = (componentName) => {
 
 // src/context/MessageInputContext.tsx
 var import_react2 = __toESM(require("react"));
-var MessageInputContext = (0, import_react2.createContext)(void 0);
+var MessageInputContext = (0, import_react2.createContext)(
+  void 0
+);
 var useMessageInputContext = (componentName) => {
   const contextValue = (0, import_react2.useContext)(MessageInputContext);
   if (!contextValue) {
-    console.warn(
-      `The useMessageInputContext hook was called outside of the MessageInputContext provider. Make sure this hook is called within the MessageInput's UI component. The errored call is located in the ${componentName} component.`
-    );
     return {};
   }
   return contextValue;
@@ -166,9 +166,138 @@ var EmojiPicker = (props) => {
     ButtonIconComponent && /* @__PURE__ */ import_react4.default.createElement(ButtonIconComponent, null)
   ));
 };
+
+// src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts
+var import_lodash = __toESM(require("lodash.mergewith"));
+var import_stream_chat = require("stream-chat");
+var EmojiSearchSource = class extends import_stream_chat.BaseSearchSource {
+  constructor(emojiSearchIndex, options) {
+    super(options);
+    this.type = "emoji";
+    this.emojiSearchIndex = emojiSearchIndex;
+  }
+  async query(searchQuery) {
+    if (searchQuery.length === 0) {
+      return { items: [], next: null };
+    }
+    const emojis = await this.emojiSearchIndex.search(searchQuery) ?? [];
+    return {
+      items: emojis.filter(Boolean).slice(0, 7).map(({ emoticons = [], id, name, native, skins = [] }) => {
+        const [firstSkin] = skins;
+        return {
+          emoticons,
+          id,
+          name,
+          native: native ?? firstSkin.native
+        };
+      }),
+      next: null
+      // todo: generate cursor
+    };
+  }
+  filterQueryResults(items) {
+    return items.map((item) => ({
+      ...item,
+      ...(0, import_stream_chat.getTokenizedSuggestionDisplayName)({
+        displayName: item.id,
+        searchToken: this.searchQuery
+      })
+    }));
+  }
+};
+var DEFAULT_OPTIONS = { minChars: 1, trigger: ":" };
+var createTextComposerEmojiMiddleware = (emojiSearchIndex, options) => {
+  const finalOptions = (0, import_lodash.default)(DEFAULT_OPTIONS, options ?? {});
+  const emojiSearchSource = new EmojiSearchSource(emojiSearchIndex);
+  emojiSearchSource.activate();
+  return {
+    id: "stream-io/emoji-middleware",
+    onChange: async ({ input, nextHandler }) => {
+      const { state } = input;
+      if (!state.selection) return nextHandler(input);
+      const triggerWithToken = (0, import_stream_chat.getTriggerCharWithToken)({
+        acceptTrailingSpaces: false,
+        text: state.text.slice(0, state.selection.end),
+        trigger: finalOptions.trigger
+      });
+      const triggerWasRemoved = !triggerWithToken || triggerWithToken.length < finalOptions.minChars;
+      if (triggerWasRemoved) {
+        const hasSuggestionsForTrigger = input.state.suggestions?.trigger === finalOptions.trigger;
+        const newInput = { ...input };
+        if (hasSuggestionsForTrigger && newInput.state.suggestions) {
+          delete newInput.state.suggestions;
+        }
+        return nextHandler(newInput);
+      }
+      const newSearchTriggerred = triggerWithToken && triggerWithToken === finalOptions.trigger;
+      if (newSearchTriggerred) {
+        emojiSearchSource.resetStateAndActivate();
+      }
+      const textWithReplacedWord = await (0, import_stream_chat.replaceWordWithEntity)({
+        caretPosition: state.selection.end,
+        getEntityString: async (word) => {
+          const { items } = await emojiSearchSource.query(word);
+          const emoji = items.filter(Boolean).slice(0, 10).find(({ emoticons }) => !!emoticons?.includes(word));
+          if (!emoji) return null;
+          const [firstSkin] = emoji.skins ?? [];
+          return emoji.native ?? firstSkin.native;
+        },
+        text: state.text
+      });
+      if (textWithReplacedWord !== state.text) {
+        return {
+          state: {
+            ...state,
+            suggestions: void 0,
+            // to prevent the TextComposerMiddlewareExecutor to run the first page query
+            text: textWithReplacedWord
+          },
+          stop: true
+          // Stop other middleware from processing '@' character
+        };
+      }
+      return {
+        state: {
+          ...state,
+          suggestions: {
+            query: triggerWithToken.slice(1),
+            searchSource: emojiSearchSource,
+            trigger: finalOptions.trigger
+          }
+        },
+        stop: true
+        // Stop other middleware from processing '@' character
+      };
+    },
+    onSuggestionItemSelect: ({
+      input,
+      nextHandler,
+      selectedSuggestion
+    }) => {
+      const { state } = input;
+      if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
+        return nextHandler(input);
+      emojiSearchSource.resetStateAndActivate();
+      return Promise.resolve({
+        state: {
+          ...state,
+          ...(0, import_stream_chat.insertItemWithTrigger)({
+            insertText: `${"native" in selectedSuggestion ? selectedSuggestion.native : ""} `,
+            selection: state.selection,
+            text: state.text,
+            trigger: finalOptions.trigger
+          }),
+          suggestions: void 0
+          // Clear suggestions after selection
+        }
+      });
+    }
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   EmojiPicker,
-  EmojiPickerIcon
+  EmojiPickerIcon,
+  createTextComposerEmojiMiddleware
 });
 //# sourceMappingURL=index.node.cjs.map

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", "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"]
+  "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"]
 }

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

@@ -0,0 +1 @@
+export * from './textComposerEmojiMiddleware';

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

@@ -0,0 +1 @@
+export * from './textComposerEmojiMiddleware';

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

@@ -0,0 +1,66 @@
+import type { SearchSourceOptions, SearchSourceType, TextComposerMiddlewareOptions, TextComposerMiddlewareParams, TextComposerSuggestion } from 'stream-chat';
+import { BaseSearchSource } 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[]>;
+}
+/**
+ * TextComposer middleware for mentions
+ * Usage:
+ *
+ *  const textComposer = new TextComposer(options);
+ *
+ *  textComposer.use(new createTextComposerEmojiMiddleware(emojiSearchIndex, {
+ *   minChars: 2
+ *  }));
+ *
+ * @param emojiSearchIndex
+ * @param {{
+ *     minChars: number;
+ *     trigger: string;
+ *   }} options
+ * @returns
+ */
+export 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 {};