stream-chat-react 14.0.0-beta.7 → 14.0.0-beta.8

package/dist/cjs/index.js

@@ -5,7 +5,7 @@ const clsx = require("clsx");
 const nanoid = require("nanoid");
 const React = require("react");
 const audioProcessing = require("./audioProcessing.56e5db9d.js");
-const WithAudioPlayback = require("./WithAudioPlayback.83ba0e35.js");
+const WithAudioPlayback = require("./WithAudioPlayback.58b0b39b.js");
 const streamChat = require("stream-chat");
 const throttle = require("lodash.throttle");
 const linkify = require("linkifyjs");
@@ -308,6 +308,10 @@ const DialogPortalDestination = () => {
     if (!destinationRoot || !dialogManager) return;
     const handleDocumentClick = (event) => {
       const target = event.target;
+      const clickedOverlay = target.closest?.(
+        "[data-str-chat__portal-id]"
+      );
+      if (clickedOverlay && clickedOverlay !== destinationRoot) return;
       if (target !== destinationRoot && destinationRoot.contains(target)) return;
       setTimeout(() => {
         Object.values(dialogManager.state.getLatestValue().dialogsById).forEach(
@@ -9859,6 +9863,7 @@ const ContextMenuContext = React.createContext(
 );
 const useContextMenuContext = () => React.useContext(ContextMenuContext);
 function ContextMenuContent({
+  anchorReferenceElement,
   backLabel = "Back",
   children,
   className,
@@ -9922,31 +9927,37 @@ function ContextMenuContent({
     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,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ContextMenuContext.Provider,
     {
-      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}`
-        )
-      ]
+      value: { anchorReferenceElement, 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();
@@ -10019,6 +10030,7 @@ const ContextMenu = (props) => {
   const content = /* @__PURE__ */ React.createElement(
     ContextMenuContentComponent,
     {
+      anchorReferenceElement: isAnchored ? referenceElement : void 0,
       ...menuProps,
       key: `context-menu-content-${contentResetToken}`,
       onMenuLevelChange: handleMenuLevelChange,
@@ -10360,6 +10372,7 @@ const MessageBlocked = () => {
 const useBaseMessageActionSetFilter = (messageActionSet, disable = false) => {
   const { initialMessage: isInitialMessage, message } = useMessageContext();
   const { channelConfig } = WithAudioPlayback.useChannelStateContext();
+  const messageIsDeleted = WithAudioPlayback.isMessageDeleted(message);
   const {
     canBlockUser,
     canDelete,
@@ -10387,9 +10400,9 @@ const useBaseMessageActionSetFilter = (messageActionSet, disable = false) => {
       if (WithAudioPlayback.ACTIONS_NOT_WORKING_IN_THREAD.includes(type) && isMessageThreadReply)
         return false;
       if (message.error) {
-        return type === "resendMessage" && canSendMessage && (allowRetry || isBounced) || type === "edit" && (isBounced && canEdit || hasNetworkSendFailure) || type === "delete" && (isBounced && canDelete || hasNetworkSendFailure);
+        return type === "resendMessage" && canSendMessage && (allowRetry || isBounced) || type === "edit" && (isBounced && canEdit || hasNetworkSendFailure) || type === "delete" && !messageIsDeleted && (isBounced && canDelete || hasNetworkSendFailure);
       }
-      if (type === "resendMessage" || type === "blockUser" && !canBlockUser || type === "copyMessageText" && !message.text || type === "delete" && !canDelete || type === "edit" && !canEdit || type === "flag" && !canFlag || type === "markUnread" && !canMarkUnread || type === "mute" && !canMute || type === "quote" && !canQuote || type === "react" && !canReact || type === "reply" && !canReply || type === "remindMe" && !channelConfig?.["user_message_reminders"] || type === "saveForLater" && !channelConfig?.["user_message_reminders"])
+      if (type === "resendMessage" || type === "blockUser" && !canBlockUser || type === "copyMessageText" && !message.text || type === "delete" && (!canDelete || messageIsDeleted) || type === "edit" && !canEdit || type === "flag" && !canFlag || type === "markUnread" && !canMarkUnread || type === "mute" && !canMute || type === "quote" && !canQuote || type === "react" && !canReact || type === "reply" && !canReply || type === "remindMe" && !channelConfig?.["user_message_reminders"] || type === "saveForLater" && !channelConfig?.["user_message_reminders"])
         return false;
       return true;
     });
@@ -10408,6 +10421,7 @@ const useBaseMessageActionSetFilter = (messageActionSet, disable = false) => {
     channelConfig,
     isBounced,
     isInitialMessage,
+    messageIsDeleted,
     isMessageThreadReply,
     message.error,
     message.status,
@@ -10539,9 +10553,10 @@ const PinIndicator = ({ message }) => {
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
   ] }) });
 };
-const Tooltip = ({ children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__tooltip", ...rest, children });
+const Tooltip = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("str-chat__tooltip", className), ...rest, children });
 const PopperTooltip = ({
   children,
+  className,
   offset = [0, 10],
   placement = "top",
   referenceElement,
@@ -10568,7 +10583,7 @@ const PopperTooltip = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "str-chat__tooltip",
+      className: clsx("str-chat__tooltip", className),
       "data-placement": resolvedPlacement,
       ref: setPopperElement,
       style: { left: x ?? 0, position: strategy, top: y ?? 0 },
@@ -14181,8 +14196,9 @@ const NumericInput = React.forwardRef(
                 ),
                 disabled: disabled || atMin,
                 onClick: handleDecrement,
+                size: "xs",
                 variant: "secondary",
-                children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__form-numeric-input__stepper-icon", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMinus, {}) })
+                children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMinus, { className: "str-chat__form-numeric-input__stepper-icon" })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -14211,7 +14227,7 @@ const NumericInput = React.forwardRef(
                 ),
                 disabled: disabled || atMax,
                 onClick: handleIncrement,
-                size: "sm",
+                size: "xs",
                 variant: "secondary",
                 children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPlusSmall, { className: "str-chat__form-numeric-input__stepper-icon" })
               }
@@ -14222,12 +14238,72 @@ const NumericInput = React.forwardRef(
     );
   }
 );
+const TextInputIconMessageLine = ({ icon, text: text2 }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__message-icon", children: icon }),
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "str-chat__form-text-input__message-text", children: text2 })
+] });
+const TextInputFieldMessage = (props) => {
+  if (props.kind === "neutral") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx(
+          "str-chat__form-text-input__message",
+          props.insidePlacement && "str-chat__form-text-input__message--field-message-inside"
+        ),
+        id: props.id,
+        children: props.text
+      }
+    );
+  } else if (props.kind === "success") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx(
+          "str-chat__form-text-input__message",
+          "str-chat__form-text-input__message--success",
+          props.insidePlacement && "str-chat__form-text-input__message--field-message-inside"
+        ),
+        id: props.id,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          TextInputIconMessageLine,
+          {
+            icon: props.successMessageIcon ?? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCheckmark, {}),
+            text: props.text
+          }
+        )
+      }
+    );
+  } else if (props.kind === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx(
+          "str-chat__form-text-input__message",
+          "str-chat__form-field-error",
+          props.insidePlacement && "str-chat__form-text-input__message--field-message-inside"
+        ),
+        id: props.id,
+        role: "alert",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          TextInputIconMessageLine,
+          {
+            icon: props.errorMessageIcon ?? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationMark, {}),
+            text: props.text
+          }
+        )
+      }
+    );
+  }
+  return null;
+};
 const TextInput = React.forwardRef(function TextInput2({
   className,
   disabled,
   error = false,
   errorMessage,
   errorMessageIcon,
+  fieldMessagePlacement = "outside",
   id: idProp,
   label,
   leading,
@@ -14239,71 +14315,86 @@ const TextInput = React.forwardRef(function TextInput2({
   variant = "outline",
   ...inputProps
 }, ref) {
-  const generatedId = useStableId();
-  const id = idProp ?? generatedId;
-  const displayError = error && (errorMessage != null || message != null);
-  const displaySuccess = successMessage != null;
-  const displayNeutralMessage = message != null && !error;
-  const displayMessage = displayError || displaySuccess || displayNeutralMessage;
-  const messageId = displayMessage ? `${id}-message` : void 0;
-  const messageContent = displayError ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__message-icon", children: errorMessageIcon ?? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationMark, {}) }),
-    errorMessage ?? message
-  ] }) : displaySuccess ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__message-icon", children: successMessageIcon ?? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCheckmark, {}) }),
-    successMessage
-  ] }) : displayNeutralMessage ? message : null;
+  const autoId = useStableId();
+  const id = idProp ?? autoId;
+  const hasError = error && (errorMessage != null || message != null);
+  const showSuccess = !hasError && successMessage != null;
+  const showNeutral = !hasError && !showSuccess && message != null;
+  const hasFeedback = hasError || showSuccess || showNeutral;
+  const messageInside = fieldMessagePlacement === "inside" && hasFeedback;
+  const messageId = hasError ? `${id}-field-error` : showSuccess || showNeutral ? `${id}-message` : void 0;
+  const describedBy = messageId;
+  const fieldMessage = hasError ? /* @__PURE__ */ jsxRuntime.jsx(
+    TextInputFieldMessage,
+    {
+      errorMessageIcon,
+      id: messageId,
+      insidePlacement: messageInside,
+      kind: "error",
+      text: errorMessage ?? message
+    }
+  ) : showSuccess ? /* @__PURE__ */ jsxRuntime.jsx(
+    TextInputFieldMessage,
+    {
+      id: messageId,
+      insidePlacement: messageInside,
+      kind: "success",
+      successMessageIcon,
+      text: successMessage
+    }
+  ) : showNeutral ? /* @__PURE__ */ jsxRuntime.jsx(
+    TextInputFieldMessage,
+    {
+      id: messageId,
+      insidePlacement: messageInside,
+      kind: "neutral",
+      text: message
+    }
+  ) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: clsx(
         "str-chat__form-text-input",
         error && "str-chat__form-text-input--error",
-        displaySuccess && "str-chat__form-text-input--success",
+        showSuccess && "str-chat__form-text-input--success",
         disabled && "str-chat__form-text-input--disabled",
+        messageInside && "str-chat__form-text-input--field-message-inside",
         className
       ),
       children: [
-        !!label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "str-chat__form-text-input__label", htmlFor: id, children: label }),
+        label ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: "str-chat__form-text-input__label", htmlFor: id, children: label }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: clsx(
               "str-chat__form-text-input__wrapper",
-              `str-chat__form-text-input__wrapper--${variant}`
+              `str-chat__form-text-input__wrapper--${variant}`,
+              messageInside && "str-chat__form-text-input__wrapper--field-message-inside"
             ),
             children: [
-              !!leading && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__leading", children: leading }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  "aria-describedby": messageId,
-                  "aria-invalid": error,
-                  className: "str-chat__form-text-input__input",
-                  disabled,
-                  id,
-                  ref,
-                  ...inputProps
-                }
-              ),
-              trailingText != null && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__suffix", children: trailingText }),
-              !!trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__trailing", children: trailing })
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__form-text-input__control-row", children: [
+                leading ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__leading", children: leading }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    "aria-describedby": describedBy,
+                    "aria-invalid": error,
+                    className: "str-chat__form-text-input__input",
+                    disabled,
+                    id,
+                    ref,
+                    ...inputProps
+                  }
+                ),
+                trailingText != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__suffix", children: trailingText }) : null,
+                trailing ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__trailing", children: trailing }) : null
+              ] }),
+              messageInside ? fieldMessage : null
             ]
           }
         ),
-        messageContent != null && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: clsx(
-              "str-chat__form-text-input__message",
-              displayError && "str-chat__form-field-error",
-              displaySuccess && "str-chat__form-text-input__message--success"
-            ),
-            id: messageId,
-            role: error ? "alert" : void 0,
-            children: messageContent
-          }
-        )
+        messageInside ? null : fieldMessage
       ]
     }
   );
@@ -15688,6 +15779,7 @@ const OptionFieldSet = () => {
               {
                 className: "str-chat__form__input-field__value",
                 error: !!error,
+                fieldMessagePlacement: "inside",
                 id: option.id,
                 leading: draggable ? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconReorder, { className: "str-chat__drag-handle" }) : void 0,
                 message: error ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "poll-option-input-field-error", children: knownValidationErrors[error] ?? t("Error") }) : void 0,
@@ -15725,7 +15817,7 @@ const RemoveOptionButton = ({ className, ...props }) => /* @__PURE__ */ jsxRunti
     appearance: "ghost",
     circular: true,
     className: clsx("str-chat__form__remove-option-button", className),
-    size: "sm",
+    size: "xs",
     variant: "secondary",
     ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMinusCircle, {})
@@ -17341,7 +17433,7 @@ const GalleryUI = () => {
           children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: clsx({
+              className: clsx("str-chat__gallery__media-container", {
                 "str-chat__gallery__media--dragging": isDragging,
                 "str-chat__gallery__media--slide-backward": !isDragging && slideDirection === "backward",
                 "str-chat__gallery__media--slide-forward": !isDragging && slideDirection === "forward"
@@ -18246,7 +18338,7 @@ const textComposerStateSelector$3 = ({ selection, suggestions }) => ({
 const searchSourceStateSelector$5 = (nextValue) => ({
   items: nextValue.items ?? []
 });
-const defaultComponents = {
+const defaultComponents$1 = {
   "/": (props) => /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { ...props, entity: props.entity }),
   ":": (props) => /* @__PURE__ */ jsxRuntime.jsx(EmoticonItem, { ...props, entity: props.entity }),
   "@": (props) => /* @__PURE__ */ jsxRuntime.jsx(UserItem, { ...props, entity: props.entity })
@@ -18257,7 +18349,7 @@ const SuggestionList = ({
   containerClassName,
   focusedItemIndex,
   setFocusedItemIndex,
-  suggestionItemComponents = defaultComponents
+  suggestionItemComponents = defaultComponents$1
 }) => {
   const {
     AutocompleteSuggestionItem = SuggestionListItem,
@@ -19111,7 +19203,7 @@ const getLatestMessagePreview = (channel, t, userLanguage = "en", isMessageAIGen
   if (!latestMessage) {
     return t("Nothing yet...");
   }
-  if (latestMessage.deleted_at) {
+  if (WithAudioPlayback.isMessageDeleted(latestMessage)) {
     return t("Message deleted");
   }
   if (poll) {
@@ -19649,7 +19741,11 @@ const defaultReactionOptions = {
 };
 const stableOwnReactions = [];
 const ReactionSelector = (props) => {
-  const { handleReaction: propHandleReaction, own_reactions: propOwnReactions } = props;
+  const {
+    dialogId: propDialogId,
+    handleReaction: propHandleReaction,
+    own_reactions: propOwnReactions
+  } = props;
   const [extendedListOpen, setExtendedListOpen] = React.useState(false);
   const {
     reactionOptions = defaultReactionOptions,
@@ -19661,7 +19757,7 @@ const ReactionSelector = (props) => {
     message,
     threadList
   } = useMessageContext();
-  const dialogId2 = ReactionSelector.getDialogId({
+  const dialogId2 = propDialogId ?? ReactionSelector.getDialogId({
     messageId: message.id,
     threadList
   });
@@ -19687,50 +19783,61 @@ const ReactionSelector = (props) => {
       })
     );
   }, [reactionOptions]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__reaction-selector", "data-testid": "reaction-selector", children: [
-    !extendedListOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "ul",
-        {
-          className: "str-chat__reaction-selector-list",
-          "data-testid": "reaction-selector-list",
-          children: adjustedQuickReactionOptions.map(
-            ({ Component, name: reactionName, type: reactionType }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "str-chat__reaction-list-selector__item", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                "aria-label": `Select Reaction: ${reactionName || reactionType}`,
-                "aria-pressed": typeof ownReactionByType[reactionType] !== "undefined",
-                className: clsx("str-chat__reaction-selector-list__item-button"),
-                "data-testid": "select-reaction-button",
-                "data-text": reactionType,
-                onClick: (event) => {
-                  handleReaction(reactionType, event);
-                  if (closeReactionSelectorOnClick) {
-                    dialog.close();
-                  }
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "str-chat__reaction-icon", children: /* @__PURE__ */ jsxRuntime.jsx(Component, {}) })
-              }
-            ) }, reactionType)
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        WithAudioPlayback.Button,
-        {
-          appearance: "outline",
-          circular: true,
-          className: "str-chat__reaction-selector__add-button",
-          "data-testid": "reaction-selector-add-button",
-          onClick: () => setExtendedListOpen(true),
-          size: "sm",
-          variant: "secondary",
-          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPlus, {})
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__reaction-selector", "data-testid": "reaction-selector", children: !extendedListOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        className: "str-chat__reaction-selector-list",
+        "data-testid": "reaction-selector-list",
+        children: adjustedQuickReactionOptions.map(
+          ({ Component, name: reactionName, type: reactionType }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "str-chat__reaction-list-selector__item", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              "aria-label": `Select Reaction: ${reactionName || reactionType}`,
+              "aria-pressed": typeof ownReactionByType[reactionType] !== "undefined",
+              className: clsx("str-chat__reaction-selector-list__item-button"),
+              "data-testid": "select-reaction-button",
+              "data-text": reactionType,
+              onClick: (event) => {
+                handleReaction(reactionType, event);
+                if (closeReactionSelectorOnClick) {
+                  dialog.close();
+                }
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "str-chat__reaction-icon", children: /* @__PURE__ */ jsxRuntime.jsx(Component, {}) })
+            }
+          ) }, reactionType)
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      WithAudioPlayback.Button,
+      {
+        appearance: "outline",
+        circular: true,
+        className: "str-chat__reaction-selector__add-button",
+        "data-testid": "reaction-selector-add-button",
+        onClick: () => {
+          setExtendedListOpen(true);
+        },
+        size: "sm",
+        variant: "secondary",
+        children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPlus, {})
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+    ReactionSelectorExtendedList2,
+    {
+      ...props,
+      dialogId: dialogId2,
+      handleReaction: async (reactionType, event) => {
+        await handleReaction(reactionType, event);
+        if (closeReactionSelectorOnClick) {
+          dialog.close();
         }
-      )
-    ] }),
-    extendedListOpen && /* @__PURE__ */ jsxRuntime.jsx(ReactionSelectorExtendedList2, { ...props, dialogId: dialogId2 })
-  ] });
+      }
+    }
+  ) });
 };
 ReactionSelector.getDialogId = ({ messageId, threadList }) => {
   const dialogIdNamespace = threadList ? "-thread" : "";
@@ -19790,521 +19897,682 @@ ReactionSelector.ExtendedList = function ReactionSelectorExtendedList({
     }
   );
 };
-const ReactionSelectorWithButton = ({
-  ReactionIcon
+function useFetchReactions(options) {
+  const { addNotification } = WithAudioPlayback.useNotificationApi();
+  const { handleFetchReactions: contextHandleFetchReactions } = useMessageContext();
+  const { t } = WithAudioPlayback.useTranslationContext("useFetchReactions");
+  const [reactions, setReactions] = React.useState([]);
+  const {
+    handleFetchReactions: propHandleFetchReactions,
+    reactionType,
+    shouldFetch,
+    sort
+  } = options;
+  const [isLoading, setIsLoading] = React.useState(shouldFetch);
+  const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;
+  const [refetchNonce, setRefetchNonce] = React.useState(null);
+  React.useEffect(() => {
+    if (!shouldFetch) {
+      return;
+    }
+    let cancel = false;
+    (async () => {
+      try {
+        setIsLoading(true);
+        const reactions2 = await handleFetchReactions(reactionType ?? void 0, sort);
+        if (!cancel) {
+          setReactions(reactions2);
+        }
+      } catch (e) {
+        if (!cancel) {
+          setReactions([]);
+          addNotification({
+            emitter: "Reactions",
+            error: e instanceof Error ? e : void 0,
+            message: t("Error fetching reactions"),
+            severity: "error",
+            type: "api:message:reactions:fetch:failed"
+          });
+        }
+      } finally {
+        if (!cancel) {
+          setIsLoading(false);
+        }
+      }
+    })();
+    return () => {
+      cancel = true;
+    };
+  }, [
+    addNotification,
+    handleFetchReactions,
+    reactionType,
+    refetchNonce,
+    shouldFetch,
+    sort,
+    t
+  ]);
+  const refetch = React.useCallback(() => {
+    setRefetchNonce(Math.random());
+  }, []);
+  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 });
+};
+const MessageReactionsDetail = ({
+  handleFetchReactions,
+  handleReaction,
+  onSelectedReactionTypeChange,
+  own_reactions,
+  reactionDetailsSort: propReactionDetailsSort,
+  reactionGroups,
+  reactions,
+  selectedReactionType,
+  totalReactionCount
 }) => {
-  const { t } = WithAudioPlayback.useTranslationContext("ReactionSelectorWithButton");
-  const { isMyMessage, message, threadList } = useMessageContext();
-  const { ReactionSelector: ReactionSelector$1 = ReactionSelector } = WithAudioPlayback.useComponentContext();
-  const buttonRef = React.useRef(null);
-  const dialogId2 = ReactionSelector.getDialogId({
-    messageId: message.id,
-    threadList
+  const [extendedReactionListOpen, setExtendedReactionListOpen] = React.useState(false);
+  const { client } = WithAudioPlayback.useChatContext();
+  const {
+    Avatar: Avatar$1 = Avatar,
+    LoadingIndicator: LoadingIndicator2 = MessageReactionsDetailLoadingIndicator,
+    reactionOptions = defaultReactionOptions,
+    ReactionSelectorExtendedList: ReactionSelectorExtendedList2 = ReactionSelector.ExtendedList
+  } = WithAudioPlayback.useComponentContext(MessageReactionsDetail.name);
+  const { t } = WithAudioPlayback.useTranslationContext();
+  const {
+    handleReaction: contextHandleReaction,
+    message,
+    reactionDetailsSort: contextReactionDetailsSort
+  } = useMessageContext(MessageReactionsDetail.name);
+  const reactionDetailsSort = propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
+  const {
+    isLoading: areReactionsLoading,
+    reactions: reactionDetails,
+    refetch
+  } = useFetchReactions({
+    handleFetchReactions,
+    reactionType: selectedReactionType,
+    shouldFetch: true,
+    sort: reactionDetailsSort
   });
-  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
-  const dialogIsOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      DialogAnchor,
+  if (extendedReactionListOpen) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        dialogManagerId: dialogManager?.id,
-        id: dialogId2,
-        placement: isMyMessage() ? "top-end" : "top-start",
-        referenceElement: buttonRef.current,
-        trapFocus: true,
-        updatePositionOnContentResize: true,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ReactionSelector$1, {})
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      QuickMessageActionsButton,
-      {
-        "aria-expanded": dialogIsOpen,
-        "aria-label": t("aria/Open Reaction Selector"),
-        className: "str-chat__message-reactions-button",
-        "data-testid": "message-reaction-action",
-        onClick: () => dialog?.toggle(),
-        ref: buttonRef,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ReactionIcon, { className: "str-chat__message-action-icon" })
+        className: "str-chat__message-reactions-detail",
+        "data-testid": "message-reactions-detail",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ReactionSelectorExtendedList2,
+          {
+            dialogId: MessageReactionsDetail.getDialogId({ messageId: message.id }),
+            handleReaction,
+            own_reactions
+          }
+        )
       }
-    )
-  ] });
-};
-const getErrorMessage$1 = (error, fallback) => error instanceof Error && error.message ? error.message : fallback;
-const getNotificationError$1 = (error) => {
-  if (error instanceof Error) return error;
-  if (typeof error === "string") return new Error(error);
-  if (error && typeof error === "object" && "message" in error) {
-    const message = error.message;
-    if (typeof message === "string") return new Error(message);
+    );
   }
-  return void 0;
-};
-const RemindMeSubmenuHeader = () => {
-  const { t } = WithAudioPlayback.useTranslationContext();
-  const { returnToParentMenu } = useContextMenuContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuBackButton, { onClick: returnToParentMenu, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconChevronLeft, {}),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("Remind Me") })
-  ] }) });
-};
-const RemindMeSubmenu = () => {
-  const { t } = WithAudioPlayback.useTranslationContext();
-  const { client } = WithAudioPlayback.useChatContext();
-  const { message } = useMessageContext();
-  const { closeMenu } = useContextMenuContext();
-  const { addNotification } = WithAudioPlayback.useNotificationApi();
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      "aria-label": t("aria/Remind Me Options"),
-      className: "str-chat__message-actions-box__submenu",
-      role: "listbox",
-      children: client.reminders.scheduledOffsetsMs.map((offsetMs) => /* @__PURE__ */ jsxRuntime.jsx(
-        ContextMenuButton,
-        {
-          className: "str-chat__message-actions-list-item-button",
-          onClick: async () => {
-            try {
-              await client.reminders.upsertReminder({
-                messageId: message.id,
-                remind_at: new Date((/* @__PURE__ */ new Date()).getTime() + offsetMs).toISOString()
-              });
-              addNotification({
-                context: {
-                  message
-                },
-                emitter: "MessageActions",
-                message: t("Reminder set"),
-                severity: "success",
-                type: "api:message:reminder:set:success"
-              });
-            } catch (error) {
-              addNotification({
-                context: {
-                  message
-                },
-                emitter: "MessageActions",
-                error: getNotificationError$1(error),
-                message: getErrorMessage$1(error, "Error setting reminder"),
-                severity: "error",
-                type: "api:message:reminder:set:failed"
-              });
-            } finally {
-              closeMenu();
-            }
-          },
-          children: t("duration/Remind Me", { milliseconds: offsetMs })
-        },
-        `reminder-offset-option--${offsetMs}`
-      ))
+      className: "str-chat__message-reactions-detail",
+      "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.jsxs(
+          "ul",
+          {
+            className: "str-chat__message-reactions-detail__reaction-type-list",
+            "data-testid": "reaction-type-list",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("li", { className: "str-chat__message-reactions-detail__reaction-type-list-item", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  "aria-label": t("Add reaction"),
+                  className: "str-chat__message-reactions-detail__reaction-type-list-item-button",
+                  "data-testid": "add-reaction-button",
+                  onClick: () => setExtendedReactionListOpen(true),
+                  children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "str-chat__message-reactions-detail__reaction-type-list-item-icon", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconEmojiAdd, {}) })
+                }
+              ) }),
+              reactions.map(
+                ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ jsxRuntime.jsx(
+                  "li",
+                  {
+                    className: "str-chat__message-reactions-detail__reaction-type-list-item",
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        "aria-pressed": reactionType === selectedReactionType,
+                        className: "str-chat__message-reactions-detail__reaction-type-list-item-button",
+                        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, {}) }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              className: "str-chat__message-reactions-detail__reaction-type-list-item-count",
+                              "data-testid": "reaction-type-count",
+                              children: reactionCount
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  },
+                  reactionType
+                )
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__user-list-container", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "str-chat__message-reactions-detail__user-list",
+            "data-testid": "all-reacting-users",
+            children: [
+              areReactionsLoading && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator2, {}),
+              !areReactionsLoading && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactionDetails.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",
+                  {
+                    className: "str-chat__message-reactions-detail__user-list-item",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Avatar$1,
+                        {
+                          className: "str-chat__avatar--with-border",
+                          "data-testid": "avatar",
+                          imageUrl: user?.image,
+                          size: "md",
+                          userName: user?.name || user?.id
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-reactions-detail__user-list-item-info", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: "str-chat__message-reactions-detail__user-list-item-username",
+                            "data-testid": "reaction-user-username",
+                            children: belongsToCurrentUser ? t("You") : user?.name || user?.id
+                          }
+                        ),
+                        belongsToCurrentUser && /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            className: "str-chat__message-reactions-detail__user-list-item-button",
+                            "data-testid": "remove-reaction-button",
+                            onClick: async (e) => {
+                              const reactionCountBeforeRemoval = reactionGroups?.[type]?.count ?? 0;
+                              await contextHandleReaction(type, e);
+                              if (selectedReactionType !== null && reactionCountBeforeRemoval <= 1) {
+                                onSelectedReactionTypeChange?.(null);
+                              } else {
+                                refetch();
+                              }
+                            },
+                            children: t("Tap to remove")
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "str-chat__message-reactions-detail__user-list-item-icon", children: !selectedReactionType && EmojiComponent && /* @__PURE__ */ jsxRuntime.jsx(EmojiComponent, {}) })
+                    ]
+                  },
+                  `${user?.id}-${type}`
+                );
+              }) })
+            ]
+          }
+        ) })
+      ]
     }
   );
 };
-const QuickMessageActionsButton = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  WithAudioPlayback.Button,
-  {
-    appearance: "ghost",
-    circular: true,
-    className: clsx("str-chat__message-actions-box-button", className),
-    size: "sm",
-    variant: "secondary",
-    ...props
+MessageReactionsDetail.displayName = "MessageReactionsDetail";
+MessageReactionsDetail.getDialogId = ({ messageId }) => `message-reactions-detail-${messageId}`;
+const defaultReactionsSort = (a, b) => {
+  if (a.firstReactionAt && b.firstReactionAt) {
+    return +a.firstReactionAt - +b.firstReactionAt;
   }
-);
-const DeleteMessageAlert = ({ onCancel, onDelete }) => {
-  const { t } = WithAudioPlayback.useTranslationContext();
-  const { close } = useModalContext();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Alert.Root,
-    {
-      className: "str-chat__delete-message-alert",
-      "data-testid": "message-delete-alert",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Alert.Header,
-          {
-            description: t("Are you sure you want to delete this message?"),
-            title: t("Delete message")
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(Alert.Actions, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            WithAudioPlayback.Button,
-            {
-              appearance: "outline",
-              className: "str-chat__delete-message-alert__delete-button",
-              "data-testid": "delete-message-alert-delete-button",
-              onClick: onDelete,
-              size: "md",
-              variant: "danger",
-              children: t("Delete message")
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            WithAudioPlayback.Button,
-            {
-              appearance: "outline",
-              className: "str-chat__delete-message-alert__cancel-button",
-              "data-testid": "delete-message-alert-cancel-button",
-              onClick: () => {
-                onCancel();
-                close();
-              },
-              size: "md",
-              variant: "secondary",
-              children: t("Cancel")
-            }
-          )
-        ] })
-      ]
+  return a.reactionType.localeCompare(b.reactionType, "en");
+};
+const useProcessReactions = (params) => {
+  const {
+    own_reactions: propOwnReactions,
+    reaction_groups: propReactionGroups,
+    reactions: propReactions,
+    sortReactions: propSortReactions
+  } = params;
+  const { message, sortReactions: contextSortReactions } = useMessageContext();
+  const { reactionOptions = defaultReactionOptions } = WithAudioPlayback.useComponentContext();
+  const sortReactions = propSortReactions ?? contextSortReactions ?? defaultReactionsSort;
+  const latestReactions = propReactions ?? message.latest_reactions;
+  const ownReactions = propOwnReactions ?? message?.own_reactions;
+  const reactionGroups = propReactionGroups ?? message?.reaction_groups ?? void 0;
+  const isOwnReaction = React.useCallback(
+    (reactionType) => ownReactions?.some((reaction) => reaction.type === reactionType) ?? false,
+    [ownReactions]
+  );
+  const getEmojiByReactionType = React.useCallback(
+    (reactionType) => {
+      if (Array.isArray(reactionOptions)) {
+        return reactionOptions.find(({ type }) => type === reactionType)?.Component ?? null;
+      }
+      return reactionOptions.quick[reactionType]?.Component ?? reactionOptions.extended?.[reactionType]?.Component ?? null;
+    },
+    [reactionOptions]
+  );
+  const isSupportedReaction = React.useCallback(
+    (reactionType) => {
+      if (Array.isArray(reactionOptions)) {
+        return reactionOptions.some(
+          (reactionOption) => reactionOption.type === reactionType
+        );
+      }
+      return typeof reactionOptions.quick[reactionType] !== "undefined" || typeof reactionOptions.extended?.[reactionType] !== "undefined";
+    },
+    [reactionOptions]
+  );
+  const uniqueReactionTypeCount = React.useMemo(() => {
+    if (!reactionGroups) {
+      return 0;
+    }
+    return Object.keys(reactionGroups).filter(
+      (reactionType) => isSupportedReaction(reactionType)
+    ).length;
+  }, [isSupportedReaction, reactionGroups]);
+  const getLatestReactedUserNames = React.useCallback(
+    (reactionType) => latestReactions?.flatMap((reaction) => {
+      if (reactionType && reactionType === reaction.type) {
+        const username = reaction.user?.name || reaction.user?.id;
+        return username ? [username] : [];
+      }
+      return [];
+    }) ?? [],
+    [latestReactions]
+  );
+  const existingReactions = React.useMemo(() => {
+    if (!reactionGroups) {
+      return [];
     }
+    const unsortedReactions = Object.entries(reactionGroups).flatMap(
+      ([reactionType, { count, first_reaction_at, last_reaction_at }]) => {
+        if (count === 0 || !isSupportedReaction(reactionType)) {
+          return [];
+        }
+        const latestReactedUserNames = getLatestReactedUserNames(reactionType);
+        return [
+          {
+            EmojiComponent: getEmojiByReactionType(reactionType),
+            firstReactionAt: first_reaction_at ? new Date(first_reaction_at) : null,
+            isOwnReaction: isOwnReaction(reactionType),
+            lastReactionAt: last_reaction_at ? new Date(last_reaction_at) : null,
+            latestReactedUserNames,
+            reactionCount: count,
+            reactionType,
+            unlistedReactedUserCount: count - latestReactedUserNames.length
+          }
+        ];
+      }
+    );
+    return unsortedReactions.sort(sortReactions);
+  }, [
+    getEmojiByReactionType,
+    getLatestReactedUserNames,
+    isOwnReaction,
+    isSupportedReaction,
+    reactionGroups,
+    sortReactions
+  ]);
+  const hasReactions = existingReactions.length > 0;
+  const totalReactionCount = React.useMemo(
+    () => Object.values(reactionGroups ?? {}).reduce((total, { count }) => total + count, 0),
+    [reactionGroups]
   );
+  return {
+    existingReactions,
+    hasReactions,
+    reactionGroups,
+    totalReactionCount,
+    uniqueReactionTypeCount
+  };
 };
-const msgActionsBoxButtonClassName = "str-chat__message-actions-list-item-button";
-const getErrorMessage = (error, fallback) => error instanceof Error && error.message ? error.message : fallback;
-const getNotificationError = (error) => {
-  if (error instanceof Error) return error;
-  if (typeof error === "string") return new Error(error);
-  if (error && typeof error === "object" && "message" in error) {
-    const message = error.message;
-    if (typeof message === "string") return new Error(message);
+const FragmentOrButton = ({
+  buttonIf: renderButton = false,
+  children,
+  ...props
+}) => {
+  if (renderButton) {
+    return /* @__PURE__ */ jsxRuntime.jsx("button", { ...props, children });
   }
-  return void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 };
-const DefaultMessageActionComponents = {
-  dropdown: {
-    ThreadReply() {
-      const { closeMenu } = useContextMenuContext();
-      const { handleOpenThread } = useMessageContext();
-      const { t } = WithAudioPlayback.useTranslationContext();
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ContextMenuButton,
-        {
-          "aria-label": t("aria/Open Thread"),
-          className: msgActionsBoxButtonClassName,
-          "data-testid": "thread-action",
-          Icon: WithAudioPlayback.IconThread,
-          onClick: (e) => {
-            handleOpenThread(e);
-            closeMenu();
-          },
-          children: t("Thread Reply")
-        }
-      );
-    },
-    Quote() {
-      const { closeMenu } = useContextMenuContext();
-      const { message } = useMessageContext();
-      const { t } = WithAudioPlayback.useTranslationContext();
-      const messageComposer = WithAudioPlayback.useMessageComposerController();
-      const handleQuote = () => {
-        messageComposer.setQuotedMessage(message);
-        const elements = message.parent_id ? document.querySelectorAll(".str-chat__thread .str-chat__textarea__textarea") : document.getElementsByClassName("str-chat__textarea__textarea");
-        const textarea = elements.item(0);
-        if (textarea instanceof HTMLTextAreaElement) {
-          textarea.focus();
-        }
-      };
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ContextMenuButton,
-        {
-          "aria-label": t("aria/Quote Message"),
-          className: msgActionsBoxButtonClassName,
-          Icon: WithAudioPlayback.IconQuote,
-          onClick: () => {
-            handleQuote();
-            closeMenu();
-          },
-          children: t("Quote Reply")
-        }
-      );
-    },
-    Pin() {
-      const { closeMenu } = useContextMenuContext();
-      const { handlePin, message } = useMessageContext();
-      const { addNotification } = WithAudioPlayback.useNotificationApi();
-      const { t } = WithAudioPlayback.useTranslationContext();
-      const isPinned = !!message.pinned;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ContextMenuButton,
-        {
-          "aria-label": isPinned ? t("aria/Unpin Message") : t("aria/Pin Message"),
-          className: msgActionsBoxButtonClassName,
-          Icon: isPinned ? WithAudioPlayback.IconUnpin : WithAudioPlayback.IconPin,
-          onClick: async (event) => {
-            try {
-              await handlePin(event);
-              addNotification({
-                context: {
-                  message
-                },
-                emitter: "MessageActions",
-                message: isPinned ? t("Message unpinned") : t("Message pinned"),
-                severity: "success",
-                type: isPinned ? "api:message:unpin:success" : "api:message:pin:success"
-              });
-            } catch (error) {
-              addNotification({
-                context: {
-                  message
-                },
-                emitter: "MessageActions",
-                error: getNotificationError(error),
-                message: getErrorMessage(
-                  error,
-                  isPinned ? t("Error removing message pin") : t("Error pinning message")
-                ),
-                severity: "error",
-                type: isPinned ? "api:message:unpin:failed" : "api:message:pin:failed"
-              });
-            }
-            closeMenu();
-          },
-          children: isPinned ? t("Unpin") : t("Pin")
-        }
-      );
-    },
-    CopyMessageText() {
-      const { closeMenu } = useContextMenuContext();
-      const { message } = useMessageContext();
-      const { t } = WithAudioPlayback.useTranslationContext();
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ContextMenuButton,
-        {
-          "aria-label": t("aria/Copy Message Text"),
-          className: msgActionsBoxButtonClassName,
-          Icon: WithAudioPlayback.IconCopy,
-          onClick: () => {
-            if (message.text) navigator.clipboard.writeText(message.text);
-            closeMenu();
-          },
-          children: t("Copy Message")
-        }
-      );
-    },
-    Resend() {
-      const { closeMenu } = useContextMenuContext();
-      const { handleRetry, message } = useMessageContext();
-      const { t } = WithAudioPlayback.useTranslationContext();
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ContextMenuButton,
-        {
-          "aria-label": t("aria/Resend Message"),
-          className: msgActionsBoxButtonClassName,
-          Icon: WithAudioPlayback.IconRetry,
-          onClick: () => {
-            handleRetry(message);
-            closeMenu();
-          },
-          children: t("Resend")
-        }
-      );
-    },
-    Edit() {
-      const messageComposer = WithAudioPlayback.useMessageComposerController();
-      const { message } = useMessageContext();
-      const { t } = WithAudioPlayback.useTranslationContext();
-      const { closeMenu } = useContextMenuContext();
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ContextMenuButton,
-        {
-          "aria-label": t("aria/Edit Message"),
-          className: msgActionsBoxButtonClassName,
-          Icon: WithAudioPlayback.IconEdit,
-          onClick: () => {
-            savePreEditSnapshot(messageComposer);
-            messageComposer.initState({ composition: message });
-            closeMenu();
-          },
-          children: t("Edit Message")
-        }
-      );
-    },
-    MarkUnread() {
-      const { closeMenu } = useContextMenuContext();
-      const { handleMarkUnread, message } = useMessageContext();
-      const { addNotification } = WithAudioPlayback.useNotificationApi();
-      const { t } = WithAudioPlayback.useTranslationContext();
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ContextMenuButton,
-        {
-          "aria-label": t("aria/Mark Message Unread"),
-          className: msgActionsBoxButtonClassName,
-          Icon: WithAudioPlayback.IconNotification,
-          onClick: async (event) => {
-            try {
-              await handleMarkUnread(event);
-              addNotification({
-                context: {
-                  message
-                },
-                emitter: "MessageActions",
-                message: t("Message marked as unread"),
-                severity: "success",
-                type: "api:message:markUnread:success"
-              });
-            } catch (error) {
-              addNotification({
-                context: {
-                  message
-                },
-                emitter: "MessageActions",
-                error: getNotificationError(error),
-                message: getErrorMessage(
-                  error,
-                  t(
-                    "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages."
+const UnMemoizedMessageReactions = (props) => {
+  const {
+    capLimit: { clustered: capLimitClustered = 5, segmented: capLimitSegmented = 4 } = {},
+    flipHorizontalPosition = false,
+    handleFetchReactions,
+    reactionDetailsSort,
+    verticalPosition = "top",
+    visualStyle = "clustered",
+    ...rest
+  } = props;
+  const {
+    existingReactions,
+    hasReactions,
+    reactionGroups,
+    totalReactionCount,
+    uniqueReactionTypeCount
+  } = useProcessReactions(rest);
+  const [selectedReactionType, setSelectedReactionType] = React.useState(
+    null
+  );
+  const { t } = WithAudioPlayback.useTranslationContext("MessageReactions");
+  const { MessageReactionsDetail: MessageReactionsDetail$1 = MessageReactionsDetail } = WithAudioPlayback.useComponentContext();
+  const { isMyMessage, message } = useMessageContext();
+  const divRef = React.useRef(null);
+  const dialogId2 = MessageReactionsDetail.getDialogId({
+    messageId: 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;
+    }
+    setSelectedReactionType(reactionType);
+    dialog.open();
+  };
+  const cappedExistingReactions = React.useMemo(() => {
+    if (visualStyle === "segmented" && verticalPosition !== "top") return null;
+    const capLimit = visualStyle === "segmented" ? capLimitSegmented : capLimitClustered;
+    const sliced = existingReactions.slice(0, capLimit);
+    return {
+      /**
+       * Accumulated reaction count of capped reaction types, first four in case of
+       * segmented(top) and first five in case of clustered(top/bottom) variations.
+       */
+      reactionCountToDisplay: sliced.reduce(
+        (accumulatedCount, { reactionCount }) => accumulatedCount + reactionCount,
+        0
+      ),
+      reactionsToDisplay: sliced
+    };
+  }, [
+    capLimitClustered,
+    capLimitSegmented,
+    existingReactions,
+    verticalPosition,
+    visualStyle
+  ]);
+  if (!hasReactions) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-label": t("aria/Reaction list"),
+        className: clsx("str-chat__message-reactions", {
+          [`str-chat__message-reactions--flipped-horizontally`]: flipHorizontalPosition,
+          [`str-chat__message-reactions--${verticalPosition}`]: typeof verticalPosition === "string",
+          [`str-chat__message-reactions--${visualStyle}`]: typeof visualStyle === "string"
+        }),
+        ref: divRef,
+        role: "figure",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          FragmentOrButton,
+          {
+            "aria-expanded": isDialogOpen,
+            "aria-pressed": isDialogOpen,
+            buttonIf: visualStyle === "clustered",
+            className: "str-chat__message-reactions__list-button",
+            "data-testid": "message-reactions-list-button",
+            onClick: () => handleReactionButtonClick(null),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "str-chat__message-reactions__list", children: [
+                (cappedExistingReactions?.reactionsToDisplay ?? existingReactions).map(
+                  ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ jsxRuntime.jsx(
+                    "li",
+                    {
+                      className: "str-chat__message-reactions__list-item",
+                      "data-testid": "message-reactions-list-item",
+                      children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        FragmentOrButton,
+                        {
+                          buttonIf: visualStyle === "segmented",
+                          className: "str-chat__message-reactions__list-item-button",
+                          onClick: () => handleReactionButtonClick(reactionType),
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                className: "str-chat__message-reactions__list-item-icon",
+                                "data-testid": "message-reactions-list-item-icon",
+                                children: /* @__PURE__ */ jsxRuntime.jsx(EmojiComponent, {})
+                              }
+                            ),
+                            visualStyle === "segmented" && reactionCount > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                className: "str-chat__message-reactions__list-item-count",
+                                "data-testclass": "message-reactions-item-count",
+                                children: reactionCount
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    },
+                    reactionType
                   )
                 ),
-                severity: "error",
-                type: "api:message:markUnread:failed"
-              });
-            }
-            closeMenu();
-          },
-          children: t("Mark as unread")
-        }
-      );
+                uniqueReactionTypeCount > 4 && cappedExistingReactions && visualStyle === "segmented" && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "str-chat__message-reactions__list-item str-chat__message-reactions__list-item--more", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    className: "str-chat__message-reactions__list-item-button",
+                    onClick: () => handleReactionButtonClick(null),
+                    children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "str-chat__message-reactions__overflow-count", children: [
+                      "+",
+                      totalReactionCount - cappedExistingReactions.reactionCountToDisplay
+                    ] })
+                  }
+                ) })
+              ] }),
+              visualStyle === "clustered" && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "str-chat__message-reactions__total-count",
+                  "data-testid": "message-reactions-total-count",
+                  children: totalReactionCount
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DialogAnchor,
+      {
+        dialogManagerId: dialogManager?.id,
+        id: dialogId2,
+        offset: 8,
+        placement: isMyMessage() ? "bottom-end" : "bottom-start",
+        referenceElement: divRef.current,
+        trapFocus: true,
+        updatePositionOnContentResize: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          MessageReactionsDetail$1,
+          {
+            handleFetchReactions,
+            onSelectedReactionTypeChange: setSelectedReactionType,
+            reactionDetailsSort,
+            reactionGroups,
+            reactions: existingReactions,
+            selectedReactionType,
+            totalReactionCount
+          }
+        )
+      }
+    )
+  ] });
+};
+const MessageReactions = React.memo(
+  UnMemoizedMessageReactions
+);
+const getImageDimensions = (source) => new Promise((resolve, reject) => {
+  const image = new Image();
+  image.addEventListener(
+    "load",
+    () => {
+      resolve([image.width, image.height]);
     },
-    RemindMe() {
-      const { closeMenu, openSubmenu } = useContextMenuContext();
-      const { client } = WithAudioPlayback.useChatContext();
-      const { addNotification } = WithAudioPlayback.useNotificationApi();
-      const { t } = WithAudioPlayback.useTranslationContext();
-      const { message } = useMessageContext();
-      const reminder = useMessageReminder(message.id);
-      const messageAlreadyBookmarked = reminder && !reminder?.remindAt;
-      if (messageAlreadyBookmarked) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ContextMenuButton,
-        {
-          "aria-label": reminder ? t("aria/Remind Me Message") : t("aria/Remove Reminder"),
-          className: msgActionsBoxButtonClassName,
-          hasSubMenu: !reminder,
-          Icon: reminder ? WithAudioPlayback.IconBellOff : WithAudioPlayback.IconBell,
-          onClick: async () => {
-            if (reminder) {
-              try {
-                await client.reminders.deleteReminder(reminder.id);
-                addNotification({
-                  context: {
-                    message
-                  },
-                  emitter: "MessageActions",
-                  message: t("Remove reminder"),
-                  severity: "success",
-                  type: "api:message:reminder:delete:success"
-                });
-              } catch (error) {
-                addNotification({
-                  context: {
-                    message
-                  },
-                  emitter: "MessageActions",
-                  error: getNotificationError(error),
-                  message: getErrorMessage(error, "Error removing reminder"),
-                  severity: "error",
-                  type: "api:message:reminder:delete:failed"
-                });
-              } finally {
-                closeMenu();
-              }
-            } else {
-              openSubmenu({
-                Header: RemindMeSubmenuHeader,
-                Submenu: RemindMeSubmenu
-              });
-            }
-          },
-          children: reminder ? t("Remove reminder") : t("Remind me")
-        }
-      );
-    },
-    SaveForLater() {
-      const { closeMenu } = useContextMenuContext();
-      const { client } = WithAudioPlayback.useChatContext();
-      const { addNotification } = WithAudioPlayback.useNotificationApi();
-      const { message } = useMessageContext();
-      const { t } = WithAudioPlayback.useTranslationContext();
-      const reminder = useMessageReminder(message.id);
-      const messageAlreadyHasReminderScheduled = Boolean(reminder && reminder?.remindAt);
-      if (messageAlreadyHasReminderScheduled) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx(
+    { once: true }
+  );
+  image.addEventListener("error", () => reject(`Couldn't load image from ${source}`), {
+    once: true
+  });
+  image.src = source;
+});
+const SpriteImage = ({
+  columns,
+  fallback,
+  height,
+  position,
+  rows,
+  spriteUrl,
+  style,
+  width
+}) => {
+  const [[spriteWidth, spriteHeight], setSpriteDimensions] = React.useState([0, 0]);
+  React.useEffect(() => {
+    getImageDimensions(spriteUrl).then(setSpriteDimensions).catch(console.error);
+  }, [spriteUrl]);
+  const [x, y] = position;
+  if (!spriteHeight || !spriteWidth) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-testid": "sprite-image",
+      style: {
+        ...style,
+        "--str-chat__sprite-image-resize-ratio": "var(--str-chat__sprite-image-resize-ratio-x, var(--str-chat__sprite-image-resize-ratio-y, 1))",
+        "--str-chat__sprite-image-resize-ratio-x": "calc(var(--str-chat__sprite-image-width) / var(--str-chat__sprite-item-width))",
+        "--str-chat__sprite-image-resize-ratio-y": "calc(var(--str-chat__sprite-image-height) / var(--str-chat__sprite-item-height))",
+        "--str-chat__sprite-item-height": `${spriteHeight / rows}`,
+        "--str-chat__sprite-item-width": `${spriteWidth / columns}`,
+        ...Number.isFinite(height) ? { "--str-chat__sprite-image-height": `${height}px` } : {},
+        ...Number.isFinite(width) ? { "--str-chat__sprite-image-width": `${width}px` } : {},
+        backgroundImage: `url('${spriteUrl}')`,
+        backgroundPosition: `${x * (100 / (columns - 1))}% ${y * (100 / (rows - 1))}%`,
+        backgroundSize: `${columns * 100}% ${rows * 100}%`,
+        height: "var(--str-chat__sprite-image-height, calc(var(--str-chat__sprite-item-height) * var(--str-chat__sprite-image-resize-ratio)))",
+        width: "var(--str-chat__sprite-image-width, calc(var(--str-chat__sprite-item-width) * var(--str-chat__sprite-image-resize-ratio)))"
+      }
+    }
+  );
+};
+const ReactionSelectorWithButton = ({
+  ReactionIcon
+}) => {
+  const { t } = WithAudioPlayback.useTranslationContext("ReactionSelectorWithButton");
+  const { isMyMessage, message, threadList } = useMessageContext();
+  const { ReactionSelector: ReactionSelector$1 = ReactionSelector } = WithAudioPlayback.useComponentContext();
+  const buttonRef = React.useRef(null);
+  const dialogId2 = ReactionSelector.getDialogId({
+    messageId: message.id,
+    threadList
+  });
+  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
+  const dialogIsOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DialogAnchor,
+      {
+        dialogManagerId: dialogManager?.id,
+        id: dialogId2,
+        placement: isMyMessage() ? "top-end" : "top-start",
+        referenceElement: buttonRef.current,
+        trapFocus: true,
+        updatePositionOnContentResize: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ReactionSelector$1, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      QuickMessageActionsButton,
+      {
+        "aria-expanded": dialogIsOpen,
+        "aria-label": t("aria/Open Reaction Selector"),
+        className: "str-chat__message-reactions-button",
+        "data-testid": "message-reaction-action",
+        onClick: () => dialog?.toggle(),
+        ref: buttonRef,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ReactionIcon, { className: "str-chat__message-action-icon" })
+      }
+    )
+  ] });
+};
+const getErrorMessage$1 = (error, fallback) => error instanceof Error && error.message ? error.message : fallback;
+const getNotificationError$1 = (error) => {
+  if (error instanceof Error) return error;
+  if (typeof error === "string") return new Error(error);
+  if (error && typeof error === "object" && "message" in error) {
+    const message = error.message;
+    if (typeof message === "string") return new Error(message);
+  }
+  return void 0;
+};
+const RemindMeSubmenuHeader = () => {
+  const { t } = WithAudioPlayback.useTranslationContext();
+  const { returnToParentMenu } = useContextMenuContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuBackButton, { onClick: returnToParentMenu, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconChevronLeft, {}),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("Remind Me") })
+  ] }) });
+};
+const RemindMeSubmenu = () => {
+  const { t } = WithAudioPlayback.useTranslationContext();
+  const { client } = WithAudioPlayback.useChatContext();
+  const { message } = useMessageContext();
+  const { closeMenu } = useContextMenuContext();
+  const { addNotification } = WithAudioPlayback.useNotificationApi();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-label": t("aria/Remind Me Options"),
+      className: "str-chat__message-actions-box__submenu",
+      role: "listbox",
+      children: client.reminders.scheduledOffsetsMs.map((offsetMs) => /* @__PURE__ */ jsxRuntime.jsx(
         ContextMenuButton,
         {
-          "aria-label": reminder ? t("aria/Remove Save For Later") : t("aria/Bookmark Message"),
-          className: msgActionsBoxButtonClassName,
-          Icon: reminder ? WithAudioPlayback.IconBookmarkRemove : WithAudioPlayback.IconBookmark,
+          className: "str-chat__message-actions-list-item-button",
           onClick: async () => {
             try {
-              if (reminder) {
-                await client.reminders.deleteReminder(reminder.id);
-                addNotification({
-                  context: {
-                    message
-                  },
-                  emitter: "MessageActions",
-                  message: t("Remove save for later"),
-                  severity: "success",
-                  type: "api:message:saveForLater:delete:success"
-                });
-              } else {
-                await client.reminders.createReminder({ messageId: message.id });
-                addNotification({
-                  context: {
-                    message
-                  },
-                  emitter: "MessageActions",
-                  message: t("Saved for later"),
-                  severity: "success",
-                  type: "api:message:saveForLater:create:success"
-                });
-              }
-            } catch (error) {
-              addNotification({
-                context: {
-                  message
-                },
-                emitter: "MessageActions",
-                error: getNotificationError(error),
-                message: getErrorMessage(
-                  error,
-                  reminder ? "Error removing message from saved for later" : "Error saving message for later"
-                ),
-                severity: "error",
-                type: reminder ? "api:message:saveForLater:delete:failed" : "api:message:saveForLater:create:failed"
+              await client.reminders.upsertReminder({
+                messageId: message.id,
+                remind_at: new Date((/* @__PURE__ */ new Date()).getTime() + offsetMs).toISOString()
               });
-            } finally {
-              closeMenu();
-            }
-          },
-          children: reminder ? t("Remove save for later") : t("Save for later")
-        }
-      );
-    },
-    Flag() {
-      const { closeMenu } = useContextMenuContext();
-      const { handleFlag, message } = useMessageContext();
-      const { addNotification } = WithAudioPlayback.useNotificationApi();
-      const { t } = WithAudioPlayback.useTranslationContext();
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ContextMenuButton,
-        {
-          "aria-label": t("aria/Flag Message"),
-          className: msgActionsBoxButtonClassName,
-          Icon: WithAudioPlayback.IconFlag,
-          onClick: async (event) => {
-            try {
-              await handleFlag(event);
               addNotification({
                 context: {
                   message
                 },
                 emitter: "MessageActions",
-                message: t("Message has been successfully flagged"),
+                message: t("Reminder set"),
                 severity: "success",
-                type: "api:message:flag:success"
+                type: "api:message:reminder:set:success"
               });
             } catch (error) {
               addNotification({
@@ -20312,46 +20580,218 @@ const DefaultMessageActionComponents = {
                   message
                 },
                 emitter: "MessageActions",
-                error: getNotificationError(error),
-                message: getErrorMessage(error, t("Error adding flag")),
+                error: getNotificationError$1(error),
+                message: getErrorMessage$1(error, "Error setting reminder"),
                 severity: "error",
-                type: "api:message:flag:failed"
+                type: "api:message:reminder:set:failed"
               });
+            } finally {
+              closeMenu();
             }
-            closeMenu();
           },
-          children: t("Flag")
-        }
-      );
-    },
-    Mute() {
-      const { closeMenu } = useContextMenuContext();
-      const { handleMute, message } = useMessageContext();
-      const { addNotification } = WithAudioPlayback.useNotificationApi();
-      const { mutes } = WithAudioPlayback.useChatContext();
-      const { t } = WithAudioPlayback.useTranslationContext();
-      const isMuted = WithAudioPlayback.isUserMuted(message, mutes);
+          children: t("duration/Remind Me", { milliseconds: offsetMs })
+        },
+        `reminder-offset-option--${offsetMs}`
+      ))
+    }
+  );
+};
+const QuickMessageActionsButton = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  WithAudioPlayback.Button,
+  {
+    appearance: "ghost",
+    circular: true,
+    className: clsx("str-chat__message-actions-box-button", className),
+    size: "sm",
+    variant: "secondary",
+    ...props
+  }
+);
+const DeleteMessageAlert = ({ onCancel, onDelete }) => {
+  const { t } = WithAudioPlayback.useTranslationContext();
+  const { close } = useModalContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Alert.Root,
+    {
+      className: "str-chat__delete-message-alert",
+      "data-testid": "message-delete-alert",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Alert.Header,
+          {
+            description: t("Are you sure you want to delete this message?"),
+            title: t("Delete message")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(Alert.Actions, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            WithAudioPlayback.Button,
+            {
+              appearance: "outline",
+              className: "str-chat__delete-message-alert__delete-button",
+              "data-testid": "delete-message-alert-delete-button",
+              onClick: onDelete,
+              size: "md",
+              variant: "danger",
+              children: t("Delete message")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            WithAudioPlayback.Button,
+            {
+              appearance: "outline",
+              className: "str-chat__delete-message-alert__cancel-button",
+              "data-testid": "delete-message-alert-cancel-button",
+              onClick: () => {
+                onCancel();
+                close();
+              },
+              size: "md",
+              variant: "secondary",
+              children: t("Cancel")
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const msgActionsBoxButtonClassName = "str-chat__message-actions-list-item-button";
+const getErrorMessage = (error, fallback) => error instanceof Error && error.message ? error.message : fallback;
+const getNotificationError = (error) => {
+  if (error instanceof Error) return error;
+  if (typeof error === "string") return new Error(error);
+  if (error && typeof error === "object" && "message" in error) {
+    const message = error.message;
+    if (typeof message === "string") return new Error(message);
+  }
+  return void 0;
+};
+const DefaultMessageActionComponents = {
+  dropdown: {
+    React() {
+      const { ReactionSelector: ReactionSelector$1 = ReactionSelector } = WithAudioPlayback.useComponentContext();
+      const { anchorReferenceElement } = useContextMenuContext();
+      const { isMyMessage, message, threadList } = useMessageContext();
+      const { t } = WithAudioPlayback.useTranslationContext();
+      const [referenceElement, setReferenceElement] = React.useState(null);
+      const dialogId2 = `${ReactionSelector.getDialogId({
+        messageId: message.id,
+        threadList
+      })}-dropdown`;
+      const { dialog, dialogManager } = useDialogOnNearestManager({
+        id: dialogId2
+      });
+      const dialogIsOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DialogAnchor,
+          {
+            dialogManagerId: dialogManager?.id,
+            id: dialogId2,
+            offset: 8,
+            placement: isMyMessage() ? "top-end" : "top-start",
+            referenceElement,
+            trapFocus: true,
+            updatePositionOnContentResize: true,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ReactionSelector$1, { dialogId: dialogId2 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ContextMenuButton,
+          {
+            "aria-expanded": dialogIsOpen,
+            "aria-label": t("aria/Open Reaction Selector"),
+            className: clsx(
+              msgActionsBoxButtonClassName,
+              "str-chat__message-actions-list-item-button--react"
+            ),
+            "data-testid": "dropdown-react-action",
+            Icon: WithAudioPlayback.IconEmoji,
+            onClick: (event) => {
+              if (dialogIsOpen) {
+                dialog.close();
+                return;
+              }
+              setReferenceElement(
+                anchorReferenceElement instanceof HTMLElement ? anchorReferenceElement : event.currentTarget
+              );
+              dialog.open();
+            },
+            children: t("Add reaction")
+          }
+        )
+      ] });
+    },
+    ThreadReply() {
+      const { closeMenu } = useContextMenuContext();
+      const { handleOpenThread } = useMessageContext();
+      const { t } = WithAudioPlayback.useTranslationContext();
       return /* @__PURE__ */ jsxRuntime.jsx(
         ContextMenuButton,
         {
-          "aria-label": isMuted ? t("aria/Unmute User") : t("aria/Mute User"),
+          "aria-label": t("aria/Open Thread"),
           className: msgActionsBoxButtonClassName,
-          Icon: isMuted ? WithAudioPlayback.IconAudio : WithAudioPlayback.IconMute,
+          "data-testid": "thread-action",
+          Icon: WithAudioPlayback.IconThread,
+          onClick: (e) => {
+            handleOpenThread(e);
+            closeMenu();
+          },
+          children: t("Thread Reply")
+        }
+      );
+    },
+    Quote() {
+      const { closeMenu } = useContextMenuContext();
+      const { message } = useMessageContext();
+      const { t } = WithAudioPlayback.useTranslationContext();
+      const messageComposer = WithAudioPlayback.useMessageComposerController();
+      const handleQuote = () => {
+        messageComposer.setQuotedMessage(message);
+        const elements = message.parent_id ? document.querySelectorAll(".str-chat__thread .str-chat__textarea__textarea") : document.getElementsByClassName("str-chat__textarea__textarea");
+        const textarea = elements.item(0);
+        if (textarea instanceof HTMLTextAreaElement) {
+          textarea.focus();
+        }
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ContextMenuButton,
+        {
+          "aria-label": t("aria/Quote Message"),
+          className: msgActionsBoxButtonClassName,
+          Icon: WithAudioPlayback.IconQuote,
+          onClick: () => {
+            handleQuote();
+            closeMenu();
+          },
+          children: t("Quote Reply")
+        }
+      );
+    },
+    Pin() {
+      const { closeMenu } = useContextMenuContext();
+      const { handlePin, message } = useMessageContext();
+      const { addNotification } = WithAudioPlayback.useNotificationApi();
+      const { t } = WithAudioPlayback.useTranslationContext();
+      const isPinned = !!message.pinned;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ContextMenuButton,
+        {
+          "aria-label": isPinned ? t("aria/Unpin Message") : t("aria/Pin Message"),
+          className: msgActionsBoxButtonClassName,
+          Icon: isPinned ? WithAudioPlayback.IconUnpin : WithAudioPlayback.IconPin,
           onClick: async (event) => {
             try {
-              await handleMute(event);
+              await handlePin(event);
               addNotification({
                 context: {
                   message
                 },
                 emitter: "MessageActions",
-                message: isMuted ? t("{{ user }} has been unmuted", {
-                  user: message.user?.name || message.user?.id
-                }) : t("{{ user }} has been muted", {
-                  user: message.user?.name || message.user?.id
-                }),
+                message: isPinned ? t("Message unpinned") : t("Message pinned"),
                 severity: "success",
-                type: isMuted ? "api:user:unmute:success" : "api:user:mute:success"
+                type: isPinned ? "api:message:unpin:success" : "api:message:pin:success"
               });
             } catch (error) {
               addNotification({
@@ -20362,818 +20802,553 @@ const DefaultMessageActionComponents = {
                 error: getNotificationError(error),
                 message: getErrorMessage(
                   error,
-                  isMuted ? t("Error unmuting a user ...") : t("Error muting a user ...")
+                  isPinned ? t("Error removing message pin") : t("Error pinning message")
                 ),
                 severity: "error",
-                type: isMuted ? "api:user:unmute:failed" : "api:user:mute:failed"
+                type: isPinned ? "api:message:unpin:failed" : "api:message:pin:failed"
               });
             }
             closeMenu();
           },
-          children: isMuted ? t("Unmute") : t("Mute")
+          children: isPinned ? t("Unpin") : t("Pin")
         }
       );
     },
-    Delete() {
-      const { closeMenu } = useContextMenuContext();
-      const { addNotification } = WithAudioPlayback.useNotificationApi();
-      const { Modal = GlobalModal } = WithAudioPlayback.useComponentContext();
-      const { handleDelete, message } = useMessageContext();
-      const { t } = WithAudioPlayback.useTranslationContext();
-      const [openModal, setOpenModal] = React.useState(false);
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ContextMenuButton,
-          {
-            "aria-label": t("aria/Delete Message"),
-            className: msgActionsBoxButtonClassName,
-            Icon: WithAudioPlayback.IconDelete,
-            onClick: () => {
-              setOpenModal(true);
-            },
-            variant: "destructive",
-            children: t("Delete message")
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(Modal, { open: openModal, children: /* @__PURE__ */ jsxRuntime.jsx(
-          DeleteMessageAlert,
-          {
-            onCancel: () => {
-              setOpenModal(false);
-              closeMenu();
-            },
-            onDelete: async () => {
-              try {
-                await handleDelete();
-                addNotification({
-                  context: {
-                    message
-                  },
-                  emitter: "MessageActions",
-                  message: t("Message deleted"),
-                  severity: "success",
-                  type: "api:message:delete:success"
-                });
-              } catch (error) {
-                addNotification({
-                  context: {
-                    message
-                  },
-                  emitter: "MessageActions",
-                  error: getNotificationError(error),
-                  message: getErrorMessage(error, t("Error deleting message")),
-                  severity: "error",
-                  type: "api:message:delete:failed"
-                });
-              } finally {
-                setOpenModal(false);
-                closeMenu();
-              }
-            }
-          }
-        ) })
-      ] });
-    },
-    BlockUser() {
+    CopyMessageText() {
       const { closeMenu } = useContextMenuContext();
-      const { client } = WithAudioPlayback.useChatContext();
       const { message } = useMessageContext();
       const { t } = WithAudioPlayback.useTranslationContext();
-      const isBlocked = !message.user?.id || new Set(client.blockedUsers.getLatestValue().userIds).has(message.user?.id);
       return /* @__PURE__ */ jsxRuntime.jsx(
         ContextMenuButton,
         {
-          "aria-label": isBlocked ? t("aria/Unblock User") : t("aria/Block User"),
-          className: clsx(msgActionsBoxButtonClassName),
-          Icon: isBlocked ? WithAudioPlayback.IconUserCheck : WithAudioPlayback.IconNoSign,
+          "aria-label": t("aria/Copy Message Text"),
+          className: msgActionsBoxButtonClassName,
+          Icon: WithAudioPlayback.IconCopy,
           onClick: () => {
-            const targetId = message.user?.id;
-            if (targetId) {
-              if (isBlocked) client.unBlockUser(targetId);
-              else client.blockUser(targetId);
-            }
+            if (message.text) navigator.clipboard.writeText(message.text);
             closeMenu();
           },
-          children: isBlocked ? t("Unblock User") : t("Block User")
+          children: t("Copy Message")
         }
       );
-    }
-  },
-  quick: {
-    // eslint-disable-next-line react/display-name
-    DropdownToggle: React.forwardRef((_, ref) => {
+    },
+    Resend() {
+      const { closeMenu } = useContextMenuContext();
+      const { handleRetry, message } = useMessageContext();
       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,
+        ContextMenuButton,
         {
-          "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",
+          "aria-label": t("aria/Resend Message"),
+          className: msgActionsBoxButtonClassName,
+          Icon: WithAudioPlayback.IconRetry,
           onClick: () => {
-            dialog?.toggle();
+            handleRetry(message);
+            closeMenu();
           },
-          ref,
-          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMore, { className: "str-chat__message-action-icon" })
+          children: t("Resend")
         }
       );
-    }),
-    React() {
-      return /* @__PURE__ */ jsxRuntime.jsx(ReactionSelectorWithButton, { ReactionIcon: WithAudioPlayback.IconEmoji });
     },
-    Reply() {
-      const { handleOpenThread } = useMessageContext();
+    Edit() {
+      const messageComposer = WithAudioPlayback.useMessageComposerController();
+      const { message } = useMessageContext();
       const { t } = WithAudioPlayback.useTranslationContext();
+      const { closeMenu } = useContextMenuContext();
       return /* @__PURE__ */ jsxRuntime.jsx(
-        QuickMessageActionsButton,
+        ContextMenuButton,
         {
-          "aria-label": t("aria/Open Thread"),
-          className: "str-chat__message-reply-in-thread-button",
-          "data-testid": "thread-action",
-          onClick: handleOpenThread,
-          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconReply, { className: "str-chat__message-action-icon" })
+          "aria-label": t("aria/Edit Message"),
+          className: msgActionsBoxButtonClassName,
+          Icon: WithAudioPlayback.IconEdit,
+          onClick: () => {
+            savePreEditSnapshot(messageComposer);
+            messageComposer.initState({ composition: message });
+            closeMenu();
+          },
+          children: t("Edit Message")
         }
       );
-    }
-  }
-};
-const defaultMessageActionSet = [
-  {
-    Component: DefaultMessageActionComponents.quick.DropdownToggle,
-    placement: "quick-dropdown-toggle"
-  },
-  {
-    Component: DefaultMessageActionComponents.quick.Reply,
-    placement: "quick",
-    type: "reply"
-  },
-  {
-    Component: DefaultMessageActionComponents.quick.React,
-    placement: "quick",
-    type: "react"
-  },
-  {
-    Component: DefaultMessageActionComponents.dropdown.ThreadReply,
-    placement: "dropdown",
-    type: "reply"
-  },
-  {
-    Component: DefaultMessageActionComponents.dropdown.Quote,
-    placement: "dropdown",
-    type: "quote"
-  },
-  {
-    Component: DefaultMessageActionComponents.dropdown.Pin,
-    placement: "dropdown",
-    type: "pin"
-  },
-  {
-    Component: DefaultMessageActionComponents.dropdown.CopyMessageText,
-    placement: "dropdown",
-    type: "copyMessageText"
-  },
-  {
-    Component: DefaultMessageActionComponents.dropdown.Resend,
-    placement: "dropdown",
-    type: "resendMessage"
-  },
-  {
-    Component: DefaultMessageActionComponents.dropdown.Edit,
-    placement: "dropdown",
-    type: "edit"
-  },
-  {
-    Component: DefaultMessageActionComponents.dropdown.MarkUnread,
-    placement: "dropdown",
-    type: "markUnread"
-  },
-  {
-    Component: DefaultMessageActionComponents.dropdown.RemindMe,
-    placement: "dropdown",
-    type: "remindMe"
-  },
-  {
-    Component: DefaultMessageActionComponents.dropdown.SaveForLater,
-    placement: "dropdown",
-    type: "saveForLater"
-  },
-  {
-    Component: DefaultMessageActionComponents.dropdown.Flag,
-    placement: "dropdown",
-    type: "flag"
-  },
-  {
-    Component: DefaultMessageActionComponents.dropdown.Mute,
-    placement: "dropdown",
-    type: "mute"
-  },
-  {
-    Component: DefaultMessageActionComponents.dropdown.Delete,
-    placement: "dropdown",
-    type: "delete"
-  },
-  {
-    Component: DefaultMessageActionComponents.dropdown.BlockUser,
-    placement: "dropdown",
-    type: "blockUser"
-  }
-];
-function useFetchReactions(options) {
-  const { addNotification } = WithAudioPlayback.useNotificationApi();
-  const { handleFetchReactions: contextHandleFetchReactions } = useMessageContext();
-  const { t } = WithAudioPlayback.useTranslationContext("useFetchReactions");
-  const [reactions, setReactions] = React.useState([]);
-  const {
-    handleFetchReactions: propHandleFetchReactions,
-    reactionType,
-    shouldFetch,
-    sort
-  } = options;
-  const [isLoading, setIsLoading] = React.useState(shouldFetch);
-  const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;
-  const [refetchNonce, setRefetchNonce] = React.useState(null);
-  React.useEffect(() => {
-    if (!shouldFetch) {
-      return;
-    }
-    let cancel = false;
-    (async () => {
-      try {
-        setIsLoading(true);
-        const reactions2 = await handleFetchReactions(reactionType ?? void 0, sort);
-        if (!cancel) {
-          setReactions(reactions2);
-        }
-      } catch (e) {
-        if (!cancel) {
-          setReactions([]);
-          addNotification({
-            emitter: "Reactions",
-            error: e instanceof Error ? e : void 0,
-            message: t("Error fetching reactions"),
-            severity: "error",
-            type: "api:message:reactions:fetch:failed"
-          });
-        }
-      } finally {
-        if (!cancel) {
-          setIsLoading(false);
+    },
+    MarkUnread() {
+      const { closeMenu } = useContextMenuContext();
+      const { handleMarkUnread, message } = useMessageContext();
+      const { addNotification } = WithAudioPlayback.useNotificationApi();
+      const { t } = WithAudioPlayback.useTranslationContext();
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ContextMenuButton,
+        {
+          "aria-label": t("aria/Mark Message Unread"),
+          className: msgActionsBoxButtonClassName,
+          Icon: WithAudioPlayback.IconNotification,
+          onClick: async (event) => {
+            try {
+              await handleMarkUnread(event);
+              addNotification({
+                context: {
+                  message
+                },
+                emitter: "MessageActions",
+                message: t("Message marked as unread"),
+                severity: "success",
+                type: "api:message:markUnread:success"
+              });
+            } catch (error) {
+              addNotification({
+                context: {
+                  message
+                },
+                emitter: "MessageActions",
+                error: getNotificationError(error),
+                message: getErrorMessage(
+                  error,
+                  t(
+                    "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages."
+                  )
+                ),
+                severity: "error",
+                type: "api:message:markUnread:failed"
+              });
+            }
+            closeMenu();
+          },
+          children: t("Mark as unread")
         }
-      }
-    })();
-    return () => {
-      cancel = true;
-    };
-  }, [
-    addNotification,
-    handleFetchReactions,
-    reactionType,
-    refetchNonce,
-    shouldFetch,
-    sort,
-    t
-  ]);
-  const refetch = React.useCallback(() => {
-    setRefetchNonce(Math.random());
-  }, []);
-  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 });
-};
-const MessageReactionsDetail = ({
-  handleFetchReactions,
-  handleReaction,
-  onSelectedReactionTypeChange,
-  own_reactions,
-  reactionDetailsSort: propReactionDetailsSort,
-  reactionGroups,
-  reactions,
-  selectedReactionType,
-  totalReactionCount
-}) => {
-  const [extendedReactionListOpen, setExtendedReactionListOpen] = React.useState(false);
-  const { client } = WithAudioPlayback.useChatContext();
-  const {
-    Avatar: Avatar$1 = Avatar,
-    LoadingIndicator: LoadingIndicator2 = MessageReactionsDetailLoadingIndicator,
-    reactionOptions = defaultReactionOptions,
-    ReactionSelectorExtendedList: ReactionSelectorExtendedList2 = ReactionSelector.ExtendedList
-  } = WithAudioPlayback.useComponentContext(MessageReactionsDetail.name);
-  const { t } = WithAudioPlayback.useTranslationContext();
-  const {
-    handleReaction: contextHandleReaction,
-    message,
-    reactionDetailsSort: contextReactionDetailsSort
-  } = useMessageContext(MessageReactionsDetail.name);
-  const reactionDetailsSort = propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
-  const {
-    isLoading: areReactionsLoading,
-    reactions: reactionDetails,
-    refetch
-  } = useFetchReactions({
-    handleFetchReactions,
-    reactionType: selectedReactionType,
-    shouldFetch: true,
-    sort: reactionDetailsSort
-  });
-  if (extendedReactionListOpen) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "str-chat__message-reactions-detail",
-        "data-testid": "message-reactions-detail",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          ReactionSelectorExtendedList2,
-          {
-            dialogId: MessageReactionsDetail.getDialogId({ messageId: message.id }),
-            handleReaction,
-            own_reactions
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: "str-chat__message-reactions-detail",
-      "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.jsxs(
-          "ul",
-          {
-            className: "str-chat__message-reactions-detail__reaction-type-list",
-            "data-testid": "reaction-type-list",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("li", { className: "str-chat__message-reactions-detail__reaction-type-list-item", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  "aria-label": t("Add reaction"),
-                  className: "str-chat__message-reactions-detail__reaction-type-list-item-button",
-                  "data-testid": "add-reaction-button",
-                  onClick: () => setExtendedReactionListOpen(true),
-                  children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "str-chat__message-reactions-detail__reaction-type-list-item-icon", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconEmojiAdd, {}) })
-                }
-              ) }),
-              reactions.map(
-                ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ jsxRuntime.jsx(
-                  "li",
-                  {
-                    className: "str-chat__message-reactions-detail__reaction-type-list-item",
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(
-                      "button",
-                      {
-                        "aria-pressed": reactionType === selectedReactionType,
-                        className: "str-chat__message-reactions-detail__reaction-type-list-item-button",
-                        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, {}) }),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "span",
-                            {
-                              className: "str-chat__message-reactions-detail__reaction-type-list-item-count",
-                              "data-testid": "reaction-type-count",
-                              children: reactionCount
-                            }
-                          )
-                        ]
-                      }
-                    )
+      );
+    },
+    RemindMe() {
+      const { closeMenu, openSubmenu } = useContextMenuContext();
+      const { client } = WithAudioPlayback.useChatContext();
+      const { addNotification } = WithAudioPlayback.useNotificationApi();
+      const { t } = WithAudioPlayback.useTranslationContext();
+      const { message } = useMessageContext();
+      const reminder = useMessageReminder(message.id);
+      const messageAlreadyBookmarked = reminder && !reminder?.remindAt;
+      if (messageAlreadyBookmarked) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ContextMenuButton,
+        {
+          "aria-label": reminder ? t("aria/Remind Me Message") : t("aria/Remove Reminder"),
+          className: msgActionsBoxButtonClassName,
+          hasSubMenu: !reminder,
+          Icon: reminder ? WithAudioPlayback.IconBellOff : WithAudioPlayback.IconBell,
+          onClick: async () => {
+            if (reminder) {
+              try {
+                await client.reminders.deleteReminder(reminder.id);
+                addNotification({
+                  context: {
+                    message
                   },
-                  reactionType
-                )
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__user-list-container", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "str-chat__message-reactions-detail__user-list",
-            "data-testid": "all-reacting-users",
-            children: [
-              areReactionsLoading && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator2, {}),
-              !areReactionsLoading && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactionDetails.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",
-                  {
-                    className: "str-chat__message-reactions-detail__user-list-item",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        Avatar$1,
-                        {
-                          className: "str-chat__avatar--with-border",
-                          "data-testid": "avatar",
-                          imageUrl: user?.image,
-                          size: "md",
-                          userName: user?.name || user?.id
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-reactions-detail__user-list-item-info", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "span",
-                          {
-                            className: "str-chat__message-reactions-detail__user-list-item-username",
-                            "data-testid": "reaction-user-username",
-                            children: belongsToCurrentUser ? t("You") : user?.name || user?.id
-                          }
-                        ),
-                        belongsToCurrentUser && /* @__PURE__ */ jsxRuntime.jsx(
-                          "button",
-                          {
-                            className: "str-chat__message-reactions-detail__user-list-item-button",
-                            "data-testid": "remove-reaction-button",
-                            onClick: async (e) => {
-                              const reactionCountBeforeRemoval = reactionGroups?.[type]?.count ?? 0;
-                              await contextHandleReaction(type, e);
-                              if (selectedReactionType !== null && reactionCountBeforeRemoval <= 1) {
-                                onSelectedReactionTypeChange?.(null);
-                              } else {
-                                refetch();
-                              }
-                            },
-                            children: t("Tap to remove")
-                          }
-                        )
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "str-chat__message-reactions-detail__user-list-item-icon", children: !selectedReactionType && EmojiComponent && /* @__PURE__ */ jsxRuntime.jsx(EmojiComponent, {}) })
-                    ]
+                  emitter: "MessageActions",
+                  message: t("Remove reminder"),
+                  severity: "success",
+                  type: "api:message:reminder:delete:success"
+                });
+              } catch (error) {
+                addNotification({
+                  context: {
+                    message
                   },
-                  `${user?.id}-${type}`
-                );
-              }) })
-            ]
-          }
-        ) })
-      ]
-    }
-  );
-};
-MessageReactionsDetail.displayName = "MessageReactionsDetail";
-MessageReactionsDetail.getDialogId = ({ messageId }) => `message-reactions-detail-${messageId}`;
-const defaultReactionsSort = (a, b) => {
-  if (a.firstReactionAt && b.firstReactionAt) {
-    return +a.firstReactionAt - +b.firstReactionAt;
-  }
-  return a.reactionType.localeCompare(b.reactionType, "en");
-};
-const useProcessReactions = (params) => {
-  const {
-    own_reactions: propOwnReactions,
-    reaction_groups: propReactionGroups,
-    reactions: propReactions,
-    sortReactions: propSortReactions
-  } = params;
-  const { message, sortReactions: contextSortReactions } = useMessageContext();
-  const { reactionOptions = defaultReactionOptions } = WithAudioPlayback.useComponentContext();
-  const sortReactions = propSortReactions ?? contextSortReactions ?? defaultReactionsSort;
-  const latestReactions = propReactions ?? message.latest_reactions;
-  const ownReactions = propOwnReactions ?? message?.own_reactions;
-  const reactionGroups = propReactionGroups ?? message?.reaction_groups ?? void 0;
-  const isOwnReaction = React.useCallback(
-    (reactionType) => ownReactions?.some((reaction) => reaction.type === reactionType) ?? false,
-    [ownReactions]
-  );
-  const getEmojiByReactionType = React.useCallback(
-    (reactionType) => {
-      if (Array.isArray(reactionOptions)) {
-        return reactionOptions.find(({ type }) => type === reactionType)?.Component ?? null;
-      }
-      return reactionOptions.quick[reactionType]?.Component ?? reactionOptions.extended?.[reactionType]?.Component ?? null;
-    },
-    [reactionOptions]
-  );
-  const isSupportedReaction = React.useCallback(
-    (reactionType) => {
-      if (Array.isArray(reactionOptions)) {
-        return reactionOptions.some(
-          (reactionOption) => reactionOption.type === reactionType
-        );
-      }
-      return typeof reactionOptions.quick[reactionType] !== "undefined" || typeof reactionOptions.extended?.[reactionType] !== "undefined";
-    },
-    [reactionOptions]
-  );
-  const uniqueReactionTypeCount = React.useMemo(() => {
-    if (!reactionGroups) {
-      return 0;
-    }
-    return Object.keys(reactionGroups).filter(
-      (reactionType) => isSupportedReaction(reactionType)
-    ).length;
-  }, [isSupportedReaction, reactionGroups]);
-  const getLatestReactedUserNames = React.useCallback(
-    (reactionType) => latestReactions?.flatMap((reaction) => {
-      if (reactionType && reactionType === reaction.type) {
-        const username = reaction.user?.name || reaction.user?.id;
-        return username ? [username] : [];
-      }
-      return [];
-    }) ?? [],
-    [latestReactions]
-  );
-  const existingReactions = React.useMemo(() => {
-    if (!reactionGroups) {
-      return [];
-    }
-    const unsortedReactions = Object.entries(reactionGroups).flatMap(
-      ([reactionType, { count, first_reaction_at, last_reaction_at }]) => {
-        if (count === 0 || !isSupportedReaction(reactionType)) {
-          return [];
+                  emitter: "MessageActions",
+                  error: getNotificationError(error),
+                  message: getErrorMessage(error, "Error removing reminder"),
+                  severity: "error",
+                  type: "api:message:reminder:delete:failed"
+                });
+              } finally {
+                closeMenu();
+              }
+            } else {
+              openSubmenu({
+                Header: RemindMeSubmenuHeader,
+                Submenu: RemindMeSubmenu
+              });
+            }
+          },
+          children: reminder ? t("Remove reminder") : t("Remind me")
         }
-        const latestReactedUserNames = getLatestReactedUserNames(reactionType);
-        return [
-          {
-            EmojiComponent: getEmojiByReactionType(reactionType),
-            firstReactionAt: first_reaction_at ? new Date(first_reaction_at) : null,
-            isOwnReaction: isOwnReaction(reactionType),
-            lastReactionAt: last_reaction_at ? new Date(last_reaction_at) : null,
-            latestReactedUserNames,
-            reactionCount: count,
-            reactionType,
-            unlistedReactedUserCount: count - latestReactedUserNames.length
-          }
-        ];
-      }
-    );
-    return unsortedReactions.sort(sortReactions);
-  }, [
-    getEmojiByReactionType,
-    getLatestReactedUserNames,
-    isOwnReaction,
-    isSupportedReaction,
-    reactionGroups,
-    sortReactions
-  ]);
-  const hasReactions = existingReactions.length > 0;
-  const totalReactionCount = React.useMemo(
-    () => Object.values(reactionGroups ?? {}).reduce((total, { count }) => total + count, 0),
-    [reactionGroups]
-  );
-  return {
-    existingReactions,
-    hasReactions,
-    reactionGroups,
-    totalReactionCount,
-    uniqueReactionTypeCount
-  };
-};
-const FragmentOrButton = ({
-  buttonIf: renderButton = false,
-  children,
-  ...props
-}) => {
-  if (renderButton) {
-    return /* @__PURE__ */ jsxRuntime.jsx("button", { ...props, children });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-};
-const UnMemoizedMessageReactions = (props) => {
-  const {
-    capLimit: { clustered: capLimitClustered = 5, segmented: capLimitSegmented = 4 } = {},
-    flipHorizontalPosition = false,
-    handleFetchReactions,
-    reactionDetailsSort,
-    verticalPosition = "top",
-    visualStyle = "clustered",
-    ...rest
-  } = props;
-  const {
-    existingReactions,
-    hasReactions,
-    reactionGroups,
-    totalReactionCount,
-    uniqueReactionTypeCount
-  } = useProcessReactions(rest);
-  const [selectedReactionType, setSelectedReactionType] = React.useState(
-    null
-  );
-  const { t } = WithAudioPlayback.useTranslationContext("MessageReactions");
-  const { MessageReactionsDetail: MessageReactionsDetail$1 = MessageReactionsDetail } = WithAudioPlayback.useComponentContext();
-  const { isMyMessage, message } = useMessageContext();
-  const divRef = React.useRef(null);
-  const dialogId2 = MessageReactionsDetail.getDialogId({
-    messageId: 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;
-    }
-    setSelectedReactionType(reactionType);
-    dialog.open();
-  };
-  const cappedExistingReactions = React.useMemo(() => {
-    if (visualStyle === "segmented" && verticalPosition !== "top") return null;
-    const capLimit = visualStyle === "segmented" ? capLimitSegmented : capLimitClustered;
-    const sliced = existingReactions.slice(0, capLimit);
-    return {
-      /**
-       * Accumulated reaction count of capped reaction types, first four in case of
-       * segmented(top) and first five in case of clustered(top/bottom) variations.
-       */
-      reactionCountToDisplay: sliced.reduce(
-        (accumulatedCount, { reactionCount }) => accumulatedCount + reactionCount,
-        0
-      ),
-      reactionsToDisplay: sliced
-    };
-  }, [
-    capLimitClustered,
-    capLimitSegmented,
-    existingReactions,
-    verticalPosition,
-    visualStyle
-  ]);
-  if (!hasReactions) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "aria-label": t("aria/Reaction list"),
-        className: clsx("str-chat__message-reactions", {
-          [`str-chat__message-reactions--flipped-horizontally`]: flipHorizontalPosition,
-          [`str-chat__message-reactions--${verticalPosition}`]: typeof verticalPosition === "string",
-          [`str-chat__message-reactions--${visualStyle}`]: typeof visualStyle === "string"
-        }),
-        ref: divRef,
-        role: "figure",
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          FragmentOrButton,
-          {
-            "aria-expanded": isDialogOpen,
-            "aria-pressed": isDialogOpen,
-            buttonIf: visualStyle === "clustered",
-            className: "str-chat__message-reactions__list-button",
-            "data-testid": "message-reactions-list-button",
-            onClick: () => handleReactionButtonClick(null),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "str-chat__message-reactions__list", children: [
-                (cappedExistingReactions?.reactionsToDisplay ?? existingReactions).map(
-                  ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ jsxRuntime.jsx(
-                    "li",
-                    {
-                      className: "str-chat__message-reactions__list-item",
-                      "data-testid": "message-reactions-list-item",
-                      children: /* @__PURE__ */ jsxRuntime.jsxs(
-                        FragmentOrButton,
-                        {
-                          buttonIf: visualStyle === "segmented",
-                          className: "str-chat__message-reactions__list-item-button",
-                          onClick: () => handleReactionButtonClick(reactionType),
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              "span",
-                              {
-                                className: "str-chat__message-reactions__list-item-icon",
-                                "data-testid": "message-reactions-list-item-icon",
-                                children: /* @__PURE__ */ jsxRuntime.jsx(EmojiComponent, {})
-                              }
-                            ),
-                            visualStyle === "segmented" && reactionCount > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-                              "span",
-                              {
-                                className: "str-chat__message-reactions__list-item-count",
-                                "data-testclass": "message-reactions-item-count",
-                                children: reactionCount
-                              }
-                            )
-                          ]
-                        }
-                      )
-                    },
-                    reactionType
-                  )
+      );
+    },
+    SaveForLater() {
+      const { closeMenu } = useContextMenuContext();
+      const { client } = WithAudioPlayback.useChatContext();
+      const { addNotification } = WithAudioPlayback.useNotificationApi();
+      const { message } = useMessageContext();
+      const { t } = WithAudioPlayback.useTranslationContext();
+      const reminder = useMessageReminder(message.id);
+      const messageAlreadyHasReminderScheduled = Boolean(reminder && reminder?.remindAt);
+      if (messageAlreadyHasReminderScheduled) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ContextMenuButton,
+        {
+          "aria-label": reminder ? t("aria/Remove Save For Later") : t("aria/Bookmark Message"),
+          className: msgActionsBoxButtonClassName,
+          Icon: reminder ? WithAudioPlayback.IconBookmarkRemove : WithAudioPlayback.IconBookmark,
+          onClick: async () => {
+            try {
+              if (reminder) {
+                await client.reminders.deleteReminder(reminder.id);
+                addNotification({
+                  context: {
+                    message
+                  },
+                  emitter: "MessageActions",
+                  message: t("Remove save for later"),
+                  severity: "success",
+                  type: "api:message:saveForLater:delete:success"
+                });
+              } else {
+                await client.reminders.createReminder({ messageId: message.id });
+                addNotification({
+                  context: {
+                    message
+                  },
+                  emitter: "MessageActions",
+                  message: t("Saved for later"),
+                  severity: "success",
+                  type: "api:message:saveForLater:create:success"
+                });
+              }
+            } catch (error) {
+              addNotification({
+                context: {
+                  message
+                },
+                emitter: "MessageActions",
+                error: getNotificationError(error),
+                message: getErrorMessage(
+                  error,
+                  reminder ? "Error removing message from saved for later" : "Error saving message for later"
                 ),
-                uniqueReactionTypeCount > 4 && cappedExistingReactions && visualStyle === "segmented" && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "str-chat__message-reactions__list-item str-chat__message-reactions__list-item--more", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    className: "str-chat__message-reactions__list-item-button",
-                    onClick: () => handleReactionButtonClick(null),
-                    children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "str-chat__message-reactions__overflow-count", children: [
-                      "+",
-                      totalReactionCount - cappedExistingReactions.reactionCountToDisplay
-                    ] })
-                  }
-                ) })
-              ] }),
-              visualStyle === "clustered" && /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "str-chat__message-reactions__total-count",
-                  "data-testid": "message-reactions-total-count",
-                  children: totalReactionCount
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      DialogAnchor,
-      {
-        dialogManagerId: dialogManager?.id,
-        id: dialogId2,
-        offset: 8,
-        placement: isMyMessage() ? "bottom-end" : "bottom-start",
-        referenceElement: divRef.current,
-        trapFocus: true,
-        updatePositionOnContentResize: true,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          MessageReactionsDetail$1,
+                severity: "error",
+                type: reminder ? "api:message:saveForLater:delete:failed" : "api:message:saveForLater:create:failed"
+              });
+            } finally {
+              closeMenu();
+            }
+          },
+          children: reminder ? t("Remove save for later") : t("Save for later")
+        }
+      );
+    },
+    Flag() {
+      const { closeMenu } = useContextMenuContext();
+      const { handleFlag, message } = useMessageContext();
+      const { addNotification } = WithAudioPlayback.useNotificationApi();
+      const { t } = WithAudioPlayback.useTranslationContext();
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ContextMenuButton,
+        {
+          "aria-label": t("aria/Flag Message"),
+          className: msgActionsBoxButtonClassName,
+          Icon: WithAudioPlayback.IconFlag,
+          onClick: async (event) => {
+            try {
+              await handleFlag(event);
+              addNotification({
+                context: {
+                  message
+                },
+                emitter: "MessageActions",
+                message: t("Message has been successfully flagged"),
+                severity: "success",
+                type: "api:message:flag:success"
+              });
+            } catch (error) {
+              addNotification({
+                context: {
+                  message
+                },
+                emitter: "MessageActions",
+                error: getNotificationError(error),
+                message: getErrorMessage(error, t("Error adding flag")),
+                severity: "error",
+                type: "api:message:flag:failed"
+              });
+            }
+            closeMenu();
+          },
+          children: t("Flag")
+        }
+      );
+    },
+    Mute() {
+      const { closeMenu } = useContextMenuContext();
+      const { handleMute, message } = useMessageContext();
+      const { addNotification } = WithAudioPlayback.useNotificationApi();
+      const { mutes } = WithAudioPlayback.useChatContext();
+      const { t } = WithAudioPlayback.useTranslationContext();
+      const isMuted = WithAudioPlayback.isUserMuted(message, mutes);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ContextMenuButton,
+        {
+          "aria-label": isMuted ? t("aria/Unmute User") : t("aria/Mute User"),
+          className: msgActionsBoxButtonClassName,
+          Icon: isMuted ? WithAudioPlayback.IconAudio : WithAudioPlayback.IconMute,
+          onClick: async (event) => {
+            try {
+              await handleMute(event);
+              addNotification({
+                context: {
+                  message
+                },
+                emitter: "MessageActions",
+                message: isMuted ? t("{{ user }} has been unmuted", {
+                  user: message.user?.name || message.user?.id
+                }) : t("{{ user }} has been muted", {
+                  user: message.user?.name || message.user?.id
+                }),
+                severity: "success",
+                type: isMuted ? "api:user:unmute:success" : "api:user:mute:success"
+              });
+            } catch (error) {
+              addNotification({
+                context: {
+                  message
+                },
+                emitter: "MessageActions",
+                error: getNotificationError(error),
+                message: getErrorMessage(
+                  error,
+                  isMuted ? t("Error unmuting a user ...") : t("Error muting a user ...")
+                ),
+                severity: "error",
+                type: isMuted ? "api:user:unmute:failed" : "api:user:mute:failed"
+              });
+            }
+            closeMenu();
+          },
+          children: isMuted ? t("Unmute") : t("Mute")
+        }
+      );
+    },
+    Delete() {
+      const { closeMenu } = useContextMenuContext();
+      const { addNotification } = WithAudioPlayback.useNotificationApi();
+      const { Modal = GlobalModal } = WithAudioPlayback.useComponentContext();
+      const { handleDelete, message } = useMessageContext();
+      const { t } = WithAudioPlayback.useTranslationContext();
+      const [openModal, setOpenModal] = React.useState(false);
+      if (WithAudioPlayback.isMessageDeleted(message)) return null;
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ContextMenuButton,
           {
-            handleFetchReactions,
-            onSelectedReactionTypeChange: setSelectedReactionType,
-            reactionDetailsSort,
-            reactionGroups,
-            reactions: existingReactions,
-            selectedReactionType,
-            totalReactionCount
+            "aria-label": t("aria/Delete Message"),
+            className: msgActionsBoxButtonClassName,
+            Icon: WithAudioPlayback.IconDelete,
+            onClick: () => {
+              setOpenModal(true);
+            },
+            variant: "destructive",
+            children: t("Delete message")
           }
-        )
-      }
-    )
-  ] });
-};
-const MessageReactions = React.memo(
-  UnMemoizedMessageReactions
-);
-const getImageDimensions = (source) => new Promise((resolve, reject) => {
-  const image = new Image();
-  image.addEventListener(
-    "load",
-    () => {
-      resolve([image.width, image.height]);
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Modal, { open: openModal, children: /* @__PURE__ */ jsxRuntime.jsx(
+          DeleteMessageAlert,
+          {
+            onCancel: () => {
+              setOpenModal(false);
+              closeMenu();
+            },
+            onDelete: async () => {
+              try {
+                await handleDelete();
+                addNotification({
+                  context: {
+                    message
+                  },
+                  emitter: "MessageActions",
+                  message: t("Message deleted"),
+                  severity: "success",
+                  type: "api:message:delete:success"
+                });
+              } catch (error) {
+                addNotification({
+                  context: {
+                    message
+                  },
+                  emitter: "MessageActions",
+                  error: getNotificationError(error),
+                  message: getErrorMessage(error, t("Error deleting message")),
+                  severity: "error",
+                  type: "api:message:delete:failed"
+                });
+              } finally {
+                setOpenModal(false);
+                closeMenu();
+              }
+            }
+          }
+        ) })
+      ] });
     },
-    { once: true }
-  );
-  image.addEventListener("error", () => reject(`Couldn't load image from ${source}`), {
-    once: true
-  });
-  image.src = source;
-});
-const SpriteImage = ({
-  columns,
-  fallback,
-  height,
-  position,
-  rows,
-  spriteUrl,
-  style,
-  width
-}) => {
-  const [[spriteWidth, spriteHeight], setSpriteDimensions] = React.useState([0, 0]);
-  React.useEffect(() => {
-    getImageDimensions(spriteUrl).then(setSpriteDimensions).catch(console.error);
-  }, [spriteUrl]);
-  const [x, y] = position;
-  if (!spriteHeight || !spriteWidth) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-testid": "sprite-image",
-      style: {
-        ...style,
-        "--str-chat__sprite-image-resize-ratio": "var(--str-chat__sprite-image-resize-ratio-x, var(--str-chat__sprite-image-resize-ratio-y, 1))",
-        "--str-chat__sprite-image-resize-ratio-x": "calc(var(--str-chat__sprite-image-width) / var(--str-chat__sprite-item-width))",
-        "--str-chat__sprite-image-resize-ratio-y": "calc(var(--str-chat__sprite-image-height) / var(--str-chat__sprite-item-height))",
-        "--str-chat__sprite-item-height": `${spriteHeight / rows}`,
-        "--str-chat__sprite-item-width": `${spriteWidth / columns}`,
-        ...Number.isFinite(height) ? { "--str-chat__sprite-image-height": `${height}px` } : {},
-        ...Number.isFinite(width) ? { "--str-chat__sprite-image-width": `${width}px` } : {},
-        backgroundImage: `url('${spriteUrl}')`,
-        backgroundPosition: `${x * (100 / (columns - 1))}% ${y * (100 / (rows - 1))}%`,
-        backgroundSize: `${columns * 100}% ${rows * 100}%`,
-        height: "var(--str-chat__sprite-image-height, calc(var(--str-chat__sprite-item-height) * var(--str-chat__sprite-image-resize-ratio)))",
-        width: "var(--str-chat__sprite-image-width, calc(var(--str-chat__sprite-item-width) * var(--str-chat__sprite-image-resize-ratio)))"
-      }
+    BlockUser() {
+      const { closeMenu } = useContextMenuContext();
+      const { client } = WithAudioPlayback.useChatContext();
+      const { message } = useMessageContext();
+      const { t } = WithAudioPlayback.useTranslationContext();
+      const isBlocked = !message.user?.id || new Set(client.blockedUsers.getLatestValue().userIds).has(message.user?.id);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ContextMenuButton,
+        {
+          "aria-label": isBlocked ? t("aria/Unblock User") : t("aria/Block User"),
+          className: clsx(msgActionsBoxButtonClassName),
+          Icon: isBlocked ? WithAudioPlayback.IconUserCheck : WithAudioPlayback.IconNoSign,
+          onClick: () => {
+            const targetId = message.user?.id;
+            if (targetId) {
+              if (isBlocked) client.unBlockUser(targetId);
+              else client.blockUser(targetId);
+            }
+            closeMenu();
+          },
+          children: isBlocked ? t("Unblock User") : t("Block User")
+        }
+      );
     }
-  );
+  },
+  quick: {
+    // eslint-disable-next-line react/display-name
+    DropdownToggle: React.forwardRef((_, ref) => {
+      const { t } = WithAudioPlayback.useTranslationContext();
+      const { message, threadList } = useMessageContext();
+      const dropdownDialogIsOpen = useDialogIsOpen(
+        MessageActions.getDialogId({ messageId: message.id })
+      );
+      const { dialog } = useDialogOnNearestManager({
+        id: MessageActions.getDialogId({ messageId: message.id })
+      });
+      const reactionSelectorDialogId = ReactionSelector.getDialogId({
+        messageId: message.id,
+        threadList
+      });
+      const { dialog: dropdownReactionSelectorDialog } = useDialogOnNearestManager({
+        id: `${reactionSelectorDialogId}-dropdown`
+      });
+      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: () => {
+            dropdownReactionSelectorDialog?.close();
+            dialog?.toggle();
+          },
+          ref,
+          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMore, { className: "str-chat__message-action-icon" })
+        }
+      );
+    }),
+    React() {
+      return /* @__PURE__ */ jsxRuntime.jsx(ReactionSelectorWithButton, { ReactionIcon: WithAudioPlayback.IconEmoji });
+    },
+    Reply() {
+      const { handleOpenThread } = useMessageContext();
+      const { t } = WithAudioPlayback.useTranslationContext();
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        QuickMessageActionsButton,
+        {
+          "aria-label": t("aria/Open Thread"),
+          className: "str-chat__message-reply-in-thread-button",
+          "data-testid": "thread-action",
+          onClick: handleOpenThread,
+          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconReply, { className: "str-chat__message-action-icon" })
+        }
+      );
+    }
+  }
 };
+const defaultMessageActionSet = [
+  {
+    Component: DefaultMessageActionComponents.quick.DropdownToggle,
+    placement: "quick-dropdown-toggle"
+  },
+  {
+    Component: DefaultMessageActionComponents.quick.Reply,
+    placement: "quick",
+    type: "reply"
+  },
+  {
+    Component: DefaultMessageActionComponents.quick.React,
+    placement: "quick",
+    type: "react"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.React,
+    placement: "dropdown",
+    type: "react"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.ThreadReply,
+    placement: "dropdown",
+    type: "reply"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Quote,
+    placement: "dropdown",
+    type: "quote"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Pin,
+    placement: "dropdown",
+    type: "pin"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.CopyMessageText,
+    placement: "dropdown",
+    type: "copyMessageText"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Resend,
+    placement: "dropdown",
+    type: "resendMessage"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Edit,
+    placement: "dropdown",
+    type: "edit"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.MarkUnread,
+    placement: "dropdown",
+    type: "markUnread"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.RemindMe,
+    placement: "dropdown",
+    type: "remindMe"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.SaveForLater,
+    placement: "dropdown",
+    type: "saveForLater"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Flag,
+    placement: "dropdown",
+    type: "flag"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Mute,
+    placement: "dropdown",
+    type: "mute"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Delete,
+    placement: "dropdown",
+    type: "delete"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.BlockUser,
+    placement: "dropdown",
+    type: "blockUser"
+  }
+];
 const useSplitActionSet = (actionSet) => React.useMemo(() => {
   const quickActionSet = [];
   const dropdownActionSet = [];
@@ -21207,6 +21382,7 @@ const MessageActions = ({
     messageId: message.id,
     threadList
   });
+  const dropdownReactionSelectorDialogId = `${reactionSelectorDialogId}-dropdown`;
   const { dialog, dialogManager } = useDialogOnNearestManager({
     id: messageActionsDialogId
   });
@@ -21218,6 +21394,10 @@ const MessageActions = ({
     reactionSelectorDialogId,
     dialogManager?.id
   );
+  const dropdownReactionSelectorDialogIsOpen = useDialogIsOpen(
+    dropdownReactionSelectorDialogId,
+    dialogManager?.id
+  );
   if (dropdownActionSet.length + quickActionSet.length === 0) {
     return null;
   }
@@ -21225,7 +21405,7 @@ const MessageActions = ({
     "div",
     {
       className: clsx("str-chat__message-options", {
-        "str-chat__message-options--active": messageActionsDialogIsOpen || reactionSelectorDialogIsOpen
+        "str-chat__message-options--active": messageActionsDialogIsOpen || reactionSelectorDialogIsOpen || dropdownReactionSelectorDialogIsOpen
       }),
       children: [
         quickDropdownToggleAction && dropdownActionSet.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -21235,6 +21415,7 @@ const MessageActions = ({
             {
               backLabel: t("Back"),
               className: clsx("str-chat__message-actions-box", {
+                "str-chat__message-actions-box--hidden": dropdownReactionSelectorDialogIsOpen,
                 "str-chat__message-actions-box--open": messageActionsDialogIsOpen
               }),
               dialogManagerId: dialogManager?.id,
@@ -21299,6 +21480,7 @@ const MessageUIWithContext = ({
     () => isMessageAIGenerated?.(message),
     [isMessageAIGenerated, message]
   );
+  const isDeleted = WithAudioPlayback.isMessageDeleted(message);
   const finalAttachments = React.useMemo(
     () => !message.shared_location && !message.attachments ? [] : !message.shared_location ? message.attachments : [message.shared_location, ...message.attachments ?? []],
     [message]
@@ -21306,7 +21488,7 @@ const MessageUIWithContext = ({
   if (WithAudioPlayback.isDateSeparatorMessage(message)) {
     return null;
   }
-  if (MessageDeleted && (message.deleted_at || message.type === "deleted")) {
+  if (MessageDeleted && isDeleted) {
     return /* @__PURE__ */ jsxRuntime.jsx(MessageDeleted, { message });
   }
   if (WithAudioPlayback.isMessageBlocked(message)) {
@@ -21314,7 +21496,6 @@ const MessageUIWithContext = ({
   }
   const poll = message.poll_id && client.polls.fromState(message.poll_id);
   const memberCount = Object.keys(channel?.state?.members ?? {}).length;
-  const isDeleted = !!message.deleted_at;
   const hasAttachment = !isDeleted && WithAudioPlayback.messageHasAttachments(message);
   const hasSingleAttachment = !isDeleted && WithAudioPlayback.messageHasSingleAttachment(message);
   const hasGiphyAttachment = !isDeleted && WithAudioPlayback.messageHasGiphyAttachment(message);
@@ -21405,7 +21586,7 @@ const MessageUIWithContext = ({
                 thread_participants: message.thread_participants
               }
             ),
-            message.deleted_at ? /* @__PURE__ */ jsxRuntime.jsx(MessageDeletedBubble$1, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            isDeleted ? /* @__PURE__ */ jsxRuntime.jsx(MessageDeletedBubble$1, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs(MessageBubble, { children: [
                 poll && /* @__PURE__ */ jsxRuntime.jsx(Poll, { poll }),
                 message.quoted_message && /* @__PURE__ */ jsxRuntime.jsx(QuotedMessage$1, {}),
@@ -21690,26 +21871,21 @@ const useFloatingDateSeparatorMessageList = ({
     }
     const containerRect = listElement.getBoundingClientRect();
     let bestDate = null;
-    let bestBottom = -Infinity;
-    let anyVisible = false;
+    let bestTop = -Infinity;
     for (const el of separators) {
       const rect = el.getBoundingClientRect();
       const dataDate = el.getAttribute("data-date");
       if (!dataDate) continue;
-      const isAboveViewport = rect.bottom < containerRect.top;
-      const isVisible = rect.top < containerRect.bottom && rect.bottom > containerRect.top;
-      if (isVisible) {
-        anyVisible = true;
-      }
-      if (isAboveViewport && rect.bottom > bestBottom) {
-        bestBottom = rect.bottom;
+      const isAtOrAboveTopBoundary = rect.top <= containerRect.top;
+      if (isAtOrAboveTopBoundary && rect.top > bestTop) {
+        bestTop = rect.top;
         const d = new Date(dataDate);
         if (!isNaN(d.getTime())) bestDate = d;
       }
     }
     setState({
-      date: anyVisible ? null : bestDate,
-      visible: !anyVisible && bestDate !== null
+      date: bestDate,
+      visible: bestDate !== null
     });
   }, [disableDateSeparator, listElement, processedMessages]);
   React.useEffect(() => {
@@ -22706,6 +22882,10 @@ function getFloatingDateForFirstMessage(firstMessage, processedMessages, firstMe
   }
   return null;
 }
+function getFloatingDateForFirstItem(firstItem, processedMessages, firstItemIndex) {
+  if (WithAudioPlayback.isDateSeparatorMessage(firstItem)) return firstItem.date;
+  return getFloatingDateForFirstMessage(firstItem, processedMessages, firstItemIndex);
+}
 const HIDDEN_STATE = { date: null, visible: false };
 const useFloatingDateSeparator = ({
   disableDateSeparator,
@@ -22724,17 +22904,8 @@ const useFloatingDateSeparator = ({
         return;
       }
       const first = valid[0];
-      if (WithAudioPlayback.isDateSeparatorMessage(first)) {
-        setState(HIDDEN_STATE);
-        return;
-      }
-      const hasVisibleDateSeparator = valid.some(WithAudioPlayback.isDateSeparatorMessage);
-      if (hasVisibleDateSeparator) {
-        setState(HIDDEN_STATE);
-        return;
-      }
       const firstIndex = processedMessages.findIndex((m) => m.id === first.id);
-      const date = firstIndex >= 0 ? getFloatingDateForFirstMessage(first, processedMessages, firstIndex) : null;
+      const date = firstIndex >= 0 ? getFloatingDateForFirstItem(first, processedMessages, firstIndex) : null;
       const visible = date !== null;
       setState((prev) => {
         const prevTime = prev.date?.getTime() ?? null;
@@ -25662,77 +25833,9 @@ const useArchiveActionButtonBehavior = () => {
     title: membership.archived_at ? t("Unarchive") : t("Archive")
   };
 };
-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.IconMore, {})
-        }
-      );
-    }),
-    placement: "quick-dropdown-toggle"
-  },
-  {
-    Component() {
-      const behaviorProps = useArchiveActionButtonBehavior();
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        WithAudioPlayback.Button,
-        {
-          appearance: "ghost",
-          "aria-label": behaviorProps.title,
-          circular: true,
-          size: "sm",
-          variant: "secondary",
-          ...behaviorProps,
-          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconArchive, {})
-        }
-      );
-    },
-    placement: "quick",
-    type: "archive"
-  },
-  {
-    Component() {
-      const behaviorProps = useMuteActionButtonBehavior();
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        WithAudioPlayback.Button,
-        {
-          appearance: "ghost",
-          "aria-label": behaviorProps.title,
-          circular: true,
-          size: "sm",
-          variant: "secondary",
-          ...behaviorProps,
-          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMute, {})
-        }
-      );
-    },
-    placement: "quick",
-    type: "mute"
-  },
-  {
-    Component() {
+const defaultComponents = {
+  dropdown: {
+    Archive() {
       const behaviorProps = useArchiveActionButtonBehavior();
       return /* @__PURE__ */ jsxRuntime.jsx(
         ContextMenuButton,
@@ -25744,27 +25847,7 @@ const defaultChannelActionSet = [
         }
       );
     },
-    placement: "dropdown",
-    type: "archive"
-  },
-  {
-    Component() {
-      const behaviorProps = useMuteActionButtonBehavior();
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ContextMenuButton,
-        {
-          "aria-label": behaviorProps.title,
-          Icon: WithAudioPlayback.IconMute,
-          ...behaviorProps,
-          children: behaviorProps.title
-        }
-      );
-    },
-    placement: "dropdown",
-    type: "mute"
-  },
-  {
-    Component() {
+    Ban() {
       const { client } = WithAudioPlayback.useChatContext();
       const { addNotification } = WithAudioPlayback.useNotificationApi();
       const { t } = WithAudioPlayback.useTranslationContext();
@@ -25831,11 +25914,55 @@ const defaultChannelActionSet = [
         }
       );
     },
-    placement: "dropdown",
-    type: "ban"
-  },
-  {
-    Component() {
+    Leave() {
+      const { t } = WithAudioPlayback.useTranslationContext();
+      const { channel } = useChannelListItemContext();
+      const { client } = WithAudioPlayback.useChatContext();
+      const { addNotification } = WithAudioPlayback.useNotificationApi();
+      const [inProgress, setInProgress] = React.useState(false);
+      const title = t("Leave Channel");
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ContextMenuButton,
+        {
+          "aria-label": title,
+          disabled: inProgress,
+          Icon: WithAudioPlayback.IconLeave,
+          onClick: async (e) => {
+            e.stopPropagation();
+            try {
+              setInProgress(true);
+              await channel.removeMembers([client.userID]);
+              addNotification({
+                context: {
+                  channel
+                },
+                emitter: ChannelListItemActionButtons.name,
+                message: t("Left channel"),
+                severity: "success",
+                type: "api:channel:leave:success"
+              });
+            } catch (error) {
+              addNotification({
+                context: {
+                  channel
+                },
+                emitter: ChannelListItemActionButtons.name,
+                error: error instanceof Error ? error : new Error("An unknown error occurred"),
+                message: t("Failed to leave channel"),
+                severity: "error",
+                type: "api:channel:leave:failed"
+              });
+            } finally {
+              setInProgress(false);
+            }
+          },
+          title,
+          variant: "destructive",
+          children: title
+        }
+      );
+    },
+    Pin() {
       const { t } = WithAudioPlayback.useTranslationContext();
       const { addNotification } = WithAudioPlayback.useNotificationApi();
       const { channel } = useChannelListItemContext();
@@ -25902,59 +26029,80 @@ const defaultChannelActionSet = [
           children: title
         }
       );
-    },
-    placement: "dropdown",
-    type: "pin"
+    }
   },
-  {
-    Component() {
-      const { t } = WithAudioPlayback.useTranslationContext();
-      const { channel } = useChannelListItemContext();
-      const { client } = WithAudioPlayback.useChatContext();
-      const { addNotification } = WithAudioPlayback.useNotificationApi();
-      const [inProgress, setInProgress] = React.useState(false);
-      const title = t("Leave Channel");
+  quick: {
+    Mute() {
+      const behaviorProps = useMuteActionButtonBehavior();
       return /* @__PURE__ */ jsxRuntime.jsx(
-        ContextMenuButton,
+        WithAudioPlayback.Button,
         {
-          "aria-label": title,
-          disabled: inProgress,
-          Icon: WithAudioPlayback.IconLeave,
-          onClick: async (e) => {
-            e.stopPropagation();
-            try {
-              setInProgress(true);
-              await channel.removeMembers([client.userID]);
-              addNotification({
-                context: {
-                  channel
-                },
-                emitter: ChannelListItemActionButtons.name,
-                message: t("Left channel"),
-                severity: "success",
-                type: "api:channel:leave:success"
-              });
-            } catch (error) {
-              addNotification({
-                context: {
-                  channel
-                },
-                emitter: ChannelListItemActionButtons.name,
-                error: error instanceof Error ? error : new Error("An unknown error occurred"),
-                message: t("Failed to leave channel"),
-                severity: "error",
-                type: "api:channel:leave:failed"
-              });
-            } finally {
-              setInProgress(false);
-            }
-          },
-          title,
-          variant: "destructive",
-          children: title
+          appearance: "ghost",
+          "aria-label": behaviorProps.title,
+          circular: true,
+          size: "sm",
+          variant: "secondary",
+          ...behaviorProps,
+          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMute, {})
         }
       );
-    },
+    }
+  },
+  QuickDropdownToggle: 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.IconMore, {})
+      }
+    );
+  })
+};
+defaultComponents.QuickDropdownToggle.displayName = "QuickDropdownToggle";
+const defaultChannelActionSet = [
+  {
+    Component: defaultComponents.QuickDropdownToggle,
+    placement: "quick-dropdown-toggle"
+  },
+  {
+    Component: defaultComponents.quick.Mute,
+    placement: "quick",
+    type: "mute"
+  },
+  {
+    Component: defaultComponents.dropdown.Archive,
+    placement: "dropdown",
+    type: "archive"
+  },
+  {
+    Component: defaultComponents.dropdown.Ban,
+    placement: "dropdown",
+    type: "ban"
+  },
+  {
+    Component: defaultComponents.dropdown.Pin,
+    placement: "dropdown",
+    type: "pin"
+  },
+  {
+    Component: defaultComponents.dropdown.Leave,
     placement: "dropdown",
     type: "leave"
   }
@@ -25962,8 +26110,6 @@ const defaultChannelActionSet = [
 const useBaseChannelActionSetFilter = (channelActionSet) => {
   const { channel } = useChannelListItemContext();
   const membership = useChannelMembershipState(channel);
-  const isDirectMessageChannel = channel.type === "messaging" && // assuming one of the users is current user
-  channel.data?.member_count === 2 && channel.id?.startsWith("!members-");
   const memberCount = channel.data?.member_count ?? 0;
   const connectedUserIsMember = typeof membership.user !== "undefined";
   const ownCapabilities = channel.data?.own_capabilities;
@@ -25972,9 +26118,9 @@ const useBaseChannelActionSetFilter = (channelActionSet) => {
       if (action.placement === "quick-dropdown-toggle") return true;
       switch (action.type) {
         case "archive":
-          return connectedUserIsMember && (action.placement === "quick" && isDirectMessageChannel || action.placement === "dropdown" && !isDirectMessageChannel);
+          return connectedUserIsMember;
         case "mute":
-          return ownCapabilities?.includes("mute-channel") && (action.placement === "dropdown" && isDirectMessageChannel || action.placement === "quick" && !isDirectMessageChannel);
+          return ownCapabilities?.includes("mute-channel");
         case "ban":
           return memberCount > 0 && memberCount <= 2 && ownCapabilities?.includes("ban-channel-members");
         case "leave":
@@ -25986,13 +26132,7 @@ const useBaseChannelActionSetFilter = (channelActionSet) => {
       }
     });
     return filtered;
-  }, [
-    channelActionSet,
-    isDirectMessageChannel,
-    memberCount,
-    ownCapabilities,
-    connectedUserIsMember
-  ]);
+  }, [channelActionSet, memberCount, ownCapabilities, connectedUserIsMember]);
 };
 const ChannelListItemActionButtons = () => {
   const { ContextMenu: ContextMenuComponent = ContextMenu } = WithAudioPlayback.useComponentContext();
@@ -26122,7 +26262,7 @@ const useLatestMessagePreview = ({
     } else if (!isOwnMessage && participantCount !== void 0 && participantCount > 2) {
       senderName = latestMessage.user?.name || latestMessage.user?.id;
     }
-    if (latestMessage.deleted_at) {
+    if (WithAudioPlayback.isMessageDeleted(latestMessage)) {
       return {
         deliveryStatus,
         senderName,
@@ -28247,7 +28387,7 @@ const useChat = ({
   };
   React.useEffect(() => {
     if (!client) return;
-    const version = "14.0.0-beta.7";
+    const version = "14.0.0-beta.8";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
@@ -28431,7 +28571,6 @@ const Chat = (props) => {
     defaultLanguage,
     i18nInstance
   });
-  useReportLostConnectionSystemNotification();
   const channelsQueryState = useChannelsQueryState();
   const searchController = React.useMemo(
     () => customChannelSearchController ?? new streamChat.SearchController({
@@ -28651,6 +28790,7 @@ exports.isLanguageSupported = WithAudioPlayback.isLanguageSupported;
 exports.isLocalMessage = WithAudioPlayback.isLocalMessage;
 exports.isMessageBlocked = WithAudioPlayback.isMessageBlocked;
 exports.isMessageBounced = WithAudioPlayback.isMessageBounced;
+exports.isMessageDeleted = WithAudioPlayback.isMessageDeleted;
 exports.isMessageEdited = WithAudioPlayback.isMessageEdited;
 exports.isMessageErrorRetryable = WithAudioPlayback.isMessageErrorRetryable;
 exports.isNetworkSendFailure = WithAudioPlayback.isNetworkSendFailure;
@@ -28886,6 +29026,10 @@ exports.Streami18n = Streami18n;
 exports.SuggestPollOptionPrompt = SuggestPollOptionPrompt;
 exports.SuggestionList = SuggestionList;
 exports.SuggestionListItem = SuggestionListItem;
+exports.SwitchField = SwitchField;
+exports.SwitchFieldDescription = SwitchFieldDescription;
+exports.SwitchFieldLabel = SwitchFieldLabel;
+exports.SwitchFieldTitle = SwitchFieldTitle;
 exports.TextInput = TextInput;
 exports.TextInputFieldSet = TextInputFieldSet;
 exports.TextareaComposer = TextareaComposer;
@@ -28926,7 +29070,7 @@ exports.deTranslations = deTranslations;
 exports.defaultAllowedTagNames = defaultAllowedTagNames;
 exports.defaultAttachmentActionsDefaultFocus = defaultAttachmentActionsDefaultFocus;
 exports.defaultAttachmentSelectorActionSet = defaultAttachmentSelectorActionSet;
-exports.defaultComponents = defaultComponents;
+exports.defaultComponents = defaultComponents$1;
 exports.defaultMessageActionSet = defaultMessageActionSet;
 exports.defaultReactionOptions = defaultReactionOptions;
 exports.defaultRenderMessages = defaultRenderMessages;