stream-chat-react 12.3.0 → 12.4.0

package/dist/experimental/index.browser.cjs

@@ -0,0 +1,1091 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/experimental/index.ts
+var experimental_exports = {};
+__export(experimental_exports, {
+  DefaultDropdownActionButton: () => DefaultDropdownActionButton,
+  MessageActions: () => MessageActions,
+  defaultMessageActionSet: () => defaultMessageActionSet,
+  useBaseMessageActionSetFilter: () => useBaseMessageActionSetFilter,
+  useSplitMessageActionSet: () => useSplitMessageActionSet
+});
+module.exports = __toCommonJS(experimental_exports);
+
+// src/experimental/MessageActions/MessageActions.tsx
+var import_clsx5 = __toESM(require("clsx"));
+var import_react24 = __toESM(require("react"));
+
+// src/context/ChannelActionContext.tsx
+var import_react = __toESM(require("react"));
+var ChannelActionContext = import_react.default.createContext(
+  void 0
+);
+var useChannelActionContext = (componentName) => {
+  const contextValue = (0, import_react.useContext)(ChannelActionContext);
+  if (!contextValue) {
+    console.warn(
+      `The useChannelActionContext hook was called outside of the ChannelActionContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the ${componentName} component.`
+    );
+    return {};
+  }
+  return contextValue;
+};
+
+// src/context/ChannelStateContext.tsx
+var import_react2 = __toESM(require("react"));
+var ChannelStateContext = import_react2.default.createContext(
+  void 0
+);
+var useChannelStateContext = (componentName) => {
+  const contextValue = (0, import_react2.useContext)(ChannelStateContext);
+  if (!contextValue) {
+    console.warn(
+      `The useChannelStateContext hook was called outside of the ChannelStateContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the ${componentName} component.`
+    );
+    return {};
+  }
+  return contextValue;
+};
+
+// src/context/ChatContext.tsx
+var import_react3 = __toESM(require("react"));
+var ChatContext = import_react3.default.createContext(void 0);
+var useChatContext = (componentName) => {
+  const contextValue = (0, import_react3.useContext)(ChatContext);
+  if (!contextValue) {
+    console.warn(
+      `The useChatContext hook was called outside of the ChatContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the ${componentName} component.`
+    );
+    return {};
+  }
+  return contextValue;
+};
+
+// src/context/ComponentContext.tsx
+var import_react4 = __toESM(require("react"));
+var ComponentContext = import_react4.default.createContext({});
+var useComponentContext = (_componentName) => (0, import_react4.useContext)(ComponentContext);
+
+// src/context/DialogManagerContext.tsx
+var import_react8 = __toESM(require("react"));
+
+// src/components/Dialog/DialogPortal.tsx
+var import_react7 = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+
+// src/components/Dialog/hooks/useDialog.ts
+var import_react6 = require("react");
+
+// src/store/hooks/useStateStore.ts
+var import_react5 = require("react");
+function useStateStore(store, selector) {
+  const [state, setState] = (0, import_react5.useState)(() => {
+    if (!store) return void 0;
+    return selector(store.getLatestValue());
+  });
+  (0, import_react5.useEffect)(() => {
+    if (!store) return;
+    const unsubscribe = store.subscribeWithSelector(selector, setState);
+    return unsubscribe;
+  }, [store, selector]);
+  return state;
+}
+
+// src/components/Dialog/hooks/useDialog.ts
+var useDialog = ({ id }) => {
+  const { dialogManager } = useDialogManager();
+  (0, import_react6.useEffect)(
+    () => () => {
+      dialogManager.remove(id);
+    },
+    [dialogManager, id]
+  );
+  return dialogManager.getOrCreate({ id });
+};
+var useDialogIsOpen = (id) => {
+  const { dialogManager } = useDialogManager();
+  const dialogIsOpenSelector = (0, import_react6.useCallback)(
+    ({ dialogsById }) => ({ isOpen: !!dialogsById[id]?.isOpen }),
+    [id]
+  );
+  return useStateStore(dialogManager.state, dialogIsOpenSelector).isOpen;
+};
+
+// src/components/Dialog/DialogPortal.tsx
+var DialogPortalEntry = ({
+  children,
+  dialogId
+}) => {
+  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;
+    setPortalDestination(destination);
+  }, [dialogManager, dialogIsOpen]);
+  if (!portalDestination) return null;
+  return (0, import_react_dom.createPortal)(children, portalDestination);
+};
+
+// src/context/DialogManagerContext.tsx
+var DialogManagerProviderContext = import_react8.default.createContext(void 0);
+var useDialogManager = () => {
+  const value = (0, import_react8.useContext)(DialogManagerProviderContext);
+  return value;
+};
+
+// src/context/MessageContext.tsx
+var import_react9 = __toESM(require("react"));
+var MessageContext = import_react9.default.createContext(void 0);
+var useMessageContext = (_componentName) => {
+  const contextValue = (0, import_react9.useContext)(MessageContext);
+  if (!contextValue) {
+    return {};
+  }
+  return contextValue;
+};
+
+// src/context/TranslationContext.tsx
+var import_react10 = __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"));
+
+// src/i18n/utils.ts
+var import_dayjs = __toESM(require("dayjs"));
+var defaultTranslatorFunction = (key) => key;
+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({
+  t: defaultTranslatorFunction,
+  tDateTimeParser: defaultDateTimeParser,
+  userLanguage: "en"
+});
+var useTranslationContext = (componentName) => {
+  const contextValue = (0, import_react10.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.`
+    );
+    return {};
+  }
+  return contextValue;
+};
+
+// src/components/Avatar/Avatar.tsx
+var import_clsx = __toESM(require("clsx"));
+var import_react12 = __toESM(require("react"));
+
+// src/components/Threads/icons.tsx
+var import_react11 = __toESM(require("react"));
+var Icon = {
+  MessageBubble: (props) => /* @__PURE__ */ import_react11.default.createElement(
+    "svg",
+    {
+      className: "str-chat__icon str-chat__icon--message-bubble",
+      fill: "none",
+      height: "14",
+      viewBox: "0 0 14 14",
+      width: "14",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ import_react11.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",
+        fill: "currentColor"
+      }
+    )
+  ),
+  MessageBubbleEmpty: (props) => /* @__PURE__ */ import_react11.default.createElement(
+    "svg",
+    {
+      className: "str-chat__icon str-chat__icon--message-bubble-empty",
+      fill: "none",
+      height: "20",
+      viewBox: "0 0 20 20",
+      width: "20",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ import_react11.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",
+        fill: "currentColor"
+      }
+    )
+  ),
+  Reload: (props) => /* @__PURE__ */ import_react11.default.createElement(
+    "svg",
+    {
+      className: "str-chat__icon str-chat__icon--reload",
+      fill: "none",
+      height: "22",
+      viewBox: "0 0 16 22",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ import_react11.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",
+        fill: "currentColor"
+      }
+    )
+  ),
+  User: (props) => /* @__PURE__ */ import_react11.default.createElement(
+    "svg",
+    {
+      className: "str-chat__icon str-chat__icon--user",
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ import_react11.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",
+        fill: "currentColor"
+      }
+    )
+  )
+};
+
+// src/utils/getWholeChar.ts
+var getWholeChar = (str, i) => {
+  const code = str.charCodeAt(i);
+  if (Number.isNaN(code)) return "";
+  if (code < 55296 || code > 57343) return str.charAt(i);
+  if (55296 <= code && code <= 56319) {
+    if (str.length <= i + 1) {
+      throw "High surrogate without following low surrogate";
+    }
+    const next = str.charCodeAt(i + 1);
+    if (56320 > next || next > 57343) {
+      throw "High surrogate without following low surrogate";
+    }
+    return str.charAt(i) + str.charAt(i + 1);
+  }
+  if (i === 0) {
+    throw "Low surrogate without preceding high surrogate";
+  }
+  const prev = str.charCodeAt(i - 1);
+  if (55296 > prev || prev > 56319) {
+    throw "Low surrogate without preceding high surrogate";
+  }
+  return "";
+};
+
+// src/components/Avatar/Avatar.tsx
+var Avatar = (props) => {
+  const {
+    className,
+    image,
+    name,
+    onClick = () => void 0,
+    onMouseOver = () => void 0
+  } = props;
+  const [error, setError] = (0, import_react12.useState)(false);
+  (0, import_react12.useEffect)(() => {
+    setError(false);
+  }, [image]);
+  const nameStr = name?.toString() || "";
+  const initials = getWholeChar(nameStr, 0);
+  const showImage = image && !error;
+  return /* @__PURE__ */ import_react12.default.createElement(
+    "div",
+    {
+      className: (0, import_clsx.default)(`str-chat__avatar str-chat__message-sender-avatar`, className, {
+        ["str-chat__avatar--multiple-letters"]: initials.length > 1,
+        ["str-chat__avatar--no-letters"]: !initials.length,
+        ["str-chat__avatar--one-letter"]: initials.length === 1
+      }),
+      "data-testid": "avatar",
+      onClick,
+      onMouseOver,
+      role: "button",
+      title: name
+    },
+    showImage ? /* @__PURE__ */ import_react12.default.createElement(
+      "img",
+      {
+        alt: initials,
+        className: "str-chat__avatar-image",
+        "data-testid": "avatar-img",
+        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))
+  );
+};
+
+// src/components/Message/utils.tsx
+var import_react_fast_compare = __toESM(require("react-fast-compare"));
+var import_emoji_regex = __toESM(require("emoji-regex"));
+var isUserMuted = (message, mutes) => {
+  if (!mutes || !message) return false;
+  const userMuted = mutes.filter((el) => el.target.id === message.user?.id);
+  return !!userMuted.length;
+};
+var MESSAGE_ACTIONS = {
+  delete: "delete",
+  edit: "edit",
+  flag: "flag",
+  markUnread: "markUnread",
+  mute: "mute",
+  pin: "pin",
+  quote: "quote",
+  react: "react",
+  reply: "reply"
+};
+var ACTIONS_NOT_WORKING_IN_THREAD = [
+  MESSAGE_ACTIONS.pin,
+  MESSAGE_ACTIONS.reply,
+  MESSAGE_ACTIONS.markUnread
+];
+
+// src/components/Message/hooks/useUserRole.ts
+var useUserRole = (message, onlySenderCanEdit, disableQuotedMessages) => {
+  const { channel, channelCapabilities = {} } = useChannelStateContext(
+    "useUserRole"
+  );
+  const { client } = useChatContext("useUserRole");
+  const isAdmin = client.user?.role === "admin" || channel.state.membership.role === "admin";
+  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 canDelete = channelCapabilities["delete-any-message"] || isMyMessage && channelCapabilities["delete-own-message"];
+  const canFlag = !isMyMessage && channelCapabilities["flag-message"];
+  const canMarkUnread = channelCapabilities["read-events"];
+  const canMute = !isMyMessage && channelCapabilities["mute-channel"];
+  const canQuote = !disableQuotedMessages && channelCapabilities["quote-message"];
+  const canReact = channelCapabilities["send-reaction"];
+  const canReply = channelCapabilities["send-reply"];
+  return {
+    canDelete,
+    canEdit,
+    canFlag,
+    canMarkUnread,
+    canMute,
+    canQuote,
+    canReact,
+    canReply,
+    isAdmin,
+    isModerator,
+    isMyMessage,
+    isOwner
+  };
+};
+
+// src/components/Message/icons.tsx
+var import_react13 = __toESM(require("react"));
+var ActionsIcon = ({ className = "" }) => /* @__PURE__ */ import_react13.default.createElement(
+  "svg",
+  {
+    className,
+    height: "4",
+    viewBox: "0 0 11 4",
+    width: "11",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  /* @__PURE__ */ import_react13.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",
+      fillRule: "nonzero"
+    }
+  )
+);
+var ReactionIcon = ({ className = "" }) => /* @__PURE__ */ import_react13.default.createElement(
+  "svg",
+  {
+    className,
+    height: "12",
+    viewBox: "0 0 12 12",
+    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" }))
+);
+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(
+  "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"
+  }
+));
+
+// src/components/MessageActions/MessageActions.tsx
+var import_clsx3 = __toESM(require("clsx"));
+var import_react15 = __toESM(require("react"));
+
+// src/components/Dialog/DialogAnchor.tsx
+var import_clsx2 = __toESM(require("clsx"));
+var import_react14 = __toESM(require("react"));
+var import_focus = require("@react-aria/focus");
+var import_react_popper = require("react-popper");
+function useDialogAnchor({
+  open,
+  placement,
+  referenceElement
+}) {
+  const [popperElement, setPopperElement] = (0, import_react14.useState)(null);
+  const { attributes, styles, update } = (0, import_react_popper.usePopper)(referenceElement, popperElement, {
+    modifiers: [
+      {
+        name: "eventListeners",
+        options: {
+          // It's not safe to update popper position on resize and scroll, since popper's
+          // reference element might not be visible at the time.
+          resize: false,
+          scroll: false
+        }
+      }
+    ],
+    placement
+  });
+  (0, import_react14.useEffect)(() => {
+    if (open && popperElement) {
+      update?.();
+    }
+  }, [open, popperElement, update]);
+  if (popperElement && !open) {
+    setPopperElement(null);
+  }
+  return {
+    attributes,
+    setPopperElement,
+    styles
+  };
+}
+var DialogAnchor = ({
+  children,
+  className,
+  focus = true,
+  id,
+  placement = "auto",
+  referenceElement = null,
+  trapFocus,
+  ...restDivProps
+}) => {
+  const dialog = useDialog({ id });
+  const open = useDialogIsOpen(id);
+  const { attributes, setPopperElement, styles } = useDialogAnchor({
+    open,
+    placement,
+    referenceElement
+  });
+  (0, import_react14.useEffect)(() => {
+    if (!open) return;
+    const hideOnEscape = (event) => {
+      if (event.key !== "Escape") return;
+      dialog?.close();
+    };
+    document.addEventListener("keyup", hideOnEscape);
+    return () => {
+      document.removeEventListener("keyup", hideOnEscape);
+    };
+  }, [dialog, open]);
+  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(
+    "div",
+    {
+      ...restDivProps,
+      ...attributes.popper,
+      className: (0, import_clsx2.default)("str-chat__dialog-contents", className),
+      "data-testid": "str-chat__dialog-contents",
+      ref: setPopperElement,
+      style: styles.popper,
+      tabIndex: 0
+    },
+    children
+  )));
+};
+
+// src/components/MessageActions/MessageActions.tsx
+var MessageActionsWrapper = (props) => {
+  const { children, customWrapperClass, inline, toggleOpen } = props;
+  const defaultWrapperClass = (0, import_clsx3.default)(
+    "str-chat__message-simple__actions__action",
+    "str-chat__message-simple__actions__action--options",
+    "str-chat__message-actions-container"
+  );
+  const wrapperProps = {
+    className: customWrapperClass || defaultWrapperClass,
+    "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);
+};
+
+// src/components/Reactions/ReactionSelectorWithButton.tsx
+var import_react20 = __toESM(require("react"));
+
+// src/components/Reactions/ReactionSelector.tsx
+var import_react19 = __toESM(require("react"));
+var import_clsx4 = __toESM(require("clsx"));
+
+// src/components/Reactions/reactionOptions.tsx
+var import_react18 = __toESM(require("react"));
+
+// src/components/Reactions/StreamEmoji.tsx
+var import_react17 = __toESM(require("react"));
+
+// src/components/Reactions/SpriteImage.tsx
+var import_react16 = __toESM(require("react"));
+
+// src/components/Reactions/utils/utils.ts
+var isMutableRef = (ref) => {
+  if (ref) {
+    return ref.current !== void 0;
+  }
+  return false;
+};
+var getImageDimensions = (source) => new Promise((resolve, reject) => {
+  const image = new Image();
+  image.addEventListener(
+    "load",
+    () => {
+      resolve([image.width, image.height]);
+    },
+    { once: true }
+  );
+  image.addEventListener("error", () => reject(`Couldn't load image from ${source}`), {
+    once: true
+  });
+  image.src = source;
+});
+
+// src/components/Reactions/SpriteImage.tsx
+var SpriteImage = ({
+  columns,
+  fallback,
+  height,
+  position,
+  rows,
+  spriteUrl,
+  style,
+  width
+}) => {
+  const [[spriteWidth, spriteHeight], setSpriteDimensions] = (0, import_react16.useState)([0, 0]);
+  (0, import_react16.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(
+    "div",
+    {
+      "data-testid": "sprite-image",
+      style: {
+        ...style,
+        "--str-chat__sprite-image-resize-ratio": "var(--str-chat__sprite-image-resize-ratio-x, var(--str-chat__sprite-image-resize-ratio-y, 1))",
+        "--str-chat__sprite-image-resize-ratio-x": "calc(var(--str-chat__sprite-image-width) / var(--str-chat__sprite-item-width))",
+        "--str-chat__sprite-image-resize-ratio-y": "calc(var(--str-chat__sprite-image-height) / var(--str-chat__sprite-item-height))",
+        "--str-chat__sprite-item-height": `${spriteHeight / rows}`,
+        "--str-chat__sprite-item-width": `${spriteWidth / columns}`,
+        ...Number.isFinite(height) ? { "--str-chat__sprite-image-height": `${height}px` } : {},
+        ...Number.isFinite(width) ? { "--str-chat__sprite-image-width": `${width}px` } : {},
+        backgroundImage: `url('${spriteUrl}')`,
+        backgroundPosition: `${x * (100 / (columns - 1))}% ${y * (100 / (rows - 1))}%`,
+        backgroundSize: `${columns * 100}% ${rows * 100}%`,
+        height: "var(--str-chat__sprite-image-height, calc(var(--str-chat__sprite-item-height) * var(--str-chat__sprite-image-resize-ratio)))",
+        width: "var(--str-chat__sprite-image-width, calc(var(--str-chat__sprite-item-width) * var(--str-chat__sprite-image-resize-ratio)))"
+      }
+    }
+  );
+};
+
+// src/components/Reactions/StreamEmoji.tsx
+var StreamSpriteEmojiPositions = {
+  angry: [1, 1],
+  haha: [1, 0],
+  like: [0, 0],
+  love: [1, 2],
+  sad: [0, 1],
+  wow: [0, 2]
+};
+var STREAM_SPRITE_URL = "https://getstream.imgix.net/images/emoji-sprite.png";
+var StreamEmoji = ({
+  fallback,
+  type
+}) => {
+  const position = StreamSpriteEmojiPositions[type];
+  return /* @__PURE__ */ import_react17.default.createElement(
+    SpriteImage,
+    {
+      columns: 2,
+      fallback,
+      position,
+      rows: 3,
+      spriteUrl: STREAM_SPRITE_URL,
+      style: {
+        "--str-chat__sprite-image-height": "var(--str-chat__stream-emoji-size, 18px)"
+      }
+    }
+  );
+};
+
+// 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" }
+];
+
+// src/components/Reactions/ReactionSelector.tsx
+var UnMemoizedReactionSelector = (props) => {
+  const {
+    Avatar: propAvatar,
+    detailedView = true,
+    handleReaction: propHandleReaction,
+    latest_reactions: propLatestReactions,
+    own_reactions: propOwnReactions,
+    reaction_groups: propReactionGroups,
+    reactionOptions: propReactionOptions,
+    reverse = false
+  } = props;
+  const {
+    Avatar: contextAvatar,
+    reactionOptions: contextReactionOptions = defaultReactionOptions
+  } = useComponentContext("ReactionSelector");
+  const {
+    closeReactionSelectorOnClick,
+    handleReaction: contextHandleReaction,
+    message
+  } = useMessageContext("ReactionSelector");
+  const dialogId = `reaction-selector--${message.id}`;
+  const dialog = useDialog({ id: dialogId });
+  const reactionOptions = propReactionOptions ?? contextReactionOptions;
+  const Avatar2 = propAvatar || contextAvatar || Avatar;
+  const handleReaction = propHandleReaction || contextHandleReaction;
+  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)(
+    (event, reactionType) => {
+      targetRef.current = event.currentTarget;
+      setTooltipReactionType(reactionType);
+    },
+    []
+  );
+  const hideTooltip = (0, import_react19.useCallback)(() => {
+    setTooltipReactionType(null);
+    setTooltipPositions(null);
+  }, []);
+  (0, import_react19.useEffect)(() => {
+    if (!tooltipReactionType || !rootRef.current) return;
+    const tooltip = tooltipRef.current?.getBoundingClientRect();
+    const target = targetRef.current?.getBoundingClientRect();
+    const container = isMutableRef(rootRef) ? rootRef.current?.getBoundingClientRect() : null;
+    if (!tooltip || !target || !container) return;
+    const tooltipPosition = tooltip.width === container.width || tooltip.x < container.x ? 0 : target.left + target.width / 2 - container.left - tooltip.width / 2;
+    const arrowPosition = target.x - tooltip.x + target.width / 2 - tooltipPosition;
+    setTooltipPositions({
+      arrow: arrowPosition,
+      tooltip: tooltipPosition
+    });
+  }, [tooltipReactionType, rootRef]);
+  const getUsersPerReactionType = (type) => latestReactions.map((reaction) => {
+    if (reaction.type === type) {
+      return reaction.user?.name || reaction.user?.id;
+    }
+    return null;
+  }).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(
+    "div",
+    {
+      className: (0, import_clsx4.default)(
+        "str-chat__reaction-selector str-chat__message-reaction-selector str-chat-react__message-reaction-selector",
+        {
+          "str-chat__reaction-selector--reverse": reverse
+        }
+      ),
+      "data-testid": "reaction-selector",
+      ref: rootRef
+    },
+    !!tooltipReactionType && detailedView && /* @__PURE__ */ import_react19.default.createElement(
+      "div",
+      {
+        className: "str-chat__reaction-selector-tooltip",
+        ref: tooltipRef,
+        style: {
+          left: tooltipPositions?.tooltip,
+          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_react19.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(
+        "button",
+        {
+          "aria-label": `Select Reaction: ${reactionName || reactionType}`,
+          className: (0, import_clsx4.default)(
+            "str-chat__message-reactions-list-item str-chat__message-reactions-option",
+            {
+              "str-chat__message-reactions-option-selected": iHaveReactedWithReaction(
+                reactionType
+              )
+            }
+          ),
+          "data-testid": "select-reaction-button",
+          "data-text": reactionType,
+          onClick: (event) => {
+            handleReaction(reactionType, event);
+            if (closeReactionSelectorOnClick) {
+              dialog.close();
+            }
+          }
+        },
+        !!count && detailedView && /* @__PURE__ */ import_react19.default.createElement(
+          "div",
+          {
+            className: "latest-user str-chat__message-reactions-last-user",
+            onClick: hideTooltip,
+            onMouseEnter: (e) => showTooltip(e, reactionType),
+            onMouseLeave: hideTooltip
+          },
+          latestUser ? /* @__PURE__ */ import_react19.default.createElement(
+            Avatar2,
+            {
+              image: latestUser.image,
+              name: latestUser.name,
+              size: 20,
+              user: latestUser
+            }
+          ) : /* @__PURE__ */ import_react19.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 || "")
+      ));
+    }))
+  );
+};
+var ReactionSelector = import_react19.default.memo(
+  UnMemoizedReactionSelector
+);
+
+// src/components/Reactions/ReactionSelectorWithButton.tsx
+var ReactionSelectorWithButton = ({
+  ReactionIcon: ReactionIcon2
+}) => {
+  const { t } = useTranslationContext("ReactionSelectorWithButton");
+  const { isMyMessage, message } = useMessageContext("MessageOptions");
+  const { ReactionSelector: ReactionSelector2 = ReactionSelector } = useComponentContext("MessageOptions");
+  const buttonRef = (0, import_react20.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(
+    DialogAnchor,
+    {
+      id: dialogId,
+      placement: isMyMessage() ? "top-end" : "top-start",
+      referenceElement: buttonRef.current,
+      trapFocus: true
+    },
+    /* @__PURE__ */ import_react20.default.createElement(ReactionSelector2, null)
+  ), /* @__PURE__ */ import_react20.default.createElement(
+    "button",
+    {
+      "aria-expanded": dialogIsOpen,
+      "aria-label": t("aria/Open Reaction Selector"),
+      className: "str-chat__message-reactions-button",
+      "data-testid": "message-reaction-action",
+      onClick: () => dialog?.toggle(),
+      ref: buttonRef
+    },
+    /* @__PURE__ */ import_react20.default.createElement(ReactionIcon2, { className: "str-chat__message-action-icon" })
+  ));
+};
+
+// src/experimental/MessageActions/hooks/useBaseMessageActionSetFilter.ts
+var import_react21 = require("react");
+var useBaseMessageActionSetFilter = (messageActionSet, disable = false) => {
+  const { initialMessage: isInitialMessage, message } = useMessageContext();
+  const {
+    canDelete,
+    canEdit,
+    canFlag,
+    canMarkUnread,
+    canMute,
+    canQuote,
+    canReact,
+    canReply
+  } = useUserRole(message);
+  const isMessageThreadReply = typeof message.parent_id === "string";
+  return (0, import_react21.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")
+      return [];
+    return messageActionSet.filter(({ type }) => {
+      if (ACTIONS_NOT_WORKING_IN_THREAD.includes(type) && isMessageThreadReply) return false;
+      if (type === "delete" && !canDelete || type === "edit" && !canEdit || type === "flag" && !canFlag || type === "markUnread" && !canMarkUnread || type === "mute" && !canMute || type === "quote" && !canQuote || type === "react" && !canReact || type === "reply" && !canReply)
+        return false;
+      return true;
+    });
+  }, [
+    canDelete,
+    canEdit,
+    canFlag,
+    canMarkUnread,
+    canMute,
+    canQuote,
+    canReact,
+    canReply,
+    isInitialMessage,
+    isMessageThreadReply,
+    message.status,
+    message.type,
+    disable,
+    messageActionSet
+  ]);
+};
+
+// src/experimental/MessageActions/hooks/useSplitMessageActionSet.ts
+var import_react22 = require("react");
+var useSplitMessageActionSet = (messageActionSet) => (0, import_react22.useMemo)(() => {
+  const quickActionSet = [];
+  const dropdownActionSet = [];
+  for (const action of messageActionSet) {
+    if (action.placement === "quick") quickActionSet.push(action);
+    if (action.placement === "dropdown") dropdownActionSet.push(action);
+  }
+  return { dropdownActionSet, quickActionSet };
+}, [messageActionSet]);
+
+// src/experimental/MessageActions/defaults.tsx
+var import_react23 = __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);
+var DefaultMessageActionComponents = {
+  dropdown: {
+    Quote() {
+      const { setQuotedMessage } = useChannelActionContext();
+      const { message } = useMessageContext();
+      const { t } = useTranslationContext();
+      const handleQuote = () => {
+        setQuotedMessage(message);
+        const elements = message.parent_id ? document.querySelectorAll(".str-chat__thread .str-chat__textarea__textarea") : document.getElementsByClassName("str-chat__textarea__textarea");
+        const textarea = elements.item(0);
+        if (textarea instanceof HTMLTextAreaElement) {
+          textarea.focus();
+        }
+      };
+      return /* @__PURE__ */ import_react23.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"));
+    },
+    MarkUnread() {
+      const { handleMarkUnread } = useMessageContext();
+      const { t } = useTranslationContext();
+      return /* @__PURE__ */ import_react23.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"));
+    },
+    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"));
+    },
+    Edit() {
+      const { handleEdit } = useMessageContext();
+      const { t } = useTranslationContext();
+      return /* @__PURE__ */ import_react23.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"));
+    }
+  },
+  quick: {
+    React() {
+      return /* @__PURE__ */ import_react23.default.createElement(ReactionSelectorWithButton, { ReactionIcon });
+    },
+    Reply() {
+      const { handleOpenThread } = useMessageContext();
+      const { t } = useTranslationContext();
+      return /* @__PURE__ */ import_react23.default.createElement(
+        "button",
+        {
+          "aria-label": t("aria/Open Thread"),
+          className: "str-chat__message-reply-in-thread-button",
+          "data-testid": "thread-action",
+          onClick: handleOpenThread
+        },
+        /* @__PURE__ */ import_react23.default.createElement(ThreadIcon, { className: "str-chat__message-action-icon" })
+      );
+    }
+  }
+};
+var defaultMessageActionSet = [
+  // { placement: 'dropdown', type: 'block' },
+  { Component: DefaultMessageActionComponents.quick.Reply, placement: "quick", type: "reply" },
+  { Component: DefaultMessageActionComponents.quick.React, placement: "quick", type: "react" },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Delete,
+    placement: "dropdown",
+    type: "delete"
+  },
+  { Component: DefaultMessageActionComponents.dropdown.Edit, placement: "dropdown", type: "edit" },
+  { Component: DefaultMessageActionComponents.dropdown.Mute, placement: "dropdown", type: "mute" },
+  { Component: DefaultMessageActionComponents.dropdown.Flag, placement: "dropdown", type: "flag" },
+  { Component: DefaultMessageActionComponents.dropdown.Pin, placement: "dropdown", type: "pin" },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Quote,
+    placement: "dropdown",
+    type: "quote"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.MarkUnread,
+    placement: "dropdown",
+    type: "markUnread"
+  }
+];
+
+// src/experimental/MessageActions/MessageActions.tsx
+var MessageActions = ({
+  disableBaseMessageActionSetFilter = false,
+  messageActionSet = defaultMessageActionSet
+}) => {
+  const { theme } = useChatContext();
+  const { isMyMessage, message } = useMessageContext();
+  const { t } = useTranslationContext();
+  const [actionsBoxButtonElement, setActionsBoxButtonElement] = (0, import_react24.useState)(
+    null
+  );
+  const filteredMessageActionSet = useBaseMessageActionSetFilter(
+    messageActionSet,
+    disableBaseMessageActionSetFilter
+  );
+  const { dropdownActionSet, quickActionSet } = useSplitMessageActionSet(filteredMessageActionSet);
+  const dropdownDialogId = `message-actions--${message.id}`;
+  const reactionSelectorDialogId = `reaction-selector--${message.id}`;
+  const dialog = useDialog({ id: dropdownDialogId });
+  const dropdownDialogIsOpen = useDialogIsOpen(dropdownDialogId);
+  const reactionSelectorDialogIsOpen = useDialogIsOpen(reactionSelectorDialogId);
+  if (dropdownActionSet.length + quickActionSet.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react24.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(
+      "button",
+      {
+        "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",
+        ref: setActionsBoxButtonElement
+      },
+      /* @__PURE__ */ import_react24.default.createElement(ActionsIcon, { className: "str-chat__message-action-icon" })
+    ), /* @__PURE__ */ import_react24.default.createElement(
+      DialogAnchor,
+      {
+        id: dropdownDialogId,
+        placement: isMyMessage() ? "top-end" : "top-start",
+        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 })))
+    )),
+    quickActionSet.map(({ Component: QuickActionComponent, type }) => /* @__PURE__ */ import_react24.default.createElement(QuickActionComponent, { key: type }))
+  );
+};
+var DropdownBox = ({ children, open }) => {
+  const { t } = useTranslationContext();
+  return /* @__PURE__ */ import_react24.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(
+      "div",
+      {
+        "aria-label": t("aria/Message Options"),
+        className: "str-chat__message-actions-list",
+        role: "listbox"
+      },
+      children
+    )
+  );
+};
+//# sourceMappingURL=index.browser.cjs.map