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