@axiom-lattice/react-sdk 2.1.36 → 2.1.37

package/dist/index.d.mts

@@ -1117,6 +1117,11 @@ interface LatticeChatShellConfig {
      * Defaults to "Lattice"
      */
     sidebarLogoText?: string;
+    /**
+     * Custom logo icon component
+     * If not provided, defaults to Cpu icon
+     */
+    sidebarLogoIcon?: React.ReactNode;
 }
 /**
  * Lattice Chat Shell context value interface

package/dist/index.d.ts

@@ -1117,6 +1117,11 @@ interface LatticeChatShellConfig {
      * Defaults to "Lattice"
      */
     sidebarLogoText?: string;
+    /**
+     * Custom logo icon component
+     * If not provided, defaults to Cpu icon
+     */
+    sidebarLogoIcon?: React.ReactNode;
 }
 /**
  * Lattice Chat Shell context value interface

package/dist/index.js

@@ -3121,14 +3121,86 @@ var useStyle = (0, import_antd_style2.createStyles)(({ token, css }) => {
         padding: 0;
       }
     `,
-    // Expanded sidebar styles
+    // Icon mode styles (collapsed view) - Clean & Simple
+    iconMode: css`
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      width: 100%;
+      padding: 16px 8px;
+      overflow-y: auto;
+      overflow-x: hidden;
+    `,
+    iconModeLogo: css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      margin: 8px auto 16px auto;
+      flex-shrink: 0;
+      border-radius: 12px;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        background: rgba(0, 0, 0, 0.04);
+      }
+    `,
+    iconModeContainer: css`
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      flex: 1;
+      overflow-y: auto;
+    `,
+    iconModeDivider: css`
+      width: 24px;
+      height: 1px;
+      background: ${token.colorBorder};
+      margin: 8px auto;
+      flex-shrink: 0;
+    `,
+    iconModeGroup: css`
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      align-items: center;
+    `,
+    iconModeButton: css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+      border: 1px solid transparent;
+      background: transparent;
+      color: ${token.colorTextSecondary};
+      cursor: pointer;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        background: rgba(0, 0, 0, 0.04);
+        color: ${token.colorPrimary};
+      }
+      
+      &:active {
+        background: rgba(0, 0, 0, 0.08);
+      }
+      
+      .lucide {
+        width: 22px;
+        height: 22px;
+      }
+    `,
+    // Expanded sidebar styles - Clean & Simple
     expandedMenu: css`
       display: flex;
       flex-direction: column;
       height: 100%;
       width: 100%;
-      padding: ${token.paddingMD}px;
-      gap: ${token.marginSM}px;
+      padding: 16px;
+      gap: 8px;
       overflow-y: auto;
       overflow-x: hidden;
     `,
@@ -3139,7 +3211,7 @@ var useStyle = (0, import_antd_style2.createStyles)(({ token, css }) => {
       padding: 8px 12px;
       margin-bottom: 16px;
       font-size: 18px;
-      font-weight: 700;
+      font-weight: 600;
       color: ${token.colorText};
       white-space: nowrap;
       overflow: hidden;
@@ -3154,7 +3226,7 @@ var useStyle = (0, import_antd_style2.createStyles)(({ token, css }) => {
       }
       
       .logo-text {
-        transition: opacity 0.3s ease, width 0.3s ease;
+        transition: all 0.2s ease;
         opacity: 1;
       }
       
@@ -3169,25 +3241,29 @@ var useStyle = (0, import_antd_style2.createStyles)(({ token, css }) => {
       justify-content: center;
       gap: 8px;
       padding: 10px 16px;
-      background: ${token.colorBgContainer};
-      border: 1px solid ${token.colorBorder};
-      border-radius: ${token.borderRadius}px;
+      background: ${token.colorPrimary};
+      border: none;
+      border-radius: 20px;
       margin: 0 12px 16px 12px;
       cursor: pointer;
-      transition: all 0.3s ease;
+      transition: all 0.2s ease;
       font-size: 14px;
-      color: ${token.colorText};
+      font-weight: 600;
+      color: white;
       white-space: nowrap;
       overflow: hidden;
       
       &:hover {
-        background: ${token.colorBgTextHover};
-        border-color: ${token.colorPrimary};
-        color: ${token.colorPrimary};
+        opacity: 0.9;
+        transform: translateY(-1px);
+      }
+      
+      &:active {
+        transform: translateY(0);
       }
       
       .btn-text {
-        transition: opacity 0.3s ease, width 0.3s ease;
+        transition: all 0.2s ease;
         opacity: 1;
       }
       
@@ -3197,7 +3273,7 @@ var useStyle = (0, import_antd_style2.createStyles)(({ token, css }) => {
         height: 40px;
         padding: 0;
         margin: 0 auto 16px auto;
-        border-radius: ${token.borderRadius}px;
+        border-radius: 10px;
         
         .btn-text {
           opacity: 0;
@@ -3219,7 +3295,7 @@ var useStyle = (0, import_antd_style2.createStyles)(({ token, css }) => {
       margin-bottom: 4px;
       white-space: nowrap;
       overflow: hidden;
-      transition: opacity 0.3s ease;
+      transition: all 0.2s ease;
       
       &.collapsed {
         opacity: 0;
@@ -3233,33 +3309,45 @@ var useStyle = (0, import_antd_style2.createStyles)(({ token, css }) => {
       align-items: center;
       gap: 12px;
       padding: 10px 12px;
-      border-radius: ${token.borderRadius}px;
+      border-radius: 10px;
       color: ${token.colorText};
-      transition: all 0.2s;
+      transition: all 0.2s ease;
       cursor: pointer;
       border: none;
       background: transparent;
       width: 100%;
       text-align: left;
       font-size: 14px;
+      font-weight: 500;
       white-space: nowrap;
       overflow: hidden;
       
       &:hover {
-        background: ${token.colorBgTextHover};
+        background: rgba(0, 0, 0, 0.04);
+        color: ${token.colorPrimary};
+      }
+      
+      &:active {
+        background: rgba(0, 0, 0, 0.08);
       }
       
       .menu-icon {
         flex-shrink: 0;
-        width: 20px;
-        height: 20px;
+        width: 22px;
+        height: 22px;
         display: flex;
         align-items: center;
         justify-content: center;
+        color: ${token.colorTextSecondary};
+        transition: all 0.2s ease;
+      }
+      
+      &:hover .menu-icon {
+        color: ${token.colorPrimary};
       }
       
       .menu-label {
-        transition: opacity 0.3s ease, width 0.3s ease;
+        transition: all 0.2s ease;
         opacity: 1;
         flex: 1;
       }
@@ -3270,7 +3358,7 @@ var useStyle = (0, import_antd_style2.createStyles)(({ token, css }) => {
         width: 40px;
         height: 40px;
         margin: 0 auto;
-        border-radius: ${token.borderRadius}px;
+        border-radius: 10px;
         
         .menu-label {
           opacity: 0;
@@ -3279,43 +3367,38 @@ var useStyle = (0, import_antd_style2.createStyles)(({ token, css }) => {
         }
       }
     `,
-    menuToggleBtn: css`
-      position: absolute;
-      right: -12px;
-      top: 80px;
-      width: 24px;
-      height: 48px;
-      border-radius: 0 8px 8px 0;
-      background: ${token.colorBgContainer};
-      border: 1px solid ${token.colorBorder};
-      border-left: none;
-      cursor: pointer;
+    buttonContainerExpanded: css`
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      align-items: stretch;
+      flex: 1;
+      overflow-y: auto;
+    `,
+    collapseBtn: css`
       display: flex;
       align-items: center;
       justify-content: center;
-      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
-      z-index: 10;
-      transition: all 0.2s;
+      width: 32px;
+      height: 32px;
+      border-radius: 8px;
+      border: 1px solid ${token.colorBorder};
+      background: ${token.colorBgContainer};
+      cursor: pointer;
+      margin-left: auto;
+      transition: all 0.2s ease;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
       
       &:hover {
         background: ${token.colorBgTextHover};
-        width: 28px;
-        right: -14px;
+        border-color: ${token.colorPrimary};
+        color: ${token.colorPrimary};
       }
       
       .lucide {
-        width: 16px;
-        height: 16px;
-        color: ${token.colorTextSecondary};
+        width: 18px;
+        height: 18px;
       }
-    `,
-    buttonContainerExpanded: css`
-      display: flex;
-      flex-direction: column;
-      gap: ${token.marginXS}px;
-      align-items: stretch;
-      flex: 1;
-      overflow-y: auto;
     `
   };
 });
@@ -3334,7 +3417,7 @@ var ColumnLayout = ({
     menu && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
       {
-        className: `${styles.menu} ${"open"} ${sideAppVisible || menuCollapsed ? "collapsed" : ""}`,
+        className: `${styles.menu} ${"open"} ${sideAppVisible || menuCollapsed ? "collapsed" : "expanded"}`,
         children: [
           logo,
           menu
@@ -13401,7 +13484,7 @@ var MetricsConfigFormModal = ({
 var import_react61 = require("react");
 
 // src/components/Chat/ChatSidebar.tsx
-var import_react60 = require("react");
+var import_react60 = __toESM(require("react"));
 var import_antd61 = require("antd");
 var import_lucide_react13 = require("lucide-react");
 var import_antd_style21 = require("antd-style");
@@ -20355,7 +20438,7 @@ var ChatSidebar = ({
   const { styles } = useStyle();
   const { setSettingsModalOpen, config } = useLatticeChatShellContext();
   const { selectAssistant } = useAssistantContext();
-  const { openSideApp, sideAppVisible } = useChatUIContext();
+  const { openSideApp, sideAppVisible, setMenuCollapsed } = useChatUIContext();
   const workspaceContext = useWorkspaceContext();
   const [drawerStates, setDrawerStates] = (0, import_react60.useState)({});
   const [userExpanded, setUserExpanded] = (0, import_react60.useState)(config.sidebarDefaultExpanded ?? true);
@@ -20364,12 +20447,26 @@ var ChatSidebar = ({
     sidebarMode,
     sidebarShowToggle,
     sidebarShowNewAnalysis,
-    sidebarLogoText
+    sidebarLogoText,
+    sidebarLogoIcon
   } = config;
   const hasWorkspace = enableWorkspace && workspaceContext;
   const isExpandedMode = sidebarMode === "expanded";
-  const isExpanded = isExpandedMode && !sideAppVisible && userExpanded;
+  const [isIconView, setIsIconView] = (0, import_react60.useState)(!isExpandedMode || !userExpanded);
+  const isExpanded = isExpandedMode && !sideAppVisible && !isIconView;
   const isCollapsed = !isExpanded;
+  (0, import_react60.useEffect)(() => {
+    if (isExpandedMode) {
+      setMenuCollapsed(isIconView);
+    }
+  }, [isExpandedMode, isIconView, setMenuCollapsed]);
+  (0, import_react60.useEffect)(() => {
+    if (isExpandedMode) {
+      setIsIconView(!userExpanded);
+    } else {
+      setIsIconView(true);
+    }
+  }, [isExpandedMode, userExpanded]);
   const menuItems = (0, import_react60.useMemo)(() => {
     const items = [];
     for (const item of DEFAULT_MENU_ITEMS) {
@@ -20441,7 +20538,7 @@ var ChatSidebar = ({
   }, []);
   const handleToggleExpand = (0, import_react60.useCallback)(() => {
     if (!sideAppVisible) {
-      setUserExpanded((prev) => !prev);
+      setIsIconView((prev) => !prev);
     }
   }, [sideAppVisible]);
   const handleNewAnalysis = (0, import_react60.useCallback)(() => {
@@ -20461,21 +20558,48 @@ var ChatSidebar = ({
         return item.content;
     }
   }, []);
-  const renderIconMode = () => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: sidebarStyles.sidebar, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: sidebarStyles.buttonContainer, children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-    "button",
-    {
-      className: sidebarStyles.actionButton,
-      onClick: () => handleMenuClick(item),
-      title: item.name,
-      "aria-label": item.name,
-      children: item.icon
-    },
-    item.id
-  )) }) });
+  const renderIconMode = () => /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: `${sidebarStyles.sidebar} ${styles.iconMode}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: styles.iconModeLogo, children: sidebarLogoIcon || /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react13.Cpu, { size: 28, color: "#1677ff" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: styles.iconModeContainer, children: groupedItems.map(({ group, items }, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_react60.default.Fragment, { children: [
+      groupIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: styles.iconModeDivider }),
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: styles.iconModeGroup, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        "button",
+        {
+          className: styles.iconModeButton,
+          onClick: () => handleMenuClick(item),
+          title: item.name,
+          "aria-label": item.name,
+          children: item.icon
+        },
+        item.id
+      )) })
+    ] }, group || `group-${groupIndex}`)) }),
+    sidebarShowToggle && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      "button",
+      {
+        className: styles.iconModeButton,
+        onClick: handleToggleExpand,
+        title: "Expand sidebar",
+        "aria-label": "Expand sidebar",
+        style: { marginTop: "auto" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react13.ChevronRight, { size: 22 })
+      }
+    )
+  ] });
   const renderExpandedMode = () => /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: `${sidebarStyles.sidebar} ${styles.expandedMenu}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: `${styles.expandedMenuLogo} ${isCollapsed ? "collapsed" : ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "logo-icon", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react13.Cpu, { size: 28, color: "#1677ff" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "logo-text", children: sidebarLogoText })
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "logo-icon", children: sidebarLogoIcon || /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react13.Cpu, { size: 28, color: "#1677ff" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "logo-text", children: sidebarLogoText }),
+      sidebarShowToggle && !sideAppVisible && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        "button",
+        {
+          className: styles.collapseBtn,
+          onClick: handleToggleExpand,
+          title: "Collapse sidebar",
+          "aria-label": "Collapse sidebar",
+          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react13.PanelLeftClose, { size: 18 })
+        }
+      )
     ] }),
     sidebarShowNewAnalysis && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
       "button",
@@ -20504,20 +20628,10 @@ var ChatSidebar = ({
         },
         item.id
       ))
-    ] }, group || "ungrouped")) }),
-    isExpandedMode && sidebarShowToggle && !sideAppVisible && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-      "button",
-      {
-        className: styles.menuToggleBtn,
-        onClick: handleToggleExpand,
-        title: isExpanded ? "Collapse sidebar" : "Expand sidebar",
-        "aria-label": isExpanded ? "Collapse sidebar" : "Expand sidebar",
-        children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react13.ChevronLeft, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react13.ChevronRight, { size: 16 })
-      }
-    )
+    ] }, group || "ungrouped")) })
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
-    isExpandedMode ? renderExpandedMode() : renderIconMode(),
+    isIconView ? renderIconMode() : renderExpandedMode(),
     menuItems.filter((item) => item.type === "drawer").map((item) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       import_antd61.Drawer,
       {