@algenium/blocks 1.2.0-rc.1 → 1.2.0-rc.3

package/dist/index.cjs

@@ -6146,7 +6146,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 +6808,7 @@ function ChatSidebar({
   labels = {},
   roleLabel,
   roomTypeLabel,
+  mobileTopOffset,
   className
 }) {
   const {
@@ -6820,17 +6822,37 @@ function ChatSidebar({
     selectRoom,
     back
   } = useChatSidebar();
+  React2.useEffect(() => {
+    if (!isOpen || typeof window === "undefined") return;
+    const mq = window.matchMedia("(max-width: 639px)");
+    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",
+        "sm:relative sm:inset-auto sm:z-auto sm:h-full sm:w-[360px] sm:max-w-[360px] sm:shrink-0 sm:border-l sm:shadow-none xl:w-[400px] xl:max-w-[400px]",
         className
       ),
       children: view === "list" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -6925,6 +6947,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 sm:hidden",
+        "aria-hidden": true,
+        onClick: close
+      }
+    ),
+    panel
+  ] });
 }
 function formatRelativeTime(dateStr) {
   const date = new Date(dateStr);