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

package/dist/index.d.cts

@@ -573,9 +573,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

@@ -573,9 +573,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

@@ -6118,7 +6118,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 +6780,7 @@ function ChatSidebar({
   labels = {},
   roleLabel,
   roomTypeLabel,
+  mobileTopOffset,
   className
 }) {
   const {
@@ -6792,17 +6794,37 @@ function ChatSidebar({
     selectRoom,
     back
   } = useChatSidebar();
+  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__ */ 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",
+        "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__ */ jsxs(Fragment, { children: [
@@ -6897,6 +6919,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 sm:hidden",
+        "aria-hidden": true,
+        onClick: close
+      }
+    ),
+    panel
+  ] });
 }
 function formatRelativeTime(dateStr) {
   const date = new Date(dateStr);