@axiom-lattice/react-sdk 4.2.1 → 4.2.2

package/dist/index.d.mts

@@ -5236,6 +5236,11 @@ interface RoomsPageProps {
     workspaceId: string;
     openRoom?: OpenRoomRequest | null;
     onRoomOpened?: () => void;
+    /**
+     * Notifies the host when a room chat is open so it can hide chrome that
+     * would otherwise sit under a full-screen conversation (mobile tab bar).
+     */
+    onChatOpenChange?: (open: boolean) => void;
 }
 declare const RoomsPage: React__default.FC<RoomsPageProps>;
 

package/dist/index.d.ts

@@ -5236,6 +5236,11 @@ interface RoomsPageProps {
     workspaceId: string;
     openRoom?: OpenRoomRequest | null;
     onRoomOpened?: () => void;
+    /**
+     * Notifies the host when a room chat is open so it can hide chrome that
+     * would otherwise sit under a full-screen conversation (mobile tab bar).
+     */
+    onChatOpenChange?: (open: boolean) => void;
 }
 declare const RoomsPage: React__default.FC<RoomsPageProps>;
 

package/dist/index.js

@@ -107976,9 +107976,14 @@ var init_ProjectRoomComposer = __esm({
     useStyles46 = (0, import_antd_style63.createStyles)(({ token, css }) => ({
       root: css`
     flex-shrink: 0;
-    border-top: 1px solid ${token.colorBorderSecondary};
     background: ${token.colorBgContainer};
     padding: 8px 12px max(8px, env(safe-area-inset-bottom));
+
+    @media (max-width: 768px) {
+      /* Nearly full-bleed on phones: the Sender already brings its own inner
+         padding, so extra host padding just wastes scarce width. */
+      padding: 4px 6px max(6px, env(safe-area-inset-bottom));
+    }
   `,
       reply: css`
     display: flex;
@@ -108223,6 +108228,7 @@ var init_ProjectRoomComposer = __esm({
                   onKeyDown: handleSuggestionKeyDown,
                   placeholder: "Message the room",
                   autoSize: isMobile ? { minRows: 1, maxRows: 1 } : { minRows: 2, maxRows: 8 },
+                  styles: isMobile ? { content: { paddingInlineStart: 8, paddingInlineEnd: 8 } } : void 0,
                   suffix: isMobile ? void 0 : false,
                   prefix: isMobile ? attachButton : void 0,
                   footer: isMobile ? void 0 : (actionNode) => /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(import_antd110.Flex, { justify: "space-between", align: "center", style: { padding: "8px 0 0" }, children: [
@@ -110690,7 +110696,7 @@ var init_RoomsPage = __esm({
     overflow: hidden;
   `
     }));
-    RoomsPage = ({ workspaceId, openRoom, onRoomOpened }) => {
+    RoomsPage = ({ workspaceId, openRoom, onRoomOpened, onChatOpenChange }) => {
       const { styles } = useStyles54();
       const isMobile = useMediaQuery("(max-width: 768px)");
       const [selectedRoom, setSelectedRoom] = (0, import_react143.useState)(null);
@@ -110704,6 +110710,10 @@ var init_RoomsPage = __esm({
         void refreshRooms();
         onRoomOpened?.();
       }, [openRoom, onRoomOpened, refreshRooms]);
+      (0, import_react143.useEffect)(() => {
+        onChatOpenChange?.(selectedRoom !== null);
+        return () => onChatOpenChange?.(false);
+      }, [selectedRoom, onChatOpenChange]);
       const roomMenu = /* @__PURE__ */ (0, import_jsx_runtime253.jsx)("div", { className: styles.menuList, children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
         RoomList,
         {
@@ -111523,16 +111533,22 @@ var init_CoSpaceContainer = __esm({
       const [activeTab, setActiveTab] = (0, import_react146.useState)("rooms");
       const [pendingRoom, setPendingRoom] = (0, import_react146.useState)(null);
       const [meOpen, setMeOpen] = (0, import_react146.useState)(false);
+      const [roomChatOpen, setRoomChatOpen] = (0, import_react146.useState)(false);
       const handleNavigateToRoom = (0, import_react146.useCallback)((room) => {
         setPendingRoom(room);
         setActiveTab("rooms");
       }, []);
+      const selectTab = (0, import_react146.useCallback)((tab) => {
+        setActiveTab(tab);
+        setRoomChatOpen(false);
+      }, []);
       const page = activeTab === "rooms" ? /* @__PURE__ */ (0, import_jsx_runtime257.jsx)("div", { className: styles.page, children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
         RoomsPage,
         {
           workspaceId,
           openRoom: pendingRoom,
-          onRoomOpened: () => setPendingRoom(null)
+          onRoomOpened: () => setPendingRoom(null),
+          onChatOpenChange: setRoomChatOpen
         }
       ) }) : /* @__PURE__ */ (0, import_jsx_runtime257.jsx)("div", { className: styles.page, children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(OrgsPage, { workspaceId, onNavigateToRoom: handleNavigateToRoom }) });
       if (isMobile) {
@@ -111540,13 +111556,13 @@ var init_CoSpaceContainer = __esm({
           /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(RoomConnectionBanner, {}),
           /* @__PURE__ */ (0, import_jsx_runtime257.jsx)("div", { className: styles.inner, children: /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)("div", { className: styles.mobileRoot, children: [
             /* @__PURE__ */ (0, import_jsx_runtime257.jsx)("div", { className: styles.mobilePage, children: page }),
-            /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)("nav", { className: styles.tabBar, "aria-label": "CoSpace navigation", children: [
+            !roomChatOpen && /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)("nav", { className: styles.tabBar, "aria-label": "CoSpace navigation", children: [
               /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(
                 "button",
                 {
                   type: "button",
                   className: `${styles.tabButton} ${activeTab === "rooms" ? "active" : ""}`,
-                  onClick: () => setActiveTab("rooms"),
+                  onClick: () => selectTab("rooms"),
                   "aria-pressed": activeTab === "rooms",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(import_lucide_react58.MessageSquare, { size: 20 }),
@@ -111559,7 +111575,7 @@ var init_CoSpaceContainer = __esm({
                 {
                   type: "button",
                   className: `${styles.tabButton} ${activeTab === "orgs" ? "active" : ""}`,
-                  onClick: () => setActiveTab("orgs"),
+                  onClick: () => selectTab("orgs"),
                   "aria-pressed": activeTab === "orgs",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(import_lucide_react58.Building2, { size: 20 }),