@algenium/blocks 1.2.0 → 1.2.1-rc.2

package/dist/index.cjs

@@ -5014,7 +5014,8 @@ function NotificationsWidget({
   showPulse = true,
   soundType = "chime",
   pulseStyle = "ring",
-  soundCooldown = 2e3
+  soundCooldown = 2e3,
+  buttonVariant = "default"
 }) {
   const context = useNotificationsContext();
   const notifications = propNotifications ?? context?.notifications ?? [];
@@ -5192,8 +5193,8 @@ function NotificationsWidget({
       framerMotion.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
         ),
@@ -6146,7 +6147,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");
         }
       }
@@ -6807,6 +6809,7 @@ function ChatSidebar({
   labels = {},
   roleLabel,
   roomTypeLabel,
+  mobileTopOffset,
   className
 }) {
   const {
@@ -6820,17 +6823,37 @@ function ChatSidebar({
     selectRoom,
     back
   } = useChatSidebar();
+  React2.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__ */ jsxRuntime.jsx(
+  const cssVars = {
+    "--sidebar-top": mobileTopOffset ?? "0px"
+  };
+  const panel = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -6925,6 +6948,18 @@ function ChatSidebar({
       ] })
     }
   );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.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);