| import { useCallback, useEffect, useState } from 'react' |
| import { ChevronDown, ChevronUp, Plus, Save, Trash2 } from 'lucide-react' |
|
|
| import { fetchModelProfiles, putModelProfiles } from './settingsApi' |
|
|
| const FALLBACK_BASE_MODELS = [ |
| 'deepseek-v4-flash', |
| 'deepseek-v4-flash-search', |
| 'deepseek-v4-flash-nothinking', |
| 'deepseek-v4-flash-search-nothinking', |
| ] |
|
|
| function emptyProfile() { |
| return { id: '', base: FALLBACK_BASE_MODELS[0], name: '', remark: '', prompt: '' } |
| } |
|
|
| function normalizeItems(data) { |
| const items = Array.isArray(data?.items) ? data.items : [] |
| return items.map((item) => ({ |
| id: String(item?.id || ''), |
| base: String(item?.base || FALLBACK_BASE_MODELS[0]), |
| name: String(item?.name || ''), |
| remark: String(item?.remark || ''), |
| prompt: String(item?.prompt || ''), |
| })) |
| } |
|
|
| export default function ModelProfilesSection({ t, apiFetch, onMessage }) { |
| const [loading, setLoading] = useState(false) |
| const [saving, setSaving] = useState(false) |
| const [items, setItems] = useState([]) |
| const [baseModels, setBaseModels] = useState(FALLBACK_BASE_MODELS) |
| const [maxCount, setMaxCount] = useState(50) |
| const [maxPromptChars, setMaxPromptChars] = useState(20000) |
| const [expandedRows, setExpandedRows] = useState({}) |
| const [error, setError] = useState('') |
|
|
| const loadProfiles = useCallback(async () => { |
| setLoading(true) |
| try { |
| const { res, data } = await fetchModelProfiles(apiFetch) |
| if (!res.ok) { |
| setError(data?.detail || t('settings.modelProfilesLoadFailed')) |
| return |
| } |
| setItems(normalizeItems(data)) |
| if (Array.isArray(data?.base_models) && data.base_models.length > 0) { |
| setBaseModels(data.base_models) |
| } |
| if (Number(data?.max_count) > 0) { |
| setMaxCount(Number(data.max_count)) |
| } |
| if (Number(data?.max_prompt_chars) > 0) { |
| setMaxPromptChars(Number(data.max_prompt_chars)) |
| } |
| setError('') |
| } catch (_e) { |
| setError(t('settings.modelProfilesLoadFailed')) |
| } finally { |
| setLoading(false) |
| } |
| }, [apiFetch, t]) |
|
|
| useEffect(() => { |
| loadProfiles() |
| }, [loadProfiles]) |
|
|
| const updateItem = useCallback((index, patch) => { |
| setItems((prev) => prev.map((item, i) => (i === index ? { ...item, ...patch } : item))) |
| }, []) |
|
|
| const removeItem = useCallback((index) => { |
| setItems((prev) => prev.filter((_item, i) => i !== index)) |
| setExpandedRows({}) |
| }, []) |
|
|
| const addItem = useCallback(() => { |
| setItems((prev) => (prev.length >= maxCount ? prev : [...prev, emptyProfile()])) |
| }, [maxCount]) |
|
|
| const toggleRow = useCallback((index) => { |
| setExpandedRows((prev) => ({ ...prev, [index]: !prev[index] })) |
| }, []) |
|
|
| const validate = useCallback(() => { |
| const seen = new Set() |
| for (let i = 0; i < items.length; i += 1) { |
| const item = items[i] |
| const id = String(item.id || '').trim() |
| if (!id) { |
| return t('settings.modelProfilesIdRequired', { index: i + 1 }) |
| } |
| if (!/^[A-Za-z0-9._-]{1,64}$/.test(id)) { |
| return t('settings.modelProfilesIdInvalid', { id }) |
| } |
| const key = id.toLowerCase() |
| if (seen.has(key)) { |
| return t('settings.modelProfilesIdDuplicate', { id }) |
| } |
| seen.add(key) |
| if (!String(item.base || '').trim()) { |
| return t('settings.modelProfilesBaseRequired', { id }) |
| } |
| if (String(item.prompt || '').length > maxPromptChars) { |
| return t('settings.modelProfilesPromptTooLong', { id, count: maxPromptChars }) |
| } |
| } |
| return '' |
| }, [items, maxPromptChars, t]) |
|
|
| const save = useCallback(async () => { |
| const message = validate() |
| if (message) { |
| setError(message) |
| onMessage?.('error', message) |
| return |
| } |
| setSaving(true) |
| try { |
| const payload = { |
| items: items.map((item) => ({ |
| id: String(item.id || '').trim(), |
| base: String(item.base || '').trim(), |
| name: String(item.name || '').trim(), |
| remark: String(item.remark || '').trim(), |
| prompt: String(item.prompt || ''), |
| })), |
| } |
| const { res, data } = await putModelProfiles(apiFetch, payload) |
| if (!res.ok) { |
| const detail = data?.detail || t('settings.modelProfilesSaveFailed') |
| setError(detail) |
| onMessage?.('error', detail) |
| return |
| } |
| setError('') |
| onMessage?.('success', t('settings.modelProfilesSaveSuccess', { count: items.length })) |
| await loadProfiles() |
| } catch (_e) { |
| setError(t('settings.modelProfilesSaveFailed')) |
| onMessage?.('error', t('settings.modelProfilesSaveFailed')) |
| } finally { |
| setSaving(false) |
| } |
| }, [apiFetch, items, loadProfiles, maxPromptChars, onMessage, t, validate]) |
|
|
| return ( |
| <div className="bg-card border border-border rounded-xl p-5 space-y-4"> |
| <div className="space-y-1"> |
| <div className="flex items-center justify-between gap-3"> |
| <h3 className="font-semibold">{t('settings.modelProfilesTitle')}</h3> |
| <span className="text-xs text-muted-foreground"> |
| {t('settings.modelProfilesCount', { count: items.length })} |
| </span> |
| </div> |
| <p className="text-xs text-muted-foreground">{t('settings.modelProfilesDesc')}</p> |
| </div> |
| |
| {error && <p className="text-xs text-destructive">{error}</p>} |
| |
| {loading && <p className="text-xs text-muted-foreground">{t('actions.loading')}</p>} |
| |
| {!loading && items.length === 0 && ( |
| <p className="text-xs text-muted-foreground">{t('settings.modelProfilesEmpty')}</p> |
| )} |
| |
| <div className="space-y-3"> |
| {items.map((item, index) => { |
| const expanded = Boolean(expandedRows[index]) |
| return ( |
| <div key={`${index}-${item.id}`} className="rounded-lg border border-border bg-background/60 p-4 space-y-3"> |
| <div className="grid grid-cols-1 md:grid-cols-4 gap-3"> |
| <label className="text-xs space-y-1"> |
| <span className="text-muted-foreground block">{t('settings.modelProfilesId')}</span> |
| <input |
| type="text" |
| value={item.id} |
| onChange={(e) => updateItem(index, { id: e.target.value })} |
| placeholder={t('settings.modelProfilesIdPlaceholder')} |
| className="w-full bg-background border border-border rounded-lg px-3 py-2 text-sm" |
| /> |
| </label> |
| <label className="text-xs space-y-1"> |
| <span className="text-muted-foreground block">{t('settings.modelProfilesBase')}</span> |
| <select |
| value={item.base} |
| onChange={(e) => updateItem(index, { base: e.target.value })} |
| className="w-full bg-background border border-border rounded-lg px-3 py-2 text-sm" |
| > |
| {baseModels.map((model) => ( |
| <option key={model} value={model}>{model}</option> |
| ))} |
| </select> |
| </label> |
| <label className="text-xs space-y-1"> |
| <span className="text-muted-foreground block">{t('settings.modelProfilesName')}</span> |
| <input |
| type="text" |
| value={item.name} |
| onChange={(e) => updateItem(index, { name: e.target.value })} |
| placeholder={t('settings.modelProfilesNamePlaceholder')} |
| className="w-full bg-background border border-border rounded-lg px-3 py-2 text-sm" |
| /> |
| </label> |
| <label className="text-xs space-y-1"> |
| <span className="text-muted-foreground block">{t('settings.modelProfilesRemark')}</span> |
| <input |
| type="text" |
| value={item.remark} |
| onChange={(e) => updateItem(index, { remark: e.target.value })} |
| className="w-full bg-background border border-border rounded-lg px-3 py-2 text-sm" |
| /> |
| </label> |
| </div> |
| <div className="flex items-center justify-between gap-2"> |
| <button |
| type="button" |
| onClick={() => toggleRow(index)} |
| className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1" |
| > |
| {expanded ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />} |
| {expanded ? t('settings.skillsCollapse') : t('settings.modelProfilesPrompt')} |
| </button> |
| <button |
| type="button" |
| onClick={() => removeItem(index)} |
| className="text-xs text-destructive hover:opacity-80 flex items-center gap-1" |
| > |
| <Trash2 className="w-3.5 h-3.5" /> |
| {t('settings.modelProfilesRemove')} |
| </button> |
| </div> |
| {expanded && ( |
| <div className="space-y-1"> |
| <textarea |
| rows={8} |
| value={item.prompt} |
| onChange={(e) => updateItem(index, { prompt: e.target.value })} |
| placeholder={t('settings.modelProfilesPromptPlaceholder')} |
| className="w-full bg-background border border-border rounded-lg px-3 py-2 resize-y min-h-32 text-sm leading-6" |
| /> |
| <p className="text-xs text-muted-foreground"> |
| {t('settings.modelProfilesPromptHint')} |
| </p> |
| </div> |
| )} |
| </div> |
| ) |
| })} |
| </div> |
| |
| <div className="flex flex-wrap items-center gap-2"> |
| <button |
| type="button" |
| onClick={addItem} |
| disabled={items.length >= maxCount} |
| className="h-9 px-3 rounded-lg border border-border bg-background text-sm hover:bg-secondary/70 disabled:opacity-50 flex items-center gap-1" |
| > |
| <Plus className="w-4 h-4" /> |
| {t('settings.modelProfilesAdd')} |
| </button> |
| <button |
| type="button" |
| onClick={save} |
| disabled={saving} |
| className="h-9 px-3 rounded-lg bg-primary text-primary-foreground text-sm hover:bg-primary/90 disabled:opacity-50 flex items-center gap-1" |
| > |
| <Save className="w-4 h-4" /> |
| {saving ? t('settings.skillsSaving') : t('settings.modelProfilesSave')} |
| </button> |
| <span className="text-xs text-muted-foreground">{t('settings.modelProfilesHint')}</span> |
| </div> |
| </div> |
| ) |
| } |
|
|
