@ixo/ui 0.1.7 → 0.1.9

package/dist/{components-BgEk60Ob.cjs → components-BDiiWelU.cjs}

@@ -34,6 +34,7 @@ const DOMPurify = require("dompurify");
 const hooks = require("@mantine/hooks");
 const useEventSubscribe = require("./useEventSubscribe-B019T27n.cjs");
 const useUITheme = require("./useUITheme-DqgAb7n1.cjs");
+const iconsReact = require("@tabler/icons-react");
 const Markdown = require("react-markdown");
 const remarkGfm = require("remark-gfm");
 const downshift = require("downshift");
@@ -845,8 +846,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-D3rssdnu.cjs")));
-const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-DFw-YGRB.cjs")));
+const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-D771i3jp.cjs")));
+const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-ImM8dR3W.cjs")));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -930,7 +931,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BO3dBb76.cjs")));
+const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-qHCPELWv.cjs")));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = react$1.useRef(null);
   const handleOnClick = react$1.useCallback(
@@ -1365,7 +1366,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-Iosewtvm.cjs")));
+const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-D1bGiH9L.cjs")));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = react$1.useRef(null);
   const wrapperContentAreaRef = react$1.useRef(null);
@@ -1483,6 +1484,8 @@ function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide
     }
   ) });
 }
+const ICON_COLOR = "var(--mantine-color-neutralColor-8)";
+const icon = (Icon, size, color) => /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 18, color: color || ICON_COLOR });
 function IconButton({
   icon: Icon,
   onClick,
@@ -1944,8 +1947,8 @@ function HtmlRender({ content, className }) {
   const safeHTML = DOMPurify.sanitize(content, { FORBID_ATTR: ["style"] });
   return /* @__PURE__ */ jsxRuntime.jsx(StyleDOMApplier, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, dangerouslySetInnerHTML: { __html: safeHTML } }) });
 }
-function Item({ icon, label, disabled, active, onClick }) {
-  const IconComponent = icon;
+function Item({ icon: icon2, label, disabled, onClick }) {
+  const IconComponent = icon2;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -1953,9 +1956,9 @@ function Item({ icon, label, disabled, active, onClick }) {
         width: "100%",
         borderRadius: 4,
         padding: "4px 12px",
-        background: "var(--mantine-color-neutralColor-5)",
+        background: "transparent",
         border: "none",
-        cursor: disabled ? "not-allowed" : "pointer",
+        cursor: disabled ? "default" : "pointer",
         textAlign: "left",
         "&:hover": {
           backgroundColor: disabled ? void 0 : "var(--mantine-color-neutralColor-6)"
@@ -1964,22 +1967,13 @@ function Item({ icon, label, disabled, active, onClick }) {
       disabled,
       onClick,
       children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: 8, children: [
-        IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 16, color: "overPicture" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Typography.Text,
-          {
-            css: ({ fontSize }) => ({
-              fontSize: fontSize.xs,
-              color: disabled ? "var(--mantine-color-neutralColor-8)" : active ? "var(--mantine-color-neutralColor-8)" : "var(--mantine-color-neutralColor-8)"
-            }),
-            children: label
-          }
-        )
+        IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 18, color: disabled ? "var(--mantine-color-neutralColor-7)" : "var(--mantine-color-neutralColor-8)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { c: disabled ? "var(--mantine-color-neutralColor-7)" : void 0, fz: 14, children: label })
       ] })
     }
   );
 }
-function MoreMenu({ items, controlColor = "primary" }) {
+function MoreMenu({ items, controlColor = "primary", Icon }) {
   const [opened, setOpened] = react$1.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.Popover,
@@ -1990,36 +1984,22 @@ function MoreMenu({ items, controlColor = "primary" }) {
       styles: {
         dropdown: {
           background: "var(--mantine-color-neutralColor-4)",
-          border: "none",
           padding: "12px 4px",
+          borderColor: "var(--mantine-color-neutralColor-6)",
           marginLeft: 10
         }
       },
+      radius: 16,
       trapFocus: true,
       width: 200,
       position: "right-start",
       shadow: "md",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(core.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            css: {
-              background: "none",
-              border: "none",
-              padding: 0,
-              cursor: "pointer",
-              position: "relative",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            onClick: () => setOpened((o) => !o),
-            children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.EllipsisVSolid, { size: 20, color: controlColor })
-          }
-        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(core.Center, { onClick: () => setOpened((o) => !o), children: Icon || /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.EllipsisVSolid, { size: 20, color: controlColor }) }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(core.Popover.Dropdown, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ml: 12, mb: 10, fz: 12, c: "neutralColor.8", children: "Page" }),
-          items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(core.FocusTrap.InitialFocus, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ml: 12, mb: 10, fz: 14, c: "neutralColor.7", children: "Actions" }),
+          /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: "4px", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
             Item,
             {
               icon: item.icon,
@@ -2032,7 +2012,7 @@ function MoreMenu({ items, controlColor = "primary" }) {
               }
             },
             item.label
-          ))
+          )) })
         ] })
       ]
     }
@@ -2068,7 +2048,7 @@ function AIResponse({ content, agentName, menu }) {
     }
   );
 }
-function AIInputBar({ placeholder, icon, disabledInput, disabledButton, valueInput, inInputChange, onButtonClick }) {
+function AIInputBar({ placeholder, icon: icon2, disabledInput, disabledButton, valueInput, inInputChange, onButtonClick }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -2110,7 +2090,7 @@ function AIInputBar({ placeholder, icon, disabledInput, disabledButton, valueInp
             })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(RoundedButton, { icon: icon ?? UsersSolid.Assistant, label: "Ask", active: true, disabled: disabledButton, onClick: onButtonClick })
+        /* @__PURE__ */ jsxRuntime.jsx(RoundedButton, { icon: icon2 ?? UsersSolid.Assistant, label: "Ask", active: true, disabled: disabledButton, onClick: onButtonClick })
       ] })
     }
   );
@@ -2190,8 +2170,8 @@ function Avatar({ src, rounded = true, size = 62, did }) {
           if (jazzRef.current) {
             jazzRef.current.innerHTML = "";
             const seed = Array.from(did).reduce((acc, char) => acc + char.charCodeAt(0), 0);
-            const icon = jazzicon(size, seed);
-            jazzRef.current.appendChild(icon);
+            const icon2 = jazzicon(size, seed);
+            jazzRef.current.appendChild(icon2);
           }
         } catch (error) {
           console.error("Failed to load jazzicon:", error);
@@ -2366,33 +2346,92 @@ function NavigationItemSkeleton() {
     }
   );
 }
+function cutText(text, length, ending = "…") {
+  if (!length || text.length <= length) {
+    return text;
+  }
+  const words = text.split(" ");
+  const endingSize = ending.length;
+  let result = "";
+  for (const word of words) {
+    const newValue = result + word + " ";
+    if (newValue.length + endingSize - 1 > length) {
+      break;
+    }
+    result = newValue;
+  }
+  return result.trim() + ending;
+}
+function shortStr(str, threshold = 30, saveSymbolsAtTheEnd = 10, insert = "...") {
+  if (!str) return str;
+  const len = str.length;
+  if (len <= threshold) return str;
+  const ending = saveSymbolsAtTheEnd ? str.slice(-1 * saveSymbolsAtTheEnd) : "";
+  const beginning = str.substring(0, threshold - saveSymbolsAtTheEnd - insert.length);
+  return `${beginning}${insert}${ending}`;
+}
+function carbonToUSD(carbon) {
+  return (carbon * 0.03).toLocaleString(void 0, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 6
+  });
+}
 function RoomItem({ room }) {
   const { hovered, ref } = hooks.useHover();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const renderIcon = () => {
+    if (!room.icon) return null;
+    if (typeof room.icon === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx(core.Image, { w: 20, h: 20, src: room.icon, radius: "50%" });
+    } else if (typeof room.icon === "function") {
+      const IconComponent = room.icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20, color: "secondary" });
+    } else {
+      return room.icon;
+    }
+  };
+  const displayName = shortStr(room.name, 19, 0) || room.name;
+  const shouldShowTooltip = room.name.length > 19;
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
     Flex,
     {
       ref,
       align: "center",
+      justify: "space-between",
       gap: 8,
       px: 12,
-      py: 4,
-      ml: 16,
+      py: 6,
       style: {
         cursor: "pointer",
         borderRadius: 6,
-        backgroundColor: room.isActive || hovered ? "var(--mantine-color-neutralColor-5)" : "transparent",
-        transform: hovered ? "translateX(2px)" : "translateX(0px)",
+        backgroundColor: room.isActive || hovered ? "var(--mantine-color-neutralColor-6)" : "transparent",
         transition: "all 0.15s ease"
       },
       onClick: () => room.onClick(room.id),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(room.icon, { size: 16, color: "secondary" }),
-        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 13, c: "neutralColor.8", children: room.name })
+        /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: 8, children: [
+          renderIcon(),
+          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { c: room.isActive ? "neutralColor.8" : "neutralColor.7", fz: 14, children: displayName })
+        ] }),
+        hovered && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: 4, children: [
+          room.onActionClick && /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: room.onActionClick.label, children: /* @__PURE__ */ jsxRuntime.jsx(
+            core.Center,
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                room.onActionClick?.onClick();
+              },
+              style: { cursor: "pointer" },
+              children: icon(room.onActionClick.icon, void 0, "var(--mantine-color-neutralColor-7)")
+            }
+          ) }),
+          room.tag && room.tagIcon && /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: room.tag, children: icon(room.tagIcon, void 0, "var(--mantine-color-neutralColor-7)") })
+        ] })
       ]
     }
   );
+  return shouldShowTooltip ? /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: room.name, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: content }) }) : content;
 }
-function RoomCategory({ category }) {
+function RoomCategory({ name, rooms, actions, primaryActions }) {
   const { hovered, ref } = hooks.useHover();
   const { value, toggle } = useToggle(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: 2, children: [
@@ -2403,7 +2442,7 @@ function RoomCategory({ category }) {
         align: "center",
         justify: "space-between",
         px: 12,
-        py: 4,
+        py: 6,
         style: {
           cursor: "pointer",
           borderRadius: 6,
@@ -2412,21 +2451,53 @@ function RoomCategory({ category }) {
         },
         onClick: toggle,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 12, c: "neutralColor.7", children: category.name }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            core.Center,
-            {
-              sx: {
-                transform: value ? "rotate(-90deg)" : "rotate(0deg)",
-                transition: "transform 0.2s ease"
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.AngleLeftSolid, { size: 12, color: "secondary" })
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 12, tt: "capitalize", children: name }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: 8, children: [
+            primaryActions && primaryActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              core.Center,
+              {
+                onClick: (e) => e.stopPropagation(),
+                sx: {
+                  cursor: "pointer",
+                  borderRadius: 4,
+                  transition: "transform 0.2s ease",
+                  "&:hover": {
+                    background: "var(--mantine-color-neutralColor-5)"
+                  }
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(MoreMenu, { Icon: icon(iconsReact.IconPlus), items: primaryActions })
+              }
+            ),
+            actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              core.Center,
+              {
+                onClick: (e) => e.stopPropagation(),
+                sx: {
+                  cursor: "pointer",
+                  borderRadius: 4,
+                  transition: "transform 0.2s ease",
+                  "&:hover": {
+                    background: "var(--mantine-color-neutralColor-5)"
+                  }
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(MoreMenu, { items: actions, controlColor: "secondary" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              core.Center,
+              {
+                sx: {
+                  transform: value ? "rotate(-90deg)" : "rotate(0deg)",
+                  transition: "transform 0.2s ease"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.AngleLeftSolid, { size: 12, color: "secondary" })
+              }
+            )
+          ] })
         ]
       }
     ),
-    !value && /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 1, children: category.rooms.map((room) => /* @__PURE__ */ jsxRuntime.jsx(RoomItem, { room }, room.id)) })
+    !value && /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 5, children: rooms?.map((room) => /* @__PURE__ */ jsxRuntime.jsx(RoomItem, { room }, room.id)) })
   ] });
 }
 function hasActiveDescendant(children) {
@@ -2507,7 +2578,6 @@ function MenuItem({ item, onMenuItemClick, depth = 0 }) {
           cursor: "pointer",
           borderRadius: 8,
           backgroundColor: shouldShowActiveStyle ? "var(--mantine-color-neutralColor-6)" : hovered ? "var(--mantine-color-neutralColor-6)" : "transparent",
-          transform: hovered ? "translateX(4px)" : "translateX(0px)",
           transition: "all 0.2s ease"
         },
         onClick: handleItemClick,
@@ -2552,7 +2622,7 @@ function SelectedIndicator() {
     }
   );
 }
-function SpaceItem({ icon, id, name, selectedSpace, onClick }) {
+function SpaceItem({ icon: icon2, id, name, selectedSpace, onClick }) {
   const { hovered, ref } = hooks.useHover();
   const isSelected = selectedSpace === id;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2569,42 +2639,12 @@ function SpaceItem({ icon, id, name, selectedSpace, onClick }) {
       w: 40,
       onClick: () => onClick(id),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: name, ml: 5, fz: 12, position: "right", withArrow: true, children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { radius: 24, src: icon, w: 32, h: 32 }) : icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: name, ml: 5, fz: 12, position: "right", withArrow: true, children: typeof icon2 === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { radius: 24, src: icon2, w: 32, h: 32 }) : icon2 }),
         isSelected && /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, {})
       ]
     }
   );
 }
-function cutText(text, length, ending = "…") {
-  if (!length || text.length <= length) {
-    return text;
-  }
-  const words = text.split(" ");
-  const endingSize = ending.length;
-  let result = "";
-  for (const word of words) {
-    const newValue = result + word + " ";
-    if (newValue.length + endingSize - 1 > length) {
-      break;
-    }
-    result = newValue;
-  }
-  return result.trim() + ending;
-}
-function shortStr(str, threshold = 30, saveSymbolsAtTheEnd = 10, insert = "...") {
-  if (!str) return str;
-  const len = str.length;
-  if (len <= threshold) return str;
-  const ending = saveSymbolsAtTheEnd ? str.slice(-1 * saveSymbolsAtTheEnd) : "";
-  const beginning = str.substring(0, threshold - saveSymbolsAtTheEnd - insert.length);
-  return `${beginning}${insert}${ending}`;
-}
-function carbonToUSD(carbon) {
-  return (carbon * 0.03).toLocaleString(void 0, {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 6
-  });
-}
 function MobileBurger({ avatarIcon, isOpened, onClick }) {
   if (isOpened) {
     return /* @__PURE__ */ jsxRuntime.jsx(core.CloseButton, { hiddenFrom: "sm", pos: "absolute", w: 28, sx: { borderRadius: 8, zIndex: 100 }, h: 28, onClick, right: 12, top: 12, bg: "neutralColor.4" });
@@ -2650,7 +2690,7 @@ function AppShellNavigation({
   const [asideWidth, setAsideWidth] = react$1.useState(450);
   const isMobile = hooks.useMediaQuery("(max-width: 48em)");
   const [mobileOpened, { toggle: toggleMobile }] = hooks.useDisclosure();
-  const [desktopOpened, { toggle: toggleDesktop }] = hooks.useDisclosure(true);
+  const [desktopOpened] = hooks.useDisclosure(true);
   const [isSplitResizing, setIsSplitResizing] = react$1.useState(false);
   const isSplitResizingRef = react$1.useRef(false);
   const mainContainerRef = react$1.useRef(null);
@@ -2724,7 +2764,7 @@ function AppShellNavigation({
   const handleNavbarMouseMove = react$1.useCallback(
     (e) => {
       if (!isNavbarResizingRef.current) return;
-      const minWidth = isAiOpened ? 450 : 300;
+      const minWidth = isAiOpened ? 450 : 330;
       const maxWidth = 700;
       const newWidth = Math.min(Math.max(e.clientX, minWidth), maxWidth);
       if (isAiOpened) {
@@ -2758,7 +2798,7 @@ function AppShellNavigation({
   react$1.useEffect(() => {
     const handleWindowResize = () => {
       const maxWidth = 700;
-      const minWidth = isAiOpened ? 450 : 300;
+      const minWidth = isAiOpened ? 450 : 330;
       const currentWidth = isAiOpened ? navbarWidthAiOpen : navbarWidthAiClosed;
       const setter = isAiOpened ? setNavbarWidthAiOpen : setNavbarWidthAiClosed;
       if (currentWidth > maxWidth) {
@@ -2853,7 +2893,7 @@ function AppShellNavigation({
                         paddingRight: 8
                       }
                     },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { align: "center", gap: 8, children: spaces.map(({ icon, id, name, onClick }) => /* @__PURE__ */ jsxRuntime.jsx(SpaceItem, { selectedSpace, icon, name, id, onClick }, id)) })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { align: "center", gap: 8, children: spaces.map(({ icon: icon2, id, name, onClick }) => /* @__PURE__ */ jsxRuntime.jsx(SpaceItem, { selectedSpace, icon: icon2, name, id, onClick }, id)) })
                   }
                 )
               ] }),
@@ -2865,28 +2905,28 @@ function AppShellNavigation({
               ] })
             ] }),
             isAiOpened && !isMobile && aiNavbarContent,
-            !isAiOpened && /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { justify: "space-between", w: "100%", pt: 16, pb: 10, px: 12, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: 5, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(Flex, { mb: 24, style: { width: "100%" }, justify: "space-between", align: "center", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Flex, { align: "center", gap: "10px", children: /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: pageItem.pageTitle || "Unknown", disabled: !isTitleOverflowing, position: "bottom", withArrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(core.Text, { lh: 1, c: "neutralColor.8", children: isTitleOverflowing ? shortStr(pageItem.pageTitle, 21, 0) : pageItem.pageTitle || "Unknown" }) }) }),
-                  isAiBtnVisible && !isAiOpened && !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
-                    core.Center,
-                    {
-                      sx: {
-                        cursor: "pointer",
-                        borderRadius: 8,
-                        transition: "background 0.15s",
-                        background: "var(--mantine-color-neutralColor-5)",
-                        "&:hover": {
-                          background: "var(--mantine-color-neutralColor-6)"
-                        }
-                      },
-                      p: 4,
-                      onClick: onAiOpen,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Assistant, { size: 18, color: "primary" })
-                    }
-                  )
-                ] }),
+            !isAiOpened && /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { w: "100%", style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Section, { px: 12, pt: 16, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { mb: 24, style: { width: "100%" }, justify: "space-between", align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Flex, { align: "center", gap: "10px", children: /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: pageItem.pageTitle || "Unknown", disabled: !isTitleOverflowing, position: "bottom", withArrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(core.Text, { lh: 1, c: "neutralColor.8", children: isTitleOverflowing ? shortStr(pageItem.pageTitle, 21, 0) : pageItem.pageTitle || "Unknown" }) }) }),
+                isAiBtnVisible && !isAiOpened && !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+                  core.Center,
+                  {
+                    sx: {
+                      cursor: "pointer",
+                      borderRadius: 8,
+                      transition: "background 0.15s",
+                      background: "var(--mantine-color-neutralColor-5)",
+                      "&:hover": {
+                        background: "var(--mantine-color-neutralColor-6)"
+                      }
+                    },
+                    p: 4,
+                    onClick: onAiOpen,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Assistant, { size: 18, color: "primary" })
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Section, { grow: true, component: core.ScrollArea, scrollbarSize: 5, sx: { overflowX: "hidden" }, px: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: 5, children: [
                 loading ? /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 5, children: Array.from({ length: 6 }).map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavigationItemSkeleton, {}, idx)) }) : menuItems?.map((item, index) => {
                   if (index !== 0 && index === separator) {
                     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -2896,9 +2936,9 @@ function AppShellNavigation({
                   }
                   return /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onMenuItemClick, item }, item.id);
                 }),
-                roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 8, mt: 16, children: roomCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(RoomCategory, { category }, category.id)) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 5, children: footerContent })
+                roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 8, mt: 16, children: roomCategories.map(({ id, name, actions, rooms, primaryActions: onAddClick }) => /* @__PURE__ */ jsxRuntime.jsx(RoomCategory, { id, name, actions, rooms, primaryActions: onAddClick }, id)) })
+              ] }) }),
+              footerContent && /* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Section, { px: 12, py: 10, children: /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 5, children: footerContent }) })
             ] })
           ] })
         ] }) }),
@@ -5377,7 +5417,7 @@ function ImageIcon({ source: Source, fallback: Fallback, size = 32, iconColor =
   }
   return radash.isString(Source) ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: Source, draggable: false, width: size, height: size, css: { borderRadius: size, objectFit: "cover" } }) : /* @__PURE__ */ jsxRuntime.jsx(Source, { size, color: iconColor });
 }
-function Value({ icon, label, value }) {
+function Value({ icon: icon2, label, value }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -5391,7 +5431,7 @@ function Value({ icon, label, value }) {
         alignItems: "center"
       }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ImageIcon, { source: icon, size: 32, iconColor: "primary" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ImageIcon, { source: icon2, size: 32, iconColor: "primary" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(Spacer, { vertical: true, distance: 0, alignItems: "start", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography.Text, { color: "text", size: "s", children: label }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography.Text, { color: "secondary", size: "xs", children: value })
@@ -6032,13 +6072,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-BJXmGwAC.cjs")));
-const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-dGNR0pvK.cjs")));
-const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-kV2fm9R3.cjs")));
+const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-LERt98FZ.cjs")));
+const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CO6Ygcv-.cjs")));
+const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-DWUKXIMe.cjs")));
 const Map = react$1.lazy(() => Promise.resolve().then(() => require("./index-D4PsPquZ.cjs")));
 const CustomContent = react$1.lazy(() => Promise.resolve().then(() => require("./index-ByrCNpS2.cjs")));
-const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-Bfq_mrjY.cjs")));
-const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-CJRQEBo0.cjs")));
+const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-CTZnqmGU.cjs")));
+const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-BzEXuxSc.cjs")));
 const HOVER_BORDER_WIDTH = 1;
 function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
   const wrapperRef = react$1.useRef(null);
@@ -6338,7 +6378,7 @@ function AssetInfo({
   rightTitleColor = "text",
   rightSubtitle,
   rightSubtitleColor = "focusSecondary",
-  icon
+  icon: icon2
 }) {
   const theme = react.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6353,19 +6393,19 @@ function AssetInfo({
       justifyContent: "space-between",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Spacer, { children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx(
+          icon2 && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               css: ({ radius }) => ({
                 width: 32,
                 height: 32,
                 borderRadius: radius.small / 2,
-                backgroundColor: UsersSolid.getElementColor(theme, icon.bg),
+                backgroundColor: UsersSolid.getElementColor(theme, icon2.bg),
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center"
               }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(icon.icon, { color: "overPicture" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(icon2.icon, { color: "overPicture" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(Info, { align: "start", title: leftTitle, subtitle: leftSubtitle, titleColor: leftTitleColor, subtitleColor: leftSubtitleColor })
@@ -7071,7 +7111,7 @@ function ModalSearch({
     )
   ] }) });
 }
-function Protocol({ icon, name, category, selected, onClick }) {
+function Protocol({ icon: icon2, name, category, selected, onClick }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -7121,7 +7161,7 @@ function Protocol({ icon, name, category, selected, onClick }) {
                 /* @__PURE__ */ jsxRuntime.jsx(Typography.Paragraph, { size: "regular", children: name }),
                 /* @__PURE__ */ jsxRuntime.jsx(Typography.Paragraph, { color: "focusSecondary", size: "xs", children: category })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ImageIcon, { source: icon, size: 32, iconColor: "secondary" })
+              /* @__PURE__ */ jsxRuntime.jsx(ImageIcon, { source: icon2, size: 32, iconColor: "secondary" })
             ]
           }
         )
@@ -7149,7 +7189,7 @@ function OracleProtocolsSelection({ items }) {
     items.find((item) => item.selected) ? /* @__PURE__ */ jsxRuntime.jsx(Typography.Text, { color: "focusSecondary", children: "Protocol Selected" }) : null
   ] });
 }
-function TagButton({ value, icon, onClick }) {
+function TagButton({ value, icon: icon2, onClick }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -7165,7 +7205,7 @@ function TagButton({ value, icon, onClick }) {
           backgroundColor: colors.focusTransparent10
         }
       }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { value, icon, textColor: "focusSecondary" })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { value, icon: icon2, textColor: "focusSecondary" })
     }
   );
 }
@@ -7355,7 +7395,7 @@ function humanizeNumber(value) {
 function humanizeTimestamp(timestamp) {
   return dayjs(timestamp).fromNow();
 }
-function InteractionButton({ icon, active, total, onClick }) {
+function InteractionButton({ icon: icon2, active, total, onClick }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -7371,7 +7411,7 @@ function InteractionButton({ icon, active, total, onClick }) {
         {
           value: humanizeNumber(total),
           textColor: active ? "primary" : "secondary",
-          icon,
+          icon: icon2,
           css: ({ transition, colors }) => ({
             transition: transition.duration,
             "&:hover": {
@@ -7809,7 +7849,7 @@ function ColumnText({ title, subtitle, align = "left" }) {
     }
   );
 }
-function ServiceOffering({ icon, leftText, leftDescription, centerText, centerDescription, rightText, rightDescription, onClick }) {
+function ServiceOffering({ icon: icon2, leftText, leftDescription, centerText, centerDescription, rightText, rightDescription, onClick }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -7875,7 +7915,7 @@ function ServiceOffering({ icon, leftText, leftDescription, centerText, centerDe
                     alignItems: "center"
                   }),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageIcon, { size: 32, source: icon }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ImageIcon, { size: 32, source: icon2 }),
                     /* @__PURE__ */ jsxRuntime.jsx(ColumnText, { title: leftText, subtitle: leftDescription })
                   ]
                 }
@@ -11313,4 +11353,4 @@ exports.UserMessage = UserMessage;
 exports.WorkspaceModal = WorkspaceModal;
 exports.cutText = cutText;
 exports.isValidClick = isValidClick;
-//# sourceMappingURL=components-BgEk60Ob.cjs.map
+//# sourceMappingURL=components-BDiiWelU.cjs.map