stream-chat-react 13.0.5 → 13.1.1

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_react39 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 
 // src/context/ChannelListContext.tsx
 var import_react = __toESM(require("react"));
@@ -529,7 +529,7 @@ var useTranslationContext = (componentName) => {
 };
 
 // src/components/MessageInput/hooks/useMessageComposer.ts
-var import_react34 = require("react");
+var import_react37 = require("react");
 var import_stream_chat = require("stream-chat");
 
 // src/components/Threads/ThreadContext.tsx
@@ -10787,9 +10787,10 @@ var ChannelPreview = (props) => {
   );
 };
 
-// src/components/Thread/Thread.tsx
-var import_react33 = __toESM(require("react"));
-var import_clsx8 = __toESM(require("clsx"));
+// src/components/Thread/LegacyThreadContext.ts
+var import_react24 = __toESM(require("react"));
+var LegacyThreadContext = import_react24.default.createContext({ legacyThread: void 0 });
+var useLegacyThreadContext = () => (0, import_react24.useContext)(LegacyThreadContext);
 
 // src/components/Message/utils.tsx
 var import_react_fast_compare = __toESM(require("react-fast-compare"));
@@ -10808,7 +10809,9 @@ var MESSAGE_ACTIONS = {
   pin: "pin",
   quote: "quote",
   react: "react",
-  reply: "reply"
+  remindMe: "remindMe",
+  reply: "reply",
+  saveForLater: "saveForLater"
 };
 var ACTIONS_NOT_WORKING_IN_THREAD = [
   MESSAGE_ACTIONS.pin,
@@ -10848,13 +10851,34 @@ var useUserRole = (message, onlySenderCanEdit, disableQuotedMessages) => {
   };
 };
 
+// src/components/Message/hooks/useMessageReminder.ts
+var import_react25 = require("react");
+var useMessageReminder = (messageId) => {
+  const { client } = useChatContext();
+  const reminderSelector = (0, import_react25.useCallback)(
+    (state) => ({
+      reminder: state.reminders.get(messageId)
+    }),
+    [messageId]
+  );
+  const { reminder } = useStateStore(client.reminders.state, reminderSelector);
+  return reminder;
+};
+
 // src/components/MessageActions/MessageActions.tsx
+var import_clsx6 = __toESM(require("clsx"));
+var import_react30 = __toESM(require("react"));
+
+// src/components/MessageActions/RemindMeSubmenu.tsx
+var import_react28 = __toESM(require("react"));
+
+// src/components/Dialog/ButtonWithSubmenu.tsx
 var import_clsx5 = __toESM(require("clsx"));
-var import_react26 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 
 // src/components/Dialog/DialogAnchor.tsx
 var import_clsx4 = __toESM(require("clsx"));
-var import_react24 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_focus = require("@react-aria/focus");
 var import_react_popper = require("react-popper");
 function useDialogAnchor({
@@ -10862,7 +10886,7 @@ function useDialogAnchor({
   placement,
   referenceElement
 }) {
-  const [popperElement, setPopperElement] = (0, import_react24.useState)(null);
+  const [popperElement, setPopperElement] = (0, import_react26.useState)(null);
   const { attributes, styles, update } = (0, import_react_popper.usePopper)(referenceElement, popperElement, {
     modifiers: [
       {
@@ -10877,7 +10901,7 @@ function useDialogAnchor({
     ],
     placement
   });
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (open && popperElement) {
       update?.();
     }
@@ -10909,7 +10933,7 @@ var DialogAnchor = ({
     placement,
     referenceElement
   });
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!open) return;
     const hideOnEscape = (event) => {
       if (event.key !== "Escape") return;
@@ -10923,7 +10947,7 @@ var DialogAnchor = ({
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ import_react24.default.createElement(DialogPortalEntry, { dialogId: id }, /* @__PURE__ */ import_react24.default.createElement(import_focus.FocusScope, { autoFocus: focus, contain: trapFocus, restoreFocus: true }, /* @__PURE__ */ import_react24.default.createElement(
+  return /* @__PURE__ */ import_react26.default.createElement(DialogPortalEntry, { dialogId: id }, /* @__PURE__ */ import_react26.default.createElement(import_focus.FocusScope, { autoFocus: focus, contain: trapFocus, restoreFocus: true }, /* @__PURE__ */ import_react26.default.createElement(
     "div",
     {
       ...restDivProps,
@@ -10938,9 +10962,168 @@ var DialogAnchor = ({
   )));
 };
 
+// src/components/Dialog/ButtonWithSubmenu.tsx
+var ButtonWithSubmenu = ({
+  children,
+  className,
+  placement,
+  Submenu,
+  submenuContainerProps,
+  ...buttonProps
+}) => {
+  const buttonRef = (0, import_react27.useRef)(null);
+  const [dialogContainer, setDialogContainer] = (0, import_react27.useState)(null);
+  const keepSubmenuOpen = (0, import_react27.useRef)(false);
+  const dialogCloseTimeout = (0, import_react27.useRef)(null);
+  const dialogId = (0, import_react27.useMemo)(() => `submenu-${Math.random().toString(36).slice(2)}`, []);
+  const dialog = useDialog({ id: dialogId });
+  const dialogIsOpen = useDialogIsOpen(dialogId);
+  const { attributes, setPopperElement, styles } = useDialogAnchor({
+    open: dialogIsOpen,
+    placement,
+    referenceElement: buttonRef.current
+  });
+  const closeDialogLazily = (0, import_react27.useCallback)(() => {
+    if (dialogCloseTimeout.current) clearTimeout(dialogCloseTimeout.current);
+    dialogCloseTimeout.current = setTimeout(() => {
+      if (keepSubmenuOpen.current) return;
+      dialog.close();
+    }, 100);
+  }, [dialog]);
+  const handleClose = (0, import_react27.useCallback)(
+    (event) => {
+      const parentButton = buttonRef.current;
+      if (!dialogIsOpen || !parentButton) return;
+      event.stopPropagation();
+      closeDialogLazily();
+      parentButton.focus();
+    },
+    [closeDialogLazily, dialogIsOpen, buttonRef]
+  );
+  const handleFocusParentButton = () => {
+    if (dialogIsOpen) return;
+    dialog.open();
+    keepSubmenuOpen.current = true;
+  };
+  (0, import_react27.useEffect)(() => {
+    const parentButton = buttonRef.current;
+    if (!dialogIsOpen || !parentButton) return;
+    const hideOnEscape = (event) => {
+      if (event.key !== "Escape") return;
+      handleClose(event);
+      keepSubmenuOpen.current = false;
+    };
+    document.addEventListener("keyup", hideOnEscape, { capture: true });
+    return () => {
+      document.removeEventListener("keyup", hideOnEscape, { capture: true });
+    };
+  }, [dialogIsOpen, handleClose]);
+  return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement(
+    "button",
+    {
+      "aria-selected": "false",
+      className: (0, import_clsx5.default)(className, "str_chat__button-with-submenu", {
+        "str_chat__button-with-submenu--submenu-open": dialogIsOpen
+      }),
+      onBlur: () => {
+        keepSubmenuOpen.current = false;
+        closeDialogLazily();
+      },
+      onClick: (event) => {
+        event.stopPropagation();
+        dialog.toggle();
+      },
+      onFocus: handleFocusParentButton,
+      onMouseEnter: handleFocusParentButton,
+      onMouseLeave: () => {
+        keepSubmenuOpen.current = false;
+        closeDialogLazily();
+      },
+      ref: buttonRef,
+      role: "option",
+      ...buttonProps
+    },
+    children
+  ), dialogIsOpen && /* @__PURE__ */ import_react27.default.createElement(
+    "div",
+    {
+      ...attributes.popper,
+      onBlur: (event) => {
+        const isBlurredDescendant = event.relatedTarget instanceof Node && dialogContainer?.contains(event.relatedTarget);
+        if (isBlurredDescendant) return;
+        keepSubmenuOpen.current = false;
+        closeDialogLazily();
+      },
+      onFocus: () => {
+        keepSubmenuOpen.current = true;
+      },
+      onMouseEnter: () => {
+        keepSubmenuOpen.current = true;
+      },
+      onMouseLeave: () => {
+        keepSubmenuOpen.current = false;
+        closeDialogLazily();
+      },
+      ref: (element3) => {
+        setPopperElement(element3);
+        setDialogContainer(element3);
+      },
+      style: styles.popper,
+      tabIndex: -1,
+      ...submenuContainerProps
+    },
+    /* @__PURE__ */ import_react27.default.createElement(Submenu, null)
+  ));
+};
+
+// src/components/MessageActions/RemindMeSubmenu.tsx
+var RemindMeActionButton = ({
+  className,
+  isMine
+}) => {
+  const { t } = useTranslationContext();
+  return /* @__PURE__ */ import_react28.default.createElement(
+    ButtonWithSubmenu,
+    {
+      "aria-selected": "false",
+      className,
+      placement: isMine ? "left-start" : "right-start",
+      Submenu: RemindMeSubmenu
+    },
+    t("Remind Me")
+  );
+};
+var RemindMeSubmenu = () => {
+  const { t } = useTranslationContext();
+  const { client } = useChatContext();
+  const { message } = useMessageContext();
+  return /* @__PURE__ */ import_react28.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_react28.default.createElement(
+      "button",
+      {
+        className: "str-chat__message-actions-list-item-button",
+        key: `reminder-offset-option--${offsetMs}`,
+        onClick: () => {
+          client.reminders.upsertReminder({
+            messageId: message.id,
+            remind_at: new Date((/* @__PURE__ */ new Date()).getTime() + offsetMs).toISOString()
+          });
+        }
+      },
+      t("duration/Remind Me", { milliseconds: offsetMs })
+    ))
+  );
+};
+
 // src/components/Message/icons.tsx
-var import_react25 = __toESM(require("react"));
-var ActionsIcon = ({ className = "" }) => /* @__PURE__ */ import_react25.default.createElement(
+var import_react29 = __toESM(require("react"));
+var ActionsIcon = ({ className = "" }) => /* @__PURE__ */ import_react29.default.createElement(
   "svg",
   {
     className,
@@ -10949,7 +11132,7 @@ var ActionsIcon = ({ className = "" }) => /* @__PURE__ */ import_react25.default
     width: "11",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ import_react25.default.createElement(
+  /* @__PURE__ */ import_react29.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",
@@ -10957,7 +11140,7 @@ var ActionsIcon = ({ className = "" }) => /* @__PURE__ */ import_react25.default
     }
   )
 );
-var ReactionIcon = ({ className = "" }) => /* @__PURE__ */ import_react25.default.createElement(
+var ReactionIcon = ({ className = "" }) => /* @__PURE__ */ import_react29.default.createElement(
   "svg",
   {
     className,
@@ -10966,9 +11149,9 @@ var ReactionIcon = ({ className = "" }) => /* @__PURE__ */ import_react25.defaul
     width: "12",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__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" }))
+  /* @__PURE__ */ import_react29.default.createElement("g", { clipRule: "evenodd", fillRule: "evenodd" }, /* @__PURE__ */ import_react29.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_react29.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_react25.default.createElement("svg", { className, height: "10", width: "14", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react25.default.createElement(
+var ThreadIcon = ({ className = "" }) => /* @__PURE__ */ import_react29.default.createElement("svg", { className, height: "10", width: "14", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react29.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",
@@ -10979,7 +11162,7 @@ var ThreadIcon = ({ className = "" }) => /* @__PURE__ */ import_react25.default.
 // src/components/MessageActions/MessageActions.tsx
 var MessageActionsWrapper = (props) => {
   const { children, customWrapperClass, inline, toggleOpen } = props;
-  const defaultWrapperClass = (0, import_clsx5.default)(
+  const defaultWrapperClass = (0, import_clsx6.default)(
     "str-chat__message-simple__actions__action",
     "str-chat__message-simple__actions__action--options",
     "str-chat__message-actions-container"
@@ -10989,25 +11172,25 @@ var MessageActionsWrapper = (props) => {
     "data-testid": "message-actions",
     onClick: toggleOpen
   };
-  if (inline) return /* @__PURE__ */ import_react26.default.createElement("span", { ...wrapperProps }, children);
-  return /* @__PURE__ */ import_react26.default.createElement("div", { ...wrapperProps }, children);
+  if (inline) return /* @__PURE__ */ import_react30.default.createElement("span", { ...wrapperProps }, children);
+  return /* @__PURE__ */ import_react30.default.createElement("div", { ...wrapperProps }, children);
 };
 
 // src/components/Reactions/ReactionSelectorWithButton.tsx
-var import_react31 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 
 // src/components/Reactions/ReactionSelector.tsx
-var import_react30 = __toESM(require("react"));
-var import_clsx6 = __toESM(require("clsx"));
+var import_react34 = __toESM(require("react"));
+var import_clsx7 = __toESM(require("clsx"));
 
 // src/components/Reactions/reactionOptions.tsx
-var import_react29 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 
 // src/components/Reactions/StreamEmoji.tsx
-var import_react28 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 
 // src/components/Reactions/SpriteImage.tsx
-var import_react27 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 
 // src/components/Reactions/utils/utils.ts
 var isMutableRef = (ref) => {
@@ -11042,13 +11225,13 @@ var SpriteImage = ({
   style,
   width
 }) => {
-  const [[spriteWidth, spriteHeight], setSpriteDimensions] = (0, import_react27.useState)([0, 0]);
-  (0, import_react27.useEffect)(() => {
+  const [[spriteWidth, spriteHeight], setSpriteDimensions] = (0, import_react31.useState)([0, 0]);
+  (0, import_react31.useEffect)(() => {
     getImageDimensions(spriteUrl).then(setSpriteDimensions).catch(console.error);
   }, [spriteUrl]);
   const [x, y] = position4;
-  if (!spriteHeight || !spriteWidth) return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, fallback);
-  return /* @__PURE__ */ import_react27.default.createElement(
+  if (!spriteHeight || !spriteWidth) return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, fallback);
+  return /* @__PURE__ */ import_react31.default.createElement(
     "div",
     {
       "data-testid": "sprite-image",
@@ -11086,7 +11269,7 @@ var StreamEmoji = ({
   type
 }) => {
   const position4 = StreamSpriteEmojiPositions[type];
-  return /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement(
     SpriteImage,
     {
       columns: 2,
@@ -11105,23 +11288,23 @@ var StreamEmoji = ({
 var defaultReactionOptions = [
   {
     type: "haha",
-    Component: () => /* @__PURE__ */ import_react29.default.createElement(StreamEmoji, { fallback: "\u{1F602}", type: "haha" }),
+    Component: () => /* @__PURE__ */ import_react33.default.createElement(StreamEmoji, { fallback: "\u{1F602}", type: "haha" }),
     name: "Joy"
   },
   {
     type: "like",
-    Component: () => /* @__PURE__ */ import_react29.default.createElement(StreamEmoji, { fallback: "\u{1F44D}", type: "like" }),
+    Component: () => /* @__PURE__ */ import_react33.default.createElement(StreamEmoji, { fallback: "\u{1F44D}", type: "like" }),
     name: "Thumbs up"
   },
   {
     type: "love",
-    Component: () => /* @__PURE__ */ import_react29.default.createElement(StreamEmoji, { fallback: "\u2764\uFE0F", type: "love" }),
+    Component: () => /* @__PURE__ */ import_react33.default.createElement(StreamEmoji, { fallback: "\u2764\uFE0F", type: "love" }),
     name: "Heart"
   },
-  { type: "sad", Component: () => /* @__PURE__ */ import_react29.default.createElement(StreamEmoji, { fallback: "\u{1F614}", type: "sad" }), name: "Sad" },
+  { type: "sad", Component: () => /* @__PURE__ */ import_react33.default.createElement(StreamEmoji, { fallback: "\u{1F614}", type: "sad" }), name: "Sad" },
   {
     type: "wow",
-    Component: () => /* @__PURE__ */ import_react29.default.createElement(StreamEmoji, { fallback: "\u{1F632}", type: "wow" }),
+    Component: () => /* @__PURE__ */ import_react33.default.createElement(StreamEmoji, { fallback: "\u{1F632}", type: "wow" }),
     name: "Astonished"
   }
 ];
@@ -11155,23 +11338,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_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)(
+  const [tooltipReactionType, setTooltipReactionType] = (0, import_react34.useState)(null);
+  const [tooltipPositions, setTooltipPositions] = (0, import_react34.useState)(null);
+  const rootRef = (0, import_react34.useRef)(null);
+  const targetRef = (0, import_react34.useRef)(null);
+  const tooltipRef = (0, import_react34.useRef)(null);
+  const showTooltip = (0, import_react34.useCallback)(
     (event, reactionType) => {
       targetRef.current = event.currentTarget;
       setTooltipReactionType(reactionType);
     },
     []
   );
-  const hideTooltip = (0, import_react30.useCallback)(() => {
+  const hideTooltip = (0, import_react34.useCallback)(() => {
     setTooltipReactionType(null);
     setTooltipPositions(null);
   }, []);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!tooltipReactionType || !rootRef.current) return;
     const tooltip = tooltipRef.current?.getBoundingClientRect();
     const target = targetRef.current?.getBoundingClientRect();
@@ -11192,10 +11375,10 @@ 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_react30.default.createElement(
+  return /* @__PURE__ */ import_react34.default.createElement(
     "div",
     {
-      className: (0, import_clsx6.default)(
+      className: (0, import_clsx7.default)(
         "str-chat__reaction-selector str-chat__message-reaction-selector str-chat-react__message-reaction-selector",
         {
           "str-chat__reaction-selector--reverse": reverse
@@ -11204,7 +11387,7 @@ var UnMemoizedReactionSelector = (props) => {
       "data-testid": "reaction-selector",
       ref: rootRef
     },
-    !!tooltipReactionType && detailedView && /* @__PURE__ */ import_react30.default.createElement(
+    !!tooltipReactionType && detailedView && /* @__PURE__ */ import_react34.default.createElement(
       "div",
       {
         className: "str-chat__reaction-selector-tooltip",
@@ -11214,17 +11397,17 @@ var UnMemoizedReactionSelector = (props) => {
           visibility: tooltipPositions ? "visible" : "hidden"
         }
       },
-      /* @__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_react34.default.createElement("div", { className: "arrow", style: { left: tooltipPositions?.arrow } }),
+      getUsersPerReactionType(tooltipReactionType)?.map((user, i, users) => /* @__PURE__ */ import_react34.default.createElement("span", { className: "latest-user-username", key: `key-${i}-${user}` }, `${user}${i < users.length - 1 ? ", " : ""}`))
     ),
-    /* @__PURE__ */ import_react30.default.createElement("ul", { className: "str-chat__message-reactions-list str-chat__message-reactions-options" }, reactionOptions.map(({ Component, name: reactionName, type: reactionType }) => {
+    /* @__PURE__ */ import_react34.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_react30.default.createElement("li", { key: reactionType }, /* @__PURE__ */ import_react30.default.createElement(
+      return /* @__PURE__ */ import_react34.default.createElement("li", { key: reactionType }, /* @__PURE__ */ import_react34.default.createElement(
         "button",
         {
           "aria-label": `Select Reaction: ${reactionName || reactionType}`,
-          className: (0, import_clsx6.default)(
+          className: (0, import_clsx7.default)(
             "str-chat__message-reactions-list-item str-chat__message-reactions-option",
             {
               "str-chat__message-reactions-option-selected": iHaveReactedWithReaction(reactionType)
@@ -11239,7 +11422,7 @@ var UnMemoizedReactionSelector = (props) => {
             }
           }
         },
-        !!count && detailedView && /* @__PURE__ */ import_react30.default.createElement(
+        !!count && detailedView && /* @__PURE__ */ import_react34.default.createElement(
           "div",
           {
             className: "latest-user str-chat__message-reactions-last-user",
@@ -11247,7 +11430,7 @@ var UnMemoizedReactionSelector = (props) => {
             onMouseEnter: (e) => showTooltip(e, reactionType),
             onMouseLeave: hideTooltip
           },
-          latestUser ? /* @__PURE__ */ import_react30.default.createElement(
+          latestUser ? /* @__PURE__ */ import_react34.default.createElement(
             Avatar2,
             {
               image: latestUser.image,
@@ -11255,15 +11438,15 @@ var UnMemoizedReactionSelector = (props) => {
               size: 20,
               user: latestUser
             }
-          ) : /* @__PURE__ */ import_react30.default.createElement("div", { className: "latest-user-not-found" })
+          ) : /* @__PURE__ */ import_react34.default.createElement("div", { className: "latest-user-not-found" })
         ),
-        /* @__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 || "")
+        /* @__PURE__ */ import_react34.default.createElement("span", { className: "str-chat__message-reaction-emoji" }, /* @__PURE__ */ import_react34.default.createElement(Component, null)),
+        Boolean(count) && detailedView && /* @__PURE__ */ import_react34.default.createElement("span", { className: "str-chat__message-reactions-list-item__count" }, count || "")
       ));
     }))
   );
 };
-var ReactionSelector = import_react30.default.memo(
+var ReactionSelector = import_react34.default.memo(
   UnMemoizedReactionSelector
 );
 
@@ -11274,11 +11457,11 @@ var ReactionSelectorWithButton = ({
   const { t } = useTranslationContext("ReactionSelectorWithButton");
   const { isMyMessage, message } = useMessageContext("MessageOptions");
   const { ReactionSelector: ReactionSelector2 = ReactionSelector } = useComponentContext("MessageOptions");
-  const buttonRef = (0, import_react31.useRef)(null);
+  const buttonRef = (0, import_react35.useRef)(null);
   const dialogId = `reaction-selector--${message.id}`;
   const dialog = useDialog({ id: dialogId });
   const dialogIsOpen = useDialogIsOpen(dialogId);
-  return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, /* @__PURE__ */ import_react35.default.createElement(
     DialogAnchor,
     {
       id: dialogId,
@@ -11286,8 +11469,8 @@ var ReactionSelectorWithButton = ({
       referenceElement: buttonRef.current,
       trapFocus: true
     },
-    /* @__PURE__ */ import_react31.default.createElement(ReactionSelector2, null)
-  ), /* @__PURE__ */ import_react31.default.createElement(
+    /* @__PURE__ */ import_react35.default.createElement(ReactionSelector2, null)
+  ), /* @__PURE__ */ import_react35.default.createElement(
     "button",
     {
       "aria-expanded": dialogIsOpen,
@@ -11297,14 +11480,14 @@ var ReactionSelectorWithButton = ({
       onClick: () => dialog?.toggle(),
       ref: buttonRef
     },
-    /* @__PURE__ */ import_react31.default.createElement(ReactionIcon2, { className: "str-chat__message-action-icon" })
+    /* @__PURE__ */ import_react35.default.createElement(ReactionIcon2, { className: "str-chat__message-action-icon" })
   ));
 };
 
 // src/components/InfiniteScrollPaginator/InfiniteScrollPaginator.tsx
-var import_clsx7 = __toESM(require("clsx"));
+var import_clsx8 = __toESM(require("clsx"));
 var import_lodash2 = __toESM(require("lodash.debounce"));
-var import_react32 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var mousewheelListener = (event) => {
   if (event instanceof WheelEvent && event.deltaY === 1) {
     event.preventDefault();
@@ -11322,9 +11505,9 @@ var InfiniteScrollPaginator = (props) => {
     useCapture = false,
     ...componentProps
   } = props;
-  const rootRef = (0, import_react32.useRef)(null);
-  const childRef = (0, import_react32.useRef)(null);
-  const scrollListener = (0, import_react32.useMemo)(
+  const rootRef = (0, import_react36.useRef)(null);
+  const childRef = (0, import_react36.useRef)(null);
+  const scrollListener = (0, import_react36.useMemo)(
     () => (0, import_lodash2.default)(() => {
       const root3 = rootRef.current;
       const child = childRef.current;
@@ -11351,7 +11534,7 @@ var InfiniteScrollPaginator = (props) => {
       threshold
     ]
   );
-  (0, import_react32.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const scrollElement = rootRef.current;
     if (!scrollElement) return;
     scrollElement.addEventListener("scroll", scrollListener, useCapture);
@@ -11359,7 +11542,7 @@ var InfiniteScrollPaginator = (props) => {
       scrollElement.removeEventListener("scroll", scrollListener, useCapture);
     };
   }, [scrollListener, useCapture]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const root3 = rootRef.current;
     if (!root3 || typeof ResizeObserver === "undefined" || !scrollListener) return;
     const observer = new ResizeObserver(scrollListener);
@@ -11368,7 +11551,7 @@ var InfiniteScrollPaginator = (props) => {
       observer.disconnect();
     };
   }, [scrollListener]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const root3 = rootRef.current;
     if (root3) {
       root3.addEventListener("wheel", mousewheelListener, { passive: false });
@@ -11379,21 +11562,17 @@ var InfiniteScrollPaginator = (props) => {
       }
     };
   }, [useCapture]);
-  return /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react36.default.createElement(
     "div",
     {
       ...componentProps,
-      className: (0, import_clsx7.default)("str-chat__infinite-scroll-paginator", className),
+      className: (0, import_clsx8.default)("str-chat__infinite-scroll-paginator", className),
       ref: rootRef
     },
-    /* @__PURE__ */ import_react32.default.createElement("div", { className: "str-chat__infinite-scroll-paginator__content", ref: childRef }, children)
+    /* @__PURE__ */ import_react36.default.createElement("div", { className: "str-chat__infinite-scroll-paginator__content", ref: childRef }, children)
   );
 };
 
-// src/components/Thread/Thread.tsx
-var LegacyThreadContext = import_react33.default.createContext({ legacyThread: void 0 });
-var useLegacyThreadContext = () => (0, import_react33.useContext)(LegacyThreadContext);
-
 // src/components/MessageInput/hooks/useMessageComposer.ts
 var queueCache = new import_stream_chat.FixedSizeQueueCache(64);
 var useMessageComposer = () => {
@@ -11402,15 +11581,15 @@ var useMessageComposer = () => {
   const { editing, message: editedMessage } = useMessageContext();
   const { legacyThread: parentMessage } = useLegacyThreadContext();
   const threadInstance = useThreadContext();
-  const cachedEditedMessage = (0, import_react34.useMemo)(() => {
+  const cachedEditedMessage = (0, import_react37.useMemo)(() => {
     if (!editedMessage) return void 0;
     return editedMessage;
   }, [editedMessage?.id]);
-  const cachedParentMessage = (0, import_react34.useMemo)(() => {
+  const cachedParentMessage = (0, import_react37.useMemo)(() => {
     if (!parentMessage) return void 0;
     return parentMessage;
   }, [parentMessage?.id]);
-  const messageComposer = (0, import_react34.useMemo)(() => {
+  const messageComposer = (0, import_react37.useMemo)(() => {
     if (editing && cachedEditedMessage) {
       const tag = import_stream_chat.MessageComposer.constructTag(cachedEditedMessage);
       const cachedComposer = queueCache.get(tag);
@@ -11450,7 +11629,7 @@ var useMessageComposer = () => {
   ) && !queueCache.peek(messageComposer.tag)) {
     queueCache.add(messageComposer.tag, messageComposer);
   }
-  (0, import_react34.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const unsubscribe = messageComposer.registerSubscriptions();
     return () => {
       unsubscribe();
@@ -11460,17 +11639,17 @@ var useMessageComposer = () => {
 };
 
 // src/experimental/Search/hooks/useSearchQueriesInProgress.ts
-var import_react35 = require("react");
+var import_react38 = require("react");
 var searchControllerStateSelector = (value) => ({
   sources: value.sources
 });
 var useSearchQueriesInProgress = (searchController) => {
-  const [queriesInProgress, setQueriesInProgress] = (0, import_react35.useState)([]);
+  const [queriesInProgress, setQueriesInProgress] = (0, import_react38.useState)([]);
   const { sources } = useStateStore(
     searchController.state,
     searchControllerStateSelector
   );
-  (0, import_react35.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const subscriptions = sources.map(
       (source) => source.state.subscribeWithSelector(
         (value) => ({ isLoading: value.isLoading }),
@@ -11490,7 +11669,7 @@ var useSearchQueriesInProgress = (searchController) => {
 };
 
 // src/experimental/MessageActions/hooks/useBaseMessageActionSetFilter.ts
-var import_react36 = require("react");
+var import_react39 = require("react");
 var useBaseMessageActionSetFilter = (messageActionSet, disable2 = false) => {
   const { initialMessage: isInitialMessage, message } = useMessageContext();
   const {
@@ -11504,7 +11683,7 @@ var useBaseMessageActionSetFilter = (messageActionSet, disable2 = false) => {
     canReply
   } = useUserRole(message);
   const isMessageThreadReply = typeof message.parent_id === "string";
-  return (0, import_react36.useMemo)(() => {
+  return (0, import_react39.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")
@@ -11535,8 +11714,8 @@ var useBaseMessageActionSetFilter = (messageActionSet, disable2 = false) => {
 };
 
 // src/experimental/MessageActions/hooks/useSplitMessageActionSet.ts
-var import_react37 = require("react");
-var useSplitMessageActionSet = (messageActionSet) => (0, import_react37.useMemo)(() => {
+var import_react40 = require("react");
+var useSplitMessageActionSet = (messageActionSet) => (0, import_react40.useMemo)(() => {
   const quickActionSet = [];
   const dropdownActionSet = [];
   for (const action of messageActionSet) {
@@ -11547,14 +11726,15 @@ var useSplitMessageActionSet = (messageActionSet) => (0, import_react37.useMemo)
 }, [messageActionSet]);
 
 // src/experimental/MessageActions/defaults.tsx
-var import_react38 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
+var msgActionsBoxButtonClassName = "str-chat__message-actions-list-item-button";
 var DefaultDropdownActionButton = ({
   "aria-selected": ariaSelected = "false",
   children,
-  className = "str-chat__message-actions-list-item-button",
+  className = msgActionsBoxButtonClassName,
   role = "option",
   ...rest
-}) => /* @__PURE__ */ import_react38.default.createElement("button", { "aria-selected": ariaSelected, className, role, ...rest }, children);
+}) => /* @__PURE__ */ import_react41.default.createElement("button", { "aria-selected": ariaSelected, className, role, ...rest }, children);
 var DefaultMessageActionComponents = {
   dropdown: {
     Quote() {
@@ -11569,48 +11749,71 @@ var DefaultMessageActionComponents = {
           textarea.focus();
         }
       };
-      return /* @__PURE__ */ import_react38.default.createElement(DefaultDropdownActionButton, { onClick: handleQuote }, t("Quote"));
+      return /* @__PURE__ */ import_react41.default.createElement(DefaultDropdownActionButton, { onClick: handleQuote }, t("Quote"));
     },
     Pin() {
       const { handlePin, message } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react38.default.createElement(DefaultDropdownActionButton, { onClick: handlePin }, !message.pinned ? t("Pin") : t("Unpin"));
+      return /* @__PURE__ */ import_react41.default.createElement(DefaultDropdownActionButton, { onClick: handlePin }, !message.pinned ? t("Pin") : t("Unpin"));
     },
     MarkUnread() {
       const { handleMarkUnread } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react38.default.createElement(DefaultDropdownActionButton, { onClick: handleMarkUnread }, t("Mark as unread"));
+      return /* @__PURE__ */ import_react41.default.createElement(DefaultDropdownActionButton, { onClick: handleMarkUnread }, t("Mark as unread"));
     },
     Flag() {
       const { handleFlag } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react38.default.createElement(DefaultDropdownActionButton, { onClick: handleFlag }, t("Flag"));
+      return /* @__PURE__ */ import_react41.default.createElement(DefaultDropdownActionButton, { onClick: handleFlag }, t("Flag"));
     },
     Mute() {
       const { handleMute, message } = useMessageContext();
       const { mutes } = useChatContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react38.default.createElement(DefaultDropdownActionButton, { onClick: handleMute }, isUserMuted(message, mutes) ? t("Unmute") : t("Mute"));
+      return /* @__PURE__ */ import_react41.default.createElement(DefaultDropdownActionButton, { onClick: handleMute }, isUserMuted(message, mutes) ? t("Unmute") : t("Mute"));
     },
     Edit() {
       const { handleEdit } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react38.default.createElement(DefaultDropdownActionButton, { onClick: handleEdit }, t("Edit Message"));
+      return /* @__PURE__ */ import_react41.default.createElement(DefaultDropdownActionButton, { onClick: handleEdit }, t("Edit Message"));
     },
     Delete() {
       const { handleDelete } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react38.default.createElement(DefaultDropdownActionButton, { onClick: handleDelete }, t("Delete"));
+      return /* @__PURE__ */ import_react41.default.createElement(DefaultDropdownActionButton, { onClick: handleDelete }, t("Delete"));
+    },
+    RemindMe() {
+      const { isMyMessage } = useMessageContext();
+      return /* @__PURE__ */ import_react41.default.createElement(
+        RemindMeActionButton,
+        {
+          className: msgActionsBoxButtonClassName,
+          isMine: isMyMessage()
+        }
+      );
+    },
+    SaveForLater() {
+      const { client } = useChatContext();
+      const { message } = useMessageContext();
+      const { t } = useTranslationContext();
+      const reminder = useMessageReminder(message.id);
+      return /* @__PURE__ */ import_react41.default.createElement(
+        DefaultDropdownActionButton,
+        {
+          onClick: () => reminder ? client.reminders.deleteReminder(reminder.id) : client.reminders.createReminder({ messageId: message.id })
+        },
+        reminder ? t("Remove reminder") : t("Save for later")
+      );
     }
   },
   quick: {
     React() {
-      return /* @__PURE__ */ import_react38.default.createElement(ReactionSelectorWithButton, { ReactionIcon });
+      return /* @__PURE__ */ import_react41.default.createElement(ReactionSelectorWithButton, { ReactionIcon });
     },
     Reply() {
       const { handleOpenThread } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react38.default.createElement(
+      return /* @__PURE__ */ import_react41.default.createElement(
         "button",
         {
           "aria-label": t("aria/Open Thread"),
@@ -11618,7 +11821,7 @@ var DefaultMessageActionComponents = {
           "data-testid": "thread-action",
           onClick: handleOpenThread
         },
-        /* @__PURE__ */ import_react38.default.createElement(ThreadIcon, { className: "str-chat__message-action-icon" })
+        /* @__PURE__ */ import_react41.default.createElement(ThreadIcon, { className: "str-chat__message-action-icon" })
       );
     }
   }
@@ -11669,6 +11872,16 @@ var defaultMessageActionSet = [
     Component: DefaultMessageActionComponents.dropdown.MarkUnread,
     placement: "dropdown",
     type: "markUnread"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.RemindMe,
+    placement: "dropdown",
+    type: "remindMe"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.SaveForLater,
+    placement: "dropdown",
+    type: "saveForLater"
   }
 ];
 
@@ -11680,7 +11893,7 @@ var MessageActions = ({
   const { theme } = useChatContext();
   const { isMyMessage, message } = useMessageContext();
   const { t } = useTranslationContext();
-  const [actionsBoxButtonElement, setActionsBoxButtonElement] = (0, import_react39.useState)(null);
+  const [actionsBoxButtonElement, setActionsBoxButtonElement] = (0, import_react42.useState)(null);
   const filteredMessageActionSet = useBaseMessageActionSetFilter(
     messageActionSet,
     disableBaseMessageActionSetFilter
@@ -11696,14 +11909,14 @@ var MessageActions = ({
   if (dropdownActionSet.length + quickActionSet.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ import_react39.default.createElement(
+  return /* @__PURE__ */ import_react42.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_react39.default.createElement(MessageActionsWrapper, { inline: false, toggleOpen: dialog?.toggle }, /* @__PURE__ */ import_react39.default.createElement(
+    dropdownActionSet.length > 0 && /* @__PURE__ */ import_react42.default.createElement(MessageActionsWrapper, { inline: false, toggleOpen: dialog?.toggle }, /* @__PURE__ */ import_react42.default.createElement(
       "button",
       {
         "aria-expanded": dropdownDialogIsOpen,
@@ -11713,8 +11926,8 @@ var MessageActions = ({
         "data-testid": "message-actions-toggle-button",
         ref: setActionsBoxButtonElement
       },
-      /* @__PURE__ */ import_react39.default.createElement(ActionsIcon, { className: "str-chat__message-action-icon" })
-    ), /* @__PURE__ */ import_react39.default.createElement(
+      /* @__PURE__ */ import_react42.default.createElement(ActionsIcon, { className: "str-chat__message-action-icon" })
+    ), /* @__PURE__ */ import_react42.default.createElement(
       DialogAnchor,
       {
         id: dropdownDialogId,
@@ -11723,21 +11936,21 @@ var MessageActions = ({
         tabIndex: -1,
         trapFocus: true
       },
-      /* @__PURE__ */ import_react39.default.createElement(DropdownBox, { open: dropdownDialogIsOpen }, dropdownActionSet.map(({ Component: DropdownActionComponent, type }) => /* @__PURE__ */ import_react39.default.createElement(DropdownActionComponent, { key: type })))
+      /* @__PURE__ */ import_react42.default.createElement(DropdownBox, { open: dropdownDialogIsOpen }, dropdownActionSet.map(({ Component: DropdownActionComponent, type }) => /* @__PURE__ */ import_react42.default.createElement(DropdownActionComponent, { key: type })))
     )),
-    quickActionSet.map(({ Component: QuickActionComponent, type }) => /* @__PURE__ */ import_react39.default.createElement(QuickActionComponent, { key: type }))
+    quickActionSet.map(({ Component: QuickActionComponent, type }) => /* @__PURE__ */ import_react42.default.createElement(QuickActionComponent, { key: type }))
   );
 };
 var DropdownBox = ({ children, open }) => {
   const { t } = useTranslationContext();
-  return /* @__PURE__ */ import_react39.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(
     "div",
     {
       className: (0, import_clsx9.default)("str-chat__message-actions-box", {
         "str-chat__message-actions-box--open": open
       })
     },
-    /* @__PURE__ */ import_react39.default.createElement(
+    /* @__PURE__ */ import_react42.default.createElement(
       "div",
       {
         "aria-label": t("aria/Message Options"),
@@ -11751,21 +11964,21 @@ var DropdownBox = ({ children, open }) => {
 
 // src/experimental/Search/Search.tsx
 var import_clsx12 = __toESM(require("clsx"));
-var import_react52 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 
 // src/experimental/Search/SearchBar/SearchBar.tsx
 var import_clsx10 = __toESM(require("clsx"));
-var import_react41 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 
 // src/experimental/Search/SearchContext.tsx
-var import_react40 = __toESM(require("react"));
-var SearchContext = (0, import_react40.createContext)(void 0);
+var import_react43 = __toESM(require("react"));
+var SearchContext = (0, import_react43.createContext)(void 0);
 var SearchContextProvider = ({
   children,
   value
-}) => /* @__PURE__ */ import_react40.default.createElement(SearchContext.Provider, { value }, children);
+}) => /* @__PURE__ */ import_react43.default.createElement(SearchContext.Provider, { value }, children);
 var useSearchContext = () => {
-  const contextValue = (0, import_react40.useContext)(SearchContext);
+  const contextValue = (0, import_react43.useContext)(SearchContext);
   return contextValue;
 };
 
@@ -11778,12 +11991,12 @@ var SearchBar = () => {
   const { t } = useTranslationContext();
   const { disabled, exitSearchOnInputBlur, placeholder, searchController } = useSearchContext();
   const queriesInProgress = useSearchQueriesInProgress(searchController);
-  const [input, setInput] = (0, import_react41.useState)(null);
+  const [input, setInput] = (0, import_react44.useState)(null);
   const { isActive, searchQuery } = useStateStore(
     searchController.state,
     searchControllerStateSelector2
   );
-  (0, import_react41.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (!input) return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -11796,15 +12009,15 @@ var SearchBar = () => {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [searchController, input]);
-  return /* @__PURE__ */ import_react41.default.createElement("div", { className: "str-chat__search-bar", "data-testid": "search-bar" }, /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement("div", { className: "str-chat__search-bar", "data-testid": "search-bar" }, /* @__PURE__ */ import_react44.default.createElement(
     "div",
     {
       className: (0, import_clsx10.default)("str-chat__search-input--wrapper", {
         "str-chat__search-input--wrapper-active": isActive
       })
     },
-    /* @__PURE__ */ import_react41.default.createElement("div", { className: "str-chat__search-input--icon" }),
-    /* @__PURE__ */ import_react41.default.createElement(
+    /* @__PURE__ */ import_react44.default.createElement("div", { className: "str-chat__search-input--icon" }),
+    /* @__PURE__ */ import_react44.default.createElement(
       "input",
       {
         className: "str-chat__search-input",
@@ -11827,7 +12040,7 @@ var SearchBar = () => {
         value: searchQuery
       }
     ),
-    searchQuery && /* @__PURE__ */ import_react41.default.createElement(
+    searchQuery && /* @__PURE__ */ import_react44.default.createElement(
       "button",
       {
         className: "str-chat__search-input--clear-button",
@@ -11838,9 +12051,9 @@ var SearchBar = () => {
           input?.focus();
         }
       },
-      /* @__PURE__ */ import_react41.default.createElement("div", { className: "str-chat__search-input--clear-button-icon" })
+      /* @__PURE__ */ import_react44.default.createElement("div", { className: "str-chat__search-input--clear-button-icon" })
     )
-  ), isActive ? /* @__PURE__ */ import_react41.default.createElement(
+  ), isActive ? /* @__PURE__ */ import_react44.default.createElement(
     "button",
     {
       className: (0, import_clsx10.default)(
@@ -11857,25 +12070,25 @@ var SearchBar = () => {
 };
 
 // src/experimental/Search/SearchResults/SearchResults.tsx
-var import_react51 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 
 // src/experimental/Search/SearchResults/SearchSourceResults.tsx
-var import_react48 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 
 // src/experimental/Search/SearchResults/SearchSourceResultList.tsx
-var import_react46 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 
 // src/experimental/Search/SearchResults/SearchResultItem.tsx
-var import_react42 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 var import_lodash3 = __toESM(require("lodash.uniqby"));
 var ChannelSearchResultItem = ({ item }) => {
   const { setActiveChannel } = useChatContext();
   const { setChannels } = useChannelListContext();
-  const onSelect = (0, import_react42.useCallback)(() => {
+  const onSelect = (0, import_react45.useCallback)(() => {
     setActiveChannel(item);
     setChannels?.((channels) => (0, import_lodash3.default)([item, ...channels], "cid"));
   }, [item, setActiveChannel, setChannels]);
-  return /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     ChannelPreview,
     {
       channel: item,
@@ -11894,13 +12107,13 @@ var MessageSearchResultItem = ({
     setActiveChannel
   } = useChatContext();
   const { setChannels } = useChannelListContext();
-  const channel = (0, import_react42.useMemo)(() => {
+  const channel = (0, import_react45.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_react42.useCallback)(async () => {
+  const onSelect = (0, import_react45.useCallback)(async () => {
     if (!channel) return;
     await channel.state.loadMessageIntoState(
       item.id,
@@ -11911,9 +12124,9 @@ var MessageSearchResultItem = ({
     setActiveChannel(channel);
     setChannels?.((channels) => (0, import_lodash3.default)([channel, ...channels], "cid"));
   }, [channel, item, searchController, setActiveChannel, setChannels]);
-  const getLatestMessagePreview2 = (0, import_react42.useCallback)(() => item.text, [item]);
+  const getLatestMessagePreview2 = (0, import_react45.useCallback)(() => item.text, [item]);
   if (!channel) return;
-  return /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     ChannelPreview,
     {
       active: channel.cid === activeChannel?.cid && item.id === searchController._internalState.getLatestValue().focusedMessage?.id,
@@ -11928,7 +12141,7 @@ var UserSearchResultItem = ({ item }) => {
   const { client, setActiveChannel } = useChatContext();
   const { setChannels } = useChannelListContext();
   const { directMessagingChannelType } = useSearchContext();
-  const onClick = (0, import_react42.useCallback)(() => {
+  const onClick = (0, import_react45.useCallback)(() => {
     const newChannel = client.channel(directMessagingChannelType, {
       members: [client.userID, item.id]
     });
@@ -11936,7 +12149,7 @@ var UserSearchResultItem = ({ item }) => {
     setActiveChannel(newChannel);
     setChannels?.((channels) => (0, import_lodash3.default)([newChannel, ...channels], "cid"));
   }, [client, item, setActiveChannel, setChannels, directMessagingChannelType]);
-  return /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     "button",
     {
       "aria-label": `Select User Channel: ${item.name || ""}`,
@@ -11945,7 +12158,7 @@ var UserSearchResultItem = ({ item }) => {
       onClick,
       role: "option"
     },
-    /* @__PURE__ */ import_react42.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement(
       Avatar,
       {
         className: "str-chat__avatar--channel-preview",
@@ -11954,7 +12167,7 @@ var UserSearchResultItem = ({ item }) => {
         user: item
       }
     ),
-    /* @__PURE__ */ import_react42.default.createElement("div", { className: "str-chat__search-result--display-name" }, item.name || item.id)
+    /* @__PURE__ */ import_react45.default.createElement("div", { className: "str-chat__search-result--display-name" }, item.name || item.id)
   );
 };
 var DefaultSearchResultItems = {
@@ -11964,18 +12177,18 @@ var DefaultSearchResultItems = {
 };
 
 // src/experimental/Search/SearchResults/SearchSourceResultListFooter.tsx
-var import_react45 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 
 // src/experimental/Search/SearchResults/SearchSourceResultsLoadingIndicator.tsx
-var import_react44 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 
 // src/experimental/Search/SearchSourceResultsContext.tsx
-var import_react43 = __toESM(require("react"));
-var SearchSourceResultsContext = (0, import_react43.createContext)(void 0);
+var import_react46 = __toESM(require("react"));
+var SearchSourceResultsContext = (0, import_react46.createContext)(void 0);
 var SearchSourceResultsContextProvider = ({
   children,
   value
-}) => /* @__PURE__ */ import_react43.default.createElement(
+}) => /* @__PURE__ */ import_react46.default.createElement(
   SearchSourceResultsContext.Provider,
   {
     value
@@ -11983,7 +12196,7 @@ var SearchSourceResultsContextProvider = ({
   children
 );
 var useSearchSourceResultsContext = () => {
-  const contextValue = (0, import_react43.useContext)(SearchSourceResultsContext);
+  const contextValue = (0, import_react46.useContext)(SearchSourceResultsContext);
   return contextValue;
 };
 
@@ -11991,7 +12204,7 @@ var useSearchSourceResultsContext = () => {
 var SearchSourceResultsLoadingIndicator = () => {
   const { t } = useTranslationContext();
   const { searchSource } = useSearchSourceResultsContext();
-  return /* @__PURE__ */ import_react44.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(
     "div",
     {
       className: "str-chat__search-source-results__loading-indicator",
@@ -12016,13 +12229,13 @@ var SearchSourceResultListFooter = () => {
     searchSource.state,
     searchSourceStateSelector
   );
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     "div",
     {
       className: "str-chat__search-source-result-list__footer",
       "data-testid": "search-footer"
     },
-    isLoading ? /* @__PURE__ */ import_react45.default.createElement(SearchSourceResultsLoadingIndicator2, null) : !hasNext ? /* @__PURE__ */ import_react45.default.createElement("div", { className: "str-chat__search-source-results---empty" }, t("All results loaded")) : null
+    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
   );
 };
 
@@ -12040,36 +12253,36 @@ var SearchSourceResultList = ({
   const { items } = useStateStore(searchSource.state, searchSourceStateSelector2);
   const SearchResultItem = SearchResultItems[searchSource.type];
   if (!SearchResultItem) return null;
-  return /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(
     "div",
     {
       className: "str-chat__search-source-result-list",
       "data-testid": "search-source-result-list"
     },
-    /* @__PURE__ */ import_react46.default.createElement(
+    /* @__PURE__ */ import_react49.default.createElement(
       InfiniteScrollPaginator,
       {
         loadNextDebounceMs: loadMoreDebounceMs,
         loadNextOnScrollToBottom: searchSource.search,
         threshold: loadMoreThresholdPx
       },
-      items?.map((item, i) => /* @__PURE__ */ import_react46.default.createElement(
+      items?.map((item, i) => /* @__PURE__ */ import_react49.default.createElement(
         SearchResultItem,
         {
           item,
           key: `source-search-result-${searchSource.type}-${i}`
         }
       )),
-      /* @__PURE__ */ import_react46.default.createElement(SearchSourceResultListFooter2, null)
+      /* @__PURE__ */ import_react49.default.createElement(SearchSourceResultListFooter2, null)
     )
   );
 };
 
 // src/experimental/Search/SearchResults/SearchSourceResultsEmpty.tsx
-var import_react47 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var SearchSourceResultsEmpty = () => {
   const { t } = useTranslationContext();
-  return /* @__PURE__ */ import_react47.default.createElement("div", { className: "str-chat__search-source-results-empty" }, t("No results found"));
+  return /* @__PURE__ */ import_react50.default.createElement("div", { className: "str-chat__search-source-results-empty" }, t("No results found"));
 };
 
 // src/experimental/Search/SearchResults/SearchSourceResultsHeader.tsx
@@ -12091,20 +12304,20 @@ var SearchSourceResults = ({ searchSource }) => {
     searchSourceStateSelector3
   );
   if (!items && !isLoading) return null;
-  return /* @__PURE__ */ import_react48.default.createElement(SearchSourceResultsContextProvider, { value: { searchSource } }, /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react51.default.createElement(SearchSourceResultsContextProvider, { value: { searchSource } }, /* @__PURE__ */ import_react51.default.createElement(
     "div",
     {
       className: "str-chat__search-source-results",
       "data-testid": "search-source-results"
     },
-    /* @__PURE__ */ import_react48.default.createElement(SearchSourceResultsHeader2, null),
-    items?.length || isLoading ? /* @__PURE__ */ import_react48.default.createElement(SearchSourceResultList2, null) : /* @__PURE__ */ import_react48.default.createElement(SearchSourceResultsEmpty2, null)
+    /* @__PURE__ */ import_react51.default.createElement(SearchSourceResultsHeader2, null),
+    items?.length || isLoading ? /* @__PURE__ */ import_react51.default.createElement(SearchSourceResultList2, null) : /* @__PURE__ */ import_react51.default.createElement(SearchSourceResultsEmpty2, null)
   ));
 };
 
 // src/experimental/Search/SearchResults/SearchResultsHeader.tsx
 var import_clsx11 = __toESM(require("clsx"));
-var import_react49 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var searchSourceStateSelector4 = (nextValue) => ({
   isActive: nextValue.isActive
 });
@@ -12113,7 +12326,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_react49.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement(
     "button",
     {
       "aria-label": t("aria/Search results header filter button"),
@@ -12136,13 +12349,13 @@ var SearchSourceFilterButton = ({ source }) => {
 };
 var SearchResultsHeader = () => {
   const { searchController } = useSearchContext();
-  return /* @__PURE__ */ import_react49.default.createElement("div", { className: "str-chat__search-results-header", "data-testid": "search-results-header" }, /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement("div", { className: "str-chat__search-results-header", "data-testid": "search-results-header" }, /* @__PURE__ */ import_react52.default.createElement(
     "div",
     {
       className: "str-chat__search-results-header__filter-source-buttons",
       "data-testid": "filter-source-buttons"
     },
-    searchController.sources.map((source) => /* @__PURE__ */ import_react49.default.createElement(
+    searchController.sources.map((source) => /* @__PURE__ */ import_react52.default.createElement(
       SearchSourceFilterButton,
       {
         key: `search-source-filter-button-${source.type}`,
@@ -12153,10 +12366,10 @@ var SearchResultsHeader = () => {
 };
 
 // src/experimental/Search/SearchResults/SearchResultsPresearch.tsx
-var import_react50 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var SearchResultsPresearch = () => {
   const { t } = useTranslationContext();
-  return /* @__PURE__ */ import_react50.default.createElement("div", { className: "str-chat__search-results-presearch" }, t("Start typing to search"));
+  return /* @__PURE__ */ import_react53.default.createElement("div", { className: "str-chat__search-results-presearch" }, t("Start typing to search"));
 };
 
 // src/experimental/Search/SearchResults/SearchResults.tsx
@@ -12177,7 +12390,7 @@ var SearchResults = () => {
     searchController.state,
     searchControllerStateSelector3
   );
-  return !isActive ? null : /* @__PURE__ */ import_react51.default.createElement("div", { "aria-label": t("aria/Search results"), className: "str-chat__search-results" }, /* @__PURE__ */ import_react51.default.createElement(SearchResultsHeader2, null), !searchQuery ? /* @__PURE__ */ import_react51.default.createElement(SearchResultsPresearch2, { activeSources }) : activeSources.map((source) => /* @__PURE__ */ import_react51.default.createElement(SearchSourceResults2, { key: source.type, searchSource: source })));
+  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 })));
 };
 
 // src/experimental/Search/Search.tsx
@@ -12191,7 +12404,7 @@ var Search = ({
   const { SearchBar: SearchBar2 = SearchBar, SearchResults: SearchResults2 = SearchResults } = useComponentContext();
   const { searchController } = useChatContext();
   const { isActive } = useStateStore(searchController.state, searchControllerStateSelector4);
-  return /* @__PURE__ */ import_react52.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement(
     SearchContextProvider,
     {
       value: {
@@ -12202,7 +12415,7 @@ var Search = ({
         searchController
       }
     },
-    /* @__PURE__ */ import_react52.default.createElement(
+    /* @__PURE__ */ import_react55.default.createElement(
       "div",
       {
         className: (0, import_clsx12.default)("str-chat__search", {
@@ -12210,8 +12423,8 @@ var Search = ({
         }),
         "data-testid": "search"
       },
-      /* @__PURE__ */ import_react52.default.createElement(SearchBar2, null),
-      /* @__PURE__ */ import_react52.default.createElement(SearchResults2, null)
+      /* @__PURE__ */ import_react55.default.createElement(SearchBar2, null),
+      /* @__PURE__ */ import_react55.default.createElement(SearchResults2, null)
     )
   );
 };