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

package/dist/es/index.mjs

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import clsx from "clsx";
 import { nanoid } from "nanoid";
-import React, { useState, useEffect, useCallback, useLayoutEffect, useMemo, useContext, createContext, useRef, forwardRef, Component, createElement, Fragment as Fragment$1 } from "react";
-import { u as useHandleFileChangeWrapper, d as dataTransferItemsToFiles, r as renderAudio, t as toAudioBuffer, c as createFileFromBlobs, g as getExtensionFromMimeType, a as getRecordedMediaTypeFromMimeType } from "../audioProcessing-ByEVSjGG.mjs";
-import { u as useStateStore, a as useMessageComposerController, i as isMessageBounced, b as useChannelActionContext, C as ComponentContext, c as useTranslationContext, d as useChannelStateContext, e as useChatContext, f as isNotificationForPanel, B as BaseIcon, g as Button, I as IconPause, h as IconPlaySolid, j as getDefaultExportFromCjs, k as defaultTranslatorFunction, p as predefinedFormatters, L as LocalizedFormat, l as calendar, m as IconLoadingCircle, n as isNetworkSendFailure, v as validateAndGetMessage, o as isUserMuted, q as defaultPinPermissions, r as useThreadContext, s as usePopoverPosition, t as useComponentContext, w as IconCrossMedium, x as IconPeople, y as IconExclamation, z as IconChevronRight, A as IconChevronLeft, D as IconArrowLeft, E as IconExclamationCircle, F as IconCircleBanSign, G as isMessageErrorRetryable, H as ACTIONS_NOT_WORKING_IN_THREAD, J as useNotificationTarget, K as IconArrowRightUp, M as addNotificationTargetTag, N as IconPin, O as mapToUserNameOrId, P as IconClock, Q as IconCheckmark1Small, R as IconDoubleCheckmark1Small, S as getReadByTooltipText, T as messageHasAttachments, U as messageTextHasEmojisOnly, V as isDate, W as getDateString, X as IconTranslate, Y as useMessageComposerContext, Z as useIsCooldownActive, _ as IconCrossSmall, $ as IconImages1Alt, a0 as IconChart5, a1 as IconMapPin, a2 as IconFileBend, a3 as IconChainLink, a4 as IconVideo, a5 as IconVideoSolid, a6 as IconMicrophone, a7 as IconBookmark, a8 as IconBellNotification, a9 as IconChevronDown, aa as IconPlusSmall, ab as IconCheckmark2, ac as DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ad as IconTrophy, ae as IconDotGrid2x3, af as IconCircleMinus, ag as IconPaperPlane, ah as IconVolumeFull, ai as IconPeopleAdd, aj as IconMute, ak as IconFlag2, al as IconPeopleRemove, am as IconPaperclip, an as IconRunShortcut, ao as CHANNEL_CONTAINER_ID, ap as IconPlusLarge, aq as IconExclamationTriangle, ar as useAudioPlayer, as as IconArrowRotateClockwise, at as IconArrowDownCircle, au as IconThunder, av as IconTrashBin, aw as IconFileArrowLeftIn, ax as MessageComposerContextProvider, ay as useTypingContext, az as defaultDateTimeParser, aA as isLanguageSupported, aB as IconLayoutAlignLeft, aC as useChatViewContext, aD as MESSAGE_ACTIONS, aE as LegacyThreadContext, aF as IconArrowShareLeft, aG as IconEmojiSmile, aH as IconPeopleAdded, aI as IconBookmarkRemove, aJ as IconBellOff, aK as IconBubbleWideNotificationChatMessage, aL as IconEditBig, aM as IconSquareBehindSquare2_Copy, aN as IconUnpin, aO as IconCloseQuote2, aP as IconBubbleText6ChatMessage, aQ as IconDotGrid1x3Horizontal, aR as areMessageUIPropsEqual, aS as isDateSeparatorMessage, aT as isMessageBlocked, aU as messageHasSingleAttachment, aV as messageHasGiphyAttachment, aW as messageHasReactions, aX as isMessageEdited, aY as countEmojis, aZ as areMessagePropsEqual, a_ as getMessageActions, a$ as processMessages, b0 as insertIntro, b1 as getGroupStyles, b2 as getLastReceived, b3 as IconArrowUp, b4 as isIntroMessage, b5 as isLocalMessage, b6 as getIsFirstUnreadMessage, b7 as IconArrowDown, b8 as DEFAULT_NEXT_CHANNEL_PAGE_SIZE, b9 as EmptyStateIndicator, ba as getChannel, bb as IconMagnifyingGlassSearch, bc as IconCircleX, bd as useChannelListContext, be as DEFAULT_JUMP_TO_PAGE_SIZE, bf as ChannelListContextProvider, bg as IconArchive, bh as IconArrowBoxLeft, bi as IconCamera1, bj as IconExclamationCircle1, bk as ChatProvider, bl as TranslationProvider, bm as useThreadsViewContext, bn as IconBubbles, bo as IconArrowRotateRightLeftRepeatRefresh, bp as IconEyeOpen } from "../WithAudioPlayback-C1hfFIcu.mjs";
-import { bu, bx, dc, dd, de, df, dg, dh, bz, bC, by, bB, bD, di, bG, bH, bI, bJ, bK, bL, bM, bN, bO, bP, bQ, bR, bT, bS, bU, bV, bW, bX, bY, bZ, b_, b$, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, ca, cb, cc, cd, ce, cf, cg, ch, ci, cj, ck, cl, cm, cn, co, cp, cq, cr, cs, ct, cu, cv, cw, cx, cy, cz, cA, cB, cC, cD, cE, cF, cG, cH, cI, cJ, cK, cL, cM, cN, cO, cP, cQ, cR, cS, cT, cU, cV, cW, cX, cY, cZ, c_, dj, c$, da, db, dk, dl, dm, br, bF, bE, bs, bt, d0, d1, d7, d8, d4, d5, dn, d6, dp, d3, d2, bq, bA, bv, bw, d9 } from "../WithAudioPlayback-C1hfFIcu.mjs";
+import React, { useState, useEffect, useCallback, useLayoutEffect, useMemo, useContext, createContext, useRef, forwardRef, createElement, Component, Fragment as Fragment$1 } from "react";
+import { u as useHandleFileChangeWrapper, d as dataTransferItemsToFiles, r as renderAudio, t as toAudioBuffer, c as createFileFromBlobs, g as getExtensionFromMimeType, a as getRecordedMediaTypeFromMimeType } from "./audioProcessing.21cb49e1.mjs";
+import { u as useStateStore, a as useMessageComposerController, i as isMessageBounced, b as useChannelActionContext, C as ComponentContext, c as useTranslationContext, d as useChannelStateContext, e as useChatContext, f as isNotificationForPanel, B as BaseIcon, g as Button, I as IconPause, h as IconPlaySolid, j as getDefaultExportFromCjs, k as defaultTranslatorFunction, p as predefinedFormatters, L as LocalizedFormat, l as calendar, m as IconLoadingCircle, n as isNetworkSendFailure, v as validateAndGetMessage, o as isUserMuted, q as defaultPinPermissions, r as useThreadContext, s as usePopoverPosition, t as useComponentContext, w as IconCrossMedium, x as IconPeople, y as IconExclamation, z as IconChevronRight, A as IconChevronLeft, D as IconArrowLeft, E as IconExclamationCircle, F as IconCircleBanSign, G as isMessageErrorRetryable, H as ACTIONS_NOT_WORKING_IN_THREAD, J as useNotificationTarget, K as IconArrowRightUp, M as addNotificationTargetTag, N as IconPin, O as mapToUserNameOrId, P as IconClock, Q as IconCheckmark1Small, R as IconDoubleCheckmark1Small, S as getReadByTooltipText, T as messageHasAttachments, U as messageTextHasEmojisOnly, V as isDate, W as getDateString, X as IconTranslate, Y as useMessageComposerContext, Z as useIsCooldownActive, _ as IconCrossSmall, $ as IconImages1Alt, a0 as IconChart5, a1 as IconMapPin, a2 as IconFileBend, a3 as IconChainLink, a4 as IconVideo, a5 as IconVideoSolid, a6 as IconMicrophone, a7 as IconBookmark, a8 as IconBellNotification, a9 as IconChevronDown, aa as IconPlusSmall, ab as IconCheckmark2, ac as DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ad as IconTrophy, ae as IconDotGrid2x3, af as IconCircleMinus, ag as IconPaperPlane, ah as IconVolumeFull, ai as IconPeopleAdd, aj as IconMute, ak as IconFlag2, al as IconPeopleRemove, am as IconPaperclip, an as IconRunShortcut, ao as CHANNEL_CONTAINER_ID, ap as IconPlusLarge, aq as IconExclamationTriangle, ar as useAudioPlayer, as as IconArrowRotateClockwise, at as IconArrowDownCircle, au as IconThunder, av as IconTrashBin, aw as IconFileArrowLeftIn, ax as MessageComposerContextProvider, ay as useTypingContext, az as defaultDateTimeParser, aA as isLanguageSupported, aB as IconLayoutAlignLeft, aC as useChatViewContext, aD as MESSAGE_ACTIONS, aE as LegacyThreadContext, aF as IconArrowShareLeft, aG as IconEmojiSmile, aH as IconDotGrid1x3Horizontal, aI as IconPeopleAdded, aJ as IconBookmarkRemove, aK as IconBellOff, aL as IconBubbleWideNotificationChatMessage, aM as IconEditBig, aN as IconSquareBehindSquare2_Copy, aO as IconUnpin, aP as IconCloseQuote2, aQ as IconBubbleText6ChatMessage, aR as areMessageUIPropsEqual, aS as isDateSeparatorMessage, aT as isMessageBlocked, aU as messageHasSingleAttachment, aV as messageHasGiphyAttachment, aW as messageHasReactions, aX as isMessageEdited, aY as countEmojis, aZ as areMessagePropsEqual, a_ as getMessageActions, a$ as processMessages, b0 as insertIntro, b1 as getGroupStyles, b2 as getLastReceived, b3 as IconArrowUp, b4 as isIntroMessage, b5 as isLocalMessage, b6 as getIsFirstUnreadMessage, b7 as IconArrowDown, b8 as DEFAULT_NEXT_CHANNEL_PAGE_SIZE, b9 as EmptyStateIndicator, ba as getChannel, bb as IconMagnifyingGlassSearch, bc as IconCircleX, bd as useChannelListContext, be as DEFAULT_JUMP_TO_PAGE_SIZE, bf as ChannelListContextProvider, bg as IconArchive, bh as IconArrowBoxLeft, bi as IconCamera1, bj as IconExclamationCircle1, bk as ChatProvider, bl as TranslationProvider, bm as useThreadsViewContext, bn as IconBubbles, bo as IconArrowRotateRightLeftRepeatRefresh, bp as IconEyeOpen } from "./WithAudioPlayback.a3d5a2fc.mjs";
+import { bu, bx, dc, dd, de, df, dg, dh, bz, bC, by, bB, bD, di, bG, bH, bI, bJ, bK, bL, bM, bN, bO, bP, bQ, bR, bT, bS, bU, bV, bW, bX, bY, bZ, b_, b$, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, ca, cb, cc, cd, ce, cf, cg, ch, ci, cj, ck, cl, cm, cn, co, cp, cq, cr, cs, ct, cu, cv, cw, cx, cy, cz, cA, cB, cC, cD, cE, cF, cG, cH, cI, cJ, cK, cL, cM, cN, cO, cP, cQ, cR, cS, cT, cU, cV, cW, cX, cY, cZ, c_, dj, c$, da, db, dk, dl, dm, br, bF, bE, bs, bt, d0, d1, d7, d8, d4, d5, dn, d6, dp, d3, d2, bq, bA, bv, bw, d9 } from "./WithAudioPlayback.a3d5a2fc.mjs";
 import { StateStore, formatMessage, MessageComposer as MessageComposer$1, isGiphyAttachment, isScrapedContent, isLocalVideoAttachment, isVideoAttachment, isLocalImageAttachment, isImageAttachment, isAudioAttachment, isVoiceRecordingAttachment, isFileAttachment, isVoteAnswer, VotingVisibility, isLocalVoiceRecordingAttachment, isLocalAudioAttachment, isLocalFileAttachment, isLocalAttachment, LinkPreviewsManager, SearchController, ChannelSearchSource, UserSearchSource, MessageSearchSource, StreamChat, isSharedLocationResponse, LiveLocationManager } from "stream-chat";
 import throttle from "lodash.throttle";
 import * as linkify from "linkifyjs";
@@ -19,7 +19,6 @@ import { visit, SKIP } from "unist-util-visit";
 import i18n from "i18next";
 import Dayjs from "dayjs";
 import uniqBy from "lodash.uniqby";
-import { match, P } from "ts-pattern";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
 import debounce from "lodash.debounce";
 import fixWebmDuration from "fix-webm-duration";
@@ -72,10 +71,11 @@ const useAIState = (channel) => {
   return { aiState };
 };
 class DialogManager {
-  constructor({ id } = {}) {
+  constructor({ closeOnClickOutside = true, id } = {}) {
     this.state = new StateStore({
       dialogsById: {}
     });
+    this.closeOnClickOutside = closeOnClickOutside;
     this.id = id ?? nanoid();
   }
   get openDialogCount() {
@@ -90,13 +90,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: () => {
@@ -112,21 +113,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
         }
       }));
     }
@@ -203,7 +205,11 @@ class DialogManager {
     }));
   }
 }
-const useDialog = ({ dialogManagerId, id }) => {
+const useDialog = ({
+  closeOnClickOutside,
+  dialogManagerId,
+  id
+}) => {
   const { dialogManager } = useDialogManager({ dialogManagerId });
   useEffect(
     () => () => {
@@ -211,7 +217,7 @@ const useDialog = ({ dialogManagerId, id }) => {
     },
     [dialogManager, id]
   );
-  return dialogManager.getOrCreate({ id });
+  return dialogManager.getOrCreate({ closeOnClickOutside, id });
 };
 const useDialogOnNearestManager = ({ id }) => {
   const { dialogManager } = useNearestDialogManagerContext() ?? {};
@@ -258,9 +264,37 @@ const Portal = ({
   if (!portalDestination) return null;
   return createPortal(children, portalDestination);
 };
+const shouldCloseOnOutsideClick = ({
+  dialog,
+  managerCloseOnClickOutside
+}) => dialog.closeOnClickOutside ?? managerCloseOnClickOutside;
 const DialogPortalDestination = () => {
   const { dialogManager } = useNearestDialogManagerContext() ?? {};
   const openedDialogCount = useOpenedDialogCount({ dialogManagerId: dialogManager?.id });
+  const [destinationRoot, setDestinationRoot] = useState(null);
+  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__ */ jsx(
     "div",
@@ -268,7 +302,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"
       }
@@ -290,11 +339,16 @@ const DialogPortalEntry = ({
 };
 const dialogManagersRegistry = new 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;
 };
@@ -305,20 +359,21 @@ const removeDialogManager = (id) => {
 const DialogManagerProviderContext = React.createContext(void 0);
 const DialogManagerProvider = ({
   children,
+  closeOnClickOutside,
   id
 }) => {
   const [dialogManager, setDialogManager] = useState(() => {
     if (id) return getDialogManager(id) ?? null;
-    return new DialogManager();
+    return new DialogManager({ closeOnClickOutside });
   });
   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__ */ jsxs(DialogManagerProviderContext.Provider, { value: { dialogManager }, children: [
     children,
@@ -9037,6 +9092,7 @@ function useDialogAnchor({
     setPopperElement(null);
   }
   return {
+    placement: stabilisedChosenPlacement ?? chosenPlacement,
     setPopperElement,
     styles: {
       left: x ?? 0,
@@ -9049,6 +9105,8 @@ const DialogAnchor = ({
   allowFlip = true,
   children,
   className,
+  closeOnClickOutside,
+  closeTransitionMs = 0,
   dialogManagerId,
   focus = true,
   id,
@@ -9061,12 +9119,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] = useState(open);
+  const closeTimeoutRef = useRef(null);
+  const isClosing = !open && shouldRender;
+  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]);
+  useEffect(
+    () => () => {
+      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+    },
+    []
+  );
+  const {
+    placement: chosenPlacement,
+    setPopperElement,
+    styles
+  } = useDialogAnchor({
     allowFlip,
     offset,
-    open,
+    open: shouldRender,
     placement,
     referenceElement,
     updateKey,
@@ -9083,7 +9173,7 @@ const DialogAnchor = ({
       document.removeEventListener("keyup", hideOnEscape);
     };
   }, [dialog, open]);
-  if (!open) {
+  if (!shouldRender) {
     return null;
   }
   return /* @__PURE__ */ jsx(DialogPortalEntry, { dialogId: id, dialogManagerId, children: /* @__PURE__ */ jsx(FocusScope, { autoFocus: focus, contain: trapFocus, restoreFocus: true, children: /* @__PURE__ */ jsx(
@@ -9091,6 +9181,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,
@@ -9433,16 +9525,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 = useRef(null);
+  const [dialogContainer, setDialogContainer] = useState(null);
+  const keepSubmenuOpenFlag = useRef(false);
+  const dialogCloseTimeout = useRef(null);
+  const dialogId2 = 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 = useCallback(() => {
+    if (dialogCloseTimeout.current) clearTimeout(dialogCloseTimeout.current);
+    dialogCloseTimeout.current = setTimeout(() => {
+      if (keepSubmenuOpenFlag.current) return;
+      dialog.close();
+    }, 100);
+  }, [dialog]);
+  const keepSubmenuOpen = useCallback(() => {
+    keepSubmenuOpenFlag.current = true;
+  }, []);
+  const allowToCloseSubmenu = useCallback(() => {
+    keepSubmenuOpenFlag.current = false;
+  }, []);
+  const closeSubmenu = useCallback(() => {
+    allowToCloseSubmenu();
+    closeDialogLazily();
+  }, [allowToCloseSubmenu, closeDialogLazily]);
+  const handleClose = 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();
+  };
+  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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ 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__ */ 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__ */ jsx(Submenu, {})
+      }
+    )
+  ] });
+};
+const ContextMenuButton = (props) => {
+  const {
+    Submenu,
+    submenuContainerProps,
+    submenuPlacement,
+    submenuRollAxis,
+    ...buttonProps
+  } = props;
   const [isFocused, setIsFocused] = useState(false);
+  if (Submenu) {
+    return /* @__PURE__ */ jsx(
+      ContextMenuButtonWithSubmenu,
+      {
+        ...buttonProps,
+        Submenu,
+        submenuContainerProps,
+        submenuPlacement,
+        submenuRollAxis
+      }
+    );
+  }
+  const { onBlur, onFocus, ...baseButtonProps } = buttonProps;
   return /* @__PURE__ */ jsx(
     BaseContextMenuButton,
     {
-      ...props,
+      ...baseButtonProps,
       "aria-selected": isFocused ? "true" : "false",
       onBlur: (e) => {
         setIsFocused(false);
@@ -9491,12 +9719,14 @@ function ContextMenuContent({
   backLabel = "Back",
   children,
   className,
+  enableAnimations = true,
   Header: Header2,
   items,
   ItemsWrapper,
   menuClassName,
   onClose,
   onMenuLevelChange,
+  transitionDirection,
   ...props
 }) {
   const rootLevel = useMemo(
@@ -9509,6 +9739,7 @@ function ContextMenuContent({
     [Header2, items, ItemsWrapper, menuClassName]
   );
   const [menuStack, setMenuStack] = useState(() => [rootLevel]);
+  const [menuBodyAnimationKey, setMenuBodyAnimationKey] = useState(0);
   const activeMenu = menuStack[menuStack.length - 1];
   const ActiveMenuItemsWrapper = activeMenu.ItemsWrapper ?? React.Fragment;
   const closeMenu = useCallback(() => {
@@ -9532,10 +9763,9 @@ function ContextMenuContent({
     [ItemsWrapper]
   );
   const returnToParentMenu = 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]);
   useEffect(() => {
     setMenuStack((current) => {
       if (current.length === 1 && current[0] === rootLevel) return current;
@@ -9545,42 +9775,116 @@ function ContextMenuContent({
   useEffect(() => {
     onMenuLevelChange?.(menuStack.length);
   }, [menuStack.length, onMenuLevelChange]);
-  return /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: { closeMenu, openSubmenu, returnToParentMenu }, children: /* @__PURE__ */ jsxs(ContextMenuRoot, { className: clsx(className, activeMenu.menuClassName), ...props, children: [
-    activeMenu.Header ? /* @__PURE__ */ jsx(activeMenu.Header, {}) : menuStack.length > 1 ? /* @__PURE__ */ jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxs(ContextMenuBackButton, { onClick: returnToParentMenu, children: [
-      /* @__PURE__ */ jsx(IconChevronLeft, {}),
-      /* @__PURE__ */ jsx("span", { children: backLabel })
-    ] }) }) : null,
-    /* @__PURE__ */ jsx(ContextMenuBody, { children: activeMenu.Submenu ? /* @__PURE__ */ jsx(activeMenu.Submenu, {}) : /* @__PURE__ */ jsx(ActiveMenuItemsWrapper, { children: typeof children !== "undefined" ? children : activeMenu.items?.map((Item2, index) => /* @__PURE__ */ jsx(Item2, {}, `context-menu-item-${index}`)) }) })
-  ] }) });
+  useEffect(() => {
+    if (!transitionDirection) return;
+    setMenuBodyAnimationKey((value) => value + 1);
+  }, [transitionDirection, menuStack.length]);
+  return /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: { closeMenu, openSubmenu, returnToParentMenu }, children: /* @__PURE__ */ jsxs(
+    ContextMenuRoot,
+    {
+      className: clsx(className, activeMenu.menuClassName),
+      "data-str-chat-enable-animations": enableAnimations,
+      ...props,
+      children: [
+        activeMenu.Header ? /* @__PURE__ */ jsx(activeMenu.Header, {}) : menuStack.length > 1 ? /* @__PURE__ */ jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxs(ContextMenuBackButton, { onClick: returnToParentMenu, children: [
+          /* @__PURE__ */ jsx(IconChevronLeft, {}),
+          /* @__PURE__ */ jsx("span", { children: backLabel })
+        ] }) }) : null,
+        /* @__PURE__ */ 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__ */ jsx(activeMenu.Submenu, {}) : /* @__PURE__ */ jsx(ActiveMenuItemsWrapper, { children: typeof children !== "undefined" ? children : activeMenu.items?.map((Item2, index) => /* @__PURE__ */ jsx(Item2, {}, `context-menu-item-${index}`)) })
+          },
+          `context-menu-body-${menuStack.length}-${menuBodyAnimationKey}`
+        )
+      ]
+    }
+  ) });
 }
 const ContextMenu = (props) => {
+  const { ContextMenuContent: ContextMenuContentComponent = ContextMenuContent } = useComponentContext();
   const {
     allowFlip,
+    closeOnClickOutside,
+    closeTransitionMs = 130,
     dialogManagerId,
     focus,
     id,
     placement,
     referenceElement,
+    submenuTransitionDurationMs,
     tabIndex,
     trapFocus,
     ...menuProps
   } = props;
+  const resolvedSubmenuTransitionDurationMs = submenuTransitionDurationMs ?? 460;
   const isAnchored = id != null;
   const [menuLevel, setMenuLevel] = useState(1);
+  const [transitionDirection, setTransitionDirection] = useState(void 0);
+  const [contentResetToken, setContentResetToken] = useState(0);
+  const transitionTimeoutRef = useRef(null);
+  const previousMenuLevelRef = useRef(1);
   const open = useDialogIsOpen(id ?? "", dialogManagerId);
+  const previousOpenRef = useRef(open);
   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__ */ jsx(
-    ContextMenuContent,
+  useEffect(
+    () => () => {
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current);
+      }
+    },
+    []
+  );
+  const handleMenuLevelChange = 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__ */ 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,
@@ -9593,6 +9897,8 @@ const ContextMenu = (props) => {
       DialogAnchor,
       {
         allowFlip,
+        closeOnClickOutside,
+        closeTransitionMs,
         dialogManagerId,
         focus,
         id,
@@ -9930,7 +10236,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 (ACTIONS_NOT_WORKING_IN_THREAD.includes(type) && isMessageThreadReply)
         return false;
       if (message.error) {
@@ -10277,14 +10585,14 @@ const matchMarkdownLinks = (message) => {
   const regexMdLinks = /\[([^[]+)\](\(.*\))/gm;
   const matches = message.match(regexMdLinks);
   const singleMatch = /\[([^[]+)\]\((.*)\)/;
-  const links = matches ? matches.map((match2) => {
-    const i = singleMatch.exec(match2);
+  const links = matches ? matches.map((match) => {
+    const i = singleMatch.exec(match);
     return i && [i[1], i[2]];
   }) : [];
   return links.flat();
 };
 const emojiMarkdownPlugin = () => {
-  const replace = (match2) => u("element", { properties: {}, tagName: "emoji" }, [u("text", match2)]);
+  const replace = (match) => u("element", { properties: {}, tagName: "emoji" }, [u("text", match)]);
   const transform2 = (node) => findAndReplace(node, [emojiRegex(), replace]);
   return transform2;
 };
@@ -10294,13 +10602,13 @@ const mentionsMarkdownPlugin = (mentioned_users) => () => {
     mentioned_usernames.map((username) => `@${username}`).join("|"),
     "g"
   );
-  const replace = (match2) => {
-    const usernameOrId = match2.replace("@", "");
+  const replace = (match) => {
+    const usernameOrId = match.replace("@", "");
     const user = mentioned_users.find(
       ({ id, name }) => name === usernameOrId || id === usernameOrId
     );
     return u("element", { mentionedUser: user, properties: {}, tagName: "mention" }, [
-      u("text", match2)
+      u("text", match)
     ]);
   };
   const transform2 = (tree) => {
@@ -10405,12 +10713,12 @@ const plusPlusToEmphasis = () => {
     if (node.type !== "text" || parent == null || typeof index !== "number") return;
     const value = node.value;
     INS_REGEX.lastIndex = 0;
-    let match2;
+    let match;
     let last = 0;
     const out = [];
-    while (match2 = INS_REGEX.exec(value)) {
-      const [full, inner] = match2;
-      const start = match2.index;
+    while (match = INS_REGEX.exec(value)) {
+      const [full, inner] = match;
+      const start = match.index;
       if (start > last) out.push({ type: "text", value: value.slice(last, start) });
       out.push({
         children: [{ type: "text", value: inner }],
@@ -11838,6 +12146,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";
@@ -14675,7 +14984,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__ */ jsx(PollOptionWithVotesHeader, { option, optionOrderNumber: orderNumber }),
@@ -15688,7 +15998,7 @@ const AttachmentSelector = ({
   getModalPortalDestination
 }) => {
   const { t } = useTranslationContext();
-  const { Modal = GlobalModal } = useComponentContext();
+  const { ContextMenu: ContextMenuComponent = ContextMenu, Modal = GlobalModal } = useComponentContext();
   const { channelCapabilities } = useChannelStateContext();
   const messageComposer = useMessageComposerController();
   const isCooldownActive = useIsCooldownActive();
@@ -15748,7 +16058,7 @@ const AttachmentSelector = ({
       }
     ),
     /* @__PURE__ */ jsx(
-      ContextMenu,
+      ContextMenuComponent,
       {
         allowFlip: true,
         backLabel: t("Back"),
@@ -17778,7 +18088,10 @@ const SuggestionList = ({
   setFocusedItemIndex,
   suggestionItemComponents = defaultComponents
 }) => {
-  const { AutocompleteSuggestionItem = SuggestionListItem } = useComponentContext();
+  const {
+    AutocompleteSuggestionItem = SuggestionListItem,
+    ContextMenu: ContextMenuComponent = ContextMenu
+  } = useComponentContext();
   const { textareaRef } = useMessageComposerContext();
   const messageComposer = useMessageComposerController();
   const { textComposer } = messageComposer;
@@ -17896,7 +18209,7 @@ const SuggestionList = ({
         zIndex: 1e3
       },
       children: /* @__PURE__ */ jsx(
-        ContextMenu,
+        ContextMenuComponent,
         {
           className: clsx("str-chat__suggestion-list", className),
           Header: suggestions.searchSource.type === "commands" ? CommandsMenuHeader : void 0,
@@ -18122,12 +18435,6 @@ const TextareaComposer = ({
     if (!textareaRef.current || textareaIsFocused || !focus) return;
     textareaRef.current.focus();
   }, [attachments, focus, quotedMessage, textareaRef]);
-  useEffect(
-    () => () => {
-      messageComposer.clear();
-    },
-    [messageComposer]
-  );
   useLayoutEffect(() => {
     const textarea = textareaRef.current;
     if (!textarea || isComposing) return;
@@ -18581,7 +18888,7 @@ const MessageComposerProvider = (props) => {
   const messageComposer = useMessageComposerController();
   useEffect(
     () => () => {
-      messageComposer.createDraft();
+      messageComposer.createDraft().finally(() => messageComposer.clear());
     },
     [messageComposer]
   );
@@ -18899,7 +19206,7 @@ const useChat = ({
   };
   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}`);
@@ -19400,10 +19707,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
@@ -19488,6 +19795,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
   }
@@ -19848,6 +20156,32 @@ const DefaultMessageActionComponents = {
     }
   },
   quick: {
+    // eslint-disable-next-line react/display-name
+    DropdownToggle: forwardRef((_, ref) => {
+      const { t } = useTranslationContext();
+      const { message } = useMessageContext();
+      const dropdownDialogIsOpen = useDialogIsOpen(
+        MessageActions.getDialogId({ messageId: message.id })
+      );
+      const { dialog } = useDialogOnNearestManager({
+        id: MessageActions.getDialogId({ messageId: message.id })
+      });
+      return /* @__PURE__ */ 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__ */ jsx(IconDotGrid1x3Horizontal, { className: "str-chat__message-action-icon" })
+        }
+      );
+    }),
     React() {
       return /* @__PURE__ */ jsx(ReactionSelectorWithButton, { ReactionIcon: IconEmojiSmile });
     },
@@ -19868,7 +20202,10 @@ const DefaultMessageActionComponents = {
   }
 };
 const defaultMessageActionSet = [
-  // { placement: 'dropdown', type: 'block' },
+  {
+    Component: DefaultMessageActionComponents.quick.DropdownToggle,
+    placement: "quick-dropdown-toggle"
+  },
   {
     Component: DefaultMessageActionComponents.quick.Reply,
     placement: "quick",
@@ -19958,14 +20295,14 @@ function useFetchReactions(options) {
   const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;
   const [refetchNonce, setRefetchNonce] = useState(null);
   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);
         }
@@ -19989,6 +20326,16 @@ function useFetchReactions(options) {
   return { isLoading, reactions, refetch };
 }
 const defaultReactionDetailsSort = { created_at: -1 };
+const MessageReactionsDetailLoadingIndicator = () => {
+  const elements = useMemo(
+    () => Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
+      /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
+      /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
+    ] }, index)),
+    []
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: elements });
+};
 function MessageReactionsDetail({
   handleFetchReactions,
   onSelectedReactionTypeChange,
@@ -19999,7 +20346,11 @@ function MessageReactionsDetail({
   totalReactionCount
 }) {
   const { client } = useChatContext();
-  const { Avatar: Avatar$1 = Avatar } = useComponentContext(MessageReactionsDetail.name);
+  const {
+    Avatar: Avatar$1 = Avatar,
+    LoadingIndicator: LoadingIndicator2 = MessageReactionsDetailLoadingIndicator,
+    reactionOptions = defaultReactionOptions
+  } = useComponentContext(MessageReactionsDetail.name);
   const { t } = useTranslationContext();
   const {
     handleReaction: contextHandleReaction,
@@ -20026,7 +20377,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__ */ jsx("div", { className: "str-chat__message-reactions-detail__total-count", children: t("{{ count }} reactions", { count: totalReactionCount }) }),
         /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__reaction-type-list-container", children: /* @__PURE__ */ jsx("ul", { className: "str-chat__message-reactions-detail__reaction-type-list", children: reactions.map(
@@ -20039,7 +20390,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__ */ jsx("span", { className: "str-chat__message-reactions-detail__reaction-type-list-item-icon", children: /* @__PURE__ */ jsx(EmojiComponent, {}) }),
                     reactionCount > 1 && /* @__PURE__ */ jsx(
@@ -20063,22 +20416,10 @@ function MessageReactionsDetail({
             className: "str-chat__message-reactions-detail__user-list",
             "data-testid": "all-reacting-users",
             children: [
-              areReactionsLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
-                ] })
-              ] }),
-              !areReactionsLoading && /* @__PURE__ */ jsx(Fragment, { children: reactionDetailsWithLegacyFallback.map(({ user }) => {
+              areReactionsLoading && /* @__PURE__ */ jsx(LoadingIndicator2, {}),
+              !areReactionsLoading && /* @__PURE__ */ jsx(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__ */ jsxs(
                   "div",
                   {
@@ -20103,23 +20444,23 @@ function MessageReactionsDetail({
                             children: belongsToCurrentUser ? t("You") : user?.name || user?.id
                           }
                         ),
-                        belongsToCurrentUser && selectedReactionType && /* @__PURE__ */ jsx(
+                        belongsToCurrentUser && /* @__PURE__ */ 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__ */ jsx("span", { className: "str-chat__message-reactions-detail__user-list-item-icon", children: EmojiComponent && !selectedReactionType && /* @__PURE__ */ jsx(EmojiComponent, {}) })
                     ]
                   },
-                  user?.id
+                  `${user?.id}-${type}`
                 );
               }) })
             ]
@@ -20268,6 +20609,7 @@ const UnMemoizedMessageReactions = (props) => {
   const divRef = 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;
@@ -20302,6 +20644,8 @@ const UnMemoizedMessageReactions = (props) => {
         children: /* @__PURE__ */ jsxs(
           FragmentOrButton,
           {
+            "aria-expanded": isDialogOpen,
+            "aria-pressed": isDialogOpen,
             buttonIf: visualStyle === "clustered",
             className: "str-chat__message-reactions__list-button",
             onClick: () => handleReactionButtonClick(existingReactions[0]?.reactionType ?? null),
@@ -20339,9 +20683,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__ */ jsxs("span", { className: "str-chat__message-reactions__overflow-count", children: [
                       "+",
                       totalReactionCount - cappedExistingReactions.reactionCountToDisplay
@@ -20466,91 +20808,74 @@ const StreamEmoji = ({
 const useSplitActionSet = (actionSet) => 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 } = useChatContext();
   const { isMyMessage, message, threadList } = useMessageContext();
+  const { ContextMenu: ContextMenuComponent = ContextMenu } = useComponentContext();
   const { t } = useTranslationContext();
   const [actionsBoxButtonElement, setActionsBoxButtonElement] = 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 = useMemo(
-    () => dropdownActionSet.map(({ Component: Component2 }) => {
-      const ActionItem = (menuProps) => /* @__PURE__ */ jsx(Component2, { ...menuProps });
-      return ActionItem;
-    }),
-    [dropdownActionSet]
-  );
   if (dropdownActionSet.length + quickActionSet.length === 0) {
     return null;
   }
   return /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            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__ */ jsx(IconDotGrid1x3Horizontal, { className: "str-chat__message-action-icon" })
-            }
-          ),
+        quickDropdownToggleAction && dropdownActionSet.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(quickDropdownToggleAction.Component, { ref: setActionsBoxButtonElement }),
           /* @__PURE__ */ 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: Component2, type }) => /* @__PURE__ */ jsx(Component2, {}, type))
             }
           )
         ] }),
@@ -20559,6 +20884,8 @@ const MessageActions = ({
     }
   );
 };
+MessageActions.getDialogId = ({ messageId }) => `message-actions-${messageId}`;
+MessageActions.displayName = "MessageActions";
 const MessageUIWithContext = ({
   endOfGroup,
   firstOfGroup,
@@ -21385,6 +21712,7 @@ const useScrollLocationLogic = (params) => {
   const closeToBottom = useRef(false);
   const closeToTop = useRef(false);
   const previousScrollTopRef = useRef(0);
+  const previousMessagesLengthRef = useRef(messages.length);
   const anchorRestoreCleanupRef = useRef(null);
   const captureAnchor = useCallback(() => {
     if (!listElement) return null;
@@ -21536,6 +21864,60 @@ const useScrollLocationLogic = (params) => {
       scrollToBottom();
     }
   }, [disableAutoScrollToBottom, justReachedLatestMessageSet, listElement, hasMoreNewer]);
+  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,
@@ -21562,6 +21944,9 @@ const useScrollLocationLogic = (params) => {
   useLayoutEffect(() => {
     previousHasMoreNewerRef.current = hasMoreNewer;
   }, [hasMoreNewer]);
+  useLayoutEffect(() => {
+    previousMessagesLengthRef.current = messages.length;
+  }, [messages.length]);
   const onScroll = useCallback(
     (event) => {
       const element = event.target;
@@ -21570,8 +21955,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);
@@ -23506,11 +23893,17 @@ const useConnectionRecoveredListener = (forceUpdate) => {
 const MOBILE_NAV_BREAKPOINT = 768;
 const useMobileNavigation = (channelListRef, navOpen, closeMobileNav) => {
   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();
       }
     };
@@ -24640,7 +25033,7 @@ const UnMemoizedLoadMoreButton = ({
   return /* @__PURE__ */ jsx("div", { className: "str-chat__load-more-button", children: /* @__PURE__ */ jsx(
     Button,
     {
-      appearance: "outline",
+      appearance: "ghost",
       "aria-label": t("aria/Load More Channels"),
       "data-testid": "load-more-button",
       disabled: loading,
@@ -25248,6 +25641,36 @@ const useArchiveActionButtonBehavior = () => {
   };
 };
 const defaultChannelActionSet = [
+  {
+    // eslint-disable-next-line react/display-name
+    Component: 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__ */ jsx(
+        Button,
+        {
+          appearance: "ghost",
+          "aria-expanded": dialogIsOpen,
+          "aria-pressed": dialogIsOpen,
+          circular: true,
+          onClick: (e) => {
+            e.stopPropagation();
+            dialog.toggle();
+          },
+          ref,
+          size: "sm",
+          variant: "secondary",
+          children: /* @__PURE__ */ jsx(IconDotGrid1x3Horizontal, {})
+        }
+      );
+    }),
+    placement: "quick-dropdown-toggle"
+  },
   {
     Component() {
       const behaviorProps = useArchiveActionButtonBehavior();
@@ -25380,7 +25803,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] = useState(false);
@@ -25482,59 +25905,23 @@ const useBaseChannelActionSetFilter = (channelActionSet) => {
   const connectedUserIsMember = typeof membership.user !== "undefined";
   const ownCapabilities = channel.data?.own_capabilities;
   return useMemo(() => {
-    const filtered = channelActionSet.filter(
-      (action) => 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: P.when(
-            (capabilities) => capabilities?.includes("mute-channel")
-          )
-        },
-        {
-          action: { placement: "quick", type: "mute" },
-          isDirectMessageChannel: false,
-          ownCapabilities: P.when(
-            (capabilities) => capabilities?.includes("mute-channel")
-          )
-        },
-        {
-          action: { type: "ban" },
-          memberCount: P.number.gt(0).and(P.number.lte(2)),
-          ownCapabilities: P.when(
-            (capabilities) => capabilities?.includes("ban-channel-members")
-          )
-        },
-        {
-          action: { type: "leave" },
-          ownCapabilities: 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,
@@ -25545,17 +25932,18 @@ const useBaseChannelActionSetFilter = (channelActionSet) => {
   ]);
 };
 const ChannelListItemActionButtons = () => {
+  const { ContextMenu: ContextMenuComponent = ContextMenu } = 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__ */ jsxs(
@@ -25565,26 +25953,10 @@ const ChannelListItemActionButtons = () => {
         "str-chat__channel-list-item__action-buttons--active": dialogIsOpen
       }),
       children: [
-        splitActionSet.dropdownActionSet.length > 0 && /* @__PURE__ */ jsx(
-          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__ */ jsx(IconDotGrid1x3Horizontal, {})
-          }
-        ),
-        splitActionSet.quickActionSet.map(({ Component: Component2, type }) => /* @__PURE__ */ jsx(Component2, {}, type)),
+        quickDropdownToggleAction && dropdownActionSet.length > 0 && /* @__PURE__ */ jsx(quickDropdownToggleAction.Component, { ref: setReferenceElement }),
+        quickActionSet.map(({ Component: Component2, type }) => /* @__PURE__ */ jsx(Component2, {}, type)),
         /* @__PURE__ */ jsx(
-          ContextMenu,
+          ContextMenuComponent,
           {
             className: "str-chat__channel-list-item__action-buttons-context-menu",
             dialogManagerId: dialogManager?.id,
@@ -25594,14 +25966,14 @@ const ChannelListItemActionButtons = () => {
             referenceElement,
             tabIndex: -1,
             trapFocus: true,
-            children: splitActionSet.dropdownActionSet.map(({ Component: Component2, type }) => /* @__PURE__ */ jsx(Component2, {}, type))
+            children: dropdownActionSet.map(({ Component: Component2, type }) => /* @__PURE__ */ jsx(Component2, {}, type))
           }
         )
       ]
     }
   );
 };
-ChannelListItemActionButtons.getDialogId = (channelId) => `channel-action-buttons-${channelId}`;
+ChannelListItemActionButtons.getDialogId = ({ channelId }) => `channel-action-buttons-${channelId}`;
 ChannelListItemActionButtons.displayName = "ChannelListItemActionButtons";
 function ChannelListItemTimestamp({ lastMessage }) {
   const { t, tDateTimeParser } = useTranslationContext("ChannelListItemTimestamp");
@@ -26927,7 +27299,7 @@ const VoiceRecordingPlayerUI = ({ audioPlayer }) => {
     secondsElapsed
   } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, "data-testid": "voice-recording-widget", children: [
-    /* @__PURE__ */ jsx(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay }),
+    /* @__PURE__ */ jsx("div", { className: "str-chat__message-attachment__voice-recording-widget__play-button-container", children: /* @__PURE__ */ jsx(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay }) }),
     /* @__PURE__ */ jsx("div", { className: "str-chat__message-attachment__voice-recording-widget__metadata", children: /* @__PURE__ */ jsxs("div", { className: "str-chat__message-attachment__voice-recording-widget__audio-state", children: [
       /* @__PURE__ */ jsx("div", { className: "str-chat__message-attachment__voice-recording-widget__timer", children: durationSeconds ? /* @__PURE__ */ jsx(
         DurationDisplay,
@@ -27336,23 +27708,44 @@ const FileAttachment = ({ attachment }) => {
   );
 };
 const Giphy = ({ attachment }) => {
-  const { giphyVersion: giphyVersionName } = useChannelStateContext();
+  const { giphyVersion: giphyVersionName, imageAttachmentSizeHandler } = useChannelStateContext();
   const { BaseImage: BaseImage$1 = BaseImage } = useComponentContext();
   const { t } = useTranslationContext();
   const usesDefaultBaseImage = BaseImage$1 === BaseImage;
+  const imageElement = useRef(null);
+  const [attachmentConfiguration, setAttachmentConfiguration] = useState(void 0);
   const imageDescriptors = 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 = 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]);
+  useLayoutEffect(() => {
+    if (!imageElement.current || !imageAttachmentSizeHandler) return;
+    const config = imageAttachmentSizeHandler(attachment, imageElement.current);
+    setAttachmentConfiguration(config);
+  }, [attachment, imageAttachmentSizeHandler]);
+  if (!imageUrl) return null;
   return /* @__PURE__ */ jsxs("div", { className: clsx(`str-chat__message-attachment-giphy`), children: [
     /* @__PURE__ */ 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 } : {}
       }
@@ -28011,6 +28404,7 @@ export {
   ContextMenuBackButton,
   ContextMenuBody,
   ContextMenuButton,
+  ContextMenuContent,
   ContextMenuHeader,
   ContextMenuRoot,
   CooldownTimer,
@@ -28245,6 +28639,7 @@ export {
   MessageProvider,
   MessageReactions,
   MessageReactionsDetail,
+  MessageReactionsDetailLoadingIndicator,
   MessageRepliesCountButton,
   MessageSearchResultItem,
   MessageStatus,