@axiom-lattice/react-sdk 2.1.24 → 2.1.25

package/dist/index.d.mts

@@ -873,10 +873,6 @@ declare const ScheduleButton: React__default.FC<ScheduleButtonProps>;
  * Props for AssistantFlow component
  */
 interface AssistantFlowProps {
-    /**
-     * List of assistants to display
-     */
-    assistants: Assistant[];
     /**
      * Callback when an assistant node is clicked
      */
@@ -911,18 +907,10 @@ declare const AssistantNode: React__default.FC<NodeProps<Node<AssistantNodeData>
  * Props for SkillFlow component
  */
 interface SkillFlowProps {
-    /**
-     * List of skills to display
-     */
-    skills: Skill[];
     /**
      * Callback when a skill node is clicked
      */
     onNodeClick?: (skill: Skill) => void;
-    /**
-     * Callback to refresh skills list after creating a new skill
-     */
-    onRefresh?: () => void | Promise<void>;
 }
 /**
  * SkillFlow component - Canvas for visualizing skills
@@ -942,6 +930,10 @@ interface SkillNodeData extends Record<string, unknown> {
      * Click handler for the node
      */
     onClick?: (skill: Skill) => void;
+    /**
+     * Callback when a skill is deleted
+     */
+    onDelete?: () => void | Promise<void>;
 }
 /**
  * Custom node component for displaying skills in the flow

package/dist/index.d.ts

@@ -873,10 +873,6 @@ declare const ScheduleButton: React__default.FC<ScheduleButtonProps>;
  * Props for AssistantFlow component
  */
 interface AssistantFlowProps {
-    /**
-     * List of assistants to display
-     */
-    assistants: Assistant[];
     /**
      * Callback when an assistant node is clicked
      */
@@ -911,18 +907,10 @@ declare const AssistantNode: React__default.FC<NodeProps<Node<AssistantNodeData>
  * Props for SkillFlow component
  */
 interface SkillFlowProps {
-    /**
-     * List of skills to display
-     */
-    skills: Skill[];
     /**
      * Callback when a skill node is clicked
      */
     onNodeClick?: (skill: Skill) => void;
-    /**
-     * Callback to refresh skills list after creating a new skill
-     */
-    onRefresh?: () => void | Promise<void>;
 }
 /**
  * SkillFlow component - Canvas for visualizing skills
@@ -942,6 +930,10 @@ interface SkillNodeData extends Record<string, unknown> {
      * Click handler for the node
      */
     onClick?: (skill: Skill) => void;
+    /**
+     * Callback when a skill is deleted
+     */
+    onDelete?: () => void | Promise<void>;
 }
 /**
  * Custom node component for displaying skills in the flow

package/dist/index.js

@@ -7128,18 +7128,44 @@ var AssistantNode_default = AssistantNode;
 
 // src/components/Chat/AssistantFlow.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var AssistantFlowInner = ({
-  assistants,
-  onNodeClick
-}) => {
+var AssistantFlowInner = ({ onNodeClick }) => {
   const [nodes, setNodes, onNodesChange] = (0, import_react30.useNodesState)([]);
   const [edges, setEdges, onEdgesChange] = (0, import_react30.useEdgesState)([]);
+  const [assistants, setAssistants] = (0, import_react29.useState)([]);
+  const [assistantsLoading, setAssistantsLoading] = (0, import_react29.useState)(false);
+  const { config } = useLatticeChatShellContext();
   const nodeTypes = (0, import_react29.useMemo)(
     () => ({
       assistant: AssistantNode_default
     }),
     []
   );
+  const fetchAssistants = async () => {
+    setAssistantsLoading(true);
+    try {
+      const headers = {};
+      if (config.apiKey) {
+        headers["Authorization"] = `Bearer ${config.apiKey}`;
+      }
+      const response = await fetch(`${config.baseURL}/api/assistants`, {
+        headers
+      });
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success && data.data && Array.isArray(data.data.records)) {
+          setAssistants(data.data.records);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch assistants:", error);
+      setAssistants([]);
+    } finally {
+      setAssistantsLoading(false);
+    }
+  };
+  (0, import_react29.useEffect)(() => {
+    fetchAssistants();
+  }, []);
   (0, import_react29.useEffect)(() => {
     if (!assistants || assistants.length === 0) {
       setNodes([]);
@@ -7329,6 +7355,22 @@ var AssistantFlowInner = ({
     setNodes(initialNodes);
     setEdges(initialEdges);
   }, [assistants, setNodes, setEdges, onNodeClick]);
+  if (assistantsLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          background: "#fafafa"
+        },
+        children: "Loading assistants..."
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { width: "100%", height: "100%", background: "#fafafa" }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     import_react30.ReactFlow,
     {
@@ -7360,6 +7402,7 @@ var import_react31 = require("react");
 var import_react32 = require("@xyflow/react");
 var import_antd29 = require("antd");
 var import_icons17 = require("@ant-design/icons");
+var import_client_sdk8 = require("@axiom-lattice/client-sdk");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var { Text: Text15 } = import_antd29.Typography;
 var { TextArea } = import_antd29.Input;
@@ -7391,10 +7434,20 @@ var getBadgeColor2 = (name) => {
 var SkillNode = ({ data }) => {
   const { token } = import_antd29.theme.useToken();
   const { config } = useLatticeChatShellContext();
+  const client = (0, import_react31.useMemo)(
+    () => new import_client_sdk8.Client({
+      baseURL: config.baseURL,
+      apiKey: config.apiKey || "",
+      assistantId: "",
+      // Not needed for skills
+      transport: "sse"
+    }),
+    [config.baseURL, config.apiKey]
+  );
   if (!data) {
     return null;
   }
-  const { skill, onClick } = data;
+  const { skill, onClick, onDelete } = data;
   if (!skill) {
     return null;
   }
@@ -7458,45 +7511,26 @@ var SkillNode = ({ data }) => {
       [field]: value
     }));
   };
-  const handleDelete = () => {
-    import_antd29.Modal.confirm({
-      title: "Delete skill",
-      content: `Are you sure you want to delete "${currentSkill.name}"? This action cannot be undone.`,
-      okText: "Delete",
-      okType: "danger",
-      cancelText: "Cancel",
-      onOk: async () => {
-        try {
-          const headers = {};
-          if (config.apiKey) {
-            headers["Authorization"] = `Bearer ${config.apiKey}`;
-          }
-          const response = await fetch(
-            `${config.baseURL}/api/skills/${currentSkill.id}`,
-            {
-              method: "DELETE",
-              headers
-            }
-          );
-          let data2 = {};
-          try {
-            data2 = await response.json();
-          } catch {
-          }
-          if (response.ok && (data2.success ?? true)) {
-            import_antd29.message.success("Skill deleted successfully");
-            setIsModalOpen(false);
-            onClick?.(currentSkill);
-          } else {
-            import_antd29.message.error(data2.message || "Failed to delete skill");
-          }
-        } catch (error) {
-          import_antd29.message.error(
-            error?.message || "An error occurred while deleting the skill"
-          );
-        }
+  const handleDelete = async (e) => {
+    e?.stopPropagation();
+    e?.preventDefault();
+    try {
+      const skillId = currentSkill.id || currentSkill.name;
+      if (!skillId) {
+        import_antd29.message.error("Skill ID is missing");
+        return;
       }
-    });
+      await client.skills.delete(skillId);
+      import_antd29.message.success("Skill deleted successfully");
+      setIsModalOpen(false);
+      if (onDelete) {
+        await onDelete();
+      }
+    } catch (error) {
+      import_antd29.message.error(
+        error?.message || "An error occurred while deleting the skill"
+      );
+    }
   };
   const syncMetadataRows = (rows) => {
     setMetadataRows(rows);
@@ -8141,7 +8175,17 @@ var SkillNode = ({ data }) => {
                   children: "Edit Skill"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_antd29.Button, { danger: true, onClick: handleDelete, children: "Delete" }),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                import_antd29.Button,
+                {
+                  danger: true,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleDelete(e);
+                  },
+                  children: "Delete"
+                }
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 import_antd29.Button,
                 {
@@ -8807,21 +8851,46 @@ var CreateSkillModal_default = CreateSkillModal;
 
 // src/components/Chat/SkillFlow.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var SkillFlowInner = ({
-  skills,
-  onNodeClick,
-  onRefresh
-}) => {
+var SkillFlowInner = ({ onNodeClick }) => {
   const [nodes, setNodes, onNodesChange] = (0, import_react35.useNodesState)([]);
   const [edges, setEdges, onEdgesChange] = (0, import_react35.useEdgesState)([]);
   const [isCreateModalOpen, setIsCreateModalOpen] = (0, import_react34.useState)(false);
+  const [skills, setSkills] = (0, import_react34.useState)([]);
+  const [skillsLoading, setSkillsLoading] = (0, import_react34.useState)(false);
   const { token } = import_antd32.theme.useToken();
+  const { config } = useLatticeChatShellContext();
   const nodeTypes = (0, import_react34.useMemo)(
     () => ({
       skill: SkillNode_default
     }),
     []
   );
+  const fetchSkills = async () => {
+    setSkillsLoading(true);
+    try {
+      const headers = {};
+      if (config.apiKey) {
+        headers["Authorization"] = `Bearer ${config.apiKey}`;
+      }
+      const response = await fetch(`${config.baseURL}/api/skills`, {
+        headers
+      });
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success && data.data && Array.isArray(data.data.records)) {
+          setSkills(data.data.records);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch skills:", error);
+      setSkills([]);
+    } finally {
+      setSkillsLoading(false);
+    }
+  };
+  (0, import_react34.useEffect)(() => {
+    fetchSkills();
+  }, []);
   (0, import_react34.useEffect)(() => {
     if (!skills || skills.length === 0) {
       setNodes([]);
@@ -8911,7 +8980,8 @@ var SkillFlowInner = ({
             type: "skill",
             data: {
               skill,
-              onClick: () => onNodeClick?.(skill)
+              onClick: () => onNodeClick?.(skill),
+              onDelete: fetchSkills
             },
             position: { x, y }
           });
@@ -8950,10 +9020,24 @@ var SkillFlowInner = ({
     setEdges(initialEdges);
   }, [skills, setNodes, setEdges, onNodeClick]);
   const handleSkillCreated = async () => {
-    if (onRefresh) {
-      await onRefresh();
-    }
+    await fetchSkills();
   };
+  if (skillsLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          background: "#fafafa"
+        },
+        children: "Loading skills..."
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { style: { width: "100%", height: "100%", background: "#fafafa", position: "relative" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       import_react35.ReactFlow,
@@ -8975,7 +9059,7 @@ var SkillFlowInner = ({
       {
         style: {
           position: "absolute",
-          bottom: 20,
+          top: 20,
           right: 20,
           zIndex: 10
         },
@@ -9239,13 +9323,11 @@ var ChatSidebar = ({
   const { styles } = useStyles4();
   const { setMenuCollapsed, menuCollapsed, sideAppVisible } = useChatUIContext();
   const { setSettingsModalOpen, config } = useLatticeChatShellContext();
-  const { assistants, selectAssistant } = useAssistantContext();
+  const { selectAssistant } = useAssistantContext();
   const [isHovered, setIsHovered] = (0, import_react36.useState)(false);
   const [isFirstCollapse, setIsFirstCollapse] = (0, import_react36.useState)(false);
   const [isFlowModalOpen, setIsFlowModalOpen] = (0, import_react36.useState)(false);
   const [isSkillFlowModalOpen, setIsSkillFlowModalOpen] = (0, import_react36.useState)(false);
-  const [skills, setSkills] = (0, import_react36.useState)([]);
-  const [skillsLoading, setSkillsLoading] = (0, import_react36.useState)(false);
   const prevIsCollapsedRef = (0, import_react36.useRef)(false);
   const handleToggleCollapse = () => {
     setMenuCollapsed(!menuCollapsed);
@@ -9254,34 +9336,8 @@ var ChatSidebar = ({
     setSettingsModalOpen(true);
     onSettingsClick?.();
   };
-  const handleSkillFlowClick = async () => {
+  const handleSkillFlowClick = () => {
     setIsSkillFlowModalOpen(true);
-    if (skills.length === 0 && !skillsLoading) {
-      await fetchSkills();
-    }
-  };
-  const fetchSkills = async () => {
-    setSkillsLoading(true);
-    try {
-      const headers = {};
-      if (config.apiKey) {
-        headers["Authorization"] = `Bearer ${config.apiKey}`;
-      }
-      const response = await fetch(`${config.baseURL}/api/skills`, {
-        headers
-      });
-      if (response.ok) {
-        const data = await response.json();
-        if (data.success && data.data && Array.isArray(data.data.records)) {
-          setSkills(data.data.records);
-        }
-      }
-    } catch (error) {
-      console.error("Failed to fetch skills:", error);
-      setSkills([]);
-    } finally {
-      setSkillsLoading(false);
-    }
   };
   const isCollapsed = menuCollapsed || sideAppVisible;
   (0, import_react36.useEffect)(() => {
@@ -9460,6 +9516,7 @@ var ChatSidebar = ({
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       import_antd33.Modal,
       {
+        destroyOnHidden: true,
         title: "Assistant Overview",
         open: isFlowModalOpen,
         onCancel: () => setIsFlowModalOpen(false),
@@ -9473,7 +9530,6 @@ var ChatSidebar = ({
         children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           AssistantFlow_default,
           {
-            assistants,
             onNodeClick: (assistant) => {
               selectAssistant(assistant.id);
               setIsFlowModalOpen(false);
@@ -9485,6 +9541,7 @@ var ChatSidebar = ({
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       import_antd33.Modal,
       {
+        destroyOnHidden: true,
         title: "Skill Overview",
         open: isSkillFlowModalOpen,
         onCancel: () => setIsSkillFlowModalOpen(false),
@@ -9495,25 +9552,12 @@ var ChatSidebar = ({
           height: "calc(100vh - 120px)",
           padding: 0
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { width: "100%", height: "100%" }, children: skillsLoading ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          "div",
-          {
-            style: {
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              height: "100%"
-            },
-            children: "Loading skills..."
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           SkillFlow_default,
           {
-            skills,
             onNodeClick: (skill) => {
               console.log("Skill clicked:", skill);
-            },
-            onRefresh: fetchSkills
+            }
           }
         ) })
       }