@algenium/blocks 1.2.0 → 1.2.1-rc.2

package/dist/index.d.cts

@@ -404,8 +404,10 @@ interface NotificationsWidgetProps {
     soundType?: SoundType;
     pulseStyle?: PulseStyle;
     soundCooldown?: number;
+    /** "ghost" renders a borderless button matching other ghost icon buttons. */
+    buttonVariant?: "default" | "ghost";
 }
-declare function NotificationsWidget({ notifications: propNotifications, onMarkAsRead: propOnMarkAsRead, onMarkAllAsRead: propOnMarkAllAsRead, onDismiss: propOnDismiss, onClearAll: propOnClearAll, onNotificationClick: propOnNotificationClick, size, maxVisible, playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
+declare function NotificationsWidget({ notifications: propNotifications, onMarkAsRead: propOnMarkAsRead, onMarkAllAsRead: propOnMarkAllAsRead, onDismiss: propOnDismiss, onClearAll: propOnClearAll, onNotificationClick: propOnNotificationClick, size, maxVisible, playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, buttonVariant, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface CalendarWidgetLabels {
     title?: string;
@@ -573,9 +575,11 @@ interface ChatSidebarProps {
     labels?: ChatSidebarLabels;
     roleLabel?: (role: string) => string;
     roomTypeLabel?: (type: string) => string;
+    /** Top offset on mobile so the navbar stays visible (e.g. "3.5rem", "4rem"). */
+    mobileTopOffset?: string;
     className?: string;
 }
-declare function ChatSidebar({ currentUserId, config, labels, roleLabel, roomTypeLabel, className, }: ChatSidebarProps): react_jsx_runtime.JSX.Element | null;
+declare function ChatSidebar({ currentUserId, config, labels, roleLabel, roomTypeLabel, mobileTopOffset, className, }: ChatSidebarProps): react_jsx_runtime.JSX.Element | null;
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;

package/dist/index.d.ts

@@ -404,8 +404,10 @@ interface NotificationsWidgetProps {
     soundType?: SoundType;
     pulseStyle?: PulseStyle;
     soundCooldown?: number;
+    /** "ghost" renders a borderless button matching other ghost icon buttons. */
+    buttonVariant?: "default" | "ghost";
 }
-declare function NotificationsWidget({ notifications: propNotifications, onMarkAsRead: propOnMarkAsRead, onMarkAllAsRead: propOnMarkAllAsRead, onDismiss: propOnDismiss, onClearAll: propOnClearAll, onNotificationClick: propOnNotificationClick, size, maxVisible, playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
+declare function NotificationsWidget({ notifications: propNotifications, onMarkAsRead: propOnMarkAsRead, onMarkAllAsRead: propOnMarkAllAsRead, onDismiss: propOnDismiss, onClearAll: propOnClearAll, onNotificationClick: propOnNotificationClick, size, maxVisible, playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, buttonVariant, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface CalendarWidgetLabels {
     title?: string;
@@ -573,9 +575,11 @@ interface ChatSidebarProps {
     labels?: ChatSidebarLabels;
     roleLabel?: (role: string) => string;
     roomTypeLabel?: (type: string) => string;
+    /** Top offset on mobile so the navbar stays visible (e.g. "3.5rem", "4rem"). */
+    mobileTopOffset?: string;
     className?: string;
 }
-declare function ChatSidebar({ currentUserId, config, labels, roleLabel, roomTypeLabel, className, }: ChatSidebarProps): react_jsx_runtime.JSX.Element | null;
+declare function ChatSidebar({ currentUserId, config, labels, roleLabel, roomTypeLabel, mobileTopOffset, className, }: ChatSidebarProps): react_jsx_runtime.JSX.Element | null;
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;

package/dist/index.js

@@ -4986,7 +4986,8 @@ function NotificationsWidget({
   showPulse = true,
   soundType = "chime",
   pulseStyle = "ring",
-  soundCooldown = 2e3
+  soundCooldown = 2e3,
+  buttonVariant = "default"
 }) {
   const context = useNotificationsContext();
   const notifications = propNotifications ?? context?.notifications ?? [];
@@ -5164,8 +5165,8 @@ function NotificationsWidget({
       motion.button,
       {
         className: cn(
-          "relative inline-flex items-center justify-center rounded-lg",
-          "bg-muted/50 border border-border/50 hover:bg-muted/70 transition-colors",
+          "relative inline-flex items-center justify-center rounded-lg transition-colors",
+          buttonVariant === "ghost" ? "hover:bg-accent hover:text-accent-foreground" : "bg-muted/50 border border-border/50 hover:bg-muted/70",
           styles.button,
           className
         ),
@@ -6118,7 +6119,8 @@ function ChatSidebarProvider({
         if (conv && conv.rooms.length === 1) {
           setActiveRoomId(conv.rooms[0].id);
           setView("chat");
-        } else if (conv && conv.rooms.length > 1) {
+        } else {
+          setActiveRoomId(null);
           setView("list");
         }
       }
@@ -6779,6 +6781,7 @@ function ChatSidebar({
   labels = {},
   roleLabel,
   roomTypeLabel,
+  mobileTopOffset,
   className
 }) {
   const {
@@ -6792,17 +6795,37 @@ function ChatSidebar({
     selectRoom,
     back
   } = useChatSidebar();
+  useEffect(() => {
+    if (!isOpen || typeof window === "undefined") return;
+    const mq = window.matchMedia("(max-width: 767px)");
+    const apply = () => {
+      if (mq.matches) document.body.style.overflow = "hidden";
+      else document.body.style.overflow = "";
+    };
+    apply();
+    mq.addEventListener("change", apply);
+    return () => {
+      mq.removeEventListener("change", apply);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
   if (!isOpen) return null;
   const getRoomTypeLabel = (type) => {
     if (roomTypeLabel) return roomTypeLabel(type);
     return roomTypeLabels[type] ?? type;
   };
   const activeConversation = activeCaseId ? conversations.find((c) => c.caseId === activeCaseId) : null;
-  return /* @__PURE__ */ jsx(
+  const cssVars = {
+    "--sidebar-top": mobileTopOffset ?? "0px"
+  };
+  const panel = /* @__PURE__ */ jsx(
     "div",
     {
+      style: cssVars,
       className: cn(
-        "flex h-full w-[360px] flex-col border-l bg-background xl:w-[400px]",
+        "flex min-h-0 flex-col bg-background",
+        "fixed top-[var(--sidebar-top)] right-0 bottom-0 left-0 z-[100] w-full max-w-none border-0 shadow-none",
+        "md:relative md:inset-auto md:z-auto md:h-full md:w-[360px] md:max-w-[360px] md:shrink-0 md:border-l md:shadow-none xl:w-[400px] xl:max-w-[400px]",
         className
       ),
       children: view === "list" ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -6897,6 +6920,18 @@ function ChatSidebar({
       ] })
     }
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: cssVars,
+        className: "fixed top-[var(--sidebar-top)] right-0 bottom-0 left-0 z-[90] bg-black/50 md:hidden",
+        "aria-hidden": true,
+        onClick: close
+      }
+    ),
+    panel
+  ] });
 }
 function formatRelativeTime(dateStr) {
   const date = new Date(dateStr);