117 lines
4.4 KiB
TypeScript
117 lines
4.4 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 { useEnabledPiModels, getProviderDisplayName, type ModelOption } from 'state/useModels';
|
|
|
|
function buildGroups(models: ModelOption[]) {
|
|
const groups: Record<string, { id: string; name: string }[]> = {};
|
|
for (const m of models) {
|
|
const provider = m.provider ?? 'Other';
|
|
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)) }));
|
|
}
|
|
|
|
const NONE = '__none__';
|
|
|
|
export const AIModels = () => {
|
|
const { settings, saveSettings } = useSettings();
|
|
const piModels = useEnabledPiModels();
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
|
|
const [chatModel, setChatModel] = useState<string | null>(settings.chat.defaultModel);
|
|
const [projectModel, setProjectModel] = useState<string | null>(settings.chat.defaultProjectModel);
|
|
const [taskModel, setTaskModel] = useState<string | null>(settings.tasks.defaultModel);
|
|
|
|
useEffect(() => {
|
|
setChatModel(settings.chat.defaultModel);
|
|
setProjectModel(settings.chat.defaultProjectModel);
|
|
setTaskModel(settings.tasks.defaultModel);
|
|
}, [settings]);
|
|
|
|
const groups = useMemo(() => buildGroups(piModels), [piModels]);
|
|
|
|
const handleSave = async () => {
|
|
if (isSaving) return;
|
|
setIsSaving(true);
|
|
try {
|
|
await saveSettings({
|
|
...settings,
|
|
chat: { ...settings.chat, defaultModel: chatModel, defaultProjectModel: projectModel },
|
|
tasks: { ...settings.tasks, defaultModel: taskModel },
|
|
});
|
|
toast.success('AI model defaults saved');
|
|
} catch {
|
|
toast.error('Failed to save settings');
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
const renderModelSelect = (value: string | null, onChange: (v: string | null) => void, placeholder: string) => (
|
|
<Select value={value ?? NONE} onValueChange={(v) => onChange(v === NONE ? null : v)}>
|
|
<SelectTrigger className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark">
|
|
<SelectValue placeholder={placeholder} />
|
|
</SelectTrigger>
|
|
<SelectContent className="z-[600] max-h-[300px]">
|
|
<SelectItem value={NONE}>{placeholder}</SelectItem>
|
|
{groups.map(({ provider, models }) => (
|
|
<SelectGroup key={provider}>
|
|
<SelectLabel>{getProviderDisplayName(provider)}</SelectLabel>
|
|
{models.map((m) => (
|
|
<SelectItem key={`${provider}:${m.id}`} value={m.id}>
|
|
{m.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
|
|
return (
|
|
<div className="grid gap-5">
|
|
<Label className="grid gap-2">
|
|
<span className="text-duck-dark/70 dark:text-foreground/70">Default Chat Model</span>
|
|
<p className="text-xs text-duck-dark/40 dark:text-foreground/40">Used when starting a new chat from the home screen</p>
|
|
{renderModelSelect(chatModel, setChatModel, 'System default')}
|
|
</Label>
|
|
|
|
<Label className="grid gap-2">
|
|
<span className="text-duck-dark/70 dark:text-foreground/70">Default Project Model</span>
|
|
<p className="text-xs text-duck-dark/40 dark:text-foreground/40">Used when starting a new chat inside a project workspace</p>
|
|
{renderModelSelect(projectModel, setProjectModel, 'Same as chat default')}
|
|
</Label>
|
|
|
|
<Label className="grid gap-2">
|
|
<span className="text-duck-dark/70 dark:text-foreground/70">Default Task Model</span>
|
|
<p className="text-xs text-duck-dark/40 dark:text-foreground/40">Used when running tasks from the file browser</p>
|
|
{renderModelSelect(taskModel, setTaskModel, 'Same as chat default')}
|
|
</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>
|
|
);
|
|
};
|