@axiom-lattice/react-sdk 2.1.18 → 2.1.20

package/dist/index.d.mts

@@ -430,6 +430,7 @@ type AgentChatProps = {
     thread_id?: string;
     assistant_id: string;
     menu?: React__default.ReactNode;
+    header?: React__default.ReactNode;
 } & ChatingProps;
 declare const LatticeChat: React__default.FC<AgentChatProps>;
 

package/dist/index.d.ts

@@ -430,6 +430,7 @@ type AgentChatProps = {
     thread_id?: string;
     assistant_id: string;
     menu?: React__default.ReactNode;
+    header?: React__default.ReactNode;
 } & ChatingProps;
 declare const LatticeChat: React__default.FC<AgentChatProps>;
 

package/dist/index.js

@@ -1024,8 +1024,8 @@ var useStyle = (0, import_antd_style.createStyles)(({ token, css }) => {
       font-family: ${token.fontFamily}, sans-serif;
       position: relative;
       overflow: hidden;
-      padding: 16px;
-      gap: 16px;
+      padding: 8px;
+      gap: 8px;
 
       .ant-prompts {
         color: ${token.colorText};
@@ -1046,14 +1046,14 @@ var useStyle = (0, import_antd_style.createStyles)(({ token, css }) => {
       &.open {
         background: transparent;
         box-shadow: none;
-        margin-left: -16px;
+        margin-left: -8px;
         height: 100%;
       }
 
       &.collapsed {
-        width: 16px;
+        width: 8px;
         height: 100%;
-        margin-right: -16px;
+        margin-right: -8px;
         .ant-conversations {
           width: 64px;
         }
@@ -1568,6 +1568,7 @@ var mdComponents = {
 
 // src/components/GenUI/MDResponse.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var memoizedMdComponents = mdComponents;
 var useStyles = (0, import_antd_style2.createStyles)(({ token, css }) => ({
   markdownTableContainer: css`
     overflow-x: auto;
@@ -1657,10 +1658,11 @@ var MDResponse = ({
   noGenUI
 }) => {
   const { styles } = useStyles();
+  const stableComponents = (0, import_react9.useMemo)(() => memoizedMdComponents, []);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: styles.markdownContainer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_x_markdown.default,
     {
-      components: mdComponents,
+      components: stableComponents,
       content,
       paragraphTag: "div"
     }
@@ -3800,7 +3802,17 @@ var AgentHeader = (props) => {
         style: { padding: 8 },
         variant: "borderless",
         description: description ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text10, { ellipsis: { tooltip: description }, children: description }) : void 0,
-        icon: avatar ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_antd18.Avatar, { src: avatar, size: 48 }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_antd18.Avatar, { size: 48, children: name?.charAt(0).toUpperCase() }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: avatar ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_antd18.Avatar, { src: avatar, size: 48 }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_antd18.Avatar, { size: 48, children: name?.charAt(0).toUpperCase() })
+          }
+        ),
         title: name ? name : void 0,
         extra: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_antd18.Space, { children: [
           extra,
@@ -4492,7 +4504,7 @@ var SideAppViewBrowser = () => {
 // src/components/Chat/LatticeChat.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var LatticeChat = (props) => {
-  const { assistant_id, thread_id = "", menu, ...chatingProps } = props;
+  const { assistant_id, thread_id = "", menu, header, ...chatingProps } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     AgentThreadProvider,
     {
@@ -4503,12 +4515,26 @@ var LatticeChat = (props) => {
         enableReturnStateWhenStreamCompleted: true,
         enableResumeStream: true
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChatUIContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-        ColumnLayout,
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChatUIContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        "div",
         {
-          menu,
-          left: thread_id ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Chating, { ...chatingProps }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: "\u9700\u8981\u5148\u521B\u5EFA\u4F1A\u8BDD" }),
-          right: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SideAppViewBrowser, {})
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "100%"
+          },
+          children: [
+            header,
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              ColumnLayout,
+              {
+                menu,
+                left: thread_id ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Chating, { ...chatingProps }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: "\u9700\u8981\u5148\u521B\u5EFA\u4F1A\u8BDD" }),
+                right: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SideAppViewBrowser, {})
+              }
+            )
+          ]
         }
       ) })
     }
@@ -5300,6 +5326,11 @@ var useStyles3 = (0, import_antd_style11.createStyles)(({ token, css }) => ({
     background: transparent;
     border-radius: ${token.borderRadiusLG}px;
     overflow: visible;
+
+    &.firstTimeHighlight {
+      border: 2px dashed ${token.colorPrimary};
+      background: ${token.colorPrimaryBg};
+    }
   `,
   content: css`
     flex: 1;
@@ -5458,8 +5489,34 @@ var useStyles3 = (0, import_antd_style11.createStyles)(({ token, css }) => ({
   divider: css`
     margin: ${token.marginMD}px 0;
     border-color: ${token.colorBorderSecondary};
+  `,
+  hintTooltip: css`
+    position: absolute;
+    top: ${token.paddingMD}px;
+    left: ${token.paddingMD}px;
+    right: ${token.paddingMD}px;
+    padding: ${token.paddingSM}px ${token.paddingMD}px;
+    background: ${token.colorPrimary};
+    color: ${token.colorTextLightSolid};
+    border-radius: ${token.borderRadius}px;
+    font-size: ${token.fontSizeSM}px;
+    z-index: 1001;
+    animation: slideIn 0.3s ease-out;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+    @keyframes slideIn {
+      from {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
   `
 }));
+var FIRST_COLLAPSE_KEY = "chat-sidebar-first-collapse-seen";
 var ChatSidebar = ({
   onSettingsClick,
   defaultCollapsed = false
@@ -5468,6 +5525,8 @@ var ChatSidebar = ({
   const { setMenuCollapsed, menuCollapsed, sideAppVisible } = useChatUIContext();
   const { setSettingsModalOpen } = useLatticeChatShellContext();
   const [isHovered, setIsHovered] = (0, import_react24.useState)(false);
+  const [isFirstCollapse, setIsFirstCollapse] = (0, import_react24.useState)(false);
+  const prevIsCollapsedRef = (0, import_react24.useRef)(false);
   const handleToggleCollapse = () => {
     setMenuCollapsed(!menuCollapsed);
   };
@@ -5476,56 +5535,88 @@ var ChatSidebar = ({
     onSettingsClick?.();
   };
   const isCollapsed = menuCollapsed || sideAppVisible;
+  (0, import_react24.useEffect)(() => {
+    const prevIsCollapsed = prevIsCollapsedRef.current;
+    if (isCollapsed) {
+      const hasSeenFirstCollapse = localStorage.getItem(FIRST_COLLAPSE_KEY);
+      if (!hasSeenFirstCollapse) {
+        setIsFirstCollapse(true);
+      }
+    } else if (prevIsCollapsed && !isCollapsed) {
+      setIsFirstCollapse((prev) => {
+        if (prev) {
+          return false;
+        }
+        return prev;
+      });
+    }
+    prevIsCollapsedRef.current = isCollapsed;
+  }, [isCollapsed]);
   const handleMouseEnter = () => {
     if (isCollapsed) {
       setIsHovered(true);
+      if (isFirstCollapse) {
+        localStorage.setItem(FIRST_COLLAPSE_KEY, "true");
+        setIsFirstCollapse(false);
+      }
     }
   };
   const handleMouseLeave = () => {
     setIsHovered(false);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
       {
-        className: styles.sidebar,
+        className: `${styles.sidebar} ${isFirstCollapse ? "firstTimeHighlight" : ""}`,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        children: !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: styles.content, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: styles.section, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: styles.sectionTitle, children: "Assistants" }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AssistantList, {})
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_antd25.Tooltip,
+            {
+              title: "Move the mouse over the collapsed sidebar to see the assistants and threads",
+              open: isFirstCollapse,
+              placement: "right",
+              children: isFirstCollapse && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { marginTop: "400px" } })
+            }
+          ),
+          !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: styles.content, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: styles.section, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: styles.sectionTitle, children: "Assistants" }),
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AssistantList, {})
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_antd25.Divider, { className: styles.divider }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: styles.section, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: styles.sectionTitle, children: "Threads" }),
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AgentConversations, {})
+              ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_antd25.Divider, { className: styles.divider }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: styles.section, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: styles.sectionTitle, children: "Threads" }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AgentConversations, {})
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: styles.footer, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                "button",
+                {
+                  className: styles.actionButton,
+                  onClick: handleToggleCollapse,
+                  title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                  "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                  children: isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons14.MenuUnfoldOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons14.MenuFoldOutlined, {})
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                "button",
+                {
+                  className: styles.actionButton,
+                  onClick: handleSettingsClick,
+                  title: "Settings",
+                  "aria-label": "Settings",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons14.SettingOutlined, {})
+                }
+              )
             ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: styles.footer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-              "button",
-              {
-                className: styles.actionButton,
-                onClick: handleToggleCollapse,
-                title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                children: isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons14.MenuUnfoldOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons14.MenuFoldOutlined, {})
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-              "button",
-              {
-                className: styles.actionButton,
-                onClick: handleSettingsClick,
-                title: "Settings",
-                "aria-label": "Settings",
-                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons14.SettingOutlined, {})
-              }
-            )
           ] })
-        ] })
+        ]
       }
     ),
     isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(