stream-chat-react 12.4.0 → 12.5.0

package/dist/experimental/index.browser.cjs

@@ -40,7 +40,7 @@ module.exports = __toCommonJS(experimental_exports);
 
 // src/experimental/MessageActions/MessageActions.tsx
 var import_clsx5 = __toESM(require("clsx"));
-var import_react24 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 
 // src/context/ChannelActionContext.tsx
 var import_react = __toESM(require("react"));
@@ -94,11 +94,10 @@ var ComponentContext = import_react4.default.createContext({});
 var useComponentContext = (_componentName) => (0, import_react4.useContext)(ComponentContext);
 
 // src/context/DialogManagerContext.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 
 // src/components/Dialog/DialogPortal.tsx
-var import_react7 = __toESM(require("react"));
-var import_react_dom = require("react-dom");
+var import_react8 = __toESM(require("react"));
 
 // src/components/Dialog/hooks/useDialog.ts
 var import_react6 = require("react");
@@ -138,37 +137,50 @@ var useDialogIsOpen = (id) => {
   return useStateStore(dialogManager.state, dialogIsOpenSelector).isOpen;
 };
 
-// src/components/Dialog/DialogPortal.tsx
-var DialogPortalEntry = ({
+// src/components/Portal/Portal.ts
+var import_react7 = require("react");
+var import_react_dom = require("react-dom");
+var Portal = ({
   children,
-  dialogId
+  getPortalDestination,
+  isOpen
 }) => {
-  const { dialogManager } = useDialogManager();
-  const dialogIsOpen = useDialogIsOpen(dialogId);
   const [portalDestination, setPortalDestination] = (0, import_react7.useState)(null);
   (0, import_react7.useLayoutEffect)(() => {
-    const destination = document.querySelector(
-      `div[data-str-chat__portal-id="${dialogManager.id}"]`
-    );
-    if (!destination) return;
+    const destination = getPortalDestination();
+    if (!destination || !isOpen) return;
     setPortalDestination(destination);
-  }, [dialogManager, dialogIsOpen]);
+  }, [getPortalDestination, isOpen]);
   if (!portalDestination) return null;
   return (0, import_react_dom.createPortal)(children, portalDestination);
 };
 
+// src/components/Dialog/DialogPortal.tsx
+var DialogPortalEntry = ({
+  children,
+  dialogId
+}) => {
+  const { dialogManager } = useDialogManager();
+  const dialogIsOpen = useDialogIsOpen(dialogId);
+  const getPortalDestination = (0, import_react8.useCallback)(
+    () => document.querySelector(`div[data-str-chat__portal-id="${dialogManager.id}"]`),
+    [dialogManager.id]
+  );
+  return /* @__PURE__ */ import_react8.default.createElement(Portal, { getPortalDestination, isOpen: dialogIsOpen }, children);
+};
+
 // src/context/DialogManagerContext.tsx
-var DialogManagerProviderContext = import_react8.default.createContext(void 0);
+var DialogManagerProviderContext = import_react9.default.createContext(void 0);
 var useDialogManager = () => {
-  const value = (0, import_react8.useContext)(DialogManagerProviderContext);
+  const value = (0, import_react9.useContext)(DialogManagerProviderContext);
   return value;
 };
 
 // src/context/MessageContext.tsx
-var import_react9 = __toESM(require("react"));
-var MessageContext = import_react9.default.createContext(void 0);
+var import_react10 = __toESM(require("react"));
+var MessageContext = import_react10.default.createContext(void 0);
 var useMessageContext = (_componentName) => {
-  const contextValue = (0, import_react9.useContext)(MessageContext);
+  const contextValue = (0, import_react10.useContext)(MessageContext);
   if (!contextValue) {
     return {};
   }
@@ -176,7 +188,7 @@ var useMessageContext = (_componentName) => {
 };
 
 // src/context/TranslationContext.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_dayjs2 = __toESM(require("dayjs"));
 var import_calendar = __toESM(require("dayjs/plugin/calendar"));
 var import_localizedFormat = __toESM(require("dayjs/plugin/localizedFormat"));
@@ -189,13 +201,13 @@ var defaultDateTimeParser = (input) => (0, import_dayjs.default)(input);
 // src/context/TranslationContext.tsx
 import_dayjs2.default.extend(import_calendar.default);
 import_dayjs2.default.extend(import_localizedFormat.default);
-var TranslationContext = import_react10.default.createContext({
+var TranslationContext = import_react11.default.createContext({
   t: defaultTranslatorFunction,
   tDateTimeParser: defaultDateTimeParser,
   userLanguage: "en"
 });
 var useTranslationContext = (componentName) => {
-  const contextValue = (0, import_react10.useContext)(TranslationContext);
+  const contextValue = (0, import_react11.useContext)(TranslationContext);
   if (!contextValue) {
     console.warn(
       `The useTranslationContext hook was called outside of the TranslationContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the ${componentName} component.`
@@ -207,12 +219,12 @@ var useTranslationContext = (componentName) => {
 
 // src/components/Avatar/Avatar.tsx
 var import_clsx = __toESM(require("clsx"));
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 
 // src/components/Threads/icons.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var Icon = {
-  MessageBubble: (props) => /* @__PURE__ */ import_react11.default.createElement(
+  MessageBubble: (props) => /* @__PURE__ */ import_react12.default.createElement(
     "svg",
     {
       className: "str-chat__icon str-chat__icon--message-bubble",
@@ -223,7 +235,7 @@ var Icon = {
       xmlns: "http://www.w3.org/2000/svg",
       ...props
     },
-    /* @__PURE__ */ import_react11.default.createElement(
+    /* @__PURE__ */ import_react12.default.createElement(
       "path",
       {
         d: "M1.66659 1.66665H12.3333V9.66665H2.44659L1.66659 10.4466V1.66665ZM1.66659 0.333313C0.933252 0.333313 0.339919 0.933313 0.339919 1.66665L0.333252 13.6666L2.99992 11H12.3333C13.0666 11 13.6666 10.4 13.6666 9.66665V1.66665C13.6666 0.933313 13.0666 0.333313 12.3333 0.333313H1.66659ZM2.99992 6.99998H10.9999V8.33331H2.99992V6.99998ZM2.99992 4.99998H10.9999V6.33331H2.99992V4.99998ZM2.99992 2.99998H10.9999V4.33331H2.99992V2.99998Z",
@@ -231,7 +243,7 @@ var Icon = {
       }
     )
   ),
-  MessageBubbleEmpty: (props) => /* @__PURE__ */ import_react11.default.createElement(
+  MessageBubbleEmpty: (props) => /* @__PURE__ */ import_react12.default.createElement(
     "svg",
     {
       className: "str-chat__icon str-chat__icon--message-bubble-empty",
@@ -242,7 +254,7 @@ var Icon = {
       xmlns: "http://www.w3.org/2000/svg",
       ...props
     },
-    /* @__PURE__ */ import_react11.default.createElement(
+    /* @__PURE__ */ import_react12.default.createElement(
       "path",
       {
         d: "M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H4L2 16V2H18V14Z",
@@ -250,7 +262,7 @@ var Icon = {
       }
     )
   ),
-  Reload: (props) => /* @__PURE__ */ import_react11.default.createElement(
+  Reload: (props) => /* @__PURE__ */ import_react12.default.createElement(
     "svg",
     {
       className: "str-chat__icon str-chat__icon--reload",
@@ -261,7 +273,7 @@ var Icon = {
       xmlns: "http://www.w3.org/2000/svg",
       ...props
     },
-    /* @__PURE__ */ import_react11.default.createElement(
+    /* @__PURE__ */ import_react12.default.createElement(
       "path",
       {
         d: "M8 3V0L4 4L8 8V5C11.31 5 14 7.69 14 11C14 12.01 13.75 12.97 13.3 13.8L14.76 15.26C15.54 14.03 16 12.57 16 11C16 6.58 12.42 3 8 3ZM8 17C4.69 17 2 14.31 2 11C2 9.99 2.25 9.03 2.7 8.2L1.24 6.74C0.46 7.97 0 9.43 0 11C0 15.42 3.58 19 8 19V22L12 18L8 14V17Z",
@@ -269,7 +281,7 @@ var Icon = {
       }
     )
   ),
-  User: (props) => /* @__PURE__ */ import_react11.default.createElement(
+  User: (props) => /* @__PURE__ */ import_react12.default.createElement(
     "svg",
     {
       className: "str-chat__icon str-chat__icon--user",
@@ -280,7 +292,7 @@ var Icon = {
       xmlns: "http://www.w3.org/2000/svg",
       ...props
     },
-    /* @__PURE__ */ import_react11.default.createElement(
+    /* @__PURE__ */ import_react12.default.createElement(
       "path",
       {
         d: "M8 2C9.1 2 10 2.9 10 4C10 5.1 9.1 6 8 6C6.9 6 6 5.1 6 4C6 2.9 6.9 2 8 2ZM8 12C10.7 12 13.8 13.29 14 14H2C2.23 13.28 5.31 12 8 12ZM8 0C5.79 0 4 1.79 4 4C4 6.21 5.79 8 8 8C10.21 8 12 6.21 12 4C12 1.79 10.21 0 8 0ZM8 10C5.33 10 0 11.34 0 14V16H16V14C16 11.34 10.67 10 8 10Z",
@@ -324,14 +336,14 @@ var Avatar = (props) => {
     onClick = () => void 0,
     onMouseOver = () => void 0
   } = props;
-  const [error, setError] = (0, import_react12.useState)(false);
-  (0, import_react12.useEffect)(() => {
+  const [error, setError] = (0, import_react13.useState)(false);
+  (0, import_react13.useEffect)(() => {
     setError(false);
   }, [image]);
   const nameStr = name?.toString() || "";
   const initials = getWholeChar(nameStr, 0);
   const showImage = image && !error;
-  return /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement(
     "div",
     {
       className: (0, import_clsx.default)(`str-chat__avatar str-chat__message-sender-avatar`, className, {
@@ -345,7 +357,7 @@ var Avatar = (props) => {
       role: "button",
       title: name
     },
-    showImage ? /* @__PURE__ */ import_react12.default.createElement(
+    showImage ? /* @__PURE__ */ import_react13.default.createElement(
       "img",
       {
         alt: initials,
@@ -354,7 +366,7 @@ var Avatar = (props) => {
         onError: () => setError(true),
         src: image
       }
-    ) : /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, !!initials.length && /* @__PURE__ */ import_react12.default.createElement("div", { className: (0, import_clsx.default)("str-chat__avatar-fallback"), "data-testid": "avatar-fallback" }, initials), !initials.length && /* @__PURE__ */ import_react12.default.createElement(Icon.User, null))
+    ) : /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, !!initials.length && /* @__PURE__ */ import_react13.default.createElement("div", { className: (0, import_clsx.default)("str-chat__avatar-fallback"), "data-testid": "avatar-fallback" }, initials), !initials.length && /* @__PURE__ */ import_react13.default.createElement(Icon.User, null))
   );
 };
 
@@ -393,7 +405,7 @@ var useUserRole = (message, onlySenderCanEdit, disableQuotedMessages) => {
   const isOwner = channel.state.membership.role === "owner";
   const isModerator = client.user?.role === "channel_moderator" || channel.state.membership.role === "channel_moderator" || channel.state.membership.role === "moderator" || channel.state.membership.is_moderator === true || channel.state.membership.channel_role === "channel_moderator";
   const isMyMessage = client.userID === message.user?.id;
-  const canEdit = !onlySenderCanEdit && channelCapabilities["update-any-message"] || isMyMessage && channelCapabilities["update-own-message"];
+  const canEdit = !message.poll && (!onlySenderCanEdit && channelCapabilities["update-any-message"] || isMyMessage && channelCapabilities["update-own-message"]);
   const canDelete = channelCapabilities["delete-any-message"] || isMyMessage && channelCapabilities["delete-own-message"];
   const canFlag = !isMyMessage && channelCapabilities["flag-message"];
   const canMarkUnread = channelCapabilities["read-events"];
@@ -418,8 +430,8 @@ var useUserRole = (message, onlySenderCanEdit, disableQuotedMessages) => {
 };
 
 // src/components/Message/icons.tsx
-var import_react13 = __toESM(require("react"));
-var ActionsIcon = ({ className = "" }) => /* @__PURE__ */ import_react13.default.createElement(
+var import_react14 = __toESM(require("react"));
+var ActionsIcon = ({ className = "" }) => /* @__PURE__ */ import_react14.default.createElement(
   "svg",
   {
     className,
@@ -428,7 +440,7 @@ var ActionsIcon = ({ className = "" }) => /* @__PURE__ */ import_react13.default
     width: "11",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ import_react13.default.createElement(
+  /* @__PURE__ */ import_react14.default.createElement(
     "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",
@@ -436,7 +448,7 @@ var ActionsIcon = ({ className = "" }) => /* @__PURE__ */ import_react13.default
     }
   )
 );
-var ReactionIcon = ({ className = "" }) => /* @__PURE__ */ import_react13.default.createElement(
+var ReactionIcon = ({ className = "" }) => /* @__PURE__ */ import_react14.default.createElement(
   "svg",
   {
     className,
@@ -445,9 +457,9 @@ var ReactionIcon = ({ className = "" }) => /* @__PURE__ */ import_react13.defaul
     width: "12",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ import_react13.default.createElement("g", { clipRule: "evenodd", fillRule: "evenodd" }, /* @__PURE__ */ import_react13.default.createElement("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__ */ import_react13.default.createElement("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" }))
+  /* @__PURE__ */ import_react14.default.createElement("g", { clipRule: "evenodd", fillRule: "evenodd" }, /* @__PURE__ */ import_react14.default.createElement("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__ */ import_react14.default.createElement("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" }))
 );
-var ThreadIcon = ({ className = "" }) => /* @__PURE__ */ import_react13.default.createElement("svg", { className, height: "10", width: "14", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react13.default.createElement(
+var ThreadIcon = ({ className = "" }) => /* @__PURE__ */ import_react14.default.createElement("svg", { className, height: "10", width: "14", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react14.default.createElement(
   "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",
@@ -457,11 +469,11 @@ var ThreadIcon = ({ className = "" }) => /* @__PURE__ */ import_react13.default.
 
 // src/components/MessageActions/MessageActions.tsx
 var import_clsx3 = __toESM(require("clsx"));
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 
 // src/components/Dialog/DialogAnchor.tsx
 var import_clsx2 = __toESM(require("clsx"));
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_focus = require("@react-aria/focus");
 var import_react_popper = require("react-popper");
 function useDialogAnchor({
@@ -469,7 +481,7 @@ function useDialogAnchor({
   placement,
   referenceElement
 }) {
-  const [popperElement, setPopperElement] = (0, import_react14.useState)(null);
+  const [popperElement, setPopperElement] = (0, import_react15.useState)(null);
   const { attributes, styles, update } = (0, import_react_popper.usePopper)(referenceElement, popperElement, {
     modifiers: [
       {
@@ -484,7 +496,7 @@ function useDialogAnchor({
     ],
     placement
   });
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (open && popperElement) {
       update?.();
     }
@@ -515,7 +527,7 @@ var DialogAnchor = ({
     placement,
     referenceElement
   });
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!open) return;
     const hideOnEscape = (event) => {
       if (event.key !== "Escape") return;
@@ -529,7 +541,7 @@ var DialogAnchor = ({
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ import_react14.default.createElement(DialogPortalEntry, { dialogId: id }, /* @__PURE__ */ import_react14.default.createElement(import_focus.FocusScope, { autoFocus: focus, contain: trapFocus, restoreFocus: true }, /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react15.default.createElement(DialogPortalEntry, { dialogId: id }, /* @__PURE__ */ import_react15.default.createElement(import_focus.FocusScope, { autoFocus: focus, contain: trapFocus, restoreFocus: true }, /* @__PURE__ */ import_react15.default.createElement(
     "div",
     {
       ...restDivProps,
@@ -557,25 +569,25 @@ var MessageActionsWrapper = (props) => {
     "data-testid": "message-actions",
     onClick: toggleOpen
   };
-  if (inline) return /* @__PURE__ */ import_react15.default.createElement("span", { ...wrapperProps }, children);
-  return /* @__PURE__ */ import_react15.default.createElement("div", { ...wrapperProps }, children);
+  if (inline) return /* @__PURE__ */ import_react16.default.createElement("span", { ...wrapperProps }, children);
+  return /* @__PURE__ */ import_react16.default.createElement("div", { ...wrapperProps }, children);
 };
 
 // src/components/Reactions/ReactionSelectorWithButton.tsx
-var import_react20 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 
 // src/components/Reactions/ReactionSelector.tsx
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var import_clsx4 = __toESM(require("clsx"));
 
 // src/components/Reactions/reactionOptions.tsx
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 
 // src/components/Reactions/StreamEmoji.tsx
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 
 // src/components/Reactions/SpriteImage.tsx
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 
 // src/components/Reactions/utils/utils.ts
 var isMutableRef = (ref) => {
@@ -610,13 +622,13 @@ var SpriteImage = ({
   style,
   width
 }) => {
-  const [[spriteWidth, spriteHeight], setSpriteDimensions] = (0, import_react16.useState)([0, 0]);
-  (0, import_react16.useEffect)(() => {
+  const [[spriteWidth, spriteHeight], setSpriteDimensions] = (0, import_react17.useState)([0, 0]);
+  (0, import_react17.useEffect)(() => {
     getImageDimensions(spriteUrl).then(setSpriteDimensions).catch(console.error);
   }, [spriteUrl]);
   const [x, y] = position;
-  if (!spriteHeight || !spriteWidth) return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, fallback);
-  return /* @__PURE__ */ import_react16.default.createElement(
+  if (!spriteHeight || !spriteWidth) return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, fallback);
+  return /* @__PURE__ */ import_react17.default.createElement(
     "div",
     {
       "data-testid": "sprite-image",
@@ -654,7 +666,7 @@ var StreamEmoji = ({
   type
 }) => {
   const position = StreamSpriteEmojiPositions[type];
-  return /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(
     SpriteImage,
     {
       columns: 2,
@@ -671,11 +683,11 @@ var StreamEmoji = ({
 
 // src/components/Reactions/reactionOptions.tsx
 var defaultReactionOptions = [
-  { type: "haha", Component: () => /* @__PURE__ */ import_react18.default.createElement(StreamEmoji, { fallback: "\u{1F602}", type: "haha" }), name: "Joy" },
-  { type: "like", Component: () => /* @__PURE__ */ import_react18.default.createElement(StreamEmoji, { fallback: "\u{1F44D}", type: "like" }), name: "Thumbs up" },
-  { type: "love", Component: () => /* @__PURE__ */ import_react18.default.createElement(StreamEmoji, { fallback: "\u2764\uFE0F", type: "love" }), name: "Heart" },
-  { type: "sad", Component: () => /* @__PURE__ */ import_react18.default.createElement(StreamEmoji, { fallback: "\u{1F614}", type: "sad" }), name: "Sad" },
-  { type: "wow", Component: () => /* @__PURE__ */ import_react18.default.createElement(StreamEmoji, { fallback: "\u{1F632}", type: "wow" }), name: "Astonished" }
+  { type: "haha", Component: () => /* @__PURE__ */ import_react19.default.createElement(StreamEmoji, { fallback: "\u{1F602}", type: "haha" }), name: "Joy" },
+  { type: "like", Component: () => /* @__PURE__ */ import_react19.default.createElement(StreamEmoji, { fallback: "\u{1F44D}", type: "like" }), name: "Thumbs up" },
+  { type: "love", Component: () => /* @__PURE__ */ import_react19.default.createElement(StreamEmoji, { fallback: "\u2764\uFE0F", type: "love" }), name: "Heart" },
+  { type: "sad", Component: () => /* @__PURE__ */ import_react19.default.createElement(StreamEmoji, { fallback: "\u{1F614}", type: "sad" }), name: "Sad" },
+  { type: "wow", Component: () => /* @__PURE__ */ import_react19.default.createElement(StreamEmoji, { fallback: "\u{1F632}", type: "wow" }), name: "Astonished" }
 ];
 
 // src/components/Reactions/ReactionSelector.tsx
@@ -707,23 +719,23 @@ var UnMemoizedReactionSelector = (props) => {
   const latestReactions = propLatestReactions || message?.latest_reactions || [];
   const ownReactions = propOwnReactions || message?.own_reactions || [];
   const reactionGroups = propReactionGroups || message?.reaction_groups || {};
-  const [tooltipReactionType, setTooltipReactionType] = (0, import_react19.useState)(null);
-  const [tooltipPositions, setTooltipPositions] = (0, import_react19.useState)(null);
-  const rootRef = (0, import_react19.useRef)(null);
-  const targetRef = (0, import_react19.useRef)(null);
-  const tooltipRef = (0, import_react19.useRef)(null);
-  const showTooltip = (0, import_react19.useCallback)(
+  const [tooltipReactionType, setTooltipReactionType] = (0, import_react20.useState)(null);
+  const [tooltipPositions, setTooltipPositions] = (0, import_react20.useState)(null);
+  const rootRef = (0, import_react20.useRef)(null);
+  const targetRef = (0, import_react20.useRef)(null);
+  const tooltipRef = (0, import_react20.useRef)(null);
+  const showTooltip = (0, import_react20.useCallback)(
     (event, reactionType) => {
       targetRef.current = event.currentTarget;
       setTooltipReactionType(reactionType);
     },
     []
   );
-  const hideTooltip = (0, import_react19.useCallback)(() => {
+  const hideTooltip = (0, import_react20.useCallback)(() => {
     setTooltipReactionType(null);
     setTooltipPositions(null);
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!tooltipReactionType || !rootRef.current) return;
     const tooltip = tooltipRef.current?.getBoundingClientRect();
     const target = targetRef.current?.getBoundingClientRect();
@@ -744,7 +756,7 @@ var UnMemoizedReactionSelector = (props) => {
   }).filter(Boolean);
   const iHaveReactedWithReaction = (reactionType) => ownReactions.find((reaction) => reaction.type === reactionType);
   const getLatestUserForReactionType = (type) => latestReactions.find((reaction) => reaction.type === type && !!reaction.user)?.user || void 0;
-  return /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement(
     "div",
     {
       className: (0, import_clsx4.default)(
@@ -756,7 +768,7 @@ var UnMemoizedReactionSelector = (props) => {
       "data-testid": "reaction-selector",
       ref: rootRef
     },
-    !!tooltipReactionType && detailedView && /* @__PURE__ */ import_react19.default.createElement(
+    !!tooltipReactionType && detailedView && /* @__PURE__ */ import_react20.default.createElement(
       "div",
       {
         className: "str-chat__reaction-selector-tooltip",
@@ -766,13 +778,13 @@ var UnMemoizedReactionSelector = (props) => {
           visibility: tooltipPositions ? "visible" : "hidden"
         }
       },
-      /* @__PURE__ */ import_react19.default.createElement("div", { className: "arrow", style: { left: tooltipPositions?.arrow } }),
-      getUsersPerReactionType(tooltipReactionType)?.map((user, i, users) => /* @__PURE__ */ import_react19.default.createElement("span", { className: "latest-user-username", key: `key-${i}-${user}` }, `${user}${i < users.length - 1 ? ", " : ""}`))
+      /* @__PURE__ */ import_react20.default.createElement("div", { className: "arrow", style: { left: tooltipPositions?.arrow } }),
+      getUsersPerReactionType(tooltipReactionType)?.map((user, i, users) => /* @__PURE__ */ import_react20.default.createElement("span", { className: "latest-user-username", key: `key-${i}-${user}` }, `${user}${i < users.length - 1 ? ", " : ""}`))
     ),
-    /* @__PURE__ */ import_react19.default.createElement("ul", { className: "str-chat__message-reactions-list str-chat__message-reactions-options" }, reactionOptions.map(({ Component, name: reactionName, type: reactionType }) => {
+    /* @__PURE__ */ import_react20.default.createElement("ul", { className: "str-chat__message-reactions-list str-chat__message-reactions-options" }, reactionOptions.map(({ Component, name: reactionName, type: reactionType }) => {
       const latestUser = getLatestUserForReactionType(reactionType);
       const count = reactionGroups[reactionType]?.count ?? 0;
-      return /* @__PURE__ */ import_react19.default.createElement("li", { key: reactionType }, /* @__PURE__ */ import_react19.default.createElement(
+      return /* @__PURE__ */ import_react20.default.createElement("li", { key: reactionType }, /* @__PURE__ */ import_react20.default.createElement(
         "button",
         {
           "aria-label": `Select Reaction: ${reactionName || reactionType}`,
@@ -793,7 +805,7 @@ var UnMemoizedReactionSelector = (props) => {
             }
           }
         },
-        !!count && detailedView && /* @__PURE__ */ import_react19.default.createElement(
+        !!count && detailedView && /* @__PURE__ */ import_react20.default.createElement(
           "div",
           {
             className: "latest-user str-chat__message-reactions-last-user",
@@ -801,7 +813,7 @@ var UnMemoizedReactionSelector = (props) => {
             onMouseEnter: (e) => showTooltip(e, reactionType),
             onMouseLeave: hideTooltip
           },
-          latestUser ? /* @__PURE__ */ import_react19.default.createElement(
+          latestUser ? /* @__PURE__ */ import_react20.default.createElement(
             Avatar2,
             {
               image: latestUser.image,
@@ -809,15 +821,15 @@ var UnMemoizedReactionSelector = (props) => {
               size: 20,
               user: latestUser
             }
-          ) : /* @__PURE__ */ import_react19.default.createElement("div", { className: "latest-user-not-found" })
+          ) : /* @__PURE__ */ import_react20.default.createElement("div", { className: "latest-user-not-found" })
         ),
-        /* @__PURE__ */ import_react19.default.createElement("span", { className: "str-chat__message-reaction-emoji" }, /* @__PURE__ */ import_react19.default.createElement(Component, null)),
-        Boolean(count) && detailedView && /* @__PURE__ */ import_react19.default.createElement("span", { className: "str-chat__message-reactions-list-item__count" }, count || "")
+        /* @__PURE__ */ import_react20.default.createElement("span", { className: "str-chat__message-reaction-emoji" }, /* @__PURE__ */ import_react20.default.createElement(Component, null)),
+        Boolean(count) && detailedView && /* @__PURE__ */ import_react20.default.createElement("span", { className: "str-chat__message-reactions-list-item__count" }, count || "")
       ));
     }))
   );
 };
-var ReactionSelector = import_react19.default.memo(
+var ReactionSelector = import_react20.default.memo(
   UnMemoizedReactionSelector
 );
 
@@ -828,11 +840,11 @@ var ReactionSelectorWithButton = ({
   const { t } = useTranslationContext("ReactionSelectorWithButton");
   const { isMyMessage, message } = useMessageContext("MessageOptions");
   const { ReactionSelector: ReactionSelector2 = ReactionSelector } = useComponentContext("MessageOptions");
-  const buttonRef = (0, import_react20.useRef)(null);
+  const buttonRef = (0, import_react21.useRef)(null);
   const dialogId = `reaction-selector--${message.id}`;
   const dialog = useDialog({ id: dialogId });
   const dialogIsOpen = useDialogIsOpen(dialogId);
-  return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(
     DialogAnchor,
     {
       id: dialogId,
@@ -840,8 +852,8 @@ var ReactionSelectorWithButton = ({
       referenceElement: buttonRef.current,
       trapFocus: true
     },
-    /* @__PURE__ */ import_react20.default.createElement(ReactionSelector2, null)
-  ), /* @__PURE__ */ import_react20.default.createElement(
+    /* @__PURE__ */ import_react21.default.createElement(ReactionSelector2, null)
+  ), /* @__PURE__ */ import_react21.default.createElement(
     "button",
     {
       "aria-expanded": dialogIsOpen,
@@ -851,12 +863,12 @@ var ReactionSelectorWithButton = ({
       onClick: () => dialog?.toggle(),
       ref: buttonRef
     },
-    /* @__PURE__ */ import_react20.default.createElement(ReactionIcon2, { className: "str-chat__message-action-icon" })
+    /* @__PURE__ */ import_react21.default.createElement(ReactionIcon2, { className: "str-chat__message-action-icon" })
   ));
 };
 
 // src/experimental/MessageActions/hooks/useBaseMessageActionSetFilter.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 var useBaseMessageActionSetFilter = (messageActionSet, disable = false) => {
   const { initialMessage: isInitialMessage, message } = useMessageContext();
   const {
@@ -870,7 +882,7 @@ var useBaseMessageActionSetFilter = (messageActionSet, disable = false) => {
     canReply
   } = useUserRole(message);
   const isMessageThreadReply = typeof message.parent_id === "string";
-  return (0, import_react21.useMemo)(() => {
+  return (0, import_react22.useMemo)(() => {
     if (disable) return messageActionSet;
     if (isInitialMessage || // not sure whether this thing even works anymore
     !message.type || message.type === "error" || message.type === "system" || message.type === "ephemeral" || message.status === "failed" || message.status === "sending")
@@ -900,8 +912,8 @@ var useBaseMessageActionSetFilter = (messageActionSet, disable = false) => {
 };
 
 // src/experimental/MessageActions/hooks/useSplitMessageActionSet.ts
-var import_react22 = require("react");
-var useSplitMessageActionSet = (messageActionSet) => (0, import_react22.useMemo)(() => {
+var import_react23 = require("react");
+var useSplitMessageActionSet = (messageActionSet) => (0, import_react23.useMemo)(() => {
   const quickActionSet = [];
   const dropdownActionSet = [];
   for (const action of messageActionSet) {
@@ -912,14 +924,14 @@ var useSplitMessageActionSet = (messageActionSet) => (0, import_react22.useMemo)
 }, [messageActionSet]);
 
 // src/experimental/MessageActions/defaults.tsx
-var import_react23 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var DefaultDropdownActionButton = ({
   "aria-selected": ariaSelected = "false",
   children,
   className = "str-chat__message-actions-list-item-button",
   role = "option",
   ...rest
-}) => /* @__PURE__ */ import_react23.default.createElement("button", { "aria-selected": ariaSelected, className, role, ...rest }, children);
+}) => /* @__PURE__ */ import_react24.default.createElement("button", { "aria-selected": ariaSelected, className, role, ...rest }, children);
 var DefaultMessageActionComponents = {
   dropdown: {
     Quote() {
@@ -934,48 +946,48 @@ var DefaultMessageActionComponents = {
           textarea.focus();
         }
       };
-      return /* @__PURE__ */ import_react23.default.createElement(DefaultDropdownActionButton, { onClick: handleQuote }, t("Quote"));
+      return /* @__PURE__ */ import_react24.default.createElement(DefaultDropdownActionButton, { onClick: handleQuote }, t("Quote"));
     },
     Pin() {
       const { handlePin, message } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react23.default.createElement(DefaultDropdownActionButton, { onClick: handlePin }, !message.pinned ? t("Pin") : t("Unpin"));
+      return /* @__PURE__ */ import_react24.default.createElement(DefaultDropdownActionButton, { onClick: handlePin }, !message.pinned ? t("Pin") : t("Unpin"));
     },
     MarkUnread() {
       const { handleMarkUnread } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react23.default.createElement(DefaultDropdownActionButton, { onClick: handleMarkUnread }, t("Mark as unread"));
+      return /* @__PURE__ */ import_react24.default.createElement(DefaultDropdownActionButton, { onClick: handleMarkUnread }, t("Mark as unread"));
     },
     Flag() {
       const { handleFlag } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react23.default.createElement(DefaultDropdownActionButton, { onClick: handleFlag }, t("Flag"));
+      return /* @__PURE__ */ import_react24.default.createElement(DefaultDropdownActionButton, { onClick: handleFlag }, t("Flag"));
     },
     Mute() {
       const { handleMute, message } = useMessageContext();
       const { mutes } = useChatContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react23.default.createElement(DefaultDropdownActionButton, { onClick: handleMute }, isUserMuted(message, mutes) ? t("Unmute") : t("Mute"));
+      return /* @__PURE__ */ import_react24.default.createElement(DefaultDropdownActionButton, { onClick: handleMute }, isUserMuted(message, mutes) ? t("Unmute") : t("Mute"));
     },
     Edit() {
       const { handleEdit } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react23.default.createElement(DefaultDropdownActionButton, { onClick: handleEdit }, t("Edit Message"));
+      return /* @__PURE__ */ import_react24.default.createElement(DefaultDropdownActionButton, { onClick: handleEdit }, t("Edit Message"));
     },
     Delete() {
       const { handleDelete } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react23.default.createElement(DefaultDropdownActionButton, { onClick: handleDelete }, t("Delete"));
+      return /* @__PURE__ */ import_react24.default.createElement(DefaultDropdownActionButton, { onClick: handleDelete }, t("Delete"));
     }
   },
   quick: {
     React() {
-      return /* @__PURE__ */ import_react23.default.createElement(ReactionSelectorWithButton, { ReactionIcon });
+      return /* @__PURE__ */ import_react24.default.createElement(ReactionSelectorWithButton, { ReactionIcon });
     },
     Reply() {
       const { handleOpenThread } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react23.default.createElement(
+      return /* @__PURE__ */ import_react24.default.createElement(
         "button",
         {
           "aria-label": t("aria/Open Thread"),
@@ -983,7 +995,7 @@ var DefaultMessageActionComponents = {
           "data-testid": "thread-action",
           onClick: handleOpenThread
         },
-        /* @__PURE__ */ import_react23.default.createElement(ThreadIcon, { className: "str-chat__message-action-icon" })
+        /* @__PURE__ */ import_react24.default.createElement(ThreadIcon, { className: "str-chat__message-action-icon" })
       );
     }
   }
@@ -1021,7 +1033,7 @@ var MessageActions = ({
   const { theme } = useChatContext();
   const { isMyMessage, message } = useMessageContext();
   const { t } = useTranslationContext();
-  const [actionsBoxButtonElement, setActionsBoxButtonElement] = (0, import_react24.useState)(
+  const [actionsBoxButtonElement, setActionsBoxButtonElement] = (0, import_react25.useState)(
     null
   );
   const filteredMessageActionSet = useBaseMessageActionSetFilter(
@@ -1037,14 +1049,14 @@ var MessageActions = ({
   if (dropdownActionSet.length + quickActionSet.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ import_react24.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement(
     "div",
     {
       className: (0, import_clsx5.default)(`str-chat__message-${theme}__actions str-chat__message-options`, {
         "str-chat__message-options--active": dropdownDialogIsOpen || reactionSelectorDialogIsOpen
       })
     },
-    dropdownActionSet.length > 0 && /* @__PURE__ */ import_react24.default.createElement(MessageActionsWrapper, { inline: false, toggleOpen: dialog?.toggle }, /* @__PURE__ */ import_react24.default.createElement(
+    dropdownActionSet.length > 0 && /* @__PURE__ */ import_react25.default.createElement(MessageActionsWrapper, { inline: false, toggleOpen: dialog?.toggle }, /* @__PURE__ */ import_react25.default.createElement(
       "button",
       {
         "aria-expanded": dropdownDialogIsOpen,
@@ -1054,8 +1066,8 @@ var MessageActions = ({
         "data-testid": "message-actions-toggle-button",
         ref: setActionsBoxButtonElement
       },
-      /* @__PURE__ */ import_react24.default.createElement(ActionsIcon, { className: "str-chat__message-action-icon" })
-    ), /* @__PURE__ */ import_react24.default.createElement(
+      /* @__PURE__ */ import_react25.default.createElement(ActionsIcon, { className: "str-chat__message-action-icon" })
+    ), /* @__PURE__ */ import_react25.default.createElement(
       DialogAnchor,
       {
         id: dropdownDialogId,
@@ -1063,21 +1075,21 @@ var MessageActions = ({
         referenceElement: actionsBoxButtonElement,
         trapFocus: true
       },
-      /* @__PURE__ */ import_react24.default.createElement(DropdownBox, { open: dropdownDialogIsOpen }, dropdownActionSet.map(({ Component: DropdownActionComponent, type }) => /* @__PURE__ */ import_react24.default.createElement(DropdownActionComponent, { key: type })))
+      /* @__PURE__ */ import_react25.default.createElement(DropdownBox, { open: dropdownDialogIsOpen }, dropdownActionSet.map(({ Component: DropdownActionComponent, type }) => /* @__PURE__ */ import_react25.default.createElement(DropdownActionComponent, { key: type })))
     )),
-    quickActionSet.map(({ Component: QuickActionComponent, type }) => /* @__PURE__ */ import_react24.default.createElement(QuickActionComponent, { key: type }))
+    quickActionSet.map(({ Component: QuickActionComponent, type }) => /* @__PURE__ */ import_react25.default.createElement(QuickActionComponent, { key: type }))
   );
 };
 var DropdownBox = ({ children, open }) => {
   const { t } = useTranslationContext();
-  return /* @__PURE__ */ import_react24.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement(
     "div",
     {
       className: (0, import_clsx5.default)("str-chat__message-actions-box", {
         "str-chat__message-actions-box--open": open
       })
     },
-    /* @__PURE__ */ import_react24.default.createElement(
+    /* @__PURE__ */ import_react25.default.createElement(
       "div",
       {
         "aria-label": t("aria/Message Options"),