stream-chat-react 14.0.0-beta.2 → 14.0.0-beta.3

package/dist/cjs/index.js

@@ -4,8 +4,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const clsx = require("clsx");
 const nanoid = require("nanoid");
 const React = require("react");
-const audioProcessing = require("../audioProcessing-BbOs2wMd.js");
-const WithAudioPlayback = require("../WithAudioPlayback-myzUS2m6.js");
+const audioProcessing = require("./audioProcessing.56e5db9d.js");
+const WithAudioPlayback = require("./WithAudioPlayback.4a84360f.js");
 const streamChat = require("stream-chat");
 const throttle = require("lodash.throttle");
 const linkify = require("linkifyjs");
@@ -19,7 +19,6 @@ const unistUtilVisit = require("unist-util-visit");
 const i18n = require("i18next");
 const Dayjs = require("dayjs");
 const uniqBy = require("lodash.uniqby");
-const tsPattern = require("ts-pattern");
 const shim = require("use-sync-external-store/shim");
 const debounce = require("lodash.debounce");
 const fixWebmDuration = require("fix-webm-duration");
@@ -89,10 +88,11 @@ const useAIState = (channel) => {
   return { aiState };
 };
 class DialogManager {
-  constructor({ id } = {}) {
+  constructor({ closeOnClickOutside = true, id } = {}) {
     this.state = new streamChat.StateStore({
       dialogsById: {}
     });
+    this.closeOnClickOutside = closeOnClickOutside;
     this.id = id ?? nanoid.nanoid();
   }
   get openDialogCount() {
@@ -107,13 +107,14 @@ class DialogManager {
   get(id) {
     return this.state.getLatestValue().dialogsById[id];
   }
-  getOrCreate({ id }) {
+  getOrCreate({ closeOnClickOutside, id }) {
     let dialog = this.state.getLatestValue().dialogsById[id];
     if (!dialog) {
       dialog = {
         close: () => {
           this.close(id);
         },
+        closeOnClickOutside,
         id,
         isOpen: false,
         open: () => {
@@ -129,21 +130,22 @@ class DialogManager {
       };
       this.state.next((current) => ({
         ...current,
-        ...{ dialogsById: { ...current.dialogsById, [id]: dialog } }
+        dialogsById: { ...current.dialogsById, [id]: dialog }
       }));
     }
-    if (dialog.removalTimeout) {
-      clearTimeout(dialog.removalTimeout);
+    const shouldUpdateDialogSettings = dialog.closeOnClickOutside !== closeOnClickOutside || !!dialog.removalTimeout;
+    if (shouldUpdateDialogSettings) {
+      if (dialog.removalTimeout) clearTimeout(dialog.removalTimeout);
+      dialog = {
+        ...dialog,
+        closeOnClickOutside,
+        removalTimeout: void 0
+      };
       this.state.next((current) => ({
         ...current,
-        ...{
-          dialogsById: {
-            ...current.dialogsById,
-            [id]: {
-              ...dialog,
-              removalTimeout: void 0
-            }
-          }
+        dialogsById: {
+          ...current.dialogsById,
+          [id]: dialog
         }
       }));
     }
@@ -220,7 +222,11 @@ class DialogManager {
     }));
   }
 }
-const useDialog = ({ dialogManagerId, id }) => {
+const useDialog = ({
+  closeOnClickOutside,
+  dialogManagerId,
+  id
+}) => {
   const { dialogManager } = useDialogManager({ dialogManagerId });
   React.useEffect(
     () => () => {
@@ -228,7 +234,7 @@ const useDialog = ({ dialogManagerId, id }) => {
     },
     [dialogManager, id]
   );
-  return dialogManager.getOrCreate({ id });
+  return dialogManager.getOrCreate({ closeOnClickOutside, id });
 };
 const useDialogOnNearestManager = ({ id }) => {
   const { dialogManager } = useNearestDialogManagerContext() ?? {};
@@ -275,9 +281,37 @@ const Portal = ({
   if (!portalDestination) return null;
   return reactDom.createPortal(children, portalDestination);
 };
+const shouldCloseOnOutsideClick = ({
+  dialog,
+  managerCloseOnClickOutside
+}) => dialog.closeOnClickOutside ?? managerCloseOnClickOutside;
 const DialogPortalDestination = () => {
   const { dialogManager } = useNearestDialogManagerContext() ?? {};
   const openedDialogCount = useOpenedDialogCount({ dialogManagerId: dialogManager?.id });
+  const [destinationRoot, setDestinationRoot] = React.useState(null);
+  React.useEffect(() => {
+    if (!destinationRoot || !dialogManager) return;
+    const handleDocumentClick = (event) => {
+      if (destinationRoot.contains(event.target)) return;
+      setTimeout(() => {
+        Object.values(dialogManager.state.getLatestValue().dialogsById).forEach(
+          (dialog) => {
+            if (!dialog.isOpen) return;
+            if (!shouldCloseOnOutsideClick({
+              dialog,
+              managerCloseOnClickOutside: dialogManager.closeOnClickOutside
+            }))
+              return;
+            dialogManager.close(dialog.id);
+          }
+        );
+      }, 0);
+    };
+    document.addEventListener("click", handleDocumentClick, { capture: true });
+    return () => {
+      document.removeEventListener("click", handleDocumentClick, { capture: true });
+    };
+  }, [destinationRoot, dialogManager]);
   if (!openedDialogCount) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -285,7 +319,22 @@ const DialogPortalDestination = () => {
       className: "str-chat__dialog-overlay",
       "data-str-chat__portal-id": dialogManager?.id,
       "data-testid": "str-chat__dialog-overlay",
-      onClick: () => dialogManager?.closeAll(),
+      onClick: (event) => {
+        if (!dialogManager) return;
+        if (event.target !== event.currentTarget) return;
+        Object.values(dialogManager.state.getLatestValue().dialogsById).forEach(
+          (dialog) => {
+            if (!dialog.isOpen) return;
+            if (!shouldCloseOnOutsideClick({
+              dialog,
+              managerCloseOnClickOutside: dialogManager.closeOnClickOutside
+            }))
+              return;
+            dialogManager.close(dialog.id);
+          }
+        );
+      },
+      ref: setDestinationRoot,
       style: {
         "--str-chat__dialog-overlay-height": openedDialogCount > 0 ? "100%" : "0"
       }
@@ -307,11 +356,16 @@ const DialogPortalEntry = ({
 };
 const dialogManagersRegistry = new streamChat.StateStore({});
 const getDialogManager = (id) => dialogManagersRegistry.getLatestValue()[id];
-const getOrCreateDialogManager = (id) => {
+const getOrCreateDialogManager = ({
+  closeOnClickOutside,
+  id
+}) => {
   let manager = getDialogManager(id);
   if (!manager) {
-    manager = new DialogManager({ id });
+    manager = new DialogManager({ closeOnClickOutside, id });
     dialogManagersRegistry.partialNext({ [id]: manager });
+  } else if (typeof closeOnClickOutside === "boolean") {
+    manager.closeOnClickOutside = closeOnClickOutside;
   }
   return manager;
 };
@@ -322,20 +376,21 @@ const removeDialogManager = (id) => {
 const DialogManagerProviderContext = React.createContext(void 0);
 const DialogManagerProvider = ({
   children,
+  closeOnClickOutside,
   id
 }) => {
   const [dialogManager, setDialogManager] = React.useState(() => {
     if (id) return getDialogManager(id) ?? null;
-    return new DialogManager();
+    return new DialogManager({ closeOnClickOutside });
   });
   React.useEffect(() => {
     if (!id) return;
-    setDialogManager(getOrCreateDialogManager(id));
+    setDialogManager(getOrCreateDialogManager({ closeOnClickOutside, id }));
     return () => {
       removeDialogManager(id);
       setDialogManager(null);
     };
-  }, [id]);
+  }, [closeOnClickOutside, id]);
   if (!dialogManager) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogManagerProviderContext.Provider, { value: { dialogManager }, children: [
     children,
@@ -9054,6 +9109,7 @@ function useDialogAnchor({
     setPopperElement(null);
   }
   return {
+    placement: stabilisedChosenPlacement ?? chosenPlacement,
     setPopperElement,
     styles: {
       left: x ?? 0,
@@ -9066,6 +9122,8 @@ const DialogAnchor = ({
   allowFlip = true,
   children,
   className,
+  closeOnClickOutside,
+  closeTransitionMs = 0,
   dialogManagerId,
   focus: focus$1 = true,
   id,
@@ -9078,12 +9136,44 @@ const DialogAnchor = ({
   updatePositionOnContentResize,
   ...restDivProps
 }) => {
-  const dialog = useDialog({ dialogManagerId, id });
+  const dialog = useDialog({ closeOnClickOutside, dialogManagerId, id });
   const open = useDialogIsOpen(id, dialogManagerId);
-  const { setPopperElement, styles } = useDialogAnchor({
+  const [shouldRender, setShouldRender] = React.useState(open);
+  const closeTimeoutRef = React.useRef(null);
+  const isClosing = !open && shouldRender;
+  React.useEffect(() => {
+    if (open) {
+      setShouldRender(true);
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+      return;
+    }
+    if (!shouldRender) return;
+    if (!closeTransitionMs) {
+      setShouldRender(false);
+      return;
+    }
+    closeTimeoutRef.current = setTimeout(() => {
+      setShouldRender(false);
+      closeTimeoutRef.current = null;
+    }, closeTransitionMs);
+  }, [closeTransitionMs, open, shouldRender]);
+  React.useEffect(
+    () => () => {
+      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+    },
+    []
+  );
+  const {
+    placement: chosenPlacement,
+    setPopperElement,
+    styles
+  } = useDialogAnchor({
     allowFlip,
     offset,
-    open,
+    open: shouldRender,
     placement,
     referenceElement,
     updateKey,
@@ -9100,7 +9190,7 @@ const DialogAnchor = ({
       document.removeEventListener("keyup", hideOnEscape);
     };
   }, [dialog, open]);
-  if (!open) {
+  if (!shouldRender) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx(DialogPortalEntry, { dialogId: id, dialogManagerId, children: /* @__PURE__ */ jsxRuntime.jsx(focus.FocusScope, { autoFocus: focus$1, contain: trapFocus, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -9108,6 +9198,8 @@ const DialogAnchor = ({
     {
       ...restDivProps,
       className: clsx("str-chat__dialog-contents", className),
+      "data-str-chat-dialog-state": isClosing ? "closing" : "open",
+      "data-str-chat-placement": chosenPlacement,
       "data-testid": "str-chat__dialog-contents",
       ref: setPopperElement,
       style: styles,
@@ -9450,16 +9542,152 @@ const EmojiContextMenuButton = ({
     ]
   }
 );
-const ContextMenuButton = ({
-  onBlur,
-  onFocus,
-  ...props
+const ContextMenuButtonWithSubmenu = ({
+  children,
+  className,
+  Submenu,
+  submenuContainerProps,
+  submenuPlacement = "right-start",
+  submenuRollAxis = "x",
+  ...buttonProps
 }) => {
+  const { className: submenuClassName, ...submenuContainerRestProps } = submenuContainerProps ?? {};
+  const buttonRef = React.useRef(null);
+  const [dialogContainer, setDialogContainer] = React.useState(null);
+  const keepSubmenuOpenFlag = React.useRef(false);
+  const dialogCloseTimeout = React.useRef(null);
+  const dialogId2 = React.useMemo(() => `submenu-${Math.random().toString(36).slice(2)}`, []);
+  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
+  const dialogIsOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
+  const {
+    placement: chosenPlacement,
+    setPopperElement,
+    styles
+  } = useDialogAnchor({
+    open: dialogIsOpen,
+    placement: submenuPlacement,
+    referenceElement: buttonRef.current
+  });
+  const closeDialogLazily = React.useCallback(() => {
+    if (dialogCloseTimeout.current) clearTimeout(dialogCloseTimeout.current);
+    dialogCloseTimeout.current = setTimeout(() => {
+      if (keepSubmenuOpenFlag.current) return;
+      dialog.close();
+    }, 100);
+  }, [dialog]);
+  const keepSubmenuOpen = React.useCallback(() => {
+    keepSubmenuOpenFlag.current = true;
+  }, []);
+  const allowToCloseSubmenu = React.useCallback(() => {
+    keepSubmenuOpenFlag.current = false;
+  }, []);
+  const closeSubmenu = React.useCallback(() => {
+    allowToCloseSubmenu();
+    closeDialogLazily();
+  }, [allowToCloseSubmenu, closeDialogLazily]);
+  const handleClose = React.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();
+  };
+  React.useEffect(() => {
+    const parentButton = buttonRef.current;
+    if (!dialogIsOpen || !parentButton) return;
+    const hideOnEscape = (event) => {
+      if (event.key !== "Escape") return;
+      handleClose(event);
+      closeSubmenu();
+    };
+    document.addEventListener("keyup", hideOnEscape, { capture: true });
+    return () => {
+      document.removeEventListener("keyup", hideOnEscape, { capture: true });
+    };
+  }, [dialogIsOpen, handleClose, closeSubmenu]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BaseContextMenuButton,
+      {
+        "aria-selected": "false",
+        className: clsx(className, "str_chat__button-with-submenu", {
+          "str_chat__button-with-submenu--submenu-open": dialogIsOpen
+        }),
+        hasSubMenu: true,
+        onBlur: closeSubmenu,
+        onClick: (event) => {
+          event.stopPropagation();
+          dialog.toggle();
+        },
+        onFocus: handleFocusParentButton,
+        onMouseEnter: handleFocusParentButton,
+        onMouseLeave: closeSubmenu,
+        role: "option",
+        ...buttonProps,
+        ref: buttonRef,
+        children
+      }
+    ),
+    dialogIsOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx("str-chat__context-menu__submenu-container", submenuClassName),
+        "data-str-chat-placement": chosenPlacement,
+        "data-str-chat-roll-axis": submenuRollAxis,
+        onBlur: (event) => {
+          const isBlurredDescendant = event.relatedTarget instanceof Node && dialogContainer?.contains(event.relatedTarget);
+          if (isBlurredDescendant) return;
+          closeSubmenu();
+        },
+        onFocus: keepSubmenuOpen,
+        onMouseEnter: keepSubmenuOpen,
+        onMouseLeave: closeSubmenu,
+        ref: (element) => {
+          setPopperElement(element);
+          setDialogContainer(element);
+        },
+        style: styles,
+        tabIndex: -1,
+        ...submenuContainerRestProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Submenu, {})
+      }
+    )
+  ] });
+};
+const ContextMenuButton = (props) => {
+  const {
+    Submenu,
+    submenuContainerProps,
+    submenuPlacement,
+    submenuRollAxis,
+    ...buttonProps
+  } = props;
   const [isFocused, setIsFocused] = React.useState(false);
+  if (Submenu) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ContextMenuButtonWithSubmenu,
+      {
+        ...buttonProps,
+        Submenu,
+        submenuContainerProps,
+        submenuPlacement,
+        submenuRollAxis
+      }
+    );
+  }
+  const { onBlur, onFocus, ...baseButtonProps } = buttonProps;
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseContextMenuButton,
     {
-      ...props,
+      ...baseButtonProps,
       "aria-selected": isFocused ? "true" : "false",
       onBlur: (e) => {
         setIsFocused(false);
@@ -9508,12 +9736,14 @@ function ContextMenuContent({
   backLabel = "Back",
   children,
   className,
+  enableAnimations = true,
   Header: Header2,
   items,
   ItemsWrapper,
   menuClassName,
   onClose,
   onMenuLevelChange,
+  transitionDirection,
   ...props
 }) {
   const rootLevel = React.useMemo(
@@ -9526,6 +9756,7 @@ function ContextMenuContent({
     [Header2, items, ItemsWrapper, menuClassName]
   );
   const [menuStack, setMenuStack] = React.useState(() => [rootLevel]);
+  const [menuBodyAnimationKey, setMenuBodyAnimationKey] = React.useState(0);
   const activeMenu = menuStack[menuStack.length - 1];
   const ActiveMenuItemsWrapper = activeMenu.ItemsWrapper ?? React.Fragment;
   const closeMenu = React.useCallback(() => {
@@ -9549,10 +9780,9 @@ function ContextMenuContent({
     [ItemsWrapper]
   );
   const returnToParentMenu = React.useCallback(() => {
-    setMenuStack(
-      (current) => current.length > 1 ? current.slice(0, current.length - 1) : current
-    );
-  }, []);
+    if (menuStack.length <= 1) return;
+    setMenuStack((current) => current.slice(0, current.length - 1));
+  }, [menuStack.length]);
   React.useEffect(() => {
     setMenuStack((current) => {
       if (current.length === 1 && current[0] === rootLevel) return current;
@@ -9562,42 +9792,116 @@ function ContextMenuContent({
   React.useEffect(() => {
     onMenuLevelChange?.(menuStack.length);
   }, [menuStack.length, onMenuLevelChange]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuContext.Provider, { value: { closeMenu, openSubmenu, returnToParentMenu }, children: /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuRoot, { className: clsx(className, activeMenu.menuClassName), ...props, children: [
-    activeMenu.Header ? /* @__PURE__ */ jsxRuntime.jsx(activeMenu.Header, {}) : menuStack.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuBackButton, { onClick: returnToParentMenu, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconChevronLeft, {}),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: backLabel })
-    ] }) }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(ContextMenuBody, { children: activeMenu.Submenu ? /* @__PURE__ */ jsxRuntime.jsx(activeMenu.Submenu, {}) : /* @__PURE__ */ jsxRuntime.jsx(ActiveMenuItemsWrapper, { children: typeof children !== "undefined" ? children : activeMenu.items?.map((Item2, index) => /* @__PURE__ */ jsxRuntime.jsx(Item2, {}, `context-menu-item-${index}`)) }) })
-  ] }) });
+  React.useEffect(() => {
+    if (!transitionDirection) return;
+    setMenuBodyAnimationKey((value) => value + 1);
+  }, [transitionDirection, menuStack.length]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuContext.Provider, { value: { closeMenu, openSubmenu, returnToParentMenu }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    ContextMenuRoot,
+    {
+      className: clsx(className, activeMenu.menuClassName),
+      "data-str-chat-enable-animations": enableAnimations,
+      ...props,
+      children: [
+        activeMenu.Header ? /* @__PURE__ */ jsxRuntime.jsx(activeMenu.Header, {}) : menuStack.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuBackButton, { onClick: returnToParentMenu, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconChevronLeft, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: backLabel })
+        ] }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ContextMenuBody,
+          {
+            className: clsx({
+              "str-chat__context-menu__body--submenu-backward": transitionDirection === "backward",
+              "str-chat__context-menu__body--submenu-forward": transitionDirection === "forward"
+            }),
+            children: activeMenu.Submenu ? /* @__PURE__ */ jsxRuntime.jsx(activeMenu.Submenu, {}) : /* @__PURE__ */ jsxRuntime.jsx(ActiveMenuItemsWrapper, { children: typeof children !== "undefined" ? children : activeMenu.items?.map((Item2, index) => /* @__PURE__ */ jsxRuntime.jsx(Item2, {}, `context-menu-item-${index}`)) })
+          },
+          `context-menu-body-${menuStack.length}-${menuBodyAnimationKey}`
+        )
+      ]
+    }
+  ) });
 }
 const ContextMenu = (props) => {
+  const { ContextMenuContent: ContextMenuContentComponent = ContextMenuContent } = WithAudioPlayback.useComponentContext();
   const {
     allowFlip,
+    closeOnClickOutside,
+    closeTransitionMs = 130,
     dialogManagerId,
     focus: focus2,
     id,
     placement,
     referenceElement,
+    submenuTransitionDurationMs,
     tabIndex,
     trapFocus,
     ...menuProps
   } = props;
+  const resolvedSubmenuTransitionDurationMs = submenuTransitionDurationMs ?? 460;
   const isAnchored = id != null;
   const [menuLevel, setMenuLevel] = React.useState(1);
+  const [transitionDirection, setTransitionDirection] = React.useState(void 0);
+  const [contentResetToken, setContentResetToken] = React.useState(0);
+  const transitionTimeoutRef = React.useRef(null);
+  const previousMenuLevelRef = React.useRef(1);
   const open = useDialogIsOpen(id ?? "", dialogManagerId);
+  const previousOpenRef = React.useRef(open);
   React.useEffect(() => {
-    if (isAnchored && !open) setMenuLevel(1);
+    if (!isAnchored) return;
+    if (previousOpenRef.current && !open) {
+      setMenuLevel(1);
+      setTransitionDirection(void 0);
+      setContentResetToken((value) => value + 1);
+      previousMenuLevelRef.current = 1;
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current);
+        transitionTimeoutRef.current = null;
+      }
+    }
+    previousOpenRef.current = open;
   }, [isAnchored, open]);
-  const content = /* @__PURE__ */ jsxRuntime.jsx(
-    ContextMenuContent,
+  React.useEffect(
+    () => () => {
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current);
+      }
+    },
+    []
+  );
+  const handleMenuLevelChange = React.useCallback(
+    (level) => {
+      if (isAnchored) {
+        const previousLevel = previousMenuLevelRef.current;
+        if (level !== previousLevel) {
+          setTransitionDirection(level > previousLevel ? "forward" : "backward");
+          if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
+          transitionTimeoutRef.current = setTimeout(() => {
+            setTransitionDirection(void 0);
+            transitionTimeoutRef.current = null;
+          }, resolvedSubmenuTransitionDurationMs);
+        }
+        previousMenuLevelRef.current = level;
+        setMenuLevel(level);
+        return;
+      }
+      menuProps.onMenuLevelChange?.(level);
+    },
+    [isAnchored, menuProps, resolvedSubmenuTransitionDurationMs]
+  );
+  const content = /* @__PURE__ */ React.createElement(
+    ContextMenuContentComponent,
     {
       ...menuProps,
-      onMenuLevelChange: isAnchored ? setMenuLevel : menuProps.onMenuLevelChange
+      key: `context-menu-content-${contentResetToken}`,
+      onMenuLevelChange: handleMenuLevelChange,
+      transitionDirection
     }
   );
   if (isAnchored) {
     const {
       backLabel: _b,
+      enableAnimations: _ea,
       Header: _h,
       items: _i,
       ItemsWrapper: _w,
@@ -9610,6 +9914,8 @@ const ContextMenu = (props) => {
       DialogAnchor,
       {
         allowFlip,
+        closeOnClickOutside,
+        closeTransitionMs,
         dialogManagerId,
         focus: focus2,
         id,
@@ -9947,7 +10253,9 @@ const useBaseMessageActionSetFilter = (messageActionSet, disable = false) => {
     if (isBounced || isInitialMessage || // not sure whether this thing even works anymore
     !message.type || message.type === "system" || message.type === "ephemeral" || message.status === "sending")
       return [];
-    return messageActionSet.filter(({ type }) => {
+    return messageActionSet.filter((action) => {
+      if (action.placement === "quick-dropdown-toggle") return true;
+      const type = action.type;
       if (WithAudioPlayback.ACTIONS_NOT_WORKING_IN_THREAD.includes(type) && isMessageThreadReply)
         return false;
       if (message.error) {
@@ -11855,6 +12163,7 @@ const toBaseImageDescriptors = (attachment, options = {}) => {
       title: attachment.title
     };
   }
+  return void 0;
 };
 const BASE_FILE_ICON_CLASSNAME = "str-chat__file-icon";
 const FILE_ICON_GRAPHIC_CLASSNAME = "str-chat__file-icon__graphic";
@@ -14692,7 +15001,8 @@ const PollOptionWithVotes = ({
     "div",
     {
       className: clsx("str-chat__poll-option", {
-        "str-chat__poll-option--has-more-votes": isVotesPreview && voteCount > countVotesPreview
+        "str-chat__poll-option--has-more-votes": isVotesPreview && voteCount > countVotesPreview,
+        "str-chat__poll-option--has-votes": voteCount
       }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(PollOptionWithVotesHeader, { option, optionOrderNumber: orderNumber }),
@@ -15705,7 +16015,7 @@ const AttachmentSelector = ({
   getModalPortalDestination
 }) => {
   const { t } = WithAudioPlayback.useTranslationContext();
-  const { Modal = GlobalModal } = WithAudioPlayback.useComponentContext();
+  const { ContextMenu: ContextMenuComponent = ContextMenu, Modal = GlobalModal } = WithAudioPlayback.useComponentContext();
   const { channelCapabilities } = WithAudioPlayback.useChannelStateContext();
   const messageComposer = WithAudioPlayback.useMessageComposerController();
   const isCooldownActive = WithAudioPlayback.useIsCooldownActive();
@@ -15765,7 +16075,7 @@ const AttachmentSelector = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      ContextMenu,
+      ContextMenuComponent,
       {
         allowFlip: true,
         backLabel: t("Back"),
@@ -17795,7 +18105,10 @@ const SuggestionList = ({
   setFocusedItemIndex,
   suggestionItemComponents = defaultComponents
 }) => {
-  const { AutocompleteSuggestionItem = SuggestionListItem } = WithAudioPlayback.useComponentContext();
+  const {
+    AutocompleteSuggestionItem = SuggestionListItem,
+    ContextMenu: ContextMenuComponent = ContextMenu
+  } = WithAudioPlayback.useComponentContext();
   const { textareaRef } = WithAudioPlayback.useMessageComposerContext();
   const messageComposer = WithAudioPlayback.useMessageComposerController();
   const { textComposer } = messageComposer;
@@ -17913,7 +18226,7 @@ const SuggestionList = ({
         zIndex: 1e3
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        ContextMenu,
+        ContextMenuComponent,
         {
           className: clsx("str-chat__suggestion-list", className),
           Header: suggestions.searchSource.type === "commands" ? CommandsMenuHeader : void 0,
@@ -18139,12 +18452,6 @@ const TextareaComposer = ({
     if (!textareaRef.current || textareaIsFocused || !focus2) return;
     textareaRef.current.focus();
   }, [attachments, focus2, quotedMessage, textareaRef]);
-  React.useEffect(
-    () => () => {
-      messageComposer.clear();
-    },
-    [messageComposer]
-  );
   React.useLayoutEffect(() => {
     const textarea = textareaRef.current;
     if (!textarea || isComposing) return;
@@ -18598,7 +18905,7 @@ const MessageComposerProvider = (props) => {
   const messageComposer = WithAudioPlayback.useMessageComposerController();
   React.useEffect(
     () => () => {
-      messageComposer.createDraft();
+      messageComposer.createDraft().finally(() => messageComposer.clear());
     },
     [messageComposer]
   );
@@ -18916,7 +19223,7 @@ const useChat = ({
   };
   React.useEffect(() => {
     if (!client) return;
-    const version = "14.0.0-beta.2";
+    const version = "14.0.0-beta.3";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
@@ -19417,10 +19724,10 @@ const ReactionSelector = (props) => {
     ) })
   ] });
 };
-ReactionSelector.getDialogId = (({ messageId, threadList }) => {
+ReactionSelector.getDialogId = ({ messageId, threadList }) => {
   const dialogIdNamespace = threadList ? "-thread" : "";
-  return `reaction-selector${dialogIdNamespace}--${messageId}`;
-});
+  return `reaction-selector${dialogIdNamespace}-${messageId}`;
+};
 ReactionSelector.displayName = "ReactionSelector";
 const ReactionSelectorWithButton = ({
   ReactionIcon
@@ -19505,6 +19812,7 @@ const QuickMessageActionsButton = ({ className, ...props }) => /* @__PURE__ */ j
     appearance: "ghost",
     circular: true,
     className: clsx("str-chat__message-actions-box-button", className),
+    size: "sm",
     variant: "secondary",
     ...props
   }
@@ -19865,6 +20173,32 @@ const DefaultMessageActionComponents = {
     }
   },
   quick: {
+    // eslint-disable-next-line react/display-name
+    DropdownToggle: React.forwardRef((_, ref) => {
+      const { t } = WithAudioPlayback.useTranslationContext();
+      const { message } = useMessageContext();
+      const dropdownDialogIsOpen = useDialogIsOpen(
+        MessageActions.getDialogId({ messageId: message.id })
+      );
+      const { dialog } = useDialogOnNearestManager({
+        id: MessageActions.getDialogId({ messageId: message.id })
+      });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        QuickMessageActionsButton,
+        {
+          "aria-expanded": dropdownDialogIsOpen,
+          "aria-haspopup": "true",
+          "aria-label": t("aria/Open Message Actions Menu"),
+          className: "str-chat__message-actions-box-button",
+          "data-testid": "message-actions-toggle-button",
+          onClick: () => {
+            dialog?.toggle();
+          },
+          ref,
+          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconDotGrid1x3Horizontal, { className: "str-chat__message-action-icon" })
+        }
+      );
+    }),
     React() {
       return /* @__PURE__ */ jsxRuntime.jsx(ReactionSelectorWithButton, { ReactionIcon: WithAudioPlayback.IconEmojiSmile });
     },
@@ -19885,7 +20219,10 @@ const DefaultMessageActionComponents = {
   }
 };
 const defaultMessageActionSet = [
-  // { placement: 'dropdown', type: 'block' },
+  {
+    Component: DefaultMessageActionComponents.quick.DropdownToggle,
+    placement: "quick-dropdown-toggle"
+  },
   {
     Component: DefaultMessageActionComponents.quick.Reply,
     placement: "quick",
@@ -19975,14 +20312,14 @@ function useFetchReactions(options) {
   const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;
   const [refetchNonce, setRefetchNonce] = React.useState(null);
   React.useEffect(() => {
-    if (!shouldFetch || !reactionType) {
+    if (!shouldFetch) {
       return;
     }
     let cancel = false;
     (async () => {
       try {
         setIsLoading(true);
-        const reactions2 = await handleFetchReactions(reactionType, sort);
+        const reactions2 = await handleFetchReactions(reactionType ?? void 0, sort);
         if (!cancel) {
           setReactions(reactions2);
         }
@@ -20006,6 +20343,16 @@ function useFetchReactions(options) {
   return { isLoading, reactions, refetch };
 }
 const defaultReactionDetailsSort = { created_at: -1 };
+const MessageReactionsDetailLoadingIndicator = () => {
+  const elements = React.useMemo(
+    () => Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
+    ] }, index)),
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: elements });
+};
 function MessageReactionsDetail({
   handleFetchReactions,
   onSelectedReactionTypeChange,
@@ -20016,7 +20363,11 @@ function MessageReactionsDetail({
   totalReactionCount
 }) {
   const { client } = WithAudioPlayback.useChatContext();
-  const { Avatar: Avatar$1 = Avatar } = WithAudioPlayback.useComponentContext(MessageReactionsDetail.name);
+  const {
+    Avatar: Avatar$1 = Avatar,
+    LoadingIndicator: LoadingIndicator2 = MessageReactionsDetailLoadingIndicator,
+    reactionOptions = defaultReactionOptions
+  } = WithAudioPlayback.useComponentContext(MessageReactionsDetail.name);
   const { t } = WithAudioPlayback.useTranslationContext();
   const {
     handleReaction: contextHandleReaction,
@@ -20043,7 +20394,7 @@ function MessageReactionsDetail({
     "div",
     {
       className: "str-chat__message-reactions-detail",
-      "data-testid": "reactions-list-modal",
+      "data-testid": "message-reactions-detail",
       children: [
         typeof totalReactionCount === "number" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__total-count", children: t("{{ count }} reactions", { count: totalReactionCount }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__reaction-type-list-container", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "str-chat__message-reactions-detail__reaction-type-list", children: reactions.map(
@@ -20056,7 +20407,9 @@ function MessageReactionsDetail({
                 {
                   "aria-pressed": reactionType === selectedReactionType,
                   className: "str-chat__message-reactions-detail__reaction-type-list-item-button",
-                  onClick: () => onSelectedReactionTypeChange?.(reactionType),
+                  onClick: () => onSelectedReactionTypeChange?.(
+                    selectedReactionType === reactionType ? null : reactionType
+                  ),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "str-chat__message-reactions-detail__reaction-type-list-item-icon", children: /* @__PURE__ */ jsxRuntime.jsx(EmojiComponent, {}) }),
                     reactionCount > 1 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -20080,22 +20433,10 @@ function MessageReactionsDetail({
             className: "str-chat__message-reactions-detail__user-list",
             "data-testid": "all-reacting-users",
             children: [
-              areReactionsLoading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
-                ] })
-              ] }),
-              !areReactionsLoading && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactionDetailsWithLegacyFallback.map(({ user }) => {
+              areReactionsLoading && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator2, {}),
+              !areReactionsLoading && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactionDetailsWithLegacyFallback.map(({ type, user }) => {
                 const belongsToCurrentUser = client.user?.id === user?.id;
+                const EmojiComponent = Array.isArray(reactionOptions) ? void 0 : reactionOptions.quick[type]?.Component ?? reactionOptions.extended?.[type]?.Component;
                 return /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
@@ -20120,23 +20461,23 @@ function MessageReactionsDetail({
                             children: belongsToCurrentUser ? t("You") : user?.name || user?.id
                           }
                         ),
-                        belongsToCurrentUser && selectedReactionType && /* @__PURE__ */ jsxRuntime.jsx(
+                        belongsToCurrentUser && /* @__PURE__ */ jsxRuntime.jsx(
                           "button",
                           {
                             className: "str-chat__message-reactions-detail__user-list-item-button",
                             "data-testid": "remove-reaction-button",
-                            onClick: (e) => {
-                              contextHandleReaction(selectedReactionType, e).then(() => {
-                                refetch();
-                              });
+                            onClick: async (e) => {
+                              await contextHandleReaction(type, e);
+                              refetch();
                             },
                             children: t("Tap to remove")
                           }
                         )
-                      ] })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "str-chat__message-reactions-detail__user-list-item-icon", children: EmojiComponent && !selectedReactionType && /* @__PURE__ */ jsxRuntime.jsx(EmojiComponent, {}) })
                     ]
                   },
-                  user?.id
+                  `${user?.id}-${type}`
                 );
               }) })
             ]
@@ -20285,6 +20626,7 @@ const UnMemoizedMessageReactions = (props) => {
   const divRef = React.useRef(null);
   const dialogId2 = `message-reactions-detail-${message.id}`;
   const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
+  const isDialogOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
   const handleReactionButtonClick = (reactionType) => {
     if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {
       return;
@@ -20319,6 +20661,8 @@ const UnMemoizedMessageReactions = (props) => {
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           FragmentOrButton,
           {
+            "aria-expanded": isDialogOpen,
+            "aria-pressed": isDialogOpen,
             buttonIf: visualStyle === "clustered",
             className: "str-chat__message-reactions__list-button",
             onClick: () => handleReactionButtonClick(existingReactions[0]?.reactionType ?? null),
@@ -20356,9 +20700,7 @@ const UnMemoizedMessageReactions = (props) => {
                   "button",
                   {
                     className: "str-chat__message-reactions__list-item-button",
-                    onClick: () => handleReactionButtonClick(
-                      existingReactions.at(-1)?.reactionType ?? null
-                    ),
+                    onClick: () => handleReactionButtonClick(null),
                     children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "str-chat__message-reactions__overflow-count", children: [
                       "+",
                       totalReactionCount - cappedExistingReactions.reactionCountToDisplay
@@ -20483,91 +20825,74 @@ const StreamEmoji = ({
 const useSplitActionSet = (actionSet) => React.useMemo(() => {
   const quickActionSet = [];
   const dropdownActionSet = [];
+  let quickDropdownToggleAction;
   for (const action of actionSet) {
     if (action.placement === "quick")
       quickActionSet.push(action);
     if (action.placement === "dropdown")
       dropdownActionSet.push(action);
+    if (action.placement === "quick-dropdown-toggle") {
+      quickDropdownToggleAction ?? (quickDropdownToggleAction = action);
+    }
   }
-  return { dropdownActionSet, quickActionSet };
+  return { dropdownActionSet, quickActionSet, quickDropdownToggleAction };
 }, [actionSet]);
 const MessageActions = ({
   disableBaseMessageActionSetFilter = false,
   messageActionSet = defaultMessageActionSet
 }) => {
-  const { theme } = WithAudioPlayback.useChatContext();
   const { isMyMessage, message, threadList } = useMessageContext();
+  const { ContextMenu: ContextMenuComponent = ContextMenu } = WithAudioPlayback.useComponentContext();
   const { t } = WithAudioPlayback.useTranslationContext();
   const [actionsBoxButtonElement, setActionsBoxButtonElement] = React.useState(null);
   const filteredMessageActionSet = useBaseMessageActionSetFilter(
     messageActionSet,
     disableBaseMessageActionSetFilter
   );
-  const { dropdownActionSet, quickActionSet } = useSplitActionSet(
-    filteredMessageActionSet
-  );
-  const dropdownDialogId = `message-actions--${message.id}`;
+  const { dropdownActionSet, quickActionSet, quickDropdownToggleAction } = useSplitActionSet(filteredMessageActionSet);
+  const messageActionsDialogId = MessageActions.getDialogId({ messageId: message.id });
   const reactionSelectorDialogId = ReactionSelector.getDialogId({
     messageId: message.id,
     threadList
   });
-  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dropdownDialogId });
-  const dropdownDialogIsOpen = useDialogIsOpen(dropdownDialogId, dialogManager?.id);
+  const { dialog, dialogManager } = useDialogOnNearestManager({
+    id: messageActionsDialogId
+  });
+  const messageActionsDialogIsOpen = useDialogIsOpen(
+    messageActionsDialogId,
+    dialogManager?.id
+  );
   const reactionSelectorDialogIsOpen = useDialogIsOpen(
     reactionSelectorDialogId,
     dialogManager?.id
   );
-  const contextMenuItems = React.useMemo(
-    () => dropdownActionSet.map(({ Component }) => {
-      const ActionItem = (menuProps) => /* @__PURE__ */ jsxRuntime.jsx(Component, { ...menuProps });
-      return ActionItem;
-    }),
-    [dropdownActionSet]
-  );
   if (dropdownActionSet.length + quickActionSet.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: clsx(`str-chat__message-${theme}__actions str-chat__message-options`, {
-        "str-chat__message-options--active": dropdownDialogIsOpen || reactionSelectorDialogIsOpen
+      className: clsx("str-chat__message-options", {
+        "str-chat__message-options--active": messageActionsDialogIsOpen || reactionSelectorDialogIsOpen
       }),
       children: [
-        dropdownActionSet.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            WithAudioPlayback.Button,
-            {
-              appearance: "ghost",
-              "aria-expanded": dropdownDialogIsOpen,
-              "aria-haspopup": "true",
-              "aria-label": t("aria/Open Message Actions Menu"),
-              circular: true,
-              className: "str-chat__message-actions-box-button",
-              "data-testid": "message-actions-toggle-button",
-              onClick: () => {
-                dialog?.toggle();
-              },
-              ref: setActionsBoxButtonElement,
-              variant: "secondary",
-              children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconDotGrid1x3Horizontal, { className: "str-chat__message-action-icon" })
-            }
-          ),
+        quickDropdownToggleAction && dropdownActionSet.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(quickDropdownToggleAction.Component, { ref: setActionsBoxButtonElement }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            ContextMenu,
+            ContextMenuComponent,
             {
               backLabel: t("Back"),
               className: clsx("str-chat__message-actions-box", {
-                "str-chat__message-actions-box--open": dropdownDialogIsOpen
+                "str-chat__message-actions-box--open": messageActionsDialogIsOpen
               }),
               dialogManagerId: dialogManager?.id,
-              id: dropdownDialogId,
-              items: contextMenuItems,
+              id: messageActionsDialogId,
               onClose: dialog?.close,
               placement: isMyMessage() ? "top-end" : "top-start",
               referenceElement: actionsBoxButtonElement,
               tabIndex: -1,
-              trapFocus: true
+              trapFocus: true,
+              children: dropdownActionSet.map(({ Component, type }) => /* @__PURE__ */ jsxRuntime.jsx(Component, {}, type))
             }
           )
         ] }),
@@ -20576,6 +20901,8 @@ const MessageActions = ({
     }
   );
 };
+MessageActions.getDialogId = ({ messageId }) => `message-actions-${messageId}`;
+MessageActions.displayName = "MessageActions";
 const MessageUIWithContext = ({
   endOfGroup,
   firstOfGroup,
@@ -21402,6 +21729,7 @@ const useScrollLocationLogic = (params) => {
   const closeToBottom = React.useRef(false);
   const closeToTop = React.useRef(false);
   const previousScrollTopRef = React.useRef(0);
+  const previousMessagesLengthRef = React.useRef(messages.length);
   const anchorRestoreCleanupRef = React.useRef(null);
   const captureAnchor = React.useCallback(() => {
     if (!listElement) return null;
@@ -21553,6 +21881,60 @@ const useScrollLocationLogic = (params) => {
       scrollToBottom();
     }
   }, [disableAutoScrollToBottom, justReachedLatestMessageSet, listElement, hasMoreNewer]);
+  React.useLayoutEffect(() => {
+    if (!listElement || disableAutoScrollToBottom || hasMoreNewer || suppressAutoscroll || justReachedLatestMessageSet || isRestoringOlderAnchorRef.current) {
+      return;
+    }
+    const initialDistanceToBottom = listElement.scrollHeight - (listElement.scrollTop + listElement.clientHeight);
+    const messagesHydrated = previousMessagesLengthRef.current === 0 && messages.length > 0;
+    if (initialDistanceToBottom > scrolledUpThreshold && !messagesHydrated) {
+      return;
+    }
+    let keepPinnedToBottom = true;
+    const maybeScrollToBottom = () => {
+      if (keepPinnedToBottom) {
+        scrollToBottom();
+      }
+    };
+    maybeScrollToBottom();
+    const settleDelays = [80, messagesHydrated ? 260 : 420, 900, 1700];
+    const settleTimeoutIds = settleDelays.map(
+      (delay) => setTimeout(maybeScrollToBottom, delay)
+    );
+    const stopKeepingPinnedToBottom = () => {
+      keepPinnedToBottom = false;
+    };
+    listElement.addEventListener("pointerdown", stopKeepingPinnedToBottom, {
+      passive: true
+    });
+    listElement.addEventListener("touchstart", stopKeepingPinnedToBottom, {
+      passive: true
+    });
+    listElement.addEventListener("wheel", stopKeepingPinnedToBottom, {
+      passive: true
+    });
+    listElement.addEventListener("keydown", stopKeepingPinnedToBottom);
+    const pinWindowTimeoutId = setTimeout(() => {
+      stopKeepingPinnedToBottom();
+    }, 2200);
+    return () => {
+      settleTimeoutIds.forEach(clearTimeout);
+      clearTimeout(pinWindowTimeoutId);
+      listElement.removeEventListener("pointerdown", stopKeepingPinnedToBottom);
+      listElement.removeEventListener("touchstart", stopKeepingPinnedToBottom);
+      listElement.removeEventListener("wheel", stopKeepingPinnedToBottom);
+      listElement.removeEventListener("keydown", stopKeepingPinnedToBottom);
+    };
+  }, [
+    disableAutoScrollToBottom,
+    hasMoreNewer,
+    justReachedLatestMessageSet,
+    listElement,
+    messages.length,
+    scrollToBottom,
+    scrolledUpThreshold,
+    suppressAutoscroll
+  ]);
   const updateScrollTop = useMessageListScrollManager({
     captureAnchor,
     disableScrollManagement: disableScrollManagement || isRestoringOlderAnchorRef.current,
@@ -21579,6 +21961,9 @@ const useScrollLocationLogic = (params) => {
   React.useLayoutEffect(() => {
     previousHasMoreNewerRef.current = hasMoreNewer;
   }, [hasMoreNewer]);
+  React.useLayoutEffect(() => {
+    previousMessagesLengthRef.current = messages.length;
+  }, [messages.length]);
   const onScroll = React.useCallback(
     (event) => {
       const element = event.target;
@@ -21587,8 +21972,10 @@ const useScrollLocationLogic = (params) => {
       updateScrollTop(scrollTop, captureAnchor);
       const offsetHeight = element.offsetHeight;
       const scrollHeight = element.scrollHeight;
+      const distanceToBottom = scrollHeight - (scrollTop + offsetHeight);
+      const bottomEnterThreshold = Math.max(Math.floor(scrolledUpThreshold * 0.6), 24);
       const prevCloseToBottom = closeToBottom.current;
-      closeToBottom.current = scrollHeight - (scrollTop + offsetHeight) < scrolledUpThreshold;
+      closeToBottom.current = prevCloseToBottom ? distanceToBottom < scrolledUpThreshold : distanceToBottom < bottomEnterThreshold;
       closeToTop.current = scrollTop < scrolledUpThreshold;
       if (closeToBottom.current) {
         setHasNewMessages(false);
@@ -23523,11 +23910,17 @@ const useConnectionRecoveredListener = (forceUpdate) => {
 const MOBILE_NAV_BREAKPOINT = 768;
 const useMobileNavigation = (channelListRef, navOpen, closeMobileNav) => {
   React.useEffect(() => {
+    const isClickInsideChannelList = (event) => {
+      const channelListElement = channelListRef.current;
+      if (!channelListElement) return false;
+      const eventPath = event.composedPath();
+      return eventPath.includes(channelListElement);
+    };
     const handleClickOutside = (event) => {
       if (typeof window !== "undefined" && window.innerWidth >= MOBILE_NAV_BREAKPOINT) {
         return;
       }
-      if (closeMobileNav && channelListRef.current && !channelListRef.current.contains(event.target) && navOpen) {
+      if (closeMobileNav && channelListRef.current && !isClickInsideChannelList(event) && navOpen) {
         closeMobileNav();
       }
     };
@@ -24657,7 +25050,7 @@ const UnMemoizedLoadMoreButton = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__load-more-button", children: /* @__PURE__ */ jsxRuntime.jsx(
     WithAudioPlayback.Button,
     {
-      appearance: "outline",
+      appearance: "ghost",
       "aria-label": t("aria/Load More Channels"),
       "data-testid": "load-more-button",
       disabled: loading,
@@ -25265,6 +25658,36 @@ const useArchiveActionButtonBehavior = () => {
   };
 };
 const defaultChannelActionSet = [
+  {
+    // eslint-disable-next-line react/display-name
+    Component: React.forwardRef((_, ref) => {
+      const { channel } = useChannelListItemContext();
+      const dialogId2 = ChannelListItemActionButtons.getDialogId({
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        channelId: channel.id
+      });
+      const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
+      const dialogIsOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        WithAudioPlayback.Button,
+        {
+          appearance: "ghost",
+          "aria-expanded": dialogIsOpen,
+          "aria-pressed": dialogIsOpen,
+          circular: true,
+          onClick: (e) => {
+            e.stopPropagation();
+            dialog.toggle();
+          },
+          ref,
+          size: "sm",
+          variant: "secondary",
+          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconDotGrid1x3Horizontal, {})
+        }
+      );
+    }),
+    placement: "quick-dropdown-toggle"
+  },
   {
     Component() {
       const behaviorProps = useArchiveActionButtonBehavior();
@@ -25397,7 +25820,7 @@ const defaultChannelActionSet = [
       const membership = useChannelMembershipState(channel);
       const dialogId2 = ChannelListItemActionButtons.getDialogId(
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        channel.id
+        { channelId: channel.id }
       );
       const { dialog } = useDialogOnNearestManager({ id: dialogId2 });
       const [inProgress, setInProgress] = React.useState(false);
@@ -25499,59 +25922,23 @@ const useBaseChannelActionSetFilter = (channelActionSet) => {
   const connectedUserIsMember = typeof membership.user !== "undefined";
   const ownCapabilities = channel.data?.own_capabilities;
   return React.useMemo(() => {
-    const filtered = channelActionSet.filter(
-      (action) => tsPattern.match({
-        action,
-        connectedUserIsMember,
-        isDirectMessageChannel,
-        memberCount,
-        ownCapabilities
-      }).returnType().with(
-        {
-          action: { connectedUserIsMember: true, placement: "quick", type: "archive" },
-          isDirectMessageChannel: true
-        },
-        {
-          action: {
-            connectedUserIsMember: true,
-            placement: "dropdown",
-            type: "archive"
-          },
-          isDirectMessageChannel: false
-        },
-        {
-          action: { placement: "dropdown", type: "mute" },
-          isDirectMessageChannel: true,
-          ownCapabilities: tsPattern.P.when(
-            (capabilities) => capabilities?.includes("mute-channel")
-          )
-        },
-        {
-          action: { placement: "quick", type: "mute" },
-          isDirectMessageChannel: false,
-          ownCapabilities: tsPattern.P.when(
-            (capabilities) => capabilities?.includes("mute-channel")
-          )
-        },
-        {
-          action: { type: "ban" },
-          memberCount: tsPattern.P.number.gt(0).and(tsPattern.P.number.lte(2)),
-          ownCapabilities: tsPattern.P.when(
-            (capabilities) => capabilities?.includes("ban-channel-members")
-          )
-        },
-        {
-          action: { type: "leave" },
-          ownCapabilities: tsPattern.P.when(
-            (capabilities) => capabilities?.includes("leave-channel")
-          )
-        },
-        {
-          action: { connectedUserIsMember: true, type: "pin" }
-        },
-        () => true
-      ).otherwise(() => false)
-    );
+    const filtered = channelActionSet.filter((action) => {
+      if (action.placement === "quick-dropdown-toggle") return true;
+      switch (action.type) {
+        case "archive":
+          return connectedUserIsMember && (action.placement === "quick" && isDirectMessageChannel || action.placement === "dropdown" && !isDirectMessageChannel);
+        case "mute":
+          return ownCapabilities?.includes("mute-channel") && (action.placement === "dropdown" && isDirectMessageChannel || action.placement === "quick" && !isDirectMessageChannel);
+        case "ban":
+          return memberCount > 0 && memberCount <= 2 && ownCapabilities?.includes("ban-channel-members");
+        case "leave":
+          return ownCapabilities?.includes("leave-channel");
+        case "pin":
+          return connectedUserIsMember;
+        default:
+          return true;
+      }
+    });
     return filtered;
   }, [
     channelActionSet,
@@ -25562,17 +25949,18 @@ const useBaseChannelActionSetFilter = (channelActionSet) => {
   ]);
 };
 const ChannelListItemActionButtons = () => {
+  const { ContextMenu: ContextMenuComponent = ContextMenu } = WithAudioPlayback.useComponentContext();
   const { channel } = useChannelListItemContext();
   const [referenceElement, setReferenceElement] = React.useState(null);
-  const dialogId2 = ChannelListItemActionButtons.getDialogId(
+  const dialogId2 = ChannelListItemActionButtons.getDialogId({
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    channel.id
-  );
+    channelId: channel.id
+  });
   const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
   const dialogIsOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
   const filteredActionSet = useBaseChannelActionSetFilter(defaultChannelActionSet);
-  const splitActionSet = useSplitActionSet(filteredActionSet);
-  if (splitActionSet.quickActionSet.length + splitActionSet.dropdownActionSet.length === 0) {
+  const { dropdownActionSet, quickActionSet, quickDropdownToggleAction } = useSplitActionSet(filteredActionSet);
+  if (quickActionSet.length + dropdownActionSet.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -25582,26 +25970,10 @@ const ChannelListItemActionButtons = () => {
         "str-chat__channel-list-item__action-buttons--active": dialogIsOpen
       }),
       children: [
-        splitActionSet.dropdownActionSet.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          WithAudioPlayback.Button,
-          {
-            appearance: "ghost",
-            "aria-expanded": dialogIsOpen,
-            "aria-pressed": dialogIsOpen,
-            circular: true,
-            onClick: (e) => {
-              e.stopPropagation();
-              dialog.toggle();
-            },
-            ref: setReferenceElement,
-            size: "sm",
-            variant: "secondary",
-            children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconDotGrid1x3Horizontal, {})
-          }
-        ),
-        splitActionSet.quickActionSet.map(({ Component, type }) => /* @__PURE__ */ jsxRuntime.jsx(Component, {}, type)),
+        quickDropdownToggleAction && dropdownActionSet.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(quickDropdownToggleAction.Component, { ref: setReferenceElement }),
+        quickActionSet.map(({ Component, type }) => /* @__PURE__ */ jsxRuntime.jsx(Component, {}, type)),
         /* @__PURE__ */ jsxRuntime.jsx(
-          ContextMenu,
+          ContextMenuComponent,
           {
             className: "str-chat__channel-list-item__action-buttons-context-menu",
             dialogManagerId: dialogManager?.id,
@@ -25611,14 +25983,14 @@ const ChannelListItemActionButtons = () => {
             referenceElement,
             tabIndex: -1,
             trapFocus: true,
-            children: splitActionSet.dropdownActionSet.map(({ Component, type }) => /* @__PURE__ */ jsxRuntime.jsx(Component, {}, type))
+            children: dropdownActionSet.map(({ Component, type }) => /* @__PURE__ */ jsxRuntime.jsx(Component, {}, type))
           }
         )
       ]
     }
   );
 };
-ChannelListItemActionButtons.getDialogId = (channelId) => `channel-action-buttons-${channelId}`;
+ChannelListItemActionButtons.getDialogId = ({ channelId }) => `channel-action-buttons-${channelId}`;
 ChannelListItemActionButtons.displayName = "ChannelListItemActionButtons";
 function ChannelListItemTimestamp({ lastMessage }) {
   const { t, tDateTimeParser } = WithAudioPlayback.useTranslationContext("ChannelListItemTimestamp");
@@ -26944,7 +27316,7 @@ const VoiceRecordingPlayerUI = ({ audioPlayer }) => {
     secondsElapsed
   } = WithAudioPlayback.useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rootClassName, "data-testid": "voice-recording-widget", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-attachment__voice-recording-widget__play-button-container", children: /* @__PURE__ */ jsxRuntime.jsx(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-attachment__voice-recording-widget__metadata", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-attachment__voice-recording-widget__audio-state", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-attachment__voice-recording-widget__timer", children: durationSeconds ? /* @__PURE__ */ jsxRuntime.jsx(
         DurationDisplay,
@@ -27353,23 +27725,44 @@ const FileAttachment = ({ attachment }) => {
   );
 };
 const Giphy = ({ attachment }) => {
-  const { giphyVersion: giphyVersionName } = WithAudioPlayback.useChannelStateContext();
+  const { giphyVersion: giphyVersionName, imageAttachmentSizeHandler } = WithAudioPlayback.useChannelStateContext();
   const { BaseImage: BaseImage$1 = BaseImage } = WithAudioPlayback.useComponentContext();
   const { t } = WithAudioPlayback.useTranslationContext();
   const usesDefaultBaseImage = BaseImage$1 === BaseImage;
+  const imageElement = React.useRef(null);
+  const [attachmentConfiguration, setAttachmentConfiguration] = React.useState(void 0);
   const imageDescriptors = React.useMemo(
     () => toGalleryItemDescriptors(attachment, { giphyVersionName }),
     [attachment, giphyVersionName]
   );
-  if (!imageDescriptors?.imageUrl) return null;
-  const { alt, dimensions, imageUrl, title } = imageDescriptors;
+  const alt = imageDescriptors && imageDescriptors.alt;
+  const dimensions = imageDescriptors && imageDescriptors.dimensions;
+  const imageUrl = imageDescriptors && imageDescriptors.imageUrl;
+  const title = imageDescriptors && imageDescriptors.title;
+  const resolvedImageUrl = attachmentConfiguration?.url || imageUrl;
+  const imageStyleVariables = React.useMemo(() => {
+    const originalHeight = Number(dimensions?.height);
+    const originalWidth = Number(dimensions?.width);
+    return {
+      "--original-height": String(originalHeight > 1 ? originalHeight : 1e6),
+      "--original-width": String(originalWidth > 1 ? originalWidth : 1e6)
+    };
+  }, [dimensions?.height, dimensions?.width]);
+  React.useLayoutEffect(() => {
+    if (!imageElement.current || !imageAttachmentSizeHandler) return;
+    const config = imageAttachmentSizeHandler(attachment, imageElement.current);
+    setAttachmentConfiguration(config);
+  }, [attachment, imageAttachmentSizeHandler]);
+  if (!imageUrl) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx(`str-chat__message-attachment-giphy`), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       BaseImage$1,
       {
         alt: alt ?? title ?? t("User uploaded content"),
         height: dimensions?.height,
-        src: imageUrl,
+        ref: imageElement,
+        src: resolvedImageUrl,
+        style: imageStyleVariables,
         width: dimensions?.width,
         ...usesDefaultBaseImage ? { showDownloadButtonOnError: false } : {}
       }
@@ -28266,6 +28659,7 @@ exports.ContextMenu = ContextMenu;
 exports.ContextMenuBackButton = ContextMenuBackButton;
 exports.ContextMenuBody = ContextMenuBody;
 exports.ContextMenuButton = ContextMenuButton;
+exports.ContextMenuContent = ContextMenuContent;
 exports.ContextMenuHeader = ContextMenuHeader;
 exports.ContextMenuRoot = ContextMenuRoot;
 exports.CooldownTimer = CooldownTimer;
@@ -28338,6 +28732,7 @@ exports.MessageListContextProvider = MessageListContextProvider;
 exports.MessageProvider = MessageProvider;
 exports.MessageReactions = MessageReactions;
 exports.MessageReactionsDetail = MessageReactionsDetail;
+exports.MessageReactionsDetailLoadingIndicator = MessageReactionsDetailLoadingIndicator;
 exports.MessageRepliesCountButton = MessageRepliesCountButton;
 exports.MessageSearchResultItem = MessageSearchResultItem;
 exports.MessageStatus = MessageStatus;