@axiom-lattice/react-sdk 2.1.24 → 2.1.25

package/dist/index.mjs

@@ -6373,7 +6373,7 @@ var AgentConversations = () => {
 };
 
 // src/components/Chat/ChatSidebar.tsx
-import { useState as useState27, useEffect as useEffect20, useRef as useRef13 } from "react";
+import { useState as useState28, useEffect as useEffect20, useRef as useRef13 } from "react";
 import { Divider as Divider4, Tooltip as Tooltip8, Modal as Modal3, Button as Button20 } from "antd";
 import {
   MenuFoldOutlined,
@@ -6427,7 +6427,7 @@ var AssistantList = () => {
 import { createStyles as createStyles12 } from "antd-style";
 
 // src/components/Chat/AssistantFlow.tsx
-import { useMemo as useMemo10, useEffect as useEffect17 } from "react";
+import { useMemo as useMemo10, useEffect as useEffect17, useState as useState24 } from "react";
 import {
   ReactFlow,
   Background,
@@ -7215,18 +7215,44 @@ var AssistantNode_default = AssistantNode;
 
 // src/components/Chat/AssistantFlow.tsx
 import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
-var AssistantFlowInner = ({
-  assistants,
-  onNodeClick
-}) => {
+var AssistantFlowInner = ({ onNodeClick }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [assistants, setAssistants] = useState24([]);
+  const [assistantsLoading, setAssistantsLoading] = useState24(false);
+  const { config } = useLatticeChatShellContext();
   const nodeTypes = useMemo10(
     () => ({
       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);
+    }
+  };
+  useEffect17(() => {
+    fetchAssistants();
+  }, []);
   useEffect17(() => {
     if (!assistants || assistants.length === 0) {
       setNodes([]);
@@ -7416,6 +7442,22 @@ var AssistantFlowInner = ({
     setNodes(initialNodes);
     setEdges(initialEdges);
   }, [assistants, setNodes, setEdges, onNodeClick]);
+  if (assistantsLoading) {
+    return /* @__PURE__ */ jsx44(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          background: "#fafafa"
+        },
+        children: "Loading assistants..."
+      }
+    );
+  }
   return /* @__PURE__ */ jsx44("div", { style: { width: "100%", height: "100%", background: "#fafafa" }, children: /* @__PURE__ */ jsxs24(
     ReactFlow,
     {
@@ -7436,7 +7478,7 @@ var AssistantFlow = (props) => /* @__PURE__ */ jsx44(ReactFlowProvider, { childr
 var AssistantFlow_default = AssistantFlow;
 
 // src/components/Chat/SkillFlow.tsx
-import { useMemo as useMemo12, useEffect as useEffect19, useState as useState26 } from "react";
+import { useMemo as useMemo12, useEffect as useEffect19, useState as useState27 } from "react";
 import {
   ReactFlow as ReactFlow2,
   Background as Background2,
@@ -7450,7 +7492,7 @@ import { Button as Button19, theme as theme6 } from "antd";
 import { PlusOutlined as PlusOutlined3 } from "@ant-design/icons";
 
 // src/components/Chat/SkillNode.tsx
-import { useEffect as useEffect18, useMemo as useMemo11, useState as useState24 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo11, useState as useState25 } from "react";
 import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
 import {
   Avatar as Avatar6,
@@ -7474,6 +7516,7 @@ import {
   CopyOutlined as CopyOutlined3,
   PlusOutlined
 } from "@ant-design/icons";
+import { Client as Client4 } from "@axiom-lattice/client-sdk";
 import { Fragment as Fragment5, jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
 var { Text: Text15 } = Typography17;
 var { TextArea } = Input;
@@ -7505,14 +7548,24 @@ var getBadgeColor2 = (name) => {
 var SkillNode = ({ data }) => {
   const { token } = theme4.useToken();
   const { config } = useLatticeChatShellContext();
+  const client = useMemo11(
+    () => new Client4({
+      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;
   }
-  const [currentSkill, setCurrentSkill] = useState24(skill);
+  const [currentSkill, setCurrentSkill] = useState25(skill);
   const badgeColor = getBadgeColor2(currentSkill.name);
   const initials = currentSkill.name?.split("-").map((n) => n.charAt(0)).join("").toUpperCase().slice(0, 2) || "SK";
   const hasSubSkills = currentSkill.subSkills && currentSkill.subSkills.length > 0;
@@ -7534,19 +7587,19 @@ var SkillNode = ({ data }) => {
   const handleCopy = (text) => {
     navigator.clipboard.writeText(text);
   };
-  const [isEditing, setIsEditing] = useState24(false);
-  const [draftSkill, setDraftSkill] = useState24({
+  const [isEditing, setIsEditing] = useState25(false);
+  const [draftSkill, setDraftSkill] = useState25({
     ...skill,
     id: skill.name
   });
-  const [metadataRows, setMetadataRows] = useState24(
+  const [metadataRows, setMetadataRows] = useState25(
     metadataEntries.map(([key, value]) => ({
       key,
       value
     }))
   );
-  const [isModalOpen, setIsModalOpen] = useState24(false);
-  const [saving, setSaving] = useState24(false);
+  const [isModalOpen, setIsModalOpen] = useState25(false);
+  const [saving, setSaving] = useState25(false);
   useEffect18(() => {
     setIsEditing(false);
     setCurrentSkill(skill);
@@ -7572,45 +7625,26 @@ var SkillNode = ({ data }) => {
       [field]: value
     }));
   };
-  const handleDelete = () => {
-    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)) {
-            message5.success("Skill deleted successfully");
-            setIsModalOpen(false);
-            onClick?.(currentSkill);
-          } else {
-            message5.error(data2.message || "Failed to delete skill");
-          }
-        } catch (error) {
-          message5.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) {
+        message5.error("Skill ID is missing");
+        return;
       }
-    });
+      await client.skills.delete(skillId);
+      message5.success("Skill deleted successfully");
+      setIsModalOpen(false);
+      if (onDelete) {
+        await onDelete();
+      }
+    } catch (error) {
+      message5.error(
+        error?.message || "An error occurred while deleting the skill"
+      );
+    }
   };
   const syncMetadataRows = (rows) => {
     setMetadataRows(rows);
@@ -8255,7 +8289,17 @@ var SkillNode = ({ data }) => {
                   children: "Edit Skill"
                 }
               ),
-              /* @__PURE__ */ jsx45(Button17, { danger: true, onClick: handleDelete, children: "Delete" }),
+              /* @__PURE__ */ jsx45(
+                Button17,
+                {
+                  danger: true,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleDelete(e);
+                  },
+                  children: "Delete"
+                }
+              ),
               /* @__PURE__ */ jsx45(
                 Button17,
                 {
@@ -8629,7 +8673,7 @@ var SkillNode = ({ data }) => {
 var SkillNode_default = SkillNode;
 
 // src/components/Chat/CreateSkillModal.tsx
-import { useState as useState25 } from "react";
+import { useState as useState26 } from "react";
 import {
   Modal as Modal2,
   Form,
@@ -8650,11 +8694,11 @@ var CreateSkillModal = ({
   onSuccess
 }) => {
   const [form] = Form.useForm();
-  const [loading, setLoading] = useState25(false);
+  const [loading, setLoading] = useState26(false);
   const { config } = useLatticeChatShellContext();
   const { token } = theme5.useToken();
   const defaultMetadataRows = [{ key: "category", value: "global" }];
-  const [metadataRows, setMetadataRows] = useState25(defaultMetadataRows);
+  const [metadataRows, setMetadataRows] = useState26(defaultMetadataRows);
   const handleSubmit = async () => {
     try {
       const values = await form.validateFields();
@@ -8929,21 +8973,46 @@ var CreateSkillModal_default = CreateSkillModal;
 
 // src/components/Chat/SkillFlow.tsx
 import { jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
-var SkillFlowInner = ({
-  skills,
-  onNodeClick,
-  onRefresh
-}) => {
+var SkillFlowInner = ({ onNodeClick }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState2([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState2([]);
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState26(false);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState27(false);
+  const [skills, setSkills] = useState27([]);
+  const [skillsLoading, setSkillsLoading] = useState27(false);
   const { token } = theme6.useToken();
+  const { config } = useLatticeChatShellContext();
   const nodeTypes = useMemo12(
     () => ({
       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);
+    }
+  };
+  useEffect19(() => {
+    fetchSkills();
+  }, []);
   useEffect19(() => {
     if (!skills || skills.length === 0) {
       setNodes([]);
@@ -9033,7 +9102,8 @@ var SkillFlowInner = ({
             type: "skill",
             data: {
               skill,
-              onClick: () => onNodeClick?.(skill)
+              onClick: () => onNodeClick?.(skill),
+              onDelete: fetchSkills
             },
             position: { x, y }
           });
@@ -9072,10 +9142,24 @@ var SkillFlowInner = ({
     setEdges(initialEdges);
   }, [skills, setNodes, setEdges, onNodeClick]);
   const handleSkillCreated = async () => {
-    if (onRefresh) {
-      await onRefresh();
-    }
+    await fetchSkills();
   };
+  if (skillsLoading) {
+    return /* @__PURE__ */ jsx47(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          background: "#fafafa"
+        },
+        children: "Loading skills..."
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs27("div", { style: { width: "100%", height: "100%", background: "#fafafa", position: "relative" }, children: [
     /* @__PURE__ */ jsxs27(
       ReactFlow2,
@@ -9097,7 +9181,7 @@ var SkillFlowInner = ({
       {
         style: {
           position: "absolute",
-          bottom: 20,
+          top: 20,
           right: 20,
           zIndex: 10
         },
@@ -9361,13 +9445,11 @@ var ChatSidebar = ({
   const { styles } = useStyles4();
   const { setMenuCollapsed, menuCollapsed, sideAppVisible } = useChatUIContext();
   const { setSettingsModalOpen, config } = useLatticeChatShellContext();
-  const { assistants, selectAssistant } = useAssistantContext();
-  const [isHovered, setIsHovered] = useState27(false);
-  const [isFirstCollapse, setIsFirstCollapse] = useState27(false);
-  const [isFlowModalOpen, setIsFlowModalOpen] = useState27(false);
-  const [isSkillFlowModalOpen, setIsSkillFlowModalOpen] = useState27(false);
-  const [skills, setSkills] = useState27([]);
-  const [skillsLoading, setSkillsLoading] = useState27(false);
+  const { selectAssistant } = useAssistantContext();
+  const [isHovered, setIsHovered] = useState28(false);
+  const [isFirstCollapse, setIsFirstCollapse] = useState28(false);
+  const [isFlowModalOpen, setIsFlowModalOpen] = useState28(false);
+  const [isSkillFlowModalOpen, setIsSkillFlowModalOpen] = useState28(false);
   const prevIsCollapsedRef = useRef13(false);
   const handleToggleCollapse = () => {
     setMenuCollapsed(!menuCollapsed);
@@ -9376,34 +9458,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;
   useEffect20(() => {
@@ -9582,6 +9638,7 @@ var ChatSidebar = ({
     /* @__PURE__ */ jsx48(
       Modal3,
       {
+        destroyOnHidden: true,
         title: "Assistant Overview",
         open: isFlowModalOpen,
         onCancel: () => setIsFlowModalOpen(false),
@@ -9595,7 +9652,6 @@ var ChatSidebar = ({
         children: /* @__PURE__ */ jsx48("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx48(
           AssistantFlow_default,
           {
-            assistants,
             onNodeClick: (assistant) => {
               selectAssistant(assistant.id);
               setIsFlowModalOpen(false);
@@ -9607,6 +9663,7 @@ var ChatSidebar = ({
     /* @__PURE__ */ jsx48(
       Modal3,
       {
+        destroyOnHidden: true,
         title: "Skill Overview",
         open: isSkillFlowModalOpen,
         onCancel: () => setIsSkillFlowModalOpen(false),
@@ -9617,25 +9674,12 @@ var ChatSidebar = ({
           height: "calc(100vh - 120px)",
           padding: 0
         },
-        children: /* @__PURE__ */ jsx48("div", { style: { width: "100%", height: "100%" }, children: skillsLoading ? /* @__PURE__ */ jsx48(
-          "div",
-          {
-            style: {
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              height: "100%"
-            },
-            children: "Loading skills..."
-          }
-        ) : /* @__PURE__ */ jsx48(
+        children: /* @__PURE__ */ jsx48("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx48(
           SkillFlow_default,
           {
-            skills,
             onNodeClick: (skill) => {
               console.log("Skill clicked:", skill);
-            },
-            onRefresh: fetchSkills
+            }
           }
         ) })
       }
@@ -9675,7 +9719,7 @@ var LatticeChatView = (props) => {
 };
 
 // src/components/Chat/SettingsModal.tsx
-import { useState as useState28, useEffect as useEffect21, useRef as useRef14 } from "react";
+import { useState as useState29, useEffect as useEffect21, useRef as useRef14 } from "react";
 import {
   Modal as Modal4,
   Input as Input3,
@@ -10064,7 +10108,7 @@ var SettingsModal = ({
 }) => {
   const { styles } = useStyles5();
   const { config: shellConfig, updateConfigValue } = useLatticeChatShellContext();
-  const [connections, setConnections] = useState28(() => {
+  const [connections, setConnections] = useState29(() => {
     if (typeof window !== "undefined") {
       try {
         const stored = localStorage.getItem("lattice_server_connections");
@@ -10087,21 +10131,21 @@ var SettingsModal = ({
     }
     return [];
   });
-  const [serverConfigs, setServerConfigs] = useState28({});
+  const [serverConfigs, setServerConfigs] = useState29({});
   const connectionsRef = useRef14(connections);
   useEffect21(() => {
     connectionsRef.current = connections;
   }, [connections]);
-  const [activeTabKey, setActiveTabKey] = useState28(
+  const [activeTabKey, setActiveTabKey] = useState29(
     connections.length > 0 ? connections[0].id : ""
   );
-  const [activeMenu, setActiveMenu] = useState28("environment");
-  const [loading, setLoading] = useState28(false);
-  const [showAddServerModal, setShowAddServerModal] = useState28(false);
-  const [newServerUrl, setNewServerUrl] = useState28("");
-  const [newServerName, setNewServerName] = useState28("");
-  const [newServerApiKey, setNewServerApiKey] = useState28("");
-  const [addingServer, setAddingServer] = useState28(false);
+  const [activeMenu, setActiveMenu] = useState29("environment");
+  const [loading, setLoading] = useState29(false);
+  const [showAddServerModal, setShowAddServerModal] = useState29(false);
+  const [newServerUrl, setNewServerUrl] = useState29("");
+  const [newServerName, setNewServerName] = useState29("");
+  const [newServerApiKey, setNewServerApiKey] = useState29("");
+  const [addingServer, setAddingServer] = useState29(false);
   const saveConnections = (newConnections) => {
     setConnections(newConnections);
     if (typeof window !== "undefined") {