Jon/model name massage (#2559)

skyvern-frontend/src/api/types.ts

@@ -393,7 +393,7 @@ export type CreditCardCredential = {
 };
 
 export type ModelsResponse = {
-  models: string[];
+  models: Record<string, string>;
 };
 
 export const RunEngine = {

skyvern-frontend/src/components/ModelSelector.tsx

@@ -41,8 +41,17 @@ function ModelSelector({
     },
   });
 
-  const models = availableModels?.models ?? [];
-  const choices = [constants.SkyvernOptimized, ...models];
+  const models = availableModels?.models ?? {};
+  const reverseMap = Object.entries(models).reduce(
+    (acc, [key, value]) => {
+      acc[value] = key;
+      return acc;
+    },
+    {} as Record<string, string>,
+  );
+  const labels = Object.keys(reverseMap);
+  const chosen = value ? models[value.model_name] : constants.SkyvernOptimized;
+  const choices = [constants.SkyvernOptimized, ...labels];
 
   return (
     <div className="flex items-center justify-between">
@@ -52,10 +61,13 @@ function ModelSelector({
       </div>
       <div className="relative flex items-center">
         <Select
-          value={value?.model ?? ""}
+          value={chosen}
           onValueChange={(v) => {
             const newValue = v === constants.SkyvernOptimized ? null : v;
-            onChange(newValue ? { model: newValue } : null);
+            const modelName = newValue ? reverseMap[newValue] : null;
+            const value = modelName ? { model_name: modelName } : null;
+            console.log({ v, newValue, modelName, value });
+            onChange(value);
           }}
         >
           <SelectTrigger

skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/types.ts

@@ -29,7 +29,7 @@ export const navigationNodeDefaultData: NavigationNodeData = {
   completeCriterion: "",
   terminateCriterion: "",
   errorCodeMapping: "null",
-  model: { model: "" },
+  model: { model_name: "" },
   engine: RunEngine.SkyvernV1,
   maxRetries: null,
   maxStepsOverride: null,

skyvern-frontend/src/routes/workflows/editor/nodes/StartNode/StartNode.tsx

@@ -19,6 +19,7 @@ import { Switch } from "@/components/ui/switch";
 import { Separator } from "@/components/ui/separator";
 import { ModelsResponse } from "@/api/types";
 import { ModelSelector } from "@/components/ModelSelector";
+import { WorkflowModel } from "@/routes/workflows/types/workflowTypes";
 
 function StartNode({ id, data }: NodeProps<StartNode>) {
   const credentialGetter = useCredentialGetter();
@@ -33,7 +34,11 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
     },
   });
 
-  const models = availableModels?.models ?? [];
+  const modelNames = availableModels?.models ?? {};
+  const firstKey = Object.keys(modelNames)[0];
+  const workflowModel: WorkflowModel | null = firstKey
+    ? { model_name: modelNames[firstKey] || "" }
+    : null;
 
   const [inputs, setInputs] = useState({
     webhookCallbackUrl: data.withWorkflowSettings
@@ -45,7 +50,7 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
     persistBrowserSession: data.withWorkflowSettings
       ? data.persistBrowserSession
       : false,
-    model: data.withWorkflowSettings ? data.model : { model: models[0] || "" },
+    model: data.withWorkflowSettings ? data.model : workflowModel,
   });
 
   function handleChange(key: string, value: unknown) {

skyvern-frontend/src/routes/workflows/types/workflowTypes.ts

@@ -466,7 +466,7 @@ export type WorkflowSettings = {
   model: WorkflowModel | null;
 };
 
-export type WorkflowModel = JsonObjectExtendable<{ model: string }>;
+export type WorkflowModel = JsonObjectExtendable<{ model_name: string }>;
 
 export function isOutputParameter(
   parameter: Parameter,