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

package/dist/es/index.mjs

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import clsx from "clsx";
 import { nanoid } from "nanoid";
-import React, { useState, useEffect, useCallback, useLayoutEffect, useMemo, useContext, createContext, useRef, forwardRef, Component, createElement, Fragment as Fragment$1 } from "react";
-import { u as useHandleFileChangeWrapper, d as dataTransferItemsToFiles, r as renderAudio, t as toAudioBuffer, c as createFileFromBlobs, g as getExtensionFromMimeType, a as getRecordedMediaTypeFromMimeType } from "../audioProcessing-ByEVSjGG.mjs";
-import { u as useStateStore, a as useMessageComposerController, i as isMessageBounced, b as useChannelActionContext, C as ComponentContext, c as useTranslationContext, d as useChannelStateContext, e as useChatContext, f as isNotificationForPanel, B as BaseIcon, g as Button, I as IconPause, h as IconPlaySolid, j as getDefaultExportFromCjs, k as defaultTranslatorFunction, p as predefinedFormatters, L as LocalizedFormat, l as calendar, m as IconLoadingCircle, n as isNetworkSendFailure, v as validateAndGetMessage, o as isUserMuted, q as defaultPinPermissions, r as useThreadContext, s as usePopoverPosition, t as useComponentContext, w as IconCrossMedium, x as IconPeople, y as IconExclamation, z as IconChevronRight, A as IconChevronLeft, D as IconArrowLeft, E as IconExclamationCircle, F as IconCircleBanSign, G as isMessageErrorRetryable, H as ACTIONS_NOT_WORKING_IN_THREAD, J as useNotificationTarget, K as IconArrowRightUp, M as addNotificationTargetTag, N as IconPin, O as mapToUserNameOrId, P as IconClock, Q as IconCheckmark1Small, R as IconDoubleCheckmark1Small, S as getReadByTooltipText, T as messageHasAttachments, U as messageTextHasEmojisOnly, V as isDate, W as getDateString, X as IconTranslate, Y as useMessageComposerContext, Z as useIsCooldownActive, _ as IconCrossSmall, $ as IconImages1Alt, a0 as IconChart5, a1 as IconMapPin, a2 as IconFileBend, a3 as IconChainLink, a4 as IconVideo, a5 as IconVideoSolid, a6 as IconMicrophone, a7 as IconBookmark, a8 as IconBellNotification, a9 as IconChevronDown, aa as IconPlusSmall, ab as IconCheckmark2, ac as DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ad as IconTrophy, ae as IconDotGrid2x3, af as IconCircleMinus, ag as IconPaperPlane, ah as IconVolumeFull, ai as IconPeopleAdd, aj as IconMute, ak as IconFlag2, al as IconPeopleRemove, am as IconPaperclip, an as IconRunShortcut, ao as CHANNEL_CONTAINER_ID, ap as IconPlusLarge, aq as IconExclamationTriangle, ar as useAudioPlayer, as as IconArrowRotateClockwise, at as IconArrowDownCircle, au as IconThunder, av as IconTrashBin, aw as IconFileArrowLeftIn, ax as MessageComposerContextProvider, ay as useTypingContext, az as defaultDateTimeParser, aA as isLanguageSupported, aB as IconLayoutAlignLeft, aC as useChatViewContext, aD as MESSAGE_ACTIONS, aE as LegacyThreadContext, aF as IconArrowShareLeft, aG as IconEmojiSmile, aH as IconPeopleAdded, aI as IconBookmarkRemove, aJ as IconBellOff, aK as IconBubbleWideNotificationChatMessage, aL as IconEditBig, aM as IconSquareBehindSquare2_Copy, aN as IconUnpin, aO as IconCloseQuote2, aP as IconBubbleText6ChatMessage, aQ as IconDotGrid1x3Horizontal, aR as areMessageUIPropsEqual, aS as isDateSeparatorMessage, aT as isMessageBlocked, aU as messageHasSingleAttachment, aV as messageHasGiphyAttachment, aW as messageHasReactions, aX as isMessageEdited, aY as countEmojis, aZ as areMessagePropsEqual, a_ as getMessageActions, a$ as processMessages, b0 as insertIntro, b1 as getGroupStyles, b2 as getLastReceived, b3 as IconArrowUp, b4 as isIntroMessage, b5 as isLocalMessage, b6 as getIsFirstUnreadMessage, b7 as IconArrowDown, b8 as DEFAULT_NEXT_CHANNEL_PAGE_SIZE, b9 as EmptyStateIndicator, ba as getChannel, bb as IconMagnifyingGlassSearch, bc as IconCircleX, bd as useChannelListContext, be as DEFAULT_JUMP_TO_PAGE_SIZE, bf as ChannelListContextProvider, bg as IconArchive, bh as IconArrowBoxLeft, bi as IconCamera1, bj as IconExclamationCircle1, bk as ChatProvider, bl as TranslationProvider, bm as useThreadsViewContext, bn as IconBubbles, bo as IconArrowRotateRightLeftRepeatRefresh, bp as IconEyeOpen } from "../WithAudioPlayback-C1hfFIcu.mjs";
-import { bu, bx, dc, dd, de, df, dg, dh, bz, bC, by, bB, bD, di, bG, bH, bI, bJ, bK, bL, bM, bN, bO, bP, bQ, bR, bT, bS, bU, bV, bW, bX, bY, bZ, b_, b$, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, ca, cb, cc, cd, ce, cf, cg, ch, ci, cj, ck, cl, cm, cn, co, cp, cq, cr, cs, ct, cu, cv, cw, cx, cy, cz, cA, cB, cC, cD, cE, cF, cG, cH, cI, cJ, cK, cL, cM, cN, cO, cP, cQ, cR, cS, cT, cU, cV, cW, cX, cY, cZ, c_, dj, c$, da, db, dk, dl, dm, br, bF, bE, bs, bt, d0, d1, d7, d8, d4, d5, dn, d6, dp, d3, d2, bq, bA, bv, bw, d9 } from "../WithAudioPlayback-C1hfFIcu.mjs";
+import React, { useState, useEffect, useCallback, useLayoutEffect, useMemo, useContext, createContext, useRef, forwardRef, createElement, Component, Fragment as Fragment$1 } from "react";
+import { u as useHandleFileChangeWrapper, d as dataTransferItemsToFiles, r as renderAudio, t as toAudioBuffer, c as createFileFromBlobs, g as getExtensionFromMimeType, a as getRecordedMediaTypeFromMimeType } from "./audioProcessing.21cb49e1.mjs";
+import { u as useStateStore, a as useMessageComposerController, i as isMessageBounced, b as useChannelActionContext, C as ComponentContext, c as useTranslationContext, d as useChannelStateContext, e as useChatContext, f as isNotificationForPanel, B as BaseIcon, g as Button, I as IconPauseFill, h as IconPlayFill, j as getDefaultExportFromCjs, k as defaultTranslatorFunction, p as predefinedFormatters, L as LocalizedFormat, l as calendar, m as IconLoading, n as isNetworkSendFailure, v as validateAndGetMessage, o as isUserMuted, q as defaultPinPermissions, r as useThreadContext, s as usePopoverPosition, t as useComponentContext, w as IconXmark, x as IconUser, y as IconExclamationMarkFill, z as IconChevronRight, A as IconChevronLeft, D as IconArrowLeft, E as IconExclamationMark, F as IconNoSign, G as isMessageErrorRetryable, H as ACTIONS_NOT_WORKING_IN_THREAD, J as useNotificationTarget, K as IconArrowUpRight, M as addNotificationTargetTag, N as IconPin, O as mapToUserNameOrId, P as IconClock, Q as IconCheckmark1Small, R as IconChecks, S as getReadByTooltipText, T as messageHasAttachments, U as messageTextHasEmojisOnly, V as isDate, W as getDateString, X as IconTranslate, Y as useMessageComposerContext, Z as useIsCooldownActive, _ as IconCrossSmall, $ as IconImage, a0 as IconPoll, a1 as IconLocation, a2 as IconFile, a3 as IconLink, a4 as IconVideo, a5 as IconVideoFill, a6 as IconVoice, a7 as IconSave, a8 as IconBell, a9 as IconChevronDown, aa as IconPlusSmall, ab as IconCheckmark, ac as DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ad as IconTrophy, ae as IconReorder, af as IconMinusCircle, ag as IconSend, ah as IconAudio, ai as IconUserAdd, aj as IconMute, ak as IconFlag, al as IconUserRemove, am as IconAttachment, an as IconCommand, ao as CHANNEL_CONTAINER_ID, ap as IconPlus, aq as IconExclamationTriangle, ar as useAudioPlayer, as as IconRetry, at as IconArrowDownCircle, au as IconThunder, av as IconDelete, aw as IconUpload, ax as MessageComposerContextProvider, ay as useTypingContext, az as defaultDateTimeParser, aA as isLanguageSupported, aB as IconLayoutAlignLeft, aC as useChatViewContext, aD as MESSAGE_ACTIONS, aE as LegacyThreadContext, aF as IconReply, aG as IconEmoji, aH as IconMore, aI as IconUserCheck, aJ as IconUnsave, aK as IconBellOff, aL as IconNotification, aM as IconEdit, aN as IconCopy, aO as IconUnpin, aP as IconQuote, aQ as IconThread, aR as areMessageUIPropsEqual, aS as isDateSeparatorMessage, aT as isMessageBlocked, aU as messageHasSingleAttachment, aV as messageHasGiphyAttachment, aW as messageHasReactions, aX as isMessageEdited, aY as countEmojis, aZ as areMessagePropsEqual, a_ as getMessageActions, a$ as processMessages, b0 as insertIntro, b1 as getGroupStyles, b2 as getLastReceived, b3 as IconArrowUp, b4 as isIntroMessage, b5 as isLocalMessage, b6 as getIsFirstUnreadMessage, b7 as IconArrowDown, b8 as DEFAULT_NEXT_CHANNEL_PAGE_SIZE, b9 as EmptyStateIndicator, ba as getChannel, bb as IconSearch, bc as IconXCircle, bd as useChannelListContext, be as DEFAULT_JUMP_TO_PAGE_SIZE, bf as ChannelListContextProvider, bg as IconArchive, bh as IconLeave, bi as IconCamera, bj as IconExclamationCircleFill, bk as ChatProvider, bl as TranslationProvider, bm as useThreadsViewContext, bn as IconMessageBubbles, bo as IconRefresh, bp as IconEyeOpen } from "./WithAudioPlayback.89700cb5.mjs";
+import { bu, bx, c5, c6, c7, c8, c9, ca, bz, bC, by, bB, bD, cb, bG, bJ, bK, bM, bN, bH, bI, bP, bQ, bR, bL, bO, bS, bT, cc, bU, c3, c4, cd, ce, cf, br, bF, bE, bs, bt, bV, bW, c0, c1, bZ, b_, cg, b$, ch, bY, bX, bq, bA, bv, bw, c2 } from "./WithAudioPlayback.89700cb5.mjs";
 import { StateStore, formatMessage, MessageComposer as MessageComposer$1, isGiphyAttachment, isScrapedContent, isLocalVideoAttachment, isVideoAttachment, isLocalImageAttachment, isImageAttachment, isAudioAttachment, isVoiceRecordingAttachment, isFileAttachment, isVoteAnswer, VotingVisibility, isLocalVoiceRecordingAttachment, isLocalAudioAttachment, isLocalFileAttachment, isLocalAttachment, LinkPreviewsManager, SearchController, ChannelSearchSource, UserSearchSource, MessageSearchSource, StreamChat, isSharedLocationResponse, LiveLocationManager } from "stream-chat";
 import throttle from "lodash.throttle";
 import * as linkify from "linkifyjs";
@@ -19,7 +19,6 @@ import { visit, SKIP } from "unist-util-visit";
 import i18n from "i18next";
 import Dayjs from "dayjs";
 import uniqBy from "lodash.uniqby";
-import { match, P } from "ts-pattern";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
 import debounce from "lodash.debounce";
 import fixWebmDuration from "fix-webm-duration";
@@ -72,10 +71,11 @@ const useAIState = (channel) => {
   return { aiState };
 };
 class DialogManager {
-  constructor({ id } = {}) {
+  constructor({ closeOnClickOutside = true, id } = {}) {
     this.state = new StateStore({
       dialogsById: {}
     });
+    this.closeOnClickOutside = closeOnClickOutside;
     this.id = id ?? nanoid();
   }
   get openDialogCount() {
@@ -90,13 +90,14 @@ class DialogManager {
   get(id) {
     return this.state.getLatestValue().dialogsById[id];
   }
-  getOrCreate({ id }) {
+  getOrCreate({ closeOnClickOutside, id }) {
     let dialog = this.state.getLatestValue().dialogsById[id];
     if (!dialog) {
       dialog = {
         close: () => {
           this.close(id);
         },
+        closeOnClickOutside,
         id,
         isOpen: false,
         open: () => {
@@ -112,21 +113,22 @@ class DialogManager {
       };
       this.state.next((current) => ({
         ...current,
-        ...{ dialogsById: { ...current.dialogsById, [id]: dialog } }
+        dialogsById: { ...current.dialogsById, [id]: dialog }
       }));
     }
-    if (dialog.removalTimeout) {
-      clearTimeout(dialog.removalTimeout);
+    const shouldUpdateDialogSettings = dialog.closeOnClickOutside !== closeOnClickOutside || !!dialog.removalTimeout;
+    if (shouldUpdateDialogSettings) {
+      if (dialog.removalTimeout) clearTimeout(dialog.removalTimeout);
+      dialog = {
+        ...dialog,
+        closeOnClickOutside,
+        removalTimeout: void 0
+      };
       this.state.next((current) => ({
         ...current,
-        ...{
-          dialogsById: {
-            ...current.dialogsById,
-            [id]: {
-              ...dialog,
-              removalTimeout: void 0
-            }
-          }
+        dialogsById: {
+          ...current.dialogsById,
+          [id]: dialog
         }
       }));
     }
@@ -203,7 +205,11 @@ class DialogManager {
     }));
   }
 }
-const useDialog = ({ dialogManagerId, id }) => {
+const useDialog = ({
+  closeOnClickOutside,
+  dialogManagerId,
+  id
+}) => {
   const { dialogManager } = useDialogManager({ dialogManagerId });
   useEffect(
     () => () => {
@@ -211,7 +217,7 @@ const useDialog = ({ dialogManagerId, id }) => {
     },
     [dialogManager, id]
   );
-  return dialogManager.getOrCreate({ id });
+  return dialogManager.getOrCreate({ closeOnClickOutside, id });
 };
 const useDialogOnNearestManager = ({ id }) => {
   const { dialogManager } = useNearestDialogManagerContext() ?? {};
@@ -258,9 +264,37 @@ const Portal = ({
   if (!portalDestination) return null;
   return createPortal(children, portalDestination);
 };
+const shouldCloseOnOutsideClick = ({
+  dialog,
+  managerCloseOnClickOutside
+}) => dialog.closeOnClickOutside ?? managerCloseOnClickOutside;
 const DialogPortalDestination = () => {
   const { dialogManager } = useNearestDialogManagerContext() ?? {};
   const openedDialogCount = useOpenedDialogCount({ dialogManagerId: dialogManager?.id });
+  const [destinationRoot, setDestinationRoot] = useState(null);
+  useEffect(() => {
+    if (!destinationRoot || !dialogManager) return;
+    const handleDocumentClick = (event) => {
+      if (destinationRoot.contains(event.target)) return;
+      setTimeout(() => {
+        Object.values(dialogManager.state.getLatestValue().dialogsById).forEach(
+          (dialog) => {
+            if (!dialog.isOpen) return;
+            if (!shouldCloseOnOutsideClick({
+              dialog,
+              managerCloseOnClickOutside: dialogManager.closeOnClickOutside
+            }))
+              return;
+            dialogManager.close(dialog.id);
+          }
+        );
+      }, 0);
+    };
+    document.addEventListener("click", handleDocumentClick, { capture: true });
+    return () => {
+      document.removeEventListener("click", handleDocumentClick, { capture: true });
+    };
+  }, [destinationRoot, dialogManager]);
   if (!openedDialogCount) return null;
   return /* @__PURE__ */ jsx(
     "div",
@@ -268,7 +302,22 @@ const DialogPortalDestination = () => {
       className: "str-chat__dialog-overlay",
       "data-str-chat__portal-id": dialogManager?.id,
       "data-testid": "str-chat__dialog-overlay",
-      onClick: () => dialogManager?.closeAll(),
+      onClick: (event) => {
+        if (!dialogManager) return;
+        if (event.target !== event.currentTarget) return;
+        Object.values(dialogManager.state.getLatestValue().dialogsById).forEach(
+          (dialog) => {
+            if (!dialog.isOpen) return;
+            if (!shouldCloseOnOutsideClick({
+              dialog,
+              managerCloseOnClickOutside: dialogManager.closeOnClickOutside
+            }))
+              return;
+            dialogManager.close(dialog.id);
+          }
+        );
+      },
+      ref: setDestinationRoot,
       style: {
         "--str-chat__dialog-overlay-height": openedDialogCount > 0 ? "100%" : "0"
       }
@@ -290,11 +339,16 @@ const DialogPortalEntry = ({
 };
 const dialogManagersRegistry = new StateStore({});
 const getDialogManager = (id) => dialogManagersRegistry.getLatestValue()[id];
-const getOrCreateDialogManager = (id) => {
+const getOrCreateDialogManager = ({
+  closeOnClickOutside,
+  id
+}) => {
   let manager = getDialogManager(id);
   if (!manager) {
-    manager = new DialogManager({ id });
+    manager = new DialogManager({ closeOnClickOutside, id });
     dialogManagersRegistry.partialNext({ [id]: manager });
+  } else if (typeof closeOnClickOutside === "boolean") {
+    manager.closeOnClickOutside = closeOnClickOutside;
   }
   return manager;
 };
@@ -305,20 +359,21 @@ const removeDialogManager = (id) => {
 const DialogManagerProviderContext = React.createContext(void 0);
 const DialogManagerProvider = ({
   children,
+  closeOnClickOutside,
   id
 }) => {
   const [dialogManager, setDialogManager] = useState(() => {
     if (id) return getDialogManager(id) ?? null;
-    return new DialogManager();
+    return new DialogManager({ closeOnClickOutside });
   });
   useEffect(() => {
     if (!id) return;
-    setDialogManager(getOrCreateDialogManager(id));
+    setDialogManager(getOrCreateDialogManager({ closeOnClickOutside, id }));
     return () => {
       removeDialogManager(id);
       setDialogManager(null);
     };
-  }, [id]);
+  }, [closeOnClickOutside, id]);
   if (!dialogManager) return null;
   return /* @__PURE__ */ jsxs(DialogManagerProviderContext.Provider, { value: { dialogManager }, children: [
     children,
@@ -662,39 +717,37 @@ const IconGiphy = ({ className, ...props }) => /* @__PURE__ */ jsxs(
     className: clsx("str-chat__icon--giphy", className),
     viewBox: "0 0 16 16",
     children: [
-      /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_4197_15218)", children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            clipRule: "evenodd",
-            d: "M3.33674 1.82861H12.6639V14.171H3.33594L3.33674 1.82861Z",
-            fill: "black",
-            fillRule: "evenodd"
-          }
-        ),
-        /* @__PURE__ */ jsx("path", { d: "M1.47217 1.37109H3.33697V14.6287H1.47217V1.37109Z", fill: "#04FF8E" }),
-        /* @__PURE__ */ jsx("path", { d: "M12.6631 5.02881H14.5279V14.6288H12.6631V5.02881Z", fill: "#8E2EFF" }),
-        /* @__PURE__ */ jsx("path", { d: "M1.47217 14.1714H14.5282V16.0002H1.47217V14.1714Z", fill: "#00C5FF" }),
-        /* @__PURE__ */ jsx("path", { d: "M1.47217 0H8.93297V1.8288H1.47217V0Z", fill: "#FFF152" }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M12.663 3.6568V1.8288H10.7974V0H8.93262V5.4856H14.5278V3.6568",
-            fill: "#FF5B5B"
-          }
-        ),
-        /* @__PURE__ */ jsx("path", { d: "M12.6631 7.31464V5.48584H14.5279", fill: "#551C99" }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            clipRule: "evenodd",
-            d: "M8.93298 0V1.8288H7.06738",
-            fill: "#999131",
-            fillRule: "evenodd"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_4197_15218", children: /* @__PURE__ */ jsx("rect", { fill: "white", height: "16", width: "16" }) }) })
+      /* @__PURE__ */ jsx("rect", { fill: "black", height: "16", rx: "8", width: "16" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          clipRule: "evenodd",
+          d: "M5.27976 4.40015H10.7206V11.5999H5.2793L5.27976 4.40015Z",
+          fill: "black",
+          fillRule: "evenodd"
+        }
+      ),
+      /* @__PURE__ */ jsx("path", { d: "M4.19189 4.1333H5.27969V11.8669H4.19189V4.1333Z", fill: "#04FF8E" }),
+      /* @__PURE__ */ jsx("path", { d: "M10.7202 6.26685H11.808V11.8668H10.7202V6.26685Z", fill: "#8E2EFF" }),
+      /* @__PURE__ */ jsx("path", { d: "M4.19189 11.5999H11.8079V12.6667H4.19189V11.5999Z", fill: "#00C5FF" }),
+      /* @__PURE__ */ jsx("path", { d: "M4.19189 3.33325H8.54403V4.40005H4.19189V3.33325Z", fill: "#FFF152" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M10.72 5.46638V4.40005H9.63174V3.33325H8.54395V6.53318H11.8078V5.46638",
+          fill: "#FF5B5B"
+        }
+      ),
+      /* @__PURE__ */ jsx("path", { d: "M10.7202 7.6V6.5332H11.808", fill: "#551C99" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          clipRule: "evenodd",
+          d: "M8.54432 3.33325V4.40005H7.45605",
+          fill: "#999131",
+          fillRule: "evenodd"
+        }
+      )
     ]
   }
 );
@@ -708,7 +761,7 @@ const PlayButton = ({ className, isPlaying, ...props }) => /* @__PURE__ */ jsx(
     size: "sm",
     variant: "secondary",
     ...props,
-    children: isPlaying ? /* @__PURE__ */ jsx(IconPause, {}) : /* @__PURE__ */ jsx(IconPlaySolid, {})
+    children: isPlaying ? /* @__PURE__ */ jsx(IconPauseFill, {}) : /* @__PURE__ */ jsx(IconPlayFill, {})
   }
 );
 const Anonymous$b = "Anonym";
@@ -7232,10 +7285,10 @@ function requireRelativeTime() {
         function i(r2, t2, e2, o2) {
           return n.fromToBase(r2, t2, e2, o2);
         }
-        e.en.relativeTime = o, n.fromToBase = function(t2, n2, i2, d10, u2) {
+        e.en.relativeTime = o, n.fromToBase = function(t2, n2, i2, d2, u2) {
           for (var a, f, s, l = i2.$locale().relativeTime || o, h = r.thresholds || [{ l: "s", r: 44, d: "second" }, { l: "m", r: 89 }, { l: "mm", r: 44, d: "minute" }, { l: "h", r: 89 }, { l: "hh", r: 21, d: "hour" }, { l: "d", r: 35 }, { l: "dd", r: 25, d: "day" }, { l: "M", r: 45 }, { l: "MM", r: 10, d: "month" }, { l: "y", r: 17 }, { l: "yy", d: "year" }], m = h.length, c = 0; c < m; c += 1) {
             var y = h[c];
-            y.d && (a = d10 ? e(t2).diff(i2, y.d, true) : i2.diff(t2, y.d, true));
+            y.d && (a = d2 ? e(t2).diff(i2, y.d, true) : i2.diff(t2, y.d, true));
             var p = (r.rounding || Math.round)(Math.abs(a));
             if (s = a > 0, p <= y.r || !y.r) {
               p <= 1 && c > 0 && (y = h[c - 1]);
@@ -7730,7 +7783,7 @@ class NotificationTranslationTopic extends TranslationTopic {
   }
 }
 var de$1 = { exports: {} };
-var de2 = de$1.exports;
+var de = de$1.exports;
 var hasRequiredDe;
 function requireDe() {
   if (hasRequiredDe) return de$1.exports;
@@ -7738,7 +7791,7 @@ function requireDe() {
   (function(module, exports$1) {
     !(function(e, n) {
       module.exports = n(Dayjs);
-    })(de2, function(e) {
+    })(de, function(e) {
       e = e && e.hasOwnProperty("default") ? e.default : e;
       var n = { s: "ein paar Sekunden", m: ["eine Minute", "einer Minute"], mm: "%d Minuten", h: ["eine Stunde", "einer Stunde"], hh: "%d Stunden", d: ["ein Tag", "einem Tag"], dd: ["%d Tage", "%d Tagen"], M: ["ein Monat", "einem Monat"], MM: ["%d Monate", "%d Monaten"], y: ["ein Jahr", "einem Jahr"], yy: ["%d Jahre", "%d Jahren"] };
       function t(e2, t2, a2) {
@@ -8447,7 +8500,7 @@ const LoadingChannels = () => /* @__PURE__ */ jsxs("div", { className: "str-chat
   /* @__PURE__ */ jsx(LoadingItems, {}),
   /* @__PURE__ */ jsx(LoadingItems, {})
 ] });
-const LoadingIndicator = (props) => /* @__PURE__ */ jsx(IconLoadingCircle, { ...props, className: "str-chat__loading-indicator" });
+const LoadingIndicator = (props) => /* @__PURE__ */ jsx(IconLoading, { ...props, className: "str-chat__loading-indicator" });
 const UnMemoizedCustomNotification = (props) => {
   const { active, children, className, type } = props;
   if (!active) return null;
@@ -9037,6 +9090,7 @@ function useDialogAnchor({
     setPopperElement(null);
   }
   return {
+    placement: stabilisedChosenPlacement ?? chosenPlacement,
     setPopperElement,
     styles: {
       left: x ?? 0,
@@ -9049,6 +9103,8 @@ const DialogAnchor = ({
   allowFlip = true,
   children,
   className,
+  closeOnClickOutside,
+  closeTransitionMs = 0,
   dialogManagerId,
   focus = true,
   id,
@@ -9061,12 +9117,44 @@ const DialogAnchor = ({
   updatePositionOnContentResize,
   ...restDivProps
 }) => {
-  const dialog = useDialog({ dialogManagerId, id });
+  const dialog = useDialog({ closeOnClickOutside, dialogManagerId, id });
   const open = useDialogIsOpen(id, dialogManagerId);
-  const { setPopperElement, styles } = useDialogAnchor({
+  const [shouldRender, setShouldRender] = useState(open);
+  const closeTimeoutRef = useRef(null);
+  const isClosing = !open && shouldRender;
+  useEffect(() => {
+    if (open) {
+      setShouldRender(true);
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+      return;
+    }
+    if (!shouldRender) return;
+    if (!closeTransitionMs) {
+      setShouldRender(false);
+      return;
+    }
+    closeTimeoutRef.current = setTimeout(() => {
+      setShouldRender(false);
+      closeTimeoutRef.current = null;
+    }, closeTransitionMs);
+  }, [closeTransitionMs, open, shouldRender]);
+  useEffect(
+    () => () => {
+      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+    },
+    []
+  );
+  const {
+    placement: chosenPlacement,
+    setPopperElement,
+    styles
+  } = useDialogAnchor({
     allowFlip,
     offset,
-    open,
+    open: shouldRender,
     placement,
     referenceElement,
     updateKey,
@@ -9083,7 +9171,7 @@ const DialogAnchor = ({
       document.removeEventListener("keyup", hideOnEscape);
     };
   }, [dialog, open]);
-  if (!open) {
+  if (!shouldRender) {
     return null;
   }
   return /* @__PURE__ */ jsx(DialogPortalEntry, { dialogId: id, dialogManagerId, children: /* @__PURE__ */ jsx(FocusScope, { autoFocus: focus, contain: trapFocus, restoreFocus: true, children: /* @__PURE__ */ jsx(
@@ -9091,6 +9179,8 @@ const DialogAnchor = ({
     {
       ...restDivProps,
       className: clsx("str-chat__dialog-contents", className),
+      "data-str-chat-dialog-state": isClosing ? "closing" : "open",
+      "data-str-chat-placement": chosenPlacement,
       "data-testid": "str-chat__dialog-contents",
       ref: setPopperElement,
       style: styles,
@@ -9122,7 +9212,7 @@ const DefaultCalloutDialog = ({ children, className, onClose }) => /* @__PURE__
       onClick: onClose,
       size: "sm",
       variant: "secondary",
-      children: /* @__PURE__ */ jsx(IconCrossMedium, {})
+      children: /* @__PURE__ */ jsx(IconXmark, {})
     }
   )
 ] });
@@ -9192,7 +9282,7 @@ const Avatar = ({
           }
         ) : /* @__PURE__ */ jsxs(Fragment, { children: [
           !!sizeAwareInitials.length && /* @__PURE__ */ jsx("div", { className: "str-chat__avatar-initials", "data-testid": "avatar-fallback", children: sizeAwareInitials }),
-          !sizeAwareInitials.length && /* @__PURE__ */ jsx(IconPeople, {})
+          !sizeAwareInitials.length && /* @__PURE__ */ jsx(IconUser, {})
         ] })
       ]
     }
@@ -9221,7 +9311,7 @@ const ErrorBadge = ({
   className,
   size = "sm",
   ...rest
-}) => /* @__PURE__ */ jsx(Badge, { ...rest, className, size, variant: "error", children: /* @__PURE__ */ jsx(IconExclamation, {}) });
+}) => /* @__PURE__ */ jsx(Badge, { ...rest, className, size, variant: "error", children: /* @__PURE__ */ jsx(IconExclamationMarkFill, {}) });
 function AvatarStack({
   badgeSize,
   component: Component2 = "div",
@@ -9433,16 +9523,152 @@ const EmojiContextMenuButton = ({
     ]
   }
 );
-const ContextMenuButton = ({
-  onBlur,
-  onFocus,
-  ...props
+const ContextMenuButtonWithSubmenu = ({
+  children,
+  className,
+  Submenu,
+  submenuContainerProps,
+  submenuPlacement = "right-start",
+  submenuRollAxis = "x",
+  ...buttonProps
 }) => {
+  const { className: submenuClassName, ...submenuContainerRestProps } = submenuContainerProps ?? {};
+  const buttonRef = useRef(null);
+  const [dialogContainer, setDialogContainer] = useState(null);
+  const keepSubmenuOpenFlag = useRef(false);
+  const dialogCloseTimeout = useRef(null);
+  const dialogId2 = useMemo(() => `submenu-${Math.random().toString(36).slice(2)}`, []);
+  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
+  const dialogIsOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
+  const {
+    placement: chosenPlacement,
+    setPopperElement,
+    styles
+  } = useDialogAnchor({
+    open: dialogIsOpen,
+    placement: submenuPlacement,
+    referenceElement: buttonRef.current
+  });
+  const closeDialogLazily = useCallback(() => {
+    if (dialogCloseTimeout.current) clearTimeout(dialogCloseTimeout.current);
+    dialogCloseTimeout.current = setTimeout(() => {
+      if (keepSubmenuOpenFlag.current) return;
+      dialog.close();
+    }, 100);
+  }, [dialog]);
+  const keepSubmenuOpen = useCallback(() => {
+    keepSubmenuOpenFlag.current = true;
+  }, []);
+  const allowToCloseSubmenu = useCallback(() => {
+    keepSubmenuOpenFlag.current = false;
+  }, []);
+  const closeSubmenu = useCallback(() => {
+    allowToCloseSubmenu();
+    closeDialogLazily();
+  }, [allowToCloseSubmenu, closeDialogLazily]);
+  const handleClose = useCallback(
+    (event) => {
+      const parentButton = buttonRef.current;
+      if (!dialogIsOpen || !parentButton) return;
+      event.stopPropagation();
+      closeDialogLazily();
+      parentButton.focus();
+    },
+    [closeDialogLazily, dialogIsOpen, buttonRef]
+  );
+  const handleFocusParentButton = () => {
+    if (dialogIsOpen) return;
+    dialog.open();
+    keepSubmenuOpen();
+  };
+  useEffect(() => {
+    const parentButton = buttonRef.current;
+    if (!dialogIsOpen || !parentButton) return;
+    const hideOnEscape = (event) => {
+      if (event.key !== "Escape") return;
+      handleClose(event);
+      closeSubmenu();
+    };
+    document.addEventListener("keyup", hideOnEscape, { capture: true });
+    return () => {
+      document.removeEventListener("keyup", hideOnEscape, { capture: true });
+    };
+  }, [dialogIsOpen, handleClose, closeSubmenu]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseContextMenuButton,
+      {
+        "aria-selected": "false",
+        className: clsx(className, "str_chat__button-with-submenu", {
+          "str_chat__button-with-submenu--submenu-open": dialogIsOpen
+        }),
+        hasSubMenu: true,
+        onBlur: closeSubmenu,
+        onClick: (event) => {
+          event.stopPropagation();
+          dialog.toggle();
+        },
+        onFocus: handleFocusParentButton,
+        onMouseEnter: handleFocusParentButton,
+        onMouseLeave: closeSubmenu,
+        role: "option",
+        ...buttonProps,
+        ref: buttonRef,
+        children
+      }
+    ),
+    dialogIsOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx("str-chat__context-menu__submenu-container", submenuClassName),
+        "data-str-chat-placement": chosenPlacement,
+        "data-str-chat-roll-axis": submenuRollAxis,
+        onBlur: (event) => {
+          const isBlurredDescendant = event.relatedTarget instanceof Node && dialogContainer?.contains(event.relatedTarget);
+          if (isBlurredDescendant) return;
+          closeSubmenu();
+        },
+        onFocus: keepSubmenuOpen,
+        onMouseEnter: keepSubmenuOpen,
+        onMouseLeave: closeSubmenu,
+        ref: (element) => {
+          setPopperElement(element);
+          setDialogContainer(element);
+        },
+        style: styles,
+        tabIndex: -1,
+        ...submenuContainerRestProps,
+        children: /* @__PURE__ */ jsx(Submenu, {})
+      }
+    )
+  ] });
+};
+const ContextMenuButton = (props) => {
+  const {
+    Submenu,
+    submenuContainerProps,
+    submenuPlacement,
+    submenuRollAxis,
+    ...buttonProps
+  } = props;
   const [isFocused, setIsFocused] = useState(false);
+  if (Submenu) {
+    return /* @__PURE__ */ jsx(
+      ContextMenuButtonWithSubmenu,
+      {
+        ...buttonProps,
+        Submenu,
+        submenuContainerProps,
+        submenuPlacement,
+        submenuRollAxis
+      }
+    );
+  }
+  const { onBlur, onFocus, ...baseButtonProps } = buttonProps;
   return /* @__PURE__ */ jsx(
     BaseContextMenuButton,
     {
-      ...props,
+      ...baseButtonProps,
       "aria-selected": isFocused ? "true" : "false",
       onBlur: (e) => {
         setIsFocused(false);
@@ -9491,12 +9717,14 @@ function ContextMenuContent({
   backLabel = "Back",
   children,
   className,
+  enableAnimations = true,
   Header: Header2,
   items,
   ItemsWrapper,
   menuClassName,
   onClose,
   onMenuLevelChange,
+  transitionDirection,
   ...props
 }) {
   const rootLevel = useMemo(
@@ -9509,6 +9737,7 @@ function ContextMenuContent({
     [Header2, items, ItemsWrapper, menuClassName]
   );
   const [menuStack, setMenuStack] = useState(() => [rootLevel]);
+  const [menuBodyAnimationKey, setMenuBodyAnimationKey] = useState(0);
   const activeMenu = menuStack[menuStack.length - 1];
   const ActiveMenuItemsWrapper = activeMenu.ItemsWrapper ?? React.Fragment;
   const closeMenu = useCallback(() => {
@@ -9532,10 +9761,9 @@ function ContextMenuContent({
     [ItemsWrapper]
   );
   const returnToParentMenu = useCallback(() => {
-    setMenuStack(
-      (current) => current.length > 1 ? current.slice(0, current.length - 1) : current
-    );
-  }, []);
+    if (menuStack.length <= 1) return;
+    setMenuStack((current) => current.slice(0, current.length - 1));
+  }, [menuStack.length]);
   useEffect(() => {
     setMenuStack((current) => {
       if (current.length === 1 && current[0] === rootLevel) return current;
@@ -9545,42 +9773,116 @@ function ContextMenuContent({
   useEffect(() => {
     onMenuLevelChange?.(menuStack.length);
   }, [menuStack.length, onMenuLevelChange]);
-  return /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: { closeMenu, openSubmenu, returnToParentMenu }, children: /* @__PURE__ */ jsxs(ContextMenuRoot, { className: clsx(className, activeMenu.menuClassName), ...props, children: [
-    activeMenu.Header ? /* @__PURE__ */ jsx(activeMenu.Header, {}) : menuStack.length > 1 ? /* @__PURE__ */ jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxs(ContextMenuBackButton, { onClick: returnToParentMenu, children: [
-      /* @__PURE__ */ jsx(IconChevronLeft, {}),
-      /* @__PURE__ */ jsx("span", { children: backLabel })
-    ] }) }) : null,
-    /* @__PURE__ */ jsx(ContextMenuBody, { children: activeMenu.Submenu ? /* @__PURE__ */ jsx(activeMenu.Submenu, {}) : /* @__PURE__ */ jsx(ActiveMenuItemsWrapper, { children: typeof children !== "undefined" ? children : activeMenu.items?.map((Item2, index) => /* @__PURE__ */ jsx(Item2, {}, `context-menu-item-${index}`)) }) })
-  ] }) });
+  useEffect(() => {
+    if (!transitionDirection) return;
+    setMenuBodyAnimationKey((value) => value + 1);
+  }, [transitionDirection, menuStack.length]);
+  return /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: { closeMenu, openSubmenu, returnToParentMenu }, children: /* @__PURE__ */ jsxs(
+    ContextMenuRoot,
+    {
+      className: clsx(className, activeMenu.menuClassName),
+      "data-str-chat-enable-animations": enableAnimations,
+      ...props,
+      children: [
+        activeMenu.Header ? /* @__PURE__ */ jsx(activeMenu.Header, {}) : menuStack.length > 1 ? /* @__PURE__ */ jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxs(ContextMenuBackButton, { onClick: returnToParentMenu, children: [
+          /* @__PURE__ */ jsx(IconChevronLeft, {}),
+          /* @__PURE__ */ jsx("span", { children: backLabel })
+        ] }) }) : null,
+        /* @__PURE__ */ jsx(
+          ContextMenuBody,
+          {
+            className: clsx({
+              "str-chat__context-menu__body--submenu-backward": transitionDirection === "backward",
+              "str-chat__context-menu__body--submenu-forward": transitionDirection === "forward"
+            }),
+            children: activeMenu.Submenu ? /* @__PURE__ */ jsx(activeMenu.Submenu, {}) : /* @__PURE__ */ jsx(ActiveMenuItemsWrapper, { children: typeof children !== "undefined" ? children : activeMenu.items?.map((Item2, index) => /* @__PURE__ */ jsx(Item2, {}, `context-menu-item-${index}`)) })
+          },
+          `context-menu-body-${menuStack.length}-${menuBodyAnimationKey}`
+        )
+      ]
+    }
+  ) });
 }
 const ContextMenu = (props) => {
+  const { ContextMenuContent: ContextMenuContentComponent = ContextMenuContent } = useComponentContext();
   const {
     allowFlip,
+    closeOnClickOutside,
+    closeTransitionMs = 130,
     dialogManagerId,
     focus,
     id,
     placement,
     referenceElement,
+    submenuTransitionDurationMs,
     tabIndex,
     trapFocus,
     ...menuProps
   } = props;
+  const resolvedSubmenuTransitionDurationMs = submenuTransitionDurationMs ?? 460;
   const isAnchored = id != null;
   const [menuLevel, setMenuLevel] = useState(1);
+  const [transitionDirection, setTransitionDirection] = useState(void 0);
+  const [contentResetToken, setContentResetToken] = useState(0);
+  const transitionTimeoutRef = useRef(null);
+  const previousMenuLevelRef = useRef(1);
   const open = useDialogIsOpen(id ?? "", dialogManagerId);
+  const previousOpenRef = useRef(open);
   useEffect(() => {
-    if (isAnchored && !open) setMenuLevel(1);
+    if (!isAnchored) return;
+    if (previousOpenRef.current && !open) {
+      setMenuLevel(1);
+      setTransitionDirection(void 0);
+      setContentResetToken((value) => value + 1);
+      previousMenuLevelRef.current = 1;
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current);
+        transitionTimeoutRef.current = null;
+      }
+    }
+    previousOpenRef.current = open;
   }, [isAnchored, open]);
-  const content = /* @__PURE__ */ jsx(
-    ContextMenuContent,
+  useEffect(
+    () => () => {
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current);
+      }
+    },
+    []
+  );
+  const handleMenuLevelChange = useCallback(
+    (level) => {
+      if (isAnchored) {
+        const previousLevel = previousMenuLevelRef.current;
+        if (level !== previousLevel) {
+          setTransitionDirection(level > previousLevel ? "forward" : "backward");
+          if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
+          transitionTimeoutRef.current = setTimeout(() => {
+            setTransitionDirection(void 0);
+            transitionTimeoutRef.current = null;
+          }, resolvedSubmenuTransitionDurationMs);
+        }
+        previousMenuLevelRef.current = level;
+        setMenuLevel(level);
+        return;
+      }
+      menuProps.onMenuLevelChange?.(level);
+    },
+    [isAnchored, menuProps, resolvedSubmenuTransitionDurationMs]
+  );
+  const content = /* @__PURE__ */ createElement(
+    ContextMenuContentComponent,
     {
       ...menuProps,
-      onMenuLevelChange: isAnchored ? setMenuLevel : menuProps.onMenuLevelChange
+      key: `context-menu-content-${contentResetToken}`,
+      onMenuLevelChange: handleMenuLevelChange,
+      transitionDirection
     }
   );
   if (isAnchored) {
     const {
       backLabel: _b,
+      enableAnimations: _ea,
       Header: _h,
       items: _i,
       ItemsWrapper: _w,
@@ -9593,6 +9895,8 @@ const ContextMenu = (props) => {
       DialogAnchor,
       {
         allowFlip,
+        closeOnClickOutside,
+        closeTransitionMs,
         dialogManagerId,
         focus,
         id,
@@ -9623,7 +9927,7 @@ const PromptHeader = ({ className, close, description, title }) => /* @__PURE__
       onClick: close,
       size: "sm",
       variant: "secondary",
-      children: /* @__PURE__ */ jsx(IconCrossMedium, {})
+      children: /* @__PURE__ */ jsx(IconXmark, {})
     }
   )
 ] });
@@ -9692,7 +9996,7 @@ const ViewerHeader = ({
       onClick: close,
       size: "sm",
       variant: "secondary",
-      children: /* @__PURE__ */ jsx(IconCrossMedium, {})
+      children: /* @__PURE__ */ jsx(IconXmark, {})
     }
   )
 ] });
@@ -9829,7 +10133,7 @@ function MessageBouncePrompt({ children }) {
           Alert.Header,
           {
             className: "str-chat__message-bounce-alert-header",
-            Icon: IconExclamationCircle,
+            Icon: IconExclamationMark,
             title: !children ? t("This message did not meet our content guidelines") : void 0,
             children
           }
@@ -9880,7 +10184,7 @@ const MessageBubble = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 const MessageDeletedBubble = () => {
   const { t } = useTranslationContext();
   return /* @__PURE__ */ jsx(MessageBubble, { "data-testid": "message-deleted-bubble", children: /* @__PURE__ */ jsxs("div", { className: "str-chat__message-text", children: [
-    /* @__PURE__ */ jsx(IconCircleBanSign, {}),
+    /* @__PURE__ */ jsx(IconNoSign, {}),
     /* @__PURE__ */ jsx("span", { children: t("Message deleted") })
   ] }) });
 };
@@ -9930,7 +10234,9 @@ const useBaseMessageActionSetFilter = (messageActionSet, disable = false) => {
     if (isBounced || isInitialMessage || // not sure whether this thing even works anymore
     !message.type || message.type === "system" || message.type === "ephemeral" || message.status === "sending")
       return [];
-    return messageActionSet.filter(({ type }) => {
+    return messageActionSet.filter((action) => {
+      if (action.placement === "quick-dropdown-toggle") return true;
+      const type = action.type;
       if (ACTIONS_NOT_WORKING_IN_THREAD.includes(type) && isMessageThreadReply)
         return false;
       if (message.error) {
@@ -10021,7 +10327,7 @@ const MessageAlsoSentInChannelIndicator = () => {
   };
   if (!message?.show_in_channel) return null;
   return /* @__PURE__ */ jsxs("div", { className: "str-chat__message-also-sent-in-channel", role: "status", children: [
-    /* @__PURE__ */ jsx(IconArrowRightUp, {}),
+    /* @__PURE__ */ jsx(IconArrowUpRight, {}),
     /* @__PURE__ */ jsx("span", { children: threadList ? t("Also sent in channel") : t("Replied to a thread") }),
     /* @__PURE__ */ jsx("span", { children: " · " }),
     /* @__PURE__ */ jsx(
@@ -10235,7 +10541,7 @@ const UnMemoizedMessageStatus = (props) => {
               children: t("Delivered")
             }
           ),
-          /* @__PURE__ */ jsx(IconDoubleCheckmark1Small, { className: "str-chat__message-status-delivered" })
+          /* @__PURE__ */ jsx(IconChecks, { className: "str-chat__message-status-delivered" })
         ] })),
         read && (MessageReadStatus ? /* @__PURE__ */ jsx(MessageReadStatus, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
@@ -10247,7 +10553,7 @@ const UnMemoizedMessageStatus = (props) => {
               children: getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)
             }
           ),
-          /* @__PURE__ */ jsx(IconDoubleCheckmark1Small, { className: "str-chat__message-status-read" }),
+          /* @__PURE__ */ jsx(IconChecks, { className: "str-chat__message-status-read" }),
           readersWithoutOwnUser.length > 1 && /* @__PURE__ */ jsx(
             "span",
             {
@@ -10277,14 +10583,14 @@ const matchMarkdownLinks = (message) => {
   const regexMdLinks = /\[([^[]+)\](\(.*\))/gm;
   const matches = message.match(regexMdLinks);
   const singleMatch = /\[([^[]+)\]\((.*)\)/;
-  const links = matches ? matches.map((match2) => {
-    const i = singleMatch.exec(match2);
+  const links = matches ? matches.map((match) => {
+    const i = singleMatch.exec(match);
     return i && [i[1], i[2]];
   }) : [];
   return links.flat();
 };
 const emojiMarkdownPlugin = () => {
-  const replace = (match2) => u("element", { properties: {}, tagName: "emoji" }, [u("text", match2)]);
+  const replace = (match) => u("element", { properties: {}, tagName: "emoji" }, [u("text", match)]);
   const transform2 = (node) => findAndReplace(node, [emojiRegex(), replace]);
   return transform2;
 };
@@ -10294,13 +10600,13 @@ const mentionsMarkdownPlugin = (mentioned_users) => () => {
     mentioned_usernames.map((username) => `@${username}`).join("|"),
     "g"
   );
-  const replace = (match2) => {
-    const usernameOrId = match2.replace("@", "");
+  const replace = (match) => {
+    const usernameOrId = match.replace("@", "");
     const user = mentioned_users.find(
       ({ id, name }) => name === usernameOrId || id === usernameOrId
     );
     return u("element", { mentionedUser: user, properties: {}, tagName: "mention" }, [
-      u("text", match2)
+      u("text", match)
     ]);
   };
   const transform2 = (tree) => {
@@ -10405,12 +10711,12 @@ const plusPlusToEmphasis = () => {
     if (node.type !== "text" || parent == null || typeof index !== "number") return;
     const value = node.value;
     INS_REGEX.lastIndex = 0;
-    let match2;
+    let match;
     let last = 0;
     const out = [];
-    while (match2 = INS_REGEX.exec(value)) {
-      const [full, inner] = match2;
-      const start = match2.index;
+    while (match = INS_REGEX.exec(value)) {
+      const [full, inner] = match;
+      const start = match.index;
       if (start > last) out.push({ type: "text", value: value.slice(last, start) });
       out.push({
         children: [{ type: "text", value: inner }],
@@ -11739,7 +12045,7 @@ const ImagePlaceholder = ({ className }) => {
       className: clsx("str-chat__image-placeholder", className),
       "data-testid": "str-chat__base-image-placeholder",
       role: "img",
-      children: /* @__PURE__ */ jsx(IconImages1Alt, {})
+      children: /* @__PURE__ */ jsx(IconImage, {})
     }
   );
 };
@@ -11838,6 +12144,7 @@ const toBaseImageDescriptors = (attachment, options = {}) => {
       title: attachment.title
     };
   }
+  return void 0;
 };
 const BASE_FILE_ICON_CLASSNAME = "str-chat__file-icon";
 const FILE_ICON_GRAPHIC_CLASSNAME = "str-chat__file-icon__graphic";
@@ -12800,16 +13107,16 @@ const getAttachmentIconWithType = (quotedMessage, giphyVersionName) => {
   };
   if (!groupedAttachments.total) return result;
   if (groupedAttachments.polls.length > 0)
-    return { ...result, Icon: IconChart5, previewType: "poll" };
+    return { ...result, Icon: IconPoll, previewType: "poll" };
   if (groupedAttachments.locations.length > 0)
-    return { ...result, Icon: IconMapPin, previewType: "location" };
+    return { ...result, Icon: IconLocation, previewType: "location" };
   if (groupedAttachments.giphies.length > 0 && groupedAttachments.giphies.length === groupedAttachments.total) {
     const giphyAttachment = groupedAttachments.giphies[0];
     const giphyVersion = giphyAttachment.giphy?.[giphyVersionName];
     const src = giphyVersion?.url || giphyAttachment.thumb_url || giphyAttachment.image_url || "";
     return {
       ...result,
-      Icon: IconFileBend,
+      Icon: IconFile,
       PreviewImage: /* @__PURE__ */ jsx(
         BaseImage,
         {
@@ -12826,7 +13133,7 @@ const getAttachmentIconWithType = (quotedMessage, giphyVersionName) => {
     const fileAttachment = groupedAttachments.documents[0];
     return {
       ...result,
-      Icon: IconFileBend,
+      Icon: IconFile,
       PreviewImage: /* @__PURE__ */ jsx(FileIcon, { fileName: fileAttachment.title, mimeType: fileAttachment.mime_type }),
       previewType: "file"
     };
@@ -12835,7 +13142,7 @@ const getAttachmentIconWithType = (quotedMessage, giphyVersionName) => {
     const linkAttachment = groupedAttachments.links[0];
     return {
       ...result,
-      Icon: IconChainLink,
+      Icon: IconLink,
       PreviewImage: /* @__PURE__ */ jsx(
         BaseImage,
         {
@@ -12863,7 +13170,7 @@ const getAttachmentIconWithType = (quotedMessage, giphyVersionName) => {
             title: videoAttachment.title
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "str-chat__attachment-preview__thumbnail__play-indicator", children: /* @__PURE__ */ jsx(IconPlaySolid, {}) })
+        /* @__PURE__ */ jsx("div", { className: "str-chat__attachment-preview__thumbnail__play-indicator", children: /* @__PURE__ */ jsx(IconPlayFill, {}) })
       ] }),
       previewType: "video"
     };
@@ -12872,7 +13179,7 @@ const getAttachmentIconWithType = (quotedMessage, giphyVersionName) => {
     const imageAttachment = groupedAttachments.images[0];
     return {
       ...result,
-      Icon: IconVideoSolid,
+      Icon: IconVideoFill,
       PreviewImage: /* @__PURE__ */ jsx(
         BaseImage,
         {
@@ -12886,8 +13193,8 @@ const getAttachmentIconWithType = (quotedMessage, giphyVersionName) => {
     };
   }
   if (groupedAttachments.voiceRecordings.length === groupedAttachments.total)
-    return { ...result, Icon: IconMicrophone, previewType: "voice" };
-  return { ...result, Icon: IconFileBend, previewType: "mixed" };
+    return { ...result, Icon: IconVoice, previewType: "voice" };
+  return { ...result, Icon: IconFile, previewType: "mixed" };
 };
 const QuotedMessagePreview = ({
   getQuotedMessageAuthor,
@@ -13038,7 +13345,7 @@ const reminderStateSelector = (state) => ({
 function SavedForLaterContent() {
   const { t } = useTranslationContext();
   return /* @__PURE__ */ jsxs("p", { className: "str-chat__message-saved-for-later", children: [
-    /* @__PURE__ */ jsx(IconBookmark, {}),
+    /* @__PURE__ */ jsx(IconSave, {}),
     /* @__PURE__ */ jsx("span", { children: t("Saved for later") })
   ] });
 }
@@ -13082,7 +13389,7 @@ function RemindMeContent({ reminder }) {
     });
   };
   return /* @__PURE__ */ jsxs("p", { className: "str-chat__message-reminder", children: [
-    /* @__PURE__ */ jsx(IconBellNotification, {}),
+    /* @__PURE__ */ jsx(IconBell, {}),
     /* @__PURE__ */ jsx("span", { children: t("Reminder set") }),
     /* @__PURE__ */ jsx("span", { children: " · " }),
     /* @__PURE__ */ jsx("span", { className: "str-chat__message-reminder__time-left", children: renderTime() })
@@ -13795,10 +14102,10 @@ const TextInput = forwardRef(function TextInput2({
   const displayMessage = displayError || displaySuccess || displayNeutralMessage;
   const messageId = displayMessage ? `${id}-message` : void 0;
   const messageContent = displayError ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__message-icon", children: errorMessageIcon ?? /* @__PURE__ */ jsx(IconExclamationCircle, {}) }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__message-icon", children: errorMessageIcon ?? /* @__PURE__ */ jsx(IconExclamationMark, {}) }),
     errorMessage ?? message
   ] }) : displaySuccess ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__message-icon", children: successMessageIcon ?? /* @__PURE__ */ jsx(IconCheckmark2, {}) }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__message-icon", children: successMessageIcon ?? /* @__PURE__ */ jsx(IconCheckmark, {}) }),
     successMessage
   ] }) : displayNeutralMessage ? message : null;
   return /* @__PURE__ */ jsxs(
@@ -14675,7 +14982,8 @@ const PollOptionWithVotes = ({
     "div",
     {
       className: clsx("str-chat__poll-option", {
-        "str-chat__poll-option--has-more-votes": isVotesPreview && voteCount > countVotesPreview
+        "str-chat__poll-option--has-more-votes": isVotesPreview && voteCount > countVotesPreview,
+        "str-chat__poll-option--has-votes": voteCount
       }),
       children: [
         /* @__PURE__ */ jsx(PollOptionWithVotesHeader, { option, optionOrderNumber: orderNumber }),
@@ -15241,7 +15549,7 @@ const OptionFieldSet = () => {
                 className: "str-chat__form__input-field__value",
                 error: !!error,
                 id: option.id,
-                leading: draggable ? /* @__PURE__ */ jsx(IconDotGrid2x3, { className: "str-chat__drag-handle" }) : void 0,
+                leading: draggable ? /* @__PURE__ */ jsx(IconReorder, { className: "str-chat__drag-handle" }) : void 0,
                 message: error ? /* @__PURE__ */ jsx("span", { "data-testid": "poll-option-input-field-error", children: knownValidationErrors[error] ?? t("Error") }) : void 0,
                 onBlur: () => {
                   pollComposer.handleFieldBlur("options");
@@ -15280,7 +15588,7 @@ const RemoveOptionButton = ({ className, ...props }) => /* @__PURE__ */ jsx(
     size: "sm",
     variant: "secondary",
     ...props,
-    children: /* @__PURE__ */ jsx(IconCircleMinus, {})
+    children: /* @__PURE__ */ jsx(IconMinusCircle, {})
   }
 );
 const PollCreationDialogControls = ({
@@ -15316,7 +15624,7 @@ const PollCreationDialogControls = ({
         },
         type: "submit",
         children: [
-          /* @__PURE__ */ jsx(IconPaperPlane, {}),
+          /* @__PURE__ */ jsx(IconSend, {}),
           t("Send poll")
         ]
       }
@@ -15398,12 +15706,12 @@ const AttachmentSelectorContextProvider = ({
 }) => /* @__PURE__ */ jsx(AttachmentSelectorContext.Provider, { value, children });
 const useAttachmentSelectorContext = () => useContext(AttachmentSelectorContext);
 const icons = {
-  ban: IconPeopleRemove,
-  flag: IconFlag2,
+  ban: IconUserRemove,
+  flag: IconFlag,
   giphy: IconGiphy,
   mute: IconMute,
-  unban: IconPeopleAdd,
-  unmute: IconVolumeFull
+  unban: IconUserAdd,
+  unmute: IconAudio
 };
 const CommandsMenuClassName = "str-chat__context-menu--commands";
 const CommandsSubmenuHeader = () => {
@@ -15495,7 +15803,7 @@ const AttachmentSelectorMenuInitButtonIcon = ({ className }) => {
     return /* @__PURE__ */ jsx("span", { className, children: /* @__PURE__ */ jsx(AttachmentSelectorInitiationButtonContents, {}) });
   }
   return /* @__PURE__ */ jsx(
-    IconPlusLarge,
+    IconPlus,
     {
       className: clsx("str-chat__attachment-selector__menu-button__icon", className)
     }
@@ -15558,7 +15866,7 @@ const DefaultAttachmentSelectorComponents = {
       {
         className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__create-poll-button",
         hasSubMenu: hasSubmenu,
-        Icon: IconRunShortcut,
+        Icon: IconCommand,
         onClick: () => {
           if (!hasSubmenu) return;
           openSubmenu({
@@ -15579,7 +15887,7 @@ const DefaultAttachmentSelectorComponents = {
       ContextMenuButton,
       {
         className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__upload-file-button",
-        Icon: IconPaperclip,
+        Icon: IconAttachment,
         onClick: () => {
           fileInput?.click();
           closeMenu();
@@ -15595,7 +15903,7 @@ const DefaultAttachmentSelectorComponents = {
       ContextMenuButton,
       {
         className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__add-location-button",
-        Icon: IconMapPin,
+        Icon: IconLocation,
         onClick: () => {
           openModalForAction("addLocation");
           closeMenu();
@@ -15611,7 +15919,7 @@ const DefaultAttachmentSelectorComponents = {
       ContextMenuButton,
       {
         className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__create-poll-button",
-        Icon: IconChart5,
+        Icon: IconPoll,
         onClick: () => {
           openModalForAction("createPoll");
           closeMenu();
@@ -15688,7 +15996,7 @@ const AttachmentSelector = ({
   getModalPortalDestination
 }) => {
   const { t } = useTranslationContext();
-  const { Modal = GlobalModal } = useComponentContext();
+  const { ContextMenu: ContextMenuComponent = ContextMenu, Modal = GlobalModal } = useComponentContext();
   const { channelCapabilities } = useChannelStateContext();
   const messageComposer = useMessageComposerController();
   const isCooldownActive = useIsCooldownActive();
@@ -15748,7 +16056,7 @@ const AttachmentSelector = ({
       }
     ),
     /* @__PURE__ */ jsx(
-      ContextMenu,
+      ContextMenuComponent,
       {
         allowFlip: true,
         backLabel: t("Back"),
@@ -15944,7 +16252,7 @@ const FileAttachmentPreview = ({
             uploadState === "uploading" && /* @__PURE__ */ jsx(LoadingIndicatorIcon, {}),
             !hasError && /* @__PURE__ */ jsx(FileSizeIndicator, { fileSize: attachment.file_size }),
             hasFatalError && /* @__PURE__ */ jsxs("div", { className: "str-chat__attachment-preview-file__fatal-error", children: [
-              /* @__PURE__ */ jsx(IconExclamationCircle, {}),
+              /* @__PURE__ */ jsx(IconExclamationMark, {}),
               /* @__PURE__ */ jsx("span", { children: hasSizeLimitError ? t("File too large") : uploadState === "blocked" ? t("Upload blocked") : t("Upload failed") })
             ] }),
             hasRetriableError && /* @__PURE__ */ jsxs("div", { className: "str-chat__attachment-preview-file__retriable-error", children: [
@@ -16500,7 +16808,7 @@ const AudioAttachmentPreview = ({
                 }
               )
             ] }) : hasFatalError ? /* @__PURE__ */ jsxs("div", { className: "str-chat__attachment-preview-file__fatal-error", children: [
-              /* @__PURE__ */ jsx(IconExclamationCircle, {}),
+              /* @__PURE__ */ jsx(IconExclamationMark, {}),
               /* @__PURE__ */ jsx("span", { children: hasSizeLimitError ? t("File too large") : uploadState === "blocked" ? t("Upload blocked") : t("Upload failed") })
             ] }) : /* @__PURE__ */ jsxs("div", { className: "str-chat__attachment-preview-file__retriable-error", children: [
               /* @__PURE__ */ jsx(IconExclamationTriangle, {}),
@@ -16599,10 +16907,10 @@ const MediaAttachmentPreview = ({
           /* @__PURE__ */ jsxs("div", { className: clsx("str-chat__attachment-preview-media__overlay"), children: [
             isUploading && /* @__PURE__ */ jsx(LoadingIndicator2, {}),
             isVideoAttachment(attachment) && !hasUploadError && uploadState !== "uploading" && /* @__PURE__ */ jsxs("div", { className: "str-chat__attachment-preview-media__video-indicator", children: [
-              /* @__PURE__ */ jsx(IconVideoSolid, {}),
+              /* @__PURE__ */ jsx(IconVideoFill, {}),
               attachment.duration && /* @__PURE__ */ jsx("div", { children: attachment.duration })
             ] }),
-            hasFatalError && /* @__PURE__ */ jsx(IconExclamationCircle, {}),
+            hasFatalError && /* @__PURE__ */ jsx(IconExclamationMark, {}),
             hasRetriableError && /* @__PURE__ */ jsx(
               Button,
               {
@@ -16614,7 +16922,7 @@ const MediaAttachmentPreview = ({
                 onClick: retry,
                 size: "sm",
                 variant: "danger",
-                children: /* @__PURE__ */ jsx(IconArrowRotateClockwise, {})
+                children: /* @__PURE__ */ jsx(IconRetry, {})
               }
             )
           ] })
@@ -16685,7 +16993,7 @@ const GalleryHeader = ({ currentItem }) => {
           className: "str-chat__gallery__action-button str-chat__gallery__action-button--close",
           onClick: modalContext.close,
           title: t("Close"),
-          children: /* @__PURE__ */ jsx(IconCrossMedium, {})
+          children: /* @__PURE__ */ jsx(IconXmark, {})
         }
       ) : null
     ] })
@@ -16732,9 +17040,9 @@ const VideoThumbnail = ({
         onClick: onPlay,
         size: "lg",
         variant: "secondary",
-        children: /* @__PURE__ */ jsx(IconPlaySolid, {})
+        children: /* @__PURE__ */ jsx(IconPlayFill, {})
       }
-    ) : /* @__PURE__ */ jsx("div", { className: "str-chat__message-attachment__video-thumbnail__play-indicator", children: /* @__PURE__ */ jsx(IconPlaySolid, {}) })
+    ) : /* @__PURE__ */ jsx("div", { className: "str-chat__message-attachment__video-thumbnail__play-indicator", children: /* @__PURE__ */ jsx(IconPlayFill, {}) })
   ] });
 };
 const SWIPE_THRESHOLD = 50;
@@ -17158,7 +17466,7 @@ const CommandChip = ({ command }) => {
           textComposer.setCommand(null);
           textareaRef.current?.focus();
         },
-        children: /* @__PURE__ */ jsx(IconCrossMedium, {})
+        children: /* @__PURE__ */ jsx(IconXmark, {})
       }
     )
   ] });
@@ -17223,7 +17531,7 @@ const LinkPreviewCard = ({ linkPreview }) => {
           /* @__PURE__ */ jsx("div", { className: "str-chat__link-preview-card__content-title", children: linkPreview.title }),
           /* @__PURE__ */ jsx("div", { className: "str-chat__link-preview-card__content-description", children: linkPreview.text }),
           /* @__PURE__ */ jsxs("div", { className: "str-chat__link-preview-card__content__url", children: [
-            /* @__PURE__ */ jsx(IconChainLink, {}),
+            /* @__PURE__ */ jsx(IconLink, {}),
             /* @__PURE__ */ jsx("span", { children: linkPreview.og_scrape_url })
           ] })
         ] }),
@@ -17301,7 +17609,7 @@ const AudioRecordingPlayback = ({
             onClick: audioPlayer.togglePlay,
             size: "sm",
             variant: "secondary",
-            children: isPlaying ? /* @__PURE__ */ jsx(IconPause, {}) : /* @__PURE__ */ jsx(IconPlaySolid, {})
+            children: isPlaying ? /* @__PURE__ */ jsx(IconPauseFill, {}) : /* @__PURE__ */ jsx(IconPlayFill, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -17419,7 +17727,7 @@ const AudioRecordingPreview = () => {
     };
   }, [recorder, startCounter, stopCounter]);
   return /* @__PURE__ */ jsxs("div", { className: "str-chat__audio-recorder__recording-preview", children: [
-    /* @__PURE__ */ jsx(IconMicrophone, {}),
+    /* @__PURE__ */ jsx(IconVoice, {}),
     /* @__PURE__ */ jsx(RecordingTimer, { durationSeconds: secondsElapsed }),
     /* @__PURE__ */ jsx(AudioRecordingWaveform, {})
   ] });
@@ -17439,7 +17747,7 @@ const ToggleRecordingButton = () => {
       onClick: () => isRecording(recordingState) ? recorder?.pause() : recorder?.resume(),
       size: "sm",
       variant: "secondary",
-      children: isRecording(recordingState) ? /* @__PURE__ */ jsx(IconPause, {}) : /* @__PURE__ */ jsx(IconMicrophone, {})
+      children: isRecording(recordingState) ? /* @__PURE__ */ jsx(IconPauseFill, {}) : /* @__PURE__ */ jsx(IconVoice, {})
     }
   );
 };
@@ -17474,7 +17782,7 @@ const AudioRecorderRecordingControls = () => {
         },
         size: "sm",
         variant: "secondary",
-        children: /* @__PURE__ */ jsx(IconTrashBin, {})
+        children: /* @__PURE__ */ jsx(IconDelete, {})
       }
     ),
     /* @__PURE__ */ jsx(ToggleRecordingButton, {}),
@@ -17571,7 +17879,7 @@ const DefaultStartRecordingAudioButton = forwardRef(function StartRecordingAudio
       variant: "secondary",
       ...props,
       ref,
-      children: /* @__PURE__ */ jsx(IconMicrophone, {})
+      children: /* @__PURE__ */ jsx(IconVoice, {})
     }
   );
 });
@@ -17612,7 +17920,7 @@ const SendToChannelCheckbox = () => {
                 type: "checkbox"
               }
             ),
-            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "str-chat__send-to-channel-checkbox__visual", children: /* @__PURE__ */ jsx("span", { className: "str-chat__send-to-channel-checkbox__checkmark", children: /* @__PURE__ */ jsx(IconCheckmark2, {}) }) }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "str-chat__send-to-channel-checkbox__visual", children: /* @__PURE__ */ jsx("span", { className: "str-chat__send-to-channel-checkbox__checkmark", children: /* @__PURE__ */ jsx(IconCheckmark, {}) }) }),
             /* @__PURE__ */ jsx("span", { className: "str-chat__send-to-channel-checkbox__label", children: labelText })
           ]
         }
@@ -17778,7 +18086,10 @@ const SuggestionList = ({
   setFocusedItemIndex,
   suggestionItemComponents = defaultComponents
 }) => {
-  const { AutocompleteSuggestionItem = SuggestionListItem } = useComponentContext();
+  const {
+    AutocompleteSuggestionItem = SuggestionListItem,
+    ContextMenu: ContextMenuComponent = ContextMenu
+  } = useComponentContext();
   const { textareaRef } = useMessageComposerContext();
   const messageComposer = useMessageComposerController();
   const { textComposer } = messageComposer;
@@ -17896,7 +18207,7 @@ const SuggestionList = ({
         zIndex: 1e3
       },
       children: /* @__PURE__ */ jsx(
-        ContextMenu,
+        ContextMenuComponent,
         {
           className: clsx("str-chat__suggestion-list", className),
           Header: suggestions.searchSource.type === "commands" ? CommandsMenuHeader : void 0,
@@ -18122,12 +18433,6 @@ const TextareaComposer = ({
     if (!textareaRef.current || textareaIsFocused || !focus) return;
     textareaRef.current.focus();
   }, [attachments, focus, quotedMessage, textareaRef]);
-  useEffect(
-    () => () => {
-      messageComposer.clear();
-    },
-    [messageComposer]
-  );
   useLayoutEffect(() => {
     const textarea = textareaRef.current;
     if (!textarea || isComposing) return;
@@ -18275,7 +18580,7 @@ const FileDragAndDropContent = ({
 }) => {
   const { t } = useTranslationContext();
   return /* @__PURE__ */ jsx("div", { className: "str-chat__dropzone-container__content", children: isDragRejected ? /* @__PURE__ */ jsx("p", { children: t("Some of the files will not be accepted") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(IconFileArrowLeftIn, {}),
+    /* @__PURE__ */ jsx(IconUpload, {}),
     /* @__PURE__ */ jsx("p", { children: t("Drag your files here") })
   ] }) });
 };
@@ -18311,7 +18616,7 @@ const SendButton = ({ children, sendMessage, ...rest }) => {
       size: "sm",
       variant: "primary",
       ...rest,
-      children: children ?? /* @__PURE__ */ jsx(IconPaperPlane, {})
+      children: children ?? /* @__PURE__ */ jsx(IconSend, {})
     }
   );
 };
@@ -18347,7 +18652,7 @@ const MessageComposerActions = () => {
   const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);
   const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopAIGenerationButton$1;
   const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices);
-  let content = SendButton$1 ? /* @__PURE__ */ jsx(SendButton$1, { sendMessage: handleSubmit }) : /* @__PURE__ */ jsx(SendButton, { sendMessage: handleSubmit, children: editedMessage || command ? /* @__PURE__ */ jsx(IconCheckmark2, {}) : /* @__PURE__ */ jsx(IconPaperPlane, {}) });
+  let content = SendButton$1 ? /* @__PURE__ */ jsx(SendButton$1, { sendMessage: handleSubmit }) : /* @__PURE__ */ jsx(SendButton, { sendMessage: handleSubmit, children: editedMessage || command ? /* @__PURE__ */ jsx(IconCheckmark, {}) : /* @__PURE__ */ jsx(IconSend, {}) });
   if (shouldDisplayStopAIGeneration) {
     content = /* @__PURE__ */ jsx(StopAIGenerationButton$1, { onClick: stopGenerating });
   } else if (hideSendButton) return null;
@@ -18363,7 +18668,7 @@ const AdditionalMessageComposerActions = () => {
   const isCooldownActive = useIsCooldownActive();
   return /* @__PURE__ */ jsx("div", { className: "str-chat__message-composer__additional-actions", children: !isCooldownActive && EmojiPicker ? /* @__PURE__ */ jsx(EmojiPicker, {}) : null });
 };
-const GeolocationPreviewImage = () => /* @__PURE__ */ jsx("div", { className: "str-chat__location-preview-image", children: /* @__PURE__ */ jsx(IconMapPin, {}) });
+const GeolocationPreviewImage = () => /* @__PURE__ */ jsx("div", { className: "str-chat__location-preview-image", children: /* @__PURE__ */ jsx(IconLocation, {}) });
 const GeolocationPreview = ({
   location,
   PreviewImage = GeolocationPreviewImage,
@@ -18581,7 +18886,7 @@ const MessageComposerProvider = (props) => {
   const messageComposer = useMessageComposerController();
   useEffect(
     () => () => {
-      messageComposer.createDraft();
+      messageComposer.createDraft().finally(() => messageComposer.clear());
     },
     [messageComposer]
   );
@@ -18899,7 +19204,7 @@ const useChat = ({
   };
   useEffect(() => {
     if (!client) return;
-    const version = "14.0.0-beta.2";
+    const version = "14.0.0-beta.4";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
@@ -19066,7 +19371,7 @@ const ThreadHeader = (props) => {
         onClick: closeThread,
         size: "md",
         variant: "secondary",
-        children: /* @__PURE__ */ jsx(IconCrossMedium, {})
+        children: /* @__PURE__ */ jsx(IconXmark, {})
       }
     )
   ] });
@@ -19374,7 +19679,7 @@ const ReactionSelector = (props) => {
           onClick: () => setExtendedListOpen(true),
           size: "sm",
           variant: "secondary",
-          children: /* @__PURE__ */ jsx(IconPlusLarge, {})
+          children: /* @__PURE__ */ jsx(IconPlus, {})
         }
       )
     ] }),
@@ -19400,10 +19705,10 @@ const ReactionSelector = (props) => {
     ) })
   ] });
 };
-ReactionSelector.getDialogId = (({ messageId, threadList }) => {
+ReactionSelector.getDialogId = ({ messageId, threadList }) => {
   const dialogIdNamespace = threadList ? "-thread" : "";
-  return `reaction-selector${dialogIdNamespace}--${messageId}`;
-});
+  return `reaction-selector${dialogIdNamespace}-${messageId}`;
+};
 ReactionSelector.displayName = "ReactionSelector";
 const ReactionSelectorWithButton = ({
   ReactionIcon
@@ -19488,6 +19793,7 @@ const QuickMessageActionsButton = ({ className, ...props }) => /* @__PURE__ */ j
     appearance: "ghost",
     circular: true,
     className: clsx("str-chat__message-actions-box-button", className),
+    size: "sm",
     variant: "secondary",
     ...props
   }
@@ -19554,7 +19860,7 @@ const DefaultMessageActionComponents = {
           "aria-label": t("aria/Open Thread"),
           className: msgActionsBoxButtonClassName,
           "data-testid": "thread-action",
-          Icon: IconBubbleText6ChatMessage,
+          Icon: IconThread,
           onClick: (e) => {
             handleOpenThread(e);
             closeMenu();
@@ -19581,7 +19887,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": t("aria/Quote Message"),
           className: msgActionsBoxButtonClassName,
-          Icon: IconCloseQuote2,
+          Icon: IconQuote,
           onClick: () => {
             handleQuote();
             closeMenu();
@@ -19618,7 +19924,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": t("aria/Copy Message Text"),
           className: msgActionsBoxButtonClassName,
-          Icon: IconSquareBehindSquare2_Copy,
+          Icon: IconCopy,
           onClick: () => {
             if (message.text) navigator.clipboard.writeText(message.text);
             closeMenu();
@@ -19636,7 +19942,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": t("aria/Resend Message"),
           className: msgActionsBoxButtonClassName,
-          Icon: IconArrowRotateClockwise,
+          Icon: IconRetry,
           onClick: () => {
             handleRetry(message);
             closeMenu();
@@ -19655,7 +19961,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": t("aria/Edit Message"),
           className: msgActionsBoxButtonClassName,
-          Icon: IconEditBig,
+          Icon: IconEdit,
           onClick: () => {
             messageComposer.initState({ composition: message });
             closeMenu();
@@ -19673,7 +19979,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": t("aria/Mark Message Unread"),
           className: msgActionsBoxButtonClassName,
-          Icon: IconBubbleWideNotificationChatMessage,
+          Icon: IconNotification,
           onClick: (event) => {
             handleMarkUnread(event);
             closeMenu();
@@ -19696,7 +20002,7 @@ const DefaultMessageActionComponents = {
           "aria-label": reminder ? t("aria/Remind Me Message") : t("aria/Remove Reminder"),
           className: msgActionsBoxButtonClassName,
           hasSubMenu: !reminder,
-          Icon: reminder ? IconBellOff : IconBellNotification,
+          Icon: reminder ? IconBellOff : IconBell,
           onClick: () => {
             if (reminder) {
               client.reminders.deleteReminder(reminder.id);
@@ -19725,7 +20031,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": reminder ? t("aria/Remove Save For Later") : t("aria/Bookmark Message"),
           className: msgActionsBoxButtonClassName,
-          Icon: reminder ? IconBookmarkRemove : IconBookmark,
+          Icon: reminder ? IconUnsave : IconSave,
           onClick: () => {
             if (reminder) client.reminders.deleteReminder(reminder.id);
             else client.reminders.createReminder({ messageId: message.id });
@@ -19744,7 +20050,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": t("aria/Flag Message"),
           className: msgActionsBoxButtonClassName,
-          Icon: IconFlag2,
+          Icon: IconFlag,
           onClick: (event) => {
             handleFlag(event);
             closeMenu();
@@ -19764,7 +20070,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": isMuted ? t("aria/Unmute User") : t("aria/Mute User"),
           className: msgActionsBoxButtonClassName,
-          Icon: isMuted ? IconVolumeFull : IconMute,
+          Icon: isMuted ? IconAudio : IconMute,
           onClick: (event) => {
             handleMute(event);
             closeMenu();
@@ -19787,7 +20093,7 @@ const DefaultMessageActionComponents = {
           {
             "aria-label": t("aria/Delete Message"),
             className: msgActionsBoxButtonClassName,
-            Icon: IconTrashBin,
+            Icon: IconDelete,
             onClick: () => {
               setOpenModal(true);
             },
@@ -19833,7 +20139,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": isBlocked ? t("aria/Unblock User") : t("aria/Block User"),
           className: clsx(msgActionsBoxButtonClassName),
-          Icon: isBlocked ? IconPeopleAdded : IconCircleBanSign,
+          Icon: isBlocked ? IconUserCheck : IconNoSign,
           onClick: () => {
             const targetId = message.user?.id;
             if (targetId) {
@@ -19848,8 +20154,34 @@ const DefaultMessageActionComponents = {
     }
   },
   quick: {
+    // eslint-disable-next-line react/display-name
+    DropdownToggle: forwardRef((_, ref) => {
+      const { t } = useTranslationContext();
+      const { message } = useMessageContext();
+      const dropdownDialogIsOpen = useDialogIsOpen(
+        MessageActions.getDialogId({ messageId: message.id })
+      );
+      const { dialog } = useDialogOnNearestManager({
+        id: MessageActions.getDialogId({ messageId: message.id })
+      });
+      return /* @__PURE__ */ jsx(
+        QuickMessageActionsButton,
+        {
+          "aria-expanded": dropdownDialogIsOpen,
+          "aria-haspopup": "true",
+          "aria-label": t("aria/Open Message Actions Menu"),
+          className: "str-chat__message-actions-box-button",
+          "data-testid": "message-actions-toggle-button",
+          onClick: () => {
+            dialog?.toggle();
+          },
+          ref,
+          children: /* @__PURE__ */ jsx(IconMore, { className: "str-chat__message-action-icon" })
+        }
+      );
+    }),
     React() {
-      return /* @__PURE__ */ jsx(ReactionSelectorWithButton, { ReactionIcon: IconEmojiSmile });
+      return /* @__PURE__ */ jsx(ReactionSelectorWithButton, { ReactionIcon: IconEmoji });
     },
     Reply() {
       const { handleOpenThread } = useMessageContext();
@@ -19861,14 +20193,17 @@ const DefaultMessageActionComponents = {
           className: "str-chat__message-reply-in-thread-button",
           "data-testid": "thread-action",
           onClick: handleOpenThread,
-          children: /* @__PURE__ */ jsx(IconArrowShareLeft, { className: "str-chat__message-action-icon" })
+          children: /* @__PURE__ */ jsx(IconReply, { className: "str-chat__message-action-icon" })
         }
       );
     }
   }
 };
 const defaultMessageActionSet = [
-  // { placement: 'dropdown', type: 'block' },
+  {
+    Component: DefaultMessageActionComponents.quick.DropdownToggle,
+    placement: "quick-dropdown-toggle"
+  },
   {
     Component: DefaultMessageActionComponents.quick.Reply,
     placement: "quick",
@@ -19958,14 +20293,14 @@ function useFetchReactions(options) {
   const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;
   const [refetchNonce, setRefetchNonce] = useState(null);
   useEffect(() => {
-    if (!shouldFetch || !reactionType) {
+    if (!shouldFetch) {
       return;
     }
     let cancel = false;
     (async () => {
       try {
         setIsLoading(true);
-        const reactions2 = await handleFetchReactions(reactionType, sort);
+        const reactions2 = await handleFetchReactions(reactionType ?? void 0, sort);
         if (!cancel) {
           setReactions(reactions2);
         }
@@ -19989,6 +20324,16 @@ function useFetchReactions(options) {
   return { isLoading, reactions, refetch };
 }
 const defaultReactionDetailsSort = { created_at: -1 };
+const MessageReactionsDetailLoadingIndicator = () => {
+  const elements = useMemo(
+    () => Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
+      /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
+      /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
+    ] }, index)),
+    []
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: elements });
+};
 function MessageReactionsDetail({
   handleFetchReactions,
   onSelectedReactionTypeChange,
@@ -19999,7 +20344,11 @@ function MessageReactionsDetail({
   totalReactionCount
 }) {
   const { client } = useChatContext();
-  const { Avatar: Avatar$1 = Avatar } = useComponentContext(MessageReactionsDetail.name);
+  const {
+    Avatar: Avatar$1 = Avatar,
+    LoadingIndicator: LoadingIndicator2 = MessageReactionsDetailLoadingIndicator,
+    reactionOptions = defaultReactionOptions
+  } = useComponentContext(MessageReactionsDetail.name);
   const { t } = useTranslationContext();
   const {
     handleReaction: contextHandleReaction,
@@ -20026,7 +20375,7 @@ function MessageReactionsDetail({
     "div",
     {
       className: "str-chat__message-reactions-detail",
-      "data-testid": "reactions-list-modal",
+      "data-testid": "message-reactions-detail",
       children: [
         typeof totalReactionCount === "number" && /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__total-count", children: t("{{ count }} reactions", { count: totalReactionCount }) }),
         /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__reaction-type-list-container", children: /* @__PURE__ */ jsx("ul", { className: "str-chat__message-reactions-detail__reaction-type-list", children: reactions.map(
@@ -20039,7 +20388,9 @@ function MessageReactionsDetail({
                 {
                   "aria-pressed": reactionType === selectedReactionType,
                   className: "str-chat__message-reactions-detail__reaction-type-list-item-button",
-                  onClick: () => onSelectedReactionTypeChange?.(reactionType),
+                  onClick: () => onSelectedReactionTypeChange?.(
+                    selectedReactionType === reactionType ? null : reactionType
+                  ),
                   children: [
                     /* @__PURE__ */ jsx("span", { className: "str-chat__message-reactions-detail__reaction-type-list-item-icon", children: /* @__PURE__ */ jsx(EmojiComponent, {}) }),
                     reactionCount > 1 && /* @__PURE__ */ jsx(
@@ -20063,22 +20414,10 @@ function MessageReactionsDetail({
             className: "str-chat__message-reactions-detail__user-list",
             "data-testid": "all-reacting-users",
             children: [
-              areReactionsLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
-                ] })
-              ] }),
-              !areReactionsLoading && /* @__PURE__ */ jsx(Fragment, { children: reactionDetailsWithLegacyFallback.map(({ user }) => {
+              areReactionsLoading && /* @__PURE__ */ jsx(LoadingIndicator2, {}),
+              !areReactionsLoading && /* @__PURE__ */ jsx(Fragment, { children: reactionDetailsWithLegacyFallback.map(({ type, user }) => {
                 const belongsToCurrentUser = client.user?.id === user?.id;
+                const EmojiComponent = Array.isArray(reactionOptions) ? void 0 : reactionOptions.quick[type]?.Component ?? reactionOptions.extended?.[type]?.Component;
                 return /* @__PURE__ */ jsxs(
                   "div",
                   {
@@ -20103,23 +20442,23 @@ function MessageReactionsDetail({
                             children: belongsToCurrentUser ? t("You") : user?.name || user?.id
                           }
                         ),
-                        belongsToCurrentUser && selectedReactionType && /* @__PURE__ */ jsx(
+                        belongsToCurrentUser && /* @__PURE__ */ jsx(
                           "button",
                           {
                             className: "str-chat__message-reactions-detail__user-list-item-button",
                             "data-testid": "remove-reaction-button",
-                            onClick: (e) => {
-                              contextHandleReaction(selectedReactionType, e).then(() => {
-                                refetch();
-                              });
+                            onClick: async (e) => {
+                              await contextHandleReaction(type, e);
+                              refetch();
                             },
                             children: t("Tap to remove")
                           }
                         )
-                      ] })
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { className: "str-chat__message-reactions-detail__user-list-item-icon", children: EmojiComponent && !selectedReactionType && /* @__PURE__ */ jsx(EmojiComponent, {}) })
                     ]
                   },
-                  user?.id
+                  `${user?.id}-${type}`
                 );
               }) })
             ]
@@ -20268,6 +20607,7 @@ const UnMemoizedMessageReactions = (props) => {
   const divRef = useRef(null);
   const dialogId2 = `message-reactions-detail-${message.id}`;
   const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
+  const isDialogOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
   const handleReactionButtonClick = (reactionType) => {
     if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {
       return;
@@ -20302,6 +20642,8 @@ const UnMemoizedMessageReactions = (props) => {
         children: /* @__PURE__ */ jsxs(
           FragmentOrButton,
           {
+            "aria-expanded": isDialogOpen,
+            "aria-pressed": isDialogOpen,
             buttonIf: visualStyle === "clustered",
             className: "str-chat__message-reactions__list-button",
             onClick: () => handleReactionButtonClick(existingReactions[0]?.reactionType ?? null),
@@ -20339,9 +20681,7 @@ const UnMemoizedMessageReactions = (props) => {
                   "button",
                   {
                     className: "str-chat__message-reactions__list-item-button",
-                    onClick: () => handleReactionButtonClick(
-                      existingReactions.at(-1)?.reactionType ?? null
-                    ),
+                    onClick: () => handleReactionButtonClick(null),
                     children: /* @__PURE__ */ jsxs("span", { className: "str-chat__message-reactions__overflow-count", children: [
                       "+",
                       totalReactionCount - cappedExistingReactions.reactionCountToDisplay
@@ -20466,91 +20806,74 @@ const StreamEmoji = ({
 const useSplitActionSet = (actionSet) => useMemo(() => {
   const quickActionSet = [];
   const dropdownActionSet = [];
+  let quickDropdownToggleAction;
   for (const action of actionSet) {
     if (action.placement === "quick")
       quickActionSet.push(action);
     if (action.placement === "dropdown")
       dropdownActionSet.push(action);
+    if (action.placement === "quick-dropdown-toggle") {
+      quickDropdownToggleAction ?? (quickDropdownToggleAction = action);
+    }
   }
-  return { dropdownActionSet, quickActionSet };
+  return { dropdownActionSet, quickActionSet, quickDropdownToggleAction };
 }, [actionSet]);
 const MessageActions = ({
   disableBaseMessageActionSetFilter = false,
   messageActionSet = defaultMessageActionSet
 }) => {
-  const { theme } = useChatContext();
   const { isMyMessage, message, threadList } = useMessageContext();
+  const { ContextMenu: ContextMenuComponent = ContextMenu } = useComponentContext();
   const { t } = useTranslationContext();
   const [actionsBoxButtonElement, setActionsBoxButtonElement] = useState(null);
   const filteredMessageActionSet = useBaseMessageActionSetFilter(
     messageActionSet,
     disableBaseMessageActionSetFilter
   );
-  const { dropdownActionSet, quickActionSet } = useSplitActionSet(
-    filteredMessageActionSet
-  );
-  const dropdownDialogId = `message-actions--${message.id}`;
+  const { dropdownActionSet, quickActionSet, quickDropdownToggleAction } = useSplitActionSet(filteredMessageActionSet);
+  const messageActionsDialogId = MessageActions.getDialogId({ messageId: message.id });
   const reactionSelectorDialogId = ReactionSelector.getDialogId({
     messageId: message.id,
     threadList
   });
-  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dropdownDialogId });
-  const dropdownDialogIsOpen = useDialogIsOpen(dropdownDialogId, dialogManager?.id);
+  const { dialog, dialogManager } = useDialogOnNearestManager({
+    id: messageActionsDialogId
+  });
+  const messageActionsDialogIsOpen = useDialogIsOpen(
+    messageActionsDialogId,
+    dialogManager?.id
+  );
   const reactionSelectorDialogIsOpen = useDialogIsOpen(
     reactionSelectorDialogId,
     dialogManager?.id
   );
-  const contextMenuItems = useMemo(
-    () => dropdownActionSet.map(({ Component: Component2 }) => {
-      const ActionItem = (menuProps) => /* @__PURE__ */ jsx(Component2, { ...menuProps });
-      return ActionItem;
-    }),
-    [dropdownActionSet]
-  );
   if (dropdownActionSet.length + quickActionSet.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx(`str-chat__message-${theme}__actions str-chat__message-options`, {
-        "str-chat__message-options--active": dropdownDialogIsOpen || reactionSelectorDialogIsOpen
+      className: clsx("str-chat__message-options", {
+        "str-chat__message-options--active": messageActionsDialogIsOpen || reactionSelectorDialogIsOpen
       }),
       children: [
-        dropdownActionSet.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              appearance: "ghost",
-              "aria-expanded": dropdownDialogIsOpen,
-              "aria-haspopup": "true",
-              "aria-label": t("aria/Open Message Actions Menu"),
-              circular: true,
-              className: "str-chat__message-actions-box-button",
-              "data-testid": "message-actions-toggle-button",
-              onClick: () => {
-                dialog?.toggle();
-              },
-              ref: setActionsBoxButtonElement,
-              variant: "secondary",
-              children: /* @__PURE__ */ jsx(IconDotGrid1x3Horizontal, { className: "str-chat__message-action-icon" })
-            }
-          ),
+        quickDropdownToggleAction && dropdownActionSet.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(quickDropdownToggleAction.Component, { ref: setActionsBoxButtonElement }),
           /* @__PURE__ */ jsx(
-            ContextMenu,
+            ContextMenuComponent,
             {
               backLabel: t("Back"),
               className: clsx("str-chat__message-actions-box", {
-                "str-chat__message-actions-box--open": dropdownDialogIsOpen
+                "str-chat__message-actions-box--open": messageActionsDialogIsOpen
               }),
               dialogManagerId: dialogManager?.id,
-              id: dropdownDialogId,
-              items: contextMenuItems,
+              id: messageActionsDialogId,
               onClose: dialog?.close,
               placement: isMyMessage() ? "top-end" : "top-start",
               referenceElement: actionsBoxButtonElement,
               tabIndex: -1,
-              trapFocus: true
+              trapFocus: true,
+              children: dropdownActionSet.map(({ Component: Component2, type }) => /* @__PURE__ */ jsx(Component2, {}, type))
             }
           )
         ] }),
@@ -20559,6 +20882,8 @@ const MessageActions = ({
     }
   );
 };
+MessageActions.getDialogId = ({ messageId }) => `message-actions-${messageId}`;
+MessageActions.displayName = "MessageActions";
 const MessageUIWithContext = ({
   endOfGroup,
   firstOfGroup,
@@ -21385,6 +21710,7 @@ const useScrollLocationLogic = (params) => {
   const closeToBottom = useRef(false);
   const closeToTop = useRef(false);
   const previousScrollTopRef = useRef(0);
+  const previousMessagesLengthRef = useRef(messages.length);
   const anchorRestoreCleanupRef = useRef(null);
   const captureAnchor = useCallback(() => {
     if (!listElement) return null;
@@ -21536,6 +21862,60 @@ const useScrollLocationLogic = (params) => {
       scrollToBottom();
     }
   }, [disableAutoScrollToBottom, justReachedLatestMessageSet, listElement, hasMoreNewer]);
+  useLayoutEffect(() => {
+    if (!listElement || disableAutoScrollToBottom || hasMoreNewer || suppressAutoscroll || justReachedLatestMessageSet || isRestoringOlderAnchorRef.current) {
+      return;
+    }
+    const initialDistanceToBottom = listElement.scrollHeight - (listElement.scrollTop + listElement.clientHeight);
+    const messagesHydrated = previousMessagesLengthRef.current === 0 && messages.length > 0;
+    if (initialDistanceToBottom > scrolledUpThreshold && !messagesHydrated) {
+      return;
+    }
+    let keepPinnedToBottom = true;
+    const maybeScrollToBottom = () => {
+      if (keepPinnedToBottom) {
+        scrollToBottom();
+      }
+    };
+    maybeScrollToBottom();
+    const settleDelays = [80, messagesHydrated ? 260 : 420, 900, 1700];
+    const settleTimeoutIds = settleDelays.map(
+      (delay) => setTimeout(maybeScrollToBottom, delay)
+    );
+    const stopKeepingPinnedToBottom = () => {
+      keepPinnedToBottom = false;
+    };
+    listElement.addEventListener("pointerdown", stopKeepingPinnedToBottom, {
+      passive: true
+    });
+    listElement.addEventListener("touchstart", stopKeepingPinnedToBottom, {
+      passive: true
+    });
+    listElement.addEventListener("wheel", stopKeepingPinnedToBottom, {
+      passive: true
+    });
+    listElement.addEventListener("keydown", stopKeepingPinnedToBottom);
+    const pinWindowTimeoutId = setTimeout(() => {
+      stopKeepingPinnedToBottom();
+    }, 2200);
+    return () => {
+      settleTimeoutIds.forEach(clearTimeout);
+      clearTimeout(pinWindowTimeoutId);
+      listElement.removeEventListener("pointerdown", stopKeepingPinnedToBottom);
+      listElement.removeEventListener("touchstart", stopKeepingPinnedToBottom);
+      listElement.removeEventListener("wheel", stopKeepingPinnedToBottom);
+      listElement.removeEventListener("keydown", stopKeepingPinnedToBottom);
+    };
+  }, [
+    disableAutoScrollToBottom,
+    hasMoreNewer,
+    justReachedLatestMessageSet,
+    listElement,
+    messages.length,
+    scrollToBottom,
+    scrolledUpThreshold,
+    suppressAutoscroll
+  ]);
   const updateScrollTop = useMessageListScrollManager({
     captureAnchor,
     disableScrollManagement: disableScrollManagement || isRestoringOlderAnchorRef.current,
@@ -21562,6 +21942,9 @@ const useScrollLocationLogic = (params) => {
   useLayoutEffect(() => {
     previousHasMoreNewerRef.current = hasMoreNewer;
   }, [hasMoreNewer]);
+  useLayoutEffect(() => {
+    previousMessagesLengthRef.current = messages.length;
+  }, [messages.length]);
   const onScroll = useCallback(
     (event) => {
       const element = event.target;
@@ -21570,8 +21953,10 @@ const useScrollLocationLogic = (params) => {
       updateScrollTop(scrollTop, captureAnchor);
       const offsetHeight = element.offsetHeight;
       const scrollHeight = element.scrollHeight;
+      const distanceToBottom = scrollHeight - (scrollTop + offsetHeight);
+      const bottomEnterThreshold = Math.max(Math.floor(scrolledUpThreshold * 0.6), 24);
       const prevCloseToBottom = closeToBottom.current;
-      closeToBottom.current = scrollHeight - (scrollTop + offsetHeight) < scrolledUpThreshold;
+      closeToBottom.current = prevCloseToBottom ? distanceToBottom < scrolledUpThreshold : distanceToBottom < bottomEnterThreshold;
       closeToTop.current = scrollTop < scrolledUpThreshold;
       if (closeToBottom.current) {
         setHasNewMessages(false);
@@ -21616,7 +22001,7 @@ const UnreadMessagesSeparator = ({
             onClick: () => markRead(),
             size: "sm",
             variant: "secondary",
-            children: /* @__PURE__ */ jsx(IconCrossMedium, {})
+            children: /* @__PURE__ */ jsx(IconXmark, {})
           }
         )
       ]
@@ -21836,7 +22221,7 @@ const UnreadMessagesNotification = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Button, { appearance: "outline", onClick: () => markRead(), variant: "secondary", children: /* @__PURE__ */ jsx(IconCrossMedium, {}) })
+        /* @__PURE__ */ jsx(Button, { appearance: "outline", onClick: () => markRead(), variant: "secondary", children: /* @__PURE__ */ jsx(IconXmark, {}) })
       ]
     }
   );
@@ -23506,11 +23891,17 @@ const useConnectionRecoveredListener = (forceUpdate) => {
 const MOBILE_NAV_BREAKPOINT = 768;
 const useMobileNavigation = (channelListRef, navOpen, closeMobileNav) => {
   useEffect(() => {
+    const isClickInsideChannelList = (event) => {
+      const channelListElement = channelListRef.current;
+      if (!channelListElement) return false;
+      const eventPath = event.composedPath();
+      return eventPath.includes(channelListElement);
+    };
     const handleClickOutside = (event) => {
       if (typeof window !== "undefined" && window.innerWidth >= MOBILE_NAV_BREAKPOINT) {
         return;
       }
-      if (closeMobileNav && channelListRef.current && !channelListRef.current.contains(event.target) && navOpen) {
+      if (closeMobileNav && channelListRef.current && !isClickInsideChannelList(event) && navOpen) {
         closeMobileNav();
       }
     };
@@ -24203,7 +24594,7 @@ const SearchBar = () => {
           "str-chat__search-bar__input-wrapper--active": isActive
         }),
         children: [
-          /* @__PURE__ */ jsx(IconMagnifyingGlassSearch, {}),
+          /* @__PURE__ */ jsx(IconSearch, {}),
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -24247,7 +24638,7 @@ const SearchBar = () => {
               ref: clearButtonRef,
               size: "xs",
               variant: "secondary",
-              children: /* @__PURE__ */ jsx(IconCircleX, {})
+              children: /* @__PURE__ */ jsx(IconXCircle, {})
             }
           )
         ]
@@ -24640,7 +25031,7 @@ const UnMemoizedLoadMoreButton = ({
   return /* @__PURE__ */ jsx("div", { className: "str-chat__load-more-button", children: /* @__PURE__ */ jsx(
     Button,
     {
-      appearance: "outline",
+      appearance: "ghost",
       "aria-label": t("aria/Load More Channels"),
       "data-testid": "load-more-button",
       disabled: loading,
@@ -25248,6 +25639,36 @@ const useArchiveActionButtonBehavior = () => {
   };
 };
 const defaultChannelActionSet = [
+  {
+    // eslint-disable-next-line react/display-name
+    Component: forwardRef((_, ref) => {
+      const { channel } = useChannelListItemContext();
+      const dialogId2 = ChannelListItemActionButtons.getDialogId({
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        channelId: channel.id
+      });
+      const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
+      const dialogIsOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "ghost",
+          "aria-expanded": dialogIsOpen,
+          "aria-pressed": dialogIsOpen,
+          circular: true,
+          onClick: (e) => {
+            e.stopPropagation();
+            dialog.toggle();
+          },
+          ref,
+          size: "sm",
+          variant: "secondary",
+          children: /* @__PURE__ */ jsx(IconMore, {})
+        }
+      );
+    }),
+    placement: "quick-dropdown-toggle"
+  },
   {
     Component() {
       const behaviorProps = useArchiveActionButtonBehavior();
@@ -25335,7 +25756,7 @@ const defaultChannelActionSet = [
         {
           "aria-label": title,
           disabled: inProgress,
-          Icon: IconCircleBanSign,
+          Icon: IconNoSign,
           onClick: async () => {
             try {
               setInProgress(true);
@@ -25380,7 +25801,7 @@ const defaultChannelActionSet = [
       const membership = useChannelMembershipState(channel);
       const dialogId2 = ChannelListItemActionButtons.getDialogId(
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        channel.id
+        { channelId: channel.id }
       );
       const { dialog } = useDialogOnNearestManager({ id: dialogId2 });
       const [inProgress, setInProgress] = useState(false);
@@ -25441,7 +25862,7 @@ const defaultChannelActionSet = [
         {
           "aria-label": title,
           disabled: inProgress,
-          Icon: IconArrowBoxLeft,
+          Icon: IconLeave,
           onClick: async (e) => {
             e.stopPropagation();
             try {
@@ -25482,59 +25903,23 @@ const useBaseChannelActionSetFilter = (channelActionSet) => {
   const connectedUserIsMember = typeof membership.user !== "undefined";
   const ownCapabilities = channel.data?.own_capabilities;
   return useMemo(() => {
-    const filtered = channelActionSet.filter(
-      (action) => match({
-        action,
-        connectedUserIsMember,
-        isDirectMessageChannel,
-        memberCount,
-        ownCapabilities
-      }).returnType().with(
-        {
-          action: { connectedUserIsMember: true, placement: "quick", type: "archive" },
-          isDirectMessageChannel: true
-        },
-        {
-          action: {
-            connectedUserIsMember: true,
-            placement: "dropdown",
-            type: "archive"
-          },
-          isDirectMessageChannel: false
-        },
-        {
-          action: { placement: "dropdown", type: "mute" },
-          isDirectMessageChannel: true,
-          ownCapabilities: P.when(
-            (capabilities) => capabilities?.includes("mute-channel")
-          )
-        },
-        {
-          action: { placement: "quick", type: "mute" },
-          isDirectMessageChannel: false,
-          ownCapabilities: P.when(
-            (capabilities) => capabilities?.includes("mute-channel")
-          )
-        },
-        {
-          action: { type: "ban" },
-          memberCount: P.number.gt(0).and(P.number.lte(2)),
-          ownCapabilities: P.when(
-            (capabilities) => capabilities?.includes("ban-channel-members")
-          )
-        },
-        {
-          action: { type: "leave" },
-          ownCapabilities: P.when(
-            (capabilities) => capabilities?.includes("leave-channel")
-          )
-        },
-        {
-          action: { connectedUserIsMember: true, type: "pin" }
-        },
-        () => true
-      ).otherwise(() => false)
-    );
+    const filtered = channelActionSet.filter((action) => {
+      if (action.placement === "quick-dropdown-toggle") return true;
+      switch (action.type) {
+        case "archive":
+          return connectedUserIsMember && (action.placement === "quick" && isDirectMessageChannel || action.placement === "dropdown" && !isDirectMessageChannel);
+        case "mute":
+          return ownCapabilities?.includes("mute-channel") && (action.placement === "dropdown" && isDirectMessageChannel || action.placement === "quick" && !isDirectMessageChannel);
+        case "ban":
+          return memberCount > 0 && memberCount <= 2 && ownCapabilities?.includes("ban-channel-members");
+        case "leave":
+          return ownCapabilities?.includes("leave-channel");
+        case "pin":
+          return connectedUserIsMember;
+        default:
+          return true;
+      }
+    });
     return filtered;
   }, [
     channelActionSet,
@@ -25545,17 +25930,18 @@ const useBaseChannelActionSetFilter = (channelActionSet) => {
   ]);
 };
 const ChannelListItemActionButtons = () => {
+  const { ContextMenu: ContextMenuComponent = ContextMenu } = useComponentContext();
   const { channel } = useChannelListItemContext();
   const [referenceElement, setReferenceElement] = React.useState(null);
-  const dialogId2 = ChannelListItemActionButtons.getDialogId(
+  const dialogId2 = ChannelListItemActionButtons.getDialogId({
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    channel.id
-  );
+    channelId: channel.id
+  });
   const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
   const dialogIsOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
   const filteredActionSet = useBaseChannelActionSetFilter(defaultChannelActionSet);
-  const splitActionSet = useSplitActionSet(filteredActionSet);
-  if (splitActionSet.quickActionSet.length + splitActionSet.dropdownActionSet.length === 0) {
+  const { dropdownActionSet, quickActionSet, quickDropdownToggleAction } = useSplitActionSet(filteredActionSet);
+  if (quickActionSet.length + dropdownActionSet.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxs(
@@ -25565,26 +25951,10 @@ const ChannelListItemActionButtons = () => {
         "str-chat__channel-list-item__action-buttons--active": dialogIsOpen
       }),
       children: [
-        splitActionSet.dropdownActionSet.length > 0 && /* @__PURE__ */ jsx(
-          Button,
-          {
-            appearance: "ghost",
-            "aria-expanded": dialogIsOpen,
-            "aria-pressed": dialogIsOpen,
-            circular: true,
-            onClick: (e) => {
-              e.stopPropagation();
-              dialog.toggle();
-            },
-            ref: setReferenceElement,
-            size: "sm",
-            variant: "secondary",
-            children: /* @__PURE__ */ jsx(IconDotGrid1x3Horizontal, {})
-          }
-        ),
-        splitActionSet.quickActionSet.map(({ Component: Component2, type }) => /* @__PURE__ */ jsx(Component2, {}, type)),
+        quickDropdownToggleAction && dropdownActionSet.length > 0 && /* @__PURE__ */ jsx(quickDropdownToggleAction.Component, { ref: setReferenceElement }),
+        quickActionSet.map(({ Component: Component2, type }) => /* @__PURE__ */ jsx(Component2, {}, type)),
         /* @__PURE__ */ jsx(
-          ContextMenu,
+          ContextMenuComponent,
           {
             className: "str-chat__channel-list-item__action-buttons-context-menu",
             dialogManagerId: dialogManager?.id,
@@ -25594,14 +25964,14 @@ const ChannelListItemActionButtons = () => {
             referenceElement,
             tabIndex: -1,
             trapFocus: true,
-            children: splitActionSet.dropdownActionSet.map(({ Component: Component2, type }) => /* @__PURE__ */ jsx(Component2, {}, type))
+            children: dropdownActionSet.map(({ Component: Component2, type }) => /* @__PURE__ */ jsx(Component2, {}, type))
           }
         )
       ]
     }
   );
 };
-ChannelListItemActionButtons.getDialogId = (channelId) => `channel-action-buttons-${channelId}`;
+ChannelListItemActionButtons.getDialogId = ({ channelId }) => `channel-action-buttons-${channelId}`;
 ChannelListItemActionButtons.displayName = "ChannelListItemActionButtons";
 function ChannelListItemTimestamp({ lastMessage }) {
   const { t, tDateTimeParser } = useTranslationContext("ChannelListItemTimestamp");
@@ -25751,21 +26121,21 @@ const useLatestMessagePreview = ({
   ]);
 };
 const deliveryStatusIconMap = {
-  delivered: IconDoubleCheckmark1Small,
-  read: IconDoubleCheckmark1Small,
+  delivered: IconChecks,
+  read: IconChecks,
   sending: IconClock,
   sent: IconCheckmark1Small
 };
 const contentTypeIconMap = {
-  deleted: IconCircleBanSign,
-  error: IconExclamationCircle1,
-  file: IconFileBend,
-  giphy: IconFileBend,
-  image: IconCamera1,
-  link: IconChainLink,
-  location: IconMapPin,
+  deleted: IconNoSign,
+  error: IconExclamationCircleFill,
+  file: IconFile,
+  giphy: IconFile,
+  image: IconCamera,
+  link: IconLink,
+  location: IconLocation,
   video: IconVideo,
-  voice: IconMicrophone
+  voice: IconVoice
 };
 const SummarizedMessagePreview = ({
   latestMessage,
@@ -26361,7 +26731,7 @@ const ThreadListItem = ({
 const ThreadListEmptyPlaceholder = () => {
   const { t } = useTranslationContext("ThreadListEmptyPlaceholder");
   return /* @__PURE__ */ jsxs("div", { className: "str-chat__thread-list-empty-placeholder", children: [
-    /* @__PURE__ */ jsx(IconBubbles, {}),
+    /* @__PURE__ */ jsx(IconMessageBubbles, {}),
     /* @__PURE__ */ jsx("p", { children: t("Reply to a message to start a thread") })
   ] });
 };
@@ -26384,7 +26754,7 @@ const ThreadListUnseenThreadsBanner = () => {
       onClick: () => client.threads.reload(),
       children: [
         !isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(IconArrowRotateRightLeftRepeatRefresh, {}),
+          /* @__PURE__ */ jsx(IconRefresh, {}),
           /* @__PURE__ */ jsx("span", { children: t("ThreadListUnseenThreadsBanner/unreadThreads", {
             count: unseenThreadIds.length
           }) })
@@ -26539,11 +26909,11 @@ const ThreadList = ({ virtuosoProps }) => {
   );
 };
 const IconsBySeverity = {
-  error: IconExclamationCircle,
+  error: IconExclamationMark,
   info: null,
-  // IconCircleInfoTooltip,
-  loading: IconArrowRotateRightLeftRepeatRefresh,
-  success: IconCheckmark2,
+  // IconInfo,
+  loading: IconRefresh,
+  success: IconCheckmark,
   warning: IconExclamationTriangle
 };
 const DefaultNotificationIcon = ({ notification }) => {
@@ -26622,7 +26992,7 @@ const Notification = forwardRef(
               onClick: handleDismiss,
               size: "sm",
               variant: "secondary",
-              children: /* @__PURE__ */ jsx(IconCrossMedium, {})
+              children: /* @__PURE__ */ jsx(IconXmark, {})
             }
           )
         ]
@@ -26927,7 +27297,7 @@ const VoiceRecordingPlayerUI = ({ audioPlayer }) => {
     secondsElapsed
   } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, "data-testid": "voice-recording-widget", children: [
-    /* @__PURE__ */ jsx(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay }),
+    /* @__PURE__ */ jsx("div", { className: "str-chat__message-attachment__voice-recording-widget__play-button-container", children: /* @__PURE__ */ jsx(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay }) }),
     /* @__PURE__ */ jsx("div", { className: "str-chat__message-attachment__voice-recording-widget__metadata", children: /* @__PURE__ */ jsxs("div", { className: "str-chat__message-attachment__voice-recording-widget__audio-state", children: [
       /* @__PURE__ */ jsx("div", { className: "str-chat__message-attachment__voice-recording-widget__timer", children: durationSeconds ? /* @__PURE__ */ jsx(
         DurationDisplay,
@@ -27184,7 +27554,7 @@ const ThumbnailButton = ({
             "aria-hidden": "true",
             className: "str-chat__modal-gallery__image-load-failed-overlay",
             "data-testid": "str-chat__modal-gallery__image-load-failed-overlay",
-            children: /* @__PURE__ */ jsx("div", { className: "str-chat__modal-gallery__image-retry-indicator", children: /* @__PURE__ */ jsx(IconArrowRotateClockwise, {}) })
+            children: /* @__PURE__ */ jsx("div", { className: "str-chat__modal-gallery__image-retry-indicator", children: /* @__PURE__ */ jsx(IconRetry, {}) })
           }
         ),
         showOverlay && /* @__PURE__ */ jsxs("div", { className: "str-chat__modal-gallery__placeholder", children: [
@@ -27275,7 +27645,7 @@ const CardContent = (props) => {
         className: "str-chat__message-attachment-card--source-link",
         "data-testid": "card-source-link",
         children: [
-          /* @__PURE__ */ jsx(IconChainLink, {}),
+          /* @__PURE__ */ jsx(IconLink, {}),
           /* @__PURE__ */ jsx("div", { className: "str-chat__message-attachment-card--url", children: url })
         ]
       }
@@ -27336,23 +27706,44 @@ const FileAttachment = ({ attachment }) => {
   );
 };
 const Giphy = ({ attachment }) => {
-  const { giphyVersion: giphyVersionName } = useChannelStateContext();
+  const { giphyVersion: giphyVersionName, imageAttachmentSizeHandler } = useChannelStateContext();
   const { BaseImage: BaseImage$1 = BaseImage } = useComponentContext();
   const { t } = useTranslationContext();
   const usesDefaultBaseImage = BaseImage$1 === BaseImage;
+  const imageElement = useRef(null);
+  const [attachmentConfiguration, setAttachmentConfiguration] = useState(void 0);
   const imageDescriptors = useMemo(
     () => toGalleryItemDescriptors(attachment, { giphyVersionName }),
     [attachment, giphyVersionName]
   );
-  if (!imageDescriptors?.imageUrl) return null;
-  const { alt, dimensions, imageUrl, title } = imageDescriptors;
+  const alt = imageDescriptors && imageDescriptors.alt;
+  const dimensions = imageDescriptors && imageDescriptors.dimensions;
+  const imageUrl = imageDescriptors && imageDescriptors.imageUrl;
+  const title = imageDescriptors && imageDescriptors.title;
+  const resolvedImageUrl = attachmentConfiguration?.url || imageUrl;
+  const imageStyleVariables = useMemo(() => {
+    const originalHeight = Number(dimensions?.height);
+    const originalWidth = Number(dimensions?.width);
+    return {
+      "--original-height": String(originalHeight > 1 ? originalHeight : 1e6),
+      "--original-width": String(originalWidth > 1 ? originalWidth : 1e6)
+    };
+  }, [dimensions?.height, dimensions?.width]);
+  useLayoutEffect(() => {
+    if (!imageElement.current || !imageAttachmentSizeHandler) return;
+    const config = imageAttachmentSizeHandler(attachment, imageElement.current);
+    setAttachmentConfiguration(config);
+  }, [attachment, imageAttachmentSizeHandler]);
+  if (!imageUrl) return null;
   return /* @__PURE__ */ jsxs("div", { className: clsx(`str-chat__message-attachment-giphy`), children: [
     /* @__PURE__ */ jsx(
       BaseImage$1,
       {
         alt: alt ?? title ?? t("User uploaded content"),
         height: dimensions?.height,
-        src: imageUrl,
+        ref: imageElement,
+        src: resolvedImageUrl,
+        style: imageStyleVariables,
         width: dimensions?.width,
         ...usesDefaultBaseImage ? { showDownloadButtonOnError: false } : {}
       }
@@ -27425,7 +27816,7 @@ const DefaultGeolocationAttachmentMapPlaceholder = ({
     className: "str-chat__message-attachment-geolocation__placeholder",
     "data-testid": "geolocation-attachment-map-placeholder",
     children: [
-      /* @__PURE__ */ jsx(IconMapPin, {}),
+      /* @__PURE__ */ jsx(IconLocation, {}),
       /* @__PURE__ */ jsx(
         "a",
         {
@@ -27977,12 +28368,12 @@ export {
   Card,
   CardContainer,
   bx as Channel,
-  dc as ChannelActionContext,
-  dd as ChannelActionProvider,
+  c5 as ChannelActionContext,
+  c6 as ChannelActionProvider,
   ChannelAvatar,
   ChannelHeader,
   ChannelList,
-  de as ChannelListContext,
+  c7 as ChannelListContext,
   ChannelListContextProvider,
   ChannelListItem,
   ChannelListItemActionButtons,
@@ -27990,10 +28381,10 @@ export {
   ChannelListItemUI,
   ChannelListUI,
   ChannelSearchResultItem,
-  df as ChannelStateContext,
-  dg as ChannelStateProvider,
+  c8 as ChannelStateContext,
+  c9 as ChannelStateProvider,
   Chat,
-  dh as ChatContext,
+  ca as ChatContext,
   ChatProvider,
   bz as ChatView,
   bC as ChatViewChannelsSelectorButton,
@@ -28005,12 +28396,13 @@ export {
   CommandChip,
   CommandItem,
   ComponentContext,
-  di as ComponentProvider,
+  cb as ComponentProvider,
   ConnectionStatus,
   ContextMenu,
   ContextMenuBackButton,
   ContextMenuBody,
   ContextMenuButton,
+  ContextMenuContent,
   ContextMenuHeader,
   ContextMenuRoot,
   CooldownTimer,
@@ -28050,163 +28442,92 @@ export {
   GlobalModal,
   GroupAvatar,
   Header$1 as Header,
-  bG as IconApiAggregate,
-  bH as IconApples,
   IconArchive,
-  IconArrowBoxLeft,
   IconArrowDown,
   IconArrowDownCircle,
   IconArrowLeft,
-  bI as IconArrowRight,
-  IconArrowRightUp,
-  IconArrowRotateClockwise,
-  IconArrowRotateRightLeftRepeatRefresh,
-  IconArrowShareLeft,
+  bG as IconArrowRight,
   IconArrowUp,
-  bJ as IconArrowsRepeatLeftRight,
-  bK as IconAt,
-  bL as IconAtSolid,
-  IconBellNotification,
+  IconArrowUpRight,
+  IconAttachment,
+  IconAudio,
+  IconBell,
   IconBellOff,
-  IconBookmark,
-  IconBookmarkRemove,
-  bM as IconBrowserAISparkle,
-  bN as IconBubble2ChatMessage,
-  bO as IconBubble2Solid,
-  bP as IconBubble3ChatMessage,
-  bQ as IconBubble3Solid,
-  bR as IconBubbleAnnotation2ChatMessage,
-  IconBubbleText6ChatMessage,
-  bT as IconBubbleText6Solid,
-  bS as IconBubbleText6SolidChatMessage,
-  IconBubbleWideNotificationChatMessage,
-  bU as IconBubbleWideSparkleChatMessage,
-  IconBubbles,
-  bV as IconCalendar1,
-  bW as IconCallCancel,
-  IconCamera1,
-  bX as IconCar1,
-  bY as IconCat,
-  IconChainLink,
-  IconChart5,
+  bJ as IconBubble3ChatMessage,
+  bK as IconBubbleText6SolidChatMessage,
+  IconCamera,
+  IconCheckmark,
   IconCheckmark1Small,
-  IconCheckmark2,
-  bZ as IconCheckmark2Small,
+  IconChecks,
   IconChevronDown,
-  b_ as IconChevronGrabberVerticalSelector,
   IconChevronLeft,
   IconChevronRight,
-  b$ as IconChevronTop,
-  IconCircleBanSign,
-  c0 as IconCircleCheck,
-  c1 as IconCircleInfoTooltip,
-  IconCircleMinus,
-  c2 as IconCircleQuestionmark,
-  c3 as IconCircleQuestionmarkFilled,
-  IconCircleX,
   IconClock,
-  c4 as IconClockSolid,
-  IconCloseQuote2,
-  c5 as IconCode,
-  c6 as IconCodeBrackets,
-  c7 as IconCodeEditorInsert,
-  c8 as IconCompass,
-  c9 as IconCreditCard2Billing,
-  IconCrossMedium,
+  IconCommand,
+  IconCopy,
   IconCrossSmall,
-  IconDotGrid1x3Horizontal,
-  IconDotGrid2x3,
-  ca as IconDotsGrid1x3Vertical,
-  IconDoubleCheckmark1Small,
-  IconEditBig,
-  cb as IconEditBigSolid,
-  cc as IconEmojiAddReaction,
-  cd as IconEmojiSad,
-  IconEmojiSmile,
-  IconExclamation,
-  IconExclamationCircle,
-  IconExclamationCircle1,
+  IconDelete,
+  IconEdit,
+  IconEmoji,
+  IconExclamationCircleFill,
+  IconExclamationMark,
+  IconExclamationMarkFill,
   IconExclamationTriangle,
-  ce as IconExclamationTriangle1,
   IconEyeOpen,
-  IconFileArrowLeftIn,
-  IconFileBend,
-  cf as IconFilledCircleInfoTooltip,
-  cg as IconFilter1,
-  IconFlag2,
-  ch as IconGauge,
+  IconFile,
+  IconFlag,
   IconGiphy,
-  ci as IconGoogle,
-  cj as IconHashtagChannel,
-  ck as IconHeart2,
-  cl as IconHistory,
-  IconImages1Alt,
-  cm as IconInvite,
-  cn as IconLayersBehind,
+  IconImage,
+  bM as IconInfo,
   IconLayoutAlignLeft,
-  co as IconLayoutGrid1,
-  cp as IconLightBulbSimple,
-  cq as IconLimits,
-  cr as IconLineChart3,
-  IconLoadingCircle,
-  cs as IconLock,
-  IconMagnifyingGlassSearch,
-  IconMapPin,
-  IconMicrophone,
-  ct as IconMicrophoneSolid,
-  cu as IconMinusLarge,
-  cv as IconMinusSmall,
+  IconLeave,
+  bN as IconLightBulbSimple,
+  IconLink,
+  IconLoading,
+  IconLocation,
+  bH as IconMessageBubble,
+  bI as IconMessageBubbleFill,
+  IconMessageBubbles,
+  bP as IconMinus,
+  IconMinusCircle,
+  bQ as IconMinusSmall,
+  IconMore,
   IconMute,
-  cw as IconNewspaper2,
-  cx as IconOrganization,
-  IconPaperPlane,
-  cy as IconPaperPlaneTopRight,
-  IconPaperclip,
-  cz as IconParagraphsText,
-  IconPause,
-  cA as IconPencil,
-  IconPeople,
-  cB as IconPeople2,
-  IconPeopleAdd,
-  IconPeopleAdded,
-  cC as IconPeopleCircle,
-  cD as IconPeopleCopy,
-  cE as IconPeopleEditUserRights,
-  IconPeopleRemove,
-  cF as IconPersona,
+  IconNoSign,
+  IconNotification,
+  IconPauseFill,
   IconPin,
-  IconPlaySolid,
-  IconPlusLarge,
+  IconPlayFill,
+  IconPlus,
   IconPlusSmall,
-  IconRunShortcut,
-  cG as IconSearchText,
-  cH as IconSettingsGear2,
-  cI as IconSettingsSliderVer,
-  cJ as IconShapesPlusCloseSquareCircle,
-  cK as IconShapesTriangleSquareCircle,
-  cL as IconShareRedirectLink,
-  cM as IconShield,
-  IconSquareBehindSquare2_Copy,
-  cN as IconSquareCircleTopRightFeeds,
-  cO as IconStop,
-  cP as IconTable,
-  cQ as IconTeam,
-  cR as IconTennis,
-  cS as IconTextToImageURLEnrichment,
+  IconPoll,
+  IconQuote,
+  IconRefresh,
+  IconReorder,
+  IconReply,
+  IconRetry,
+  IconSave,
+  IconSearch,
+  IconSend,
+  bR as IconSettingsGear2,
+  IconThread,
+  bL as IconThreadFill,
   IconThunder,
   IconTranslate,
-  IconTrashBin,
-  cT as IconTrending4,
   IconTrophy,
-  cU as IconUnlocked,
   IconUnpin,
-  cV as IconUsers,
+  IconUnsave,
+  IconUpload,
+  IconUser,
+  IconUserAdd,
+  IconUserCheck,
+  IconUserRemove,
   IconVideo,
-  IconVideoSolid,
-  cW as IconVoiceAndVideo,
-  cX as IconVoiceHigh,
-  IconVolumeFull,
-  cY as IconWebhook,
+  IconVideoFill,
+  IconVoice,
+  bO as IconVoiceFill,
+  IconXCircle,
+  IconXmark,
   ImageComponent,
   ImageContainer,
   ImagePlaceholder,
@@ -28215,9 +28536,9 @@ export {
   LinkPreviewList,
   LoadMoreButton,
   LoadMorePaginator,
-  cZ as LoadingChannel,
+  bS as LoadingChannel,
   LoadingChannels,
-  c_ as LoadingErrorIndicator,
+  bT as LoadingErrorIndicator,
   LoadingIndicator,
   LoadingIndicatorIcon,
   MAX_MESSAGE_REACTIONS_TO_FETCH,
@@ -28232,7 +28553,7 @@ export {
   MessageBouncePrompt,
   MessageBounceProvider,
   MessageComposer,
-  dj as MessageComposerContext,
+  cc as MessageComposerContext,
   MessageComposerContextProvider,
   MessageComposerUI,
   MessageContext,
@@ -28245,6 +28566,7 @@ export {
   MessageProvider,
   MessageReactions,
   MessageReactionsDetail,
+  MessageReactionsDetailLoadingIndicator,
   MessageRepliesCountButton,
   MessageSearchResultItem,
   MessageStatus,
@@ -28264,7 +28586,7 @@ export {
   NotificationList,
   NotificationTranslationTopic,
   NumericInput,
-  c$ as OPTIONAL_MESSAGE_ACTIONS,
+  bU as OPTIONAL_MESSAGE_ACTIONS,
   OtherFilesContainer,
   PauseIcon,
   PinIndicator,
@@ -28331,22 +28653,22 @@ export {
   TextInputFieldSet,
   TextareaComposer,
   Thread,
-  da as ThreadContext,
+  c3 as ThreadContext,
   ThreadHeader,
   ThreadList,
   ThreadListItem,
   ThreadListItemUI,
-  db as ThreadProvider,
+  c4 as ThreadProvider,
   ThreadStart,
   Tooltip,
   TranslationBuilder,
-  dk as TranslationContext,
+  cd as TranslationContext,
   TranslationProvider,
   TranslationTopic,
-  dl as TypingContext,
+  ce as TypingContext,
   TypingIndicator,
   TypingIndicatorHeader,
-  dm as TypingProvider,
+  cf as TypingProvider,
   UNREAD_MESSAGE_SEPARATOR_CLASS,
   UnMemoizedLoadMorePaginator,
   UnreadMessagesNotification,
@@ -28404,21 +28726,21 @@ export {
   getCssDimensionsVariables,
   getGroupChannelDisplayInfo,
   getGroupStyles,
-  d0 as getImages,
+  bV as getImages,
   getIsFirstUnreadMessage,
   getLastReceived,
   getLatestMessagePreview,
   getMessageActions,
-  d1 as getNonImageAttachments,
-  d7 as getNotificationTargetPanel,
-  d8 as getNotificationTargetTag,
+  bW as getNonImageAttachments,
+  c0 as getNotificationTargetPanel,
+  c1 as getNotificationTargetTag,
   getReadByTooltipText,
   getTextareaCaretRect,
   getTranslatedMessageText,
   getWholeChar,
   handleActionWarning,
-  d4 as hasMoreMessagesProbably,
-  d5 as hasNotMoreMessages,
+  bZ as hasMoreMessagesProbably,
+  b_ as hasNotMoreMessages,
   hiTranslations,
   htmlToTextPlugin,
   imageToLink,
@@ -28428,7 +28750,7 @@ export {
   isChrome,
   isDate,
   isDateSeparatorMessage,
-  dn as isDayOrMoment,
+  cg as isDayOrMoment,
   isFirefox,
   isGalleryAttachmentType,
   isIntroMessage,
@@ -28440,8 +28762,8 @@ export {
   isMessageErrorRetryable,
   isNetworkSendFailure,
   isNotificationForPanel,
-  d6 as isNotificationTargetPanel,
-  dp as isNumberOrString,
+  b$ as isNotificationTargetPanel,
+  ch as isNumberOrString,
   isSafari,
   isSvgAttachment,
   isUserMuted,
@@ -28449,8 +28771,8 @@ export {
   jaTranslations,
   keepLineBreaksPlugin,
   koTranslations,
-  d3 as makeDateMessageId,
-  d2 as makeIntroMessage,
+  bY as makeDateMessageId,
+  bX as makeIntroMessage,
   mapEmojiMartData,
   mapToUserNameOrId,
   markDownRenderers,
@@ -28528,7 +28850,7 @@ export {
   useFlagHandler,
   useGalleryContext,
   useLastReadData,
-  d9 as useLegacyThreadContext,
+  c2 as useLegacyThreadContext,
   useLiveLocationSharingManager,
   useMarkUnreadHandler,
   useMentionsHandler,