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

package/dist/es/index.mjs

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import clsx from "clsx";
 import { nanoid } from "nanoid";
-import React, { useState, useEffect, createContext, useContext, useCallback, useLayoutEffect, useMemo, 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, v as validateAndGetMessage, n as isUserMuted, o as defaultPinPermissions, q as useThreadContext, r as usePopoverPosition, s as useComponentContext, t as IconCrossMedium, w as IconPeople, x as IconChevronRight, y as IconChevronLeft, z as IconArrowLeft, A as IconExclamationCircle, D as IconCircleBanSign, E as isMessageErrorRetryable, F as ACTIONS_NOT_WORKING_IN_THREAD, G as useNotificationTarget, H as IconArrowRightUp, J as addNotificationTargetTag, K as IconPin, M as mapToUserNameOrId, N as IconClock, O as IconCheckmark1Small, P as IconDoubleCheckmark1Small, Q as getReadByTooltipText, R as messageHasAttachments, S as messageTextHasEmojisOnly, T as isDate, U as getDateString, V as IconTranslate, W as useMessageComposerContext, X as useIsCooldownActive, Y as IconCrossSmall, Z as IconImages1Alt, _ as IconChart5, $ as IconMapPin, a0 as IconFileBend, a1 as IconChainLink, a2 as IconVideo, a3 as IconVideoSolid, a4 as IconMicrophone, a5 as IconBookmark, a6 as IconBellNotification, a7 as IconChevronDown, a8 as IconPlusSmall, a9 as IconCheckmark2, aa as DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ab as IconTrophy, ac as IconDotGrid2x3, ad as IconCircleMinus, ae as IconPaperPlane, af as IconVolumeFull, ag as IconPeopleAdd, ah as IconMute, ai as IconFlag2, aj as IconPeopleRemove, ak as IconPaperclip, al as IconRunShortcut, am as CHANNEL_CONTAINER_ID, an as IconPlusLarge, ao as IconArrowDownCircle, ap as IconExclamationTriangle, aq as useAudioPlayer, ar as IconArrowRotateClockwise, as as IconThunder, at as IconTrashBin, au as IconFileArrowLeftIn, av as MessageComposerContextProvider, aw as useTypingContext, ax as defaultDateTimeParser, ay as isLanguageSupported, az as IconLayoutAlignLeft, aA as useChatViewContext, aB as MESSAGE_ACTIONS, aC as LegacyThreadContext, aD as IconPeopleAdded, aE as IconBookmarkRemove, aF as IconBellOff, aG as IconBubbleWideNotificationChatMessage, aH as IconEditBig, aI as IconSquareBehindSquare2_Copy, aJ as IconUnpin, aK as IconCloseQuote2, aL as IconBubbleText6ChatMessage, aM as areMessageUIPropsEqual, aN as isDateSeparatorMessage, aO as isMessageBlocked, aP as messageHasSingleAttachment, aQ as messageHasGiphyAttachment, aR as messageHasReactions, aS as isMessageEdited, aT as countEmojis, aU as areMessagePropsEqual, aV as getMessageActions, aW as processMessages, aX as insertIntro, aY as getGroupStyles, aZ as getLastReceived, a_ as IconArrowUp, a$ as isIntroMessage, b0 as isLocalMessage, b1 as getIsFirstUnreadMessage, b2 as IconArrowDown, b3 as DEFAULT_NEXT_CHANNEL_PAGE_SIZE, b4 as EmptyStateIndicator, b5 as getChannel, b6 as IconMagnifyingGlassSearch, b7 as IconCircleX, b8 as DEFAULT_JUMP_TO_PAGE_SIZE, b9 as IconArchive, ba as IconArrowBoxLeft, bb as IconDotGrid1x3Horizontal, bc as IconCamera1, bd as IconExclamationCircle1, be as ChatProvider, bf as TranslationProvider, bg as useThreadsViewContext, bh as IconBubbles, bi as IconArrowRotateRightLeftRepeatRefresh, bj as IconCircleInfoTooltip, bk as IconEyeOpen } from "../WithAudioPlayback-BcKZ5Lbh.mjs";
-import { bp, bs, d8, d9, da, db, dc, bu, bx, bt, bw, by, dd, bB, bC, bD, bE, bF, bG, bH, bI, bJ, bK, bL, bM, bN, bP, bO, bQ, bR, bS, bT, 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, de, cX, d6, d7, df, dg, dh, bm, bA, bz, bn, bo, cY, cZ, d3, d4, d0, d1, di, d2, dj, c$, c_, bl, bv, bq, br, d5 } from "../WithAudioPlayback-BcKZ5Lbh.mjs";
+import React, { useState, useEffect, useCallback, useLayoutEffect, useMemo, useContext, createContext, useRef, forwardRef, createElement, Component, Fragment as Fragment$1 } from "react";
+import { u as useHandleFileChangeWrapper, d as dataTransferItemsToFiles, r as renderAudio, t as toAudioBuffer, c as createFileFromBlobs, g as getExtensionFromMimeType, a as getRecordedMediaTypeFromMimeType } from "./audioProcessing.21cb49e1.mjs";
+import { u as useStateStore, a as useMessageComposerController, i as isMessageBounced, b as useChannelActionContext, C as ComponentContext, c as useTranslationContext, d as useChannelStateContext, e as useChatContext, f as isNotificationForPanel, B as BaseIcon, g as Button, I as IconPause, h as IconPlaySolid, j as getDefaultExportFromCjs, k as defaultTranslatorFunction, p as predefinedFormatters, L as LocalizedFormat, l as calendar, m as IconLoadingCircle, n as isNetworkSendFailure, v as validateAndGetMessage, o as isUserMuted, q as defaultPinPermissions, r as useThreadContext, s as usePopoverPosition, t as useComponentContext, w as IconCrossMedium, x as IconPeople, y as IconExclamation, z as IconChevronRight, A as IconChevronLeft, D as IconArrowLeft, E as IconExclamationCircle, F as IconCircleBanSign, G as isMessageErrorRetryable, H as ACTIONS_NOT_WORKING_IN_THREAD, J as useNotificationTarget, K as IconArrowRightUp, M as addNotificationTargetTag, N as IconPin, O as mapToUserNameOrId, P as IconClock, Q as IconCheckmark1Small, R as IconDoubleCheckmark1Small, S as getReadByTooltipText, T as messageHasAttachments, U as messageTextHasEmojisOnly, V as isDate, W as getDateString, X as IconTranslate, Y as useMessageComposerContext, Z as useIsCooldownActive, _ as IconCrossSmall, $ as IconImages1Alt, a0 as IconChart5, a1 as IconMapPin, a2 as IconFileBend, a3 as IconChainLink, a4 as IconVideo, a5 as IconVideoSolid, a6 as IconMicrophone, a7 as IconBookmark, a8 as IconBellNotification, a9 as IconChevronDown, aa as IconPlusSmall, ab as IconCheckmark2, ac as DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ad as IconTrophy, ae as IconDotGrid2x3, af as IconCircleMinus, ag as IconPaperPlane, ah as IconVolumeFull, ai as IconPeopleAdd, aj as IconMute, ak as IconFlag2, al as IconPeopleRemove, am as IconPaperclip, an as IconRunShortcut, ao as CHANNEL_CONTAINER_ID, ap as IconPlusLarge, aq as IconExclamationTriangle, ar as useAudioPlayer, as as IconArrowRotateClockwise, at as IconArrowDownCircle, au as IconThunder, av as IconTrashBin, aw as IconFileArrowLeftIn, ax as MessageComposerContextProvider, ay as useTypingContext, az as defaultDateTimeParser, aA as isLanguageSupported, aB as IconLayoutAlignLeft, aC as useChatViewContext, aD as MESSAGE_ACTIONS, aE as LegacyThreadContext, aF as IconArrowShareLeft, aG as IconEmojiSmile, aH as IconDotGrid1x3Horizontal, aI as IconPeopleAdded, aJ as IconBookmarkRemove, aK as IconBellOff, aL as IconBubbleWideNotificationChatMessage, aM as IconEditBig, aN as IconSquareBehindSquare2_Copy, aO as IconUnpin, aP as IconCloseQuote2, aQ as IconBubbleText6ChatMessage, aR as areMessageUIPropsEqual, aS as isDateSeparatorMessage, aT as isMessageBlocked, aU as messageHasSingleAttachment, aV as messageHasGiphyAttachment, aW as messageHasReactions, aX as isMessageEdited, aY as countEmojis, aZ as areMessagePropsEqual, a_ as getMessageActions, a$ as processMessages, b0 as insertIntro, b1 as getGroupStyles, b2 as getLastReceived, b3 as IconArrowUp, b4 as isIntroMessage, b5 as isLocalMessage, b6 as getIsFirstUnreadMessage, b7 as IconArrowDown, b8 as DEFAULT_NEXT_CHANNEL_PAGE_SIZE, b9 as EmptyStateIndicator, ba as getChannel, bb as IconMagnifyingGlassSearch, bc as IconCircleX, bd as useChannelListContext, be as DEFAULT_JUMP_TO_PAGE_SIZE, bf as ChannelListContextProvider, bg as IconArchive, bh as IconArrowBoxLeft, bi as IconCamera1, bj as IconExclamationCircle1, bk as ChatProvider, bl as TranslationProvider, bm as useThreadsViewContext, bn as IconBubbles, bo as IconArrowRotateRightLeftRepeatRefresh, bp as IconEyeOpen } from "./WithAudioPlayback.a3d5a2fc.mjs";
+import { bu, bx, dc, dd, de, df, dg, dh, bz, bC, by, bB, bD, di, bG, bH, bI, bJ, bK, bL, bM, bN, bO, bP, bQ, bR, bT, bS, bU, bV, bW, bX, bY, bZ, b_, b$, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, ca, cb, cc, cd, ce, cf, cg, ch, ci, cj, ck, cl, cm, cn, co, cp, cq, cr, cs, ct, cu, cv, cw, cx, cy, cz, cA, cB, cC, cD, cE, cF, cG, cH, cI, cJ, cK, cL, cM, cN, cO, cP, cQ, cR, cS, cT, cU, cV, cW, cX, cY, cZ, c_, dj, c$, da, db, dk, dl, dm, br, bF, bE, bs, bt, d0, d1, d7, d8, d4, d5, dn, d6, dp, d3, d2, bq, bA, bv, bw, d9 } from "./WithAudioPlayback.a3d5a2fc.mjs";
 import { StateStore, formatMessage, MessageComposer as MessageComposer$1, isGiphyAttachment, isScrapedContent, isLocalVideoAttachment, isVideoAttachment, isLocalImageAttachment, isImageAttachment, isAudioAttachment, isVoiceRecordingAttachment, isFileAttachment, isVoteAnswer, VotingVisibility, isLocalVoiceRecordingAttachment, isLocalAudioAttachment, isLocalFileAttachment, isLocalAttachment, LinkPreviewsManager, SearchController, ChannelSearchSource, UserSearchSource, MessageSearchSource, StreamChat, isSharedLocationResponse, LiveLocationManager } from "stream-chat";
 import throttle from "lodash.throttle";
 import * as linkify from "linkifyjs";
@@ -19,7 +19,6 @@ import { visit, SKIP } from "unist-util-visit";
 import i18n from "i18next";
 import Dayjs from "dayjs";
 import uniqBy from "lodash.uniqby";
-import { match, P } from "ts-pattern";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
 import debounce from "lodash.debounce";
 import fixWebmDuration from "fix-webm-duration";
@@ -71,28 +70,12 @@ const useAIState = (channel) => {
   }, [channel]);
   return { aiState };
 };
-const ChannelListContext = createContext(
-  void 0
-);
-const ChannelListContextProvider = ({
-  children,
-  value
-}) => /* @__PURE__ */ jsx(ChannelListContext.Provider, { value, children });
-const useChannelListContext = (componentName) => {
-  const contextValue = useContext(ChannelListContext);
-  if (!contextValue) {
-    console.warn(
-      `The useChannelListContext hook was called outside of the ChannelListContext provider. Make sure this hook is called within the ChannelList component. The errored call is located in the ${componentName} component.`
-    );
-    return {};
-  }
-  return contextValue;
-};
 class DialogManager {
-  constructor({ id } = {}) {
+  constructor({ closeOnClickOutside = true, id } = {}) {
     this.state = new StateStore({
       dialogsById: {}
     });
+    this.closeOnClickOutside = closeOnClickOutside;
     this.id = id ?? nanoid();
   }
   get openDialogCount() {
@@ -107,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: () => {
@@ -129,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
         }
       }));
     }
@@ -220,7 +205,11 @@ class DialogManager {
     }));
   }
 }
-const useDialog = ({ dialogManagerId, id }) => {
+const useDialog = ({
+  closeOnClickOutside,
+  dialogManagerId,
+  id
+}) => {
   const { dialogManager } = useDialogManager({ dialogManagerId });
   useEffect(
     () => () => {
@@ -228,7 +217,7 @@ const useDialog = ({ dialogManagerId, id }) => {
     },
     [dialogManager, id]
   );
-  return dialogManager.getOrCreate({ id });
+  return dialogManager.getOrCreate({ closeOnClickOutside, id });
 };
 const useDialogOnNearestManager = ({ id }) => {
   const { dialogManager } = useNearestDialogManagerContext() ?? {};
@@ -275,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",
@@ -285,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"
       }
@@ -307,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;
 };
@@ -322,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,
@@ -950,7 +988,6 @@ const deTranslations = {
   "End vote": "Abstimmung beenden",
   "Enforce unique vote is enabled": "Eindeutige Abstimmung ist aktiviert",
   "Error": "Fehler",
-  "Error · Unsent": "Fehler · Nicht gesendet",
   "Error adding flag": "Fehler beim Hinzufügen des Flags",
   "Error connecting to chat, refresh the page to try again.": "Verbindungsfehler zum Chat, aktualisieren Sie die Seite, um es erneut zu versuchen.",
   "Error deleting message": "Fehler beim Löschen der Nachricht",
@@ -1072,8 +1109,6 @@ const deTranslations = {
   "Maximum number of votes (from 2 to 10)": "Maximale Anzahl der Stimmen (von 2 bis 10)",
   Menu: Menu$b,
   "Message deleted": "Nachricht gelöscht",
-  "Message Failed · Click to try again": "Nachricht fehlgeschlagen · Klicken, um es erneut zu versuchen",
-  "Message Failed · Unauthorized": "Nachricht fehlgeschlagen · Nicht autorisiert",
   "Message failed to send": "Nachricht konnte nicht gesendet werden",
   "Message has been successfully flagged": "Nachricht wurde erfolgreich gemeldet",
   "Message pinned": "Nachricht angeheftet",
@@ -1243,6 +1278,7 @@ const deTranslations = {
   "View translation": "Übersetzung anzeigen",
   "Voice message": "Sprachnachricht",
   "Voice message {{ duration }}": "Sprachnachricht {{ duration }}",
+  "Voice message deleted": "Sprachnachricht gelöscht",
   voiceMessageCount_one: voiceMessageCount_one$9,
   voiceMessageCount_other: voiceMessageCount_other$b,
   "Vote ended": "Abstimmung beendet",
@@ -1473,7 +1509,6 @@ const enTranslations = {
   "End vote": "End Vote",
   "Enforce unique vote is enabled": "Enforce unique vote is enabled",
   "Error": "Error",
-  "Error · Unsent": "Error · Unsent",
   "Error adding flag": "Error adding flag",
   "Error connecting to chat, refresh the page to try again.": "Error connecting to chat, refresh the page to try again.",
   "Error deleting message": "Error deleting message",
@@ -1595,8 +1630,6 @@ const enTranslations = {
   "Maximum number of votes (from 2 to 10)": "Maximum number of votes (from 2 to 10)",
   Menu: Menu$a,
   "Message deleted": "Message deleted",
-  "Message Failed · Click to try again": "Message Failed · Click to try again",
-  "Message Failed · Unauthorized": "Message Failed · Unauthorized",
   "Message failed to send": "Message failed to send",
   "Message has been successfully flagged": "Message has been successfully flagged",
   "Message pinned": "Message pinned",
@@ -1766,6 +1799,7 @@ const enTranslations = {
   "View translation": "View translation",
   "Voice message": "Voice message",
   "Voice message {{ duration }}": "Voice message {{ duration }}",
+  "Voice message deleted": "Voice message deleted",
   voiceMessageCount_one: voiceMessageCount_one$8,
   voiceMessageCount_other: voiceMessageCount_other$a,
   "Vote ended": "Vote ended",
@@ -2012,7 +2046,6 @@ const esTranslations = {
   "End vote": "Finalizar votación",
   "Enforce unique vote is enabled": "El voto único está habilitado",
   "Error": "Error",
-  "Error · Unsent": "Error · No enviado",
   "Error adding flag": "Error al agregar la bandera",
   "Error connecting to chat, refresh the page to try again.": "Error al conectarse al chat, actualice la página para volver a intentarlo.",
   "Error deleting message": "Error al eliminar el mensaje",
@@ -2137,8 +2170,6 @@ const esTranslations = {
   "Maximum number of votes (from 2 to 10)": "Número máximo de votos (de 2 a 10)",
   Menu: Menu$9,
   "Message deleted": "Mensaje eliminado",
-  "Message Failed · Click to try again": "Mensaje fallido · Haga clic para volver a intentarlo",
-  "Message Failed · Unauthorized": "Mensaje fallido · No autorizado",
   "Message failed to send": "No se pudo enviar el mensaje",
   "Message has been successfully flagged": "El mensaje se marcó correctamente",
   "Message pinned": "Mensaje fijado",
@@ -2315,6 +2346,7 @@ const esTranslations = {
   "View translation": "Ver traducción",
   "Voice message": "Mensaje de voz",
   "Voice message {{ duration }}": "Mensaje de voz {{ duration }}",
+  "Voice message deleted": "Mensaje de voz eliminado",
   voiceMessageCount_one: voiceMessageCount_one$7,
   voiceMessageCount_many: voiceMessageCount_many$4,
   voiceMessageCount_other: voiceMessageCount_other$9,
@@ -2562,7 +2594,6 @@ const frTranslations = {
   "End vote": "Fin du vote",
   "Enforce unique vote is enabled": "Le vote unique est activé",
   "Error": "Erreur",
-  "Error · Unsent": "Erreur - Non envoyé",
   "Error adding flag": "Erreur lors de l'ajout du signalement",
   "Error connecting to chat, refresh the page to try again.": "Erreur de connexion au chat, rafraîchissez la page pour réessayer.",
   "Error deleting message": "Erreur lors de la suppression du message",
@@ -2687,8 +2718,6 @@ const frTranslations = {
   "Maximum number of votes (from 2 to 10)": "Nombre maximum de votes (de 2 à 10)",
   Menu: Menu$8,
   "Message deleted": "Message supprimé",
-  "Message Failed · Click to try again": "Échec de l'envoi du message - Cliquez pour réessayer",
-  "Message Failed · Unauthorized": "Échec de l'envoi du message - Non autorisé",
   "Message failed to send": "Échec de l'envoi du message",
   "Message has been successfully flagged": "Le message a été signalé avec succès",
   "Message pinned": "Message épinglé",
@@ -2865,6 +2894,7 @@ const frTranslations = {
   "View translation": "Voir la traduction",
   "Voice message": "Message vocal",
   "Voice message {{ duration }}": "Message vocal {{ duration }}",
+  "Voice message deleted": "Message vocal supprimé",
   voiceMessageCount_one: voiceMessageCount_one$6,
   voiceMessageCount_many: voiceMessageCount_many$3,
   voiceMessageCount_other: voiceMessageCount_other$8,
@@ -3096,7 +3126,6 @@ const hiTranslations = {
   "End vote": "मत समाप्त करें",
   "Enforce unique vote is enabled": "अनोखा वोट सक्षम है",
   "Error": "त्रुटि",
-  "Error · Unsent": "फेल",
   "Error adding flag": "ध्वज जोड़ने में त्रुटि",
   "Error connecting to chat, refresh the page to try again.": "चैट से कनेक्ट करने में त्रुटि, पेज को रिफ्रेश करें",
   "Error deleting message": "संदेश हटाने में त्रुटि",
@@ -3219,8 +3248,6 @@ const hiTranslations = {
   "Maximum number of votes (from 2 to 10)": "अधिकतम वोटों की संख्या (2 से 10)",
   Menu: Menu$7,
   "Message deleted": "मैसेज हटा दिया गया",
-  "Message Failed · Click to try again": "मैसेज फ़ैल - पुनः कोशिश करें",
-  "Message Failed · Unauthorized": "मैसेज फ़ैल - अनधिकृत",
   "Message failed to send": "संदेश भेजने में विफल",
   "Message has been successfully flagged": "मैसेज को फ्लैग कर दिया गया है",
   "Message pinned": "संदेश पिन किया गया",
@@ -3390,6 +3417,7 @@ const hiTranslations = {
   "View translation": "अनुवाद देखें",
   "Voice message": "आवाज संदेश",
   "Voice message {{ duration }}": "वॉइस संदेश {{ duration }}",
+  "Voice message deleted": "वॉइस संदेश हटा दिया गया",
   voiceMessageCount_one: voiceMessageCount_one$5,
   voiceMessageCount_other: voiceMessageCount_other$7,
   "Vote ended": "मतदान समाप्त",
@@ -3636,7 +3664,6 @@ const itTranslations = {
   "End vote": "Termina il voto",
   "Enforce unique vote is enabled": "Il voto unico è abilitato",
   "Error": "Errore",
-  "Error · Unsent": "Errore · Non inviato",
   "Error adding flag": "Errore durante l'aggiunta del flag",
   "Error connecting to chat, refresh the page to try again.": "Errore di connessione alla chat, aggiorna la pagina per riprovare.",
   "Error deleting message": "Errore durante l'eliminazione del messaggio",
@@ -3761,8 +3788,6 @@ const itTranslations = {
   "Maximum number of votes (from 2 to 10)": "Numero massimo di voti (da 2 a 10)",
   Menu: Menu$6,
   "Message deleted": "Messaggio cancellato",
-  "Message Failed · Click to try again": "Invio messaggio fallito · Clicca per riprovare",
-  "Message Failed · Unauthorized": "Invio messaggio fallito · Non autorizzato",
   "Message failed to send": "Invio del messaggio non riuscito",
   "Message has been successfully flagged": "Il messaggio è stato segnalato con successo",
   "Message pinned": "Messaggio bloccato",
@@ -3939,6 +3964,7 @@ const itTranslations = {
   "View translation": "Visualizza traduzione",
   "Voice message": "Messaggio vocale",
   "Voice message {{ duration }}": "Messaggio vocale {{ duration }}",
+  "Voice message deleted": "Messaggio vocale eliminato",
   voiceMessageCount_one: voiceMessageCount_one$4,
   voiceMessageCount_many: voiceMessageCount_many$2,
   voiceMessageCount_other: voiceMessageCount_other$6,
@@ -4163,7 +4189,6 @@ const jaTranslations = {
   "End vote": "投票を終了",
   "Enforce unique vote is enabled": "一意の投票が有効になっています",
   "Error": "エラー",
-  "Error · Unsent": "エラー・未送信",
   "Error adding flag": "フラグを追加のエラーが発生しました",
   "Error connecting to chat, refresh the page to try again.": "チャットへの接続ができませんでした。ページを更新してください。",
   "Error deleting message": "メッセージを削除するエラーが発生しました",
@@ -4282,8 +4307,6 @@ const jaTranslations = {
   "Maximum number of votes (from 2 to 10)": "最大投票数（2から10まで）",
   Menu: Menu$5,
   "Message deleted": "メッセージが削除されました",
-  "Message Failed · Click to try again": "メッセージが失敗しました · クリックして再試行してください",
-  "Message Failed · Unauthorized": "メッセージが失敗しました · 許可されていません",
   "Message failed to send": "メッセージの送信に失敗しました",
   "Message has been successfully flagged": "メッセージに正常にフラグが付けられました",
   "Message pinned": "メッセージにピンが付けられました",
@@ -4450,6 +4473,7 @@ const jaTranslations = {
   "View translation": "翻訳を表示",
   "Voice message": "ボイスメッセージ",
   "Voice message {{ duration }}": "ボイスメッセージ {{ duration }}",
+  "Voice message deleted": "ボイスメッセージが削除されました",
   voiceMessageCount_other: voiceMessageCount_other$5,
   "Vote ended": "投票が終了しました",
   Votes: Votes$5,
@@ -4672,7 +4696,6 @@ const koTranslations = {
   "End vote": "투표 종료",
   "Enforce unique vote is enabled": "고유 투표가 활성화되었습니다",
   "Error": "오류",
-  "Error · Unsent": "오류 · 전송되지 않음",
   "Error adding flag": "플래그를 추가하는 동안 오류가 발생했습니다.",
   "Error connecting to chat, refresh the page to try again.": "채팅에 연결하는 동안 오류가 발생했습니다. 페이지를 새로고침하여 다시 시도하세요.",
   "Error deleting message": "메시지를 삭제하는 중에 오류가 발생했습니다.",
@@ -4791,8 +4814,6 @@ const koTranslations = {
   "Maximum number of votes (from 2 to 10)": "최대 투표 수 (2에서 10까지)",
   Menu: Menu$4,
   "Message deleted": "메시지가 삭제되었습니다.",
-  "Message Failed · Click to try again": "메시지 실패 · 다시 시도하려면 클릭하세요.",
-  "Message Failed · Unauthorized": "메시지 실패 · 승인되지 않음",
   "Message failed to send": "메시지 전송 실패",
   "Message has been successfully flagged": "메시지에 플래그가 지정되었습니다.",
   "Message pinned": "메시지 핀했습니다",
@@ -4959,6 +4980,7 @@ const koTranslations = {
   "View translation": "번역 보기",
   "Voice message": "음성 메시지",
   "Voice message {{ duration }}": "음성 메시지 {{ duration }}",
+  "Voice message deleted": "음성 메시지가 삭제됨",
   voiceMessageCount_other: voiceMessageCount_other$4,
   "Vote ended": "투표 종료",
   Votes: Votes$4,
@@ -5188,7 +5210,6 @@ const nlTranslations = {
   "End vote": "Einde stem",
   "Enforce unique vote is enabled": "Unieke stem is ingeschakeld",
   "Error": "Fout",
-  "Error · Unsent": "Fout · niet verzonden",
   "Error adding flag": "Fout bij toevoegen van vlag",
   "Error connecting to chat, refresh the page to try again.": "Fout bij het verbinden, ververs de pagina om nogmaals te proberen",
   "Error deleting message": "Fout bij verwijderen van bericht",
@@ -5310,8 +5331,6 @@ const nlTranslations = {
   "Maximum number of votes (from 2 to 10)": "Maximaal aantal stemmen (van 2 tot 10)",
   Menu: Menu$3,
   "Message deleted": "Bericht verwijderd",
-  "Message Failed · Click to try again": "Bericht mislukt, klik om het nogmaals te proberen",
-  "Message Failed · Unauthorized": "Bericht mislukt, ongeautoriseerd",
   "Message failed to send": "Bericht kon niet worden verzonden",
   "Message has been successfully flagged": "Bericht is succesvol gemarkeerd",
   "Message pinned": "Bericht vastgezet",
@@ -5483,6 +5502,7 @@ const nlTranslations = {
   "View translation": "Vertaling bekijken",
   "Voice message": "Spraakbericht",
   "Voice message {{ duration }}": "Spraakbericht {{ duration }}",
+  "Voice message deleted": "Spraakbericht verwijderd",
   voiceMessageCount_one: voiceMessageCount_one$3,
   voiceMessageCount_other: voiceMessageCount_other$3,
   "Vote ended": "Stemmen beëindigd",
@@ -5729,7 +5749,6 @@ const ptTranslations = {
   "End vote": "Encerrar votação",
   "Enforce unique vote is enabled": "Voto único está habilitado",
   "Error": "Erro",
-  "Error · Unsent": "Erro · Não enviado",
   "Error adding flag": "Erro ao reportar",
   "Error connecting to chat, refresh the page to try again.": "Erro ao conectar ao bate-papo, atualize a página para tentar novamente.",
   "Error deleting message": "Erro ao deletar mensagem",
@@ -5854,8 +5873,6 @@ const ptTranslations = {
   "Maximum number of votes (from 2 to 10)": "Número máximo de votos (de 2 a 10)",
   Menu: Menu$2,
   "Message deleted": "Mensagem apagada",
-  "Message Failed · Click to try again": "A mensagem falhou · Clique para tentar novamente",
-  "Message Failed · Unauthorized": "A mensagem falhou · não autorizado",
   "Message failed to send": "Falha ao enviar a mensagem",
   "Message has been successfully flagged": "A mensagem foi reportada com sucesso",
   "Message pinned": "Mensagem fixada",
@@ -6032,6 +6049,7 @@ const ptTranslations = {
   "View translation": "Ver tradução",
   "Voice message": "Mensagem de voz",
   "Voice message {{ duration }}": "Mensagem de voz {{ duration }}",
+  "Voice message deleted": "Mensagem de voz excluída",
   voiceMessageCount_one: voiceMessageCount_one$2,
   voiceMessageCount_many: voiceMessageCount_many$1,
   voiceMessageCount_other: voiceMessageCount_other$2,
@@ -6299,7 +6317,6 @@ const ruTranslations = {
   "End vote": "Закончить голосование",
   "Enforce unique vote is enabled": "Уникальное голосование включено",
   "Error": "Ошибка",
-  "Error · Unsent": "Ошибка · Не отправлено",
   "Error adding flag": "Ошибка добавления флага",
   "Error connecting to chat, refresh the page to try again.": "Ошибка подключения к чату, обновите страницу чтобы попробовать снова.",
   "Error deleting message": "Ошибка при удалении сообщения",
@@ -6430,8 +6447,6 @@ const ruTranslations = {
   "Maximum number of votes (from 2 to 10)": "Максимальное количество голосов (от 2 до 10)",
   Menu: Menu$1,
   "Message deleted": "Сообщение удалено",
-  "Message Failed · Click to try again": "Ошибка отправки сообщения · Нажмите чтобы повторить",
-  "Message Failed · Unauthorized": "Ошибка отправки сообщения · Неавторизованный",
   "Message failed to send": "Не удалось отправить сообщение",
   "Message has been successfully flagged": "Жалоба на сообщение была принята",
   "Message pinned": "Сообщение закреплено",
@@ -6615,6 +6630,7 @@ const ruTranslations = {
   "View translation": "Показать перевод",
   "Voice message": "Голосовое сообщение",
   "Voice message {{ duration }}": "Голосовое сообщение {{ duration }}",
+  "Voice message deleted": "Голосовое сообщение удалено",
   voiceMessageCount_one: voiceMessageCount_one$1,
   voiceMessageCount_few,
   voiceMessageCount_many,
@@ -6847,7 +6863,6 @@ const trTranslations = {
   "End vote": "Oyu bitir",
   "Enforce unique vote is enabled": "Benzersiz oy etkinleştirildi",
   "Error": "Hata",
-  "Error · Unsent": "Hata · Gönderilemedi",
   "Error adding flag": "Bayrak eklenirken hata oluştu",
   "Error connecting to chat, refresh the page to try again.": "Bağlantı hatası, sayfayı yenileyip tekrar deneyin.",
   "Error deleting message": "Mesaj silinirken hata oluştu",
@@ -6969,8 +6984,6 @@ const trTranslations = {
   "Maximum number of votes (from 2 to 10)": "Maksimum oy sayısı (2 ile 10 arası)",
   Menu,
   "Message deleted": "Mesaj silindi",
-  "Message Failed · Click to try again": "Mesaj Başarısız · Tekrar denemek için tıklayın",
-  "Message Failed · Unauthorized": "Mesaj Başarısız · Yetkisiz",
   "Message failed to send": "Mesaj gönderilemedi",
   "Message has been successfully flagged": "Mesaj başarıyla bayraklandı",
   "Message pinned": "Mesaj sabitlendi",
@@ -7140,6 +7153,7 @@ const trTranslations = {
   "View translation": "Çeviriyi görüntüle",
   "Voice message": "Sesli mesaj",
   "Voice message {{ duration }}": "Sesli mesaj {{ duration }}",
+  "Voice message deleted": "Sesli mesaj silindi",
   voiceMessageCount_one,
   voiceMessageCount_other,
   "Vote ended": "Oylama sona erdi",
@@ -8569,11 +8583,18 @@ function useActionHandler(message) {
 }
 const useDeleteHandler = (message, notifications = {}) => {
   const { getErrorNotification, notify } = notifications;
-  const { deleteMessage, updateMessage } = useChannelActionContext("useDeleteHandler");
+  const { deleteMessage, removeMessage, updateMessage } = useChannelActionContext("useDeleteHandler");
   const { client } = useChatContext("useDeleteHandler");
   const { t } = useTranslationContext("useDeleteHandler");
   return async (options) => {
-    if (!message?.id || !client || !updateMessage) {
+    if (!message) {
+      return;
+    }
+    if (message.type === "error" || isNetworkSendFailure(message)) {
+      removeMessage?.(message);
+      return;
+    }
+    if (!message.id || !client || !updateMessage) {
       return;
     }
     try {
@@ -8582,6 +8603,7 @@ const useDeleteHandler = (message, notifications = {}) => {
     } catch (e) {
       const errorMessage = getErrorNotification && validateAndGetMessage(getErrorNotification, [message]);
       if (notify) notify(errorMessage || t("Error deleting message"), "error");
+      throw e;
     }
   };
 };
@@ -8893,7 +8915,7 @@ const useUserRole = (message, onlySenderCanEdit, disableQuotedMessages) => {
   const canFlag = !isMyMessage && channelCapabilities["flag-message"];
   const canMute = !isMyMessage && channelCapabilities["mute-channel"];
   const canBlockUser = !isMyMessage;
-  const canMarkUnread = channelCapabilities["read-events"];
+  const canMarkUnread = !isMyMessage && channelCapabilities["read-events"];
   const canQuote = !disableQuotedMessages && channelCapabilities["quote-message"];
   const canReact = channelCapabilities["send-reaction"];
   const canReply = channelCapabilities["send-reply"];
@@ -8990,73 +9012,6 @@ const useMessageReminder = (messageId) => {
   const { reminder } = useStateStore(client.reminders.state, reminderSelector);
   return reminder;
 };
-const ActionsIcon = ({ className = "" }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className,
-    height: "4",
-    viewBox: "0 0 11 4",
-    width: "11",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z",
-        fillRule: "nonzero"
-      }
-    )
-  }
-);
-const ReactionIcon = ({ className = "" }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className,
-    height: "12",
-    viewBox: "0 0 12 12",
-    width: "12",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsxs("g", { clipRule: "evenodd", fillRule: "evenodd", children: [
-      /* @__PURE__ */ jsx("path", { d: "M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z" }),
-      /* @__PURE__ */ jsx("path", { d: "M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z" })
-    ] })
-  }
-);
-const ThreadIcon = ({ className = "" }) => /* @__PURE__ */ jsx("svg", { className, height: "10", width: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
-  "path",
-  {
-    d: "M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z",
-    fillRule: "evenodd"
-  }
-) });
-const PinIcon = () => /* @__PURE__ */ jsx("svg", { height: "13", viewBox: "0 0 14 13", width: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
-  "path",
-  {
-    d: "M13.3518 6.686L6.75251 0.0866699L5.80984 1.02867L6.75318 1.972V1.97334L3.45318 5.272L3.45251 5.27334L2.50984 4.32934L1.56718 5.27267L4.39584 8.10067L0.624512 11.8713L1.56718 12.814L5.33851 9.04334L8.16718 11.8713L9.10984 10.9293L8.16718 9.986L11.4672 6.686L12.4098 7.62867L13.3518 6.686ZM7.22451 9.04267L7.22385 9.04334L4.39584 6.21467L7.69518 2.91467L10.5232 5.74267L7.22451 9.04267Z",
-    fillRule: "evenodd"
-  }
-) });
-const MessageErrorIcon = () => /* @__PURE__ */ jsx("div", { className: "str-chat__message-error-icon", children: /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    "data-testid": "error",
-    fill: "none",
-    height: "24",
-    viewBox: "0 0 24 24",
-    width: "24",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z",
-          fill: "black",
-          id: "background"
-        }
-      ),
-      /* @__PURE__ */ jsx("path", { d: "M13 17H11V15H13V17ZM13 13H11V7H13V13Z", fill: "white" })
-    ]
-  }
-) });
 const Root = forwardRef(function AlertRoot({ children, className, ...props }, ref) {
   return /* @__PURE__ */ jsx("div", { ...props, className: clsx("str-chat__alert-root", className), ref, children });
 });
@@ -9137,6 +9092,7 @@ function useDialogAnchor({
     setPopperElement(null);
   }
   return {
+    placement: stabilisedChosenPlacement ?? chosenPlacement,
     setPopperElement,
     styles: {
       left: x ?? 0,
@@ -9149,6 +9105,8 @@ const DialogAnchor = ({
   allowFlip = true,
   children,
   className,
+  closeOnClickOutside,
+  closeTransitionMs = 0,
   dialogManagerId,
   focus = true,
   id,
@@ -9161,12 +9119,44 @@ const DialogAnchor = ({
   updatePositionOnContentResize,
   ...restDivProps
 }) => {
-  const dialog = useDialog({ dialogManagerId, id });
+  const dialog = useDialog({ closeOnClickOutside, dialogManagerId, id });
   const open = useDialogIsOpen(id, dialogManagerId);
-  const { setPopperElement, styles } = useDialogAnchor({
+  const [shouldRender, setShouldRender] = useState(open);
+  const closeTimeoutRef = useRef(null);
+  const isClosing = !open && shouldRender;
+  useEffect(() => {
+    if (open) {
+      setShouldRender(true);
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+      return;
+    }
+    if (!shouldRender) return;
+    if (!closeTransitionMs) {
+      setShouldRender(false);
+      return;
+    }
+    closeTimeoutRef.current = setTimeout(() => {
+      setShouldRender(false);
+      closeTimeoutRef.current = null;
+    }, closeTransitionMs);
+  }, [closeTransitionMs, open, shouldRender]);
+  useEffect(
+    () => () => {
+      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+    },
+    []
+  );
+  const {
+    placement: chosenPlacement,
+    setPopperElement,
+    styles
+  } = useDialogAnchor({
     allowFlip,
     offset,
-    open,
+    open: shouldRender,
     placement,
     referenceElement,
     updateKey,
@@ -9183,7 +9173,7 @@ const DialogAnchor = ({
       document.removeEventListener("keyup", hideOnEscape);
     };
   }, [dialog, open]);
-  if (!open) {
+  if (!shouldRender) {
     return null;
   }
   return /* @__PURE__ */ jsx(DialogPortalEntry, { dialogId: id, dialogManagerId, children: /* @__PURE__ */ jsx(FocusScope, { autoFocus: focus, contain: trapFocus, restoreFocus: true, children: /* @__PURE__ */ jsx(
@@ -9191,6 +9181,8 @@ const DialogAnchor = ({
     {
       ...restDivProps,
       className: clsx("str-chat__dialog-contents", className),
+      "data-str-chat-dialog-state": isClosing ? "closing" : "open",
+      "data-str-chat-placement": chosenPlacement,
       "data-testid": "str-chat__dialog-contents",
       ref: setPopperElement,
       style: styles,
@@ -9317,6 +9309,11 @@ const Badge = ({
     children
   }
 );
+const ErrorBadge = ({
+  className,
+  size = "sm",
+  ...rest
+}) => /* @__PURE__ */ jsx(Badge, { ...rest, className, size, variant: "error", children: /* @__PURE__ */ jsx(IconExclamation, {}) });
 function AvatarStack({
   badgeSize,
   component: Component2 = "div",
@@ -9528,16 +9525,152 @@ const EmojiContextMenuButton = ({
     ]
   }
 );
-const ContextMenuButton = ({
-  onBlur,
-  onFocus,
-  ...props
+const ContextMenuButtonWithSubmenu = ({
+  children,
+  className,
+  Submenu,
+  submenuContainerProps,
+  submenuPlacement = "right-start",
+  submenuRollAxis = "x",
+  ...buttonProps
 }) => {
+  const { className: submenuClassName, ...submenuContainerRestProps } = submenuContainerProps ?? {};
+  const buttonRef = useRef(null);
+  const [dialogContainer, setDialogContainer] = useState(null);
+  const keepSubmenuOpenFlag = useRef(false);
+  const dialogCloseTimeout = useRef(null);
+  const dialogId2 = useMemo(() => `submenu-${Math.random().toString(36).slice(2)}`, []);
+  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
+  const dialogIsOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
+  const {
+    placement: chosenPlacement,
+    setPopperElement,
+    styles
+  } = useDialogAnchor({
+    open: dialogIsOpen,
+    placement: submenuPlacement,
+    referenceElement: buttonRef.current
+  });
+  const closeDialogLazily = useCallback(() => {
+    if (dialogCloseTimeout.current) clearTimeout(dialogCloseTimeout.current);
+    dialogCloseTimeout.current = setTimeout(() => {
+      if (keepSubmenuOpenFlag.current) return;
+      dialog.close();
+    }, 100);
+  }, [dialog]);
+  const keepSubmenuOpen = useCallback(() => {
+    keepSubmenuOpenFlag.current = true;
+  }, []);
+  const allowToCloseSubmenu = useCallback(() => {
+    keepSubmenuOpenFlag.current = false;
+  }, []);
+  const closeSubmenu = useCallback(() => {
+    allowToCloseSubmenu();
+    closeDialogLazily();
+  }, [allowToCloseSubmenu, closeDialogLazily]);
+  const handleClose = useCallback(
+    (event) => {
+      const parentButton = buttonRef.current;
+      if (!dialogIsOpen || !parentButton) return;
+      event.stopPropagation();
+      closeDialogLazily();
+      parentButton.focus();
+    },
+    [closeDialogLazily, dialogIsOpen, buttonRef]
+  );
+  const handleFocusParentButton = () => {
+    if (dialogIsOpen) return;
+    dialog.open();
+    keepSubmenuOpen();
+  };
+  useEffect(() => {
+    const parentButton = buttonRef.current;
+    if (!dialogIsOpen || !parentButton) return;
+    const hideOnEscape = (event) => {
+      if (event.key !== "Escape") return;
+      handleClose(event);
+      closeSubmenu();
+    };
+    document.addEventListener("keyup", hideOnEscape, { capture: true });
+    return () => {
+      document.removeEventListener("keyup", hideOnEscape, { capture: true });
+    };
+  }, [dialogIsOpen, handleClose, closeSubmenu]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseContextMenuButton,
+      {
+        "aria-selected": "false",
+        className: clsx(className, "str_chat__button-with-submenu", {
+          "str_chat__button-with-submenu--submenu-open": dialogIsOpen
+        }),
+        hasSubMenu: true,
+        onBlur: closeSubmenu,
+        onClick: (event) => {
+          event.stopPropagation();
+          dialog.toggle();
+        },
+        onFocus: handleFocusParentButton,
+        onMouseEnter: handleFocusParentButton,
+        onMouseLeave: closeSubmenu,
+        role: "option",
+        ...buttonProps,
+        ref: buttonRef,
+        children
+      }
+    ),
+    dialogIsOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx("str-chat__context-menu__submenu-container", submenuClassName),
+        "data-str-chat-placement": chosenPlacement,
+        "data-str-chat-roll-axis": submenuRollAxis,
+        onBlur: (event) => {
+          const isBlurredDescendant = event.relatedTarget instanceof Node && dialogContainer?.contains(event.relatedTarget);
+          if (isBlurredDescendant) return;
+          closeSubmenu();
+        },
+        onFocus: keepSubmenuOpen,
+        onMouseEnter: keepSubmenuOpen,
+        onMouseLeave: closeSubmenu,
+        ref: (element) => {
+          setPopperElement(element);
+          setDialogContainer(element);
+        },
+        style: styles,
+        tabIndex: -1,
+        ...submenuContainerRestProps,
+        children: /* @__PURE__ */ jsx(Submenu, {})
+      }
+    )
+  ] });
+};
+const ContextMenuButton = (props) => {
+  const {
+    Submenu,
+    submenuContainerProps,
+    submenuPlacement,
+    submenuRollAxis,
+    ...buttonProps
+  } = props;
   const [isFocused, setIsFocused] = useState(false);
+  if (Submenu) {
+    return /* @__PURE__ */ jsx(
+      ContextMenuButtonWithSubmenu,
+      {
+        ...buttonProps,
+        Submenu,
+        submenuContainerProps,
+        submenuPlacement,
+        submenuRollAxis
+      }
+    );
+  }
+  const { onBlur, onFocus, ...baseButtonProps } = buttonProps;
   return /* @__PURE__ */ jsx(
     BaseContextMenuButton,
     {
-      ...props,
+      ...baseButtonProps,
       "aria-selected": isFocused ? "true" : "false",
       onBlur: (e) => {
         setIsFocused(false);
@@ -9586,12 +9719,14 @@ function ContextMenuContent({
   backLabel = "Back",
   children,
   className,
+  enableAnimations = true,
   Header: Header2,
   items,
   ItemsWrapper,
   menuClassName,
   onClose,
   onMenuLevelChange,
+  transitionDirection,
   ...props
 }) {
   const rootLevel = useMemo(
@@ -9604,6 +9739,7 @@ function ContextMenuContent({
     [Header2, items, ItemsWrapper, menuClassName]
   );
   const [menuStack, setMenuStack] = useState(() => [rootLevel]);
+  const [menuBodyAnimationKey, setMenuBodyAnimationKey] = useState(0);
   const activeMenu = menuStack[menuStack.length - 1];
   const ActiveMenuItemsWrapper = activeMenu.ItemsWrapper ?? React.Fragment;
   const closeMenu = useCallback(() => {
@@ -9627,10 +9763,9 @@ function ContextMenuContent({
     [ItemsWrapper]
   );
   const returnToParentMenu = useCallback(() => {
-    setMenuStack(
-      (current) => current.length > 1 ? current.slice(0, current.length - 1) : current
-    );
-  }, []);
+    if (menuStack.length <= 1) return;
+    setMenuStack((current) => current.slice(0, current.length - 1));
+  }, [menuStack.length]);
   useEffect(() => {
     setMenuStack((current) => {
       if (current.length === 1 && current[0] === rootLevel) return current;
@@ -9640,42 +9775,116 @@ function ContextMenuContent({
   useEffect(() => {
     onMenuLevelChange?.(menuStack.length);
   }, [menuStack.length, onMenuLevelChange]);
-  return /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: { closeMenu, openSubmenu, returnToParentMenu }, children: /* @__PURE__ */ jsxs(ContextMenuRoot, { className: clsx(className, activeMenu.menuClassName), ...props, children: [
-    activeMenu.Header ? /* @__PURE__ */ jsx(activeMenu.Header, {}) : menuStack.length > 1 ? /* @__PURE__ */ jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxs(ContextMenuBackButton, { onClick: returnToParentMenu, children: [
-      /* @__PURE__ */ jsx(IconChevronLeft, {}),
-      /* @__PURE__ */ jsx("span", { children: backLabel })
-    ] }) }) : null,
-    /* @__PURE__ */ jsx(ContextMenuBody, { children: activeMenu.Submenu ? /* @__PURE__ */ jsx(activeMenu.Submenu, {}) : /* @__PURE__ */ jsx(ActiveMenuItemsWrapper, { children: typeof children !== "undefined" ? children : activeMenu.items?.map((Item2, index) => /* @__PURE__ */ jsx(Item2, {}, `context-menu-item-${index}`)) }) })
-  ] }) });
+  useEffect(() => {
+    if (!transitionDirection) return;
+    setMenuBodyAnimationKey((value) => value + 1);
+  }, [transitionDirection, menuStack.length]);
+  return /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: { closeMenu, openSubmenu, returnToParentMenu }, children: /* @__PURE__ */ jsxs(
+    ContextMenuRoot,
+    {
+      className: clsx(className, activeMenu.menuClassName),
+      "data-str-chat-enable-animations": enableAnimations,
+      ...props,
+      children: [
+        activeMenu.Header ? /* @__PURE__ */ jsx(activeMenu.Header, {}) : menuStack.length > 1 ? /* @__PURE__ */ jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxs(ContextMenuBackButton, { onClick: returnToParentMenu, children: [
+          /* @__PURE__ */ jsx(IconChevronLeft, {}),
+          /* @__PURE__ */ jsx("span", { children: backLabel })
+        ] }) }) : null,
+        /* @__PURE__ */ jsx(
+          ContextMenuBody,
+          {
+            className: clsx({
+              "str-chat__context-menu__body--submenu-backward": transitionDirection === "backward",
+              "str-chat__context-menu__body--submenu-forward": transitionDirection === "forward"
+            }),
+            children: activeMenu.Submenu ? /* @__PURE__ */ jsx(activeMenu.Submenu, {}) : /* @__PURE__ */ jsx(ActiveMenuItemsWrapper, { children: typeof children !== "undefined" ? children : activeMenu.items?.map((Item2, index) => /* @__PURE__ */ jsx(Item2, {}, `context-menu-item-${index}`)) })
+          },
+          `context-menu-body-${menuStack.length}-${menuBodyAnimationKey}`
+        )
+      ]
+    }
+  ) });
 }
 const ContextMenu = (props) => {
+  const { ContextMenuContent: ContextMenuContentComponent = ContextMenuContent } = useComponentContext();
   const {
     allowFlip,
+    closeOnClickOutside,
+    closeTransitionMs = 130,
     dialogManagerId,
     focus,
     id,
     placement,
     referenceElement,
+    submenuTransitionDurationMs,
     tabIndex,
     trapFocus,
     ...menuProps
   } = props;
+  const resolvedSubmenuTransitionDurationMs = submenuTransitionDurationMs ?? 460;
   const isAnchored = id != null;
   const [menuLevel, setMenuLevel] = useState(1);
+  const [transitionDirection, setTransitionDirection] = useState(void 0);
+  const [contentResetToken, setContentResetToken] = useState(0);
+  const transitionTimeoutRef = useRef(null);
+  const previousMenuLevelRef = useRef(1);
   const open = useDialogIsOpen(id ?? "", dialogManagerId);
+  const previousOpenRef = useRef(open);
   useEffect(() => {
-    if (isAnchored && !open) setMenuLevel(1);
+    if (!isAnchored) return;
+    if (previousOpenRef.current && !open) {
+      setMenuLevel(1);
+      setTransitionDirection(void 0);
+      setContentResetToken((value) => value + 1);
+      previousMenuLevelRef.current = 1;
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current);
+        transitionTimeoutRef.current = null;
+      }
+    }
+    previousOpenRef.current = open;
   }, [isAnchored, open]);
-  const content = /* @__PURE__ */ jsx(
-    ContextMenuContent,
+  useEffect(
+    () => () => {
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current);
+      }
+    },
+    []
+  );
+  const handleMenuLevelChange = useCallback(
+    (level) => {
+      if (isAnchored) {
+        const previousLevel = previousMenuLevelRef.current;
+        if (level !== previousLevel) {
+          setTransitionDirection(level > previousLevel ? "forward" : "backward");
+          if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
+          transitionTimeoutRef.current = setTimeout(() => {
+            setTransitionDirection(void 0);
+            transitionTimeoutRef.current = null;
+          }, resolvedSubmenuTransitionDurationMs);
+        }
+        previousMenuLevelRef.current = level;
+        setMenuLevel(level);
+        return;
+      }
+      menuProps.onMenuLevelChange?.(level);
+    },
+    [isAnchored, menuProps, resolvedSubmenuTransitionDurationMs]
+  );
+  const content = /* @__PURE__ */ createElement(
+    ContextMenuContentComponent,
     {
       ...menuProps,
-      onMenuLevelChange: isAnchored ? setMenuLevel : menuProps.onMenuLevelChange
+      key: `context-menu-content-${contentResetToken}`,
+      onMenuLevelChange: handleMenuLevelChange,
+      transitionDirection
     }
   );
   if (isAnchored) {
     const {
       backLabel: _b,
+      enableAnimations: _ea,
       Header: _h,
       items: _i,
       ItemsWrapper: _w,
@@ -9688,6 +9897,8 @@ const ContextMenu = (props) => {
       DialogAnchor,
       {
         allowFlip,
+        closeOnClickOutside,
+        closeTransitionMs,
         dialogManagerId,
         focus,
         id,
@@ -9841,9 +10052,9 @@ const GlobalModal = ({
     (source, event) => {
       const allow = onCloseAttempt?.(source, event);
       if (allow !== false) {
-        onClose?.(event);
         dialog.close();
         closingRef.current = true;
+        onClose?.(event);
       }
     },
     [dialog, onClose, onCloseAttempt]
@@ -10019,16 +10230,19 @@ const useBaseMessageActionSetFilter = (messageActionSet, disable = false) => {
   const isMessageThreadReply = typeof message.parent_id === "string";
   const isBounced = isMessageBounced(message);
   const allowRetry = isMessageErrorRetryable(message);
+  const hasNetworkSendFailure = isNetworkSendFailure(message);
   return useMemo(() => {
     if (disable) return messageActionSet;
     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) {
-        return type === "resendMessage" && canSendMessage && (allowRetry || isBounced) || type === "edit" && canEdit && isBounced || type === "delete" && canDelete && isBounced;
+        return type === "resendMessage" && canSendMessage && (allowRetry || isBounced) || type === "edit" && (isBounced && canEdit || hasNetworkSendFailure) || type === "delete" && (isBounced && canDelete || hasNetworkSendFailure);
       }
       if (type === "resendMessage" || type === "blockUser" && !canBlockUser || type === "copyMessageText" && !message.text || type === "delete" && !canDelete || type === "edit" && !canEdit || type === "flag" && !canFlag || type === "markUnread" && !canMarkUnread || type === "mute" && !canMute || type === "quote" && !canQuote || type === "react" && !canReact || type === "reply" && !canReply || type === "remindMe" && !channelConfig?.["user_message_reminders"] || type === "saveForLater" && !channelConfig?.["user_message_reminders"])
         return false;
@@ -10055,6 +10269,7 @@ const useBaseMessageActionSetFilter = (messageActionSet, disable = false) => {
     message.text,
     message.type,
     disable,
+    hasNetworkSendFailure,
     messageActionSet
   ]);
 };
@@ -10370,14 +10585,14 @@ const matchMarkdownLinks = (message) => {
   const regexMdLinks = /\[([^[]+)\](\(.*\))/gm;
   const matches = message.match(regexMdLinks);
   const singleMatch = /\[([^[]+)\]\((.*)\)/;
-  const links = matches ? matches.map((match2) => {
-    const i = singleMatch.exec(match2);
+  const links = matches ? matches.map((match) => {
+    const i = singleMatch.exec(match);
     return i && [i[1], i[2]];
   }) : [];
   return links.flat();
 };
 const emojiMarkdownPlugin = () => {
-  const replace = (match2) => u("element", { properties: {}, tagName: "emoji" }, [u("text", match2)]);
+  const replace = (match) => u("element", { properties: {}, tagName: "emoji" }, [u("text", match)]);
   const transform2 = (node) => findAndReplace(node, [emojiRegex(), replace]);
   return transform2;
 };
@@ -10387,13 +10602,13 @@ const mentionsMarkdownPlugin = (mentioned_users) => () => {
     mentioned_usernames.map((username) => `@${username}`).join("|"),
     "g"
   );
-  const replace = (match2) => {
-    const usernameOrId = match2.replace("@", "");
+  const replace = (match) => {
+    const usernameOrId = match.replace("@", "");
     const user = mentioned_users.find(
       ({ id, name }) => name === usernameOrId || id === usernameOrId
     );
     return u("element", { mentionedUser: user, properties: {}, tagName: "mention" }, [
-      u("text", match2)
+      u("text", match)
     ]);
   };
   const transform2 = (tree) => {
@@ -10498,12 +10713,12 @@ const plusPlusToEmphasis = () => {
     if (node.type !== "text" || parent == null || typeof index !== "number") return;
     const value = node.value;
     INS_REGEX.lastIndex = 0;
-    let match2;
+    let match;
     let last = 0;
     const out = [];
-    while (match2 = INS_REGEX.exec(value)) {
-      const [full, inner] = match2;
-      const start = match2.index;
+    while (match = INS_REGEX.exec(value)) {
+      const [full, inner] = match;
+      const start = match.index;
       if (start > last) out.push({ type: "text", value: value.slice(last, start) });
       out.push({
         children: [{ type: "text", value: inner }],
@@ -10679,17 +10894,6 @@ const renderText = (text2, mentionedUsers, {
     }
   ) });
 };
-const ROOT_CLASS_NAME = "str-chat__message--error-message";
-function MessageErrorText({ message }) {
-  const { t } = useTranslationContext("MessageText");
-  if (message.type === "error" && !isMessageBounced(message)) {
-    return /* @__PURE__ */ jsx("div", { className: ROOT_CLASS_NAME, children: t("Error · Unsent") });
-  }
-  if (message.status === "failed") {
-    return /* @__PURE__ */ jsx("div", { className: ROOT_CLASS_NAME, children: message.error?.status !== 403 ? t("Message Failed · Click to try again") : t("Message Failed · Unauthorized") });
-  }
-  return null;
-}
 const UnMemoizedMessageTextComponent = (props) => {
   const {
     customInnerClass,
@@ -10717,7 +10921,7 @@ const UnMemoizedMessageTextComponent = (props) => {
   const wrapperClass = customWrapperClass || "str-chat__message-text";
   const innerClass = customInnerClass;
   if (!messageTextToRender) return null;
-  return /* @__PURE__ */ jsx("div", { className: wrapperClass, tabIndex: 0, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: wrapperClass, tabIndex: 0, children: /* @__PURE__ */ jsx(
     "div",
     {
       className: clsx(innerClass, {
@@ -10727,10 +10931,7 @@ const UnMemoizedMessageTextComponent = (props) => {
       "data-testid": "message-text-inner-wrapper",
       onClick: onMentionsClickMessage,
       onMouseOver: onMentionsHoverMessage,
-      children: [
-        /* @__PURE__ */ jsx(MessageErrorText, { message }),
-        unsafeHTML && message.html ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: message.html } }) : /* @__PURE__ */ jsx("div", { children: messageText })
-      ]
+      children: unsafeHTML && message.html ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: message.html } }) : /* @__PURE__ */ jsx("div", { children: messageText })
     }
   ) });
 };
@@ -11945,6 +12146,7 @@ const toBaseImageDescriptors = (attachment, options = {}) => {
       title: attachment.title
     };
   }
+  return void 0;
 };
 const BASE_FILE_ICON_CLASSNAME = "str-chat__file-icon";
 const FILE_ICON_GRAPHIC_CLASSNAME = "str-chat__file-icon__graphic";
@@ -14782,7 +14984,8 @@ const PollOptionWithVotes = ({
     "div",
     {
       className: clsx("str-chat__poll-option", {
-        "str-chat__poll-option--has-more-votes": isVotesPreview && voteCount > countVotesPreview
+        "str-chat__poll-option--has-more-votes": isVotesPreview && voteCount > countVotesPreview,
+        "str-chat__poll-option--has-votes": voteCount
       }),
       children: [
         /* @__PURE__ */ jsx(PollOptionWithVotesHeader, { option, optionOrderNumber: orderNumber }),
@@ -15076,10 +15279,12 @@ const PollOptionSelector = ({
         canCastVote && /* @__PURE__ */ jsx(Checkmark, { checked: !!ownVotesByOptionId[option.id] }),
         /* @__PURE__ */ jsxs("div", { className: "str-chat__poll-option-data", children: [
           /* @__PURE__ */ jsx("p", { className: "str-chat__poll-option-text", children: option.text }),
-          displayAvatarCount && voting_visibility === "public" && /* @__PURE__ */ jsx("div", { className: "str-chat__poll-option-voters", children: /* @__PURE__ */ jsx(AvatarStack$1, { displayInfo: avatarDisplayInfo, size: "xs" }) }),
-          /* @__PURE__ */ jsx("div", { className: "str-chat__poll-option-vote-count", children: voteCountVerbose ? t("{{count}} votes", {
-            count: vote_counts_by_option[option.id] ?? 0
-          }) : vote_counts_by_option[option.id] ?? 0 })
+          /* @__PURE__ */ jsxs("div", { className: "str-chat__poll-option-votes", children: [
+            displayAvatarCount && voting_visibility === "public" && /* @__PURE__ */ jsx("div", { className: "str-chat__poll-option-voters", children: /* @__PURE__ */ jsx(AvatarStack$1, { displayInfo: avatarDisplayInfo, size: "xs" }) }),
+            /* @__PURE__ */ jsx("div", { className: "str-chat__poll-option-vote-count", children: voteCountVerbose ? t("{{count}} votes", {
+              count: vote_counts_by_option[option.id] ?? 0
+            }) : vote_counts_by_option[option.id] ?? 0 })
+          ] })
         ] }),
         /* @__PURE__ */ jsx(
           AmountBar,
@@ -15594,31 +15799,34 @@ const CommandContextMenuItem = ({
     }
   );
 };
-const AttachmentSelectorMenuInitButtonIcon = () => {
+const AttachmentSelectorMenuInitButtonIcon = ({ className }) => {
   const { AttachmentSelectorInitiationButtonContents } = useComponentContext();
   if (AttachmentSelectorInitiationButtonContents) {
-    return /* @__PURE__ */ jsx(AttachmentSelectorInitiationButtonContents, {});
+    return /* @__PURE__ */ jsx("span", { className, children: /* @__PURE__ */ jsx(AttachmentSelectorInitiationButtonContents, {}) });
   }
-  return /* @__PURE__ */ jsx(IconPlusLarge, { className: "str-chat__attachment-selector__menu-button__icon" });
+  return /* @__PURE__ */ jsx(
+    IconPlusLarge,
+    {
+      className: clsx("str-chat__attachment-selector__menu-button__icon", className)
+    }
+  );
 };
-const AttachmentSelectorButton = forwardRef(
-  function AttachmentSelectorButton2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      Button,
-      {
-        appearance: "outline",
-        circular: true,
-        className: clsx("str-chat__attachment-selector__menu-button", className),
-        "data-testid": "invoke-attachment-selector-button",
-        size: "lg",
-        variant: "secondary",
-        ...props,
-        ref,
-        children: /* @__PURE__ */ jsx(AttachmentSelectorMenuInitButtonIcon, {})
-      }
-    );
-  }
-);
+const AttachmentSelectorButton = forwardRef(function AttachmentSelectorButton2({ className, iconClassName, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "outline",
+      circular: true,
+      className: clsx("str-chat__attachment-selector__menu-button", className),
+      "data-testid": "invoke-attachment-selector-button",
+      size: "lg",
+      variant: "secondary",
+      ...props,
+      ref,
+      children: /* @__PURE__ */ jsx(AttachmentSelectorMenuInitButtonIcon, { className: iconClassName })
+    }
+  );
+});
 const SimpleAttachmentSelector = () => {
   const { channelCapabilities } = useChannelStateContext();
   const inputRef = useRef(null);
@@ -15790,7 +15998,7 @@ const AttachmentSelector = ({
   getModalPortalDestination
 }) => {
   const { t } = useTranslationContext();
-  const { Modal = GlobalModal } = useComponentContext();
+  const { ContextMenu: ContextMenuComponent = ContextMenu, Modal = GlobalModal } = useComponentContext();
   const { channelCapabilities } = useChannelStateContext();
   const messageComposer = useMessageComposerController();
   const isCooldownActive = useIsCooldownActive();
@@ -15841,16 +16049,16 @@ const AttachmentSelector = ({
         "aria-expanded": menuDialogIsOpen,
         "aria-haspopup": "true",
         "aria-label": t("aria/Open Attachment Selector"),
-        className: clsx("str-chat__prepare-rotate45", {
+        disabled: isCooldownActive,
+        iconClassName: clsx("str-chat__prepare-rotate45", {
           "str-chat__rotate45": menuDialogIsOpen
         }),
-        disabled: isCooldownActive,
         onClick: () => menuDialog?.toggle(),
         ref: menuButtonRef
       }
     ),
     /* @__PURE__ */ jsx(
-      ContextMenu,
+      ContextMenuComponent,
       {
         allowFlip: true,
         backLabel: t("Back"),
@@ -15969,562 +16177,175 @@ const PlayIcon = () => /* @__PURE__ */ jsx(
   }
 );
 const CheckSignIcon = () => /* @__PURE__ */ jsx("svg", { fill: "currentColor", viewBox: "0 0 18 14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M5.79457 10.875L2.32457 7.40502C1.93457 7.01502 1.30457 7.01502 0.91457 7.40502C0.52457 7.79502 0.52457 8.42502 0.91457 8.81502L5.09457 12.995C5.48457 13.385 6.11457 13.385 6.50457 12.995L17.0846 2.41502C17.4746 2.02502 17.4746 1.39502 17.0846 1.00502C16.6946 0.615024 16.0646 0.615024 15.6746 1.00502L5.79457 10.875Z" }) });
-const toGalleryItemDescriptors = (...args) => toBaseImageDescriptors(...args);
-const GalleryContext = createContext(void 0);
-const useGalleryContext = () => {
-  const contextValue = useContext(GalleryContext);
-  if (!contextValue) {
-    console.warn(
-      `The useGalleryContext hook was called outside of the GalleryContext provider. Make sure this hook is called within a child of the Gallery component.`
-    );
-    return {};
+const INTERACTIVE_SELECTOR = 'button, a, input, textarea, select, [role="button"], [role="link"], [data-interactive="true"]';
+function hasInteractiveAncestorBeforeRoot(target, root) {
+  if (!(target instanceof Element) || !root) return false;
+  let el = target;
+  while (el && el !== root) {
+    if (el.matches(INTERACTIVE_SELECTOR)) return true;
+    el = el.parentElement;
   }
-  return contextValue;
-};
-const Gallery = ({
-  closeOnBackgroundClick = true,
-  GalleryUI: GalleryUI2,
-  initialIndex = 0,
-  items,
-  onIndexChange,
-  onRequestClose
+  return false;
+}
+const AttachmentPreviewRoot = ({
+  attachment,
+  onPressed,
+  openPreview,
+  tabIndex = 0,
+  ...props
 }) => {
-  const [currentIndex, setCurrentIndex] = useState(initialIndex);
-  const itemCount = items.length;
-  const goToIndex = useCallback(
-    (index) => {
-      if (index >= 0 && index < itemCount) {
-        setCurrentIndex(index);
-      }
-    },
-    [itemCount]
-  );
-  const goToNext = useCallback(() => {
-    setCurrentIndex((prev) => prev < itemCount - 1 ? prev + 1 : prev);
-  }, [itemCount]);
-  const goToPrevious = useCallback(() => {
-    setCurrentIndex((prev) => prev > 0 ? prev - 1 : prev);
-  }, []);
-  useEffect(() => {
-    onIndexChange?.(currentIndex);
-  }, [currentIndex, onIndexChange]);
-  const hasNext = currentIndex < itemCount - 1;
-  const hasPrevious = currentIndex > 0;
-  const currentItem = items[currentIndex];
-  const contextValue = useMemo(
-    () => ({
-      closeOnBackgroundClick,
-      currentIndex,
-      currentItem,
-      goToIndex,
-      goToNext,
-      goToPrevious,
-      hasNext,
-      hasPrevious,
-      itemCount,
-      items,
-      onRequestClose
-    }),
-    [
-      closeOnBackgroundClick,
-      currentIndex,
-      currentItem,
-      goToIndex,
-      goToNext,
-      goToPrevious,
-      hasNext,
-      hasPrevious,
-      itemCount,
-      items,
-      onRequestClose
-    ]
-  );
-  return /* @__PURE__ */ jsx(GalleryContext.Provider, { value: contextValue, children: GalleryUI2 ? /* @__PURE__ */ jsx(GalleryUI2, {}) : null });
-};
-const GalleryHeader = ({ currentItem }) => {
   const { t } = useTranslationContext();
-  const { MessageTimestamp: MessageTimestamp$1 = MessageTimestamp } = useComponentContext();
-  const { isMyMessage, message } = useMessageContext();
-  const modalContext = useContext(ModalContext);
-  const headerTitle = isMyMessage?.() && t("You") || message?.user?.name || message?.user?.id || currentItem.title || t("User uploaded content");
-  const downloadUrl = useMemo(() => {
-    const rawDownloadUrl = currentItem.videoUrl ?? currentItem.imageUrl;
-    if (!rawDownloadUrl) return void 0;
-    const sanitizedUrl = sanitizeUrl(rawDownloadUrl);
-    return sanitizedUrl === "about:blank" ? void 0 : sanitizedUrl;
-  }, [currentItem.imageUrl, currentItem.videoUrl]);
-  const downloadLabel = t("aria/Download attachment");
-  return /* @__PURE__ */ jsxs("div", { className: "str-chat__gallery__header", children: [
-    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "str-chat__gallery__header-spacer" }),
-    /* @__PURE__ */ jsxs("div", { className: "str-chat__gallery__header-meta", children: [
-      /* @__PURE__ */ jsx("div", { className: "str-chat__gallery__title", children: headerTitle }),
-      message?.created_at ? /* @__PURE__ */ jsx(MessageTimestamp$1, { customClass: "str-chat__gallery__timestamp" }) : null
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "str-chat__gallery__header-actions", children: [
-      downloadUrl ? /* @__PURE__ */ jsx(
-        "a",
-        {
-          "aria-label": downloadLabel,
-          className: "str-chat__gallery__action-button str-chat__gallery__action-button--download",
-          download: true,
-          href: downloadUrl,
-          rel: "noreferrer",
-          target: "_blank",
-          title: downloadLabel,
-          children: /* @__PURE__ */ jsx(IconArrowDownCircle, {})
-        }
-      ) : null,
-      modalContext?.close ? /* @__PURE__ */ jsx(
-        Button,
-        {
-          "aria-label": t("Close"),
-          className: "str-chat__gallery__action-button str-chat__gallery__action-button--close",
-          onClick: modalContext.close,
-          title: t("Close"),
-          children: /* @__PURE__ */ jsx(IconCrossMedium, {})
-        }
-      ) : null
-    ] })
-  ] });
-};
-const VideoPlayer = ({ isPlaying, thumbnailUrl, videoUrl }) => {
-  const { VideoPlayer: VideoPlayerContext } = useComponentContext();
-  return VideoPlayerContext ? /* @__PURE__ */ jsx(VideoPlayerContext, { thumbnailUrl, videoUrl }) : /* @__PURE__ */ jsx(
-    ReactPlayer,
+  const [root, setRoot] = useState(null);
+  const url = attachment.asset_url || attachment.image_url || attachment.localMetadata.previewUri;
+  const canDownloadAttachment = false;
+  const canPreviewAttachment = !!openPreview && (!!url && isImageAttachment(attachment) || isVideoAttachment(attachment));
+  const handlePressed = (e) => {
+    if (e.defaultPrevented) return;
+    if (hasInteractiveAncestorBeforeRoot(e.target, root)) return;
+    if (onPressed) {
+      const shouldContinue = onPressed(e);
+      if (!shouldContinue) return;
+    }
+    if (canPreviewAttachment) {
+      openPreview();
+      return;
+    }
+  };
+  const isInteractive = canPreviewAttachment || canDownloadAttachment;
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      className: "react-player",
-      config: { file: { attributes: { poster: thumbnailUrl } } },
-      controls: true,
-      height: "100%",
-      playing: isPlaying,
-      url: videoUrl,
-      width: "100%"
+      "aria-label": isInteractive ? t(canPreviewAttachment ? "aria/Show preview" : "aria/Download attachment") : void 0,
+      ...props,
+      onClick: handlePressed,
+      onKeyDown: isInteractive ? (e) => {
+        if (e.key !== "Enter" && e.key !== " ") return;
+        e.preventDefault();
+        handlePressed(e);
+      } : void 0,
+      ref: setRoot,
+      tabIndex: isInteractive ? tabIndex : -1,
+      children: props.children
     }
   );
 };
-const VideoThumbnail = ({
-  className,
-  onPlay,
-  ...imageProps
+const FileAttachmentPreview = ({
+  attachment,
+  handleRetry,
+  removeAttachments
 }) => {
-  const { t } = useTranslationContext();
-  return /* @__PURE__ */ jsxs("div", { className: "str-chat__message-attachment__video-thumbnail", children: [
-    /* @__PURE__ */ jsx(
-      BaseImage,
-      {
-        className: clsx("str-chat__message-attachment__video-thumbnail-image", className),
-        ...imageProps
-      }
-    ),
-    onPlay ? /* @__PURE__ */ jsx(
-      Button,
-      {
-        appearance: "solid",
-        "aria-label": t("Play video"),
-        circular: true,
-        className: clsx(
-          "str-chat__message-attachment__video-thumbnail__play-indicator"
-        ),
-        onClick: onPlay,
-        size: "lg",
-        variant: "secondary",
-        children: /* @__PURE__ */ jsx(IconPlaySolid, {})
-      }
-    ) : /* @__PURE__ */ jsx("div", { className: "str-chat__message-attachment__video-thumbnail__play-indicator", children: /* @__PURE__ */ jsx(IconPlaySolid, {}) })
-  ] });
-};
-const SWIPE_THRESHOLD = 50;
-const TRANSITION_DURATION = 300;
-const GalleryUI = () => {
-  const { t } = useTranslationContext();
-  const {
-    closeOnBackgroundClick,
-    currentIndex,
-    currentItem,
-    goToNext,
-    goToPrevious,
-    hasNext,
-    hasPrevious,
-    itemCount,
-    onRequestClose
-  } = useGalleryContext();
-  const modalContext = useContext(ModalContext);
-  const [showVideo, setShowVideo] = useState(false);
-  const isTransitioningRef = useRef(false);
-  const [slideOffset, setSlideOffset] = useState(0);
-  const [isDragging, setIsDragging] = useState(false);
-  const [slideDirection, setSlideDirection] = useState(
-    null
+  const { t } = useTranslationContext("FilePreview");
+  const { id, uploadPermissionCheck, uploadState } = attachment.localMetadata ?? {};
+  const hasSizeLimitError = uploadPermissionCheck?.reason === "size_limit";
+  const hasFatalError = uploadState === "blocked" || hasSizeLimitError;
+  const hasRetriableError = uploadState === "failed" && !!handleRetry;
+  const hasError = hasRetriableError || hasFatalError;
+  return /* @__PURE__ */ jsxs(
+    AttachmentPreviewRoot,
+    {
+      attachment,
+      className: "str-chat__attachment-preview-file",
+      "data-testid": "attachment-preview-file",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "str-chat__attachment-preview-file__icon", children: /* @__PURE__ */ jsx(FileIcon, { fileName: attachment.title, mimeType: attachment.mime_type }) }),
+        /* @__PURE__ */ jsxs("div", { className: "str-chat__attachment-preview-file__info", children: [
+          /* @__PURE__ */ jsx("div", { className: "str-chat__attachment-preview-file-name", title: attachment.title, children: attachment.title }),
+          /* @__PURE__ */ jsxs("div", { className: "str-chat__attachment-preview-file__data", children: [
+            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("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: [
+              /* @__PURE__ */ jsx(IconExclamationTriangle, {}),
+              /* @__PURE__ */ jsx("span", { children: t("Upload error") }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": t("aria/Retry upload"),
+                  className: "str-chat__attachment-preview-file__retry-upload-button",
+                  "data-testid": "file-preview-item-retry-button",
+                  onClick: () => {
+                    handleRetry(attachment);
+                  },
+                  type: "button",
+                  children: t("Retry upload")
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          RemoveAttachmentPreviewButton,
+          {
+            "data-testid": "file-preview-item-delete-button",
+            onClick: () => {
+              if (id) removeAttachments([id]);
+            },
+            uploadState
+          }
+        )
+      ]
+    }
   );
-  const ignoreNextClickRef = useRef(false);
-  const touchStartRef = useRef(null);
-  const isVerticalSwipeRef = useRef(false);
-  const containerRef = useRef(null);
-  useEffect(() => {
-    setShowVideo(false);
-  }, [currentIndex]);
-  const prevIndexRef = useRef(currentIndex);
-  useEffect(() => {
-    if (prevIndexRef.current === currentIndex) return;
-    const direction = currentIndex > prevIndexRef.current ? "forward" : "backward";
-    setSlideDirection(direction);
-    setSlideOffset(0);
-    setIsDragging(false);
-    isTransitioningRef.current = true;
-    const timer = setTimeout(() => {
-      setSlideDirection(null);
-      isTransitioningRef.current = false;
-    }, TRANSITION_DURATION);
-    prevIndexRef.current = currentIndex;
-    return () => clearTimeout(timer);
-  }, [currentIndex]);
-  const handleGoToNext = useCallback(() => {
-    if (isTransitioningRef.current) return;
-    goToNext();
-  }, [goToNext]);
-  const handleGoToPrevious = useCallback(() => {
-    if (isTransitioningRef.current) return;
-    goToPrevious();
-  }, [goToPrevious]);
-  const handleKeyDown = useCallback(
-    (event) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        handleGoToPrevious();
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        handleGoToNext();
-      }
-    },
-    [handleGoToNext, handleGoToPrevious]
-  );
-  useEffect(() => {
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [handleKeyDown]);
-  const handleTouchStart = useCallback((event) => {
-    if (isTransitioningRef.current) return;
-    const touch = event.touches[0];
-    ignoreNextClickRef.current = false;
-    touchStartRef.current = { x: touch.clientX, y: touch.clientY };
-    isVerticalSwipeRef.current = false;
-  }, []);
-  const handleTouchMove = useCallback(
-    (event) => {
-      if (!touchStartRef.current || isTransitioningRef.current) return;
-      const touch = event.touches[0];
-      const deltaX = touch.clientX - touchStartRef.current.x;
-      const deltaY = touch.clientY - touchStartRef.current.y;
-      if (!isDragging && !isVerticalSwipeRef.current) {
-        if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 10) {
-          ignoreNextClickRef.current = true;
-          isVerticalSwipeRef.current = true;
-          return;
-        }
-        if (Math.abs(deltaX) > 10) {
-          ignoreNextClickRef.current = true;
-          setIsDragging(true);
-        }
-      }
-      if (isVerticalSwipeRef.current) return;
-      if (!hasNext && deltaX < 0 || !hasPrevious && deltaX > 0) {
-        setSlideOffset(deltaX * 0.3);
-      } else {
-        setSlideOffset(deltaX);
-      }
-    },
-    [isDragging, hasNext, hasPrevious]
-  );
-  const handleTouchEnd = useCallback(() => {
-    if (!touchStartRef.current || isVerticalSwipeRef.current) {
-      if (isVerticalSwipeRef.current) ignoreNextClickRef.current = true;
-      touchStartRef.current = null;
-      return;
-    }
-    const offset = slideOffset;
-    if (isDragging || Math.abs(offset) > 10) {
-      ignoreNextClickRef.current = true;
-    }
-    touchStartRef.current = null;
-    if (Math.abs(offset) >= SWIPE_THRESHOLD) {
-      if (offset < 0 && hasNext) {
-        goToNext();
-      } else if (offset > 0 && hasPrevious) {
-        goToPrevious();
-      } else {
-        setSlideOffset(0);
-      }
-    } else {
-      setSlideOffset(0);
-    }
-    setIsDragging(false);
-  }, [slideOffset, hasNext, hasPrevious, goToNext, goToPrevious, isDragging]);
-  const requestClose = modalContext?.close ?? onRequestClose;
-  const handleBackgroundClick = useCallback(
-    (event) => {
-      if (event.target !== event.currentTarget) return;
-      if (ignoreNextClickRef.current) {
-        ignoreNextClickRef.current = false;
-        return;
-      }
-      if (!closeOnBackgroundClick) return;
-      requestClose?.();
-    },
-    [closeOnBackgroundClick, requestClose]
-  );
-  const mediaStyle = isDragging || slideOffset !== 0 && slideDirection === null ? { transform: `translateX(${slideOffset}px)` } : {};
-  return /* @__PURE__ */ jsxs("div", { className: "str-chat__gallery", children: [
-    /* @__PURE__ */ jsxs("div", { className: "str-chat__gallery__main", children: [
-      /* @__PURE__ */ jsx(GalleryHeader, { currentItem }),
-      /* @__PURE__ */ jsx(
-        NavButton,
-        {
-          "aria-label": t("Previous image"),
-          className: clsx(
-            "str-chat__gallery__nav-button--prev",
-            !hasPrevious && "str-chat__gallery__nav-button--hidden"
-          ),
-          disabled: !hasPrevious,
-          onClick: handleGoToPrevious,
-          children: /* @__PURE__ */ jsx(IconChevronLeft, {})
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "str-chat__gallery__slide-container",
-          onClick: handleBackgroundClick,
-          onTouchEnd: handleTouchEnd,
-          onTouchMove: handleTouchMove,
-          onTouchStart: handleTouchStart,
-          ref: containerRef,
-          children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: clsx({
-                "str-chat__gallery__media--dragging": isDragging,
-                "str-chat__gallery__media--slide-backward": !isDragging && slideDirection === "backward",
-                "str-chat__gallery__media--slide-forward": !isDragging && slideDirection === "forward"
-              }),
-              style: mediaStyle,
-              children: currentItem.videoUrl && currentItem.videoThumbnailUrl ? /* @__PURE__ */ jsx("div", { className: "str-chat__gallery__media str-chat__gallery__media--video", children: showVideo ? /* @__PURE__ */ jsx(VideoPlayer, { isPlaying: true, videoUrl: currentItem.videoUrl }) : /* @__PURE__ */ jsx(
-                VideoThumbnail,
-                {
-                  alt: currentItem.title ?? "",
-                  onPlay: () => setShowVideo(true),
-                  src: currentItem.videoThumbnailUrl
-                }
-              ) }) : /* @__PURE__ */ jsx("div", { className: "str-chat__gallery__media str-chat__gallery__media--image", children: /* @__PURE__ */ jsx(BaseImage, { alt: currentItem.alt, src: currentItem.imageUrl }) })
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        NavButton,
-        {
-          "aria-label": t("Next image"),
-          className: clsx(
-            "str-chat__gallery__nav-button--next",
-            !hasNext && "str-chat__gallery__nav-button--hidden"
-          ),
-          disabled: !hasNext,
-          onClick: handleGoToNext,
-          children: /* @__PURE__ */ jsx(IconChevronRight, {})
-        }
-      )
-    ] }),
-    itemCount > 1 && /* @__PURE__ */ jsxs("div", { className: "str-chat__gallery__position-indicator", children: [
-      currentIndex + 1,
-      " of ",
-      itemCount
-    ] })
-  ] });
 };
-const NavButton = ({ className, ...props }) => /* @__PURE__ */ jsx(Button, { ...props, className: clsx("str-chat__gallery__nav-button", className) });
-const INTERACTIVE_SELECTOR = 'button, a, input, textarea, select, [role="button"], [role="link"], [data-interactive="true"]';
-function hasInteractiveAncestorBeforeRoot(target, root) {
-  if (!(target instanceof Element) || !root) return false;
-  let el = target;
-  while (el && el !== root) {
-    if (el.matches(INTERACTIVE_SELECTOR)) return true;
-    el = el.parentElement;
+const UnsupportedAttachmentPreview = ({
+  attachment,
+  handleRetry,
+  removeAttachments
+}) => /* @__PURE__ */ jsx(
+  FileAttachmentPreview,
+  {
+    attachment,
+    handleRetry,
+    removeAttachments
   }
-  return false;
+);
+function formatTime(totalSeconds, rounding = "ceil") {
+  if (totalSeconds == null || Number.isNaN(totalSeconds) || totalSeconds < 0) {
+    return null;
+  }
+  const roundedSeconds = rounding === "floor" ? Math.floor(totalSeconds) : Math.ceil(totalSeconds);
+  const hours = Math.floor(roundedSeconds / 3600);
+  const minutes = Math.floor(roundedSeconds % 3600 / 60);
+  const seconds = roundedSeconds % 60;
+  const minSec = `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(
+    2,
+    "0"
+  )}`;
+  return hours ? `${String(hours).padStart(2, "0")}:${minSec}` : minSec;
 }
-const AttachmentPreviewRoot = ({
-  attachment,
-  onPressed,
-  tabIndex = 0,
-  ...props
-}) => {
-  const { t } = useTranslationContext("FilePreview");
-  const { Modal = GlobalModal } = useComponentContext();
-  const [showPreview, setShowPreview] = useState(false);
-  const [root, setRoot] = useState(null);
-  const url = attachment.asset_url || attachment.image_url || attachment.localMetadata.previewUri;
-  const canDownloadAttachment = false;
-  const canPreviewAttachment = !!url && isImageAttachment(attachment) || isVideoAttachment(attachment);
-  const handlePressed = (e) => {
-    if (e.defaultPrevented) return;
-    if (hasInteractiveAncestorBeforeRoot(e.target, root)) return;
-    if (onPressed) {
-      const shouldContinue = onPressed(e);
-      if (!shouldContinue) return;
-    }
-    if (canPreviewAttachment) {
-      setShowPreview(true);
-      return;
-    }
-  };
+function DurationDisplay({
+  className,
+  duration: duration2,
+  isPlaying,
+  secondsElapsed,
+  showRemaining = false
+}) {
+  const remainingSeconds = duration2 != null && secondsElapsed != null ? Math.max(0, duration2 - secondsElapsed) : void 0;
+  const formattedDuration = formatTime(duration2);
+  const formattedSecondsElapsed = formatTime(secondsElapsed);
+  const formattedRemaining = formatTime(remainingSeconds);
+  const shouldShowElapsed = !!secondsElapsed && secondsElapsed > 0 && secondsElapsed < (duration2 || 0);
+  const canShowRemaining = showRemaining && duration2 != null && secondsElapsed != null;
+  const primaryValue = showRemaining ? formattedRemaining : formattedSecondsElapsed;
+  const showPrimary = (canShowRemaining || shouldShowElapsed) && !!primaryValue;
+  const showDuration = !showPrimary && !!formattedDuration;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "aria-label": t(showPreview ? "aria/Show preview" : "aria/Download attachment"),
-      ...props,
-      onClick: handlePressed,
-      onKeyDown: (e) => {
-        if (e.key !== "Enter" && e.key !== " ") return;
-        e.preventDefault();
-        handlePressed(e);
-      },
-      ref: setRoot,
-      role: showPreview ? "button" : props.role,
-      tabIndex: showPreview || canDownloadAttachment ? tabIndex : -1,
+      className: clsx(
+        "str-chat__duration-display",
+        {
+          "str-chat__duration-display--hasProgress": !!secondsElapsed,
+          "str-chat__duration-display--isPlaying": isPlaying
+        },
+        className
+      ),
       children: [
-        props.children,
-        /* @__PURE__ */ jsx(
-          Modal,
-          {
-            className: "str-chat__gallery-modal",
-            onClose: (e) => {
-              e.stopPropagation();
-              setShowPreview(false);
-            },
-            open: showPreview && canPreviewAttachment,
-            children: isImageAttachment(attachment) || isVideoAttachment(attachment) ? /* @__PURE__ */ jsx(Gallery, { items: [attachment] }) : null
-          }
-        )
-      ]
-    }
-  );
-};
-const FileAttachmentPreview = ({
-  attachment,
-  handleRetry,
-  removeAttachments
-}) => {
-  const { t } = useTranslationContext("FilePreview");
-  const { id, uploadPermissionCheck, uploadState } = attachment.localMetadata ?? {};
-  const hasSizeLimitError = uploadPermissionCheck?.reason === "size_limit";
-  const hasFatalError = uploadState === "blocked" || hasSizeLimitError;
-  const hasRetriableError = uploadState === "failed" && !!handleRetry;
-  const hasError = hasRetriableError || hasFatalError;
-  return /* @__PURE__ */ jsxs(
-    AttachmentPreviewRoot,
-    {
-      attachment,
-      className: "str-chat__attachment-preview-file",
-      "data-testid": "attachment-preview-file",
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "str-chat__attachment-preview-file__icon", children: /* @__PURE__ */ jsx(FileIcon, { fileName: attachment.title, mimeType: attachment.mime_type }) }),
-        /* @__PURE__ */ jsxs("div", { className: "str-chat__attachment-preview-file__info", children: [
-          /* @__PURE__ */ jsx("div", { className: "str-chat__attachment-preview-file-name", title: attachment.title, children: attachment.title }),
-          /* @__PURE__ */ jsxs("div", { className: "str-chat__attachment-preview-file__data", children: [
-            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("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: [
-              /* @__PURE__ */ jsx(IconExclamationTriangle, {}),
-              /* @__PURE__ */ jsx("span", { children: t("Upload error") }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "aria-label": t("aria/Retry upload"),
-                  className: "str-chat__attachment-preview-file__retry-upload-button",
-                  "data-testid": "file-preview-item-retry-button",
-                  onClick: () => {
-                    handleRetry(attachment);
-                  },
-                  type: "button",
-                  children: t("Retry upload")
-                }
-              )
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          RemoveAttachmentPreviewButton,
-          {
-            "data-testid": "file-preview-item-delete-button",
-            onClick: () => {
-              if (id) removeAttachments([id]);
-            },
-            uploadState
-          }
-        )
-      ]
-    }
-  );
-};
-const UnsupportedAttachmentPreview = ({
-  attachment,
-  handleRetry,
-  removeAttachments
-}) => /* @__PURE__ */ jsx(
-  FileAttachmentPreview,
-  {
-    attachment,
-    handleRetry,
-    removeAttachments
-  }
-);
-function formatTime(totalSeconds, rounding = "ceil") {
-  if (totalSeconds == null || Number.isNaN(totalSeconds) || totalSeconds < 0) {
-    return null;
-  }
-  const roundedSeconds = rounding === "floor" ? Math.floor(totalSeconds) : Math.ceil(totalSeconds);
-  const hours = Math.floor(roundedSeconds / 3600);
-  const minutes = Math.floor(roundedSeconds % 3600 / 60);
-  const seconds = roundedSeconds % 60;
-  const minSec = `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(
-    2,
-    "0"
-  )}`;
-  return hours ? `${String(hours).padStart(2, "0")}:${minSec}` : minSec;
-}
-function DurationDisplay({
-  className,
-  duration: duration2,
-  isPlaying,
-  secondsElapsed,
-  showRemaining = false
-}) {
-  const remainingSeconds = duration2 != null && secondsElapsed != null ? Math.max(0, duration2 - secondsElapsed) : void 0;
-  const formattedDuration = formatTime(duration2);
-  const formattedSecondsElapsed = formatTime(secondsElapsed);
-  const formattedRemaining = formatTime(remainingSeconds);
-  const shouldShowElapsed = !!secondsElapsed && secondsElapsed > 0 && secondsElapsed < (duration2 || 0);
-  const canShowRemaining = showRemaining && duration2 != null && secondsElapsed != null;
-  const primaryValue = showRemaining ? formattedRemaining : formattedSecondsElapsed;
-  const showPrimary = (canShowRemaining || shouldShowElapsed) && !!primaryValue;
-  const showDuration = !showPrimary && !!formattedDuration;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(
-        "str-chat__duration-display",
-        {
-          "str-chat__duration-display--hasProgress": !!secondsElapsed,
-          "str-chat__duration-display--isPlaying": isPlaying
-        },
-        className
-      ),
-      children: [
-        showPrimary && /* @__PURE__ */ jsx("span", { className: "str-chat__duration-display__time-elapsed", children: primaryValue }),
-        showDuration && /* @__PURE__ */ jsx("span", { className: "str-chat__duration-display__duration", children: formattedDuration })
+        showPrimary && /* @__PURE__ */ jsx("span", { className: "str-chat__duration-display__time-elapsed", children: primaryValue }),
+        showDuration && /* @__PURE__ */ jsx("span", { className: "str-chat__duration-display__duration", children: formattedDuration })
       ]
     }
   );
@@ -17031,6 +16852,7 @@ const AudioAttachmentPreview = ({
 const MediaAttachmentPreview = ({
   attachment,
   handleRetry,
+  openPreview,
   removeAttachments
 }) => {
   const { t } = useTranslationContext();
@@ -17071,6 +16893,7 @@ const MediaAttachmentPreview = ({
       }),
       "data-testid": "attachment-preview-media",
       onPressed: hasRetriableError ? retry : void 0,
+      openPreview: !isUploading && !hasUploadError ? openPreview : void 0,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "str-chat__attachment-preview-media__thumbnail-wrapper", children: [
           thumbnail.url && /* @__PURE__ */ jsx(
@@ -17120,6 +16943,380 @@ const MediaAttachmentPreview = ({
     }
   );
 };
+const toGalleryItemDescriptors = (...args) => toBaseImageDescriptors(...args);
+const GalleryContext = createContext(void 0);
+const useGalleryContext = () => {
+  const contextValue = useContext(GalleryContext);
+  if (!contextValue) {
+    console.warn(
+      `The useGalleryContext hook was called outside of the GalleryContext provider. Make sure this hook is called within a child of the Gallery component.`
+    );
+    return {};
+  }
+  return contextValue;
+};
+const GalleryHeader = ({ currentItem }) => {
+  const { t } = useTranslationContext();
+  const { MessageTimestamp: MessageTimestamp$1 = MessageTimestamp } = useComponentContext();
+  const { isMyMessage, message } = useMessageContext();
+  const modalContext = useContext(ModalContext);
+  const headerTitle = isMyMessage?.() && t("You") || message?.user?.name || message?.user?.id || currentItem.title || t("User uploaded content");
+  const downloadUrl = useMemo(() => {
+    const rawDownloadUrl = currentItem.videoUrl ?? currentItem.imageUrl;
+    if (!rawDownloadUrl) return void 0;
+    const sanitizedUrl = sanitizeUrl(rawDownloadUrl);
+    return sanitizedUrl === "about:blank" ? void 0 : sanitizedUrl;
+  }, [currentItem.imageUrl, currentItem.videoUrl]);
+  const downloadLabel = t("aria/Download attachment");
+  return /* @__PURE__ */ jsxs("div", { className: "str-chat__gallery__header", children: [
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "str-chat__gallery__header-spacer" }),
+    /* @__PURE__ */ jsxs("div", { className: "str-chat__gallery__header-meta", children: [
+      /* @__PURE__ */ jsx("div", { className: "str-chat__gallery__title", children: headerTitle }),
+      message?.created_at ? /* @__PURE__ */ jsx(MessageTimestamp$1, { customClass: "str-chat__gallery__timestamp" }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "str-chat__gallery__header-actions", children: [
+      downloadUrl ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          "aria-label": downloadLabel,
+          className: "str-chat__gallery__action-button str-chat__gallery__action-button--download",
+          download: true,
+          href: downloadUrl,
+          rel: "noreferrer",
+          target: "_blank",
+          title: downloadLabel,
+          children: /* @__PURE__ */ jsx(IconArrowDownCircle, {})
+        }
+      ) : null,
+      modalContext?.close ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": t("Close"),
+          className: "str-chat__gallery__action-button str-chat__gallery__action-button--close",
+          onClick: modalContext.close,
+          title: t("Close"),
+          children: /* @__PURE__ */ jsx(IconCrossMedium, {})
+        }
+      ) : null
+    ] })
+  ] });
+};
+const VideoPlayer = ({ isPlaying, thumbnailUrl, videoUrl }) => {
+  const { VideoPlayer: VideoPlayerContext } = useComponentContext();
+  return VideoPlayerContext ? /* @__PURE__ */ jsx(VideoPlayerContext, { thumbnailUrl, videoUrl }) : /* @__PURE__ */ jsx(
+    ReactPlayer,
+    {
+      className: "react-player",
+      config: { file: { attributes: { poster: thumbnailUrl } } },
+      controls: true,
+      height: "100%",
+      playing: isPlaying,
+      url: videoUrl,
+      width: "100%"
+    }
+  );
+};
+const VideoThumbnail = ({
+  className,
+  onPlay,
+  ...imageProps
+}) => {
+  const { t } = useTranslationContext();
+  return /* @__PURE__ */ jsxs("div", { className: "str-chat__message-attachment__video-thumbnail", children: [
+    /* @__PURE__ */ jsx(
+      BaseImage,
+      {
+        className: clsx("str-chat__message-attachment__video-thumbnail-image", className),
+        ...imageProps
+      }
+    ),
+    onPlay ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        appearance: "solid",
+        "aria-label": t("Play video"),
+        circular: true,
+        className: clsx(
+          "str-chat__message-attachment__video-thumbnail__play-indicator"
+        ),
+        onClick: onPlay,
+        size: "lg",
+        variant: "secondary",
+        children: /* @__PURE__ */ jsx(IconPlaySolid, {})
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "str-chat__message-attachment__video-thumbnail__play-indicator", children: /* @__PURE__ */ jsx(IconPlaySolid, {}) })
+  ] });
+};
+const SWIPE_THRESHOLD = 50;
+const TRANSITION_DURATION = 300;
+const GalleryUI = () => {
+  const { t } = useTranslationContext();
+  const {
+    closeOnBackgroundClick,
+    currentIndex,
+    currentItem,
+    goToNext,
+    goToPrevious,
+    hasNext,
+    hasPrevious,
+    itemCount,
+    onRequestClose
+  } = useGalleryContext();
+  const modalContext = useContext(ModalContext);
+  const [showVideo, setShowVideo] = useState(false);
+  const isTransitioningRef = useRef(false);
+  const [slideOffset, setSlideOffset] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const [slideDirection, setSlideDirection] = useState(
+    null
+  );
+  const ignoreNextClickRef = useRef(false);
+  const touchStartRef = useRef(null);
+  const isVerticalSwipeRef = useRef(false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    setShowVideo(false);
+  }, [currentIndex]);
+  const prevIndexRef = useRef(currentIndex);
+  useEffect(() => {
+    if (prevIndexRef.current === currentIndex) return;
+    const direction = currentIndex > prevIndexRef.current ? "forward" : "backward";
+    setSlideDirection(direction);
+    setSlideOffset(0);
+    setIsDragging(false);
+    isTransitioningRef.current = true;
+    const timer = setTimeout(() => {
+      setSlideDirection(null);
+      isTransitioningRef.current = false;
+    }, TRANSITION_DURATION);
+    prevIndexRef.current = currentIndex;
+    return () => clearTimeout(timer);
+  }, [currentIndex]);
+  const handleGoToNext = useCallback(() => {
+    if (isTransitioningRef.current) return;
+    goToNext();
+  }, [goToNext]);
+  const handleGoToPrevious = useCallback(() => {
+    if (isTransitioningRef.current) return;
+    goToPrevious();
+  }, [goToPrevious]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        handleGoToPrevious();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        handleGoToNext();
+      }
+    },
+    [handleGoToNext, handleGoToPrevious]
+  );
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  const handleTouchStart = useCallback((event) => {
+    if (isTransitioningRef.current) return;
+    const touch = event.touches[0];
+    ignoreNextClickRef.current = false;
+    touchStartRef.current = { x: touch.clientX, y: touch.clientY };
+    isVerticalSwipeRef.current = false;
+  }, []);
+  const handleTouchMove = useCallback(
+    (event) => {
+      if (!touchStartRef.current || isTransitioningRef.current) return;
+      const touch = event.touches[0];
+      const deltaX = touch.clientX - touchStartRef.current.x;
+      const deltaY = touch.clientY - touchStartRef.current.y;
+      if (!isDragging && !isVerticalSwipeRef.current) {
+        if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 10) {
+          ignoreNextClickRef.current = true;
+          isVerticalSwipeRef.current = true;
+          return;
+        }
+        if (Math.abs(deltaX) > 10) {
+          ignoreNextClickRef.current = true;
+          setIsDragging(true);
+        }
+      }
+      if (isVerticalSwipeRef.current) return;
+      if (!hasNext && deltaX < 0 || !hasPrevious && deltaX > 0) {
+        setSlideOffset(deltaX * 0.3);
+      } else {
+        setSlideOffset(deltaX);
+      }
+    },
+    [isDragging, hasNext, hasPrevious]
+  );
+  const handleTouchEnd = useCallback(() => {
+    if (!touchStartRef.current || isVerticalSwipeRef.current) {
+      if (isVerticalSwipeRef.current) ignoreNextClickRef.current = true;
+      touchStartRef.current = null;
+      return;
+    }
+    const offset = slideOffset;
+    if (isDragging || Math.abs(offset) > 10) {
+      ignoreNextClickRef.current = true;
+    }
+    touchStartRef.current = null;
+    if (Math.abs(offset) >= SWIPE_THRESHOLD) {
+      if (offset < 0 && hasNext) {
+        goToNext();
+      } else if (offset > 0 && hasPrevious) {
+        goToPrevious();
+      } else {
+        setSlideOffset(0);
+      }
+    } else {
+      setSlideOffset(0);
+    }
+    setIsDragging(false);
+  }, [slideOffset, hasNext, hasPrevious, goToNext, goToPrevious, isDragging]);
+  const requestClose = modalContext?.close ?? onRequestClose;
+  const handleBackgroundClick = useCallback(
+    (event) => {
+      if (event.target !== event.currentTarget) return;
+      if (ignoreNextClickRef.current) {
+        ignoreNextClickRef.current = false;
+        return;
+      }
+      if (!closeOnBackgroundClick) return;
+      requestClose?.();
+    },
+    [closeOnBackgroundClick, requestClose]
+  );
+  const mediaStyle = isDragging || slideOffset !== 0 && slideDirection === null ? { transform: `translateX(${slideOffset}px)` } : {};
+  return /* @__PURE__ */ jsxs("div", { className: "str-chat__gallery", children: [
+    /* @__PURE__ */ jsxs("div", { className: "str-chat__gallery__main", children: [
+      /* @__PURE__ */ jsx(GalleryHeader, { currentItem }),
+      /* @__PURE__ */ jsx(
+        NavButton,
+        {
+          "aria-label": t("Previous image"),
+          className: clsx(
+            "str-chat__gallery__nav-button--prev",
+            !hasPrevious && "str-chat__gallery__nav-button--hidden"
+          ),
+          disabled: !hasPrevious,
+          onClick: handleGoToPrevious,
+          children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "str-chat__gallery__slide-container",
+          onClick: handleBackgroundClick,
+          onTouchEnd: handleTouchEnd,
+          onTouchMove: handleTouchMove,
+          onTouchStart: handleTouchStart,
+          ref: containerRef,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx({
+                "str-chat__gallery__media--dragging": isDragging,
+                "str-chat__gallery__media--slide-backward": !isDragging && slideDirection === "backward",
+                "str-chat__gallery__media--slide-forward": !isDragging && slideDirection === "forward"
+              }),
+              style: mediaStyle,
+              children: currentItem.videoUrl && currentItem.videoThumbnailUrl ? /* @__PURE__ */ jsx("div", { className: "str-chat__gallery__media str-chat__gallery__media--video", children: showVideo ? /* @__PURE__ */ jsx(VideoPlayer, { isPlaying: true, videoUrl: currentItem.videoUrl }) : /* @__PURE__ */ jsx(
+                VideoThumbnail,
+                {
+                  alt: currentItem.title ?? "",
+                  onPlay: () => setShowVideo(true),
+                  src: currentItem.videoThumbnailUrl
+                }
+              ) }) : /* @__PURE__ */ jsx("div", { className: "str-chat__gallery__media str-chat__gallery__media--image", children: /* @__PURE__ */ jsx(BaseImage, { alt: currentItem.alt, src: currentItem.imageUrl }) })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NavButton,
+        {
+          "aria-label": t("Next image"),
+          className: clsx(
+            "str-chat__gallery__nav-button--next",
+            !hasNext && "str-chat__gallery__nav-button--hidden"
+          ),
+          disabled: !hasNext,
+          onClick: handleGoToNext,
+          children: /* @__PURE__ */ jsx(IconChevronRight, {})
+        }
+      )
+    ] }),
+    itemCount > 1 && /* @__PURE__ */ jsxs("div", { className: "str-chat__gallery__position-indicator", children: [
+      currentIndex + 1,
+      " of ",
+      itemCount
+    ] })
+  ] });
+};
+const NavButton = ({ className, ...props }) => /* @__PURE__ */ jsx(Button, { ...props, className: clsx("str-chat__gallery__nav-button", className) });
+const Gallery = ({
+  closeOnBackgroundClick = true,
+  GalleryUI: GalleryUI$1,
+  initialIndex = 0,
+  items,
+  onIndexChange,
+  onRequestClose
+}) => {
+  const { GalleryUI: ContextGalleryUI } = useComponentContext();
+  const ResolvedGalleryUI = GalleryUI$1 ?? ContextGalleryUI ?? GalleryUI;
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const itemCount = items.length;
+  const goToIndex = useCallback(
+    (index) => {
+      if (index >= 0 && index < itemCount) {
+        setCurrentIndex(index);
+      }
+    },
+    [itemCount]
+  );
+  const goToNext = useCallback(() => {
+    setCurrentIndex((prev) => prev < itemCount - 1 ? prev + 1 : prev);
+  }, [itemCount]);
+  const goToPrevious = useCallback(() => {
+    setCurrentIndex((prev) => prev > 0 ? prev - 1 : prev);
+  }, []);
+  useEffect(() => {
+    onIndexChange?.(currentIndex);
+  }, [currentIndex, onIndexChange]);
+  const hasNext = currentIndex < itemCount - 1;
+  const hasPrevious = currentIndex > 0;
+  const currentItem = items[currentIndex];
+  const contextValue = useMemo(
+    () => ({
+      closeOnBackgroundClick,
+      currentIndex,
+      currentItem,
+      goToIndex,
+      goToNext,
+      goToPrevious,
+      hasNext,
+      hasPrevious,
+      itemCount,
+      items,
+      onRequestClose
+    }),
+    [
+      closeOnBackgroundClick,
+      currentIndex,
+      currentItem,
+      goToIndex,
+      goToNext,
+      goToPrevious,
+      hasNext,
+      hasPrevious,
+      itemCount,
+      items,
+      onRequestClose
+    ]
+  );
+  return /* @__PURE__ */ jsx(GalleryContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(ResolvedGalleryUI, {}) });
+};
 const AttachmentPreviewList = ({
   AudioAttachmentPreview: AudioAttachmentPreview2 = FileAttachmentPreview,
   FileAttachmentPreview: FileAttachmentPreview$1 = FileAttachmentPreview,
@@ -17128,73 +17325,107 @@ const AttachmentPreviewList = ({
   VideoAttachmentPreview = MediaAttachmentPreview
 }) => {
   const messageComposer = useMessageComposerController();
+  const { Modal = GlobalModal } = useComponentContext();
+  const [showPreview, setShowPreview] = useState(false);
+  const initialIndexRef = useRef(0);
   const { attachments } = useAttachmentsForPreview();
   const filteredAttachments = useMemo(
     () => attachments.filter((a) => !isVoiceRecordingAttachment(a)),
     [attachments]
   );
+  const { galleryItems, previewIndexById } = useMemo(() => {
+    const items = [];
+    const indexById = {};
+    for (const a of attachments) {
+      if (isLocalImageAttachment(a) || isLocalVideoAttachment(a)) {
+        const descriptor = toBaseImageDescriptors(a);
+        if (descriptor) {
+          indexById[a.localMetadata.id] = items.length;
+          items.push(descriptor);
+        }
+      }
+    }
+    return { galleryItems: items, previewIndexById: indexById };
+  }, [attachments]);
+  const openPreviewAtIndex = useCallback((index) => {
+    initialIndexRef.current = index;
+    setShowPreview(true);
+  }, []);
   if (!filteredAttachments.length) return null;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "str-chat__attachment-preview-list",
       "data-testid": "attachment-preview-list",
-      children: attachments.map((attachment) => {
-        if (isScrapedContent(attachment)) return null;
-        if (isLocalVoiceRecordingAttachment(attachment)) return null;
-        if (isLocalAudioAttachment(attachment)) {
-          return /* @__PURE__ */ jsx(
-            AudioAttachmentPreview2,
-            {
-              attachment,
-              handleRetry: messageComposer.attachmentManager.uploadAttachment,
-              removeAttachments: messageComposer.attachmentManager.removeAttachments
-            },
-            attachment.localMetadata.id || attachment.asset_url
-          );
-        } else if (isLocalVideoAttachment(attachment)) {
-          return /* @__PURE__ */ jsx(
-            VideoAttachmentPreview,
-            {
-              attachment,
-              handleRetry: messageComposer.attachmentManager.uploadAttachment,
-              removeAttachments: messageComposer.attachmentManager.removeAttachments
-            },
-            attachment.localMetadata.id || attachment.asset_url
-          );
-        } else if (isLocalImageAttachment(attachment)) {
-          return /* @__PURE__ */ jsx(
-            ImageAttachmentPreview,
-            {
-              attachment,
-              handleRetry: messageComposer.attachmentManager.uploadAttachment,
-              removeAttachments: messageComposer.attachmentManager.removeAttachments
-            },
-            attachment.localMetadata.id || attachment.image_url
-          );
-        } else if (isLocalFileAttachment(attachment)) {
-          return /* @__PURE__ */ jsx(
-            FileAttachmentPreview$1,
-            {
-              attachment,
-              handleRetry: messageComposer.attachmentManager.uploadAttachment,
-              removeAttachments: messageComposer.attachmentManager.removeAttachments
-            },
-            attachment.localMetadata.id || attachment.asset_url
-          );
-        } else if (isLocalAttachment(attachment)) {
-          return /* @__PURE__ */ jsx(
-            UnsupportedAttachmentPreview$1,
-            {
-              attachment,
-              handleRetry: messageComposer.attachmentManager.uploadAttachment,
-              removeAttachments: messageComposer.attachmentManager.removeAttachments
-            },
-            attachment.localMetadata.id
-          );
-        }
-        return null;
-      })
+      children: [
+        attachments.map((attachment) => {
+          if (isScrapedContent(attachment)) return null;
+          if (isLocalVoiceRecordingAttachment(attachment)) return null;
+          if (isLocalAudioAttachment(attachment)) {
+            return /* @__PURE__ */ jsx(
+              AudioAttachmentPreview2,
+              {
+                attachment,
+                handleRetry: messageComposer.attachmentManager.uploadAttachment,
+                removeAttachments: messageComposer.attachmentManager.removeAttachments
+              },
+              attachment.localMetadata.id || attachment.asset_url
+            );
+          } else if (isLocalVideoAttachment(attachment)) {
+            return /* @__PURE__ */ jsx(
+              VideoAttachmentPreview,
+              {
+                attachment,
+                handleRetry: messageComposer.attachmentManager.uploadAttachment,
+                openPreview: () => openPreviewAtIndex(previewIndexById[attachment.localMetadata.id] ?? 0),
+                removeAttachments: messageComposer.attachmentManager.removeAttachments
+              },
+              attachment.localMetadata.id || attachment.asset_url
+            );
+          } else if (isLocalImageAttachment(attachment)) {
+            return /* @__PURE__ */ jsx(
+              ImageAttachmentPreview,
+              {
+                attachment,
+                handleRetry: messageComposer.attachmentManager.uploadAttachment,
+                openPreview: () => openPreviewAtIndex(previewIndexById[attachment.localMetadata.id] ?? 0),
+                removeAttachments: messageComposer.attachmentManager.removeAttachments
+              },
+              attachment.localMetadata.id || attachment.image_url
+            );
+          } else if (isLocalFileAttachment(attachment)) {
+            return /* @__PURE__ */ jsx(
+              FileAttachmentPreview$1,
+              {
+                attachment,
+                handleRetry: messageComposer.attachmentManager.uploadAttachment,
+                removeAttachments: messageComposer.attachmentManager.removeAttachments
+              },
+              attachment.localMetadata.id || attachment.asset_url
+            );
+          } else if (isLocalAttachment(attachment)) {
+            return /* @__PURE__ */ jsx(
+              UnsupportedAttachmentPreview$1,
+              {
+                attachment,
+                handleRetry: messageComposer.attachmentManager.uploadAttachment,
+                removeAttachments: messageComposer.attachmentManager.removeAttachments
+              },
+              attachment.localMetadata.id
+            );
+          }
+          return null;
+        }),
+        galleryItems.length > 0 && /* @__PURE__ */ jsx(
+          Modal,
+          {
+            className: "str-chat__gallery-modal",
+            onClose: () => setShowPreview(false),
+            open: showPreview,
+            children: /* @__PURE__ */ jsx(Gallery, { initialIndex: initialIndexRef.current, items: galleryItems })
+          }
+        )
+      ]
     }
   );
 };
@@ -17222,11 +17453,9 @@ const VoiceRecordingPreviewSlot = ({
     }
   );
 };
-const textComposerStateSelector$4 = ({ command }) => ({ command });
-const CommandChip = () => {
+const CommandChip = ({ command }) => {
   const { textComposer } = useMessageComposerController();
   const { textareaRef } = useMessageComposerContext();
-  const { command } = useStateStore(textComposer.state, textComposerStateSelector$4);
   if (!command) return null;
   return /* @__PURE__ */ jsxs("div", { className: "str-chat__command-chip", children: [
     /* @__PURE__ */ jsx(IconThunder, {}),
@@ -17525,9 +17754,12 @@ const ToggleRecordingButton = () => {
   );
 };
 const AudioRecorderRecordingControls = () => {
+  const { client } = useChatContext();
+  const { t } = useTranslationContext();
   const {
     recordingController: { completeRecording, recorder, recording, recordingState }
   } = useMessageComposerContext();
+  const panel = useNotificationTarget();
   const isUploadingFile = recording?.localMetadata?.uploadState === "uploading";
   if (!recorder) return null;
   return /* @__PURE__ */ jsxs("div", { className: "str-chat__audio_recorder__recording-controls", children: [
@@ -17539,7 +17771,17 @@ const AudioRecorderRecordingControls = () => {
         className: "str-chat__audio_recorder__cancel-button",
         "data-testid": "cancel-recording-audio-button",
         disabled: isUploadingFile,
-        onClick: recorder.cancel,
+        onClick: () => {
+          recorder.cancel();
+          client.notifications.addInfo({
+            message: t("Voice message deleted"),
+            options: {
+              tags: addNotificationTargetTag(panel),
+              type: "audioRecording:cancel:success"
+            },
+            origin: { emitter: "AudioRecorder" }
+          });
+        },
         size: "sm",
         variant: "secondary",
         children: /* @__PURE__ */ jsx(IconTrashBin, {})
@@ -17846,7 +18088,10 @@ const SuggestionList = ({
   setFocusedItemIndex,
   suggestionItemComponents = defaultComponents
 }) => {
-  const { AutocompleteSuggestionItem = SuggestionListItem } = useComponentContext();
+  const {
+    AutocompleteSuggestionItem = SuggestionListItem,
+    ContextMenu: ContextMenuComponent = ContextMenu
+  } = useComponentContext();
   const { textareaRef } = useMessageComposerContext();
   const messageComposer = useMessageComposerController();
   const { textComposer } = messageComposer;
@@ -17964,7 +18209,7 @@ const SuggestionList = ({
         zIndex: 1e3
       },
       children: /* @__PURE__ */ jsx(
-        ContextMenu,
+        ContextMenuComponent,
         {
           className: clsx("str-chat__suggestion-list", className),
           Header: suggestions.searchSource.type === "commands" ? CommandsMenuHeader : void 0,
@@ -18063,6 +18308,12 @@ const TextareaComposer = ({
     textComposer.state,
     textComposerStateSelector$1
   );
+  const autosizeRows = !text2 && minRows == null ? 1 : void 0;
+  const textareaStyle = text2 ? void 0 : {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  };
   const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
   const { quotedMessage } = useStateStore(
     messageComposer.state,
@@ -18216,8 +18467,8 @@ const TextareaComposer = ({
             ),
             "data-testid": "message-input",
             disabled: !enabled || !!cooldownRemaining,
-            maxRows,
-            minRows,
+            maxRows: autosizeRows ?? maxRows,
+            minRows: autosizeRows ?? minRows,
             onBlur,
             onChange: changeHandler,
             onCompositionEnd,
@@ -18229,7 +18480,8 @@ const TextareaComposer = ({
             placeholder,
             ref: (ref) => {
               textareaRef.current = ref;
-            }
+            },
+            style: textareaStyle
           }
         ),
         !isComposing && /* @__PURE__ */ jsx(
@@ -18561,7 +18813,7 @@ const MessageComposerUI = () => {
               /* @__PURE__ */ jsxs("div", { className: "str-chat__message-composer-controls", children: [
                 /* @__PURE__ */ jsxs("div", { className: "str-chat__message-composer-controls__text-composition-controls", children: [
                   /* @__PURE__ */ jsxs("div", { className: "str-chat__message-composer-controls__text-composition-controls__text", children: [
-                    /* @__PURE__ */ jsx("div", { className: "str-chat__message-composer-controls__text-composition-controls__command-chip-container", children: /* @__PURE__ */ jsx(CommandChip$1, {}) }),
+                    command && /* @__PURE__ */ jsx("div", { className: "str-chat__message-composer-controls__text-composition-controls__command-chip-container", children: /* @__PURE__ */ jsx(CommandChip$1, { command }) }),
                     /* @__PURE__ */ jsx(TextareaComposer$1, {})
                   ] }),
                   /* @__PURE__ */ jsx(SendToChannelCheckbox$1, {})
@@ -18636,7 +18888,7 @@ const MessageComposerProvider = (props) => {
   const messageComposer = useMessageComposerController();
   useEffect(
     () => () => {
-      messageComposer.createDraft();
+      messageComposer.createDraft().finally(() => messageComposer.clear());
     },
     [messageComposer]
   );
@@ -18954,7 +19206,7 @@ const useChat = ({
   };
   useEffect(() => {
     if (!client) return;
-    const version = "14.0.0-beta.1";
+    const version = "14.0.0-beta.3";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
@@ -19455,13 +19707,13 @@ 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: ReactionIcon2
+  ReactionIcon
 }) => {
   const { t } = useTranslationContext("ReactionSelectorWithButton");
   const { isMyMessage, message, threadList } = useMessageContext();
@@ -19495,7 +19747,7 @@ const ReactionSelectorWithButton = ({
         "data-testid": "message-reaction-action",
         onClick: () => dialog?.toggle(),
         ref: buttonRef,
-        children: /* @__PURE__ */ jsx(ReactionIcon2, { className: "str-chat__message-action-icon" })
+        children: /* @__PURE__ */ jsx(ReactionIcon, { className: "str-chat__message-action-icon" })
       }
     )
   ] });
@@ -19543,6 +19795,7 @@ const QuickMessageActionsButton = ({ className, ...props }) => /* @__PURE__ */ j
     appearance: "ghost",
     circular: true,
     className: clsx("str-chat__message-actions-box-button", className),
+    size: "sm",
     variant: "secondary",
     ...props
   }
@@ -19832,8 +20085,7 @@ const DefaultMessageActionComponents = {
       const { closeMenu } = useContextMenuContext();
       const { client } = useChatContext();
       const { Modal = GlobalModal } = useComponentContext();
-      const { removeMessage } = useChannelActionContext();
-      const { handleDelete, message } = useMessageContext();
+      const { handleDelete } = useMessageContext();
       const panel = useNotificationTarget();
       const { t } = useTranslationContext();
       const [openModal, setOpenModal] = useState(false);
@@ -19859,29 +20111,20 @@ const DefaultMessageActionComponents = {
               closeMenu();
             },
             onDelete: async () => {
-              if (message.type === "error") removeMessage(message);
-              else {
-                try {
-                  await handleDelete();
-                  client.notifications.addSuccess({
-                    message: t("Message deleted"),
-                    options: {
-                      tags: addNotificationTargetTag(panel)
-                    },
-                    origin: { emitter: "MessageActions" }
-                  });
-                } catch (error) {
-                  client.notifications.addError({
-                    message: t("Failed to delete the message"),
-                    options: {
-                      tags: addNotificationTargetTag(panel)
-                    },
-                    origin: { emitter: "MessageActions" }
-                  });
-                }
+              try {
+                await handleDelete();
+                client.notifications.addSuccess({
+                  message: t("Message deleted"),
+                  options: {
+                    tags: addNotificationTargetTag(panel)
+                  },
+                  origin: { emitter: "MessageActions" }
+                });
+              } catch {
+              } finally {
+                setOpenModal(false);
+                closeMenu();
               }
-              setOpenModal(false);
-              closeMenu();
             }
           }
         ) })
@@ -19913,8 +20156,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(IconDotGrid1x3Horizontal, { className: "str-chat__message-action-icon" })
+        }
+      );
+    }),
     React() {
-      return /* @__PURE__ */ jsx(ReactionSelectorWithButton, { ReactionIcon });
+      return /* @__PURE__ */ jsx(ReactionSelectorWithButton, { ReactionIcon: IconEmojiSmile });
     },
     Reply() {
       const { handleOpenThread } = useMessageContext();
@@ -19926,14 +20195,17 @@ const DefaultMessageActionComponents = {
           className: "str-chat__message-reply-in-thread-button",
           "data-testid": "thread-action",
           onClick: handleOpenThread,
-          children: /* @__PURE__ */ jsx(ThreadIcon, { className: "str-chat__message-action-icon" })
+          children: /* @__PURE__ */ jsx(IconArrowShareLeft, { 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",
@@ -20023,14 +20295,14 @@ function useFetchReactions(options) {
   const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;
   const [refetchNonce, setRefetchNonce] = useState(null);
   useEffect(() => {
-    if (!shouldFetch || !reactionType) {
+    if (!shouldFetch) {
       return;
     }
     let cancel = false;
     (async () => {
       try {
         setIsLoading(true);
-        const reactions2 = await handleFetchReactions(reactionType, sort);
+        const reactions2 = await handleFetchReactions(reactionType ?? void 0, sort);
         if (!cancel) {
           setReactions(reactions2);
         }
@@ -20054,6 +20326,16 @@ function useFetchReactions(options) {
   return { isLoading, reactions, refetch };
 }
 const defaultReactionDetailsSort = { created_at: -1 };
+const MessageReactionsDetailLoadingIndicator = () => {
+  const elements = useMemo(
+    () => Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
+      /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
+      /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
+    ] }, index)),
+    []
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: elements });
+};
 function MessageReactionsDetail({
   handleFetchReactions,
   onSelectedReactionTypeChange,
@@ -20064,7 +20346,11 @@ function MessageReactionsDetail({
   totalReactionCount
 }) {
   const { client } = useChatContext();
-  const { Avatar: Avatar$1 = Avatar } = useComponentContext(MessageReactionsDetail.name);
+  const {
+    Avatar: Avatar$1 = Avatar,
+    LoadingIndicator: LoadingIndicator2 = MessageReactionsDetailLoadingIndicator,
+    reactionOptions = defaultReactionOptions
+  } = useComponentContext(MessageReactionsDetail.name);
   const { t } = useTranslationContext();
   const {
     handleReaction: contextHandleReaction,
@@ -20091,7 +20377,7 @@ function MessageReactionsDetail({
     "div",
     {
       className: "str-chat__message-reactions-detail",
-      "data-testid": "reactions-list-modal",
+      "data-testid": "message-reactions-detail",
       children: [
         typeof totalReactionCount === "number" && /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__total-count", children: t("{{ count }} reactions", { count: totalReactionCount }) }),
         /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__reaction-type-list-container", children: /* @__PURE__ */ jsx("ul", { className: "str-chat__message-reactions-detail__reaction-type-list", children: reactions.map(
@@ -20104,7 +20390,9 @@ function MessageReactionsDetail({
                 {
                   "aria-pressed": reactionType === selectedReactionType,
                   className: "str-chat__message-reactions-detail__reaction-type-list-item-button",
-                  onClick: () => onSelectedReactionTypeChange?.(reactionType),
+                  onClick: () => onSelectedReactionTypeChange?.(
+                    selectedReactionType === reactionType ? null : reactionType
+                  ),
                   children: [
                     /* @__PURE__ */ jsx("span", { className: "str-chat__message-reactions-detail__reaction-type-list-item-icon", children: /* @__PURE__ */ jsx(EmojiComponent, {}) }),
                     reactionCount > 1 && /* @__PURE__ */ jsx(
@@ -20128,22 +20416,10 @@ function MessageReactionsDetail({
             className: "str-chat__message-reactions-detail__user-list",
             "data-testid": "all-reacting-users",
             children: [
-              areReactionsLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
-                  /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
-                ] })
-              ] }),
-              !areReactionsLoading && /* @__PURE__ */ jsx(Fragment, { children: reactionDetailsWithLegacyFallback.map(({ user }) => {
+              areReactionsLoading && /* @__PURE__ */ jsx(LoadingIndicator2, {}),
+              !areReactionsLoading && /* @__PURE__ */ jsx(Fragment, { children: reactionDetailsWithLegacyFallback.map(({ type, user }) => {
                 const belongsToCurrentUser = client.user?.id === user?.id;
+                const EmojiComponent = Array.isArray(reactionOptions) ? void 0 : reactionOptions.quick[type]?.Component ?? reactionOptions.extended?.[type]?.Component;
                 return /* @__PURE__ */ jsxs(
                   "div",
                   {
@@ -20168,23 +20444,23 @@ function MessageReactionsDetail({
                             children: belongsToCurrentUser ? t("You") : user?.name || user?.id
                           }
                         ),
-                        belongsToCurrentUser && selectedReactionType && /* @__PURE__ */ jsx(
+                        belongsToCurrentUser && /* @__PURE__ */ jsx(
                           "button",
                           {
                             className: "str-chat__message-reactions-detail__user-list-item-button",
                             "data-testid": "remove-reaction-button",
-                            onClick: (e) => {
-                              contextHandleReaction(selectedReactionType, e).then(() => {
-                                refetch();
-                              });
+                            onClick: async (e) => {
+                              await contextHandleReaction(type, e);
+                              refetch();
                             },
                             children: t("Tap to remove")
                           }
                         )
-                      ] })
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { className: "str-chat__message-reactions-detail__user-list-item-icon", children: EmojiComponent && !selectedReactionType && /* @__PURE__ */ jsx(EmojiComponent, {}) })
                     ]
                   },
-                  user?.id
+                  `${user?.id}-${type}`
                 );
               }) })
             ]
@@ -20333,6 +20609,7 @@ const UnMemoizedMessageReactions = (props) => {
   const divRef = useRef(null);
   const dialogId2 = `message-reactions-detail-${message.id}`;
   const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
+  const isDialogOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
   const handleReactionButtonClick = (reactionType) => {
     if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {
       return;
@@ -20367,6 +20644,8 @@ const UnMemoizedMessageReactions = (props) => {
         children: /* @__PURE__ */ jsxs(
           FragmentOrButton,
           {
+            "aria-expanded": isDialogOpen,
+            "aria-pressed": isDialogOpen,
             buttonIf: visualStyle === "clustered",
             className: "str-chat__message-reactions__list-button",
             onClick: () => handleReactionButtonClick(existingReactions[0]?.reactionType ?? null),
@@ -20404,9 +20683,7 @@ const UnMemoizedMessageReactions = (props) => {
                   "button",
                   {
                     className: "str-chat__message-reactions__list-item-button",
-                    onClick: () => handleReactionButtonClick(
-                      existingReactions.at(-1)?.reactionType ?? null
-                    ),
+                    onClick: () => handleReactionButtonClick(null),
                     children: /* @__PURE__ */ jsxs("span", { className: "str-chat__message-reactions__overflow-count", children: [
                       "+",
                       totalReactionCount - cappedExistingReactions.reactionCountToDisplay
@@ -20531,91 +20808,74 @@ const StreamEmoji = ({
 const useSplitActionSet = (actionSet) => useMemo(() => {
   const quickActionSet = [];
   const dropdownActionSet = [];
+  let quickDropdownToggleAction;
   for (const action of actionSet) {
     if (action.placement === "quick")
       quickActionSet.push(action);
     if (action.placement === "dropdown")
       dropdownActionSet.push(action);
+    if (action.placement === "quick-dropdown-toggle") {
+      quickDropdownToggleAction ?? (quickDropdownToggleAction = action);
+    }
   }
-  return { dropdownActionSet, quickActionSet };
+  return { dropdownActionSet, quickActionSet, quickDropdownToggleAction };
 }, [actionSet]);
 const MessageActions = ({
   disableBaseMessageActionSetFilter = false,
   messageActionSet = defaultMessageActionSet
 }) => {
-  const { theme } = useChatContext();
   const { isMyMessage, message, threadList } = useMessageContext();
+  const { ContextMenu: ContextMenuComponent = ContextMenu } = useComponentContext();
   const { t } = useTranslationContext();
   const [actionsBoxButtonElement, setActionsBoxButtonElement] = useState(null);
   const filteredMessageActionSet = useBaseMessageActionSetFilter(
     messageActionSet,
     disableBaseMessageActionSetFilter
   );
-  const { dropdownActionSet, quickActionSet } = useSplitActionSet(
-    filteredMessageActionSet
-  );
-  const dropdownDialogId = `message-actions--${message.id}`;
+  const { dropdownActionSet, quickActionSet, quickDropdownToggleAction } = useSplitActionSet(filteredMessageActionSet);
+  const messageActionsDialogId = MessageActions.getDialogId({ messageId: message.id });
   const reactionSelectorDialogId = ReactionSelector.getDialogId({
     messageId: message.id,
     threadList
   });
-  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dropdownDialogId });
-  const dropdownDialogIsOpen = useDialogIsOpen(dropdownDialogId, dialogManager?.id);
+  const { dialog, dialogManager } = useDialogOnNearestManager({
+    id: messageActionsDialogId
+  });
+  const messageActionsDialogIsOpen = useDialogIsOpen(
+    messageActionsDialogId,
+    dialogManager?.id
+  );
   const reactionSelectorDialogIsOpen = useDialogIsOpen(
     reactionSelectorDialogId,
     dialogManager?.id
   );
-  const contextMenuItems = useMemo(
-    () => dropdownActionSet.map(({ Component: Component2 }) => {
-      const ActionItem = (menuProps) => /* @__PURE__ */ jsx(Component2, { ...menuProps });
-      return ActionItem;
-    }),
-    [dropdownActionSet]
-  );
   if (dropdownActionSet.length + quickActionSet.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx(`str-chat__message-${theme}__actions str-chat__message-options`, {
-        "str-chat__message-options--active": dropdownDialogIsOpen || reactionSelectorDialogIsOpen
+      className: clsx("str-chat__message-options", {
+        "str-chat__message-options--active": messageActionsDialogIsOpen || reactionSelectorDialogIsOpen
       }),
       children: [
-        dropdownActionSet.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              appearance: "ghost",
-              "aria-expanded": dropdownDialogIsOpen,
-              "aria-haspopup": "true",
-              "aria-label": t("aria/Open Message Actions Menu"),
-              circular: true,
-              className: "str-chat__message-actions-box-button",
-              "data-testid": "message-actions-toggle-button",
-              onClick: () => {
-                dialog?.toggle();
-              },
-              ref: setActionsBoxButtonElement,
-              variant: "secondary",
-              children: /* @__PURE__ */ jsx(ActionsIcon, { 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))
             }
           )
         ] }),
@@ -20624,6 +20884,8 @@ const MessageActions = ({
     }
   );
 };
+MessageActions.getDialogId = ({ messageId }) => `message-actions-${messageId}`;
+MessageActions.displayName = "MessageActions";
 const MessageUIWithContext = ({
   endOfGroup,
   firstOfGroup,
@@ -20787,7 +21049,7 @@ const MessageUIWithContext = ({
                 isAIGenerated ? /* @__PURE__ */ jsx(StreamedMessageText$1, { message, renderText: renderText2 }) : /* @__PURE__ */ jsx(MessageText, { message, renderText: renderText2 })
               ] }),
               /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-host", children: hasReactions && /* @__PURE__ */ jsx(MessageReactions$1, { reverse: true }) }),
-              /* @__PURE__ */ jsx(MessageErrorIcon, {})
+              /* @__PURE__ */ jsx("div", { className: "str-chat__message-error-indicator", children: /* @__PURE__ */ jsx(ErrorBadge, {}) })
             ] })
           ]
         }
@@ -21450,6 +21712,7 @@ const useScrollLocationLogic = (params) => {
   const closeToBottom = useRef(false);
   const closeToTop = useRef(false);
   const previousScrollTopRef = useRef(0);
+  const previousMessagesLengthRef = useRef(messages.length);
   const anchorRestoreCleanupRef = useRef(null);
   const captureAnchor = useCallback(() => {
     if (!listElement) return null;
@@ -21601,6 +21864,60 @@ const useScrollLocationLogic = (params) => {
       scrollToBottom();
     }
   }, [disableAutoScrollToBottom, justReachedLatestMessageSet, listElement, hasMoreNewer]);
+  useLayoutEffect(() => {
+    if (!listElement || disableAutoScrollToBottom || hasMoreNewer || suppressAutoscroll || justReachedLatestMessageSet || isRestoringOlderAnchorRef.current) {
+      return;
+    }
+    const initialDistanceToBottom = listElement.scrollHeight - (listElement.scrollTop + listElement.clientHeight);
+    const messagesHydrated = previousMessagesLengthRef.current === 0 && messages.length > 0;
+    if (initialDistanceToBottom > scrolledUpThreshold && !messagesHydrated) {
+      return;
+    }
+    let keepPinnedToBottom = true;
+    const maybeScrollToBottom = () => {
+      if (keepPinnedToBottom) {
+        scrollToBottom();
+      }
+    };
+    maybeScrollToBottom();
+    const settleDelays = [80, messagesHydrated ? 260 : 420, 900, 1700];
+    const settleTimeoutIds = settleDelays.map(
+      (delay) => setTimeout(maybeScrollToBottom, delay)
+    );
+    const stopKeepingPinnedToBottom = () => {
+      keepPinnedToBottom = false;
+    };
+    listElement.addEventListener("pointerdown", stopKeepingPinnedToBottom, {
+      passive: true
+    });
+    listElement.addEventListener("touchstart", stopKeepingPinnedToBottom, {
+      passive: true
+    });
+    listElement.addEventListener("wheel", stopKeepingPinnedToBottom, {
+      passive: true
+    });
+    listElement.addEventListener("keydown", stopKeepingPinnedToBottom);
+    const pinWindowTimeoutId = setTimeout(() => {
+      stopKeepingPinnedToBottom();
+    }, 2200);
+    return () => {
+      settleTimeoutIds.forEach(clearTimeout);
+      clearTimeout(pinWindowTimeoutId);
+      listElement.removeEventListener("pointerdown", stopKeepingPinnedToBottom);
+      listElement.removeEventListener("touchstart", stopKeepingPinnedToBottom);
+      listElement.removeEventListener("wheel", stopKeepingPinnedToBottom);
+      listElement.removeEventListener("keydown", stopKeepingPinnedToBottom);
+    };
+  }, [
+    disableAutoScrollToBottom,
+    hasMoreNewer,
+    justReachedLatestMessageSet,
+    listElement,
+    messages.length,
+    scrollToBottom,
+    scrolledUpThreshold,
+    suppressAutoscroll
+  ]);
   const updateScrollTop = useMessageListScrollManager({
     captureAnchor,
     disableScrollManagement: disableScrollManagement || isRestoringOlderAnchorRef.current,
@@ -21627,6 +21944,9 @@ const useScrollLocationLogic = (params) => {
   useLayoutEffect(() => {
     previousHasMoreNewerRef.current = hasMoreNewer;
   }, [hasMoreNewer]);
+  useLayoutEffect(() => {
+    previousMessagesLengthRef.current = messages.length;
+  }, [messages.length]);
   const onScroll = useCallback(
     (event) => {
       const element = event.target;
@@ -21635,8 +21955,10 @@ const useScrollLocationLogic = (params) => {
       updateScrollTop(scrollTop, captureAnchor);
       const offsetHeight = element.offsetHeight;
       const scrollHeight = element.scrollHeight;
+      const distanceToBottom = scrollHeight - (scrollTop + offsetHeight);
+      const bottomEnterThreshold = Math.max(Math.floor(scrolledUpThreshold * 0.6), 24);
       const prevCloseToBottom = closeToBottom.current;
-      closeToBottom.current = scrollHeight - (scrollTop + offsetHeight) < scrolledUpThreshold;
+      closeToBottom.current = prevCloseToBottom ? distanceToBottom < scrolledUpThreshold : distanceToBottom < bottomEnterThreshold;
       closeToTop.current = scrollTop < scrolledUpThreshold;
       if (closeToBottom.current) {
         setHasNewMessages(false);
@@ -22471,7 +22793,7 @@ function defaultRenderMessages({
   return renderedMessages;
 }
 const findReverse = (items, matches) => {
-  for (let i = items.length - 1; i > 0; i -= 1) {
+  for (let i = items.length - 1; i >= 0; i -= 1) {
     if (matches(items[i])) {
       return items[i];
     }
@@ -23571,11 +23893,17 @@ const useConnectionRecoveredListener = (forceUpdate) => {
 const MOBILE_NAV_BREAKPOINT = 768;
 const useMobileNavigation = (channelListRef, navOpen, closeMobileNav) => {
   useEffect(() => {
+    const isClickInsideChannelList = (event) => {
+      const channelListElement = channelListRef.current;
+      if (!channelListElement) return false;
+      const eventPath = event.composedPath();
+      return eventPath.includes(channelListElement);
+    };
     const handleClickOutside = (event) => {
       if (typeof window !== "undefined" && window.innerWidth >= MOBILE_NAV_BREAKPOINT) {
         return;
       }
-      if (closeMobileNav && channelListRef.current && !channelListRef.current.contains(event.target) && navOpen) {
+      if (closeMobileNav && channelListRef.current && !isClickInsideChannelList(event) && navOpen) {
         closeMobileNav();
       }
     };
@@ -24705,7 +25033,7 @@ const UnMemoizedLoadMoreButton = ({
   return /* @__PURE__ */ jsx("div", { className: "str-chat__load-more-button", children: /* @__PURE__ */ jsx(
     Button,
     {
-      appearance: "outline",
+      appearance: "ghost",
       "aria-label": t("aria/Load More Channels"),
       "data-testid": "load-more-button",
       disabled: loading,
@@ -25313,6 +25641,36 @@ const useArchiveActionButtonBehavior = () => {
   };
 };
 const defaultChannelActionSet = [
+  {
+    // eslint-disable-next-line react/display-name
+    Component: forwardRef((_, ref) => {
+      const { channel } = useChannelListItemContext();
+      const dialogId2 = ChannelListItemActionButtons.getDialogId({
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        channelId: channel.id
+      });
+      const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
+      const dialogIsOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "ghost",
+          "aria-expanded": dialogIsOpen,
+          "aria-pressed": dialogIsOpen,
+          circular: true,
+          onClick: (e) => {
+            e.stopPropagation();
+            dialog.toggle();
+          },
+          ref,
+          size: "sm",
+          variant: "secondary",
+          children: /* @__PURE__ */ jsx(IconDotGrid1x3Horizontal, {})
+        }
+      );
+    }),
+    placement: "quick-dropdown-toggle"
+  },
   {
     Component() {
       const behaviorProps = useArchiveActionButtonBehavior();
@@ -25445,7 +25803,7 @@ const defaultChannelActionSet = [
       const membership = useChannelMembershipState(channel);
       const dialogId2 = ChannelListItemActionButtons.getDialogId(
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        channel.id
+        { channelId: channel.id }
       );
       const { dialog } = useDialogOnNearestManager({ id: dialogId2 });
       const [inProgress, setInProgress] = useState(false);
@@ -25547,59 +25905,23 @@ const useBaseChannelActionSetFilter = (channelActionSet) => {
   const connectedUserIsMember = typeof membership.user !== "undefined";
   const ownCapabilities = channel.data?.own_capabilities;
   return useMemo(() => {
-    const filtered = channelActionSet.filter(
-      (action) => match({
-        action,
-        connectedUserIsMember,
-        isDirectMessageChannel,
-        memberCount,
-        ownCapabilities
-      }).returnType().with(
-        {
-          action: { connectedUserIsMember: true, placement: "quick", type: "archive" },
-          isDirectMessageChannel: true
-        },
-        {
-          action: {
-            connectedUserIsMember: true,
-            placement: "dropdown",
-            type: "archive"
-          },
-          isDirectMessageChannel: false
-        },
-        {
-          action: { placement: "dropdown", type: "mute" },
-          isDirectMessageChannel: true,
-          ownCapabilities: P.when(
-            (capabilities) => capabilities?.includes("mute-channel")
-          )
-        },
-        {
-          action: { placement: "quick", type: "mute" },
-          isDirectMessageChannel: false,
-          ownCapabilities: P.when(
-            (capabilities) => capabilities?.includes("mute-channel")
-          )
-        },
-        {
-          action: { type: "ban" },
-          memberCount: P.number.gt(0).and(P.number.lte(2)),
-          ownCapabilities: P.when(
-            (capabilities) => capabilities?.includes("ban-channel-members")
-          )
-        },
-        {
-          action: { type: "leave" },
-          ownCapabilities: P.when(
-            (capabilities) => capabilities?.includes("leave-channel")
-          )
-        },
-        {
-          action: { connectedUserIsMember: true, type: "pin" }
-        },
-        () => true
-      ).otherwise(() => false)
-    );
+    const filtered = channelActionSet.filter((action) => {
+      if (action.placement === "quick-dropdown-toggle") return true;
+      switch (action.type) {
+        case "archive":
+          return connectedUserIsMember && (action.placement === "quick" && isDirectMessageChannel || action.placement === "dropdown" && !isDirectMessageChannel);
+        case "mute":
+          return ownCapabilities?.includes("mute-channel") && (action.placement === "dropdown" && isDirectMessageChannel || action.placement === "quick" && !isDirectMessageChannel);
+        case "ban":
+          return memberCount > 0 && memberCount <= 2 && ownCapabilities?.includes("ban-channel-members");
+        case "leave":
+          return ownCapabilities?.includes("leave-channel");
+        case "pin":
+          return connectedUserIsMember;
+        default:
+          return true;
+      }
+    });
     return filtered;
   }, [
     channelActionSet,
@@ -25610,17 +25932,18 @@ const useBaseChannelActionSetFilter = (channelActionSet) => {
   ]);
 };
 const ChannelListItemActionButtons = () => {
+  const { ContextMenu: ContextMenuComponent = ContextMenu } = useComponentContext();
   const { channel } = useChannelListItemContext();
   const [referenceElement, setReferenceElement] = React.useState(null);
-  const dialogId2 = ChannelListItemActionButtons.getDialogId(
+  const dialogId2 = ChannelListItemActionButtons.getDialogId({
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    channel.id
-  );
+    channelId: channel.id
+  });
   const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
   const dialogIsOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
   const filteredActionSet = useBaseChannelActionSetFilter(defaultChannelActionSet);
-  const splitActionSet = useSplitActionSet(filteredActionSet);
-  if (splitActionSet.quickActionSet.length + splitActionSet.dropdownActionSet.length === 0) {
+  const { dropdownActionSet, quickActionSet, quickDropdownToggleAction } = useSplitActionSet(filteredActionSet);
+  if (quickActionSet.length + dropdownActionSet.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxs(
@@ -25630,26 +25953,10 @@ const ChannelListItemActionButtons = () => {
         "str-chat__channel-list-item__action-buttons--active": dialogIsOpen
       }),
       children: [
-        splitActionSet.dropdownActionSet.length > 0 && /* @__PURE__ */ jsx(
-          Button,
-          {
-            appearance: "ghost",
-            "aria-expanded": dialogIsOpen,
-            "aria-pressed": dialogIsOpen,
-            circular: true,
-            onClick: (e) => {
-              e.stopPropagation();
-              dialog.toggle();
-            },
-            ref: setReferenceElement,
-            size: "sm",
-            variant: "secondary",
-            children: /* @__PURE__ */ jsx(IconDotGrid1x3Horizontal, {})
-          }
-        ),
-        splitActionSet.quickActionSet.map(({ Component: Component2, type }) => /* @__PURE__ */ jsx(Component2, {}, type)),
+        quickDropdownToggleAction && dropdownActionSet.length > 0 && /* @__PURE__ */ jsx(quickDropdownToggleAction.Component, { ref: setReferenceElement }),
+        quickActionSet.map(({ Component: Component2, type }) => /* @__PURE__ */ jsx(Component2, {}, type)),
         /* @__PURE__ */ jsx(
-          ContextMenu,
+          ContextMenuComponent,
           {
             className: "str-chat__channel-list-item__action-buttons-context-menu",
             dialogManagerId: dialogManager?.id,
@@ -25659,14 +25966,14 @@ const ChannelListItemActionButtons = () => {
             referenceElement,
             tabIndex: -1,
             trapFocus: true,
-            children: splitActionSet.dropdownActionSet.map(({ Component: Component2, type }) => /* @__PURE__ */ jsx(Component2, {}, type))
+            children: dropdownActionSet.map(({ Component: Component2, type }) => /* @__PURE__ */ jsx(Component2, {}, type))
           }
         )
       ]
     }
   );
 };
-ChannelListItemActionButtons.getDialogId = (channelId) => `channel-action-buttons-${channelId}`;
+ChannelListItemActionButtons.getDialogId = ({ channelId }) => `channel-action-buttons-${channelId}`;
 ChannelListItemActionButtons.displayName = "ChannelListItemActionButtons";
 function ChannelListItemTimestamp({ lastMessage }) {
   const { t, tDateTimeParser } = useTranslationContext("ChannelListItemTimestamp");
@@ -26605,7 +26912,8 @@ const ThreadList = ({ virtuosoProps }) => {
 };
 const IconsBySeverity = {
   error: IconExclamationCircle,
-  info: IconCircleInfoTooltip,
+  info: null,
+  // IconCircleInfoTooltip,
   loading: IconArrowRotateRightLeftRepeatRefresh,
   success: IconCheckmark2,
   warning: IconExclamationTriangle
@@ -26613,7 +26921,7 @@ const IconsBySeverity = {
 const DefaultNotificationIcon = ({ notification }) => {
   if (!notification.severity) return null;
   const Icon = IconsBySeverity[notification.severity] ?? null;
-  return Icon && /* @__PURE__ */ jsx(Icon, {});
+  return Icon && /* @__PURE__ */ jsx("div", { className: "str-chat__notification-icon", children: /* @__PURE__ */ jsx(Icon, {}) });
 };
 const Notification = forwardRef(
   ({
@@ -26657,7 +26965,7 @@ const Notification = forwardRef(
         ref,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "str-chat__notification-content", children: [
-            Icon && /* @__PURE__ */ jsx("div", { className: "str-chat__notification-icon", children: /* @__PURE__ */ jsx(Icon, { notification }) }),
+            Icon && /* @__PURE__ */ jsx(Icon, { notification }),
             /* @__PURE__ */ jsx("div", { className: "str-chat__notification-message", children: displayMessage })
           ] }),
           notification.actions && notification.actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "str-chat__notification-actions", children: notification.actions.map((action, index) => /* @__PURE__ */ jsx(
@@ -26991,7 +27299,7 @@ const VoiceRecordingPlayerUI = ({ audioPlayer }) => {
     secondsElapsed
   } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, "data-testid": "voice-recording-widget", children: [
-    /* @__PURE__ */ jsx(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay }),
+    /* @__PURE__ */ jsx("div", { className: "str-chat__message-attachment__voice-recording-widget__play-button-container", children: /* @__PURE__ */ jsx(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay }) }),
     /* @__PURE__ */ jsx("div", { className: "str-chat__message-attachment__voice-recording-widget__metadata", children: /* @__PURE__ */ jsxs("div", { className: "str-chat__message-attachment__voice-recording-widget__audio-state", children: [
       /* @__PURE__ */ jsx("div", { className: "str-chat__message-attachment__voice-recording-widget__timer", children: durationSeconds ? /* @__PURE__ */ jsx(
         DurationDisplay,
@@ -27400,23 +27708,44 @@ const FileAttachment = ({ attachment }) => {
   );
 };
 const Giphy = ({ attachment }) => {
-  const { giphyVersion: giphyVersionName } = useChannelStateContext();
+  const { giphyVersion: giphyVersionName, imageAttachmentSizeHandler } = useChannelStateContext();
   const { BaseImage: BaseImage$1 = BaseImage } = useComponentContext();
   const { t } = useTranslationContext();
   const usesDefaultBaseImage = BaseImage$1 === BaseImage;
+  const imageElement = useRef(null);
+  const [attachmentConfiguration, setAttachmentConfiguration] = useState(void 0);
   const imageDescriptors = useMemo(
     () => toGalleryItemDescriptors(attachment, { giphyVersionName }),
     [attachment, giphyVersionName]
   );
-  if (!imageDescriptors?.imageUrl) return null;
-  const { alt, dimensions, imageUrl, title } = imageDescriptors;
+  const alt = imageDescriptors && imageDescriptors.alt;
+  const dimensions = imageDescriptors && imageDescriptors.dimensions;
+  const imageUrl = imageDescriptors && imageDescriptors.imageUrl;
+  const title = imageDescriptors && imageDescriptors.title;
+  const resolvedImageUrl = attachmentConfiguration?.url || imageUrl;
+  const imageStyleVariables = useMemo(() => {
+    const originalHeight = Number(dimensions?.height);
+    const originalWidth = Number(dimensions?.width);
+    return {
+      "--original-height": String(originalHeight > 1 ? originalHeight : 1e6),
+      "--original-width": String(originalWidth > 1 ? originalWidth : 1e6)
+    };
+  }, [dimensions?.height, dimensions?.width]);
+  useLayoutEffect(() => {
+    if (!imageElement.current || !imageAttachmentSizeHandler) return;
+    const config = imageAttachmentSizeHandler(attachment, imageElement.current);
+    setAttachmentConfiguration(config);
+  }, [attachment, imageAttachmentSizeHandler]);
+  if (!imageUrl) return null;
   return /* @__PURE__ */ jsxs("div", { className: clsx(`str-chat__message-attachment-giphy`), children: [
     /* @__PURE__ */ jsx(
       BaseImage$1,
       {
         alt: alt ?? title ?? t("User uploaded content"),
         height: dimensions?.height,
-        src: imageUrl,
+        ref: imageElement,
+        src: resolvedImageUrl,
+        style: imageStyleVariables,
         width: dimensions?.width,
         ...usesDefaultBaseImage ? { showDownloadButtonOnError: false } : {}
       }
@@ -28016,7 +28345,6 @@ export {
   AIStateIndicator,
   AIStates,
   ATTACHMENT_GROUPS_ORDER,
-  ActionsIcon,
   AddCommentPrompt,
   Alert,
   AmountBar,
@@ -28029,7 +28357,7 @@ export {
   AttachmentWithinContainer,
   Audio,
   AudioContainer,
-  bp as AudioPlayer,
+  bu as AudioPlayer,
   AudioRecorder,
   Avatar,
   AvatarStack,
@@ -28041,13 +28369,13 @@ export {
   Callout,
   Card,
   CardContainer,
-  bs as Channel,
-  d8 as ChannelActionContext,
-  d9 as ChannelActionProvider,
+  bx as Channel,
+  dc as ChannelActionContext,
+  dd as ChannelActionProvider,
   ChannelAvatar,
   ChannelHeader,
   ChannelList,
-  ChannelListContext,
+  de as ChannelListContext,
   ChannelListContextProvider,
   ChannelListItem,
   ChannelListItemActionButtons,
@@ -28055,27 +28383,28 @@ export {
   ChannelListItemUI,
   ChannelListUI,
   ChannelSearchResultItem,
-  da as ChannelStateContext,
-  db as ChannelStateProvider,
+  df as ChannelStateContext,
+  dg as ChannelStateProvider,
   Chat,
-  dc as ChatContext,
+  dh as ChatContext,
   ChatProvider,
-  bu as ChatView,
-  bx as ChatViewChannelsSelectorButton,
-  bt as ChatViewContext,
-  bw as ChatViewSelectorButton,
-  by as ChatViewThreadsSelectorButton,
+  bz as ChatView,
+  bC as ChatViewChannelsSelectorButton,
+  by as ChatViewContext,
+  bB as ChatViewSelectorButton,
+  bD as ChatViewThreadsSelectorButton,
   CheckSignIcon,
   Checkmark,
   CommandChip,
   CommandItem,
   ComponentContext,
-  dd as ComponentProvider,
+  di as ComponentProvider,
   ConnectionStatus,
   ContextMenu,
   ContextMenuBackButton,
   ContextMenuBody,
   ContextMenuButton,
+  ContextMenuContent,
   ContextMenuHeader,
   ContextMenuRoot,
   CooldownTimer,
@@ -28094,6 +28423,7 @@ export {
   EmoticonItem,
   EmptyStateIndicator,
   EndPollAlert,
+  ErrorBadge,
   EventComponent,
   FILE_ICON_GRAPHIC_CLASSNAME,
   FILE_ICON_NO_LABEL_CLASSNAME,
@@ -28114,162 +28444,163 @@ export {
   GlobalModal,
   GroupAvatar,
   Header$1 as Header,
-  bB as IconApiAggregate,
-  bC as IconApples,
+  bG as IconApiAggregate,
+  bH as IconApples,
   IconArchive,
   IconArrowBoxLeft,
   IconArrowDown,
   IconArrowDownCircle,
   IconArrowLeft,
-  bD as IconArrowRight,
+  bI as IconArrowRight,
   IconArrowRightUp,
   IconArrowRotateClockwise,
   IconArrowRotateRightLeftRepeatRefresh,
-  bE as IconArrowShareLeft,
+  IconArrowShareLeft,
   IconArrowUp,
-  bF as IconArrowsRepeatLeftRight,
-  bG as IconAt,
-  bH as IconAtSolid,
+  bJ as IconArrowsRepeatLeftRight,
+  bK as IconAt,
+  bL as IconAtSolid,
   IconBellNotification,
   IconBellOff,
   IconBookmark,
   IconBookmarkRemove,
-  bI as IconBrowserAISparkle,
-  bJ as IconBubble2ChatMessage,
-  bK as IconBubble2Solid,
-  bL as IconBubble3ChatMessage,
-  bM as IconBubble3Solid,
-  bN as IconBubbleAnnotation2ChatMessage,
+  bM as IconBrowserAISparkle,
+  bN as IconBubble2ChatMessage,
+  bO as IconBubble2Solid,
+  bP as IconBubble3ChatMessage,
+  bQ as IconBubble3Solid,
+  bR as IconBubbleAnnotation2ChatMessage,
   IconBubbleText6ChatMessage,
-  bP as IconBubbleText6Solid,
-  bO as IconBubbleText6SolidChatMessage,
+  bT as IconBubbleText6Solid,
+  bS as IconBubbleText6SolidChatMessage,
   IconBubbleWideNotificationChatMessage,
-  bQ as IconBubbleWideSparkleChatMessage,
+  bU as IconBubbleWideSparkleChatMessage,
   IconBubbles,
-  bR as IconCalendar1,
-  bS as IconCallCancel,
+  bV as IconCalendar1,
+  bW as IconCallCancel,
   IconCamera1,
-  bT as IconCar1,
-  bU as IconCat,
+  bX as IconCar1,
+  bY as IconCat,
   IconChainLink,
   IconChart5,
   IconCheckmark1Small,
   IconCheckmark2,
-  bV as IconCheckmark2Small,
+  bZ as IconCheckmark2Small,
   IconChevronDown,
-  bW as IconChevronGrabberVerticalSelector,
+  b_ as IconChevronGrabberVerticalSelector,
   IconChevronLeft,
   IconChevronRight,
-  bX as IconChevronTop,
+  b$ as IconChevronTop,
   IconCircleBanSign,
-  bY as IconCircleCheck,
-  IconCircleInfoTooltip,
+  c0 as IconCircleCheck,
+  c1 as IconCircleInfoTooltip,
   IconCircleMinus,
-  bZ as IconCircleQuestionmark,
-  b_ as IconCircleQuestionmarkFilled,
+  c2 as IconCircleQuestionmark,
+  c3 as IconCircleQuestionmarkFilled,
   IconCircleX,
   IconClock,
-  b$ as IconClockSolid,
+  c4 as IconClockSolid,
   IconCloseQuote2,
-  c0 as IconCode,
-  c1 as IconCodeBrackets,
-  c2 as IconCodeEditorInsert,
-  c3 as IconCompass,
-  c4 as IconCreditCard2Billing,
+  c5 as IconCode,
+  c6 as IconCodeBrackets,
+  c7 as IconCodeEditorInsert,
+  c8 as IconCompass,
+  c9 as IconCreditCard2Billing,
   IconCrossMedium,
   IconCrossSmall,
   IconDotGrid1x3Horizontal,
   IconDotGrid2x3,
-  c5 as IconDotsGrid1x3Vertical,
+  ca as IconDotsGrid1x3Vertical,
   IconDoubleCheckmark1Small,
   IconEditBig,
-  c6 as IconEditBigSolid,
-  c7 as IconEmojiAddReaction,
-  c8 as IconEmojiSad,
-  c9 as IconEmojiSmile,
+  cb as IconEditBigSolid,
+  cc as IconEmojiAddReaction,
+  cd as IconEmojiSad,
+  IconEmojiSmile,
+  IconExclamation,
   IconExclamationCircle,
   IconExclamationCircle1,
   IconExclamationTriangle,
-  ca as IconExclamationTriangle1,
+  ce as IconExclamationTriangle1,
   IconEyeOpen,
   IconFileArrowLeftIn,
   IconFileBend,
-  cb as IconFilledCircleInfoTooltip,
-  cc as IconFilter1,
+  cf as IconFilledCircleInfoTooltip,
+  cg as IconFilter1,
   IconFlag2,
-  cd as IconGauge,
+  ch as IconGauge,
   IconGiphy,
-  ce as IconGoogle,
-  cf as IconHashtagChannel,
-  cg as IconHeart2,
-  ch as IconHistory,
+  ci as IconGoogle,
+  cj as IconHashtagChannel,
+  ck as IconHeart2,
+  cl as IconHistory,
   IconImages1Alt,
-  ci as IconInvite,
-  cj as IconLayersBehind,
+  cm as IconInvite,
+  cn as IconLayersBehind,
   IconLayoutAlignLeft,
-  ck as IconLayoutGrid1,
-  cl as IconLightBulbSimple,
-  cm as IconLimits,
-  cn as IconLineChart3,
+  co as IconLayoutGrid1,
+  cp as IconLightBulbSimple,
+  cq as IconLimits,
+  cr as IconLineChart3,
   IconLoadingCircle,
-  co as IconLock,
+  cs as IconLock,
   IconMagnifyingGlassSearch,
   IconMapPin,
   IconMicrophone,
-  cp as IconMicrophoneSolid,
-  cq as IconMinusLarge,
-  cr as IconMinusSmall,
+  ct as IconMicrophoneSolid,
+  cu as IconMinusLarge,
+  cv as IconMinusSmall,
   IconMute,
-  cs as IconNewspaper2,
-  ct as IconOrganization,
+  cw as IconNewspaper2,
+  cx as IconOrganization,
   IconPaperPlane,
-  cu as IconPaperPlaneTopRight,
+  cy as IconPaperPlaneTopRight,
   IconPaperclip,
-  cv as IconParagraphsText,
+  cz as IconParagraphsText,
   IconPause,
-  cw as IconPencil,
+  cA as IconPencil,
   IconPeople,
-  cx as IconPeople2,
+  cB as IconPeople2,
   IconPeopleAdd,
   IconPeopleAdded,
-  cy as IconPeopleCircle,
-  cz as IconPeopleCopy,
-  cA as IconPeopleEditUserRights,
+  cC as IconPeopleCircle,
+  cD as IconPeopleCopy,
+  cE as IconPeopleEditUserRights,
   IconPeopleRemove,
-  cB as IconPersona,
+  cF as IconPersona,
   IconPin,
   IconPlaySolid,
   IconPlusLarge,
   IconPlusSmall,
   IconRunShortcut,
-  cC as IconSearchText,
-  cD as IconSettingsGear2,
-  cE as IconSettingsSliderVer,
-  cF as IconShapesPlusCloseSquareCircle,
-  cG as IconShapesTriangleSquareCircle,
-  cH as IconShareRedirectLink,
-  cI as IconShield,
+  cG as IconSearchText,
+  cH as IconSettingsGear2,
+  cI as IconSettingsSliderVer,
+  cJ as IconShapesPlusCloseSquareCircle,
+  cK as IconShapesTriangleSquareCircle,
+  cL as IconShareRedirectLink,
+  cM as IconShield,
   IconSquareBehindSquare2_Copy,
-  cJ as IconSquareCircleTopRightFeeds,
-  cK as IconStop,
-  cL as IconTable,
-  cM as IconTeam,
-  cN as IconTennis,
-  cO as IconTextToImageURLEnrichment,
+  cN as IconSquareCircleTopRightFeeds,
+  cO as IconStop,
+  cP as IconTable,
+  cQ as IconTeam,
+  cR as IconTennis,
+  cS as IconTextToImageURLEnrichment,
   IconThunder,
   IconTranslate,
   IconTrashBin,
-  cP as IconTrending4,
+  cT as IconTrending4,
   IconTrophy,
-  cQ as IconUnlocked,
+  cU as IconUnlocked,
   IconUnpin,
-  cR as IconUsers,
+  cV as IconUsers,
   IconVideo,
   IconVideoSolid,
-  cS as IconVoiceAndVideo,
-  cT as IconVoiceHigh,
+  cW as IconVoiceAndVideo,
+  cX as IconVoiceHigh,
   IconVolumeFull,
-  cU as IconWebhook,
+  cY as IconWebhook,
   ImageComponent,
   ImageContainer,
   ImagePlaceholder,
@@ -28278,9 +28609,9 @@ export {
   LinkPreviewList,
   LoadMoreButton,
   LoadMorePaginator,
-  cV as LoadingChannel,
+  cZ as LoadingChannel,
   LoadingChannels,
-  cW as LoadingErrorIndicator,
+  c_ as LoadingErrorIndicator,
   LoadingIndicator,
   LoadingIndicatorIcon,
   MAX_MESSAGE_REACTIONS_TO_FETCH,
@@ -28295,20 +28626,20 @@ export {
   MessageBouncePrompt,
   MessageBounceProvider,
   MessageComposer,
-  de as MessageComposerContext,
+  dj as MessageComposerContext,
   MessageComposerContextProvider,
   MessageComposerUI,
   MessageContext,
   MessageDeletedBubble,
   MessageDeliveryStatus,
   MessageEditedIndicator,
-  MessageErrorIcon,
   MessageList,
   MessageListContext,
   MessageListContextProvider,
   MessageProvider,
   MessageReactions,
   MessageReactionsDetail,
+  MessageReactionsDetailLoadingIndicator,
   MessageRepliesCountButton,
   MessageSearchResultItem,
   MessageStatus,
@@ -28328,10 +28659,9 @@ export {
   NotificationList,
   NotificationTranslationTopic,
   NumericInput,
-  cX as OPTIONAL_MESSAGE_ACTIONS,
+  c$ as OPTIONAL_MESSAGE_ACTIONS,
   OtherFilesContainer,
   PauseIcon,
-  PinIcon,
   PinIndicator,
   PlayButton,
   PlayIcon,
@@ -28358,7 +28688,6 @@ export {
   QuotedMessagePreview,
   QuotedMessagePreviewUI,
   QuotedVoiceRecording,
-  ReactionIcon,
   ReactionSelector,
   RecordingPermission,
   RecordingPermissionDeniedNotification,
@@ -28397,23 +28726,22 @@ export {
   TextInputFieldSet,
   TextareaComposer,
   Thread,
-  d6 as ThreadContext,
+  da as ThreadContext,
   ThreadHeader,
-  ThreadIcon,
   ThreadList,
   ThreadListItem,
   ThreadListItemUI,
-  d7 as ThreadProvider,
+  db as ThreadProvider,
   ThreadStart,
   Tooltip,
   TranslationBuilder,
-  df as TranslationContext,
+  dk as TranslationContext,
   TranslationProvider,
   TranslationTopic,
-  dg as TypingContext,
+  dl as TypingContext,
   TypingIndicator,
   TypingIndicatorHeader,
-  dh as TypingProvider,
+  dm as TypingProvider,
   UNREAD_MESSAGE_SEPARATOR_CLASS,
   UnMemoizedLoadMorePaginator,
   UnreadMessagesNotification,
@@ -28433,31 +28761,31 @@ export {
   VoiceRecordingPlayer,
   WaveProgressBar,
   Window,
-  bm as WithAudioPlayback,
+  br as WithAudioPlayback,
   WithComponents,
   WithDragAndDropUpload,
   addNotificationTargetTag,
   areMessagePropsEqual,
   areMessageUIPropsEqual,
   countEmojis,
-  bA as createIcon,
+  bF as createIcon,
   deTranslations,
   defaultAllowedTagNames,
   defaultAttachmentActionsDefaultFocus,
   defaultAttachmentSelectorActionSet,
-  bz as defaultChatViewSelectorItemSet,
+  bE as defaultChatViewSelectorItemSet,
   defaultComponents,
   defaultDateTimeParser,
   defaultMessageActionSet,
   defaultPinPermissions,
   defaultReactionOptions,
-  bn as defaultRegisterAudioPlayerError,
+  bs as defaultRegisterAudioPlayerError,
   defaultRenderMessages,
   defaultTranslatorFunction,
   displayDuration,
   divMod,
   downSample,
-  bo as elementIsPlaying,
+  bt as elementIsPlaying,
   emojiMarkdownPlugin,
   emojiToUnicode,
   enTranslations,
@@ -28471,21 +28799,21 @@ export {
   getCssDimensionsVariables,
   getGroupChannelDisplayInfo,
   getGroupStyles,
-  cY as getImages,
+  d0 as getImages,
   getIsFirstUnreadMessage,
   getLastReceived,
   getLatestMessagePreview,
   getMessageActions,
-  cZ as getNonImageAttachments,
-  d3 as getNotificationTargetPanel,
-  d4 as getNotificationTargetTag,
+  d1 as getNonImageAttachments,
+  d7 as getNotificationTargetPanel,
+  d8 as getNotificationTargetTag,
   getReadByTooltipText,
   getTextareaCaretRect,
   getTranslatedMessageText,
   getWholeChar,
   handleActionWarning,
-  d0 as hasMoreMessagesProbably,
-  d1 as hasNotMoreMessages,
+  d4 as hasMoreMessagesProbably,
+  d5 as hasNotMoreMessages,
   hiTranslations,
   htmlToTextPlugin,
   imageToLink,
@@ -28495,7 +28823,7 @@ export {
   isChrome,
   isDate,
   isDateSeparatorMessage,
-  di as isDayOrMoment,
+  dn as isDayOrMoment,
   isFirefox,
   isGalleryAttachmentType,
   isIntroMessage,
@@ -28505,9 +28833,10 @@ export {
   isMessageBounced,
   isMessageEdited,
   isMessageErrorRetryable,
+  isNetworkSendFailure,
   isNotificationForPanel,
-  d2 as isNotificationTargetPanel,
-  dj as isNumberOrString,
+  d6 as isNotificationTargetPanel,
+  dp as isNumberOrString,
   isSafari,
   isSvgAttachment,
   isUserMuted,
@@ -28515,8 +28844,8 @@ export {
   jaTranslations,
   keepLineBreaksPlugin,
   koTranslations,
-  c$ as makeDateMessageId,
-  c_ as makeIntroMessage,
+  d3 as makeDateMessageId,
+  d2 as makeIntroMessage,
   mapEmojiMartData,
   mapToUserNameOrId,
   markDownRenderers,
@@ -28553,8 +28882,8 @@ export {
   upSample,
   useAIState,
   useActionHandler,
-  bl as useActiveAudioPlayer,
-  bv as useActiveThread,
+  bq as useActiveAudioPlayer,
+  bA as useActiveThread,
   useAttachmentManagerState,
   useAttachmentsForPreview,
   useAudioPlayer,
@@ -28563,13 +28892,13 @@ export {
   useChannelActionContext,
   useChannelDeletedListener,
   useChannelDisplayName,
-  bq as useChannelEditMessageHandler,
+  bv as useChannelEditMessageHandler,
   useChannelHiddenListener,
   useChannelListContext,
   useChannelListItemContext,
   useChannelMembersState,
   useChannelMembershipState,
-  br as useChannelMentionsHandler,
+  bw as useChannelMentionsHandler,
   useChannelPreviewInfo,
   useChannelStateContext,
   useChannelTruncatedListener,
@@ -28594,7 +28923,7 @@ export {
   useFlagHandler,
   useGalleryContext,
   useLastReadData,
-  d5 as useLegacyThreadContext,
+  d9 as useLegacyThreadContext,
   useLiveLocationSharingManager,
   useMarkUnreadHandler,
   useMentionsHandler,