78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
} from "./ui/select";
|
|
import {
|
|
CODE_GENERATION_MODEL_DESCRIPTIONS,
|
|
CodeGenerationModel,
|
|
} from "../lib/models";
|
|
import { Badge } from "./ui/badge";
|
|
import { IS_RUNNING_ON_CLOUD } from "../config";
|
|
import { useStore } from "../store/store";
|
|
|
|
interface Props {
|
|
codeGenerationModel: CodeGenerationModel;
|
|
setCodeGenerationModel: (codeGenerationModel: CodeGenerationModel) => void;
|
|
shouldDisableUpdates?: boolean;
|
|
}
|
|
|
|
function ModelSettingsSection({
|
|
codeGenerationModel,
|
|
setCodeGenerationModel,
|
|
shouldDisableUpdates = false,
|
|
}: Props) {
|
|
const subscriberTier = useStore((state) => state.subscriberTier);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-y-2 justify-between text-sm">
|
|
<div className="grid grid-cols-3 items-center gap-4">
|
|
<span>AI Model:</span>
|
|
<Select
|
|
value={codeGenerationModel}
|
|
onValueChange={(value: string) =>
|
|
setCodeGenerationModel(value as CodeGenerationModel)
|
|
}
|
|
disabled={shouldDisableUpdates}
|
|
>
|
|
<SelectTrigger className="col-span-2" id="output-settings-js">
|
|
<span className="font-semibold">
|
|
{CODE_GENERATION_MODEL_DESCRIPTIONS[codeGenerationModel].name}
|
|
</span>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
{Object.values(CodeGenerationModel).map((model) => (
|
|
<SelectItem key={model} value={model}>
|
|
<div className="flex flex-col">
|
|
<div className="flex items-center">
|
|
<span className="font-semibold">
|
|
{CODE_GENERATION_MODEL_DESCRIPTIONS[model].name}
|
|
</span>
|
|
{!IS_RUNNING_ON_CLOUD &&
|
|
CODE_GENERATION_MODEL_DESCRIPTIONS[model].inBeta && (
|
|
<Badge className="ml-2" variant="secondary">
|
|
Beta
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
{IS_RUNNING_ON_CLOUD &&
|
|
subscriberTier === "free" &&
|
|
CODE_GENERATION_MODEL_DESCRIPTIONS[model].isPaid && (
|
|
<Badge variant="default">Upgrade to Paid</Badge>
|
|
)}
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ModelSettingsSection;
|