stream-chat-react 13.9.0 → 13.10.0

package/dist/experimental/index.browser.cjs

@@ -327,7 +327,7 @@ module.exports = __toCommonJS(experimental_exports);
 
 // src/experimental/MessageActions/MessageActions.tsx
 var import_clsx9 = __toESM(require("clsx"));
-var import_react42 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 
 // src/context/ChannelListContext.tsx
 var import_react = __toESM(require("react"));
@@ -438,6 +438,14 @@ var useDialog = ({ dialogManagerId, id }) => {
   );
   return dialogManager.getOrCreate({ id });
 };
+var useDialogOnNearestManager = ({ id }) => {
+  const { dialogManager } = useNearestDialogManagerContext() ?? {};
+  const dialog = useDialog({ dialogManagerId: dialogManager?.id, id });
+  return {
+    dialog,
+    dialogManager
+  };
+};
 var useDialogIsOpen = (id, dialogManagerId) => {
   const { dialogManager } = useDialogManager({ dialogManagerId });
   const dialogIsOpenSelector = (0, import_react6.useCallback)(
@@ -468,10 +476,11 @@ var Portal = ({
 // src/components/Dialog/DialogPortal.tsx
 var DialogPortalEntry = ({
   children,
-  dialogId
+  dialogId,
+  dialogManagerId
 }) => {
-  const { dialogManager } = useDialogManager({ dialogId });
-  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager.id);
+  const { dialogManager } = useDialogManager({ dialogId, dialogManagerId });
+  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);
   const getPortalDestination = (0, import_react8.useCallback)(
     () => document.querySelector(`div[data-str-chat__portal-id="${dialogManager.id}"]`),
     [dialogManager.id]
@@ -558,6 +567,7 @@ var useDialogManager = ({
   }
   return dialogManagerContext;
 };
+var useNearestDialogManagerContext = () => (0, import_react9.useContext)(DialogManagerProviderContext);
 
 // src/context/MessageContext.tsx
 var import_react10 = __toESM(require("react"));
@@ -603,7 +613,7 @@ var useTranslationContext = (componentName) => {
 };
 
 // src/components/MessageInput/hooks/useMessageComposer.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_stream_chat2 = require("stream-chat");
 
 // src/components/Threads/ThreadContext.tsx
@@ -773,7 +783,7 @@ var Avatar = (props) => {
 
 // src/components/ChannelPreview/ChannelPreview.tsx
 var import_lodash2 = __toESM(require("lodash.throttle"));
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 
 // src/components/ChannelPreview/ChannelPreviewMessenger.tsx
 var import_react18 = __toESM(require("react"));
@@ -982,10 +992,10 @@ var useIsChannelMuted = (channel) => {
 };
 
 // src/components/ChannelPreview/hooks/useChannelPreviewInfo.ts
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/components/ChannelPreview/utils.tsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 
 // node_modules/devlop/lib/default.js
 function ok() {
@@ -10643,57 +10653,111 @@ var useMessageReminder = (messageId) => {
 
 // src/components/Dialog/ButtonWithSubmenu.tsx
 var import_clsx5 = __toESM(require("clsx"));
-var import_react22 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 
 // src/components/Dialog/DialogAnchor.tsx
 var import_clsx4 = __toESM(require("clsx"));
-var import_react21 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var import_focus = require("@react-aria/focus");
-var import_react_popper = require("react-popper");
+
+// src/components/Dialog/hooks/usePopoverPosition.ts
+var import_react21 = require("@floating-ui/react");
+var 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 (0, import_react21.autoPlacement)({ alignment });
+}
+function toOffsetMw(opt) {
+  if (opt == null) return null;
+  if (Array.isArray(opt)) {
+    const [crossAxis, mainAxis] = opt;
+    return (0, import_react21.offset)({ crossAxis, mainAxis });
+  }
+  if (typeof opt === "number") return (0, import_react21.offset)(opt);
+  return (0, import_react21.offset)(opt);
+}
+function usePopoverPosition({
+  allowFlip = true,
+  allowShift = true,
+  autoUpdateOptions,
+  fitAvailableSpace = false,
+  freeze = false,
+  offset,
+  placement = "bottom-start"
+}) {
+  const autoMw = autoMiddlewareFor(placement);
+  const offsetMiddleware = toOffsetMw(offset);
+  const isSidePlacement = placement.startsWith("left") || placement.startsWith("right");
+  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 ? [(0, import_react21.flip)()] : [],
+    // viewport collision adjustments
+    ...allowShift ? [(0, import_react21.shift)({ padding: 8 })] : [],
+    // optional size constraining
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    ...fitAvailableSpace ? [(0, import_react21.size)({ apply: () => {
+    } })] : []
+  ];
+  const seedPlacement = String(placement).startsWith("auto") ? "bottom" : placement;
+  return (0, import_react21.useFloating)({
+    middleware,
+    placement: seedPlacement,
+    strategy: "fixed",
+    whileElementsMounted: freeze ? void 0 : (reference, floating, update) => (0, import_react21.autoUpdate)(reference, floating, update, {
+      ancestorResize: true,
+      ancestorScroll: true,
+      animationFrame: false,
+      elementResize: hasResizeObserver,
+      ...autoUpdateOptions
+    })
+  });
+}
+
+// src/components/Dialog/DialogAnchor.tsx
 function useDialogAnchor({
   allowFlip,
   open,
   placement,
   referenceElement
 }) {
-  const [popperElement, setPopperElement] = (0, import_react21.useState)(null);
-  const { attributes, styles, update } = (0, import_react_popper.usePopper)(referenceElement, popperElement, {
-    modifiers: [
-      {
-        enabled: !!allowFlip,
-        // Prevent flipping
-        name: "flip"
-      },
-      {
-        name: "eventListeners",
-        options: {
-          // It's not safe to update popper position on resize and scroll, since popper's
-          // reference element might not be visible at the time.
-          resize: false,
-          scroll: false
-        }
-      }
-    ],
+  const [popperElement, setPopperElement] = (0, import_react22.useState)(null);
+  const { refs, strategy, update, x, y } = usePopoverPosition({
+    allowFlip,
+    freeze: true,
     placement
   });
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
+    refs.setReference(referenceElement);
+  }, [referenceElement, refs]);
+  (0, import_react22.useEffect)(() => {
+    refs.setFloating(popperElement);
+  }, [popperElement, refs]);
+  (0, import_react22.useEffect)(() => {
     if (open && popperElement) {
       update?.();
     }
-  }, [open, popperElement, update]);
+  }, [open, placement, popperElement, update]);
   if (popperElement && !open) {
     setPopperElement(null);
   }
   return {
-    attributes,
     setPopperElement,
-    styles
+    styles: {
+      left: x ?? 0,
+      position: strategy,
+      top: y ?? 0
+    }
   };
 }
 var DialogAnchor = ({
   allowFlip = true,
   children,
   className,
+  dialogManagerId,
   focus = true,
   id,
   placement = "auto",
@@ -10702,15 +10766,15 @@ var DialogAnchor = ({
   trapFocus,
   ...restDivProps
 }) => {
-  const dialog = useDialog({ id });
-  const open = useDialogIsOpen(id);
-  const { attributes, setPopperElement, styles } = useDialogAnchor({
+  const dialog = useDialog({ dialogManagerId, id });
+  const open = useDialogIsOpen(id, dialogManagerId);
+  const { setPopperElement, styles } = useDialogAnchor({
     allowFlip,
     open,
     placement,
     referenceElement
   });
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!open) return;
     const hideOnEscape = (event) => {
       if (event.key !== "Escape") return;
@@ -10724,15 +10788,14 @@ var DialogAnchor = ({
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ import_react21.default.createElement(DialogPortalEntry, { dialogId: id }, /* @__PURE__ */ import_react21.default.createElement(import_focus.FocusScope, { autoFocus: focus, contain: trapFocus, restoreFocus: true }, /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react22.default.createElement(DialogPortalEntry, { dialogId: id, dialogManagerId }, /* @__PURE__ */ import_react22.default.createElement(import_focus.FocusScope, { autoFocus: focus, contain: trapFocus, restoreFocus: true }, /* @__PURE__ */ import_react22.default.createElement(
     "div",
     {
       ...restDivProps,
-      ...attributes.popper,
       className: (0, import_clsx4.default)("str-chat__dialog-contents", className),
       "data-testid": "str-chat__dialog-contents",
       ref: setPopperElement,
-      style: styles.popper,
+      style: styles,
       tabIndex: typeof tabIndex !== "undefined" ? tabIndex : 0
     },
     children
@@ -10748,26 +10811,26 @@ var ButtonWithSubmenu = ({
   submenuContainerProps,
   ...buttonProps
 }) => {
-  const buttonRef = (0, import_react22.useRef)(null);
-  const [dialogContainer, setDialogContainer] = (0, import_react22.useState)(null);
-  const keepSubmenuOpen = (0, import_react22.useRef)(false);
-  const dialogCloseTimeout = (0, import_react22.useRef)(null);
-  const dialogId = (0, import_react22.useMemo)(() => `submenu-${Math.random().toString(36).slice(2)}`, []);
-  const dialog = useDialog({ id: dialogId });
-  const dialogIsOpen = useDialogIsOpen(dialogId);
-  const { attributes, setPopperElement, styles } = useDialogAnchor({
+  const buttonRef = (0, import_react23.useRef)(null);
+  const [dialogContainer, setDialogContainer] = (0, import_react23.useState)(null);
+  const keepSubmenuOpen = (0, import_react23.useRef)(false);
+  const dialogCloseTimeout = (0, import_react23.useRef)(null);
+  const dialogId = (0, import_react23.useMemo)(() => `submenu-${Math.random().toString(36).slice(2)}`, []);
+  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
+  const { setPopperElement, styles } = useDialogAnchor({
     open: dialogIsOpen,
     placement,
     referenceElement: buttonRef.current
   });
-  const closeDialogLazily = (0, import_react22.useCallback)(() => {
+  const closeDialogLazily = (0, import_react23.useCallback)(() => {
     if (dialogCloseTimeout.current) clearTimeout(dialogCloseTimeout.current);
     dialogCloseTimeout.current = setTimeout(() => {
       if (keepSubmenuOpen.current) return;
       dialog.close();
     }, 100);
   }, [dialog]);
-  const handleClose = (0, import_react22.useCallback)(
+  const handleClose = (0, import_react23.useCallback)(
     (event) => {
       const parentButton = buttonRef.current;
       if (!dialogIsOpen || !parentButton) return;
@@ -10782,7 +10845,7 @@ var ButtonWithSubmenu = ({
     dialog.open();
     keepSubmenuOpen.current = true;
   };
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const parentButton = buttonRef.current;
     if (!dialogIsOpen || !parentButton) return;
     const hideOnEscape = (event) => {
@@ -10795,7 +10858,7 @@ var ButtonWithSubmenu = ({
       document.removeEventListener("keyup", hideOnEscape, { capture: true });
     };
   }, [dialogIsOpen, handleClose]);
-  return /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, /* @__PURE__ */ import_react22.default.createElement(
+  return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
     "button",
     {
       "aria-selected": "false",
@@ -10821,10 +10884,9 @@ var ButtonWithSubmenu = ({
       ...buttonProps
     },
     children
-  ), dialogIsOpen && /* @__PURE__ */ import_react22.default.createElement(
+  ), dialogIsOpen && /* @__PURE__ */ import_react23.default.createElement(
     "div",
     {
-      ...attributes.popper,
       onBlur: (event) => {
         const isBlurredDescendant = event.relatedTarget instanceof Node && dialogContainer?.contains(event.relatedTarget);
         if (isBlurredDescendant) return;
@@ -10845,26 +10907,26 @@ var ButtonWithSubmenu = ({
         setPopperElement(element3);
         setDialogContainer(element3);
       },
-      style: styles.popper,
+      style: styles,
       tabIndex: -1,
       ...submenuContainerProps
     },
-    /* @__PURE__ */ import_react22.default.createElement(Submenu, null)
+    /* @__PURE__ */ import_react23.default.createElement(Submenu, null)
   ));
 };
 
 // src/components/MessageActions/MessageActions.tsx
 var import_clsx6 = __toESM(require("clsx"));
-var import_react25 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 
 // src/components/MessageActions/RemindMeSubmenu.tsx
-var import_react23 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var RemindMeActionButton = ({
   className,
   isMine
 }) => {
   const { t } = useTranslationContext();
-  return /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react24.default.createElement(
     ButtonWithSubmenu,
     {
       "aria-selected": "false",
@@ -10879,14 +10941,14 @@ var RemindMeSubmenu = () => {
   const { t } = useTranslationContext();
   const { client } = useChatContext();
   const { message } = useMessageContext();
-  return /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react24.default.createElement(
     "div",
     {
       "aria-label": t("aria/Remind Me Options"),
       className: "str-chat__message-actions-box__submenu",
       role: "listbox"
     },
-    client.reminders.scheduledOffsetsMs.map((offsetMs) => /* @__PURE__ */ import_react23.default.createElement(
+    client.reminders.scheduledOffsetsMs.map((offsetMs) => /* @__PURE__ */ import_react24.default.createElement(
       "button",
       {
         className: "str-chat__message-actions-list-item-button",
@@ -10904,8 +10966,8 @@ var RemindMeSubmenu = () => {
 };
 
 // src/components/Message/icons.tsx
-var import_react24 = __toESM(require("react"));
-var ActionsIcon = ({ className = "" }) => /* @__PURE__ */ import_react24.default.createElement(
+var import_react25 = __toESM(require("react"));
+var ActionsIcon = ({ className = "" }) => /* @__PURE__ */ import_react25.default.createElement(
   "svg",
   {
     className,
@@ -10914,7 +10976,7 @@ var ActionsIcon = ({ className = "" }) => /* @__PURE__ */ import_react24.default
     width: "11",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ import_react24.default.createElement(
+  /* @__PURE__ */ import_react25.default.createElement(
     "path",
     {
       d: "M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z",
@@ -10922,7 +10984,7 @@ var ActionsIcon = ({ className = "" }) => /* @__PURE__ */ import_react24.default
     }
   )
 );
-var ReactionIcon = ({ className = "" }) => /* @__PURE__ */ import_react24.default.createElement(
+var ReactionIcon = ({ className = "" }) => /* @__PURE__ */ import_react25.default.createElement(
   "svg",
   {
     className,
@@ -10931,9 +10993,9 @@ var ReactionIcon = ({ className = "" }) => /* @__PURE__ */ import_react24.defaul
     width: "12",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ import_react24.default.createElement("g", { clipRule: "evenodd", fillRule: "evenodd" }, /* @__PURE__ */ import_react24.default.createElement("path", { d: "M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z" }), /* @__PURE__ */ import_react24.default.createElement("path", { d: "M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z" }))
+  /* @__PURE__ */ import_react25.default.createElement("g", { clipRule: "evenodd", fillRule: "evenodd" }, /* @__PURE__ */ import_react25.default.createElement("path", { d: "M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z" }))
 );
-var ThreadIcon = ({ className = "" }) => /* @__PURE__ */ import_react24.default.createElement("svg", { className, height: "10", width: "14", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react24.default.createElement(
+var ThreadIcon = ({ className = "" }) => /* @__PURE__ */ import_react25.default.createElement("svg", { className, height: "10", width: "14", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react25.default.createElement(
   "path",
   {
     d: "M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z",
@@ -10954,8 +11016,8 @@ var MessageActionsWrapper = (props) => {
     "data-testid": "message-actions",
     onClick: toggleOpen
   };
-  if (inline) return /* @__PURE__ */ import_react25.default.createElement("span", { ...wrapperProps }, children);
-  return /* @__PURE__ */ import_react25.default.createElement("div", { ...wrapperProps }, children);
+  if (inline) return /* @__PURE__ */ import_react26.default.createElement("span", { ...wrapperProps }, children);
+  return /* @__PURE__ */ import_react26.default.createElement("div", { ...wrapperProps }, children);
 };
 
 // src/components/Message/renderText/remarkPlugins/htmlToTextPlugin.ts
@@ -14077,20 +14139,20 @@ function remarkGfm(options) {
 }
 
 // src/components/Reactions/ReactionSelectorWithButton.tsx
-var import_react30 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 
 // src/components/Reactions/ReactionSelector.tsx
-var import_react29 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var import_clsx7 = __toESM(require("clsx"));
 
 // src/components/Reactions/reactionOptions.tsx
-var import_react28 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 
 // src/components/Reactions/StreamEmoji.tsx
-var import_react27 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 
 // src/components/Reactions/SpriteImage.tsx
-var import_react26 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 
 // src/components/Reactions/utils/utils.ts
 var isMutableRef = (ref) => {
@@ -14125,13 +14187,13 @@ var SpriteImage = ({
   style,
   width
 }) => {
-  const [[spriteWidth, spriteHeight], setSpriteDimensions] = (0, import_react26.useState)([0, 0]);
-  (0, import_react26.useEffect)(() => {
+  const [[spriteWidth, spriteHeight], setSpriteDimensions] = (0, import_react27.useState)([0, 0]);
+  (0, import_react27.useEffect)(() => {
     getImageDimensions(spriteUrl).then(setSpriteDimensions).catch(console.error);
   }, [spriteUrl]);
   const [x, y] = position3;
-  if (!spriteHeight || !spriteWidth) return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, fallback);
-  return /* @__PURE__ */ import_react26.default.createElement(
+  if (!spriteHeight || !spriteWidth) return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, fallback);
+  return /* @__PURE__ */ import_react27.default.createElement(
     "div",
     {
       "data-testid": "sprite-image",
@@ -14169,7 +14231,7 @@ var StreamEmoji = ({
   type
 }) => {
   const position3 = StreamSpriteEmojiPositions[type];
-  return /* @__PURE__ */ import_react27.default.createElement(
+  return /* @__PURE__ */ import_react28.default.createElement(
     SpriteImage,
     {
       columns: 2,
@@ -14188,23 +14250,23 @@ var StreamEmoji = ({
 var defaultReactionOptions = [
   {
     type: "haha",
-    Component: () => /* @__PURE__ */ import_react28.default.createElement(StreamEmoji, { fallback: "\u{1F602}", type: "haha" }),
+    Component: () => /* @__PURE__ */ import_react29.default.createElement(StreamEmoji, { fallback: "\u{1F602}", type: "haha" }),
     name: "Joy"
   },
   {
     type: "like",
-    Component: () => /* @__PURE__ */ import_react28.default.createElement(StreamEmoji, { fallback: "\u{1F44D}", type: "like" }),
+    Component: () => /* @__PURE__ */ import_react29.default.createElement(StreamEmoji, { fallback: "\u{1F44D}", type: "like" }),
     name: "Thumbs up"
   },
   {
     type: "love",
-    Component: () => /* @__PURE__ */ import_react28.default.createElement(StreamEmoji, { fallback: "\u2764\uFE0F", type: "love" }),
+    Component: () => /* @__PURE__ */ import_react29.default.createElement(StreamEmoji, { fallback: "\u2764\uFE0F", type: "love" }),
     name: "Heart"
   },
-  { type: "sad", Component: () => /* @__PURE__ */ import_react28.default.createElement(StreamEmoji, { fallback: "\u{1F614}", type: "sad" }), name: "Sad" },
+  { type: "sad", Component: () => /* @__PURE__ */ import_react29.default.createElement(StreamEmoji, { fallback: "\u{1F614}", type: "sad" }), name: "Sad" },
   {
     type: "wow",
-    Component: () => /* @__PURE__ */ import_react28.default.createElement(StreamEmoji, { fallback: "\u{1F632}", type: "wow" }),
+    Component: () => /* @__PURE__ */ import_react29.default.createElement(StreamEmoji, { fallback: "\u{1F632}", type: "wow" }),
     name: "Astonished"
   }
 ];
@@ -14238,23 +14300,23 @@ var UnMemoizedReactionSelector = (props) => {
   const latestReactions = propLatestReactions || message?.latest_reactions || [];
   const ownReactions = propOwnReactions || message?.own_reactions || [];
   const reactionGroups = propReactionGroups || message?.reaction_groups || {};
-  const [tooltipReactionType, setTooltipReactionType] = (0, import_react29.useState)(null);
-  const [tooltipPositions, setTooltipPositions] = (0, import_react29.useState)(null);
-  const rootRef = (0, import_react29.useRef)(null);
-  const targetRef = (0, import_react29.useRef)(null);
-  const tooltipRef = (0, import_react29.useRef)(null);
-  const showTooltip = (0, import_react29.useCallback)(
+  const [tooltipReactionType, setTooltipReactionType] = (0, import_react30.useState)(null);
+  const [tooltipPositions, setTooltipPositions] = (0, import_react30.useState)(null);
+  const rootRef = (0, import_react30.useRef)(null);
+  const targetRef = (0, import_react30.useRef)(null);
+  const tooltipRef = (0, import_react30.useRef)(null);
+  const showTooltip = (0, import_react30.useCallback)(
     (event, reactionType) => {
       targetRef.current = event.currentTarget;
       setTooltipReactionType(reactionType);
     },
     []
   );
-  const hideTooltip = (0, import_react29.useCallback)(() => {
+  const hideTooltip = (0, import_react30.useCallback)(() => {
     setTooltipReactionType(null);
     setTooltipPositions(null);
   }, []);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!tooltipReactionType || !rootRef.current) return;
     const tooltip = tooltipRef.current?.getBoundingClientRect();
     const target = targetRef.current?.getBoundingClientRect();
@@ -14275,7 +14337,7 @@ var UnMemoizedReactionSelector = (props) => {
   }).filter(Boolean);
   const iHaveReactedWithReaction = (reactionType) => ownReactions.find((reaction) => reaction.type === reactionType);
   const getLatestUserForReactionType = (type) => latestReactions.find((reaction) => reaction.type === type && !!reaction.user)?.user || void 0;
-  return /* @__PURE__ */ import_react29.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement(
     "div",
     {
       className: (0, import_clsx7.default)(
@@ -14287,7 +14349,7 @@ var UnMemoizedReactionSelector = (props) => {
       "data-testid": "reaction-selector",
       ref: rootRef
     },
-    !!tooltipReactionType && detailedView && /* @__PURE__ */ import_react29.default.createElement(
+    !!tooltipReactionType && detailedView && /* @__PURE__ */ import_react30.default.createElement(
       "div",
       {
         className: "str-chat__reaction-selector-tooltip",
@@ -14297,13 +14359,13 @@ var UnMemoizedReactionSelector = (props) => {
           visibility: tooltipPositions ? "visible" : "hidden"
         }
       },
-      /* @__PURE__ */ import_react29.default.createElement("div", { className: "arrow", style: { left: tooltipPositions?.arrow } }),
-      getUsersPerReactionType(tooltipReactionType)?.map((user, i, users) => /* @__PURE__ */ import_react29.default.createElement("span", { className: "latest-user-username", key: `key-${i}-${user}` }, `${user}${i < users.length - 1 ? ", " : ""}`))
+      /* @__PURE__ */ import_react30.default.createElement("div", { className: "arrow", style: { left: tooltipPositions?.arrow } }),
+      getUsersPerReactionType(tooltipReactionType)?.map((user, i, users) => /* @__PURE__ */ import_react30.default.createElement("span", { className: "latest-user-username", key: `key-${i}-${user}` }, `${user}${i < users.length - 1 ? ", " : ""}`))
     ),
-    /* @__PURE__ */ import_react29.default.createElement("ul", { className: "str-chat__message-reactions-list str-chat__message-reactions-options" }, reactionOptions.map(({ Component, name: reactionName, type: reactionType }) => {
+    /* @__PURE__ */ import_react30.default.createElement("ul", { className: "str-chat__message-reactions-list str-chat__message-reactions-options" }, reactionOptions.map(({ Component, name: reactionName, type: reactionType }) => {
       const latestUser = getLatestUserForReactionType(reactionType);
       const count = reactionGroups[reactionType]?.count ?? 0;
-      return /* @__PURE__ */ import_react29.default.createElement("li", { key: reactionType }, /* @__PURE__ */ import_react29.default.createElement(
+      return /* @__PURE__ */ import_react30.default.createElement("li", { key: reactionType }, /* @__PURE__ */ import_react30.default.createElement(
         "button",
         {
           "aria-label": `Select Reaction: ${reactionName || reactionType}`,
@@ -14322,7 +14384,7 @@ var UnMemoizedReactionSelector = (props) => {
             }
           }
         },
-        !!count && detailedView && /* @__PURE__ */ import_react29.default.createElement(
+        !!count && detailedView && /* @__PURE__ */ import_react30.default.createElement(
           "div",
           {
             className: "latest-user str-chat__message-reactions-last-user",
@@ -14330,7 +14392,7 @@ var UnMemoizedReactionSelector = (props) => {
             onMouseEnter: (e) => showTooltip(e, reactionType),
             onMouseLeave: hideTooltip
           },
-          latestUser ? /* @__PURE__ */ import_react29.default.createElement(
+          latestUser ? /* @__PURE__ */ import_react30.default.createElement(
             Avatar2,
             {
               image: latestUser.image,
@@ -14338,15 +14400,15 @@ var UnMemoizedReactionSelector = (props) => {
               size: 20,
               user: latestUser
             }
-          ) : /* @__PURE__ */ import_react29.default.createElement("div", { className: "latest-user-not-found" })
+          ) : /* @__PURE__ */ import_react30.default.createElement("div", { className: "latest-user-not-found" })
         ),
-        /* @__PURE__ */ import_react29.default.createElement("span", { className: "str-chat__message-reaction-emoji" }, /* @__PURE__ */ import_react29.default.createElement(Component, null)),
-        Boolean(count) && detailedView && /* @__PURE__ */ import_react29.default.createElement("span", { className: "str-chat__message-reactions-list-item__count" }, count || "")
+        /* @__PURE__ */ import_react30.default.createElement("span", { className: "str-chat__message-reaction-emoji" }, /* @__PURE__ */ import_react30.default.createElement(Component, null)),
+        Boolean(count) && detailedView && /* @__PURE__ */ import_react30.default.createElement("span", { className: "str-chat__message-reactions-list-item__count" }, count || "")
       ));
     }))
   );
 };
-var ReactionSelector = import_react29.default.memo(
+var ReactionSelector = import_react30.default.memo(
   UnMemoizedReactionSelector
 );
 
@@ -14357,21 +14419,22 @@ var ReactionSelectorWithButton = ({
   const { t } = useTranslationContext("ReactionSelectorWithButton");
   const { isMyMessage, message, threadList } = useMessageContext("MessageOptions");
   const { ReactionSelector: ReactionSelector2 = ReactionSelector } = useComponentContext("MessageOptions");
-  const buttonRef = (0, import_react30.useRef)(null);
+  const buttonRef = (0, import_react31.useRef)(null);
   const dialogIdNamespace = threadList ? "-thread-" : "";
   const dialogId = `reaction-selector${dialogIdNamespace}--${message.id}`;
-  const dialog = useDialog({ id: dialogId });
-  const dialogIsOpen = useDialogIsOpen(dialogId);
-  return /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(
+  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
+  return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(
     DialogAnchor,
     {
+      dialogManagerId: dialogManager?.id,
       id: dialogId,
       placement: isMyMessage() ? "top-end" : "top-start",
       referenceElement: buttonRef.current,
       trapFocus: true
     },
-    /* @__PURE__ */ import_react30.default.createElement(ReactionSelector2, null)
-  ), /* @__PURE__ */ import_react30.default.createElement(
+    /* @__PURE__ */ import_react31.default.createElement(ReactionSelector2, null)
+  ), /* @__PURE__ */ import_react31.default.createElement(
     "button",
     {
       "aria-expanded": dialogIsOpen,
@@ -14381,14 +14444,14 @@ var ReactionSelectorWithButton = ({
       onClick: () => dialog?.toggle(),
       ref: buttonRef
     },
-    /* @__PURE__ */ import_react30.default.createElement(ReactionIcon2, { className: "str-chat__message-action-icon" })
+    /* @__PURE__ */ import_react31.default.createElement(ReactionIcon2, { className: "str-chat__message-action-icon" })
   ));
 };
 
 // src/components/InfiniteScrollPaginator/InfiniteScrollPaginator.tsx
 var import_clsx8 = __toESM(require("clsx"));
 var import_lodash = __toESM(require("lodash.debounce"));
-var import_react31 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var mousewheelListener = (event) => {
   if (event instanceof WheelEvent && event.deltaY === 1) {
     event.preventDefault();
@@ -14406,9 +14469,9 @@ var InfiniteScrollPaginator = (props) => {
     useCapture = false,
     ...componentProps
   } = props;
-  const rootRef = (0, import_react31.useRef)(null);
-  const childRef = (0, import_react31.useRef)(null);
-  const scrollListener = (0, import_react31.useMemo)(
+  const rootRef = (0, import_react32.useRef)(null);
+  const childRef = (0, import_react32.useRef)(null);
+  const scrollListener = (0, import_react32.useMemo)(
     () => (0, import_lodash.default)(() => {
       const root4 = rootRef.current;
       const child = childRef.current;
@@ -14435,7 +14498,7 @@ var InfiniteScrollPaginator = (props) => {
       threshold
     ]
   );
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const scrollElement = rootRef.current;
     if (!scrollElement) return;
     scrollElement.addEventListener("scroll", scrollListener, useCapture);
@@ -14443,7 +14506,7 @@ var InfiniteScrollPaginator = (props) => {
       scrollElement.removeEventListener("scroll", scrollListener, useCapture);
     };
   }, [scrollListener, useCapture]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const root4 = rootRef.current;
     if (!root4 || typeof ResizeObserver === "undefined" || !scrollListener) return;
     const observer = new ResizeObserver(scrollListener);
@@ -14452,7 +14515,7 @@ var InfiniteScrollPaginator = (props) => {
       observer.disconnect();
     };
   }, [scrollListener]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const root4 = rootRef.current;
     if (root4) {
       root4.addEventListener("wheel", mousewheelListener, { passive: false });
@@ -14463,14 +14526,14 @@ var InfiniteScrollPaginator = (props) => {
       }
     };
   }, [useCapture]);
-  return /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement(
     "div",
     {
       ...componentProps,
       className: (0, import_clsx8.default)("str-chat__infinite-scroll-paginator", className),
       ref: rootRef
     },
-    /* @__PURE__ */ import_react31.default.createElement("div", { className: "str-chat__infinite-scroll-paginator__content", ref: childRef }, children)
+    /* @__PURE__ */ import_react32.default.createElement("div", { className: "str-chat__infinite-scroll-paginator__content", ref: childRef }, children)
   );
 };
 
@@ -14481,7 +14544,7 @@ var remarkPlugins = [
   plusPlusToEmphasis,
   imageToLink
 ];
-var renderPreviewText = (text8) => /* @__PURE__ */ import_react32.default.createElement(Markdown, { remarkPlugins, skipHtml: true }, text8);
+var renderPreviewText = (text8) => /* @__PURE__ */ import_react33.default.createElement(Markdown, { remarkPlugins, skipHtml: true }, text8);
 var getLatestPollVote = (latestVotesByOption) => {
   let latestVote;
   for (const optionVotes of Object.values(latestVotesByOption)) {
@@ -14563,14 +14626,14 @@ var getDisplayImage = (channel, currentUser) => getChannelDisplayInfo("image", c
 var useChannelPreviewInfo = (props) => {
   const { channel, overrideImage, overrideTitle } = props;
   const { client } = useChatContext("useChannelPreviewInfo");
-  const [displayTitle, setDisplayTitle] = (0, import_react33.useState)(
+  const [displayTitle, setDisplayTitle] = (0, import_react34.useState)(
     () => overrideTitle || getDisplayTitle(channel, client.user)
   );
-  const [displayImage, setDisplayImage] = (0, import_react33.useState)(
+  const [displayImage, setDisplayImage] = (0, import_react34.useState)(
     () => overrideImage || getDisplayImage(channel, client.user)
   );
-  const [groupChannelDisplayInfo, setGroupDisplayChannelInfo] = (0, import_react33.useState)(() => getGroupChannelDisplayInfo(channel));
-  (0, import_react33.useEffect)(() => {
+  const [groupChannelDisplayInfo, setGroupDisplayChannelInfo] = (0, import_react34.useState)(() => getGroupChannelDisplayInfo(channel));
+  (0, import_react34.useEffect)(() => {
     if (overrideTitle && overrideImage) return;
     const updateInfo = () => {
       if (!overrideTitle) setDisplayTitle(getDisplayTitle(channel, client.user));
@@ -14593,18 +14656,18 @@ var useChannelPreviewInfo = (props) => {
 };
 
 // src/components/ChannelPreview/hooks/useMessageDeliveryStatus.ts
-var import_react34 = require("react");
+var import_react35 = require("react");
 var useMessageDeliveryStatus = ({
   channel,
   lastMessage
 }) => {
   const { client } = useChatContext();
-  const [messageDeliveryStatus, setMessageDeliveryStatus] = (0, import_react34.useState)();
-  const isOwnMessage = (0, import_react34.useCallback)(
+  const [messageDeliveryStatus, setMessageDeliveryStatus] = (0, import_react35.useState)();
+  const isOwnMessage = (0, import_react35.useCallback)(
     (message) => client.user && message && message.user?.id === client.user.id,
     [client]
   );
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!lastMessage) {
       setMessageDeliveryStatus(void 0);
     }
@@ -14614,11 +14677,13 @@ var useMessageDeliveryStatus = ({
       msgId: lastMessage.id,
       timestampMs: lastMessage.created_at.getTime()
     };
+    const readersForMessage = channel.messageReceiptsTracker.readersForMessage(msgRef);
+    const deliveredForMessage = channel.messageReceiptsTracker.deliveredForMessage(msgRef);
     setMessageDeliveryStatus(
-      channel.messageReceiptsTracker.readersForMessage(msgRef).length > 0 ? "read" /* READ */ : channel.messageReceiptsTracker.deliveredForMessage(msgRef).length > 0 ? "delivered" /* DELIVERED */ : "sent" /* SENT */
+      readersForMessage.length > 1 || readersForMessage.length === 1 && readersForMessage[0].id !== client.user?.id ? "read" /* READ */ : deliveredForMessage.length > 1 || deliveredForMessage.length === 1 && deliveredForMessage[0].id !== client.user?.id ? "delivered" /* DELIVERED */ : "sent" /* SENT */
     );
-  }, [channel, isOwnMessage, lastMessage]);
-  (0, import_react34.useEffect)(() => {
+  }, [channel, client, isOwnMessage, lastMessage]);
+  (0, import_react35.useEffect)(() => {
     const handleMessageNew = (event) => {
       if (!isOwnMessage(event.message)) {
         return setMessageDeliveryStatus(void 0);
@@ -14630,7 +14695,7 @@ var useMessageDeliveryStatus = ({
       channel.off("message.new", handleMessageNew);
     };
   }, [channel, isOwnMessage]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!isOwnMessage(lastMessage)) return;
     const handleMessageDelivered = (event) => {
       if (event.user?.id !== client.user?.id && lastMessage && lastMessage.id === event.last_delivered_message_id)
@@ -14671,20 +14736,20 @@ var ChannelPreview = (props) => {
   const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
     channel
   });
-  const [lastMessage, setLastMessage] = (0, import_react35.useState)(
+  const [lastMessage, setLastMessage] = (0, import_react36.useState)(
     channel.state.messages[channel.state.messages.length - 1]
   );
-  const [latestMessagePreview, setLatestMessagePreview] = (0, import_react35.useState)(
+  const [latestMessagePreview, setLatestMessagePreview] = (0, import_react36.useState)(
     () => getLatestMessagePreview2(channel, t, userLanguage, isMessageAIGenerated)
   );
-  const [unread, setUnread] = (0, import_react35.useState)(0);
+  const [unread, setUnread] = (0, import_react36.useState)(0);
   const { messageDeliveryStatus } = useMessageDeliveryStatus({
     channel,
     lastMessage
   });
   const isActive = typeof active === "undefined" ? activeChannel?.cid === channel.cid : active;
   const { muted } = useIsChannelMuted(channel);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const handleEvent = (event) => {
       if (!event.cid) return setUnread(0);
       if (channel.cid === event.cid) setUnread(0);
@@ -14692,7 +14757,7 @@ var ChannelPreview = (props) => {
     client.on("notification.mark_read", handleEvent);
     return () => client.off("notification.mark_read", handleEvent);
   }, [channel, client]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const handleEvent = (event) => {
       if (channel.cid !== event.cid) return;
       if (event.user?.id !== client.user?.id) return;
@@ -14703,7 +14768,7 @@ var ChannelPreview = (props) => {
       channel.off("notification.mark_unread", handleEvent);
     };
   }, [channel, client]);
-  const refreshUnreadCount = (0, import_react35.useMemo)(
+  const refreshUnreadCount = (0, import_react36.useMemo)(
     () => (0, import_lodash2.default)(() => {
       if (muted) {
         setUnread(0);
@@ -14713,7 +14778,7 @@ var ChannelPreview = (props) => {
     }, 400),
     [channel, muted]
   );
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     refreshUnreadCount();
     setLatestMessagePreview(
       getLatestMessagePreview2(channel, t, userLanguage, isMessageAIGenerated)
@@ -14754,7 +14819,7 @@ var ChannelPreview = (props) => {
     isMessageAIGenerated
   ]);
   if (!Preview) return null;
-  return /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react36.default.createElement(
     Preview,
     {
       ...props,
@@ -14773,9 +14838,9 @@ var ChannelPreview = (props) => {
 };
 
 // src/components/Thread/LegacyThreadContext.ts
-var import_react36 = __toESM(require("react"));
-var LegacyThreadContext = import_react36.default.createContext({ legacyThread: void 0 });
-var useLegacyThreadContext = () => (0, import_react36.useContext)(LegacyThreadContext);
+var import_react37 = __toESM(require("react"));
+var LegacyThreadContext = import_react37.default.createContext({ legacyThread: void 0 });
+var useLegacyThreadContext = () => (0, import_react37.useContext)(LegacyThreadContext);
 
 // src/components/MessageInput/hooks/useMessageComposer.ts
 var queueCache = new import_stream_chat2.FixedSizeQueueCache(64);
@@ -14785,15 +14850,15 @@ var useMessageComposer = () => {
   const { editing, message: editedMessage } = useMessageContext();
   const { legacyThread: parentMessage } = useLegacyThreadContext();
   const threadInstance = useThreadContext();
-  const cachedEditedMessage = (0, import_react37.useMemo)(() => {
+  const cachedEditedMessage = (0, import_react38.useMemo)(() => {
     if (!editedMessage) return void 0;
     return editedMessage;
   }, [editedMessage?.id]);
-  const cachedParentMessage = (0, import_react37.useMemo)(() => {
+  const cachedParentMessage = (0, import_react38.useMemo)(() => {
     if (!parentMessage) return void 0;
     return parentMessage;
   }, [parentMessage?.id]);
-  const messageComposer = (0, import_react37.useMemo)(() => {
+  const messageComposer = (0, import_react38.useMemo)(() => {
     if (editing && cachedEditedMessage) {
       const tag = import_stream_chat2.MessageComposer.constructTag(cachedEditedMessage);
       const cachedComposer = queueCache.get(tag);
@@ -14836,7 +14901,7 @@ var useMessageComposer = () => {
   ) && !queueCache.peek(messageComposer.tag)) {
     queueCache.add(messageComposer.tag, messageComposer);
   }
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const unsubscribe = messageComposer.registerSubscriptions();
     return () => {
       unsubscribe();
@@ -14846,17 +14911,17 @@ var useMessageComposer = () => {
 };
 
 // src/experimental/Search/hooks/useSearchQueriesInProgress.ts
-var import_react38 = require("react");
+var import_react39 = require("react");
 var searchControllerStateSelector = (value) => ({
   sources: value.sources
 });
 var useSearchQueriesInProgress = (searchController) => {
-  const [queriesInProgress, setQueriesInProgress] = (0, import_react38.useState)([]);
+  const [queriesInProgress, setQueriesInProgress] = (0, import_react39.useState)([]);
   const { sources } = useStateStore(
     searchController.state,
     searchControllerStateSelector
   );
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     const subscriptions = sources.map(
       (source) => source.state.subscribeWithSelector(
         (value) => ({ isLoading: value.isLoading }),
@@ -14876,7 +14941,7 @@ var useSearchQueriesInProgress = (searchController) => {
 };
 
 // src/experimental/MessageActions/hooks/useBaseMessageActionSetFilter.ts
-var import_react39 = require("react");
+var import_react40 = require("react");
 var useBaseMessageActionSetFilter = (messageActionSet, disable2 = false) => {
   const { initialMessage: isInitialMessage, message } = useMessageContext();
   const {
@@ -14890,7 +14955,7 @@ var useBaseMessageActionSetFilter = (messageActionSet, disable2 = false) => {
     canReply
   } = useUserRole(message);
   const isMessageThreadReply = typeof message.parent_id === "string";
-  return (0, import_react39.useMemo)(() => {
+  return (0, import_react40.useMemo)(() => {
     if (disable2) return messageActionSet;
     if (isInitialMessage || // not sure whether this thing even works anymore
     !message.type || message.type === "error" || message.type === "system" || message.type === "ephemeral" || message.status === "failed" || message.status === "sending")
@@ -14921,8 +14986,8 @@ var useBaseMessageActionSetFilter = (messageActionSet, disable2 = false) => {
 };
 
 // src/experimental/MessageActions/hooks/useSplitMessageActionSet.ts
-var import_react40 = require("react");
-var useSplitMessageActionSet = (messageActionSet) => (0, import_react40.useMemo)(() => {
+var import_react41 = require("react");
+var useSplitMessageActionSet = (messageActionSet) => (0, import_react41.useMemo)(() => {
   const quickActionSet = [];
   const dropdownActionSet = [];
   for (const action of messageActionSet) {
@@ -14933,7 +14998,7 @@ var useSplitMessageActionSet = (messageActionSet) => (0, import_react40.useMemo)
 }, [messageActionSet]);
 
 // src/experimental/MessageActions/defaults.tsx
-var import_react41 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 var msgActionsBoxButtonClassName = "str-chat__message-actions-list-item-button";
 var DefaultDropdownActionButton = ({
   "aria-selected": ariaSelected = "false",
@@ -14941,7 +15006,7 @@ var DefaultDropdownActionButton = ({
   className = msgActionsBoxButtonClassName,
   role = "option",
   ...rest
-}) => /* @__PURE__ */ import_react41.default.createElement("button", { "aria-selected": ariaSelected, className, role, ...rest }, children);
+}) => /* @__PURE__ */ import_react42.default.createElement("button", { "aria-selected": ariaSelected, className, role, ...rest }, children);
 var DefaultMessageActionComponents = {
   dropdown: {
     Quote() {
@@ -14956,42 +15021,42 @@ var DefaultMessageActionComponents = {
           textarea.focus();
         }
       };
-      return /* @__PURE__ */ import_react41.default.createElement(DefaultDropdownActionButton, { onClick: handleQuote }, t("Quote"));
+      return /* @__PURE__ */ import_react42.default.createElement(DefaultDropdownActionButton, { onClick: handleQuote }, t("Quote"));
     },
     Pin() {
       const { handlePin, message } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react41.default.createElement(DefaultDropdownActionButton, { onClick: handlePin }, !message.pinned ? t("Pin") : t("Unpin"));
+      return /* @__PURE__ */ import_react42.default.createElement(DefaultDropdownActionButton, { onClick: handlePin }, !message.pinned ? t("Pin") : t("Unpin"));
     },
     MarkUnread() {
       const { handleMarkUnread } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react41.default.createElement(DefaultDropdownActionButton, { onClick: handleMarkUnread }, t("Mark as unread"));
+      return /* @__PURE__ */ import_react42.default.createElement(DefaultDropdownActionButton, { onClick: handleMarkUnread }, t("Mark as unread"));
     },
     Flag() {
       const { handleFlag } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react41.default.createElement(DefaultDropdownActionButton, { onClick: handleFlag }, t("Flag"));
+      return /* @__PURE__ */ import_react42.default.createElement(DefaultDropdownActionButton, { onClick: handleFlag }, t("Flag"));
     },
     Mute() {
       const { handleMute, message } = useMessageContext();
       const { mutes } = useChatContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react41.default.createElement(DefaultDropdownActionButton, { onClick: handleMute }, isUserMuted(message, mutes) ? t("Unmute") : t("Mute"));
+      return /* @__PURE__ */ import_react42.default.createElement(DefaultDropdownActionButton, { onClick: handleMute }, isUserMuted(message, mutes) ? t("Unmute") : t("Mute"));
     },
     Edit() {
       const { handleEdit } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react41.default.createElement(DefaultDropdownActionButton, { onClick: handleEdit }, t("Edit Message"));
+      return /* @__PURE__ */ import_react42.default.createElement(DefaultDropdownActionButton, { onClick: handleEdit }, t("Edit Message"));
     },
     Delete() {
       const { handleDelete: handleDelete2 } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react41.default.createElement(DefaultDropdownActionButton, { onClick: handleDelete2 }, t("Delete"));
+      return /* @__PURE__ */ import_react42.default.createElement(DefaultDropdownActionButton, { onClick: handleDelete2 }, t("Delete"));
     },
     RemindMe() {
       const { isMyMessage } = useMessageContext();
-      return /* @__PURE__ */ import_react41.default.createElement(
+      return /* @__PURE__ */ import_react42.default.createElement(
         RemindMeActionButton,
         {
           className: msgActionsBoxButtonClassName,
@@ -15004,7 +15069,7 @@ var DefaultMessageActionComponents = {
       const { message } = useMessageContext();
       const { t } = useTranslationContext();
       const reminder = useMessageReminder(message.id);
-      return /* @__PURE__ */ import_react41.default.createElement(
+      return /* @__PURE__ */ import_react42.default.createElement(
         DefaultDropdownActionButton,
         {
           onClick: () => reminder ? client.reminders.deleteReminder(reminder.id) : client.reminders.createReminder({ messageId: message.id })
@@ -15015,12 +15080,12 @@ var DefaultMessageActionComponents = {
   },
   quick: {
     React() {
-      return /* @__PURE__ */ import_react41.default.createElement(ReactionSelectorWithButton, { ReactionIcon });
+      return /* @__PURE__ */ import_react42.default.createElement(ReactionSelectorWithButton, { ReactionIcon });
     },
     Reply() {
       const { handleOpenThread } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react41.default.createElement(
+      return /* @__PURE__ */ import_react42.default.createElement(
         "button",
         {
           "aria-label": t("aria/Open Thread"),
@@ -15028,7 +15093,7 @@ var DefaultMessageActionComponents = {
           "data-testid": "thread-action",
           onClick: handleOpenThread
         },
-        /* @__PURE__ */ import_react41.default.createElement(ThreadIcon, { className: "str-chat__message-action-icon" })
+        /* @__PURE__ */ import_react42.default.createElement(ThreadIcon, { className: "str-chat__message-action-icon" })
       );
     }
   }
@@ -15100,7 +15165,7 @@ var MessageActions = ({
   const { theme } = useChatContext();
   const { isMyMessage, message } = useMessageContext();
   const { t } = useTranslationContext();
-  const [actionsBoxButtonElement, setActionsBoxButtonElement] = (0, import_react42.useState)(null);
+  const [actionsBoxButtonElement, setActionsBoxButtonElement] = (0, import_react43.useState)(null);
   const filteredMessageActionSet = useBaseMessageActionSetFilter(
     messageActionSet,
     disableBaseMessageActionSetFilter
@@ -15110,20 +15175,23 @@ var MessageActions = ({
   );
   const dropdownDialogId = `message-actions--${message.id}`;
   const reactionSelectorDialogId = `reaction-selector--${message.id}`;
-  const dialog = useDialog({ id: dropdownDialogId });
-  const dropdownDialogIsOpen = useDialogIsOpen(dropdownDialogId);
-  const reactionSelectorDialogIsOpen = useDialogIsOpen(reactionSelectorDialogId);
+  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dropdownDialogId });
+  const dropdownDialogIsOpen = useDialogIsOpen(dropdownDialogId, dialogManager?.id);
+  const reactionSelectorDialogIsOpen = useDialogIsOpen(
+    reactionSelectorDialogId,
+    dialogManager?.id
+  );
   if (dropdownActionSet.length + quickActionSet.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react43.default.createElement(
     "div",
     {
       className: (0, import_clsx9.default)(`str-chat__message-${theme}__actions str-chat__message-options`, {
         "str-chat__message-options--active": dropdownDialogIsOpen || reactionSelectorDialogIsOpen
       })
     },
-    dropdownActionSet.length > 0 && /* @__PURE__ */ import_react42.default.createElement(MessageActionsWrapper, { inline: false, toggleOpen: dialog?.toggle }, /* @__PURE__ */ import_react42.default.createElement(
+    dropdownActionSet.length > 0 && /* @__PURE__ */ import_react43.default.createElement(MessageActionsWrapper, { inline: false, toggleOpen: dialog?.toggle }, /* @__PURE__ */ import_react43.default.createElement(
       "button",
       {
         "aria-expanded": dropdownDialogIsOpen,
@@ -15133,31 +15201,32 @@ var MessageActions = ({
         "data-testid": "message-actions-toggle-button",
         ref: setActionsBoxButtonElement
       },
-      /* @__PURE__ */ import_react42.default.createElement(ActionsIcon, { className: "str-chat__message-action-icon" })
-    ), /* @__PURE__ */ import_react42.default.createElement(
+      /* @__PURE__ */ import_react43.default.createElement(ActionsIcon, { className: "str-chat__message-action-icon" })
+    ), /* @__PURE__ */ import_react43.default.createElement(
       DialogAnchor,
       {
+        dialogManagerId: dialogManager?.id,
         id: dropdownDialogId,
         placement: isMyMessage() ? "top-end" : "top-start",
         referenceElement: actionsBoxButtonElement,
         tabIndex: -1,
         trapFocus: true
       },
-      /* @__PURE__ */ import_react42.default.createElement(DropdownBox, { open: dropdownDialogIsOpen }, dropdownActionSet.map(({ Component: DropdownActionComponent, type }) => /* @__PURE__ */ import_react42.default.createElement(DropdownActionComponent, { key: type })))
+      /* @__PURE__ */ import_react43.default.createElement(DropdownBox, { open: dropdownDialogIsOpen }, dropdownActionSet.map(({ Component: DropdownActionComponent, type }) => /* @__PURE__ */ import_react43.default.createElement(DropdownActionComponent, { key: type })))
     )),
-    quickActionSet.map(({ Component: QuickActionComponent, type }) => /* @__PURE__ */ import_react42.default.createElement(QuickActionComponent, { key: type }))
+    quickActionSet.map(({ Component: QuickActionComponent, type }) => /* @__PURE__ */ import_react43.default.createElement(QuickActionComponent, { key: type }))
   );
 };
 var DropdownBox = ({ children, open }) => {
   const { t } = useTranslationContext();
-  return /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react43.default.createElement(
     "div",
     {
       className: (0, import_clsx9.default)("str-chat__message-actions-box", {
         "str-chat__message-actions-box--open": open
       })
     },
-    /* @__PURE__ */ import_react42.default.createElement(
+    /* @__PURE__ */ import_react43.default.createElement(
       "div",
       {
         "aria-label": t("aria/Message Options"),
@@ -15171,21 +15240,21 @@ var DropdownBox = ({ children, open }) => {
 
 // src/experimental/Search/Search.tsx
 var import_clsx12 = __toESM(require("clsx"));
-var import_react55 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 
 // src/experimental/Search/SearchBar/SearchBar.tsx
 var import_clsx10 = __toESM(require("clsx"));
-var import_react44 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 
 // src/experimental/Search/SearchContext.tsx
-var import_react43 = __toESM(require("react"));
-var SearchContext = (0, import_react43.createContext)(void 0);
+var import_react44 = __toESM(require("react"));
+var SearchContext = (0, import_react44.createContext)(void 0);
 var SearchContextProvider = ({
   children,
   value
-}) => /* @__PURE__ */ import_react43.default.createElement(SearchContext.Provider, { value }, children);
+}) => /* @__PURE__ */ import_react44.default.createElement(SearchContext.Provider, { value }, children);
 var useSearchContext = () => {
-  const contextValue = (0, import_react43.useContext)(SearchContext);
+  const contextValue = (0, import_react44.useContext)(SearchContext);
   return contextValue;
 };
 
@@ -15198,12 +15267,12 @@ var SearchBar = () => {
   const { t } = useTranslationContext();
   const { disabled, exitSearchOnInputBlur, placeholder, searchController } = useSearchContext();
   const queriesInProgress = useSearchQueriesInProgress(searchController);
-  const [input, setInput] = (0, import_react44.useState)(null);
+  const [input, setInput] = (0, import_react45.useState)(null);
   const { isActive, searchQuery } = useStateStore(
     searchController.state,
     searchControllerStateSelector2
   );
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!input) return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -15216,15 +15285,15 @@ var SearchBar = () => {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [searchController, input]);
-  return /* @__PURE__ */ import_react44.default.createElement("div", { className: "str-chat__search-bar", "data-testid": "search-bar" }, /* @__PURE__ */ import_react44.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement("div", { className: "str-chat__search-bar", "data-testid": "search-bar" }, /* @__PURE__ */ import_react45.default.createElement(
     "div",
     {
       className: (0, import_clsx10.default)("str-chat__search-input--wrapper", {
         "str-chat__search-input--wrapper-active": isActive
       })
     },
-    /* @__PURE__ */ import_react44.default.createElement("div", { className: "str-chat__search-input--icon" }),
-    /* @__PURE__ */ import_react44.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement("div", { className: "str-chat__search-input--icon" }),
+    /* @__PURE__ */ import_react45.default.createElement(
       "input",
       {
         className: "str-chat__search-input",
@@ -15247,7 +15316,7 @@ var SearchBar = () => {
         value: searchQuery
       }
     ),
-    searchQuery && /* @__PURE__ */ import_react44.default.createElement(
+    searchQuery && /* @__PURE__ */ import_react45.default.createElement(
       "button",
       {
         className: "str-chat__search-input--clear-button",
@@ -15258,9 +15327,9 @@ var SearchBar = () => {
           input?.focus();
         }
       },
-      /* @__PURE__ */ import_react44.default.createElement("div", { className: "str-chat__search-input--clear-button-icon" })
+      /* @__PURE__ */ import_react45.default.createElement("div", { className: "str-chat__search-input--clear-button-icon" })
     )
-  ), isActive ? /* @__PURE__ */ import_react44.default.createElement(
+  ), isActive ? /* @__PURE__ */ import_react45.default.createElement(
     "button",
     {
       className: (0, import_clsx10.default)(
@@ -15277,25 +15346,25 @@ var SearchBar = () => {
 };
 
 // src/experimental/Search/SearchResults/SearchResults.tsx
-var import_react54 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 
 // src/experimental/Search/SearchResults/SearchSourceResults.tsx
-var import_react51 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 
 // src/experimental/Search/SearchResults/SearchSourceResultList.tsx
-var import_react49 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 
 // src/experimental/Search/SearchResults/SearchResultItem.tsx
-var import_react45 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var import_lodash3 = __toESM(require("lodash.uniqby"));
 var ChannelSearchResultItem = ({ item }) => {
   const { setActiveChannel } = useChatContext();
   const { setChannels } = useChannelListContext();
-  const onSelect = (0, import_react45.useCallback)(() => {
+  const onSelect = (0, import_react46.useCallback)(() => {
     setActiveChannel(item);
     setChannels?.((channels) => (0, import_lodash3.default)([item, ...channels], "cid"));
   }, [item, setActiveChannel, setChannels]);
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(
     ChannelPreview,
     {
       channel: item,
@@ -15314,13 +15383,13 @@ var MessageSearchResultItem = ({
     setActiveChannel
   } = useChatContext();
   const { setChannels } = useChannelListContext();
-  const channel = (0, import_react45.useMemo)(() => {
+  const channel = (0, import_react46.useMemo)(() => {
     const { channel: channelData } = item;
     const type = channelData?.type ?? "unknown";
     const id = channelData?.id ?? "unknown";
     return client.channel(type, id);
   }, [client, item]);
-  const onSelect = (0, import_react45.useCallback)(async () => {
+  const onSelect = (0, import_react46.useCallback)(async () => {
     if (!channel) return;
     await channel.state.loadMessageIntoState(
       item.id,
@@ -15331,9 +15400,9 @@ var MessageSearchResultItem = ({
     setActiveChannel(channel);
     setChannels?.((channels) => (0, import_lodash3.default)([channel, ...channels], "cid"));
   }, [channel, item, searchController, setActiveChannel, setChannels]);
-  const getLatestMessagePreview2 = (0, import_react45.useCallback)(() => item.text, [item]);
+  const getLatestMessagePreview2 = (0, import_react46.useCallback)(() => item.text, [item]);
   if (!channel) return;
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(
     ChannelPreview,
     {
       active: channel.cid === activeChannel?.cid && item.id === searchController._internalState.getLatestValue().focusedMessage?.id,
@@ -15348,7 +15417,7 @@ var UserSearchResultItem = ({ item }) => {
   const { client, setActiveChannel } = useChatContext();
   const { setChannels } = useChannelListContext();
   const { directMessagingChannelType } = useSearchContext();
-  const onClick = (0, import_react45.useCallback)(() => {
+  const onClick = (0, import_react46.useCallback)(() => {
     const newChannel = client.channel(directMessagingChannelType, {
       members: [client.userID, item.id]
     });
@@ -15356,7 +15425,7 @@ var UserSearchResultItem = ({ item }) => {
     setActiveChannel(newChannel);
     setChannels?.((channels) => (0, import_lodash3.default)([newChannel, ...channels], "cid"));
   }, [client, item, setActiveChannel, setChannels, directMessagingChannelType]);
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(
     "button",
     {
       "aria-label": `Select User Channel: ${item.name || ""}`,
@@ -15365,7 +15434,7 @@ var UserSearchResultItem = ({ item }) => {
       onClick,
       role: "option"
     },
-    /* @__PURE__ */ import_react45.default.createElement(
+    /* @__PURE__ */ import_react46.default.createElement(
       Avatar,
       {
         className: "str-chat__avatar--channel-preview",
@@ -15374,7 +15443,7 @@ var UserSearchResultItem = ({ item }) => {
         user: item
       }
     ),
-    /* @__PURE__ */ import_react45.default.createElement("div", { className: "str-chat__search-result--display-name" }, item.name || item.id)
+    /* @__PURE__ */ import_react46.default.createElement("div", { className: "str-chat__search-result--display-name" }, item.name || item.id)
   );
 };
 var DefaultSearchResultItems = {
@@ -15384,18 +15453,18 @@ var DefaultSearchResultItems = {
 };
 
 // src/experimental/Search/SearchResults/SearchSourceResultListFooter.tsx
-var import_react48 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 
 // src/experimental/Search/SearchResults/SearchSourceResultsLoadingIndicator.tsx
-var import_react47 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 
 // src/experimental/Search/SearchSourceResultsContext.tsx
-var import_react46 = __toESM(require("react"));
-var SearchSourceResultsContext = (0, import_react46.createContext)(void 0);
+var import_react47 = __toESM(require("react"));
+var SearchSourceResultsContext = (0, import_react47.createContext)(void 0);
 var SearchSourceResultsContextProvider = ({
   children,
   value
-}) => /* @__PURE__ */ import_react46.default.createElement(
+}) => /* @__PURE__ */ import_react47.default.createElement(
   SearchSourceResultsContext.Provider,
   {
     value
@@ -15403,7 +15472,7 @@ var SearchSourceResultsContextProvider = ({
   children
 );
 var useSearchSourceResultsContext = () => {
-  const contextValue = (0, import_react46.useContext)(SearchSourceResultsContext);
+  const contextValue = (0, import_react47.useContext)(SearchSourceResultsContext);
   return contextValue;
 };
 
@@ -15411,7 +15480,7 @@ var useSearchSourceResultsContext = () => {
 var SearchSourceResultsLoadingIndicator = () => {
   const { t } = useTranslationContext();
   const { searchSource } = useSearchSourceResultsContext();
-  return /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     "div",
     {
       className: "str-chat__search-source-results__loading-indicator",
@@ -15436,13 +15505,13 @@ var SearchSourceResultListFooter = () => {
     searchSource.state,
     searchSourceStateSelector
   );
-  return /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(
     "div",
     {
       className: "str-chat__search-source-result-list__footer",
       "data-testid": "search-footer"
     },
-    isLoading ? /* @__PURE__ */ import_react48.default.createElement(SearchSourceResultsLoadingIndicator2, null) : !hasNext ? /* @__PURE__ */ import_react48.default.createElement("div", { className: "str-chat__search-source-results---empty" }, t("All results loaded")) : null
+    isLoading ? /* @__PURE__ */ import_react49.default.createElement(SearchSourceResultsLoadingIndicator2, null) : !hasNext ? /* @__PURE__ */ import_react49.default.createElement("div", { className: "str-chat__search-source-results---empty" }, t("All results loaded")) : null
   );
 };
 
@@ -15460,36 +15529,36 @@ var SearchSourceResultList = ({
   const { items } = useStateStore(searchSource.state, searchSourceStateSelector2);
   const SearchResultItem = SearchResultItems[searchSource.type];
   if (!SearchResultItem) return null;
-  return /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement(
     "div",
     {
       className: "str-chat__search-source-result-list",
       "data-testid": "search-source-result-list"
     },
-    /* @__PURE__ */ import_react49.default.createElement(
+    /* @__PURE__ */ import_react50.default.createElement(
       InfiniteScrollPaginator,
       {
         loadNextDebounceMs: loadMoreDebounceMs,
         loadNextOnScrollToBottom: searchSource.search,
         threshold: loadMoreThresholdPx
       },
-      items?.map((item, i) => /* @__PURE__ */ import_react49.default.createElement(
+      items?.map((item, i) => /* @__PURE__ */ import_react50.default.createElement(
         SearchResultItem,
         {
           item,
           key: `source-search-result-${searchSource.type}-${i}`
         }
       )),
-      /* @__PURE__ */ import_react49.default.createElement(SearchSourceResultListFooter2, null)
+      /* @__PURE__ */ import_react50.default.createElement(SearchSourceResultListFooter2, null)
     )
   );
 };
 
 // src/experimental/Search/SearchResults/SearchSourceResultsEmpty.tsx
-var import_react50 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var SearchSourceResultsEmpty = () => {
   const { t } = useTranslationContext();
-  return /* @__PURE__ */ import_react50.default.createElement("div", { className: "str-chat__search-source-results-empty" }, t("No results found"));
+  return /* @__PURE__ */ import_react51.default.createElement("div", { className: "str-chat__search-source-results-empty" }, t("No results found"));
 };
 
 // src/experimental/Search/SearchResults/SearchSourceResultsHeader.tsx
@@ -15511,20 +15580,20 @@ var SearchSourceResults = ({ searchSource }) => {
     searchSourceStateSelector3
   );
   if (!items && !isLoading) return null;
-  return /* @__PURE__ */ import_react51.default.createElement(SearchSourceResultsContextProvider, { value: { searchSource } }, /* @__PURE__ */ import_react51.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement(SearchSourceResultsContextProvider, { value: { searchSource } }, /* @__PURE__ */ import_react52.default.createElement(
     "div",
     {
       className: "str-chat__search-source-results",
       "data-testid": "search-source-results"
     },
-    /* @__PURE__ */ import_react51.default.createElement(SearchSourceResultsHeader2, null),
-    items?.length || isLoading ? /* @__PURE__ */ import_react51.default.createElement(SearchSourceResultList2, null) : /* @__PURE__ */ import_react51.default.createElement(SearchSourceResultsEmpty2, null)
+    /* @__PURE__ */ import_react52.default.createElement(SearchSourceResultsHeader2, null),
+    items?.length || isLoading ? /* @__PURE__ */ import_react52.default.createElement(SearchSourceResultList2, null) : /* @__PURE__ */ import_react52.default.createElement(SearchSourceResultsEmpty2, null)
   ));
 };
 
 // src/experimental/Search/SearchResults/SearchResultsHeader.tsx
 var import_clsx11 = __toESM(require("clsx"));
-var import_react52 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var searchSourceStateSelector4 = (nextValue) => ({
   isActive: nextValue.isActive
 });
@@ -15533,7 +15602,7 @@ var SearchSourceFilterButton = ({ source }) => {
   const { searchController } = useSearchContext();
   const { isActive } = useStateStore(source.state, searchSourceStateSelector4);
   const label = `search-results-header-filter-source-button-label--${source.type}`;
-  return /* @__PURE__ */ import_react52.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement(
     "button",
     {
       "aria-label": t("aria/Search results header filter button"),
@@ -15556,13 +15625,13 @@ var SearchSourceFilterButton = ({ source }) => {
 };
 var SearchResultsHeader = () => {
   const { searchController } = useSearchContext();
-  return /* @__PURE__ */ import_react52.default.createElement("div", { className: "str-chat__search-results-header", "data-testid": "search-results-header" }, /* @__PURE__ */ import_react52.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement("div", { className: "str-chat__search-results-header", "data-testid": "search-results-header" }, /* @__PURE__ */ import_react53.default.createElement(
     "div",
     {
       className: "str-chat__search-results-header__filter-source-buttons",
       "data-testid": "filter-source-buttons"
     },
-    searchController.sources.map((source) => /* @__PURE__ */ import_react52.default.createElement(
+    searchController.sources.map((source) => /* @__PURE__ */ import_react53.default.createElement(
       SearchSourceFilterButton,
       {
         key: `search-source-filter-button-${source.type}`,
@@ -15573,10 +15642,10 @@ var SearchResultsHeader = () => {
 };
 
 // src/experimental/Search/SearchResults/SearchResultsPresearch.tsx
-var import_react53 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 var SearchResultsPresearch = () => {
   const { t } = useTranslationContext();
-  return /* @__PURE__ */ import_react53.default.createElement("div", { className: "str-chat__search-results-presearch" }, t("Start typing to search"));
+  return /* @__PURE__ */ import_react54.default.createElement("div", { className: "str-chat__search-results-presearch" }, t("Start typing to search"));
 };
 
 // src/experimental/Search/SearchResults/SearchResults.tsx
@@ -15597,7 +15666,7 @@ var SearchResults = () => {
     searchController.state,
     searchControllerStateSelector3
   );
-  return !isActive ? null : /* @__PURE__ */ import_react54.default.createElement("div", { "aria-label": t("aria/Search results"), className: "str-chat__search-results" }, /* @__PURE__ */ import_react54.default.createElement(SearchResultsHeader2, null), !searchQuery ? /* @__PURE__ */ import_react54.default.createElement(SearchResultsPresearch2, { activeSources }) : activeSources.map((source) => /* @__PURE__ */ import_react54.default.createElement(SearchSourceResults2, { key: source.type, searchSource: source })));
+  return !isActive ? null : /* @__PURE__ */ import_react55.default.createElement("div", { "aria-label": t("aria/Search results"), className: "str-chat__search-results" }, /* @__PURE__ */ import_react55.default.createElement(SearchResultsHeader2, null), !searchQuery ? /* @__PURE__ */ import_react55.default.createElement(SearchResultsPresearch2, { activeSources }) : activeSources.map((source) => /* @__PURE__ */ import_react55.default.createElement(SearchSourceResults2, { key: source.type, searchSource: source })));
 };
 
 // src/experimental/Search/Search.tsx
@@ -15611,7 +15680,7 @@ var Search = ({
   const { SearchBar: SearchBar2 = SearchBar, SearchResults: SearchResults2 = SearchResults } = useComponentContext();
   const { searchController } = useChatContext();
   const { isActive } = useStateStore(searchController.state, searchControllerStateSelector4);
-  return /* @__PURE__ */ import_react55.default.createElement(
+  return /* @__PURE__ */ import_react56.default.createElement(
     SearchContextProvider,
     {
       value: {
@@ -15622,7 +15691,7 @@ var Search = ({
         searchController
       }
     },
-    /* @__PURE__ */ import_react55.default.createElement(
+    /* @__PURE__ */ import_react56.default.createElement(
       "div",
       {
         className: (0, import_clsx12.default)("str-chat__search", {
@@ -15630,8 +15699,8 @@ var Search = ({
         }),
         "data-testid": "search"
       },
-      /* @__PURE__ */ import_react55.default.createElement(SearchBar2, null),
-      /* @__PURE__ */ import_react55.default.createElement(SearchResults2, null)
+      /* @__PURE__ */ import_react56.default.createElement(SearchBar2, null),
+      /* @__PURE__ */ import_react56.default.createElement(SearchResults2, null)
     )
   );
 };