109 lines
2.5 KiB
TypeScript
109 lines
2.5 KiB
TypeScript
import { RunEngine } from "@/api/types";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "./ui/select";
|
|
import { cn } from "@/util/utils";
|
|
|
|
type EngineOption = {
|
|
value: RunEngine;
|
|
label: string;
|
|
badge?: string;
|
|
badgeVariant?: "default" | "success" | "warning";
|
|
};
|
|
|
|
type Props = {
|
|
value: RunEngine | null;
|
|
onChange: (value: RunEngine) => void;
|
|
className?: string;
|
|
availableEngines?: Array<RunEngine>;
|
|
};
|
|
|
|
const allEngineOptions: Array<EngineOption> = [
|
|
{
|
|
value: RunEngine.SkyvernV1,
|
|
label: "Skyvern 1.0",
|
|
badge: "Recommended",
|
|
badgeVariant: "success",
|
|
},
|
|
{
|
|
value: RunEngine.SkyvernV2,
|
|
label: "Skyvern 2.0",
|
|
badge: "Multi-Goal",
|
|
badgeVariant: "warning",
|
|
},
|
|
{
|
|
value: RunEngine.OpenaiCua,
|
|
label: "OpenAI CUA",
|
|
},
|
|
{
|
|
value: RunEngine.AnthropicCua,
|
|
label: "Anthropic CUA",
|
|
},
|
|
];
|
|
|
|
// Default engines for blocks that don't support V2 mode
|
|
const defaultEngines: Array<RunEngine> = [
|
|
RunEngine.SkyvernV1,
|
|
RunEngine.OpenaiCua,
|
|
RunEngine.AnthropicCua,
|
|
];
|
|
|
|
function BadgeLabel({ option }: { option: EngineOption }) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<span>{option.label}</span>
|
|
{option.badge && (
|
|
<span
|
|
className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", {
|
|
"bg-green-500/20 text-green-400": option.badgeVariant === "success",
|
|
"bg-amber-500/20 text-amber-400": option.badgeVariant === "warning",
|
|
"bg-slate-500/20 text-slate-400":
|
|
option.badgeVariant === "default" || !option.badgeVariant,
|
|
})}
|
|
>
|
|
{option.badge}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function RunEngineSelector({
|
|
value,
|
|
onChange,
|
|
className,
|
|
availableEngines,
|
|
}: Props) {
|
|
const engines = availableEngines ?? defaultEngines;
|
|
const engineOptions = allEngineOptions.filter((opt) =>
|
|
engines.includes(opt.value),
|
|
);
|
|
|
|
const selectedOption = engineOptions.find(
|
|
(opt) => opt.value === (value ?? RunEngine.SkyvernV1),
|
|
);
|
|
|
|
return (
|
|
<Select value={value ?? RunEngine.SkyvernV1} onValueChange={onChange}>
|
|
<SelectTrigger className={className}>
|
|
<SelectValue>
|
|
{selectedOption && <BadgeLabel option={selectedOption} />}
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{engineOptions.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
<BadgeLabel option={option} />
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
}
|
|
|
|
export { RunEngineSelector };
|