@realtimexsco/live-chat 1.4.2 → 1.4.3

package/dist/index.mjs

@@ -9,7 +9,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { flushSync } from 'react-dom';
-import { Sun, Moon, Search, X, Loader2, UserPlus, ChevronDown, ArrowLeft, Users, WifiOff, Wifi, Sparkles, MessageSquareText, ChevronRight, Pin, Star, Phone, Video, MoreVertical, Info, UserKey, ShieldUser, Paperclip, Clock, MessageSquareX, Trash2, LogOut, Ban, CheckCheck, Check, Camera, Save, Pencil, Mail, CornerUpLeft, CheckSquare, Smile, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, MessageCircleMore, History, Shield, Send, AlertCircle, ShieldCheck, UserMinus, MessageCircle, ExternalLink, Download, ChevronLeft, ZoomOut, ZoomIn, RotateCcw, Music, ArrowRight, MoreHorizontal, PinOff, StarOff, XIcon, ImageIcon, Film, Play, Pause, FileText, FileSpreadsheet, FileIcon, Eye, Captions } from 'lucide-react';
+import { Sun, Moon, Search, X, Loader2, UserPlus, ChevronDown, ArrowLeft, Users, WifiOff, Wifi, Sparkles, MessageSquareText, ChevronRight, Pin, Star, MoreVertical, Info, UserKey, ShieldUser, Paperclip, Clock, MessageSquareX, Trash2, LogOut, Ban, CheckCheck, Check, Camera, Save, Pencil, Mail, CornerUpLeft, CheckSquare, Smile, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, MessageCircleMore, History, Shield, Send, AlertCircle, ShieldCheck, UserMinus, MessageCircle, Phone, Video, ExternalLink, Download, ChevronLeft, ZoomOut, ZoomIn, RotateCcw, Music, ArrowRight, MoreHorizontal, PinOff, StarOff, XIcon, ImageIcon, Film, Play, Pause, FileText, FileSpreadsheet, FileIcon, Eye, Captions } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import EmojiPicker, { Theme } from 'emoji-picker-react';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
@@ -7620,6 +7620,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__ */ jsxs(Fragment, { children: [
+    showPhoneCall && (PhoneSlot ? /* @__PURE__ */ jsx(
+      PhoneSlot,
+      {
+        activeChannel,
+        conversationId,
+        onPhoneCall,
+        className: cn(className, slotClassName("phoneCallButton"))
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: cn(actionBtnClass, className, slotClassName("phoneCallButton")),
+        "aria-label": "Voice call",
+        onClick: onPhoneCall,
+        children: /* @__PURE__ */ jsx(Phone, { size: 15 })
+      }
+    )),
+    showVideoCall && (VideoSlot ? /* @__PURE__ */ jsx(
+      VideoSlot,
+      {
+        activeChannel,
+        conversationId,
+        onVideoCall,
+        className: cn(className, slotClassName("videoCallButton"))
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: cn(actionBtnClass, className, slotClassName("videoCallButton")),
+        "aria-label": "Video call",
+        onClick: onVideoCall,
+        children: /* @__PURE__ */ jsx(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__ */ jsx("div", { className: cn("flex items-center gap-0.5", slotClassName("headerCallActions")), children: Custom ? /* @__PURE__ */ jsx(Custom, { ...props }) : /* @__PURE__ */ jsx(DefaultHeaderCallActions, { ...props }) });
+};
+var HeaderCallActions_default = HeaderCallActions;
 function OptionsMenuItem({
   icon: Icon,
   label,
@@ -7640,6 +7710,7 @@ function OptionsMenuItem({
 }
 var HeaderRightSide = ({
   activeChannel,
+  conversationId,
   isAdmin,
   canViewMembers,
   pinnedCount,
@@ -7669,6 +7740,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)";
@@ -7726,26 +7806,18 @@ var HeaderRightSide = ({
         triggerClassName: headerIconBtnClass
       }
     ),
-    /* @__PURE__ */ jsx(
-      Button,
+    /* @__PURE__ */ jsx("div", { className: "hidden sm:contents", children: /* @__PURE__ */ jsx(
+      HeaderCallActions_default,
       {
-        variant: "ghost",
-        size: "icon-xs",
-        className: cn(headerIconBtnClass, "hidden sm:inline-flex"),
-        "aria-label": "Voice call",
-        children: /* @__PURE__ */ jsx(Phone, { size: 15 })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon-xs",
-        className: cn(headerIconBtnClass, "hidden sm:inline-flex"),
-        "aria-label": "Video call",
-        children: /* @__PURE__ */ jsx(Video, { size: 15 })
+        activeChannel,
+        conversationId,
+        showPhoneCall,
+        showVideoCall,
+        onPhoneCall: handlePhoneCall,
+        onVideoCall: handleVideoCall,
+        className: headerIconBtnClass
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx("span", { className: headerDividerClass, "aria-hidden": true }),
     /* @__PURE__ */ jsxs(DropdownMenu, { children: [
       /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-xs", className: headerIconBtnClass, "aria-label": "More options", children: /* @__PURE__ */ jsx(MoreVertical, { size: 15 }) }) }),
@@ -12883,6 +12955,7 @@ var ChannelHeaderView = (props) => {
       HeaderRightSideSlot,
       {
         activeChannel,
+        conversationId,
         isAdmin,
         canViewMembers,
         pinnedCount,
@@ -17644,76 +17717,6 @@ var ChannelListItem2 = (props) => {
   return /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-    showPhoneCall && (PhoneSlot ? /* @__PURE__ */ jsx(
-      PhoneSlot,
-      {
-        activeChannel,
-        conversationId,
-        onPhoneCall,
-        className: cn(className, slotClassName("phoneCallButton"))
-      }
-    ) : /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        className: cn(actionBtnClass, className, slotClassName("phoneCallButton")),
-        "aria-label": "Voice call",
-        onClick: onPhoneCall,
-        children: /* @__PURE__ */ jsx(Phone, { size: 15 })
-      }
-    )),
-    showVideoCall && (VideoSlot ? /* @__PURE__ */ jsx(
-      VideoSlot,
-      {
-        activeChannel,
-        conversationId,
-        onVideoCall,
-        className: cn(className, slotClassName("videoCallButton"))
-      }
-    ) : /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        className: cn(actionBtnClass, className, slotClassName("videoCallButton")),
-        "aria-label": "Video call",
-        onClick: onVideoCall,
-        children: /* @__PURE__ */ jsx(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__ */ jsx("div", { className: slotClassName("headerCallActions"), children: Custom ? /* @__PURE__ */ jsx(Custom, { ...props }) : /* @__PURE__ */ jsx(DefaultHeaderCallActions, { ...props }) });
-};
-var HeaderCallActions_default = HeaderCallActions;
 
 // src/chat/packageDefaultComponents.ts
 var packageDefaultComponents = {