100 lines
3.5 KiB
TypeScript
100 lines
3.5 KiB
TypeScript
import { useState, useEffect, useMemo } from 'react';
|
|
import { toast } from 'sonner';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectLabel,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import { useSettings } from '@/state/useSettings';
|
|
import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
|
|
|
|
export const TaskDefaults = () => {
|
|
const { settings, saveSettings } = useSettings();
|
|
const claudeModels = useVisibleClaudeModels();
|
|
const openCodeModels = useVisibleOpenCodeModels();
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
|
|
const [model, setModel] = useState<string | null>(settings.tasks.defaultModel);
|
|
|
|
useEffect(() => {
|
|
setModel(settings.tasks.defaultModel);
|
|
}, [settings]);
|
|
|
|
const openCodeGroups = useMemo(() => {
|
|
const groups: Record<string, { id: string; name: string }[]> = {};
|
|
for (const m of openCodeModels) {
|
|
const provider = m.provider ?? 'OpenCode';
|
|
if (!groups[provider]) groups[provider] = [];
|
|
groups[provider].push({ id: m.id, name: m.name });
|
|
}
|
|
return Object.entries(groups)
|
|
.sort(([a], [b]) => a.localeCompare(b))
|
|
.map(([provider, models]) => ({ provider, models: models.sort((a, b) => a.name.localeCompare(b.name)) }));
|
|
}, [openCodeModels]);
|
|
|
|
const handleSave = async () => {
|
|
if (isSaving) return;
|
|
setIsSaving(true);
|
|
try {
|
|
const isOpenCode = openCodeModels.some((m) => m.id === model);
|
|
const defaultProvider = isOpenCode ? ('opencode' as const) : ('claude' as const);
|
|
await saveSettings({ ...settings, tasks: { defaultProvider, defaultModel: model } });
|
|
toast.success('Task defaults saved');
|
|
} catch {
|
|
toast.error('Failed to save settings');
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="grid gap-4">
|
|
<Label className="grid gap-2">
|
|
<span className="text-duck-dark/70">Default Model</span>
|
|
<Select value={model ?? ''} onValueChange={(v) => setModel(v || null)}>
|
|
<SelectTrigger className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark">
|
|
<SelectValue placeholder="Same as chat default" />
|
|
</SelectTrigger>
|
|
<SelectContent className="z-[600] max-h-[300px]">
|
|
{claudeModels.length > 0 && (
|
|
<SelectGroup>
|
|
<SelectLabel>Claude</SelectLabel>
|
|
{claudeModels.map((m) => (
|
|
<SelectItem key={m.id} value={m.id}>
|
|
{m.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
)}
|
|
{openCodeGroups.map(({ provider, models }) => (
|
|
<SelectGroup key={provider}>
|
|
<SelectLabel>{provider} (OpenCode)</SelectLabel>
|
|
{models.map((m) => (
|
|
<SelectItem key={`${provider}:${m.id}`} value={m.id}>
|
|
{m.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</Label>
|
|
|
|
<Button
|
|
type="button"
|
|
onClick={handleSave}
|
|
disabled={isSaving}
|
|
className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
|
|
>
|
|
{isSaving ? 'Saving...' : 'Save'}
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|