| 18 | } |
| 19 | |
| 20 | export function ProviderPicker({ provider, model, onChange }: Props) { |
| 21 | const t = useT(); |
| 22 | const [providers, setProviders] = useState<ProviderInfo[]>([]); |
| 23 | const [loading, setLoading] = useState(true); |
| 24 | |
| 25 | useEffect(() => { |
| 26 | fetch("/api/providers") |
| 27 | .then((r) => r.json()) |
| 28 | .then((j) => { |
| 29 | const list: ProviderInfo[] = j.providers || []; |
| 30 | setProviders(list); |
| 31 | setLoading(false); |
| 32 | // 开箱即用：若初始 provider 不可用（如默认 claude-code 但本机 PATH 无 claude）， |
| 33 | // 自动切到第一个可用 provider + 其首个 model，省去陌生用户首屏手动切换。 |
| 34 | const cur = list.find((p) => p.id === provider); |
| 35 | if (!cur || !cur.available) { |
| 36 | const firstAvail = list.find((p) => p.available); |
| 37 | if (firstAvail) onChange(firstAvail.id, firstAvail.models[0] || ""); |
| 38 | } |
| 39 | }) |
| 40 | .catch(() => setLoading(false)); |
| 41 | // 仅 mount 时跑一次的初始化校正；provider/onChange 取 mount 时的值即可 |
| 42 | // eslint-disable-next-line react-hooks/exhaustive-deps |
| 43 | }, []); |
| 44 | |
| 45 | const current = providers.find((p) => p.id === provider); |
| 46 | |
| 47 | if (loading) { |
| 48 | return ( |
| 49 | <div className="flex flex-col gap-1"> |
| 50 | <span className="k-eyebrow">{t("picker.provider")}</span> |
| 51 | <span className="text-[11px] text-[var(--paper-mute)]"> |
| 52 | {t("picker.loading")} |
| 53 | </span> |
| 54 | </div> |
| 55 | ); |
| 56 | } |
| 57 | |
| 58 | return ( |
| 59 | <div className="flex items-end gap-4"> |
| 60 | <div className="flex flex-col gap-1"> |
| 61 | <span className="k-eyebrow">{t("picker.provider")}</span> |
| 62 | <select |
| 63 | value={provider} |
| 64 | onChange={(e) => { |
| 65 | const newProvId = e.target.value; |
| 66 | const newProv = providers.find((p) => p.id === newProvId); |
| 67 | const newModel = newProv?.models[0] || ""; |
| 68 | onChange(newProvId, newModel); |
| 69 | }} |
| 70 | className="k-select min-w-[140px]" |
| 71 | > |
| 72 | {providers.map((p) => ( |
| 73 | <option |
| 74 | key={p.id} |
| 75 | value={p.id} |
| 76 | disabled={!p.available} |
| 77 | style={{ background: "var(--ink-2)", color: "var(--paper)" }} |