@realtimexsco/live-chat 1.4.14 → 1.4.16

package/README.md

@@ -4,7 +4,7 @@
 
 [![npm version](https://img.shields.io/npm/v/@realtimexsco/live-chat.svg)](https://www.npmjs.com/package/@realtimexsco/live-chat)
 [![npm downloads](https://img.shields.io/npm/dm/@realtimexsco/live-chat.svg)](https://www.npmjs.com/package/@realtimexsco/live-chat)
-[![license](https://img.shields.io/npm/l/@realtimexsco/live-chat.svg)](https://www.npmjs.com/package/@realtimexsco/live-chat#license)
+[![license](https://img.shields.io/npm/l/@realtimexsco/live-chat.svg)](#license)
 
 | | |
 |---|---|
@@ -12,7 +12,7 @@
 | **Styles** | `@realtimexsco/live-chat/styles.css` |
 | **Requires** | React 17+, Tailwind CSS **v4**, Zustand 4+ |
 | **Docs** | [Package documentation](https://realtimex.softwareco.com/documentations/package) |
-| **License** | [MIT](https://www.npmjs.com/package/@realtimexsco/live-chat#license) |
+| **License** | [MIT](#license) |
 
 Socket.IO, REST client, Zustand store, Radix UI, emoji picker, and chat UI are **bundled**. Your app only installs peer dependencies.
 
@@ -61,10 +61,12 @@ DMs · groups · Socket.IO · reactions · replies · forward · edit/delete ·
 |-------|------|
 | Full setup & docs | [https://realtimex.softwareco.com/documentations/package](https://realtimex.softwareco.com/documentations/package) |
 | npm package | [npmjs.com/package/@realtimexsco/live-chat](https://www.npmjs.com/package/@realtimexsco/live-chat) |
-| License | [MIT](https://www.npmjs.com/package/@realtimexsco/live-chat#license) |
+| License | [MIT](#license) |
 
 ---
 
+<a id="license"></a>
+
 ## License
 
 The MIT License (MIT)

package/dist/index.cjs

@@ -6906,8 +6906,21 @@ function AdminPermissionTooltip({
   if (!disabled || !message) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   }
+  const gatedChildren = React3__namespace.default.Children.map(children, (child) => {
+    if (!React3__namespace.default.isValidElement(child)) return child;
+    return React3__namespace.default.cloneElement(child, {
+      className: cn(child.props.className, "pointer-events-none")
+    });
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("inline-flex", className), children }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn("inline-flex cursor-not-allowed", className),
+        tabIndex: 0,
+        children: gatedChildren
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side, className: "max-w-[240px] text-xs", children: message })
   ] });
 }
@@ -7320,9 +7333,34 @@ var PushNotificationToggle = ({
   children
 }) => {
   const push = usePushNotifications();
-  const { getPushNotificationGate } = useEffectiveSettingsOptional();
+  const { loading: settingsLoading, getPushNotificationGate } = useEffectiveSettingsOptional();
   const adminGate = getPushNotificationGate();
   const [isToggling, setIsToggling] = React3.useState(false);
+  const isBootstrapping = push.loading || settingsLoading;
+  if (isBootstrapping && !push.supported) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between gap-4 rounded-xl border border-(--chat-border) bg-(--chat-surface) px-4 py-3",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-(--chat-text)", children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-(--chat-muted)", children: "Loading\u2026" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.Loader2,
+            {
+              className: "size-5 shrink-0 animate-spin text-(--chat-theme)",
+              "aria-label": "Loading push notification settings"
+            }
+          )
+        ]
+      }
+    );
+  }
   if (!push.supported) {
     return null;
   }
@@ -7330,8 +7368,8 @@ var PushNotificationToggle = ({
   const permissionBlocked = push.permission === "denied";
   const adminBlocked = !adminGate.enabled;
   const notConfigured = !push.configured;
-  const showLoader = isToggling;
-  const isDisabled = showLoader || permissionBlocked || push.loading || adminBlocked || notConfigured;
+  const showLoader = isToggling || isBootstrapping;
+  const isDisabled = showLoader || permissionBlocked || push.loading || settingsLoading || adminBlocked || notConfigured;
   const handleChange = async (checked) => {
     if (adminBlocked || notConfigured) return;
     setIsToggling(true);
@@ -9003,14 +9041,12 @@ var DefaultHeaderCallActions = ({
   onVideoCall,
   className
 }) => {
-  const { components, slotClassName, features } = useChatCustomizationOptional();
+  const { components, slotClassName } = useChatCustomizationOptional();
   const { getAudioCallGate, getVideoCallGate } = useEffectiveSettingsOptional();
   const PhoneSlot = components.PhoneCallButton;
   const VideoSlot = components.VideoCallButton;
-  const hideInGroups = features.hideCallActionsInGroupChats ?? false;
   const audioGate = getAudioCallGate();
   const videoGate = getVideoCallGate();
-  if (hideInGroups && activeChannel.isGroup) return null;
   if (!showPhoneCall && !showVideoCall) return null;
   const phoneEnabled = showPhoneCall && audioGate.enabled;
   const videoEnabled = showVideoCall && videoGate.enabled;
@@ -9020,6 +9056,7 @@ var DefaultHeaderCallActions = ({
       {
         disabled: !audioGate.enabled,
         message: audioGate.disabledReason,
+        side: "bottom",
         children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(
           PhoneSlot,
           {
@@ -9029,7 +9066,7 @@ var DefaultHeaderCallActions = ({
             className: cn(
               className,
               slotClassName("phoneCallButton"),
-              !audioGate.enabled && "pointer-events-none opacity-40"
+              !audioGate.enabled && "opacity-40"
             )
           }
         ) })
@@ -9039,6 +9076,7 @@ var DefaultHeaderCallActions = ({
       {
         disabled: !audioGate.enabled,
         message: audioGate.disabledReason,
+        side: "bottom",
         children: /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
@@ -9058,6 +9096,7 @@ var DefaultHeaderCallActions = ({
       {
         disabled: !videoGate.enabled,
         message: videoGate.disabledReason,
+        side: "bottom",
         children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(
           VideoSlot,
           {
@@ -9067,7 +9106,7 @@ var DefaultHeaderCallActions = ({
             className: cn(
               className,
               slotClassName("videoCallButton"),
-              !videoGate.enabled && "pointer-events-none opacity-40"
+              !videoGate.enabled && "opacity-40"
             )
           }
         ) })
@@ -9077,6 +9116,7 @@ var DefaultHeaderCallActions = ({
       {
         disabled: !videoGate.enabled,
         message: videoGate.disabledReason,
+        side: "bottom",
         children: /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
@@ -9094,16 +9134,13 @@ var DefaultHeaderCallActions = ({
   ] });
 };
 var HeaderCallActions = (props) => {
-  const { components, slotClassName, features } = useChatCustomizationOptional();
+  const { components, slotClassName } = useChatCustomizationOptional();
   const Custom = components.HeaderCallActions;
-  if (!Custom) {
-    const hideInGroups = features.hideCallActionsInGroupChats ?? false;
-    const showPhoneCall = props.showPhoneCall ?? true;
-    const showVideoCall = props.showVideoCall ?? true;
-    if (hideInGroups && props.activeChannel.isGroup) return null;
-    if (!showPhoneCall && !showVideoCall) return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-0.5", slotClassName("headerCallActions")), children: Custom ? /* @__PURE__ */ jsxRuntime.jsx(Custom, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(DefaultHeaderCallActions, { ...props }) });
+  const showPhoneCall = props.showPhoneCall ?? true;
+  const showVideoCall = props.showVideoCall ?? true;
+  if (!showPhoneCall && !showVideoCall) return null;
+  const useCustom = Custom != null && Custom !== HeaderCallActions;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-0.5", slotClassName("headerCallActions")), children: useCustom ? /* @__PURE__ */ jsxRuntime.jsx(Custom, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(DefaultHeaderCallActions, { ...props }) });
 };
 var HeaderCallActions_default = HeaderCallActions;
 function OptionsMenuItem({
@@ -12922,9 +12959,91 @@ init_useStore();
 
 // src/hooks/useGroupInfo.ts
 init_useStore();
+
+// src/lib/effective-settings.helpers.ts
+function minutesToMs(minutes) {
+  return Math.max(0, minutes) * 60 * 1e3;
+}
+function getEditWindowMs(timers, isGroup) {
+  return minutesToMs(isGroup ? timers.groupEditMinutes : timers.dmEditMinutes);
+}
+function getDeleteWindowMs(timers, isGroup) {
+  return minutesToMs(
+    isGroup ? timers.groupDeleteMinutes : timers.dmDeleteMinutes
+  );
+}
+function isWithinWindow(createdAt, windowMs) {
+  if (!createdAt) return false;
+  const date = new Date(createdAt);
+  if (isNaN(date.getTime())) return false;
+  const diff = Date.now() - date.getTime();
+  return diff >= 0 && diff < windowMs;
+}
+function isWithinMessageEditWindow(createdAt, timers, isGroup) {
+  return isWithinWindow(createdAt, getEditWindowMs(timers, isGroup));
+}
+function isWithinMessageDeleteWindow(createdAt, timers, isGroup) {
+  return isWithinWindow(createdAt, getDeleteWindowMs(timers, isGroup));
+}
+function allowsAllMimeTypes(allowedMimeTypes) {
+  return allowedMimeTypes.some((pattern) => {
+    const normalized = pattern.trim().toLowerCase();
+    return normalized === "*" || normalized === "*/*";
+  });
+}
+function matchesAllowedMimeType(fileType, allowedMimeTypes) {
+  if (!allowedMimeTypes.length) return false;
+  if (allowsAllMimeTypes(allowedMimeTypes)) return true;
+  const mime = (fileType || "application/octet-stream").toLowerCase();
+  return allowedMimeTypes.some((pattern) => {
+    const normalized = pattern.trim().toLowerCase();
+    if (!normalized) return false;
+    if (normalized.endsWith("/*")) {
+      const prefix = normalized.slice(0, -1);
+      return mime.startsWith(prefix);
+    }
+    return mime === normalized;
+  });
+}
+function buildAcceptFromMimeTypes(allowedMimeTypes) {
+  if (allowsAllMimeTypes(allowedMimeTypes)) return "";
+  return allowedMimeTypes.map((type) => type.trim()).filter(Boolean).join(",");
+}
+function formatFileSizeMB(sizeBytes) {
+  return `${(sizeBytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+var GROUP_PERMISSION_KEYS = [
+  "onlyAdminCanSendMessage",
+  "onlyAdminCanEditInfo",
+  "senderCanEditMessage",
+  "allowMemberAdd",
+  "allowMemberRemove",
+  "moderationEnabled"
+];
+function resolveGroupPermissions(conversationPermissions, defaults, locked = []) {
+  const next = { ...defaults };
+  if (conversationPermissions) {
+    for (const key of GROUP_PERMISSION_KEYS) {
+      const value = conversationPermissions[key];
+      if (typeof value === "boolean") {
+        next[key] = value;
+      }
+    }
+  }
+  for (const key of locked) {
+    if (GROUP_PERMISSION_KEYS.includes(String(key))) {
+      const typedKey = key;
+      next[typedKey] = defaults[typedKey];
+    }
+  }
+  return next;
+}
+
+// src/hooks/useGroupInfo.ts
 var useGroupInfo = (conversationId) => {
   const conversationInfos = exports.useChatStore((s) => s.conversationInfos);
   const loggedUserDetails = exports.useChatStore((s) => s.loggedUserDetails);
+  const { settings } = useEffectiveSettingsOptional();
   const info = conversationId ? conversationInfos[conversationId] : null;
   const isAdmin = React3.useMemo(() => {
     if (!info || !loggedUserDetails) return false;
@@ -12940,7 +13059,14 @@ var useGroupInfo = (conversationId) => {
     }
     return String(ownerId) === String(loggedUserDetails._id);
   }, [info, loggedUserDetails]);
-  const permissions = info?.groupPermissions || null;
+  const permissions = React3.useMemo(() => {
+    if (!info) return null;
+    return resolveGroupPermissions(
+      info.groupPermissions,
+      settings.groupPolicy.defaults,
+      settings.groupPolicy.locked
+    );
+  }, [info, settings.groupPolicy.defaults, settings.groupPolicy.locked]);
   const userPermissions = React3.useMemo(() => {
     return {
       canSendMessage: isOwner || isAdmin || !permissions?.onlyAdminCanSendMessage,
@@ -12948,7 +13074,6 @@ var useGroupInfo = (conversationId) => {
       canAddMember: isOwner || !!permissions?.allowMemberAdd,
       canRemoveMember: isOwner || !!permissions?.allowMemberRemove,
       canEditMessage: isOwner || isAdmin || !!permissions?.senderCanEditMessage
-      // You can add more derived permissions here as needed
     };
   }, [isOwner, isAdmin, permissions]);
   return {
@@ -13375,14 +13500,20 @@ var PermissionDrawer = ({ isOpen, onOpenChange, conversationId, conversationInfo
   const [permissions, setPermissions] = React3.useState(null);
   const [isSaving, setIsSaving] = React3.useState(false);
   React3.useEffect(() => {
-    if (conversationInfo?.groupPermissions) {
-      setPermissions(conversationInfo.groupPermissions);
-      return;
-    }
-    if (isOpen) {
-      setPermissions({ ...settings.groupPolicy.defaults });
-    }
-  }, [conversationInfo, isOpen, settings.groupPolicy.defaults]);
+    if (!isOpen) return;
+    setPermissions(
+      resolveGroupPermissions(
+        conversationInfo?.groupPermissions,
+        settings.groupPolicy.defaults,
+        settings.groupPolicy.locked
+      )
+    );
+  }, [
+    isOpen,
+    conversationInfo?.groupPermissions,
+    settings.groupPolicy.defaults,
+    settings.groupPolicy.locked
+  ]);
   if (!conversationId || !permissions) return null;
   const handleToggle = (key) => {
     if (isGroupPermissionLocked(key)) return;
@@ -13392,7 +13523,12 @@ var PermissionDrawer = ({ isOpen, onOpenChange, conversationId, conversationInfo
     if (!conversationId || !permissions) return;
     setIsSaving(true);
     try {
-      await updateGroupPermissions(conversationId, permissions);
+      const payload = resolveGroupPermissions(
+        permissions,
+        settings.groupPolicy.defaults,
+        settings.groupPolicy.locked
+      );
+      await updateGroupPermissions(conversationId, payload);
       onOpenChange(false);
     } finally {
       setIsSaving(false);
@@ -13402,8 +13538,8 @@ var PermissionDrawer = ({ isOpen, onOpenChange, conversationId, conversationInfo
     { key: "onlyAdminCanSendMessage", label: "Only Admin Can Send Message", desc: "Restricts message sending to group administrators only." },
     { key: "onlyAdminCanEditInfo", label: "Only Admin Can Edit Info", desc: "Only admins can change group name, description, and avatar." },
     { key: "senderCanEditMessage", label: "Sender Can Edit Message", desc: "Allows users to edit their own sent messages." },
-    { key: "allowMemberAdd", label: "Only Admin Can Add Members", desc: "Only administrators can add new participants to the group.", inverted: true },
-    { key: "allowMemberRemove", label: "Only Admin Can Remove Members", desc: "Only administrators can remove other participants.", inverted: true },
+    { key: "allowMemberAdd", label: "Allow Members to Add", desc: "Allows group members to add new participants." },
+    { key: "allowMemberRemove", label: "Allow Members to Remove", desc: "Allows group members to remove other participants." },
     { key: "moderationEnabled", label: "Moderation Enabled", desc: "Enables advanced message moderation features." }
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open: isOpen, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(ChatSheetContent, { showCloseButton: true, className: "sm:max-w-[380px]", children: [
@@ -13419,6 +13555,7 @@ var PermissionDrawer = ({ isOpen, onOpenChange, conversationId, conversationInfo
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-1 px-0.5 text-[10px] font-semibold uppercase tracking-wide text-(--chat-muted)", children: "Permissions" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-(--chat-border) px-3", children: permissionItems.map((item, index) => {
           const locked = isGroupPermissionLocked(item.key);
+          const checked = permissions[item.key];
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -13443,7 +13580,7 @@ var PermissionDrawer = ({ isOpen, onOpenChange, conversationId, conversationInfo
                         size: "sm",
                         className: "mt-0.5 shrink-0 data-[state=checked]:bg-(--chat-theme) data-[state=unchecked]:bg-(--chat-border)",
                         disabled: locked,
-                        checked: item.inverted ? !permissions[item.key] : permissions[item.key],
+                        checked,
                         onCheckedChange: () => handleToggle(item.key)
                       }
                     )
@@ -14987,61 +15124,6 @@ function resolveForwardItems(selectedKeys, messages) {
 
 // src/chat/lib/chat-edit-window.ts
 init_settings_types();
-
-// src/lib/effective-settings.helpers.ts
-function minutesToMs(minutes) {
-  return Math.max(0, minutes) * 60 * 1e3;
-}
-function getEditWindowMs(timers, isGroup) {
-  return minutesToMs(isGroup ? timers.groupEditMinutes : timers.dmEditMinutes);
-}
-function getDeleteWindowMs(timers, isGroup) {
-  return minutesToMs(
-    isGroup ? timers.groupDeleteMinutes : timers.dmDeleteMinutes
-  );
-}
-function isWithinWindow(createdAt, windowMs) {
-  if (!createdAt) return false;
-  const date = new Date(createdAt);
-  if (isNaN(date.getTime())) return false;
-  const diff = Date.now() - date.getTime();
-  return diff >= 0 && diff < windowMs;
-}
-function isWithinMessageEditWindow(createdAt, timers, isGroup) {
-  return isWithinWindow(createdAt, getEditWindowMs(timers, isGroup));
-}
-function isWithinMessageDeleteWindow(createdAt, timers, isGroup) {
-  return isWithinWindow(createdAt, getDeleteWindowMs(timers, isGroup));
-}
-function allowsAllMimeTypes(allowedMimeTypes) {
-  return allowedMimeTypes.some((pattern) => {
-    const normalized = pattern.trim().toLowerCase();
-    return normalized === "*" || normalized === "*/*";
-  });
-}
-function matchesAllowedMimeType(fileType, allowedMimeTypes) {
-  if (!allowedMimeTypes.length) return false;
-  if (allowsAllMimeTypes(allowedMimeTypes)) return true;
-  const mime = (fileType || "application/octet-stream").toLowerCase();
-  return allowedMimeTypes.some((pattern) => {
-    const normalized = pattern.trim().toLowerCase();
-    if (!normalized) return false;
-    if (normalized.endsWith("/*")) {
-      const prefix = normalized.slice(0, -1);
-      return mime.startsWith(prefix);
-    }
-    return mime === normalized;
-  });
-}
-function buildAcceptFromMimeTypes(allowedMimeTypes) {
-  if (allowsAllMimeTypes(allowedMimeTypes)) return "";
-  return allowedMimeTypes.map((type) => type.trim()).filter(Boolean).join(",");
-}
-function formatFileSizeMB(sizeBytes) {
-  return `${(sizeBytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-// src/chat/lib/chat-edit-window.ts
 var FALLBACK_TIMERS = exports.DEFAULT_EFFECTIVE_SETTINGS.messageTimers;
 function isWithinMessageEditWindow2(createdAt, isGroup, timers = FALLBACK_TIMERS) {
   return isWithinMessageEditWindow(createdAt, timers, isGroup);