allow null choice for models (#2534)

skyvern-frontend/src/components/ModelSelector.tsx

@@ -15,12 +15,18 @@ import { WorkflowModel } from "@/routes/workflows/types/workflowTypes";
 
 type Props = {
   className?: string;
+  clearable?: boolean;
   value: WorkflowModel | null;
   // --
   onChange: (value: WorkflowModel | null) => void;
 };
 
-function ModelSelector({ value, onChange, className }: Props) {
+function ModelSelector({
+  clearable = true,
+  value,
+  onChange,
+  className,
+}: Props) {
   const credentialGetter = useCredentialGetter();
 
   const { data: availableModels } = useQuery<ModelsResponse>({
@@ -39,24 +45,44 @@ function ModelSelector({ value, onChange, className }: Props) {
         <Label className="text-xs font-normal text-slate-300">Model</Label>
         <HelpTooltip content="The LLM model to use for this block" />
       </div>
-      <Select
-        value={value?.model ?? ""}
-        onValueChange={(value) => {
-          onChange({ model: value });
-        }}
-      >
-        {/* className="nopan w-52 text-xs" */}
-        <SelectTrigger className={className}>
-          <SelectValue placeholder="Skyvern Optimized" />
-        </SelectTrigger>
-        <SelectContent>
-          {models.map((m) => (
-            <SelectItem key={m} value={m}>
-              {m}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+      <div className="relative flex items-center">
+        <Select
+          value={value?.model ?? ""}
+          onValueChange={(v) => {
+            onChange({ model: v });
+          }}
+        >
+          <SelectTrigger
+            className={(className || "") + (value && clearable ? " pr-10" : "")}
+          >
+            <SelectValue placeholder="Skyvern Optimized" />
+          </SelectTrigger>
+          <SelectContent>
+            {models.map((m) => (
+              <SelectItem key={m} value={m}>
+                {m}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {value && clearable && (
+          <>
+            <div
+              className="pointer-events-none absolute right-8 top-1/2 h-5 w-px -translate-y-1/2 bg-slate-200 opacity-70 dark:bg-slate-700"
+              aria-hidden="true"
+            />
+            <button
+              type="button"
+              aria-label="Clear selection"
+              className="absolute right-0 z-10 flex h-9 w-8 items-center justify-center text-slate-400 hover:text-red-500 focus:outline-none"
+              onClick={() => onChange(null)}
+              tabIndex={0}
+            >
+              ×
+            </button>
+          </>
+        )}
+      </div>
     </div>
   );
 }

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

@@ -14,17 +14,11 @@ import { Label } from "@/components/ui/label";
 import { HelpTooltip } from "@/components/HelpTooltip";
 import { Input } from "@/components/ui/input";
 import { ProxySelector } from "@/components/ProxySelector";
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-} from "@/components/ui/select";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { Switch } from "@/components/ui/switch";
 import { Separator } from "@/components/ui/separator";
 import { ModelsResponse } from "@/api/types";
+import { ModelSelector } from "@/components/ModelSelector";
 
 function StartNode({ id, data }: NodeProps<StartNode>) {
   const credentialGetter = useCredentialGetter();
@@ -83,27 +77,13 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
                 <AccordionContent className="pl-6 pr-1 pt-1">
                   <div className="space-y-4">
                     <div className="space-y-2">
-                      <div className="flex gap-2">
-                        <Label>Model</Label>
-                        <HelpTooltip content="The LLM model to use for this workflow" />
-                      </div>
-                      <Select
-                        value={inputs.model?.model ?? "Skyvern Optimized"}
-                        onValueChange={(value) => {
-                          handleChange("model", { model: value });
+                      <ModelSelector
+                        className="nopan w-52 text-xs"
+                        value={inputs.model}
+                        onChange={(value) => {
+                          handleChange("model", value);
                         }}
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select model" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {models.map((m) => (
-                            <SelectItem key={m} value={m}>
-                              {m}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
+                      />
                     </div>
                     <div className="space-y-2">
                       <div className="flex gap-2">

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

@@ -8,7 +8,7 @@ export type WorkflowStartNodeData = {
   webhookCallbackUrl: string;
   proxyLocation: ProxyLocation;
   persistBrowserSession: boolean;
-  model: WorkflowModel;
+  model: WorkflowModel | null;
   editable: boolean;
 };
 

skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts

@@ -100,7 +100,6 @@ import { taskv2NodeDefaultData } from "./nodes/Taskv2Node/types";
 import { urlNodeDefaultData } from "./nodes/URLNode/types";
 import { fileUploadNodeDefaultData } from "./nodes/FileUploadNode/types";
 export const NEW_NODE_LABEL_PREFIX = "block_";
-const DEFAULT_MODEL = { model: "Skyvern Optimized" };
 
 function layoutUtil(
   nodes: Array<AppNode>,
@@ -662,7 +661,7 @@ function getElements(
       persistBrowserSession: settings.persistBrowserSession,
       proxyLocation: settings.proxyLocation ?? ProxyLocation.Residential,
       webhookCallbackUrl: settings.webhookCallbackUrl ?? "",
-      model: settings.model ?? DEFAULT_MODEL,
+      model: settings.model,
       editable,
     }),
   );
@@ -1322,7 +1321,7 @@ function getWorkflowSettings(nodes: Array<AppNode>): WorkflowSettings {
     persistBrowserSession: false,
     proxyLocation: ProxyLocation.Residential,
     webhookCallbackUrl: null,
-    model: DEFAULT_MODEL,
+    model: null,
   };
   const startNodes = nodes.filter(isStartNode);
   const startNodeWithWorkflowSettings = startNodes.find(