From 455f560fa1b945eb2aa33707d8d92204c6fd95e7 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Thu, 15 May 2025 21:20:59 -0700
Subject: [PATCH] add cua support in navigation block (#2359)

---
 .../nodes/NavigationNode/NavigationNode.tsx   | 32 +++++++++++++++++++
 .../editor/nodes/NavigationNode/types.ts      |  2 ++
 .../workflows/editor/workflowEditorUtils.ts   |  3 ++
 .../routes/workflows/types/workflowTypes.ts   |  1 +
 .../workflows/types/workflowYamlTypes.ts      |  1 +
 5 files changed, 39 insertions(+)

diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/NavigationNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/NavigationNode.tsx
index 2169bb4b..73dc543b 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/NavigationNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/NavigationNode.tsx
@@ -35,6 +35,13 @@ import { ParametersMultiSelect } from "../TaskNode/ParametersMultiSelect";
 import { AppNode } from "..";
 import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils";
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectValue,
+  SelectItem,
+} from "@/components/ui/select";
 
 function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
   const { updateNodeData } = useReactFlow();
@@ -56,6 +63,7 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
     totpIdentifier: data.totpIdentifier,
     completeCriterion: data.completeCriterion,
     terminateCriterion: data.terminateCriterion,
+    engine: data.engine,
     includeActionHistoryInVerification: data.includeActionHistoryInVerification,
   });
   const deleteNodeCallback = useDeleteNodeCallback();
@@ -196,6 +204,30 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
                   />
                 </div>
                 <Separator />
+                <div className="flex items-center justify-between">
+                  <div className="flex gap-2">
+                    <Label className="text-xs font-normal text-slate-300">
+                      Engine
+                    </Label>
+                  </div>
+                  <Select
+                    value={inputs.engine ?? "skyvern-1.0"}
+                    onValueChange={(value) => {
+                      handleChange("engine", value);
+                    }}
+                  >
+                    <SelectTrigger className="nopan w-52 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="skyvern-1.0">Skyvern 1.0</SelectItem>
+                      <SelectItem value="openai-cua">OpenAI CUA</SelectItem>
+                      <SelectItem value="anthropic-cua">
+                        Anthropic CUA
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
                 <div className="flex items-center justify-between">
                   <div className="flex gap-2">
                     <Label className="text-xs font-normal text-slate-300">
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/types.ts b/skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/types.ts
index 109c6634..c90165ce 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/types.ts
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/types.ts
@@ -7,6 +7,7 @@ export type NavigationNodeData = NodeBaseData & {
   errorCodeMapping: string;
   completeCriterion: string;
   terminateCriterion: string;
+  engine: string | null;
   maxRetries: number | null;
   maxStepsOverride: number | null;
   allowDownloads: boolean;
@@ -27,6 +28,7 @@ export const navigationNodeDefaultData: NavigationNodeData = {
   completeCriterion: "",
   terminateCriterion: "",
   errorCodeMapping: "null",
+  engine: "skyvern-1.0",
   maxRetries: null,
   maxStepsOverride: null,
   allowDownloads: false,
diff --git a/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts b/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts
index 6c42d2c4..b49b63a3 100644
--- a/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts
+++ b/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts
@@ -306,6 +306,7 @@ function convertToNode(
           maxStepsOverride: block.max_steps_per_run ?? null,
           completeCriterion: block.complete_criterion ?? "",
           terminateCriterion: block.terminate_criterion ?? "",
+          engine: block.engine ?? "skyvern-1.0",
           includeActionHistoryInVerification:
             block.include_action_history_in_verification ?? false,
         },
@@ -1052,6 +1053,7 @@ function getWorkflowBlock(node: WorkflowBlockNode): BlockYAML {
         cache_actions: node.data.cacheActions,
         complete_criterion: node.data.completeCriterion,
         terminate_criterion: node.data.terminateCriterion,
+        engine: node.data.engine,
         include_action_history_in_verification:
           node.data.includeActionHistoryInVerification,
       };
@@ -1763,6 +1765,7 @@ function convertBlocksToBlockYAML(
           block_type: "navigation",
           url: block.url,
           title: block.title,
+          engine: block.engine,
           navigation_goal: block.navigation_goal,
           error_code_mapping: block.error_code_mapping,
           max_retries: block.max_retries,
diff --git a/skyvern-frontend/src/routes/workflows/types/workflowTypes.ts b/skyvern-frontend/src/routes/workflows/types/workflowTypes.ts
index 95f17a18..34c4ba74 100644
--- a/skyvern-frontend/src/routes/workflows/types/workflowTypes.ts
+++ b/skyvern-frontend/src/routes/workflows/types/workflowTypes.ts
@@ -364,6 +364,7 @@ export type NavigationBlock = WorkflowBlockBase & {
   cache_actions: boolean;
   complete_criterion: string | null;
   terminate_criterion: string | null;
+  engine: string | null;
   include_action_history_in_verification: boolean;
 };
 
diff --git a/skyvern-frontend/src/routes/workflows/types/workflowYamlTypes.ts b/skyvern-frontend/src/routes/workflows/types/workflowYamlTypes.ts
index 79263840..413ddc77 100644
--- a/skyvern-frontend/src/routes/workflows/types/workflowYamlTypes.ts
+++ b/skyvern-frontend/src/routes/workflows/types/workflowYamlTypes.ts
@@ -185,6 +185,7 @@ export type NavigationBlockYAML = BlockYAMLBase & {
   cache_actions: boolean;
   complete_criterion: string | null;
   terminate_criterion: string | null;
+  engine: string | null;
   include_action_history_in_verification: boolean;
 };