@realtimexsco/live-chat 1.4.2 → 1.4.3

package/dist/index.cjs

@@ -7647,6 +7647,76 @@ var HeaderSearchPopover = ({
   ] });
 };
 var HeaderSearchPopover_default = HeaderSearchPopover;
+var actionBtnClass = "size-8 rounded-lg text-(--chat-muted) transition-colors hover:bg-(--chat-surface) hover:text-(--chat-text)";
+var DefaultHeaderCallActions = ({
+  activeChannel,
+  conversationId,
+  showPhoneCall = true,
+  showVideoCall = true,
+  onPhoneCall,
+  onVideoCall,
+  className
+}) => {
+  const { components, slotClassName, features } = useChatCustomizationOptional();
+  const PhoneSlot = components.PhoneCallButton;
+  const VideoSlot = components.VideoCallButton;
+  const hideInGroups = features.hideCallActionsInGroupChats ?? false;
+  if (hideInGroups && activeChannel.isGroup) return null;
+  if (!showPhoneCall && !showVideoCall) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    showPhoneCall && (PhoneSlot ? /* @__PURE__ */ jsxRuntime.jsx(
+      PhoneSlot,
+      {
+        activeChannel,
+        conversationId,
+        onPhoneCall,
+        className: cn(className, slotClassName("phoneCallButton"))
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: cn(actionBtnClass, className, slotClassName("phoneCallButton")),
+        "aria-label": "Voice call",
+        onClick: onPhoneCall,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { size: 15 })
+      }
+    )),
+    showVideoCall && (VideoSlot ? /* @__PURE__ */ jsxRuntime.jsx(
+      VideoSlot,
+      {
+        activeChannel,
+        conversationId,
+        onVideoCall,
+        className: cn(className, slotClassName("videoCallButton"))
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: cn(actionBtnClass, className, slotClassName("videoCallButton")),
+        "aria-label": "Video call",
+        onClick: onVideoCall,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { size: 15 })
+      }
+    ))
+  ] });
+};
+var HeaderCallActions = (props) => {
+  const { components, slotClassName, features } = 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 }) });
+};
+var HeaderCallActions_default = HeaderCallActions;
 function OptionsMenuItem({
   icon: Icon,
   label,
@@ -7667,6 +7737,7 @@ function OptionsMenuItem({
 }
 var HeaderRightSide = ({
   activeChannel,
+  conversationId,
   isAdmin,
   canViewMembers,
   pinnedCount,
@@ -7696,6 +7767,15 @@ var HeaderRightSide = ({
 }) => {
   const { scopeClassName, themeStyles, showColorModeToggle } = useChatTheme();
   const { showDateTimeSettings } = useChatLocale();
+  const features = useChatFeaturesOptional();
+  const showPhoneCall = features.showPhoneCall ?? defaultChatFeatures.showPhoneCall;
+  const showVideoCall = features.showVideoCall ?? defaultChatFeatures.showVideoCall;
+  const handlePhoneCall = () => {
+    features.onPhoneCall?.({ activeChannel, conversationId });
+  };
+  const handleVideoCall = () => {
+    features.onVideoCall?.({ activeChannel, conversationId });
+  };
   const headerItemGapClass = "gap-0.5";
   const headerIconBtnClass = "inline-flex size-6 shrink-0 items-center justify-center rounded-lg p-0 text-(--chat-muted) transition-colors hover:bg-(--chat-hover) hover:text-(--chat-text) has-[>svg]:p-0";
   const headerCountBtnClass = "inline-flex h-7 shrink-0 items-center justify-center gap-0.5 rounded-lg px-1.5 text-(--chat-muted) transition-colors hover:bg-(--chat-hover) hover:text-(--chat-text)";
@@ -7753,26 +7833,18 @@ var HeaderRightSide = ({
         triggerClassName: headerIconBtnClass
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:contents", children: /* @__PURE__ */ jsxRuntime.jsx(
+      HeaderCallActions_default,
       {
-        variant: "ghost",
-        size: "icon-xs",
-        className: cn(headerIconBtnClass, "hidden sm:inline-flex"),
-        "aria-label": "Voice call",
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { size: 15 })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon-xs",
-        className: cn(headerIconBtnClass, "hidden sm:inline-flex"),
-        "aria-label": "Video call",
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { size: 15 })
+        activeChannel,
+        conversationId,
+        showPhoneCall,
+        showVideoCall,
+        onPhoneCall: handlePhoneCall,
+        onVideoCall: handleVideoCall,
+        className: headerIconBtnClass
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: headerDividerClass, "aria-hidden": true }),
     /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon-xs", className: headerIconBtnClass, "aria-label": "More options", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { size: 15 }) }) }),
@@ -12910,6 +12982,7 @@ var ChannelHeaderView = (props) => {
       HeaderRightSideSlot,
       {
         activeChannel,
+        conversationId,
         isAdmin,
         canViewMembers,
         pinnedCount,
@@ -17671,76 +17744,6 @@ var ChannelListItem2 = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ItemSlot, { ...props });
 };
 var ChannelListItem_default = ChannelListItem2;
-var actionBtnClass = "size-8 rounded-lg text-(--chat-muted) transition-colors hover:bg-(--chat-surface) hover:text-(--chat-text)";
-var DefaultHeaderCallActions = ({
-  activeChannel,
-  conversationId,
-  showPhoneCall = true,
-  showVideoCall = true,
-  onPhoneCall,
-  onVideoCall,
-  className
-}) => {
-  const { components, slotClassName, features } = useChatCustomizationOptional();
-  const PhoneSlot = components.PhoneCallButton;
-  const VideoSlot = components.VideoCallButton;
-  const hideInGroups = features.hideCallActionsInGroupChats ?? false;
-  if (hideInGroups && activeChannel.isGroup) return null;
-  if (!showPhoneCall && !showVideoCall) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    showPhoneCall && (PhoneSlot ? /* @__PURE__ */ jsxRuntime.jsx(
-      PhoneSlot,
-      {
-        activeChannel,
-        conversationId,
-        onPhoneCall,
-        className: cn(className, slotClassName("phoneCallButton"))
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        className: cn(actionBtnClass, className, slotClassName("phoneCallButton")),
-        "aria-label": "Voice call",
-        onClick: onPhoneCall,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { size: 15 })
-      }
-    )),
-    showVideoCall && (VideoSlot ? /* @__PURE__ */ jsxRuntime.jsx(
-      VideoSlot,
-      {
-        activeChannel,
-        conversationId,
-        onVideoCall,
-        className: cn(className, slotClassName("videoCallButton"))
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        className: cn(actionBtnClass, className, slotClassName("videoCallButton")),
-        "aria-label": "Video call",
-        onClick: onVideoCall,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { size: 15 })
-      }
-    ))
-  ] });
-};
-var HeaderCallActions = (props) => {
-  const { components, slotClassName, features } = 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: slotClassName("headerCallActions"), children: Custom ? /* @__PURE__ */ jsxRuntime.jsx(Custom, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(DefaultHeaderCallActions, { ...props }) });
-};
-var HeaderCallActions_default = HeaderCallActions;
 
 // src/chat/packageDefaultComponents.ts
 var packageDefaultComponents = {