@ixo/ui 0.0.22 → 0.0.24

package/dist/{components-DiauxYoY.js → components-BeF0rZJR.js}

@@ -1,15 +1,15 @@
 import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
 import { isString, toggle, get, isFunction, assign } from "radash";
 import { useTheme, jsx as jsx$1, keyframes, ThemeProvider } from "@emotion/react";
-import { g as getElementColor, A as AngleDownSolid, a as CheckSolid, C as Close, L as Loading, P as PlusSolid, S as SearchSolid, b as Assistant, c as ArrowUpSolid, E as EllipsisVSolid, U as User, M as MinusCircleSolid, d as SettingsBarSolid, e as AngleRightSolid, f as ArrowLeftSolid, G as Globe, h as PanelLeftSolid, i as AngleLeftSolid, D as Dashboard, j as Groups, k as UserCircleSolid, l as Assets$1, m as Claims, n as Accounts, H as HistorySolid, o as LinkedResources, p as Proposals, I as ImpactCredits, q as GoTo, r as Share, s as PiePiece, t as ImpactCertificates, u as CommentDotsSolid, v as CommentAltSolid, w as MicrophoneSolid, x as Command, y as ArrowCircleRightSolid, z as Protocols, B as Investments, O as Oracles, F as Projects, J as Daos, K as Star, N as Expand, Q as LeafSolid, R as ArrowDownSolid, T as ArrowRightSolid, V as Play, W as CheckCircle, X as Events, Y as ThumbsUpSolid, Z as CommentsSolid, _ as CopySolid, $ as Hourglass, a0 as Act, a1 as Info$1, a2 as ClaimsW, a3 as TachometerAltSolid, a4 as UserCogSolid, a5 as UsersSolid, a6 as EllipsisHSolid } from "./UsersSolid-DaQkEA44.js";
+import { g as getElementColor, A as AngleDownSolid, a as CheckSolid, C as Close, L as Loading, P as PlusSolid, S as SearchSolid, b as Assistant, c as ArrowUpSolid, E as EllipsisVSolid, d as ArrowLeftSolid, H as HistorySolid, U as User, e as AngleLeftSolid, M as MinusCircleSolid, f as SettingsBarSolid, G as Globe, D as Dashboard, h as Groups, i as UserCircleSolid, j as Assets$1, k as Claims, l as Accounts, m as LinkedResources, n as Proposals, I as ImpactCredits, o as GoTo, p as Share, q as PiePiece, r as ImpactCertificates, s as CommentDotsSolid, t as CommentAltSolid, u as MicrophoneSolid, v as Command, w as ArrowCircleRightSolid, x as Protocols, y as Investments, O as Oracles, z as Projects, B as Daos, F as Star, J as AngleRightSolid, K as Expand, N as LeafSolid, Q as ArrowDownSolid, R as ArrowRightSolid, T as Play, V as CheckCircle, W as Events, X as ThumbsUpSolid, Y as CommentsSolid, Z as CopySolid, _ as Hourglass, $ as Act, a0 as Info$1, a1 as ClaimsW, a2 as TachometerAltSolid, a3 as UserCogSolid, a4 as UsersSolid, a5 as EllipsisHSolid } from "./UsersSolid-BAU7PbE4.js";
 import { useState, useCallback, useRef, useEffect, Suspense, lazy, forwardRef, useId, useMemo, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, memo } from "react";
 import { T as TAG_SMALL_HEIGHT, D as DEFAULT_ICON_SIZE } from "./constants-B7xlU8b8.js";
-import { Accordion as Accordion$1, Box, Image, Popover, Text as Text$1, AppShell, Stack as Stack$1, Center, Divider, Badge as Badge$1 } from "@mantine/core";
+import { Accordion as Accordion$1, Box, Image, Popover, Text as Text$1, Badge as Badge$1, Center, AppShell, Skeleton, Stack as Stack$1, Divider } from "@mantine/core";
 import { cx, css } from "@emotion/css";
 import { createPortal } from "react-dom";
 import DOMPurify from "dompurify";
 import { u as useUITheme } from "./useUITheme-7i8NJ2FG.js";
-import { useResizeObserver, useDisclosure, useHover } from "@mantine/hooks";
+import { useResizeObserver, useHover, useDisclosure } from "@mantine/hooks";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { useCombobox, useSelect } from "downshift";
@@ -774,8 +774,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = lazy(() => import("./index-BEPf-oww.js"));
-const Footer = lazy(() => import("./index-D1qxMoa7.js"));
+const Header$3 = lazy(() => import("./index-BDHM2tcG.js"));
+const Footer = lazy(() => import("./index-CHeVp24g.js"));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -859,7 +859,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = lazy(() => import("./index-DiaEMA08.js"));
+const Header$2 = lazy(() => import("./index-D7PlJiJR.js"));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = useRef(null);
   const handleOnClick = useCallback(
@@ -1294,7 +1294,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = lazy(() => import("./index-BSnZaaec.js"));
+const Badge = lazy(() => import("./index-BcSuJ_FA.js"));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = useRef(null);
   const wrapperContentAreaRef = useRef(null);
@@ -1898,34 +1898,35 @@ const Flex = forwardRef(
     children,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        ...props,
-        style: {
-          display: "flex",
-          flexDirection: direction,
-          alignItems: align,
-          justifyContent: justify,
-          gap,
-          margin: m,
-          marginTop: mt || my,
-          marginBottom: mb || my,
-          marginLeft: ml || mx,
-          marginRight: mr || mx,
-          padding: p,
-          paddingTop: pt || py,
-          paddingBottom: pb || py,
-          paddingLeft: pl || px,
-          paddingRight: pr || px,
-          backgroundColor: bg,
-          borderRadius: radius,
-          ...props.style
-        },
-        children
-      }
-    );
+    const hasIndividualPadding = pt !== 0 || pb !== 0 || pl !== 0 || pr !== 0 || px !== 0 || py !== 0;
+    const hasIndividualMargin = mt !== 0 || mb !== 0 || ml !== 0 || mr !== 0 || mx !== 0 || my !== 0;
+    const style = {
+      display: "flex",
+      flexDirection: direction,
+      alignItems: align,
+      justifyContent: justify,
+      gap,
+      backgroundColor: bg,
+      borderRadius: radius,
+      ...props.style
+    };
+    if (hasIndividualMargin) {
+      if (mt !== 0 || my !== 0) style.marginTop = mt || my;
+      if (mb !== 0 || my !== 0) style.marginBottom = mb || my;
+      if (ml !== 0 || mx !== 0) style.marginLeft = ml || mx;
+      if (mr !== 0 || mx !== 0) style.marginRight = mr || mx;
+    } else if (m !== 0) {
+      style.margin = m;
+    }
+    if (hasIndividualPadding) {
+      if (pt !== 0 || py !== 0) style.paddingTop = pt || py;
+      if (pb !== 0 || py !== 0) style.paddingBottom = pb || py;
+      if (pl !== 0 || px !== 0) style.paddingLeft = pl || px;
+      if (pr !== 0 || px !== 0) style.paddingRight = pr || px;
+    } else if (p !== 0) {
+      style.padding = p;
+    }
+    return /* @__PURE__ */ jsx("div", { ref, ...props, style, children });
   }
 );
 Flex.displayName = "Flex";
@@ -2101,6 +2102,52 @@ function AIInputBar({ placeholder, icon, disabledInput, disabledButton, valueInp
     }
   );
 }
+function AIChatToolbar({ onClose, onHistoryClick, onPlusClick, onHistoryClose, isHistoryOpened, oracleModel, sessionTitle }) {
+  const theme = useUITheme();
+  return /* @__PURE__ */ jsxs(Flex, { bg: theme.bg.navScaled, py: 16, justify: "space-between", align: "center", children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: 6, align: "center", children: [
+      sessionTitle && /* @__PURE__ */ jsx(Typography.Text, { color: "overPicture", size: "s", children: sessionTitle }),
+      oracleModel && /* @__PURE__ */ jsx(Badge$1, { fw: 300, size: "sm", fz: 12, bg: theme.neutral.transparent10, tt: "initial", children: oracleModel })
+    ] }),
+    /* @__PURE__ */ jsx(Flex, { gap: 6, align: "center", justify: "flex-end", children: isHistoryOpened ? /* @__PURE__ */ jsx(
+      Center,
+      {
+        sx: {
+          cursor: "pointer",
+          borderRadius: 8,
+          transition: "background 0.15s",
+          background: theme.bg.navIconsBg,
+          "&:hover": {
+            background: theme.neutral.transparent30
+          }
+        },
+        p: 4,
+        onClick: onHistoryClose,
+        children: /* @__PURE__ */ jsx(ArrowLeftSolid, { size: 18 })
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onPlusClick, children: /* @__PURE__ */ jsx(PlusSolid, { size: 18 }) }),
+      /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onHistoryClick, children: /* @__PURE__ */ jsx(HistorySolid, { size: 18 }) }),
+      /* @__PURE__ */ jsx(
+        Center,
+        {
+          sx: {
+            cursor: "pointer",
+            borderRadius: 8,
+            transition: "background 0.15s",
+            background: theme.bg.navIconsBg,
+            "&:hover": {
+              background: theme.neutral.transparent30
+            }
+          },
+          p: 4,
+          onClick: onClose,
+          children: /* @__PURE__ */ jsx(Close, { size: 18 })
+        }
+      )
+    ] }) })
+  ] });
+}
 function Avatar({ src, rounded = true, size = 62, did }) {
   const css2 = {
     width: size,
@@ -2231,46 +2278,115 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
     children
   ] });
 }
-function SelectedIndicator() {
+function NavigationItemSkeleton() {
   const theme = useUITheme();
-  return /* @__PURE__ */ jsx(
-    "div",
+  return /* @__PURE__ */ jsxs(
+    Flex,
     {
+      align: "center",
+      gap: 8,
+      pl: 12,
+      pr: 12,
+      py: 6,
       style: {
-        position: "absolute",
-        left: -8,
-        width: 4,
-        height: 30,
-        backgroundColor: theme.neutral.whiteFull,
-        borderRadius: 4
-      }
+        borderRadius: 8,
+        backgroundColor: theme.bg.navIconsBg
+      },
+      children: [
+        /* @__PURE__ */ jsx(Flex, { align: "center", gap: 4, style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            height: "15px",
+            radius: "xl",
+            sx: {
+              "::before": { opacity: 0 },
+              "::after": { opacity: 1 }
+            },
+            style: { opacity: 0.2 }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            height: 16,
+            width: 16,
+            radius: 4,
+            sx: {
+              "::before": { opacity: 0 },
+              "::after": { opacity: 1 }
+            },
+            style: { opacity: 0.3 }
+          }
+        )
+      ]
     }
   );
 }
-function SpaceItem({ icon, id, selectedSpace, onClick }) {
+function RoomItem({ room }) {
   const { hovered, ref } = useHover();
   const theme = useUITheme();
-  const isSelected = selectedSpace === id;
   return /* @__PURE__ */ jsxs(
-    Center,
+    Flex,
     {
       ref,
-      sx: {
+      align: "center",
+      gap: 8,
+      px: 12,
+      py: 4,
+      ml: 16,
+      style: {
         cursor: "pointer",
-        borderRadius: 24
+        borderRadius: 6,
+        backgroundColor: room.isActive || hovered ? theme.neutral.transparent10 : "transparent",
+        transform: hovered ? "translateX(2px)" : "translateX(0px)",
+        transition: "all 0.15s ease"
       },
-      pos: "relative",
-      bg: hovered ? theme.neutral.transparent30 : theme.bg.navIconsBg,
-      mih: 40,
-      w: 40,
-      onClick: () => onClick(id),
+      onClick: () => room.onClick(room.id),
       children: [
-        typeof icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: icon, w: 32, h: 32 }) : icon,
-        isSelected && /* @__PURE__ */ jsx(SelectedIndicator, {})
+        /* @__PURE__ */ jsx(room.icon, { size: 16, color: "secondary" }),
+        /* @__PURE__ */ jsx(Text$1, { fz: 13, c: theme.text.secondary, children: room.name })
       ]
     }
   );
 }
+function RoomCategory({ category }) {
+  const { hovered, ref } = useHover();
+  const theme = useUITheme();
+  const { value, toggle: toggle2 } = useToggle(false);
+  return /* @__PURE__ */ jsxs(Stack$1, { gap: 2, children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        ref,
+        align: "center",
+        justify: "space-between",
+        px: 12,
+        py: 4,
+        style: {
+          cursor: "pointer",
+          borderRadius: 6,
+          backgroundColor: hovered ? theme.neutral.transparent50 : "transparent",
+          transition: "all 0.15s ease"
+        },
+        onClick: toggle2,
+        children: [
+          /* @__PURE__ */ jsx(Text$1, { fz: 12, c: theme.neutral.lightGray, children: category.name }),
+          /* @__PURE__ */ jsx(
+            Center,
+            {
+              sx: {
+                transform: value ? "rotate(-90deg)" : "rotate(0deg)",
+                transition: "transform 0.2s ease"
+              },
+              children: /* @__PURE__ */ jsx(AngleLeftSolid, { size: 12, color: "secondary" })
+            }
+          )
+        ]
+      }
+    ),
+    !value && /* @__PURE__ */ jsx(Stack$1, { gap: 1, children: category.rooms.map((room) => /* @__PURE__ */ jsx(RoomItem, { room }, room.id)) })
+  ] });
+}
 function MenuItem({ item, onMenuItemClick, depth = 0 }) {
   const { hovered, ref } = useHover();
   const theme = useUITheme();
@@ -2348,71 +2464,46 @@ function MenuItem({ item, onMenuItemClick, depth = 0 }) {
     hasChildren && isExpanded && /* @__PURE__ */ jsx(Stack$1, { gap: 1, children: item.children?.map((childItem) => /* @__PURE__ */ jsx(MenuItem, { item: childItem, onMenuItemClick, depth: depth + 1 }, childItem.id)) })
   ] });
 }
-function RoomItem({ room }) {
+function SelectedIndicator() {
+  const theme = useUITheme();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: -8,
+        width: 4,
+        height: 30,
+        backgroundColor: theme.neutral.whiteFull,
+        borderRadius: 4
+      }
+    }
+  );
+}
+function SpaceItem({ icon, id, selectedSpace, onClick }) {
   const { hovered, ref } = useHover();
   const theme = useUITheme();
+  const isSelected = selectedSpace === id;
   return /* @__PURE__ */ jsxs(
-    Flex,
+    Center,
     {
       ref,
-      align: "center",
-      gap: 8,
-      px: 12,
-      py: 4,
-      ml: 16,
-      style: {
+      sx: {
         cursor: "pointer",
-        borderRadius: 6,
-        backgroundColor: room.isActive || hovered ? theme.neutral.transparent10 : "transparent",
-        transform: hovered ? "translateX(2px)" : "translateX(0px)",
-        transition: "all 0.15s ease"
+        borderRadius: 24
       },
-      onClick: () => room.onClick(room.id),
+      pos: "relative",
+      bg: hovered ? theme.neutral.transparent30 : theme.bg.navIconsBg,
+      mih: 40,
+      w: 40,
+      onClick: () => onClick(id),
       children: [
-        /* @__PURE__ */ jsx(room.icon, { size: 16, color: "secondary" }),
-        /* @__PURE__ */ jsx(Text$1, { fz: 13, c: theme.text.secondary, children: room.name })
+        typeof icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: icon, w: 32, h: 32 }) : icon,
+        isSelected && /* @__PURE__ */ jsx(SelectedIndicator, {})
       ]
     }
   );
 }
-function RoomCategory({ category }) {
-  const { hovered, ref } = useHover();
-  const theme = useUITheme();
-  const { value, toggle: toggle2 } = useToggle(false);
-  return /* @__PURE__ */ jsxs(Stack$1, { gap: 2, children: [
-    /* @__PURE__ */ jsxs(
-      Flex,
-      {
-        ref,
-        align: "center",
-        justify: "space-between",
-        px: 12,
-        py: 4,
-        style: {
-          cursor: "pointer",
-          borderRadius: 6,
-          backgroundColor: hovered ? theme.neutral.transparent50 : "transparent",
-          transition: "all 0.15s ease"
-        },
-        onClick: toggle2,
-        children: [
-          /* @__PURE__ */ jsx(Text$1, { fz: 12, c: theme.neutral.lightGray, children: category.name }),
-          /* @__PURE__ */ jsx(
-            Center,
-            {
-              sx: {
-                transform: value ? "rotate(-90deg)" : "rotate(0deg)",
-                transition: "transform 0.2s ease"
-              },
-              children: /* @__PURE__ */ jsx(AngleLeftSolid, { size: 12, color: "secondary" })
-            }
-          )
-        ]
-      }
-    ),
-    !value && /* @__PURE__ */ jsx(Stack$1, { gap: 1, children: category.rooms.map((room) => /* @__PURE__ */ jsx(RoomItem, { room }, room.id)) })
-  ] });
-}
 function AppShellNavigation({
   spaces,
   pageItem,
@@ -2433,9 +2524,14 @@ function AppShellNavigation({
   asideCollapsed = true,
   onAsideToggle,
   onMaxExpand,
-  children
+  onAiOpen,
+  isAiOpened,
+  isAiBtnVisible,
+  loading,
+  children,
+  aiNavbarContent
 }) {
-  const [navbarCollapsed, { toggle: toggleNavbar }] = useDisclosure(true);
+  const [isNavbarNotCollapsed, { toggle: toggleNavbar }] = useDisclosure(true);
   const [asideWidth, setAsideWidth] = useState(450);
   const theme = useUITheme();
   return /* @__PURE__ */ jsxs(
@@ -2444,7 +2540,8 @@ function AppShellNavigation({
       withBorder: false,
       styles: {
         navbar: {
-          background: theme.bg.navScaled
+          background: theme.bg.navScaled,
+          transition: "width 0.3s ease"
         },
         aside: {
           background: theme.bg.navScaled
@@ -2452,7 +2549,7 @@ function AppShellNavigation({
       },
       bg: theme.bg.centralCanvasBg,
       navbar: {
-        width: navbarCollapsed ? 300 : 56,
+        width: isNavbarNotCollapsed ? isAiOpened ? 450 : 300 : 56,
         breakpoint: "sm"
       },
       aside: {
@@ -2511,23 +2608,39 @@ function AppShellNavigation({
             onMinusSpaceClick && /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onMinusSpaceClick, children: /* @__PURE__ */ jsx(MinusCircleSolid, { color: "secondary" }) }),
             /* @__PURE__ */ jsxs(Stack$1, { align: "center", gap: 8, children: [
               /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
-              /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onSettingsIconClick, children: /* @__PURE__ */ jsx(SettingsBarSolid, { size: 22, color: "secondary" }) }),
-              !navbarCollapsed && /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: toggleNavbar, children: /* @__PURE__ */ jsx(AngleRightSolid, { color: "secondary" }) })
+              /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onSettingsIconClick, children: /* @__PURE__ */ jsx(SettingsBarSolid, { size: 22, color: "secondary" }) })
             ] })
           ] }),
-          navbarCollapsed && /* @__PURE__ */ jsxs(Stack$1, { justify: "space-between", w: "100%", pt: 16, pb: 10, px: 12, children: [
+          isAiOpened && isNavbarNotCollapsed && aiNavbarContent,
+          isNavbarNotCollapsed && !isAiOpened && /* @__PURE__ */ jsxs(Stack$1, { justify: "space-between", w: "100%", pt: 16, pb: 10, px: 12, children: [
             /* @__PURE__ */ jsxs(Stack$1, { gap: 5, children: [
               /* @__PURE__ */ jsxs(Flex, { mb: 24, style: { width: "100%" }, justify: "space-between", align: "center", children: [
                 /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "10px", children: [
                   isBackButtonVisible ? /* @__PURE__ */ jsx(Center, { onClick: onBackClick, sx: { borderRadius: 4, cursor: "pointer", padding: 2, background: theme.bg.navIconsBg }, children: /* @__PURE__ */ jsx(ArrowLeftSolid, { size: 18 }) }) : /* @__PURE__ */ jsx(Center, { sx: { borderRadius: 4, padding: 2, background: theme.bg.navIconsBg }, children: pageItem.pageIcon ? /* @__PURE__ */ jsx(pageItem.pageIcon, { size: 18 }) : /* @__PURE__ */ jsx(Globe, { size: 18 }) }),
                   /* @__PURE__ */ jsx(Text$1, { lh: 1, c: theme.text.overPicture, children: pageItem.pageTitle || "Unknown" })
                 ] }),
-                /* @__PURE__ */ jsx(Flex, { gap: 12, align: "center", children: /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer" }, onClick: toggleNavbar, children: /* @__PURE__ */ jsx(PanelLeftSolid, { size: 22, color: "secondary" }) }) })
+                isAiBtnVisible && !isAiOpened && /* @__PURE__ */ jsx(
+                  Center,
+                  {
+                    sx: {
+                      cursor: "pointer",
+                      borderRadius: 8,
+                      transition: "background 0.15s",
+                      background: theme.bg.navIconsBg,
+                      "&:hover": {
+                        background: theme.neutral.transparent30
+                      }
+                    },
+                    p: 4,
+                    onClick: onAiOpen,
+                    children: /* @__PURE__ */ jsx(Assistant, { size: 18, color: "primary" })
+                  }
+                )
               ] }),
-              menuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id)),
+              loading ? /* @__PURE__ */ jsx(Stack$1, { gap: 5, children: Array.from({ length: 6 }).map((_, idx) => /* @__PURE__ */ jsx(NavigationItemSkeleton, {}, idx)) }) : menuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id)),
               roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsx(Stack$1, { gap: 8, mt: 16, children: roomCategories.map((category) => /* @__PURE__ */ jsx(RoomCategory, { category }, category.id)) })
             ] }),
-            /* @__PURE__ */ jsx(Stack$1, { gap: 5, children: footerMenuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id)) })
+            /* @__PURE__ */ jsx(Stack$1, { gap: 5, children: loading ? Array.from({ length: 2 }).map((_, idx) => /* @__PURE__ */ jsx(NavigationItemSkeleton, {}, idx)) : footerMenuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id)) })
           ] })
         ] }) }),
         /* @__PURE__ */ jsx(AppShell.Main, { children }),
@@ -3058,7 +3171,7 @@ function OracleMessage({ oracleName, message }) {
 }
 function UserMessage({ message, sender }) {
   const theme = useUITheme();
-  return /* @__PURE__ */ jsxs(Box, { w: "fit-content", bg: theme.colors.focusTransparent10, sx: { borderRadius: 16 }, py: 12, px: 16, mb: 32, children: [
+  return /* @__PURE__ */ jsxs(Box, { w: "fit-content", bg: theme.bg.navIconsBg, sx: { borderRadius: 16 }, py: 12, px: 16, mb: 32, children: [
     /* @__PURE__ */ jsx(Text$1, { c: theme.text.overPicture, fz: 12, children: sender }),
     /* @__PURE__ */ jsx(Text$1, { c: theme.text.overPicture, mt: 10, sx: { wordBreak: "break-all" }, children: message }, message)
   ] });
@@ -4378,7 +4491,8 @@ function FloatingInput({
       className,
       css: () => ({
         backgroundColor: "transparent",
-        borderRadius: 24,
+        borderRadius: 20,
+        outline: `1px solid ${theme.colors.focus}`,
         paddingTop: 16,
         position: "relative",
         animation: `${fadeIn} 0.3s ease-out`,
@@ -4475,7 +4589,7 @@ function FloatingInput({
           Box,
           {
             p: 16,
-            bg: theme.bg.glassmorphics,
+            bg: theme.bg.navSpaces,
             w: 340,
             pos: "absolute",
             left: "50%",
@@ -5509,13 +5623,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = lazy(() => import("./index-BYSvOzsh.js"));
-const Header$1 = lazy(() => import("./index-fNXZD1uS.js"));
-const Content = lazy(() => import("./index-V6nXvrtz.js"));
+const MainAction = lazy(() => import("./index-Bbq_TLZu.js"));
+const Header$1 = lazy(() => import("./index-BNQTKXpP.js"));
+const Content = lazy(() => import("./index-D_iadqlc.js"));
 const Map = lazy(() => import("./index-D5Ufmf-s.js"));
 const CustomContent = lazy(() => import("./index-DsYjW_4y.js"));
-const Assets = lazy(() => import("./index-CFSb7f2s.js"));
-const Actions = lazy(() => import("./index-yCF1_HyR.js"));
+const Assets = lazy(() => import("./index-7TeP_0qf.js"));
+const Actions = lazy(() => import("./index-BB7TxyW2.js"));
 const HOVER_BORDER_WIDTH = 1;
 function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
   const wrapperRef = useRef(null);
@@ -10737,72 +10851,73 @@ function NavigationBar({
   ] });
 }
 export {
-  GroupActivity as $,
+  FilterTags as $,
   Avatar as A,
   Button as B,
   CARD_HEADER_HEIGHT as C,
-  CardUserFollowUp as D,
-  Chart$1 as E,
+  CardOutput as D,
+  CardUserFollowUp as E,
   FeedbackMessage as F,
-  Checkbox as G,
-  CheckboxGroup as H,
+  Chart$1 as G,
+  Checkbox as H,
   IconButton as I,
-  ComboBox as J,
-  DomainToolbar as K,
+  CheckboxGroup as J,
+  ComboBox as K,
   Loader as L,
   MoreMenu as M,
-  DropDown as N,
+  DomainToolbar as N,
   OracleMessage as O,
-  DomainToolbarTypes as P,
-  FloatingInput as Q,
-  EcosystemCard as R,
+  DropDown as P,
+  DomainToolbarTypes as Q,
+  FloatingInput as R,
   Spacer as S,
   Typography as T,
   UserMessage as U,
-  EntityList as V,
-  Event as W,
-  ExpandableButton as X,
-  FeaturedCard as Y,
-  FilterDropDown as Z,
-  FilterTags as _,
+  EcosystemCard as V,
+  EntityList as W,
+  Event as X,
+  ExpandableButton as Y,
+  FeaturedCard as Z,
+  FilterDropDown as _,
   Tag as a,
-  GroupSelector as a0,
-  HandlerSodaCard as a1,
-  HtmlRender as a2,
-  ImpactCreditState as a3,
-  Layout as a4,
-  Modal as a5,
-  ModalSearch as a6,
-  ModalSheet as a7,
-  OracleProtocolsSelection as a8,
-  OracleReply as a9,
-  WorkspaceModal as aA,
-  PageTitle as aa,
-  PlanCard as ab,
-  Post as ac,
-  ProfileCard as ad,
-  ProfileMenu as ae,
-  ProposalCard as af,
-  RoundedButton as ag,
-  ServiceOffering as ah,
-  SearchInput as ai,
-  Select as aj,
-  SodaCard as ak,
-  SomeComponent as al,
-  Switch as am,
-  SwitchText as an,
-  Table as ao,
-  TableList as ap,
-  TabNavigation as aq,
-  TabSelector as ar,
-  TextInput as as,
-  UiProvider as at,
-  FloatingModal as au,
-  NavigationBar as av,
-  NavigationItem as aw,
-  DomainModal as ax,
-  DomainSelector as ay,
-  MoreModal as az,
+  GroupActivity as a0,
+  GroupSelector as a1,
+  HandlerSodaCard as a2,
+  HtmlRender as a3,
+  ImpactCreditState as a4,
+  Layout as a5,
+  Modal as a6,
+  ModalSearch as a7,
+  ModalSheet as a8,
+  OracleProtocolsSelection as a9,
+  MoreModal as aA,
+  WorkspaceModal as aB,
+  OracleReply as aa,
+  PageTitle as ab,
+  PlanCard as ac,
+  Post as ad,
+  ProfileCard as ae,
+  ProfileMenu as af,
+  ProposalCard as ag,
+  RoundedButton as ah,
+  ServiceOffering as ai,
+  SearchInput as aj,
+  Select as ak,
+  SodaCard as al,
+  SomeComponent as am,
+  Switch as an,
+  SwitchText as ao,
+  Table as ap,
+  TableList as aq,
+  TabNavigation as ar,
+  TabSelector as as,
+  TextInput as at,
+  UiProvider as au,
+  FloatingModal as av,
+  NavigationBar as aw,
+  NavigationItem as ax,
+  DomainModal as ay,
+  DomainSelector as az,
   ActionButton as b,
   cutText as c,
   Tooltip$1 as d,
@@ -10816,17 +10931,17 @@ export {
   ActivityCard as l,
   AIResponse as m,
   AIInputBar as n,
-  AppShellNavigation as o,
-  AvatarInfo as p,
-  ButtonBasic as q,
-  ButtonReadOnly as r,
-  ButtonSubtle as s,
-  Card as t,
-  CardAction as u,
-  CardEntity as v,
-  CardHeader as w,
-  CardHero as x,
-  CardSelector as y,
-  CardOutput as z
+  AIChatToolbar as o,
+  AppShellNavigation as p,
+  AvatarInfo as q,
+  ButtonBasic as r,
+  ButtonReadOnly as s,
+  ButtonSubtle as t,
+  Card as u,
+  CardAction as v,
+  CardEntity as w,
+  CardHeader as x,
+  CardHero as y,
+  CardSelector as z
 };
-//# sourceMappingURL=components-DiauxYoY.js.map
+//# sourceMappingURL=components-BeF0rZJR.js.map