add cua support in navigation block (#2359)

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">

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,

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,

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;
 };
 

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;
 };