stream-chat-react 14.6.0 → 14.7.0

package/dist/es/emojis.mjs

@@ -1,5 +1,5 @@
-import { R as usePopoverPosition, Ut as IconEmoji, Zn as Button, ur as useTranslationContext } from "./useNotificationApi.fa5cddf9.mjs";
-import { a as useMessageComposerContext, n as useIsCooldownActive, t as useMessageComposerController } from "./useMessageComposerController.29f189b4.mjs";
+import { R as usePopoverPosition, Ut as IconEmoji, Zn as Button, ur as useTranslationContext } from "./useNotificationApi.eff88f29.mjs";
+import { a as useMessageComposerContext, n as useIsCooldownActive, t as useMessageComposerController } from "./useMessageComposerController.2309f433.mjs";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BaseSearchSource, getTokenizedSuggestionDisplayName, getTriggerCharWithToken, insertItemWithTrigger, replaceWordWithEntity } from "stream-chat";

package/dist/es/emojis.mjs.map

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

package/dist/es/index.mjs

@@ -1,6 +1,6 @@
-import { $ as isMessageErrorRetryable, $n as addNotificationTargetTag, $r as useChannelActionContext, $t as IconGiphy, A as WithAudioPlayback, An as IconSend, Ar as useDialogIsOpen, At as IconCamera, B as MESSAGE_ACTIONS, Bn as IconUserAdd, Br as ComponentProvider, Bt as IconDelete, C as insertIntro, Cn as IconPoll, Cr as useModalDialogManager, Ct as IconAttachment, D as makeDateMessageId, Dn as IconReply, Dr as Portal, Dt as IconBolt, E as isLocalMessage, En as IconReorder, Er as DialogPortalEntry, Et as IconBellOff, F as elementIsPlaying, Fn as IconTrophy, Fr as useModalDialogIsTopmost, Ft as IconChevronLeft, G as getImages, Gn as IconVideoFill, Gr as ChannelStateContext, Gt as IconExclamationCircleFill, H as areMessagePropsEqual, Hn as IconUserRemove, Hr as ChatContext, Ht as IconEdit, I as LegacyThreadContext, In as IconUnpin, Ir as useOpenedDialogCount, It as IconChevronRight, J as getReadByTooltipText, Jn as IconXmark, Jr as ChannelListContext, Jt as IconExclamationTriangleFill, K as getMessageActions, Kn as IconVoice, Kr as ChannelStateProvider, Kt as IconExclamationMark, L as useLegacyThreadContext, Ln as IconUnsupportedAttachment, Lr as useStateStore, Lt as IconClock, M as useAudioPlayer, Mn as IconThread, Mr as useDialogOnNearestManager, Mt as IconCheckmark1Small, N as AudioPlayer, Nn as IconThreadFill, Nr as useModalDialog, Nt as IconChecks, O as makeIntroMessage, On as IconRetry, Or as modalDialogId, Ot as IconBookmark, P as defaultRegisterAudioPlayerError, Pn as IconTranslate, Pr as useModalDialogIsOpen, Pt as IconChevronDown, Q as isMessageEdited, Qn as useStableId, Qr as ChannelActionProvider, Qt as IconFolder, R as usePopoverPosition, Rn as IconUpload, Rr as DialogManager, Rt as IconCommand, S as hasMoreMessagesProbably, Sn as IconPlusSmall, Sr as useDialogManager, St as IconArrowUpRight, T as isIntroMessage, Tn as IconRefresh, Tr as DialogPortalDestination, Tt as IconBell, U as areMessageUIPropsEqual, Un as IconUsers, Ur as ChatProvider, Ut as IconEmoji, V as OPTIONAL_MESSAGE_ACTIONS, Vn as IconUserCheck, Vr as useComponentContext, Vt as IconDownload, W as countEmojis, Wn as IconVideo, Wr as useChatContext, Wt as IconEmojiAdd, X as isMessageBounced, Xn as createIcon, Xr as useChannelListContext, Xt as IconFile, Y as isMessageBlocked, Yn as IconXmarkSmall, Yr as ChannelListContextProvider, Yt as IconEyeFill, Z as isMessageDeleted, Zn as Button, Zr as ChannelActionContext, Zt as IconFlag, _ as Channel, _n as IconNotification, _r as isNumberOrString, _t as IconArchive, a as ChatView, an as IconLocation, ar as TypingContext, at as messageHasQuotedMessage, b as getIsFirstUnreadMessage, bn as IconPlayFill, br as ModalDialogManagerProvider, bt as IconArrowLeft, c as ChatViewSelectorButton, cn as IconMessageBubble, cr as TranslationContext, ct as messageTextHasEmojisOnly, d as useActiveThread, dn as IconMicrophoneSolid, dr as defaultDateTimeParser, dt as CHANNEL_CONTAINER_ID, en as IconImage, er as getNotificationTargetPanel, et as isNetworkSendFailure, f as useChatViewContext, fn as IconMinus, fr as defaultTranslatorFunction, ft as LoadingErrorIndicator, g as useThreadContext, gn as IconNoSign, gr as isLanguageSupported, gt as EmptyStateIndicator, h as ThreadProvider, hn as IconMute, hr as isDayOrMoment, ht as useEditMessageHandler, i as useNotificationTarget, in as IconLoading, ir as isNotificationTargetPanel, it as messageHasGiphyAttachment, j as useActiveAudioPlayer, jn as IconShield, jr as useDialogIsTopmost, jt as IconCheckmark, k as processMessages, kn as IconSearch, kr as useDialog, kt as IconBookmarkRemove, l as ChatViewThreadsSelectorButton, ln as IconMessageBubbleFill, lr as TranslationProvider, lt as validateAndGetMessage, m as ThreadContext, mn as IconMore, mr as isDate, mt as useMentionsHandlers, n as hasSystemNotificationTag, nn as IconLeave, nr as getNotificationTargetTag, nt as mapToUserNameOrId, o as ChatViewChannelsSelectorButton, on as IconMegaphone, or as TypingProvider, ot as messageHasReactions, p as useThreadsViewContext, pn as IconMinusCircle, pr as getDateString, pt as LoadingChannel, q as getNonImageAttachments, qn as IconXCircle, qr as useChannelStateContext, qt as IconExclamationMarkFill, r as useNotificationApi, rn as IconLink, rr as isNotificationForPanel, rt as messageHasAttachments, s as ChatViewContext, sn as IconMenu, sr as useTypingContext, st as messageHasSingleAttachment, t as SYSTEM_NOTIFICATION_TAG, tn as IconInfo, tr as getNotificationTargetPanels, tt as isUserMuted, u as defaultChatViewSelectorItemSet, un as IconMessageBubbles, ur as useTranslationContext, ut as EMOJI_REGEX, v as getChannel, vn as IconPauseFill, vr as predefinedFormatters, vt as IconArrowDown, w as isDateSeparatorMessage, wn as IconQuote, wr as useNearestDialogManagerContext, wt as IconAudio, x as getLastReceived, xn as IconPlus, xr as modalDialogManagerId, xt as IconArrowUp, y as getGroupStyles, yn as IconPin, yr as DialogManagerProvider, yt as IconArrowDownCircle, z as ACTIONS_NOT_WORKING_IN_THREAD, zn as IconUser, zr as ComponentContext, zt as IconCopy } from "./useNotificationApi.fa5cddf9.mjs";
-import { $ as ContextMenuBackButton, A as GalleryUI, At as MessageTranslationViewContext, B as FileIcon, C as Checkmark, Ct as LoadingIndicator, D as SwitchFieldLabel, Dt as ModalContext, E as SwitchFieldDescription, Et as useNotificationConfigurationContext, F as useGalleryContext, Ft as MessageProvider, G as Timestamp, H as FILE_ICON_NO_LABEL_CLASSNAME, I as toBaseImageDescriptors, It as useMessageContext, J as htmlToTextPlugin, K as plusPlusToEmphasis, L as BaseImage, M as VideoPlayer, Mt as getTranslatedMessageText, N as GalleryContext, Nt as useMessageTranslationViewContext, O as SwitchFieldTitle, Ot as ModalContextProvider, P as toGalleryItemDescriptors, Pt as MessageContext, Q as ContextMenu, R as ImagePlaceholder, S as Checkbox, St as FileSizeIndicator, T as SwitchField, Tt as NotificationConfigurationProvider, U as DownloadButton, V as FILE_ICON_GRAPHIC_CLASSNAME, W as MessageTimestamp, X as Prompt, Y as GlobalModal, Z as BaseContextMenuButton, _ as getLatestMessagePreview, _t as Alert, a as pickNewest, at as DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR, b as ListItemLayoutContent, bt as useAriaIdentifiers, c as useIsUserMuted, ct as useContextMenuContext, d as useSelectedChannelState, dt as ChannelAvatar, et as ContextMenuBody, f as isDmChannel, ft as Badge, g as getGroupChannelDisplayInfo, gt as useDialogAnchor, h as getChannelDisplayImage, ht as DialogAnchor, i as createDefaultPickNext, it as ContextMenuRoot, j as VideoThumbnail, jt as MessageTranslationViewProvider, k as Gallery, kt as useModalContext, l as useIsChannelMuted, lt as createRovingFocusKeyDownHandler, m as useChannelDisplayName, mt as Avatar, nt as ContextMenuContent, o as pickOldest, ot as EmojiContextMenuButton, p as useChannelPreviewInfo, pt as ErrorBadge, q as imageToLink, r as NotificationList, rt as ContextMenuHeader, s as Notification, st as UserContextMenuButton, t as useChannelHeaderOnlineStatus, tt as ContextMenuButton, u as useChannelMembershipState, ut as GroupAvatar, v as renderPreviewText, vt as Header, w as Switch, wt as useNotifications, x as TextInput, xt as useStableCallback, y as ListItemLayout, yt as Root, z as formatTime } from "./useChannelHeaderOnlineStatus.c5215b13.mjs";
-import { a as useMessageComposerContext, i as MessageComposerContextProvider, n as useIsCooldownActive, r as MessageComposerContext, t as useMessageComposerController } from "./useMessageComposerController.29f189b4.mjs";
+import { $ as isMessageErrorRetryable, $n as addNotificationTargetTag, $r as useChannelActionContext, $t as IconGiphy, A as WithAudioPlayback, An as IconSend, Ar as useDialogIsOpen, At as IconCamera, B as MESSAGE_ACTIONS, Bn as IconUserAdd, Br as ComponentProvider, Bt as IconDelete, C as insertIntro, Cn as IconPoll, Cr as useModalDialogManager, Ct as IconAttachment, D as makeDateMessageId, Dn as IconReply, Dr as Portal, Dt as IconBolt, E as isLocalMessage, En as IconReorder, Er as DialogPortalEntry, Et as IconBellOff, F as elementIsPlaying, Fn as IconTrophy, Fr as useModalDialogIsTopmost, Ft as IconChevronLeft, G as getImages, Gn as IconVideoFill, Gr as ChannelStateContext, Gt as IconExclamationCircleFill, H as areMessagePropsEqual, Hn as IconUserRemove, Hr as ChatContext, Ht as IconEdit, I as LegacyThreadContext, In as IconUnpin, Ir as useOpenedDialogCount, It as IconChevronRight, J as getReadByTooltipText, Jn as IconXmark, Jr as ChannelListContext, Jt as IconExclamationTriangleFill, K as getMessageActions, Kn as IconVoice, Kr as ChannelStateProvider, Kt as IconExclamationMark, L as useLegacyThreadContext, Ln as IconUnsupportedAttachment, Lr as useStateStore, Lt as IconClock, M as useAudioPlayer, Mn as IconThread, Mr as useDialogOnNearestManager, Mt as IconCheckmark1Small, N as AudioPlayer, Nn as IconThreadFill, Nr as useModalDialog, Nt as IconChecks, O as makeIntroMessage, On as IconRetry, Or as modalDialogId, Ot as IconBookmark, P as defaultRegisterAudioPlayerError, Pn as IconTranslate, Pr as useModalDialogIsOpen, Pt as IconChevronDown, Q as isMessageEdited, Qn as useStableId, Qr as ChannelActionProvider, Qt as IconFolder, R as usePopoverPosition, Rn as IconUpload, Rr as DialogManager, Rt as IconCommand, S as hasMoreMessagesProbably, Sn as IconPlusSmall, Sr as useDialogManager, St as IconArrowUpRight, T as isIntroMessage, Tn as IconRefresh, Tr as DialogPortalDestination, Tt as IconBell, U as areMessageUIPropsEqual, Un as IconUsers, Ur as ChatProvider, Ut as IconEmoji, V as OPTIONAL_MESSAGE_ACTIONS, Vn as IconUserCheck, Vr as useComponentContext, Vt as IconDownload, W as countEmojis, Wn as IconVideo, Wr as useChatContext, Wt as IconEmojiAdd, X as isMessageBounced, Xn as createIcon, Xr as useChannelListContext, Xt as IconFile, Y as isMessageBlocked, Yn as IconXmarkSmall, Yr as ChannelListContextProvider, Yt as IconEyeFill, Z as isMessageDeleted, Zn as Button, Zr as ChannelActionContext, Zt as IconFlag, _ as Channel, _n as IconNotification, _r as isNumberOrString, _t as IconArchive, a as ChatView, an as IconLocation, ar as TypingContext, at as messageHasQuotedMessage, b as getIsFirstUnreadMessage, bn as IconPlayFill, br as ModalDialogManagerProvider, bt as IconArrowLeft, c as ChatViewSelectorButton, cn as IconMessageBubble, cr as TranslationContext, ct as messageTextHasEmojisOnly, d as useActiveThread, dn as IconMicrophoneSolid, dr as defaultDateTimeParser, dt as CHANNEL_CONTAINER_ID, en as IconImage, er as getNotificationTargetPanel, et as isNetworkSendFailure, f as useChatViewContext, fn as IconMinus, fr as defaultTranslatorFunction, ft as LoadingErrorIndicator, g as useThreadContext, gn as IconNoSign, gr as isLanguageSupported, gt as EmptyStateIndicator, h as ThreadProvider, hn as IconMute, hr as isDayOrMoment, ht as useEditMessageHandler, i as useNotificationTarget, in as IconLoading, ir as isNotificationTargetPanel, it as messageHasGiphyAttachment, j as useActiveAudioPlayer, jn as IconShield, jr as useDialogIsTopmost, jt as IconCheckmark, k as processMessages, kn as IconSearch, kr as useDialog, kt as IconBookmarkRemove, l as ChatViewThreadsSelectorButton, ln as IconMessageBubbleFill, lr as TranslationProvider, lt as validateAndGetMessage, m as ThreadContext, mn as IconMore, mr as isDate, mt as useMentionsHandlers, n as hasSystemNotificationTag, nn as IconLeave, nr as getNotificationTargetTag, nt as mapToUserNameOrId, o as ChatViewChannelsSelectorButton, on as IconMegaphone, or as TypingProvider, ot as messageHasReactions, p as useThreadsViewContext, pn as IconMinusCircle, pr as getDateString, pt as LoadingChannel, q as getNonImageAttachments, qn as IconXCircle, qr as useChannelStateContext, qt as IconExclamationMarkFill, r as useNotificationApi, rn as IconLink, rr as isNotificationForPanel, rt as messageHasAttachments, s as ChatViewContext, sn as IconMenu, sr as useTypingContext, st as messageHasSingleAttachment, t as SYSTEM_NOTIFICATION_TAG, tn as IconInfo, tr as getNotificationTargetPanels, tt as isUserMuted, u as defaultChatViewSelectorItemSet, un as IconMessageBubbles, ur as useTranslationContext, ut as EMOJI_REGEX, v as getChannel, vn as IconPauseFill, vr as predefinedFormatters, vt as IconArrowDown, w as isDateSeparatorMessage, wn as IconQuote, wr as useNearestDialogManagerContext, wt as IconAudio, x as getLastReceived, xn as IconPlus, xr as modalDialogManagerId, xt as IconArrowUp, y as getGroupStyles, yn as IconPin, yr as DialogManagerProvider, yt as IconArrowDownCircle, z as ACTIONS_NOT_WORKING_IN_THREAD, zn as IconUser, zr as ComponentContext, zt as IconCopy } from "./useNotificationApi.eff88f29.mjs";
+import { $ as ContextMenuBackButton, A as GalleryUI, At as MessageTranslationViewContext, B as FileIcon, C as Checkmark, Ct as LoadingIndicator, D as SwitchFieldLabel, Dt as ModalContext, E as SwitchFieldDescription, Et as useNotificationConfigurationContext, F as useGalleryContext, Ft as MessageProvider, G as Timestamp, H as FILE_ICON_NO_LABEL_CLASSNAME, I as toBaseImageDescriptors, It as useMessageContext, J as htmlToTextPlugin, K as plusPlusToEmphasis, L as BaseImage, M as VideoPlayer, Mt as getTranslatedMessageText, N as GalleryContext, Nt as useMessageTranslationViewContext, O as SwitchFieldTitle, Ot as ModalContextProvider, P as toGalleryItemDescriptors, Pt as MessageContext, Q as ContextMenu, R as ImagePlaceholder, S as Checkbox, St as FileSizeIndicator, T as SwitchField, Tt as NotificationConfigurationProvider, U as DownloadButton, V as FILE_ICON_GRAPHIC_CLASSNAME, W as MessageTimestamp, X as Prompt, Y as GlobalModal, Z as BaseContextMenuButton, _ as getLatestMessagePreview, _t as Alert, a as pickNewest, at as DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR, b as ListItemLayoutContent, bt as useAriaIdentifiers, c as useIsUserMuted, ct as useContextMenuContext, d as useSelectedChannelState, dt as ChannelAvatar, et as ContextMenuBody, f as isDmChannel, ft as Badge, g as getGroupChannelDisplayInfo, gt as useDialogAnchor, h as getChannelDisplayImage, ht as DialogAnchor, i as createDefaultPickNext, it as ContextMenuRoot, j as VideoThumbnail, jt as MessageTranslationViewProvider, k as Gallery, kt as useModalContext, l as useIsChannelMuted, lt as createRovingFocusKeyDownHandler, m as useChannelDisplayName, mt as Avatar, nt as ContextMenuContent, o as pickOldest, ot as EmojiContextMenuButton, p as useChannelPreviewInfo, pt as ErrorBadge, q as imageToLink, r as NotificationList, rt as ContextMenuHeader, s as Notification, st as UserContextMenuButton, t as useChannelHeaderOnlineStatus, tt as ContextMenuButton, u as useChannelMembershipState, ut as GroupAvatar, v as renderPreviewText, vt as Header, w as Switch, wt as useNotifications, x as TextInput, xt as useStableCallback, y as ListItemLayout, yt as Root, z as formatTime } from "./useChannelHeaderOnlineStatus.b3a51ca7.mjs";
+import { a as useMessageComposerContext, i as MessageComposerContextProvider, n as useIsCooldownActive, r as MessageComposerContext, t as useMessageComposerController } from "./useMessageComposerController.2309f433.mjs";
 import { a as getExtensionFromMimeType, i as dataTransferItemsToFiles, n as toAudioBuffer, o as getRecordedMediaTypeFromMimeType, r as createFileFromBlobs, s as useHandleFileChangeWrapper, t as renderAudio } from "./audioProcessing.766ca76c.mjs";
 import React, { Component, Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -9,29 +9,29 @@ import { nanoid } from "nanoid";
 import clsx from "clsx";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
 import Dayjs from "dayjs";
-import calendar from "dayjs/plugin/calendar";
-import localizedFormat from "dayjs/plugin/localizedFormat";
+import calendar from "dayjs/plugin/calendar.js";
+import localizedFormat from "dayjs/plugin/localizedFormat.js";
 import debounce from "lodash.debounce";
 import throttle from "lodash.throttle";
 import i18n from "i18next";
-import updateLocale from "dayjs/plugin/updateLocale";
-import localeData from "dayjs/plugin/localeData";
-import relativeTime from "dayjs/plugin/relativeTime";
-import duration from "dayjs/plugin/duration";
-import utc from "dayjs/plugin/utc";
-import timezone from "dayjs/plugin/timezone";
-import "dayjs/locale/de";
-import "dayjs/locale/es";
-import "dayjs/locale/fr";
-import "dayjs/locale/hi";
-import "dayjs/locale/it";
-import "dayjs/locale/ja";
-import "dayjs/locale/ko";
-import "dayjs/locale/nl";
-import "dayjs/locale/pt";
-import "dayjs/locale/ru";
-import "dayjs/locale/tr";
-import "dayjs/locale/en";
+import updateLocale from "dayjs/plugin/updateLocale.js";
+import localeData from "dayjs/plugin/localeData.js";
+import relativeTime from "dayjs/plugin/relativeTime.js";
+import duration from "dayjs/plugin/duration.js";
+import utc from "dayjs/plugin/utc.js";
+import timezone from "dayjs/plugin/timezone.js";
+import "dayjs/locale/de.js";
+import "dayjs/locale/es.js";
+import "dayjs/locale/fr.js";
+import "dayjs/locale/hi.js";
+import "dayjs/locale/it.js";
+import "dayjs/locale/ja.js";
+import "dayjs/locale/ko.js";
+import "dayjs/locale/nl.js";
+import "dayjs/locale/pt.js";
+import "dayjs/locale/ru.js";
+import "dayjs/locale/tr.js";
+import "dayjs/locale/en.js";
 import { FocusScope } from "@react-aria/focus";
 import { findAndReplace } from "hast-util-find-and-replace";
 import { u } from "unist-builder";
@@ -8537,10 +8537,8 @@ var supportsTz = (dateTimeParser) => dateTimeParser.tz !== void 0;
 * ```js
 * import Dayjs from 'dayjs'
 *
-* import 'dayjs/locale/nl';
-* import 'dayjs/locale/it';
-* // or if you want to include all locales
-* import 'dayjs/min/locales';
+* import 'dayjs/locale/nl.js';
+* import 'dayjs/locale/it.js';
 *
 * const i18n = new Streami18n({
 *  language: 'nl',
@@ -8738,7 +8736,7 @@ var Streami18n = class {
 		if (!this.translations[language]) this.translations[language] = { [defaultNS]: translation };
 		else this.translations[language][defaultNS] = translation;
 		if (customDayjsLocale) this.dayjsLocales[language] = { ...customDayjsLocale };
-		else if (!this.localeExists(language)) this.logger(`Streami18n: registerTranslation(language, translation, customDayjsLocale) - Locale config for ${language} does not exist in Dayjs.Please import the locale file using "import 'dayjs/locale/${language}';" in your app or register the locale config with Streami18n using registerTranslation(language, translation, customDayjsLocale)`);
+		else if (!this.localeExists(language)) this.logger(`Streami18n: registerTranslation(language, translation, customDayjsLocale) - Locale config for ${language} does not exist in Dayjs.Please import the locale file using "import 'dayjs/locale/${language}.js';" in your app or register the locale config with Streami18n using registerTranslation(language, translation, customDayjsLocale)`);
 		if (this.initialized) this.i18nInstance.addResources(language, defaultNS, translation);
 	}
 	addOrUpdateLocale(key, config) {
@@ -9854,7 +9852,7 @@ var MessageStatus = React.memo(UnMemoizedMessageStatus);
 function escapeRegExp(text) {
 	return text.replace(/[-[\]{}()*+?.,/\\^$|#]/g, "\\$&");
 }
-var detectHttp = /(http(s?):\/\/)?(www\.)?/;
+var detectHttp = /(http(s?):\/\/)?(www\.)?/i;
 var codeRegex = /```[a-z]*\n[\s\S]*?\n```|`[a-z]*[\s\S]*?`/gm;
 var regexMdLinks = /\[([^[]+)\](\(.*\))/gm;
 var singleMatch = /\[([^[]+)\]\((.*)\)/;
@@ -10042,7 +10040,7 @@ var remarkIgnoreMarkdown = () => (tree, file) => {
 //#region src/components/Message/renderText/componentRenderers/Anchor.tsx
 var Anchor = ({ children, href }) => {
 	const isEmail = href?.startsWith("mailto:");
-	const isUrl = href?.startsWith("http");
+	const isUrl = href?.toLowerCase().startsWith("http");
 	if (!href || !isEmail && !isUrl) return /* @__PURE__ */ jsx(Fragment$1, { children });
 	return /* @__PURE__ */ jsx("a", {
 		className: clsx({ "str-chat__message-url-link": isUrl }),
@@ -20065,7 +20063,7 @@ var useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread, wasMark
 			if (shouldMarkRead()) markRead();
 		};
 		const handleMessageNew = (event) => {
-			const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
+			if (!(!event.message?.parent_id || event.message?.show_in_channel)) return;
 			if (!isMessageListScrolledToBottom || wasMarkedUnread || document.hidden) setChannelUnreadUiState((prev) => {
 				const previousUnreadCount = prev?.unread_messages ?? 0;
 				const previousLastMessage = getPreviousLastMessage(channel.state.messages, event.message);
@@ -20075,7 +20073,7 @@ var useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread, wasMark
 					unread_messages: previousUnreadCount + 1
 				};
 			});
-			else if (mainChannelUpdated && shouldMarkRead()) markRead();
+			else if (shouldMarkRead()) markRead();
 		};
 		channel.on("message.new", handleMessageNew);
 		document.addEventListener("visibilitychange", onVisibilityChange);
@@ -21729,6 +21727,7 @@ var useChannelListShapeDefaults = () => {
 	const handleNotificationMessageNew = useCallback(async ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, filters, setChannels, sort }) => {
 		if (typeof customHandler === "function") return customHandler(setChannels, event);
 		if (!event.channel) return;
+		if (!allowNewMessagesFromUnfilteredChannels) return;
 		const channel = await getChannel({
 			client,
 			id: event.channel.id,
@@ -21736,7 +21735,6 @@ var useChannelListShapeDefaults = () => {
 		});
 		const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
 		if (isChannelArchived(channel) && considerArchivedChannels && !filters.archived) return;
-		if (!allowNewMessagesFromUnfilteredChannels) return;
 		setChannels((channels) => moveChannelUpwards({
 			channels,
 			channelToMove: channel,
@@ -22465,7 +22463,7 @@ var UnMemoizedChannelList = (props) => {
 	const { allowNewMessagesFromUnfilteredChannels = true, channelRenderFilterFn, customActiveChannel, customQueryChannels, EmptyStateIndicator: EmptyStateIndicator$1 = EmptyStateIndicator, filters = {}, getLatestMessagePreview, lockChannelOrder = false, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, options, Paginator = LoadMorePaginator, recoveryThrottleIntervalMs, renderChannels, sendChannelsToList = false, setActiveChannelOnMount = true, showChannelSearch = false, sort = DEFAULT_SORT, watchers = {} } = props;
 	const stableId = useStableId();
 	const { channel, channelsQueryState, client, customClasses, searchController, setActiveChannel, theme, useImageFlagEmojisOnWindows } = useChatContext("ChannelList");
-	const { ChannelListUI: ChannelListUI$1 = ChannelListUI, NotificationList: NotificationList$1 = NotificationList, Search: Search$13 = Search } = useComponentContext();
+	const { ChannelListHeader: ChannelListHeader$1 = ChannelListHeader, ChannelListUI: ChannelListUI$1 = ChannelListUI, NotificationList: NotificationList$1 = NotificationList, Search: Search$13 = Search } = useComponentContext();
 	const channelListRef = useRef(null);
 	const [channelUpdateCount, setChannelUpdateCount] = useState(0);
 	const { searchIsActive } = useStateStore(searchController.state, searchControllerStateSelector);
@@ -22551,7 +22549,7 @@ var UnMemoizedChannelList = (props) => {
 			children: /* @__PURE__ */ jsxs(DialogManagerProvider, {
 				id: `channel-list-dialog-manager-${stableId}`,
 				children: [
-					/* @__PURE__ */ jsx(ChannelListHeader, {}),
+					/* @__PURE__ */ jsx(ChannelListHeader$1, {}),
 					showChannelSearch && /* @__PURE__ */ jsx(Search$13, {}),
 					showChannelList && /* @__PURE__ */ jsx(ChannelListUI$1, {
 						error: channelsQueryState.error,
@@ -24015,7 +24013,7 @@ var useChat = ({ client, defaultLanguage = "en", i18nInstance }) => {
 	};
 	useEffect(() => {
 		if (!client) return;
-		const version = "14.6.0";
+		const version = "14.7.0";
 		const userAgent = client.getUserAgent();
 		if (!userAgent.includes("stream-chat-react")) client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
 		client.threads.registerSubscriptions();