stream-chat-react 14.0.1 → 14.1.0

package/dist/cjs/{WithAudioPlayback.ba05c770.js → useNotificationApi.fd802923.js}

@@ -3,12 +3,12 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const react = require("@floating-ui/react");
 const streamChat = require("stream-chat");
-const throttle = require("lodash.throttle");
-const shim = require("use-sync-external-store/shim");
 const clsx = require("clsx");
 const debounce = require("lodash.debounce");
+const throttle = require("lodash.throttle");
 const Dayjs = require("dayjs");
 const linkify = require("linkifyjs");
+const shim = require("use-sync-external-store/shim");
 const nanoid = require("nanoid");
 const deepequal = require("react-fast-compare");
 const emojiRegex = require("emoji-regex");
@@ -390,15 +390,96 @@ const useTypingContext = (componentName) => {
   }
   return contextValue;
 };
-const BaseIcon = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    viewBox: "0 0 20 20",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    className: clsx("str-chat__icon", className)
+const NOTIFICATION_TARGET_PANELS = [
+  "channel",
+  "thread",
+  "channel-list",
+  "thread-list"
+];
+const isNotificationTargetPanel = (value) => typeof value === "string" && NOTIFICATION_TARGET_PANELS.includes(value);
+const getNotificationTargetPanel = (notification) => {
+  const targetTag = notification.tags?.find((tag) => tag.startsWith("target:"));
+  if (targetTag) {
+    const candidate = targetTag.slice("target:".length);
+    if (isNotificationTargetPanel(candidate)) return candidate;
   }
-);
+  const panel = notification.origin.context?.panel;
+  return isNotificationTargetPanel(panel) ? panel : void 0;
+};
+const getNotificationTargetPanels = (notification) => {
+  const targetPanels = (notification.tags ?? []).filter((tag) => tag.startsWith("target:")).map((tag) => tag.slice("target:".length)).filter(
+    (value) => isNotificationTargetPanel(value)
+  );
+  if (targetPanels.length > 0) {
+    return Array.from(new Set(targetPanels));
+  }
+  const panel = notification.origin.context?.panel;
+  return isNotificationTargetPanel(panel) ? [panel] : [];
+};
+const getNotificationTargetTag = (panel) => `target:${panel}`;
+const addNotificationTargetTag = (panel, tags) => {
+  if (!panel) return tags ?? [];
+  return Array.from(/* @__PURE__ */ new Set([getNotificationTargetTag(panel), ...tags ?? []]));
+};
+const isNotificationForPanel = (notification, panel, options) => {
+  const explicitTargetPanels = getNotificationTargetPanels(notification);
+  if (explicitTargetPanels.length > 0) {
+    return explicitTargetPanels.includes(panel);
+  }
+  const resolvedPanel = options?.fallbackPanel ?? "channel";
+  return resolvedPanel === panel;
+};
+const variantToClass = {
+  danger: "str-chat__button--destructive",
+  primary: "str-chat__button--primary",
+  secondary: "str-chat__button--secondary"
+};
+const appearanceToClass = {
+  ghost: "str-chat__button--ghost",
+  outline: "str-chat__button--outline",
+  solid: "str-chat__button--solid"
+};
+const sizeToClass = {
+  lg: "str-chat__button--size-lg",
+  md: "str-chat__button--size-md",
+  sm: "str-chat__button--size-sm",
+  xs: "str-chat__button--size-xs"
+};
+const Button = React.forwardRef(function Button2({ appearance, children, circular, className, inverseTheme, size, variant, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      ...props,
+      className: clsx(
+        "str-chat__button",
+        variant != null && variantToClass[variant],
+        appearance != null && appearanceToClass[appearance],
+        circular && "str-chat__button--circular",
+        inverseTheme && "str-chat__theme-inverse",
+        size != null && sizeToClass[size],
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__button__content", children })
+    }
+  );
+});
+const BaseIcon = ({ className, decorative = true, ...props }) => {
+  const ariaHidden = props["aria-hidden"] ?? (decorative ? true : void 0);
+  const focusable = props.focusable ?? (decorative ? false : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      "aria-hidden": ariaHidden,
+      className: clsx("str-chat__icon", className),
+      focusable
+    }
+  );
+};
 function toIconClass(name) {
   return "str-chat__icon--" + name.replace(/^Icon/, "").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([A-Za-z])(\d)/g, "$1-$2").replace(/(\d)([A-Za-z])/g, "$1-$2").replace(/_/g, "-").toLowerCase();
 }
@@ -1513,977 +1594,259 @@ const IconGiphy = createIcon(
     )
   ] })
 );
-const DEFAULT_PLAYBACK_RATES = [1, 1.5, 2];
-const isSeekable = (audioElement) => !(audioElement.duration === Infinity || isNaN(audioElement.duration));
-const defaultRegisterAudioPlayerError = ({
-  error
-} = {}) => {
-  if (!error) return;
-  console.error("[AUDIO PLAYER]", error);
+const UnMemoizedEmptyStateIndicator = (props) => {
+  const { listType, messageText } = props;
+  const { t } = useTranslationContext("EmptyStateIndicator");
+  if (listType === "thread") return null;
+  if (listType === "channel") {
+    const text = t("No conversations yet");
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__channel-list-empty", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(IconMessageBubbles, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { role: "listitem", children: text })
+    ] });
+  }
+  if (listType === "message") {
+    const text = t(messageText || "Send a message to start the conversation");
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__empty-channel", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(IconMessageBubble, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "str-chat__empty-channel-text", role: "listitem", children: text })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { children: t("No items exist") });
 };
-const elementIsPlaying = (audioElement) => audioElement && !(audioElement.paused || audioElement.ended);
-class AudioPlayer {
-  constructor({
-    durationSeconds,
-    fileSize,
-    id,
-    mimeType,
-    playbackRates: customPlaybackRates,
-    plugins,
-    pool,
-    src,
-    title,
-    waveformData
-  }) {
-    this._plugins = /* @__PURE__ */ new Map();
-    this.playTimeout = void 0;
-    this.unsubscribeEventListeners = null;
-    this._disposed = false;
-    this._metadataProbe = null;
-    this._restoringPosition = false;
-    this._removalTimeout = void 0;
-    this.setDurationSeconds = (durationSeconds2) => {
-      this._data.durationSeconds = durationSeconds2;
-      this.state.partialNext({ durationSeconds: durationSeconds2 });
-    };
-    this.setPlaybackStartSafetyTimeout = () => {
-      clearTimeout(this.playTimeout);
-      this.playTimeout = setTimeout(() => {
-        if (!this.elementRef) return;
-        try {
-          this.elementRef.pause();
-          this.state.partialNext({ isPlaying: false });
-        } catch (e) {
-          this.registerError({ errCode: "failed-to-start" });
-        }
-      }, 2e3);
-    };
-    this.updateDurationFromElement = (element) => {
-      const duration = element.duration;
-      if (typeof duration !== "number" || isNaN(duration) || !isFinite(duration) || duration <= 0) {
-        return;
-      }
-      this.setDurationSeconds(duration);
-    };
-    this.clearMetadataProbe = () => {
-      const probe = this._metadataProbe;
-      this._metadataProbe = null;
-      this._metadataProbePromise = void 0;
-      if (!probe) return;
-      try {
-        probe.pause();
-      } catch {
-      }
-      probe.removeAttribute("src");
-      try {
-        probe.load();
-      } catch {
-      }
-    };
-    this.preloadMetadata = () => {
-      if (this._disposed || this.durationSeconds != null || !this.src || this._metadataProbePromise || typeof document === "undefined") {
-        return;
-      }
-      const probe = document.createElement("audio");
-      probe.preload = "metadata";
-      this._metadataProbe = probe;
-      this._metadataProbePromise = new Promise((resolve) => {
-        const cleanup = () => {
-          probe.removeEventListener("loadedmetadata", handleLoadedMetadata);
-          probe.removeEventListener("error", handleError);
-          if (this._metadataProbe === probe) {
-            this.clearMetadataProbe();
-          } else {
-            this._metadataProbePromise = void 0;
-          }
-          resolve();
-        };
-        const handleLoadedMetadata = () => {
-          this.updateDurationFromElement(probe);
-          cleanup();
-        };
-        const handleError = () => {
-          cleanup();
-        };
-        probe.addEventListener("loadedmetadata", handleLoadedMetadata, { once: true });
-        probe.addEventListener("error", handleError, { once: true });
-        probe.src = this.src;
-        try {
-          probe.load();
-        } catch {
-          cleanup();
-        }
-      });
-    };
-    this.clearPlaybackStartSafetyTimeout = () => {
-      if (!this.elementRef) return;
-      clearTimeout(this.playTimeout);
-      this.playTimeout = void 0;
-    };
-    this.clearPendingLoadedMeta = () => {
-      const pending = this._pendingLoadedMeta;
-      if (pending?.element && pending.onLoaded) {
-        pending.element.removeEventListener("loadedmetadata", pending.onLoaded);
-      }
-      this._pendingLoadedMeta = void 0;
-    };
-    this.restoreSavedPosition = (elementRef) => {
-      const saved = this.secondsElapsed;
-      if (!saved || saved <= 0) return;
-      const apply = () => {
-        const duration = elementRef.duration;
-        const clamped = typeof duration === "number" && !isNaN(duration) && isFinite(duration) ? Math.min(saved, duration) : saved;
-        try {
-          if (elementRef.currentTime === clamped) return;
-          elementRef.currentTime = clamped;
-          this.setSecondsElapsed(clamped);
-        } catch {
-        }
+const EmptyStateIndicator = React.memo(
+  UnMemoizedEmptyStateIndicator
+);
+const makeChannelReducer = () => (state, action) => {
+  switch (action.type) {
+    case "closeThread": {
+      return {
+        ...state,
+        thread: null,
+        threadLoadingMore: false,
+        threadMessages: []
       };
-      if (elementRef.readyState < 1) {
-        this.clearPendingLoadedMeta();
-        this._restoringPosition = true;
-        const onLoaded = () => {
-          if (this._pendingLoadedMeta?.onLoaded !== onLoaded) return;
-          this._pendingLoadedMeta = void 0;
-          if (this.elementRef !== elementRef) {
-            this._restoringPosition = false;
-            return;
-          }
-          apply();
-          this._restoringPosition = false;
-        };
-        elementRef.addEventListener("loadedmetadata", onLoaded, { once: true });
-        this._pendingLoadedMeta = { element: elementRef, onLoaded };
-      } else {
-        this._restoringPosition = true;
-        apply();
-        this._restoringPosition = false;
-      }
-    };
-    this.elementIsReady = () => {
-      if (this._elementIsReadyPromise) return this._elementIsReadyPromise;
-      this._elementIsReadyPromise = new Promise((resolve) => {
-        if (!this.elementRef) return resolve(false);
-        const element = this.elementRef;
-        const handleLoaded = () => {
-          element.removeEventListener("loadedmetadata", handleLoaded);
-          resolve(element.readyState > 0);
-        };
-        element.addEventListener("loadedmetadata", handleLoaded);
-      });
-      return this._elementIsReadyPromise;
-    };
-    this.setRef = (elementRef) => {
-      if (elementIsPlaying(this.elementRef)) {
-        this.releaseElement({ resetState: false });
-      }
-      this.clearPendingLoadedMeta();
-      this.clearMetadataProbe();
-      this._restoringPosition = false;
-      this._elementIsReadyPromise = void 0;
-      this.state.partialNext({ elementRef });
-      if (elementRef) {
-        this.registerSubscriptions();
-      }
-    };
-    this.setSecondsElapsed = (secondsElapsed) => {
-      const duration = this.elementRef?.duration ?? this.durationSeconds;
-      this.state.partialNext({
-        progressPercent: duration && secondsElapsed ? secondsElapsed / duration * 100 : 0,
-        secondsElapsed
-      });
-    };
-    this.canPlayMimeType = (mimeType2) => {
-      if (!mimeType2) return false;
-      if (this.elementRef) return !!this.elementRef.canPlayType(mimeType2);
-      return !!new Audio().canPlayType(mimeType2);
-    };
-    this.play = async (params) => {
-      if (this._disposed) return;
-      const elementRef = this.ensureElementRef();
-      if (elementIsPlaying(this.elementRef)) {
-        if (this.isPlaying) return;
-        this.state.partialNext({ isPlaying: true });
-        return;
-      }
-      const { currentPlaybackRate, playbackRates: playbackRates2 } = {
-        currentPlaybackRate: this.currentPlaybackRate,
-        playbackRates: this.playbackRates,
-        ...params
+    }
+    case "copyMessagesFromChannel": {
+      const { channel, parentId } = action;
+      return {
+        ...state,
+        messages: [...channel.state.messages],
+        pinnedMessages: [...channel.state.pinnedMessages],
+        // copying messages from channel happens with new message - this resets the suppressAutoscroll
+        suppressAutoscroll: false,
+        threadMessages: parentId ? { ...channel.state.threads }[parentId] || [] : state.threadMessages
       };
-      if (!this.canPlayRecord) {
-        this.registerError({ errCode: "not-playable" });
-        return;
-      }
-      this.restoreSavedPosition(elementRef);
-      elementRef.playbackRate = currentPlaybackRate ?? this.currentPlaybackRate;
-      this.setPlaybackStartSafetyTimeout();
-      try {
-        await elementRef.play();
-        this.state.partialNext({
-          currentPlaybackRate,
-          isPlaying: true,
-          playbackRates: playbackRates2
-        });
-        this._pool.setActiveAudioPlayer(this);
-      } catch (e) {
-        this.registerError({ error: e });
-        this.state.partialNext({ isPlaying: false });
-      } finally {
-        this.clearPlaybackStartSafetyTimeout();
-      }
-    };
-    this.pause = () => {
-      if (!elementIsPlaying(this.elementRef)) return;
-      this.clearPlaybackStartSafetyTimeout();
-      this.elementRef.pause();
-      this.state.partialNext({ isPlaying: false });
-    };
-    this.stop = () => {
-      this.pause();
-      this.state.partialNext({ isPlaying: false });
-      this.setSecondsElapsed(0);
-      if (this.elementRef) this.elementRef.currentTime = 0;
-    };
-    this.togglePlay = async () => this.isPlaying ? this.pause() : await this.play();
-    this.increasePlaybackRate = () => {
-      let currentPlaybackRateIndex = this.state.getLatestValue().playbackRates.findIndex((rate) => rate === this.currentPlaybackRate);
-      if (currentPlaybackRateIndex === -1) {
-        currentPlaybackRateIndex = 0;
-      }
-      const nextIndex = currentPlaybackRateIndex === this.playbackRates.length - 1 ? 0 : currentPlaybackRateIndex + 1;
-      const currentPlaybackRate = this.playbackRates[nextIndex];
-      this.state.partialNext({ currentPlaybackRate });
-      if (this.elementRef) {
-        this.elementRef.playbackRate = currentPlaybackRate;
-      }
-    };
-    this.seek = throttle(async ({ clientX, currentTarget }) => {
-      let element = this.elementRef;
-      if (!this.elementRef) {
-        element = this.ensureElementRef();
-        const isReady = await this.elementIsReady();
-        if (!isReady) return;
-      }
-      if (!currentTarget || !element) return;
-      if (!isSeekable(element)) {
-        this.registerError({ errCode: "seek-not-supported" });
-        return;
-      }
-      const { width, x } = currentTarget.getBoundingClientRect();
-      const ratio = (clientX - x) / width;
-      if (ratio > 1 || ratio < 0) return;
-      const currentTime = ratio * element.duration;
-      this.setSecondsElapsed(currentTime);
-      element.currentTime = currentTime;
-    }, 16);
-    this.registerError = (params) => {
-      defaultRegisterAudioPlayerError(params);
-      this.plugins.forEach(({ onError }) => onError?.({ player: this, ...params }));
-    };
-    this.requestRemoval = () => {
-      this._disposed = true;
-      this.cancelScheduledRemoval();
-      this.clearPendingLoadedMeta();
-      this.clearMetadataProbe();
-      this._restoringPosition = false;
-      this.releaseElement({ resetState: true });
-      this.unsubscribeEventListeners?.();
-      this.unsubscribeEventListeners = null;
-      this.plugins.forEach(({ onRemove }) => onRemove?.({ player: this }));
-      this._pool.deregister(this.id);
-    };
-    this.cancelScheduledRemoval = () => {
-      clearTimeout(this._removalTimeout);
-      this._removalTimeout = void 0;
-    };
-    this.scheduleRemoval = (ms = 0) => {
-      this.cancelScheduledRemoval();
-      this._removalTimeout = setTimeout(() => {
-        if (this.disposed) return;
-        this.requestRemoval();
-      }, ms);
-    };
-    this.releaseElementForHandoff = () => {
-      if (!this.elementRef) return;
-      this.releaseElement({ resetState: false });
-      this.unsubscribeEventListeners?.();
-      this.unsubscribeEventListeners = null;
-    };
-    this.registerSubscriptions = () => {
-      this.unsubscribeEventListeners?.();
-      const audioElement = this.elementRef;
-      if (!audioElement) return;
-      const handleEnded = () => {
-        if (audioElement) {
-          this.updateDurationFromElement(audioElement);
-        }
-        this.stop();
+    }
+    case "copyStateFromChannelOnEvent": {
+      const { channel } = action;
+      return {
+        ...state,
+        members: { ...channel.state.members },
+        messages: [...channel.state.messages],
+        pinnedMessages: [...channel.state.pinnedMessages],
+        read: { ...channel.state.read },
+        watcherCount: channel.state.watcher_count,
+        watchers: { ...channel.state.watchers }
       };
-      const handleError = (e) => {
-        const audio = e.currentTarget;
-        const state = { isPlaying: false };
-        if (!audio?.error?.code) {
-          this.state.partialNext(state);
-          return;
-        }
-        if (audio.error.code === 4) {
-          state.canPlayRecord = false;
-          this.state.partialNext(state);
-        }
-        const errorMsg = [
-          void 0,
-          "MEDIA_ERR_ABORTED: fetch aborted by user",
-          "MEDIA_ERR_NETWORK: network failed while fetching",
-          "MEDIA_ERR_DECODE: audio fetched but couldn’t decode",
-          "MEDIA_ERR_SRC_NOT_SUPPORTED: source not supported"
-        ][audio?.error?.code];
-        if (!errorMsg) return;
-        defaultRegisterAudioPlayerError({ error: new Error(errorMsg + ` (${audio.src})`) });
+    }
+    case "initStateFromChannel": {
+      const { channel, hasMore } = action;
+      return {
+        ...state,
+        hasMore,
+        loading: false,
+        members: { ...channel.state.members },
+        messages: [...channel.state.messages],
+        pinnedMessages: [...channel.state.pinnedMessages],
+        read: { ...channel.state.read },
+        watcherCount: channel.state.watcher_count,
+        watchers: { ...channel.state.watchers }
       };
-      const handleTimeupdate = () => {
-        const t = audioElement?.currentTime ?? 0;
-        if (this._restoringPosition && t === 0) return;
-        if (!this.isPlaying && t === 0 && this.secondsElapsed > 0) return;
-        this.setSecondsElapsed(t);
+    }
+    case "jumpToLatestMessageFinished": {
+      const { hasMore, hasMoreNewer, messages } = action;
+      return {
+        ...state,
+        hasMore,
+        hasMoreNewer,
+        highlightedMessageId: void 0,
+        loading: false,
+        messages,
+        suppressAutoscroll: false
       };
-      const handleLoadedMetadata = () => {
-        if (audioElement) {
-          this.updateDurationFromElement(audioElement);
-        }
+    }
+    case "jumpToMessageFinished": {
+      return {
+        ...state,
+        hasMore: action.channel.state.messagePagination.hasPrev,
+        hasMoreNewer: action.channel.state.messagePagination.hasNext,
+        highlightedMessageId: action.highlightedMessageId,
+        loadingMore: false,
+        loadingMoreForJumpToChannelMessage: false,
+        messages: action.channel.state.messages,
+        suppressAutoscroll: false
       };
-      audioElement.addEventListener("ended", handleEnded);
-      audioElement.addEventListener("error", handleError);
-      audioElement.addEventListener("loadedmetadata", handleLoadedMetadata);
-      audioElement.addEventListener("timeupdate", handleTimeupdate);
-      this.unsubscribeEventListeners = () => {
-        audioElement.pause();
-        audioElement.removeEventListener("ended", handleEnded);
-        audioElement.removeEventListener("error", handleError);
-        audioElement.removeEventListener("loadedmetadata", handleLoadedMetadata);
-        audioElement.removeEventListener("timeupdate", handleTimeupdate);
+    }
+    case "clearHighlightedMessage": {
+      return {
+        ...state,
+        highlightedMessageId: void 0
       };
-    };
-    this._data = {
-      durationSeconds,
-      fileSize,
-      id,
-      mimeType,
-      src,
-      title,
-      waveformData
-    };
-    this._pool = pool;
-    this.setPlugins(() => plugins ?? []);
-    const playbackRates = customPlaybackRates?.length ? customPlaybackRates : DEFAULT_PLAYBACK_RATES;
-    const canPlayRecord = mimeType ? !!new Audio().canPlayType(mimeType) : true;
-    this.state = new streamChat.StateStore({
-      canPlayRecord,
-      currentPlaybackRate: playbackRates[0],
-      durationSeconds,
-      elementRef: null,
-      isPlaying: false,
-      playbackError: null,
-      playbackRates,
-      progressPercent: 0,
-      secondsElapsed: 0
-    });
-    this.plugins.forEach((p) => p.onInit?.({ player: this }));
-    this.preloadMetadata();
-  }
-  get plugins() {
-    return Array.from(this._plugins.values());
-  }
-  get canPlayRecord() {
-    return this.state.getLatestValue().canPlayRecord;
-  }
-  get elementRef() {
-    return this.state.getLatestValue().elementRef;
-  }
-  get isPlaying() {
-    return this.state.getLatestValue().isPlaying;
-  }
-  get currentPlaybackRate() {
-    return this.state.getLatestValue().currentPlaybackRate;
-  }
-  get playbackRates() {
-    return this.state.getLatestValue().playbackRates;
-  }
-  get durationSeconds() {
-    return this.state.getLatestValue().durationSeconds;
-  }
-  get fileSize() {
-    return this._data.fileSize;
-  }
-  get id() {
-    return this._data.id;
-  }
-  get src() {
-    return this._data.src;
-  }
-  get mimeType() {
-    return this._data.mimeType;
-  }
-  get title() {
-    return this._data.title;
-  }
-  get waveformData() {
-    return this._data.waveformData;
-  }
-  get secondsElapsed() {
-    return this.state.getLatestValue().secondsElapsed;
-  }
-  get progressPercent() {
-    return this.state.getLatestValue().progressPercent;
-  }
-  get disposed() {
-    return this._disposed;
-  }
-  ensureElementRef() {
-    if (this._disposed) {
-      throw new Error("AudioPlayer is disposed");
     }
-    if (!this.elementRef) {
-      const el = this._pool.acquireElement({
-        ownerId: this.id,
-        src: this.src
-      });
-      this.setRef(el);
+    case "loadMoreFinished": {
+      const { hasMore, messages } = action;
+      return {
+        ...state,
+        hasMore,
+        loadingMore: false,
+        messages,
+        suppressAutoscroll: false
+      };
     }
-    return this.elementRef;
-  }
-  setDescriptor(descriptor) {
-    const previousSrc = this.src;
-    this._data = { ...this._data, ...descriptor };
-    if (descriptor.src !== previousSrc && this.elementRef) {
-      this.elementRef.src = descriptor.src;
+    case "loadMoreNewerFinished": {
+      const { hasMoreNewer, messages } = action;
+      return {
+        ...state,
+        hasMoreNewer,
+        loadingMoreNewer: false,
+        messages
+      };
     }
-    if (descriptor.src && descriptor.src !== previousSrc) {
-      this.clearMetadataProbe();
-      if (descriptor.durationSeconds == null) {
-        this.setDurationSeconds(void 0);
-        this.preloadMetadata();
-      } else {
-        this.setDurationSeconds(descriptor.durationSeconds);
-      }
-      return;
+    case "loadMoreThreadFinished": {
+      const { threadHasMore, threadMessages } = action;
+      return {
+        ...state,
+        threadHasMore,
+        threadLoadingMore: false,
+        threadMessages
+      };
     }
-    if (descriptor.durationSeconds != null) {
-      this.setDurationSeconds(descriptor.durationSeconds);
+    case "openThread": {
+      const { channel, message } = action;
+      return {
+        ...state,
+        thread: message,
+        threadHasMore: true,
+        threadMessages: message.id ? { ...channel.state.threads }[message.id] || [] : [],
+        threadSuppressAutoscroll: false
+      };
     }
-  }
-  releaseElement({ resetState }) {
-    this.clearPendingLoadedMeta();
-    this.clearMetadataProbe();
-    this._restoringPosition = false;
-    if (resetState) {
-      this.stop();
-    } else {
-      this.state.partialNext({ isPlaying: false });
-      if (this.elementRef) {
-        try {
-          this.elementRef.pause();
-        } catch {
-        }
-      }
+    case "setError": {
+      const { error } = action;
+      return { ...state, error };
     }
-    if (this.elementRef) {
-      this._pool.releaseElement(this.id);
-      this.setRef(null);
+    case "setLoadingMore": {
+      const { loadingMore } = action;
+      return { ...state, loadingMore, suppressAutoscroll: loadingMore };
     }
+    case "setLoadingMoreForJumpToChannelMessage": {
+      const { loadingMoreForJumpToChannelMessage } = action;
+      return {
+        ...state,
+        loadingMoreForJumpToChannelMessage,
+        suppressAutoscroll: loadingMoreForJumpToChannelMessage
+      };
+    }
+    case "setLoadingMoreNewer": {
+      const { loadingMoreNewer } = action;
+      return { ...state, loadingMoreNewer };
+    }
+    case "setThread": {
+      const { message } = action;
+      return { ...state, thread: message };
+    }
+    case "setTyping": {
+      const { channel } = action;
+      return {
+        ...state,
+        typing: { ...channel.state.typing }
+      };
+    }
+    case "startLoadingThread": {
+      return {
+        ...state,
+        threadLoadingMore: true,
+        threadSuppressAutoscroll: true
+      };
+    }
+    case "updateThreadOnEvent": {
+      const { channel, message } = action;
+      if (!state.thread) return state;
+      return {
+        ...state,
+        thread: message?.id === state.thread.id ? channel.state.formatMessage(message) : state.thread,
+        threadMessages: state.thread?.id ? { ...channel.state.threads }[state.thread.id] || [] : []
+      };
+    }
+    default:
+      return state;
   }
-  setPlugins(setter) {
-    this._plugins = setter(this.plugins).reduce((acc, plugin) => {
-      if (plugin.id) {
-        acc.set(plugin.id, plugin);
-      }
-      return acc;
-    }, /* @__PURE__ */ new Map());
-  }
-}
-class AudioPlayerPool {
-  constructor(config) {
-    this.state = new streamChat.StateStore({
-      activeAudioPlayer: null
-    });
-    this.pool = /* @__PURE__ */ new Map();
-    this.audios = /* @__PURE__ */ new Map();
-    this.sharedAudio = null;
-    this.sharedOwnerId = null;
-    this.getOrAdd = (params) => {
-      const { playbackRates, plugins, ...descriptor } = params;
-      let player = this.pool.get(params.id);
-      if (player) {
-        if (!player.disposed) {
-          player.setDescriptor(descriptor);
-          return player;
-        }
-        this.deregister(params.id);
-      }
-      player = new AudioPlayer({
-        playbackRates,
-        plugins,
-        ...descriptor,
-        pool: this
-      });
-      this.pool.set(params.id, player);
-      return player;
-    };
-    this.acquireElement = ({ ownerId, src }) => {
-      if (!this.allowConcurrentPlayback) {
-        if (!this.sharedAudio) {
-          this.sharedAudio = new Audio();
-        }
-        if (this.sharedOwnerId && this.sharedOwnerId !== ownerId) {
-          const previous = this.pool.get(this.sharedOwnerId);
-          previous?.pause();
-          previous?.releaseElementForHandoff();
-        }
-        this.sharedOwnerId = ownerId;
-        if (this.sharedAudio.src !== src) {
-          this.sharedAudio.src = src;
-        }
-        return this.sharedAudio;
-      }
-      let audio = this.audios.get(ownerId);
-      if (!audio) {
-        audio = new Audio();
-        this.audios.set(ownerId, audio);
-      }
-      if (audio.src !== src) {
-        audio.src = src;
-      }
-      return audio;
-    };
-    this.releaseElement = (ownerId) => {
-      if (!this.allowConcurrentPlayback) {
-        if (this.sharedOwnerId !== ownerId) return;
-        const el2 = this.sharedAudio;
-        if (el2) {
-          try {
-            el2.pause();
-          } catch {
-          }
-          el2.removeAttribute("src");
-          el2.load();
-        }
-        this.sharedOwnerId = null;
-        return;
-      }
-      const el = this.audios.get(ownerId);
-      if (!el) return;
-      try {
-        el.pause();
-      } catch {
-      }
-      el.removeAttribute("src");
-      el.load();
-      this.audios.delete(ownerId);
-    };
-    this.setActiveAudioPlayer = (activeAudioPlayer) => {
-      if (this.allowConcurrentPlayback) return;
-      this.state.partialNext({ activeAudioPlayer });
-    };
-    this.remove = (id) => {
-      const player = this.pool.get(id);
-      if (!player) return;
-      player.requestRemoval();
-    };
-    this.clear = () => {
-      this.players.forEach((player) => {
-        this.remove(player.id);
-      });
-    };
-    this.registerSubscriptions = () => {
-      this.players.forEach((p) => {
-        if (p.elementRef) {
-          p.registerSubscriptions();
-        }
-      });
-    };
-    this.allowConcurrentPlayback = !!config?.allowConcurrentPlayback;
-  }
-  get players() {
-    return Array.from(this.pool.values());
-  }
-  get activeAudioPlayer() {
-    return this.state.getLatestValue().activeAudioPlayer;
-  }
-  /** Removes the AudioPlayer instance from the pool of players */
-  deregister(id) {
-    if (this.pool.has(id)) {
-      this.pool.delete(id);
-    }
-    if (this.activeAudioPlayer?.id === id) {
-      this.setActiveAudioPlayer(null);
-    }
-  }
-}
-const SEEK_NOT_SUPPORTED_NOTIFICATION_DEBOUNCE_INTERVAL_MS = 1e3;
-const audioPlayerNotificationsPluginFactory = ({
-  addNotification,
-  panel = "channel",
-  t
-}) => {
-  const errors = {
-    "failed-to-start": new Error(t("Failed to play the recording")),
-    "not-playable": new Error(
-      t("Recording format is not supported and cannot be reproduced")
-    ),
-    "seek-not-supported": new Error(t("Cannot seek in the recording"))
-  };
-  let lastSeekNotSupportedNotificationAt;
-  return {
-    id: "AudioPlayerNotificationsPlugin",
-    onError: ({ errCode, error: e }) => {
-      if (errCode === "seek-not-supported") {
-        const now = Date.now();
-        if (typeof lastSeekNotSupportedNotificationAt === "number" && now - lastSeekNotSupportedNotificationAt < SEEK_NOT_SUPPORTED_NOTIFICATION_DEBOUNCE_INTERVAL_MS) {
-          return;
-        }
-        lastSeekNotSupportedNotificationAt = now;
-      }
-      const error = (errCode && errors[errCode]) ?? e ?? new Error(t("Error reproducing the recording"));
-      addNotification({
-        emitter: "AudioPlayer",
-        error,
-        message: error.message,
-        severity: "error",
-        targetPanels: [panel],
-        type: "browser:audio:playback:error"
-      });
-    }
-  };
-};
-const NOTIFICATION_TARGET_PANELS = [
-  "channel",
-  "thread",
-  "channel-list",
-  "thread-list"
-];
-const isNotificationTargetPanel = (value) => typeof value === "string" && NOTIFICATION_TARGET_PANELS.includes(value);
-const getNotificationTargetPanel = (notification) => {
-  const targetTag = notification.tags?.find((tag) => tag.startsWith("target:"));
-  if (targetTag) {
-    const candidate = targetTag.slice("target:".length);
-    if (isNotificationTargetPanel(candidate)) return candidate;
-  }
-  const panel = notification.origin.context?.panel;
-  return isNotificationTargetPanel(panel) ? panel : void 0;
-};
-const getNotificationTargetPanels = (notification) => {
-  const targetPanels = (notification.tags ?? []).filter((tag) => tag.startsWith("target:")).map((tag) => tag.slice("target:".length)).filter(
-    (value) => isNotificationTargetPanel(value)
-  );
-  if (targetPanels.length > 0) {
-    return Array.from(new Set(targetPanels));
-  }
-  const panel = notification.origin.context?.panel;
-  return isNotificationTargetPanel(panel) ? [panel] : [];
 };
-const getNotificationTargetTag = (panel) => `target:${panel}`;
-const addNotificationTargetTag = (panel, tags) => {
-  if (!panel) return tags ?? [];
-  return Array.from(/* @__PURE__ */ new Set([getNotificationTargetTag(panel), ...tags ?? []]));
+const initialState = {
+  error: null,
+  hasMore: true,
+  hasMoreNewer: false,
+  loading: true,
+  loadingMore: false,
+  loadingMoreForJumpToChannelMessage: false,
+  members: {},
+  messages: [],
+  pinnedMessages: [],
+  read: {},
+  suppressAutoscroll: false,
+  thread: null,
+  threadHasMore: true,
+  threadLoadingMore: false,
+  threadMessages: [],
+  threadSuppressAutoscroll: false,
+  typing: {},
+  watcherCount: 0,
+  watchers: {}
 };
-const isNotificationForPanel = (notification, panel, options) => {
-  const explicitTargetPanels = getNotificationTargetPanels(notification);
-  if (explicitTargetPanels.length > 0) {
-    return explicitTargetPanels.includes(panel);
-  }
-  const resolvedPanel = options?.fallbackPanel ?? "channel";
-  return resolvedPanel === panel;
-};
-const variantToClass = {
-  danger: "str-chat__button--destructive",
-  primary: "str-chat__button--primary",
-  secondary: "str-chat__button--secondary"
-};
-const appearanceToClass = {
-  ghost: "str-chat__button--ghost",
-  outline: "str-chat__button--outline",
-  solid: "str-chat__button--solid"
-};
-const sizeToClass = {
-  lg: "str-chat__button--size-lg",
-  md: "str-chat__button--size-md",
-  sm: "str-chat__button--size-sm",
-  xs: "str-chat__button--size-xs"
-};
-const Button = React.forwardRef(function Button2({ appearance, children, circular, className, inverseTheme, size, variant, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      ref,
-      type: "button",
-      ...props,
-      className: clsx(
-        "str-chat__button",
-        variant != null && variantToClass[variant],
-        appearance != null && appearanceToClass[appearance],
-        circular && "str-chat__button--circular",
-        inverseTheme && "str-chat__theme-inverse",
-        size != null && sizeToClass[size],
-        className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__button__content", children })
-    }
-  );
-});
-const UnMemoizedEmptyStateIndicator = (props) => {
-  const { listType, messageText } = props;
-  const { t } = useTranslationContext("EmptyStateIndicator");
-  if (listType === "thread") return null;
-  if (listType === "channel") {
-    const text = t("No conversations yet");
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__channel-list-empty", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconMessageBubbles, {}),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { role: "listitem", children: text })
-    ] });
-  }
-  if (listType === "message") {
-    const text = t(messageText || "Send a message to start the conversation");
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__empty-channel", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconMessageBubble, {}),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "str-chat__empty-channel-text", role: "listitem", children: text })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("p", { children: t("No items exist") });
-};
-const EmptyStateIndicator = React.memo(
-  UnMemoizedEmptyStateIndicator
-);
-const makeChannelReducer = () => (state, action) => {
-  switch (action.type) {
-    case "closeThread": {
-      return {
-        ...state,
-        thread: null,
-        threadLoadingMore: false,
-        threadMessages: []
-      };
-    }
-    case "copyMessagesFromChannel": {
-      const { channel, parentId } = action;
-      return {
-        ...state,
-        messages: [...channel.state.messages],
-        pinnedMessages: [...channel.state.pinnedMessages],
-        // copying messages from channel happens with new message - this resets the suppressAutoscroll
-        suppressAutoscroll: false,
-        threadMessages: parentId ? { ...channel.state.threads }[parentId] || [] : state.threadMessages
-      };
-    }
-    case "copyStateFromChannelOnEvent": {
-      const { channel } = action;
-      return {
-        ...state,
-        members: { ...channel.state.members },
-        messages: [...channel.state.messages],
-        pinnedMessages: [...channel.state.pinnedMessages],
-        read: { ...channel.state.read },
-        watcherCount: channel.state.watcher_count,
-        watchers: { ...channel.state.watchers }
-      };
-    }
-    case "initStateFromChannel": {
-      const { channel, hasMore } = action;
-      return {
-        ...state,
-        hasMore,
-        loading: false,
-        members: { ...channel.state.members },
-        messages: [...channel.state.messages],
-        pinnedMessages: [...channel.state.pinnedMessages],
-        read: { ...channel.state.read },
-        watcherCount: channel.state.watcher_count,
-        watchers: { ...channel.state.watchers }
-      };
-    }
-    case "jumpToLatestMessageFinished": {
-      const { hasMore, hasMoreNewer, messages } = action;
-      return {
-        ...state,
-        hasMore,
-        hasMoreNewer,
-        highlightedMessageId: void 0,
-        loading: false,
-        messages,
-        suppressAutoscroll: false
-      };
-    }
-    case "jumpToMessageFinished": {
-      return {
-        ...state,
-        hasMore: action.channel.state.messagePagination.hasPrev,
-        hasMoreNewer: action.channel.state.messagePagination.hasNext,
-        highlightedMessageId: action.highlightedMessageId,
-        loadingMore: false,
-        loadingMoreForJumpToChannelMessage: false,
-        messages: action.channel.state.messages,
-        suppressAutoscroll: false
-      };
-    }
-    case "clearHighlightedMessage": {
-      return {
-        ...state,
-        highlightedMessageId: void 0
-      };
-    }
-    case "loadMoreFinished": {
-      const { hasMore, messages } = action;
-      return {
-        ...state,
-        hasMore,
-        loadingMore: false,
-        messages,
-        suppressAutoscroll: false
-      };
-    }
-    case "loadMoreNewerFinished": {
-      const { hasMoreNewer, messages } = action;
-      return {
-        ...state,
-        hasMoreNewer,
-        loadingMoreNewer: false,
-        messages
-      };
-    }
-    case "loadMoreThreadFinished": {
-      const { threadHasMore, threadMessages } = action;
-      return {
-        ...state,
-        threadHasMore,
-        threadLoadingMore: false,
-        threadMessages
-      };
-    }
-    case "openThread": {
-      const { channel, message } = action;
-      return {
-        ...state,
-        thread: message,
-        threadHasMore: true,
-        threadMessages: message.id ? { ...channel.state.threads }[message.id] || [] : [],
-        threadSuppressAutoscroll: false
-      };
-    }
-    case "setError": {
-      const { error } = action;
-      return { ...state, error };
-    }
-    case "setLoadingMore": {
-      const { loadingMore } = action;
-      return { ...state, loadingMore, suppressAutoscroll: loadingMore };
-    }
-    case "setLoadingMoreForJumpToChannelMessage": {
-      const { loadingMoreForJumpToChannelMessage } = action;
-      return {
-        ...state,
-        loadingMoreForJumpToChannelMessage,
-        suppressAutoscroll: loadingMoreForJumpToChannelMessage
-      };
-    }
-    case "setLoadingMoreNewer": {
-      const { loadingMoreNewer } = action;
-      return { ...state, loadingMoreNewer };
-    }
-    case "setThread": {
-      const { message } = action;
-      return { ...state, thread: message };
-    }
-    case "setTyping": {
-      const { channel } = action;
-      return {
-        ...state,
-        typing: { ...channel.state.typing }
-      };
-    }
-    case "startLoadingThread": {
-      return {
-        ...state,
-        threadLoadingMore: true,
-        threadSuppressAutoscroll: true
-      };
-    }
-    case "updateThreadOnEvent": {
-      const { channel, message } = action;
-      if (!state.thread) return state;
-      return {
-        ...state,
-        thread: message?.id === state.thread.id ? channel.state.formatMessage(message) : state.thread,
-        threadMessages: state.thread?.id ? { ...channel.state.threads }[state.thread.id] || [] : []
-      };
-    }
-    default:
-      return state;
-  }
-};
-const initialState = {
-  error: null,
-  hasMore: true,
-  hasMoreNewer: false,
-  loading: true,
-  loadingMore: false,
-  loadingMoreForJumpToChannelMessage: false,
-  members: {},
-  messages: [],
-  pinnedMessages: [],
-  read: {},
-  suppressAutoscroll: false,
-  thread: null,
-  threadHasMore: true,
-  threadLoadingMore: false,
-  threadMessages: [],
-  threadSuppressAutoscroll: false,
-  typing: {},
-  watcherCount: 0,
-  watchers: {}
-};
-const useCreateChannelStateContext = (value) => {
-  const {
-    channel,
-    channelCapabilitiesArray = [],
-    channelConfig,
-    channelUnreadUiState,
-    error,
-    giphyVersion,
-    hasMore,
-    hasMoreNewer,
-    highlightedMessageId,
-    imageAttachmentSizeHandler,
-    loading,
-    loadingMore,
-    loadingMoreForJumpToChannelMessage,
-    members,
-    messages = [],
-    mutes,
-    notifications,
-    pinnedMessages,
-    read = {},
-    shouldGenerateVideoThumbnail,
-    skipMessageDataMemoization,
-    suppressAutoscroll,
-    thread,
-    threadHasMore,
-    threadLoadingMore,
-    threadMessages = [],
-    videoAttachmentSizeHandler,
-    watcher_count,
-    watcherCount,
-    watchers
-  } = value;
-  const channelId = channel.cid;
-  const lastRead = channel.initialized && channel.lastRead()?.getTime();
-  const membersLength = Object.keys(members || []).length;
-  const notificationsLength = notifications.length;
-  const readUsers = Object.values(read);
-  const readUsersLength = readUsers.length;
-  const readUsersLastReadDateStrings = [];
-  for (const { last_read } of readUsers) {
-    if (!lastRead) continue;
-    readUsersLastReadDateStrings.push(last_read?.toISOString());
+const useCreateChannelStateContext = (value) => {
+  const {
+    channel,
+    channelCapabilitiesArray = [],
+    channelConfig,
+    channelUnreadUiState,
+    error,
+    giphyVersion,
+    hasMore,
+    hasMoreNewer,
+    highlightedMessageId,
+    imageAttachmentSizeHandler,
+    loading,
+    loadingMore,
+    loadingMoreForJumpToChannelMessage,
+    members,
+    messages = [],
+    mutes,
+    notifications,
+    pinnedMessages,
+    read = {},
+    shouldGenerateVideoThumbnail,
+    skipMessageDataMemoization,
+    suppressAutoscroll,
+    thread,
+    threadHasMore,
+    threadLoadingMore,
+    threadMessages = [],
+    videoAttachmentSizeHandler,
+    watcher_count,
+    watcherCount,
+    watchers
+  } = value;
+  const channelId = channel.cid;
+  const lastRead = channel.initialized && channel.lastRead()?.getTime();
+  const membersLength = Object.keys(members || []).length;
+  const notificationsLength = notifications.length;
+  const readUsers = Object.values(read);
+  const readUsersLength = readUsers.length;
+  const readUsersLastReadDateStrings = [];
+  for (const { last_read } of readUsers) {
+    if (!lastRead) continue;
+    readUsersLastReadDateStrings.push(last_read?.toISOString());
   }
   const readUsersLastReads = readUsersLastReadDateStrings.join();
   const threadMessagesLength = threadMessages?.length;
@@ -2600,359 +1963,1067 @@ const useIsMounted = () => {
     return () => {
       isMounted.current = false;
     };
-  }, []);
-  return isMounted;
-};
-const useMentionsHandlers = (onMentionsHover, onMentionsClick) => React.useCallback(
-  (event, mentioned_users) => {
-    if (!onMentionsHover && !onMentionsClick || !(event.target instanceof HTMLElement)) {
-      return;
-    }
-    const target = event.target;
-    const textContent = target.innerHTML.replace("*", "");
-    if (textContent[0] === "@") {
-      const userName = textContent.replace("@", "");
-      const user = mentioned_users?.find(
-        ({ id, name }) => name === userName || id === userName
-      );
-      if (onMentionsHover && typeof onMentionsHover === "function" && event.type === "mouseover") {
-        onMentionsHover(event, user);
-      }
-      if (onMentionsClick && event.type === "click" && typeof onMentionsClick === "function") {
-        onMentionsClick(event, user);
-      }
-    }
-  },
-  [onMentionsClick, onMentionsHover]
-);
-const LoadingMessage = ({
-  bubbleSize,
-  metadataSize,
-  outgoing = false
-}) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "div",
-  {
-    className: `str-chat__loading-channel-message ${outgoing ? "str-chat__loading-channel-message--outgoing" : "str-chat__loading-channel-message--incoming"}`,
-    children: [
-      !outgoing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__loading-channel-message-avatar" }) : null,
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__loading-channel-message-content", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `str-chat__loading-channel-message-bubble str-chat__loading-channel-message-bubble--${bubbleSize}`
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `str-chat__loading-channel-message-metadata str-chat__loading-channel-message-metadata--${metadataSize}`
-          }
-        )
-      ] })
-    ]
-  }
-);
-const LoadingMessageInput = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-composer-container str-chat__message-composer-container--loading", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-composer", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__loading-channel-message-input-button" }),
-  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__loading-channel-message-input-pill" })
-] }) });
-const LoadingChannelHeader = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__channel-header str-chat__channel-header--loading", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__channel-header__data str-chat__channel-header__data--loading", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__loading-channel-header-name" }) }),
-  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__loading-channel-header-avatar" })
-] });
-const LoadingChannel = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__loading-channel", children: [
-  /* @__PURE__ */ jsxRuntime.jsx(LoadingChannelHeader, {}),
-  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-list str-chat__message-list--loading", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-list-scroll", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__loading-channel-message-list", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(LoadingMessage, { bubbleSize: "lg", metadataSize: "md" }),
-    /* @__PURE__ */ jsxRuntime.jsx(LoadingMessage, { bubbleSize: "md", metadataSize: "sm", outgoing: true }),
-    /* @__PURE__ */ jsxRuntime.jsx(LoadingMessage, { bubbleSize: "lg", metadataSize: "md" })
-  ] }) }) }),
-  /* @__PURE__ */ jsxRuntime.jsx(LoadingMessageInput, {})
-] });
-const UnMemoizedLoadingErrorIndicator = ({ error }) => {
-  const { t } = useTranslationContext("LoadingErrorIndicator");
-  if (!error) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: t("Error: {{ errorMessage }}", { errorMessage: error.message }) });
-};
-const LoadingErrorIndicator = React.memo(
-  UnMemoizedLoadingErrorIndicator,
-  (prevProps, nextProps) => prevProps.error?.message === nextProps.error?.message
-);
-const CHANNEL_CONTAINER_ID = "str-chat__channel";
-const DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 25;
-const DEFAULT_JUMP_TO_PAGE_SIZE = 25;
-const DEFAULT_THREAD_PAGE_SIZE = 25;
-const DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
-const DEFAULT_HIGHLIGHT_DURATION = 500;
-const validateAndGetMessage = (func, args) => {
-  if (!func || typeof func !== "function") return null;
-  if (!Array.isArray(args)) {
-    args = [args];
-  }
-  const returnValue = func(...args);
-  if (typeof returnValue !== "string") return null;
-  return returnValue;
-};
-const isUserMuted = (message, mutes) => {
-  if (!mutes || !message) return false;
-  const userMuted = mutes.filter((el) => el.target.id === message.user?.id);
-  return !!userMuted.length;
-};
-const OPTIONAL_MESSAGE_ACTIONS = {
-  deleteForMe: "deleteForMe"
-};
-const MESSAGE_ACTIONS = {
-  delete: "delete",
-  download: "download",
-  edit: "edit",
-  flag: "flag",
-  markUnread: "markUnread",
-  mute: "mute",
-  pin: "pin",
-  quote: "quote",
-  react: "react",
-  remindMe: "remindMe",
-  reply: "reply",
-  saveForLater: "saveForLater"
-};
-const getMessageActions = (actions, {
-  canDelete,
-  canEdit,
-  canFlag,
-  canMarkUnread,
-  canMute,
-  canPin,
-  canQuote,
-  canReact,
-  canReply
-}, channelConfig) => {
-  const messageActionsAfterPermission = [];
-  let messageActions = [];
-  if (actions && typeof actions === "boolean") {
-    messageActions = Object.keys(MESSAGE_ACTIONS);
-  } else if (actions && Array.isArray(actions) && actions.length > 0) {
-    messageActions = [...actions];
-  } else {
-    return [];
-  }
-  if (canDelete && messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1) {
-    messageActionsAfterPermission.push(MESSAGE_ACTIONS.delete);
+  }, []);
+  return isMounted;
+};
+const useMentionsHandlers = (onMentionsHover, onMentionsClick) => React.useCallback(
+  (event, mentioned_users) => {
+    if (!onMentionsHover && !onMentionsClick || !(event.target instanceof HTMLElement)) {
+      return;
+    }
+    const target = event.target;
+    const textContent = target.innerHTML.replace("*", "");
+    if (textContent[0] === "@") {
+      const userName = textContent.replace("@", "");
+      const user = mentioned_users?.find(
+        ({ id, name }) => name === userName || id === userName
+      );
+      if (onMentionsHover && typeof onMentionsHover === "function" && event.type === "mouseover") {
+        onMentionsHover(event, user);
+      }
+      if (onMentionsClick && event.type === "click" && typeof onMentionsClick === "function") {
+        onMentionsClick(event, user);
+      }
+    }
+  },
+  [onMentionsClick, onMentionsHover]
+);
+const LoadingMessage = ({
+  bubbleSize,
+  metadataSize,
+  outgoing = false
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    className: `str-chat__loading-channel-message ${outgoing ? "str-chat__loading-channel-message--outgoing" : "str-chat__loading-channel-message--incoming"}`,
+    children: [
+      !outgoing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__loading-channel-message-avatar" }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__loading-channel-message-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `str-chat__loading-channel-message-bubble str-chat__loading-channel-message-bubble--${bubbleSize}`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `str-chat__loading-channel-message-metadata str-chat__loading-channel-message-metadata--${metadataSize}`
+          }
+        )
+      ] })
+    ]
+  }
+);
+const LoadingMessageInput = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-composer-container str-chat__message-composer-container--loading", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-composer", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__loading-channel-message-input-button" }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__loading-channel-message-input-pill" })
+] }) });
+const LoadingChannelHeader = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__channel-header str-chat__channel-header--loading", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__channel-header__data str-chat__channel-header__data--loading", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__loading-channel-header-name" }) }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__loading-channel-header-avatar" })
+] });
+const LoadingChannel = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__loading-channel", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(LoadingChannelHeader, {}),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-list str-chat__message-list--loading", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-list-scroll", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__loading-channel-message-list", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(LoadingMessage, { bubbleSize: "lg", metadataSize: "md" }),
+    /* @__PURE__ */ jsxRuntime.jsx(LoadingMessage, { bubbleSize: "md", metadataSize: "sm", outgoing: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(LoadingMessage, { bubbleSize: "lg", metadataSize: "md" })
+  ] }) }) }),
+  /* @__PURE__ */ jsxRuntime.jsx(LoadingMessageInput, {})
+] });
+const UnMemoizedLoadingErrorIndicator = ({ error }) => {
+  const { t } = useTranslationContext("LoadingErrorIndicator");
+  if (!error) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: t("Error: {{ errorMessage }}", { errorMessage: error.message }) });
+};
+const LoadingErrorIndicator = React.memo(
+  UnMemoizedLoadingErrorIndicator,
+  (prevProps, nextProps) => prevProps.error?.message === nextProps.error?.message
+);
+const CHANNEL_CONTAINER_ID = "str-chat__channel";
+const DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 25;
+const DEFAULT_JUMP_TO_PAGE_SIZE = 25;
+const DEFAULT_THREAD_PAGE_SIZE = 25;
+const DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
+const DEFAULT_HIGHLIGHT_DURATION = 500;
+const validateAndGetMessage = (func, args) => {
+  if (!func || typeof func !== "function") return null;
+  if (!Array.isArray(args)) {
+    args = [args];
+  }
+  const returnValue = func(...args);
+  if (typeof returnValue !== "string") return null;
+  return returnValue;
+};
+const isUserMuted = (message, mutes) => {
+  if (!mutes || !message) return false;
+  const userMuted = mutes.filter((el) => el.target.id === message.user?.id);
+  return !!userMuted.length;
+};
+const OPTIONAL_MESSAGE_ACTIONS = {
+  deleteForMe: "deleteForMe"
+};
+const MESSAGE_ACTIONS = {
+  delete: "delete",
+  download: "download",
+  edit: "edit",
+  flag: "flag",
+  markUnread: "markUnread",
+  mute: "mute",
+  pin: "pin",
+  quote: "quote",
+  react: "react",
+  remindMe: "remindMe",
+  reply: "reply",
+  saveForLater: "saveForLater"
+};
+const getMessageActions = (actions, {
+  canDelete,
+  canEdit,
+  canFlag,
+  canMarkUnread,
+  canMute,
+  canPin,
+  canQuote,
+  canReact,
+  canReply
+}, channelConfig) => {
+  const messageActionsAfterPermission = [];
+  let messageActions = [];
+  if (actions && typeof actions === "boolean") {
+    messageActions = Object.keys(MESSAGE_ACTIONS);
+  } else if (actions && Array.isArray(actions) && actions.length > 0) {
+    messageActions = [...actions];
+  } else {
+    return [];
+  }
+  if (canDelete && messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1) {
+    messageActionsAfterPermission.push(MESSAGE_ACTIONS.delete);
+  }
+  if (messageActions.indexOf(MESSAGE_ACTIONS.download) > -1) {
+    messageActionsAfterPermission.push(MESSAGE_ACTIONS.download);
+  }
+  if (canDelete && messageActions.indexOf(OPTIONAL_MESSAGE_ACTIONS.deleteForMe) > -1) {
+    messageActionsAfterPermission.push(OPTIONAL_MESSAGE_ACTIONS.deleteForMe);
+  }
+  if (canEdit && messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1) {
+    messageActionsAfterPermission.push(MESSAGE_ACTIONS.edit);
+  }
+  if (canFlag && messageActions.indexOf(MESSAGE_ACTIONS.flag) > -1) {
+    messageActionsAfterPermission.push(MESSAGE_ACTIONS.flag);
+  }
+  if (canMarkUnread && messageActions.indexOf(MESSAGE_ACTIONS.markUnread) > -1) {
+    messageActionsAfterPermission.push(MESSAGE_ACTIONS.markUnread);
+  }
+  if (canMute && messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1) {
+    messageActionsAfterPermission.push(MESSAGE_ACTIONS.mute);
+  }
+  if (canPin && messageActions.indexOf(MESSAGE_ACTIONS.pin) > -1) {
+    messageActionsAfterPermission.push(MESSAGE_ACTIONS.pin);
+  }
+  if (canQuote && messageActions.indexOf(MESSAGE_ACTIONS.quote) > -1) {
+    messageActionsAfterPermission.push(MESSAGE_ACTIONS.quote);
+  }
+  if (canReact && messageActions.indexOf(MESSAGE_ACTIONS.react) > -1) {
+    messageActionsAfterPermission.push(MESSAGE_ACTIONS.react);
+  }
+  if (channelConfig?.["user_message_reminders"] && messageActions.indexOf(MESSAGE_ACTIONS.remindMe) > -1) {
+    messageActionsAfterPermission.push(MESSAGE_ACTIONS.remindMe);
+  }
+  if (canReply && messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1) {
+    messageActionsAfterPermission.push(MESSAGE_ACTIONS.reply);
+  }
+  if (channelConfig?.["user_message_reminders"] && messageActions.indexOf(MESSAGE_ACTIONS.saveForLater) > -1) {
+    messageActionsAfterPermission.push(MESSAGE_ACTIONS.saveForLater);
+  }
+  return messageActionsAfterPermission;
+};
+const ACTIONS_NOT_WORKING_IN_THREAD = [
+  MESSAGE_ACTIONS.pin,
+  MESSAGE_ACTIONS.reply,
+  MESSAGE_ACTIONS.markUnread
+];
+function areMessagesEqual(prevMessage, nextMessage) {
+  const areBaseMessagesEqual = (prevMessage2, nextMessage2) => prevMessage2.deleted_at === nextMessage2.deleted_at && prevMessage2.latest_reactions?.length === nextMessage2.latest_reactions?.length && prevMessage2.own_reactions?.length === nextMessage2.own_reactions?.length && prevMessage2.pinned === nextMessage2.pinned && prevMessage2.reply_count === nextMessage2.reply_count && prevMessage2.show_in_channel === nextMessage2.show_in_channel && prevMessage2.status === nextMessage2.status && prevMessage2.text === nextMessage2.text && prevMessage2.type === nextMessage2.type && prevMessage2.updated_at === nextMessage2.updated_at && prevMessage2.user?.updated_at === nextMessage2.user?.updated_at;
+  return areBaseMessagesEqual(prevMessage, nextMessage) && Boolean(prevMessage.quoted_message) === Boolean(nextMessage.quoted_message) && (!prevMessage.quoted_message && !nextMessage.quoted_message || areBaseMessagesEqual(
+    prevMessage.quoted_message,
+    nextMessage.quoted_message
+  ));
+}
+const areMessagePropsEqual = (prevProps, nextProps) => {
+  const { message: prevMessage, Message: prevMessageUI } = prevProps;
+  const { message: nextMessage, Message: nextMessageUI } = nextProps;
+  if (prevMessageUI !== nextMessageUI) return false;
+  if (nextProps.showDetailedReactions !== prevProps.showDetailedReactions) {
+    return false;
+  }
+  if (nextProps.closeReactionSelectorOnClick !== prevProps.closeReactionSelectorOnClick) {
+    return false;
+  }
+  const messagesAreEqual = areMessagesEqual(prevMessage, nextMessage);
+  if (!messagesAreEqual) return false;
+  const deepEqualProps = deepequal(nextProps.messageActions, prevProps.messageActions) && deepequal(nextProps.readBy, prevProps.readBy) && deepequal(nextProps.deliveredTo, prevProps.deliveredTo) && deepequal(nextProps.highlighted, prevProps.highlighted) && deepequal(nextProps.groupStyles, prevProps.groupStyles) && // last 3 messages can have different group styles
+  deepequal(nextProps.mutes, prevProps.mutes) && deepequal(nextProps.lastReceivedId, prevProps.lastReceivedId);
+  if (!deepEqualProps) return false;
+  return prevProps.messageListRect === nextProps.messageListRect;
+};
+const areMessageUIPropsEqual = (prevProps, nextProps) => {
+  const { lastReceivedId: prevLastReceivedId, message: prevMessage } = prevProps;
+  const { lastReceivedId: nextLastReceivedId, message: nextMessage } = nextProps;
+  if (prevProps.highlighted !== nextProps.highlighted) return false;
+  if (prevProps.threadList !== nextProps.threadList) return false;
+  if (prevProps.endOfGroup !== nextProps.endOfGroup) return false;
+  if (prevProps.mutes?.length !== nextProps.mutes?.length) return false;
+  if (prevProps.readBy?.length !== nextProps.readBy?.length) return false;
+  if (prevProps.deliveredTo?.length !== nextProps.deliveredTo?.length) return false;
+  if (prevProps.groupStyles !== nextProps.groupStyles) return false;
+  if (prevProps.showDetailedReactions !== nextProps.showDetailedReactions) {
+    return false;
+  }
+  if ((prevMessage.id === prevLastReceivedId || prevMessage.id === nextLastReceivedId) && prevLastReceivedId !== nextLastReceivedId) {
+    return false;
+  }
+  return areMessagesEqual(prevMessage, nextMessage);
+};
+const messageHasReactions = (message) => Object.values(message?.reaction_groups ?? {}).some(({ count }) => count > 0);
+const messageHasQuotedMessage = (message) => !!message?.quoted_message;
+const messageHasAttachments = (message) => !!message?.attachments && !!message.attachments.length;
+const messageHasSingleAttachment = (message) => message?.attachments?.length === 1;
+const messageHasGiphyAttachment = (message) => !!message?.attachments?.some((att) => att.type === "giphy");
+const getImages = (message) => {
+  if (!message?.attachments) {
+    return [];
+  }
+  return message.attachments.filter((item) => item.type === "image");
+};
+const getNonImageAttachments = (message) => {
+  if (!message?.attachments) {
+    return [];
+  }
+  return message.attachments.filter((item) => item.type !== "image");
+};
+const mapToUserNameOrId = (user) => user.name || user.id;
+const getReadByTooltipText = (users, t, client, tooltipUserNameMapper) => {
+  let outStr = "";
+  if (!t) {
+    throw new Error(
+      "getReadByTooltipText was called, but translation function is not available"
+    );
+  }
+  if (!tooltipUserNameMapper) {
+    throw new Error(
+      "getReadByTooltipText was called, but tooltipUserNameMapper function is not available"
+    );
+  }
+  const otherUsers = users.filter((item) => item && client?.user && item.id !== client.user.id).map(tooltipUserNameMapper);
+  const slicedArr = otherUsers.slice(0, 5);
+  const restLength = otherUsers.length - slicedArr.length;
+  if (slicedArr.length === 1) {
+    outStr = `${slicedArr[0]} `;
+  } else if (slicedArr.length === 2) {
+    outStr = t("{{ firstUser }} and {{ secondUser }}", {
+      firstUser: slicedArr[0],
+      secondUser: slicedArr[1]
+    });
+  } else if (slicedArr.length > 2) {
+    if (restLength === 0) {
+      const lastUser = slicedArr.splice(slicedArr.length - 1, 1);
+      outStr = t("{{ commaSeparatedUsers }}, and {{ lastUser }}", {
+        commaSeparatedUsers: slicedArr.join(", "),
+        lastUser
+      });
+    } else {
+      outStr = t("{{ commaSeparatedUsers }} and {{ moreCount }} more", {
+        commaSeparatedUsers: slicedArr.join(", "),
+        moreCount: restLength
+      });
+    }
+  }
+  return outStr;
+};
+const countEmojis = (text) => {
+  const matches = text?.match(emojiRegex());
+  return matches ? matches.length : 0;
+};
+const messageTextHasEmojisOnly = (message) => {
+  if (!message.text) return false;
+  const noEmojis = message.text.replace(emojiRegex(), "");
+  const noSpace = noEmojis.replace(/[\s\n]/gm, "");
+  return !noSpace;
+};
+const isMessageErrorRetryable = (message) => message.status === "failed" && message.error?.status !== 403;
+const isNetworkSendFailure = (message) => message.status === "failed" && message.error?.status === 0;
+const isMessageBounced = (message) => message.type === "error" && (message.moderation_details?.action === "MESSAGE_RESPONSE_ACTION_BOUNCE" || message.moderation?.action === "bounce");
+const isMessageBlocked = (message) => message.shadowed || message.type === "error" && (message.moderation_details?.action === "MESSAGE_RESPONSE_ACTION_REMOVE" || message.moderation?.action === "remove");
+const isMessageDeleted = (message) => Boolean(message.deleted_at || message.type === "deleted" || message.deleted_for_me);
+const isMessageEdited = (message) => !!message.message_text_updated_at;
+const hasResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
+function autoMiddlewareFor(p) {
+  if (!String(p).startsWith("auto")) return null;
+  const alignment = p === "auto-start" ? "start" : p === "auto-end" ? "end" : void 0;
+  return react.autoPlacement({ alignment });
+}
+function toOffsetMw(opt) {
+  if (opt == null) return null;
+  if (Array.isArray(opt)) {
+    const [crossAxis, mainAxis] = opt;
+    return react.offset({ crossAxis, mainAxis });
+  }
+  if (typeof opt === "number") return react.offset(opt);
+  return react.offset(opt);
+}
+function usePopoverPosition({
+  allowFlip = true,
+  allowShift = true,
+  autoUpdateOptions,
+  fitAvailableSpace = false,
+  freeze = false,
+  offset,
+  placement = "bottom-start",
+  shiftOptions
+}) {
+  const autoMw = autoMiddlewareFor(placement);
+  const offsetMiddleware = toOffsetMw(offset);
+  const isSidePlacement = placement.startsWith("left") || placement.startsWith("right");
+  const mergedShiftOptions = shiftOptions ? { padding: 8, ...shiftOptions } : { padding: 8 };
+  const middleware = [
+    // offset first (mirrors common Popper setups)
+    ...offsetMiddleware ? [offsetMiddleware] : [],
+    // choose between autoPlacement (Popper's "auto*") OR flip()
+    // only allow flip when not explicitly 'left*' or 'right*'
+    ...autoMw ? [autoMw] : allowFlip && !isSidePlacement ? [react.flip()] : [],
+    // viewport collision adjustments
+    ...allowShift ? [react.shift(mergedShiftOptions)] : [],
+    // optional size constraining
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    ...fitAvailableSpace ? [react.size({ apply: () => {
+    } })] : []
+  ];
+  const seedPlacement = String(placement).startsWith("auto") ? "bottom" : placement;
+  return react.useFloating({
+    middleware,
+    placement: seedPlacement,
+    strategy: "fixed",
+    whileElementsMounted: freeze ? void 0 : (reference, floating, update) => react.autoUpdate(reference, floating, update, {
+      ancestorResize: true,
+      ancestorScroll: true,
+      animationFrame: false,
+      elementResize: hasResizeObserver,
+      ...autoUpdateOptions
+    })
+  });
+}
+const LegacyThreadContext = React.createContext({ legacyThread: void 0 });
+const useLegacyThreadContext = () => React.useContext(LegacyThreadContext);
+const DEFAULT_PLAYBACK_RATES = [1, 1.5, 2];
+const isSeekable = (audioElement) => !(audioElement.duration === Infinity || isNaN(audioElement.duration));
+const defaultRegisterAudioPlayerError = ({
+  error
+} = {}) => {
+  if (!error) return;
+  console.error("[AUDIO PLAYER]", error);
+};
+const elementIsPlaying = (audioElement) => audioElement && !(audioElement.paused || audioElement.ended);
+class AudioPlayer {
+  constructor({
+    durationSeconds,
+    fileSize,
+    id,
+    mimeType,
+    playbackRates: customPlaybackRates,
+    plugins,
+    pool,
+    src,
+    title,
+    waveformData
+  }) {
+    this._plugins = /* @__PURE__ */ new Map();
+    this.playTimeout = void 0;
+    this.unsubscribeEventListeners = null;
+    this._disposed = false;
+    this._metadataProbe = null;
+    this._restoringPosition = false;
+    this._removalTimeout = void 0;
+    this.setDurationSeconds = (durationSeconds2) => {
+      this._data.durationSeconds = durationSeconds2;
+      this.state.partialNext({ durationSeconds: durationSeconds2 });
+    };
+    this.setPlaybackStartSafetyTimeout = () => {
+      clearTimeout(this.playTimeout);
+      this.playTimeout = setTimeout(() => {
+        if (!this.elementRef) return;
+        try {
+          this.elementRef.pause();
+          this.state.partialNext({ isPlaying: false });
+        } catch (e) {
+          this.registerError({ errCode: "failed-to-start" });
+        }
+      }, 2e3);
+    };
+    this.updateDurationFromElement = (element) => {
+      const duration = element.duration;
+      if (typeof duration !== "number" || isNaN(duration) || !isFinite(duration) || duration <= 0) {
+        return;
+      }
+      this.setDurationSeconds(duration);
+    };
+    this.clearMetadataProbe = () => {
+      const probe = this._metadataProbe;
+      this._metadataProbe = null;
+      this._metadataProbePromise = void 0;
+      if (!probe) return;
+      try {
+        probe.pause();
+      } catch {
+      }
+      probe.removeAttribute("src");
+      try {
+        probe.load();
+      } catch {
+      }
+    };
+    this.preloadMetadata = () => {
+      if (this._disposed || this.durationSeconds != null || !this.src || this._metadataProbePromise || typeof document === "undefined") {
+        return;
+      }
+      const probe = document.createElement("audio");
+      probe.preload = "metadata";
+      this._metadataProbe = probe;
+      this._metadataProbePromise = new Promise((resolve) => {
+        const cleanup = () => {
+          probe.removeEventListener("loadedmetadata", handleLoadedMetadata);
+          probe.removeEventListener("error", handleError);
+          if (this._metadataProbe === probe) {
+            this.clearMetadataProbe();
+          } else {
+            this._metadataProbePromise = void 0;
+          }
+          resolve();
+        };
+        const handleLoadedMetadata = () => {
+          this.updateDurationFromElement(probe);
+          cleanup();
+        };
+        const handleError = () => {
+          cleanup();
+        };
+        probe.addEventListener("loadedmetadata", handleLoadedMetadata, { once: true });
+        probe.addEventListener("error", handleError, { once: true });
+        probe.src = this.src;
+        try {
+          probe.load();
+        } catch {
+          cleanup();
+        }
+      });
+    };
+    this.clearPlaybackStartSafetyTimeout = () => {
+      if (!this.elementRef) return;
+      clearTimeout(this.playTimeout);
+      this.playTimeout = void 0;
+    };
+    this.clearPendingLoadedMeta = () => {
+      const pending = this._pendingLoadedMeta;
+      if (pending?.element && pending.onLoaded) {
+        pending.element.removeEventListener("loadedmetadata", pending.onLoaded);
+      }
+      this._pendingLoadedMeta = void 0;
+    };
+    this.restoreSavedPosition = (elementRef) => {
+      const saved = this.secondsElapsed;
+      if (!saved || saved <= 0) return;
+      const apply = () => {
+        const duration = elementRef.duration;
+        const clamped = typeof duration === "number" && !isNaN(duration) && isFinite(duration) ? Math.min(saved, duration) : saved;
+        try {
+          if (elementRef.currentTime === clamped) return;
+          elementRef.currentTime = clamped;
+          this.setSecondsElapsed(clamped);
+        } catch {
+        }
+      };
+      if (elementRef.readyState < 1) {
+        this.clearPendingLoadedMeta();
+        this._restoringPosition = true;
+        const onLoaded = () => {
+          if (this._pendingLoadedMeta?.onLoaded !== onLoaded) return;
+          this._pendingLoadedMeta = void 0;
+          if (this.elementRef !== elementRef) {
+            this._restoringPosition = false;
+            return;
+          }
+          apply();
+          this._restoringPosition = false;
+        };
+        elementRef.addEventListener("loadedmetadata", onLoaded, { once: true });
+        this._pendingLoadedMeta = { element: elementRef, onLoaded };
+      } else {
+        this._restoringPosition = true;
+        apply();
+        this._restoringPosition = false;
+      }
+    };
+    this.elementIsReady = () => {
+      if (this._elementIsReadyPromise) return this._elementIsReadyPromise;
+      this._elementIsReadyPromise = new Promise((resolve) => {
+        if (!this.elementRef) return resolve(false);
+        const element = this.elementRef;
+        const handleLoaded = () => {
+          element.removeEventListener("loadedmetadata", handleLoaded);
+          resolve(element.readyState > 0);
+        };
+        element.addEventListener("loadedmetadata", handleLoaded);
+      });
+      return this._elementIsReadyPromise;
+    };
+    this.setRef = (elementRef) => {
+      if (elementIsPlaying(this.elementRef)) {
+        this.releaseElement({ resetState: false });
+      }
+      this.clearPendingLoadedMeta();
+      this.clearMetadataProbe();
+      this._restoringPosition = false;
+      this._elementIsReadyPromise = void 0;
+      this.state.partialNext({ elementRef });
+      if (elementRef) {
+        this.registerSubscriptions();
+      }
+    };
+    this.setSecondsElapsed = (secondsElapsed) => {
+      const duration = this.elementRef?.duration ?? this.durationSeconds;
+      this.state.partialNext({
+        progressPercent: duration && secondsElapsed ? secondsElapsed / duration * 100 : 0,
+        secondsElapsed
+      });
+    };
+    this.canPlayMimeType = (mimeType2) => {
+      if (!mimeType2) return false;
+      if (this.elementRef) return !!this.elementRef.canPlayType(mimeType2);
+      return !!new Audio().canPlayType(mimeType2);
+    };
+    this.play = async (params) => {
+      if (this._disposed) return;
+      const elementRef = this.ensureElementRef();
+      if (elementIsPlaying(this.elementRef)) {
+        if (this.isPlaying) return;
+        this.state.partialNext({ isPlaying: true });
+        return;
+      }
+      const { currentPlaybackRate, playbackRates: playbackRates2 } = {
+        currentPlaybackRate: this.currentPlaybackRate,
+        playbackRates: this.playbackRates,
+        ...params
+      };
+      if (!this.canPlayRecord) {
+        this.registerError({ errCode: "not-playable" });
+        return;
+      }
+      this.restoreSavedPosition(elementRef);
+      elementRef.playbackRate = currentPlaybackRate ?? this.currentPlaybackRate;
+      this.setPlaybackStartSafetyTimeout();
+      try {
+        await elementRef.play();
+        this.state.partialNext({
+          currentPlaybackRate,
+          isPlaying: true,
+          playbackRates: playbackRates2
+        });
+        this._pool.setActiveAudioPlayer(this);
+      } catch (e) {
+        this.registerError({ error: e });
+        this.state.partialNext({ isPlaying: false });
+      } finally {
+        this.clearPlaybackStartSafetyTimeout();
+      }
+    };
+    this.pause = () => {
+      if (!elementIsPlaying(this.elementRef)) return;
+      this.clearPlaybackStartSafetyTimeout();
+      this.elementRef.pause();
+      this.state.partialNext({ isPlaying: false });
+    };
+    this.stop = () => {
+      this.pause();
+      this.state.partialNext({ isPlaying: false });
+      this.setSecondsElapsed(0);
+      if (this.elementRef) this.elementRef.currentTime = 0;
+    };
+    this.togglePlay = async () => this.isPlaying ? this.pause() : await this.play();
+    this.increasePlaybackRate = () => {
+      let currentPlaybackRateIndex = this.state.getLatestValue().playbackRates.findIndex((rate) => rate === this.currentPlaybackRate);
+      if (currentPlaybackRateIndex === -1) {
+        currentPlaybackRateIndex = 0;
+      }
+      const nextIndex = currentPlaybackRateIndex === this.playbackRates.length - 1 ? 0 : currentPlaybackRateIndex + 1;
+      const currentPlaybackRate = this.playbackRates[nextIndex];
+      this.state.partialNext({ currentPlaybackRate });
+      if (this.elementRef) {
+        this.elementRef.playbackRate = currentPlaybackRate;
+      }
+    };
+    this.seek = throttle(async ({ clientX, currentTarget }) => {
+      let element = this.elementRef;
+      if (!this.elementRef) {
+        element = this.ensureElementRef();
+        const isReady = await this.elementIsReady();
+        if (!isReady) return;
+      }
+      if (!currentTarget || !element) return;
+      if (!isSeekable(element)) {
+        this.registerError({ errCode: "seek-not-supported" });
+        return;
+      }
+      const { width, x } = currentTarget.getBoundingClientRect();
+      const ratio = (clientX - x) / width;
+      if (ratio > 1 || ratio < 0) return;
+      const currentTime = ratio * element.duration;
+      this.setSecondsElapsed(currentTime);
+      element.currentTime = currentTime;
+    }, 16);
+    this.registerError = (params) => {
+      defaultRegisterAudioPlayerError(params);
+      this.plugins.forEach(({ onError }) => onError?.({ player: this, ...params }));
+    };
+    this.requestRemoval = () => {
+      this._disposed = true;
+      this.cancelScheduledRemoval();
+      this.clearPendingLoadedMeta();
+      this.clearMetadataProbe();
+      this._restoringPosition = false;
+      this.releaseElement({ resetState: true });
+      this.unsubscribeEventListeners?.();
+      this.unsubscribeEventListeners = null;
+      this.plugins.forEach(({ onRemove }) => onRemove?.({ player: this }));
+      this._pool.deregister(this.id);
+    };
+    this.cancelScheduledRemoval = () => {
+      clearTimeout(this._removalTimeout);
+      this._removalTimeout = void 0;
+    };
+    this.scheduleRemoval = (ms = 0) => {
+      this.cancelScheduledRemoval();
+      this._removalTimeout = setTimeout(() => {
+        if (this.disposed) return;
+        this.requestRemoval();
+      }, ms);
+    };
+    this.releaseElementForHandoff = () => {
+      if (!this.elementRef) return;
+      this.releaseElement({ resetState: false });
+      this.unsubscribeEventListeners?.();
+      this.unsubscribeEventListeners = null;
+    };
+    this.registerSubscriptions = () => {
+      this.unsubscribeEventListeners?.();
+      const audioElement = this.elementRef;
+      if (!audioElement) return;
+      const handleEnded = () => {
+        if (audioElement) {
+          this.updateDurationFromElement(audioElement);
+        }
+        this.stop();
+      };
+      const handleError = (e) => {
+        const audio = e.currentTarget;
+        const state = { isPlaying: false };
+        if (!audio?.error?.code) {
+          this.state.partialNext(state);
+          return;
+        }
+        if (audio.error.code === 4) {
+          state.canPlayRecord = false;
+          this.state.partialNext(state);
+        }
+        const errorMsg = [
+          void 0,
+          "MEDIA_ERR_ABORTED: fetch aborted by user",
+          "MEDIA_ERR_NETWORK: network failed while fetching",
+          "MEDIA_ERR_DECODE: audio fetched but couldn’t decode",
+          "MEDIA_ERR_SRC_NOT_SUPPORTED: source not supported"
+        ][audio?.error?.code];
+        if (!errorMsg) return;
+        defaultRegisterAudioPlayerError({ error: new Error(errorMsg + ` (${audio.src})`) });
+      };
+      const handleTimeupdate = () => {
+        const t = audioElement?.currentTime ?? 0;
+        if (this._restoringPosition && t === 0) return;
+        if (!this.isPlaying && t === 0 && this.secondsElapsed > 0) return;
+        this.setSecondsElapsed(t);
+      };
+      const handleLoadedMetadata = () => {
+        if (audioElement) {
+          this.updateDurationFromElement(audioElement);
+        }
+      };
+      audioElement.addEventListener("ended", handleEnded);
+      audioElement.addEventListener("error", handleError);
+      audioElement.addEventListener("loadedmetadata", handleLoadedMetadata);
+      audioElement.addEventListener("timeupdate", handleTimeupdate);
+      this.unsubscribeEventListeners = () => {
+        audioElement.pause();
+        audioElement.removeEventListener("ended", handleEnded);
+        audioElement.removeEventListener("error", handleError);
+        audioElement.removeEventListener("loadedmetadata", handleLoadedMetadata);
+        audioElement.removeEventListener("timeupdate", handleTimeupdate);
+      };
+    };
+    this._data = {
+      durationSeconds,
+      fileSize,
+      id,
+      mimeType,
+      src,
+      title,
+      waveformData
+    };
+    this._pool = pool;
+    this.setPlugins(() => plugins ?? []);
+    const playbackRates = customPlaybackRates?.length ? customPlaybackRates : DEFAULT_PLAYBACK_RATES;
+    const canPlayRecord = mimeType ? !!new Audio().canPlayType(mimeType) : true;
+    this.state = new streamChat.StateStore({
+      canPlayRecord,
+      currentPlaybackRate: playbackRates[0],
+      durationSeconds,
+      elementRef: null,
+      isPlaying: false,
+      playbackError: null,
+      playbackRates,
+      progressPercent: 0,
+      secondsElapsed: 0
+    });
+    this.plugins.forEach((p) => p.onInit?.({ player: this }));
+    this.preloadMetadata();
   }
-  if (messageActions.indexOf(MESSAGE_ACTIONS.download) > -1) {
-    messageActionsAfterPermission.push(MESSAGE_ACTIONS.download);
+  get plugins() {
+    return Array.from(this._plugins.values());
   }
-  if (canDelete && messageActions.indexOf(OPTIONAL_MESSAGE_ACTIONS.deleteForMe) > -1) {
-    messageActionsAfterPermission.push(OPTIONAL_MESSAGE_ACTIONS.deleteForMe);
+  get canPlayRecord() {
+    return this.state.getLatestValue().canPlayRecord;
   }
-  if (canEdit && messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1) {
-    messageActionsAfterPermission.push(MESSAGE_ACTIONS.edit);
+  get elementRef() {
+    return this.state.getLatestValue().elementRef;
   }
-  if (canFlag && messageActions.indexOf(MESSAGE_ACTIONS.flag) > -1) {
-    messageActionsAfterPermission.push(MESSAGE_ACTIONS.flag);
+  get isPlaying() {
+    return this.state.getLatestValue().isPlaying;
   }
-  if (canMarkUnread && messageActions.indexOf(MESSAGE_ACTIONS.markUnread) > -1) {
-    messageActionsAfterPermission.push(MESSAGE_ACTIONS.markUnread);
+  get currentPlaybackRate() {
+    return this.state.getLatestValue().currentPlaybackRate;
   }
-  if (canMute && messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1) {
-    messageActionsAfterPermission.push(MESSAGE_ACTIONS.mute);
+  get playbackRates() {
+    return this.state.getLatestValue().playbackRates;
   }
-  if (canPin && messageActions.indexOf(MESSAGE_ACTIONS.pin) > -1) {
-    messageActionsAfterPermission.push(MESSAGE_ACTIONS.pin);
+  get durationSeconds() {
+    return this.state.getLatestValue().durationSeconds;
   }
-  if (canQuote && messageActions.indexOf(MESSAGE_ACTIONS.quote) > -1) {
-    messageActionsAfterPermission.push(MESSAGE_ACTIONS.quote);
+  get fileSize() {
+    return this._data.fileSize;
   }
-  if (canReact && messageActions.indexOf(MESSAGE_ACTIONS.react) > -1) {
-    messageActionsAfterPermission.push(MESSAGE_ACTIONS.react);
+  get id() {
+    return this._data.id;
   }
-  if (channelConfig?.["user_message_reminders"] && messageActions.indexOf(MESSAGE_ACTIONS.remindMe) > -1) {
-    messageActionsAfterPermission.push(MESSAGE_ACTIONS.remindMe);
+  get src() {
+    return this._data.src;
   }
-  if (canReply && messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1) {
-    messageActionsAfterPermission.push(MESSAGE_ACTIONS.reply);
+  get mimeType() {
+    return this._data.mimeType;
   }
-  if (channelConfig?.["user_message_reminders"] && messageActions.indexOf(MESSAGE_ACTIONS.saveForLater) > -1) {
-    messageActionsAfterPermission.push(MESSAGE_ACTIONS.saveForLater);
+  get title() {
+    return this._data.title;
   }
-  return messageActionsAfterPermission;
-};
-const ACTIONS_NOT_WORKING_IN_THREAD = [
-  MESSAGE_ACTIONS.pin,
-  MESSAGE_ACTIONS.reply,
-  MESSAGE_ACTIONS.markUnread
-];
-function areMessagesEqual(prevMessage, nextMessage) {
-  const areBaseMessagesEqual = (prevMessage2, nextMessage2) => prevMessage2.deleted_at === nextMessage2.deleted_at && prevMessage2.latest_reactions?.length === nextMessage2.latest_reactions?.length && prevMessage2.own_reactions?.length === nextMessage2.own_reactions?.length && prevMessage2.pinned === nextMessage2.pinned && prevMessage2.reply_count === nextMessage2.reply_count && prevMessage2.show_in_channel === nextMessage2.show_in_channel && prevMessage2.status === nextMessage2.status && prevMessage2.text === nextMessage2.text && prevMessage2.type === nextMessage2.type && prevMessage2.updated_at === nextMessage2.updated_at && prevMessage2.user?.updated_at === nextMessage2.user?.updated_at;
-  return areBaseMessagesEqual(prevMessage, nextMessage) && Boolean(prevMessage.quoted_message) === Boolean(nextMessage.quoted_message) && (!prevMessage.quoted_message && !nextMessage.quoted_message || areBaseMessagesEqual(
-    prevMessage.quoted_message,
-    nextMessage.quoted_message
-  ));
-}
-const areMessagePropsEqual = (prevProps, nextProps) => {
-  const { message: prevMessage, Message: prevMessageUI } = prevProps;
-  const { message: nextMessage, Message: nextMessageUI } = nextProps;
-  if (prevMessageUI !== nextMessageUI) return false;
-  if (nextProps.showDetailedReactions !== prevProps.showDetailedReactions) {
-    return false;
+  get waveformData() {
+    return this._data.waveformData;
   }
-  if (nextProps.closeReactionSelectorOnClick !== prevProps.closeReactionSelectorOnClick) {
-    return false;
+  get secondsElapsed() {
+    return this.state.getLatestValue().secondsElapsed;
   }
-  const messagesAreEqual = areMessagesEqual(prevMessage, nextMessage);
-  if (!messagesAreEqual) return false;
-  const deepEqualProps = deepequal(nextProps.messageActions, prevProps.messageActions) && deepequal(nextProps.readBy, prevProps.readBy) && deepequal(nextProps.deliveredTo, prevProps.deliveredTo) && deepequal(nextProps.highlighted, prevProps.highlighted) && deepequal(nextProps.groupStyles, prevProps.groupStyles) && // last 3 messages can have different group styles
-  deepequal(nextProps.mutes, prevProps.mutes) && deepequal(nextProps.lastReceivedId, prevProps.lastReceivedId);
-  if (!deepEqualProps) return false;
-  return prevProps.messageListRect === nextProps.messageListRect;
-};
-const areMessageUIPropsEqual = (prevProps, nextProps) => {
-  const { lastReceivedId: prevLastReceivedId, message: prevMessage } = prevProps;
-  const { lastReceivedId: nextLastReceivedId, message: nextMessage } = nextProps;
-  if (prevProps.highlighted !== nextProps.highlighted) return false;
-  if (prevProps.threadList !== nextProps.threadList) return false;
-  if (prevProps.endOfGroup !== nextProps.endOfGroup) return false;
-  if (prevProps.mutes?.length !== nextProps.mutes?.length) return false;
-  if (prevProps.readBy?.length !== nextProps.readBy?.length) return false;
-  if (prevProps.deliveredTo?.length !== nextProps.deliveredTo?.length) return false;
-  if (prevProps.groupStyles !== nextProps.groupStyles) return false;
-  if (prevProps.showDetailedReactions !== nextProps.showDetailedReactions) {
-    return false;
+  get progressPercent() {
+    return this.state.getLatestValue().progressPercent;
   }
-  if ((prevMessage.id === prevLastReceivedId || prevMessage.id === nextLastReceivedId) && prevLastReceivedId !== nextLastReceivedId) {
-    return false;
+  get disposed() {
+    return this._disposed;
   }
-  return areMessagesEqual(prevMessage, nextMessage);
-};
-const messageHasReactions = (message) => Object.values(message?.reaction_groups ?? {}).some(({ count }) => count > 0);
-const messageHasQuotedMessage = (message) => !!message?.quoted_message;
-const messageHasAttachments = (message) => !!message?.attachments && !!message.attachments.length;
-const messageHasSingleAttachment = (message) => message?.attachments?.length === 1;
-const messageHasGiphyAttachment = (message) => !!message?.attachments?.some((att) => att.type === "giphy");
-const getImages = (message) => {
-  if (!message?.attachments) {
-    return [];
+  ensureElementRef() {
+    if (this._disposed) {
+      throw new Error("AudioPlayer is disposed");
+    }
+    if (!this.elementRef) {
+      const el = this._pool.acquireElement({
+        ownerId: this.id,
+        src: this.src
+      });
+      this.setRef(el);
+    }
+    return this.elementRef;
   }
-  return message.attachments.filter((item) => item.type === "image");
-};
-const getNonImageAttachments = (message) => {
-  if (!message?.attachments) {
-    return [];
+  setDescriptor(descriptor) {
+    const previousSrc = this.src;
+    this._data = { ...this._data, ...descriptor };
+    if (descriptor.src !== previousSrc && this.elementRef) {
+      this.elementRef.src = descriptor.src;
+    }
+    if (descriptor.src && descriptor.src !== previousSrc) {
+      this.clearMetadataProbe();
+      if (descriptor.durationSeconds == null) {
+        this.setDurationSeconds(void 0);
+        this.preloadMetadata();
+      } else {
+        this.setDurationSeconds(descriptor.durationSeconds);
+      }
+      return;
+    }
+    if (descriptor.durationSeconds != null) {
+      this.setDurationSeconds(descriptor.durationSeconds);
+    }
   }
-  return message.attachments.filter((item) => item.type !== "image");
-};
-const mapToUserNameOrId = (user) => user.name || user.id;
-const getReadByTooltipText = (users, t, client, tooltipUserNameMapper) => {
-  let outStr = "";
-  if (!t) {
-    throw new Error(
-      "getReadByTooltipText was called, but translation function is not available"
-    );
+  releaseElement({ resetState }) {
+    this.clearPendingLoadedMeta();
+    this.clearMetadataProbe();
+    this._restoringPosition = false;
+    if (resetState) {
+      this.stop();
+    } else {
+      this.state.partialNext({ isPlaying: false });
+      if (this.elementRef) {
+        try {
+          this.elementRef.pause();
+        } catch {
+        }
+      }
+    }
+    if (this.elementRef) {
+      this._pool.releaseElement(this.id);
+      this.setRef(null);
+    }
   }
-  if (!tooltipUserNameMapper) {
-    throw new Error(
-      "getReadByTooltipText was called, but tooltipUserNameMapper function is not available"
-    );
+  setPlugins(setter) {
+    this._plugins = setter(this.plugins).reduce((acc, plugin) => {
+      if (plugin.id) {
+        acc.set(plugin.id, plugin);
+      }
+      return acc;
+    }, /* @__PURE__ */ new Map());
   }
-  const otherUsers = users.filter((item) => item && client?.user && item.id !== client.user.id).map(tooltipUserNameMapper);
-  const slicedArr = otherUsers.slice(0, 5);
-  const restLength = otherUsers.length - slicedArr.length;
-  if (slicedArr.length === 1) {
-    outStr = `${slicedArr[0]} `;
-  } else if (slicedArr.length === 2) {
-    outStr = t("{{ firstUser }} and {{ secondUser }}", {
-      firstUser: slicedArr[0],
-      secondUser: slicedArr[1]
+}
+class AudioPlayerPool {
+  constructor(config) {
+    this.state = new streamChat.StateStore({
+      activeAudioPlayer: null
     });
-  } else if (slicedArr.length > 2) {
-    if (restLength === 0) {
-      const lastUser = slicedArr.splice(slicedArr.length - 1, 1);
-      outStr = t("{{ commaSeparatedUsers }}, and {{ lastUser }}", {
-        commaSeparatedUsers: slicedArr.join(", "),
-        lastUser
+    this.pool = /* @__PURE__ */ new Map();
+    this.audios = /* @__PURE__ */ new Map();
+    this.sharedAudio = null;
+    this.sharedOwnerId = null;
+    this.getOrAdd = (params) => {
+      const { playbackRates, plugins, ...descriptor } = params;
+      let player = this.pool.get(params.id);
+      if (player) {
+        if (!player.disposed) {
+          player.setDescriptor(descriptor);
+          return player;
+        }
+        this.deregister(params.id);
+      }
+      player = new AudioPlayer({
+        playbackRates,
+        plugins,
+        ...descriptor,
+        pool: this
       });
-    } else {
-      outStr = t("{{ commaSeparatedUsers }} and {{ moreCount }} more", {
-        commaSeparatedUsers: slicedArr.join(", "),
-        moreCount: restLength
+      this.pool.set(params.id, player);
+      return player;
+    };
+    this.acquireElement = ({ ownerId, src }) => {
+      if (!this.allowConcurrentPlayback) {
+        if (!this.sharedAudio) {
+          this.sharedAudio = new Audio();
+        }
+        if (this.sharedOwnerId && this.sharedOwnerId !== ownerId) {
+          const previous = this.pool.get(this.sharedOwnerId);
+          previous?.pause();
+          previous?.releaseElementForHandoff();
+        }
+        this.sharedOwnerId = ownerId;
+        if (this.sharedAudio.src !== src) {
+          this.sharedAudio.src = src;
+        }
+        return this.sharedAudio;
+      }
+      let audio = this.audios.get(ownerId);
+      if (!audio) {
+        audio = new Audio();
+        this.audios.set(ownerId, audio);
+      }
+      if (audio.src !== src) {
+        audio.src = src;
+      }
+      return audio;
+    };
+    this.releaseElement = (ownerId) => {
+      if (!this.allowConcurrentPlayback) {
+        if (this.sharedOwnerId !== ownerId) return;
+        const el2 = this.sharedAudio;
+        if (el2) {
+          try {
+            el2.pause();
+          } catch {
+          }
+          el2.removeAttribute("src");
+          el2.load();
+        }
+        this.sharedOwnerId = null;
+        return;
+      }
+      const el = this.audios.get(ownerId);
+      if (!el) return;
+      try {
+        el.pause();
+      } catch {
+      }
+      el.removeAttribute("src");
+      el.load();
+      this.audios.delete(ownerId);
+    };
+    this.setActiveAudioPlayer = (activeAudioPlayer) => {
+      if (this.allowConcurrentPlayback) return;
+      this.state.partialNext({ activeAudioPlayer });
+    };
+    this.remove = (id) => {
+      const player = this.pool.get(id);
+      if (!player) return;
+      player.requestRemoval();
+    };
+    this.clear = () => {
+      this.players.forEach((player) => {
+        this.remove(player.id);
+      });
+    };
+    this.registerSubscriptions = () => {
+      this.players.forEach((p) => {
+        if (p.elementRef) {
+          p.registerSubscriptions();
+        }
+      });
+    };
+    this.allowConcurrentPlayback = !!config?.allowConcurrentPlayback;
+  }
+  get players() {
+    return Array.from(this.pool.values());
+  }
+  get activeAudioPlayer() {
+    return this.state.getLatestValue().activeAudioPlayer;
+  }
+  /** Removes the AudioPlayer instance from the pool of players */
+  deregister(id) {
+    if (this.pool.has(id)) {
+      this.pool.delete(id);
+    }
+    if (this.activeAudioPlayer?.id === id) {
+      this.setActiveAudioPlayer(null);
+    }
+  }
+}
+const SEEK_NOT_SUPPORTED_NOTIFICATION_DEBOUNCE_INTERVAL_MS = 1e3;
+const audioPlayerNotificationsPluginFactory = ({
+  addNotification,
+  panel = "channel",
+  t
+}) => {
+  const errors = {
+    "failed-to-start": new Error(t("Failed to play the recording")),
+    "not-playable": new Error(
+      t("Recording format is not supported and cannot be reproduced")
+    ),
+    "seek-not-supported": new Error(t("Cannot seek in the recording"))
+  };
+  let lastSeekNotSupportedNotificationAt;
+  return {
+    id: "AudioPlayerNotificationsPlugin",
+    onError: ({ errCode, error: e }) => {
+      if (errCode === "seek-not-supported") {
+        const now = Date.now();
+        if (typeof lastSeekNotSupportedNotificationAt === "number" && now - lastSeekNotSupportedNotificationAt < SEEK_NOT_SUPPORTED_NOTIFICATION_DEBOUNCE_INTERVAL_MS) {
+          return;
+        }
+        lastSeekNotSupportedNotificationAt = now;
+      }
+      const error = (errCode && errors[errCode]) ?? e ?? new Error(t("Error reproducing the recording"));
+      addNotification({
+        emitter: "AudioPlayer",
+        error,
+        message: error.message,
+        severity: "error",
+        targetPanels: [panel],
+        type: "browser:audio:playback:error"
       });
     }
-  }
-  return outStr;
+  };
 };
-const countEmojis = (text) => {
-  const matches = text?.match(emojiRegex());
-  return matches ? matches.length : 0;
+const AudioPlayerContext = React.createContext({
+  audioPlayers: null
+});
+const WithAudioPlayback = ({
+  allowConcurrentPlayback,
+  children
+}) => {
+  const [audioPlayers] = React.useState(() => new AudioPlayerPool({ allowConcurrentPlayback }));
+  React.useEffect(
+    () => () => {
+      audioPlayers.clear();
+    },
+    [audioPlayers]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AudioPlayerContext.Provider, { value: { audioPlayers }, children });
 };
-const messageTextHasEmojisOnly = (message) => {
-  if (!message.text) return false;
-  const noEmojis = message.text.replace(emojiRegex(), "");
-  const noSpace = noEmojis.replace(/[\s\n]/gm, "");
-  return !noSpace;
+const makeAudioPlayerId = ({ requester, src }) => `${requester ?? "requester-unknown"}:${src}`;
+const useAudioPlayer = ({
+  durationSeconds,
+  fileSize,
+  mimeType,
+  playbackRates,
+  plugins,
+  requester = "",
+  src,
+  title,
+  waveformData
+}) => {
+  const { addNotification } = useNotificationApi();
+  const panel = useNotificationTarget();
+  const { t } = useTranslationContext();
+  const { audioPlayers } = React.useContext(AudioPlayerContext);
+  const audioPlayer = src && audioPlayers ? audioPlayers.getOrAdd({
+    durationSeconds,
+    fileSize,
+    id: makeAudioPlayerId({ requester, src }),
+    mimeType,
+    playbackRates,
+    plugins,
+    src,
+    title,
+    waveformData
+  }) : void 0;
+  React.useEffect(() => {
+    if (!audioPlayer) return;
+    const notificationsPlugin = audioPlayerNotificationsPluginFactory({
+      addNotification,
+      panel,
+      t
+    });
+    audioPlayer.setPlugins((currentPlugins) => [
+      ...currentPlugins.filter((plugin) => plugin.id !== notificationsPlugin.id),
+      notificationsPlugin
+    ]);
+  }, [addNotification, audioPlayer, panel, t]);
+  return audioPlayer;
+};
+const activeAudioPlayerSelector = ({ activeAudioPlayer }) => ({
+  activeAudioPlayer
+});
+const useActiveAudioPlayer = () => {
+  const { audioPlayers } = React.useContext(AudioPlayerContext);
+  const { activeAudioPlayer } = useStateStore(audioPlayers?.state, activeAudioPlayerSelector) ?? {};
+  return activeAudioPlayer;
 };
-const isMessageErrorRetryable = (message) => message.status === "failed" && message.error?.status !== 403;
-const isNetworkSendFailure = (message) => message.status === "failed" && message.error?.status === 0;
-const isMessageBounced = (message) => message.type === "error" && (message.moderation_details?.action === "MESSAGE_RESPONSE_ACTION_BOUNCE" || message.moderation?.action === "bounce");
-const isMessageBlocked = (message) => message.shadowed || message.type === "error" && (message.moderation_details?.action === "MESSAGE_RESPONSE_ACTION_REMOVE" || message.moderation?.action === "remove");
-const isMessageDeleted = (message) => Boolean(message.deleted_at || message.type === "deleted" || message.deleted_for_me);
-const isMessageEdited = (message) => !!message.message_text_updated_at;
-const hasResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
-function autoMiddlewareFor(p) {
-  if (!String(p).startsWith("auto")) return null;
-  const alignment = p === "auto-start" ? "start" : p === "auto-end" ? "end" : void 0;
-  return react.autoPlacement({ alignment });
-}
-function toOffsetMw(opt) {
-  if (opt == null) return null;
-  if (Array.isArray(opt)) {
-    const [crossAxis, mainAxis] = opt;
-    return react.offset({ crossAxis, mainAxis });
-  }
-  if (typeof opt === "number") return react.offset(opt);
-  return react.offset(opt);
-}
-function usePopoverPosition({
-  allowFlip = true,
-  allowShift = true,
-  autoUpdateOptions,
-  fitAvailableSpace = false,
-  freeze = false,
-  offset,
-  placement = "bottom-start",
-  shiftOptions
-}) {
-  const autoMw = autoMiddlewareFor(placement);
-  const offsetMiddleware = toOffsetMw(offset);
-  const isSidePlacement = placement.startsWith("left") || placement.startsWith("right");
-  const mergedShiftOptions = shiftOptions ? { padding: 8, ...shiftOptions } : { padding: 8 };
-  const middleware = [
-    // offset first (mirrors common Popper setups)
-    ...offsetMiddleware ? [offsetMiddleware] : [],
-    // choose between autoPlacement (Popper's "auto*") OR flip()
-    // only allow flip when not explicitly 'left*' or 'right*'
-    ...autoMw ? [autoMw] : allowFlip && !isSidePlacement ? [react.flip()] : [],
-    // viewport collision adjustments
-    ...allowShift ? [react.shift(mergedShiftOptions)] : [],
-    // optional size constraining
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    ...fitAvailableSpace ? [react.size({ apply: () => {
-    } })] : []
-  ];
-  const seedPlacement = String(placement).startsWith("auto") ? "bottom" : placement;
-  return react.useFloating({
-    middleware,
-    placement: seedPlacement,
-    strategy: "fixed",
-    whileElementsMounted: freeze ? void 0 : (reference, floating, update) => react.autoUpdate(reference, floating, update, {
-      ancestorResize: true,
-      ancestorScroll: true,
-      animationFrame: false,
-      elementResize: hasResizeObserver,
-      ...autoUpdateOptions
-    })
-  });
-}
-const LegacyThreadContext = React.createContext({ legacyThread: void 0 });
-const useLegacyThreadContext = () => React.useContext(LegacyThreadContext);
 const cooldownTimerStateSelector = (state) => ({
   isCooldownActive: !!state.cooldownRemaining
 });
@@ -4200,7 +4271,31 @@ const UnreadCountBadge = ({
     }
   )
 ] });
+const DEFAULT_CHAT_VIEW_A11Y_CONTEXT_VALUE = {
+  chatViewPanelIds: {
+    channels: "str-chat__chat-view-panel-channels",
+    threads: "str-chat__chat-view-panel-threads"
+  },
+  chatViewTabIds: {
+    channels: "str-chat__chat-view-tab-channels",
+    threads: "str-chat__chat-view-tab-threads"
+  }
+};
+const createChatViewA11yContextValue = (chatViewId) => ({
+  // Keep IDs unique per ChatView instance so ARIA references do not collide.
+  chatViewPanelIds: {
+    channels: `str-chat__chat-view-${chatViewId}-panel-channels`,
+    threads: `str-chat__chat-view-${chatViewId}-panel-threads`
+  },
+  chatViewTabIds: {
+    channels: `str-chat__chat-view-${chatViewId}-tab-channels`,
+    threads: `str-chat__chat-view-${chatViewId}-tab-threads`
+  }
+});
 const ChatViewContext = React.createContext(void 0);
+const ChatViewA11yContext = React.createContext(
+  DEFAULT_CHAT_VIEW_A11Y_CONTEXT_VALUE
+);
 const useChatViewContext = () => {
   const value = React.useContext(ChatViewContext);
   if (!value) {
@@ -4211,16 +4306,33 @@ const useChatViewContext = () => {
   }
   return value;
 };
+const useChatViewA11yContext = () => React.useContext(ChatViewA11yContext);
 const ChatView = ({ children }) => {
   const [activeChatView, setActiveChatView] = React.useState("channels");
+  const chatViewId = React.useId().replace(/:/g, "");
   const { theme } = useChatContext();
+  const a11yValue = React.useMemo(
+    () => createChatViewA11yContextValue(chatViewId),
+    [chatViewId]
+  );
   const value = React.useMemo(() => ({ activeChatView, setActiveChatView }), [activeChatView]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ChatViewContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("str-chat", theme, "str-chat__chat-view"), children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ChatViewA11yContext.Provider, { value: a11yValue, children: /* @__PURE__ */ jsxRuntime.jsx(ChatViewContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("str-chat", theme, "str-chat__chat-view"), children }) }) });
 };
 const ChannelsView = ({ children }) => {
   const { activeChatView } = useChatViewContext();
-  if (activeChatView !== "channels") return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__chat-view__channels", children });
+  const { chatViewPanelIds, chatViewTabIds } = useChatViewA11yContext();
+  const isActive = activeChatView === "channels";
+  if (!isActive) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-labelledby": chatViewTabIds.channels,
+      className: "str-chat__chat-view__channels",
+      id: chatViewPanelIds.channels,
+      role: "tabpanel",
+      children
+    }
+  );
 };
 const ThreadsViewContext = React.createContext({
   activeThread: void 0,
@@ -4229,10 +4341,21 @@ const ThreadsViewContext = React.createContext({
 const useThreadsViewContext = () => React.useContext(ThreadsViewContext);
 const ThreadsView = ({ children }) => {
   const { activeChatView } = useChatViewContext();
+  const { chatViewPanelIds, chatViewTabIds } = useChatViewA11yContext();
   const [activeThread, setActiveThread] = React.useState(void 0);
   const value = React.useMemo(() => ({ activeThread, setActiveThread }), [activeThread]);
-  if (activeChatView !== "threads") return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(ThreadsViewContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__chat-view__threads", children }) });
+  const isActive = activeChatView === "threads";
+  if (!isActive) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(ThreadsViewContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-labelledby": chatViewTabIds.threads,
+      className: "str-chat__chat-view__threads",
+      id: chatViewPanelIds.threads,
+      role: "tabpanel",
+      children
+    }
+  ) });
 };
 const useActiveThread = ({ activeThread }) => {
   React.useEffect(() => {
@@ -4328,17 +4451,22 @@ const ChatViewChannelsSelectorButton = ({
   iconOnly = true
 }) => {
   const { activeChatView, setActiveChatView } = useChatViewContext();
+  const { chatViewPanelIds, chatViewTabIds } = useChatViewA11yContext();
   const { t } = useTranslationContext();
   const isActive = activeChatView === "channels";
   return /* @__PURE__ */ jsxRuntime.jsx(
     ChatViewSelectorButton,
     {
       ActiveIcon: IconMessageBubbleFill,
+      "aria-controls": chatViewPanelIds.channels,
       "aria-selected": isActive,
       Icon: IconMessageBubble,
       iconOnly,
+      id: chatViewTabIds.channels,
       isActive,
+      onClick: () => setActiveChatView("channels"),
       onPointerDown: () => setActiveChatView("channels"),
+      tabIndex: 0,
       text: t("Channels")
     }
   );
@@ -4354,17 +4482,22 @@ const ChatViewThreadsSelectorButton = ({
     unreadThreadCount: 0
   };
   const { activeChatView, setActiveChatView } = useChatViewContext();
+  const { chatViewPanelIds, chatViewTabIds } = useChatViewA11yContext();
   const { t } = useTranslationContext();
   const isActive = activeChatView === "threads";
   return /* @__PURE__ */ jsxRuntime.jsx(
     ChatViewSelectorButton,
     {
       ActiveIcon: IconThreadFill,
+      "aria-controls": chatViewPanelIds.threads,
       "aria-selected": isActive,
       Icon: IconThread,
       iconOnly,
+      id: chatViewTabIds.threads,
       isActive,
+      onClick: () => setActiveChatView("threads"),
       onPointerDown: () => setActiveChatView("threads"),
+      tabIndex: 0,
       text: t("Threads"),
       children: /* @__PURE__ */ jsxRuntime.jsx(UnreadCountBadge, { count: unreadThreadCount, position: "top-right", children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(IconThreadFill, {}) : /* @__PURE__ */ jsxRuntime.jsx(IconThread, {}) })
     }
@@ -4383,7 +4516,18 @@ const defaultChatViewSelectorItemSet = [
 const ChatViewSelector = ({
   iconOnly = true,
   itemSet = defaultChatViewSelectorItemSet
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__chat-view__selector", children: itemSet.map(({ Component, type }) => /* @__PURE__ */ jsxRuntime.jsx(Component, { iconOnly }, type)) });
+}) => {
+  const { t } = useTranslationContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-label": t("aria/Chat view tabs"),
+      className: "str-chat__chat-view__selector",
+      role: "tablist",
+      children: itemSet.map(({ Component, type }) => /* @__PURE__ */ jsxRuntime.jsx(Component, { iconOnly }, type))
+    }
+  );
+};
 ChatView.Channels = ChannelsView;
 ChatView.Threads = ThreadsView;
 ChatView.ThreadAdapter = ThreadAdapter;
@@ -4509,71 +4653,6 @@ const useNotificationApi = () => {
     startNotificationTimeout
   };
 };
-const AudioPlayerContext = React.createContext({
-  audioPlayers: null
-});
-const WithAudioPlayback = ({
-  allowConcurrentPlayback,
-  children
-}) => {
-  const [audioPlayers] = React.useState(() => new AudioPlayerPool({ allowConcurrentPlayback }));
-  React.useEffect(
-    () => () => {
-      audioPlayers.clear();
-    },
-    [audioPlayers]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(AudioPlayerContext.Provider, { value: { audioPlayers }, children });
-};
-const makeAudioPlayerId = ({ requester, src }) => `${requester ?? "requester-unknown"}:${src}`;
-const useAudioPlayer = ({
-  durationSeconds,
-  fileSize,
-  mimeType,
-  playbackRates,
-  plugins,
-  requester = "",
-  src,
-  title,
-  waveformData
-}) => {
-  const { addNotification } = useNotificationApi();
-  const panel = useNotificationTarget();
-  const { t } = useTranslationContext();
-  const { audioPlayers } = React.useContext(AudioPlayerContext);
-  const audioPlayer = src && audioPlayers ? audioPlayers.getOrAdd({
-    durationSeconds,
-    fileSize,
-    id: makeAudioPlayerId({ requester, src }),
-    mimeType,
-    playbackRates,
-    plugins,
-    src,
-    title,
-    waveformData
-  }) : void 0;
-  React.useEffect(() => {
-    if (!audioPlayer) return;
-    const notificationsPlugin = audioPlayerNotificationsPluginFactory({
-      addNotification,
-      panel,
-      t
-    });
-    audioPlayer.setPlugins((currentPlugins) => [
-      ...currentPlugins.filter((plugin) => plugin.id !== notificationsPlugin.id),
-      notificationsPlugin
-    ]);
-  }, [addNotification, audioPlayer, panel, t]);
-  return audioPlayer;
-};
-const activeAudioPlayerSelector = ({ activeAudioPlayer }) => ({
-  activeAudioPlayer
-});
-const useActiveAudioPlayer = () => {
-  const { audioPlayers } = React.useContext(AudioPlayerContext);
-  const { activeAudioPlayer } = useStateStore(audioPlayers?.state, activeAudioPlayerSelector) ?? {};
-  return activeAudioPlayer;
-};
 exports.ACTIONS_NOT_WORKING_IN_THREAD = ACTIONS_NOT_WORKING_IN_THREAD;
 exports.AudioPlayer = AudioPlayer;
 exports.Button = Button;
@@ -4773,4 +4852,4 @@ exports.useThreadsViewContext = useThreadsViewContext;
 exports.useTranslationContext = useTranslationContext;
 exports.useTypingContext = useTypingContext;
 exports.validateAndGetMessage = validateAndGetMessage;
-//# sourceMappingURL=WithAudioPlayback.ba05c770.js.map
+//# sourceMappingURL=useNotificationApi.fd802923.js.map