@datatechsolutions/ui 2.7.114 → 2.7.116

package/dist/workflow/workflow-canvas.mjs

@@ -254,6 +254,48 @@ var useWorkflowStore = create((set, get) => ({
     });
   }
 }));
+var useDrawerStore = create((set) => ({
+  activeDrawer: null,
+  agentData: null,
+  subworkflowData: null,
+  logicNodeData: null,
+  pipelineSettingsData: null,
+  openAgentDrawer: (agent, models, isCreateMode = false) => set({
+    activeDrawer: "agent",
+    agentData: { agent, models, isCreateMode },
+    subworkflowData: null,
+    logicNodeData: null,
+    pipelineSettingsData: null
+  }),
+  openSubworkflowDrawer: (tool) => set({
+    activeDrawer: "subworkflow",
+    subworkflowData: { tool },
+    agentData: null,
+    logicNodeData: null,
+    pipelineSettingsData: null
+  }),
+  openLogicNodeDrawer: (nodeId, nodeLabel, config) => set({
+    activeDrawer: "logic-node",
+    logicNodeData: { nodeId, nodeLabel, config },
+    agentData: null,
+    subworkflowData: null,
+    pipelineSettingsData: null
+  }),
+  openPipelineSettingsDrawer: (name, description) => set({
+    activeDrawer: "pipeline-settings",
+    pipelineSettingsData: { name, description },
+    agentData: null,
+    subworkflowData: null,
+    logicNodeData: null
+  }),
+  closeDrawer: () => set({
+    activeDrawer: null,
+    agentData: null,
+    subworkflowData: null,
+    logicNodeData: null,
+    pipelineSettingsData: null
+  })
+}));
 var GRAPH_ACTIVE_EDGE_COLOR = "#14b8a6";
 var GRAPH_TRUE_EDGE_COLOR = "#22c55e";
 var GRAPH_FALSE_EDGE_COLOR = "#ef4444";
@@ -8131,8 +8173,15 @@ var NODE_TITLE_KEYS = {
   entity: "entityNodeConfig",
   group: "groupNodeConfig"
 };
-function LogicNodeDrawer({ nodeId, nodeLabel, config, open, onClose, onSave, entities = [] }) {
+function LogicNodeDrawer({ onSave, entities = [] }) {
   const t = useTranslations("agents.workflow");
+  const activeDrawer = useDrawerStore((s) => s.activeDrawer);
+  const logicNodeData = useDrawerStore((s) => s.logicNodeData);
+  const closeDrawer = useDrawerStore((s) => s.closeDrawer);
+  const open = activeDrawer === "logic-node";
+  const nodeId = logicNodeData?.nodeId ?? null;
+  const nodeLabel = logicNodeData?.nodeLabel ?? "";
+  const config = logicNodeData?.config ?? null;
   if (!config || !nodeId) return null;
   const entityMasterId = config.type === "entity" ? config.entityMasterId : void 0;
   const IconComponent = entityMasterId ? getEntityIcon(entityMasterId) : LOGIC_ICON_MAP[config.type];
@@ -8145,41 +8194,41 @@ function LogicNodeDrawer({ nodeId, nodeLabel, config, open, onClose, onSave, ent
   const renderForm = () => {
     switch (config.type) {
       case "start":
-        return /* @__PURE__ */ jsx(StartNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(StartNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "end":
-        return /* @__PURE__ */ jsx(EndNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(EndNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "if_else":
-        return /* @__PURE__ */ jsx(IfElseNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(IfElseNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "code":
-        return /* @__PURE__ */ jsx(CodeNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(CodeNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "http_request":
-        return /* @__PURE__ */ jsx(HttpRequestNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(HttpRequestNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "template_transform":
-        return /* @__PURE__ */ jsx(TemplateTransformNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(TemplateTransformNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "iteration":
-        return /* @__PURE__ */ jsx(IterationNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(IterationNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "knowledge_base":
-        return /* @__PURE__ */ jsx(KnowledgeBaseNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(KnowledgeBaseNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "answer":
-        return /* @__PURE__ */ jsx(AnswerNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(AnswerNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "question_classifier":
-        return /* @__PURE__ */ jsx(QuestionClassifierNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(QuestionClassifierNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "parameter_extractor":
-        return /* @__PURE__ */ jsx(ParameterExtractorNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(ParameterExtractorNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "variable_assigner":
-        return /* @__PURE__ */ jsx(VariableAssignerNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(VariableAssignerNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "variable_aggregator":
-        return /* @__PURE__ */ jsx(VariableAggregatorNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(VariableAggregatorNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "document_extractor":
-        return /* @__PURE__ */ jsx(DocumentExtractorNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(DocumentExtractorNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "list_operator":
-        return /* @__PURE__ */ jsx(ListOperatorNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(ListOperatorNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "iteration_start":
-        return /* @__PURE__ */ jsx(IterationStartNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(IterationStartNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "entity":
-        return /* @__PURE__ */ jsx(EntityNodeConfigForm, { config, entities, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(EntityNodeConfigForm, { config, entities, onSave: handleSave, onCancel: closeDrawer });
       case "group":
-        return /* @__PURE__ */ jsx(GroupNodeConfigForm, { config, onSave: handleSave, onCancel: onClose });
+        return /* @__PURE__ */ jsx(GroupNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       default:
         return null;
     }
@@ -8188,7 +8237,7 @@ function LogicNodeDrawer({ nodeId, nodeLabel, config, open, onClose, onSave, ent
     WorkspaceDrawer,
     {
       open,
-      onClose,
+      onClose: closeDrawer,
       title,
       subtitle: nodeLabel,
       icon: IconComponent ? /* @__PURE__ */ jsx(IconComponent, { className: "h-5 w-5 text-white" }) : void 0,
@@ -8617,23 +8666,26 @@ function WorkflowCanvasInner({
   isCreatingAgent = false,
   nodeTypes: externalNodeTypes,
   renderAgentDrawer,
-  renderLogicNodeDrawer
+  renderLogicNodeDrawer: _renderLogicNodeDrawer
 }) {
   const { screenToFlowPosition, getNode, toObject, fitView, zoomIn, zoomOut, zoomTo } = useReactFlow();
   const tWorkflow = useTranslations("agents.workflow");
   const sortedAgents = useMemo(() => [...agents].sort((agentA, agentB) => (agentA.order ?? 0) - (agentB.order ?? 0)), [agents]);
   const [selectedAgentId, setSelectedAgentId] = useState(null);
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const closeAllDrawers = useCallback(() => {
-    setEditingLogicNodeId(null);
-    setDrawerOpen(false);
-    setSelectedAgentId(null);
-  }, []);
-  const openAgentDrawer = useCallback((agent, _agentModels, _isCreate = false) => {
-    setEditingLogicNodeId(null);
-    setDrawerOpen(true);
-    setSelectedAgentId(agent.agentId);
-  }, []);
+  const openAgentDrawerAction = useDrawerStore((s) => s.openAgentDrawer);
+  const openLogicNodeDrawerAction = useDrawerStore((s) => s.openLogicNodeDrawer);
+  const closeDrawerAction = useDrawerStore((s) => s.closeDrawer);
+  const activeDrawer = useDrawerStore((s) => s.activeDrawer);
+  const drawerOpen = activeDrawer === "agent";
+  useEffect(() => {
+    if (isCreatingAgent) {
+      openAgentDrawerAction(
+        { agentId: "", name: "", order: 0, enabled: true, temperature: 0.7, maxTokens: 4096 },
+        models,
+        true
+      );
+    }
+  }, [isCreatingAgent]);
   const graphChangeTimerRef = useRef(null);
   const insertNodeOnEdgeRef = useRef(() => {
   });
@@ -8670,9 +8722,16 @@ function WorkflowCanvasInner({
   const setLayoutDirection = useWorkflowStore((s) => s.setLayoutDirection);
   const [editingLogicNodeId, setEditingLogicNodeId] = useState(null);
   const handleEditLogicNode = useCallback((nodeId) => {
-    closeAllDrawers();
     setEditingLogicNodeId(nodeId);
-  }, [closeAllDrawers]);
+    const node = getNode(nodeId);
+    if (node) {
+      const nodeData = node.data;
+      const config = nodeData.config;
+      if (config) {
+        openLogicNodeDrawerAction(nodeId, nodeData.label ?? "", config);
+      }
+    }
+  }, [getNode, openLogicNodeDrawerAction]);
   const agentMap = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const agent of agents) {
@@ -8755,9 +8814,9 @@ function WorkflowCanvasInner({
                 order: agent.order ?? 0,
                 selected: selectedAgentId === savedNode.id,
                 onSelect: () => {
+                  console.log("[Canvas] onSelect agent:", agent.name, agent.agentId);
                   setSelectedAgentId(agent.agentId);
-                  setDrawerOpen(true);
-                  openAgentDrawer(agent, models);
+                  openAgentDrawerAction(agent, models);
                 },
                 onRemoveFromCanvas: handleRemoveNodeFromCanvas
               }
@@ -9106,11 +9165,9 @@ function WorkflowCanvasInner({
     if (!targetNode) return;
     if (targetNode.type === "agent") {
       const agent = targetNode.data?.agent;
-      const agentId = agent?.id || agent?.agentId;
-      if (agentId && agent) {
-        setSelectedAgentId(agentId);
-        setDrawerOpen(true);
-        openAgentDrawer(agent, models);
+      if (agent) {
+        setSelectedAgentId(agent.agentId ?? agent.id ?? null);
+        openAgentDrawerAction(agent, models);
       }
     } else if (targetNode.type === "tool") {
       const tool = targetNode.data?.tool;
@@ -9120,7 +9177,7 @@ function WorkflowCanvasInner({
     } else {
       handleEditLogicNode(nodeId);
     }
-  }, [nodes, setSelectedAgentId, setDrawerOpen, onEditTool, onEditRule, handleEditLogicNode]);
+  }, [nodes, setSelectedAgentId, openAgentDrawerAction, models, onEditTool, onEditRule, handleEditLogicNode]);
   const DUPLICATE_OFFSET = 40;
   const contextMenuDuplicateNode = useCallback((nodeId) => {
     storeTakeSnapshot();
@@ -9601,8 +9658,7 @@ function WorkflowCanvasInner({
             selected: false,
             onSelect: () => {
               setSelectedAgentId(agent.agentId);
-              setDrawerOpen(true);
-              openAgentDrawer(agent, models);
+              openAgentDrawerAction(agent, models);
             },
             onRemoveFromCanvas: handleRemoveNodeFromCanvas
           }
@@ -9897,7 +9953,7 @@ function WorkflowCanvasInner({
   const handleEdgeClick = useCallback(() => {
     closeContextMenu();
   }, [closeContextMenu]);
-  const editingLogicNode = useMemo(() => {
+  useMemo(() => {
     if (!editingLogicNodeId) return null;
     const node = nodes.find((matchingNode) => matchingNode.id === editingLogicNodeId);
     if (!node) return null;
@@ -10050,28 +10106,28 @@ function WorkflowCanvasInner({
       open: drawerOpen || isCreatingAgent,
       isCreateMode: isCreatingAgent,
       onClose: () => {
-        closeAllDrawers();
-        if (isCreatingAgent) {
-          onCancelCreateAgent?.();
-        }
+        closeDrawerAction();
+        setSelectedAgentId(null);
+        if (isCreatingAgent) onCancelCreateAgent?.();
       },
       onSaved: () => {
-        closeAllDrawers();
-        if (isCreatingAgent) {
-          onCancelCreateAgent?.();
-        }
+        closeDrawerAction();
+        setSelectedAgentId(null);
+        if (isCreatingAgent) onCancelCreateAgent?.();
         onAgentSaved?.();
       }
     }),
-    (renderLogicNodeDrawer ?? ((drawerProps) => /* @__PURE__ */ jsx(LogicNodeDrawer, { ...drawerProps })))({
-      nodeId: editingLogicNode?.nodeId ?? null,
-      nodeLabel: editingLogicNode?.label ?? "",
-      config: editingLogicNode?.config ?? null,
-      open: editingLogicNodeId !== null,
-      onClose: () => setEditingLogicNodeId(null),
-      onSave: handleSaveLogicNodeConfig,
-      entities: allEntities
-    })
+    /* @__PURE__ */ jsx(
+      LogicNodeDrawer,
+      {
+        onSave: (nodeId, config) => {
+          handleSaveLogicNodeConfig(nodeId, config);
+          closeDrawerAction();
+          setEditingLogicNodeId(null);
+        },
+        entities: allEntities
+      }
+    )
   ] });
 }
 function WorkflowCanvas(props) {