Martin Dvorak
4372423167
Settings -> Providers takes keys for OpenAI, Anthropic (their official OpenAI-compatibility layer), DeepSeek, Groq, OpenRouter and any custom OpenAI-compatible endpoint. One adapter (lib/openai-compat) covers listing, streaming chat, JSON generation and vision, and every model flow can run on a provider: the chat picker lists each enabled provider's models (labelled, remembered), and a "Study generation" choice moves decks, homework, grading and attachment transcription onto a provider model. Keys stay in this browser exactly like the Ollama one (freezmo.providers.v1): never stored server-side, never in a backup or the sync payload, forwarded only with the request that needs them. The provider test asserts the key reaches the provider while the routing header stays on the app side. New suite tests/providers-test.mjs (13 checks) stubs both protocols: model listing, chat streaming, study generation and the Settings flow. Privacy policy updated (en+cs). Contrast 0 findings, axe clean, mobile 126/126, chat 102/102, wizard 95/95, bubbles 34/34, regression 44/44, i18n 13/13, native 33/33. Version 0.4.7, SW -> freezmo-v72.
242 lines
10 KiB
TypeScript
242 lines
10 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
|
||
import { haptic } from "@/lib/haptics";
|
||
import { useI18n } from "@/lib/i18n";
|
||
import { localeHeader } from "@/lib/i18n";
|
||
import { PROVIDERS } from "@/lib/providers";
|
||
import {
|
||
clearProviderKey,
|
||
modelsFor,
|
||
providerHeaders,
|
||
saveProviderKey,
|
||
setCustomBaseUrl,
|
||
setGeneration,
|
||
setProviderModels,
|
||
useProviders,
|
||
} from "@/lib/providers-client";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
/**
|
||
* Settings → Providers: bring-your-own keys for the cloud model providers.
|
||
*
|
||
* Keys live in this browser only — never on the server, never in a backup or
|
||
* the sync payload — and travel with each model call so the self-hosted app
|
||
* can reach the provider on the user's behalf. A key can also take over study
|
||
* generation (decks, homework, grading), and every enabled provider's models
|
||
* show up in the chat picker.
|
||
*/
|
||
export function ProvidersSection() {
|
||
const { t } = useI18n();
|
||
const state = useProviders();
|
||
const [drafts, setDrafts] = useState<Record<string, string>>({});
|
||
const [busy, setBusy] = useState<string | null>(null);
|
||
const [status, setStatus] = useState<Record<string, string>>({});
|
||
|
||
const refresh = async (id: string) => {
|
||
setBusy(id);
|
||
try {
|
||
const response = await fetch("/api/providers", { headers: { ...providerHeaders(id), ...localeHeader() } });
|
||
const body = (await response.json().catch(() => null)) as { models?: string[]; error?: string } | null;
|
||
if (!response.ok || !body?.models) {
|
||
setStatus((previous) => ({ ...previous, [id]: body?.error ?? t("providers.testFailed") }));
|
||
return;
|
||
}
|
||
const models = body.models;
|
||
setProviderModels(id, models);
|
||
setStatus((previous) => ({
|
||
...previous,
|
||
[id]: t("providers.modelCount", { n: String(models.length) }),
|
||
}));
|
||
} catch {
|
||
setStatus((previous) => ({ ...previous, [id]: t("providers.testFailed") }));
|
||
} finally {
|
||
setBusy(null);
|
||
}
|
||
};
|
||
|
||
const save = (id: string) => {
|
||
const key = (drafts[id] ?? "").trim();
|
||
if (!key) return;
|
||
saveProviderKey(id, key);
|
||
setDrafts((previous) => ({ ...previous, [id]: "" }));
|
||
haptic("toggle");
|
||
void refresh(id);
|
||
};
|
||
|
||
const enabled = PROVIDERS.filter((provider) => state.keys[provider.id]);
|
||
const generation = state.generation;
|
||
|
||
return (
|
||
<section className="mb-4 space-y-3 rounded-2xl border border-[var(--hairline)] bg-[var(--surface-sunken)] p-3">
|
||
<div>
|
||
<h3 className="text-sm font-semibold text-[var(--text)]">{t("providers.title")}</h3>
|
||
<p className="mt-0.5 text-[11.5px] leading-snug text-[var(--text-subtle)]">{t("providers.note")}</p>
|
||
</div>
|
||
|
||
{PROVIDERS.map((provider) => {
|
||
const saved = Boolean(state.keys[provider.id]);
|
||
const listed = state.models[provider.id] ?? [];
|
||
return (
|
||
<div key={provider.id} className="space-y-1.5 border-t border-[var(--hairline-soft)] pt-2.5">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<span className="text-[13px] font-semibold text-[var(--text)]">{provider.label}</span>
|
||
{provider.docs ? (
|
||
<a
|
||
href={provider.docs}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="text-[11.5px] font-medium text-accent-600 underline decoration-dotted dark:text-accent-300"
|
||
>
|
||
{t("providers.getKey")}
|
||
</a>
|
||
) : null}
|
||
</div>
|
||
|
||
{provider.id === "custom" ? (
|
||
<input
|
||
value={state.customBaseUrl}
|
||
onChange={(event) => setCustomBaseUrl(event.target.value)}
|
||
placeholder={t("providers.baseUrlPlaceholder")}
|
||
aria-label={t("providers.baseUrl")}
|
||
autoComplete="off"
|
||
spellCheck={false}
|
||
className="w-full rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-3 py-2 text-[13px] text-[var(--text)] outline-none placeholder:text-[var(--text-subtle)] focus:border-accent-400"
|
||
/>
|
||
) : null}
|
||
|
||
<div className="flex items-center gap-2">
|
||
<input
|
||
type="password"
|
||
value={drafts[provider.id] ?? ""}
|
||
onChange={(event) => setDrafts((previous) => ({ ...previous, [provider.id]: event.target.value }))}
|
||
onKeyDown={(event) => {
|
||
if (event.key === "Enter") save(provider.id);
|
||
}}
|
||
placeholder={saved ? t("providers.keySaved") : provider.keyHint}
|
||
aria-label={`${provider.label} ${t("providers.key")}`}
|
||
autoComplete="off"
|
||
spellCheck={false}
|
||
className="min-w-0 flex-1 rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-3 py-2 text-[13px] text-[var(--text)] outline-none placeholder:text-[var(--text-subtle)] focus:border-accent-400"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={() => save(provider.id)}
|
||
disabled={!(drafts[provider.id] ?? "").trim()}
|
||
className="btn-secondary h-9 shrink-0 px-3 text-[12.5px] disabled:opacity-50"
|
||
>
|
||
{t("providers.saveKey")}
|
||
</button>
|
||
{saved ? (
|
||
<>
|
||
<button
|
||
type="button"
|
||
onClick={() => void refresh(provider.id)}
|
||
disabled={busy === provider.id}
|
||
aria-label={t("providers.test")}
|
||
title={t("providers.test")}
|
||
className="grid size-9 shrink-0 place-items-center rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:text-[var(--text)] disabled:opacity-50"
|
||
>
|
||
↻
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
clearProviderKey(provider.id);
|
||
if (generation?.provider === provider.id) setGeneration(null);
|
||
haptic("tap");
|
||
}}
|
||
aria-label={t("providers.remove")}
|
||
title={t("providers.remove")}
|
||
className="grid size-9 shrink-0 place-items-center rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:text-rose-600 disabled:opacity-50"
|
||
>
|
||
×
|
||
</button>
|
||
</>
|
||
) : null}
|
||
</div>
|
||
|
||
{status[provider.id] ?? (saved && listed.length > 0 ? t("providers.modelCount", { n: String(listed.length) }) : null) ? (
|
||
<p
|
||
className={cn(
|
||
"text-[11.5px] leading-snug",
|
||
status[provider.id] && !status[provider.id].includes(String(listed.length))
|
||
? "text-rose-600 dark:text-rose-300"
|
||
: "text-[var(--text-subtle)]",
|
||
)}
|
||
>
|
||
{status[provider.id] ?? t("providers.modelCount", { n: String(listed.length) })}
|
||
</p>
|
||
) : null}
|
||
</div>
|
||
);
|
||
})}
|
||
|
||
{enabled.length > 0 ? (
|
||
<div className="space-y-2 border-t border-[var(--hairline-soft)] pt-2.5">
|
||
<span className="block text-[13px] font-semibold text-[var(--text)]">{t("providers.generation")}</span>
|
||
<p className="text-[11.5px] leading-snug text-[var(--text-subtle)]">{t("providers.generationNote")}</p>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<select
|
||
aria-label={t("providers.generation")}
|
||
value={generation?.provider ?? ""}
|
||
onChange={(event) => {
|
||
const id = event.target.value;
|
||
if (!id) {
|
||
setGeneration(null);
|
||
return;
|
||
}
|
||
const models = modelsFor(state, id);
|
||
setGeneration({ provider: id, textModel: models[0] ?? "", visionModel: models[0] ?? "" });
|
||
haptic("toggle");
|
||
}}
|
||
className="min-w-0 rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-3 py-2 text-[12.5px] text-[var(--text)] outline-none"
|
||
>
|
||
<option value="">{t("providers.serverDefault")}</option>
|
||
{enabled.map((provider) => (
|
||
<option key={provider.id} value={provider.id}>
|
||
{provider.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
{generation ? (
|
||
<>
|
||
<select
|
||
aria-label={t("providers.textModel")}
|
||
value={generation.textModel}
|
||
onChange={(event) =>
|
||
setGeneration({ ...generation, textModel: event.target.value, visionModel: generation.visionModel || event.target.value })
|
||
}
|
||
className="min-w-0 max-w-[46%] rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-3 py-2 text-[12.5px] text-[var(--text)] outline-none"
|
||
>
|
||
{(modelsFor(state, generation.provider).length > 0 ? modelsFor(state, generation.provider) : [generation.textModel]).map(
|
||
(model) => (
|
||
<option key={model} value={model}>
|
||
{model}
|
||
</option>
|
||
),
|
||
)}
|
||
</select>
|
||
<select
|
||
aria-label={t("providers.visionModel")}
|
||
value={generation.visionModel}
|
||
onChange={(event) => setGeneration({ ...generation, visionModel: event.target.value })}
|
||
className="min-w-0 max-w-[46%] rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-3 py-2 text-[12.5px] text-[var(--text)] outline-none"
|
||
>
|
||
{(modelsFor(state, generation.provider).length > 0 ? modelsFor(state, generation.provider) : [generation.visionModel]).map(
|
||
(model) => (
|
||
<option key={model} value={model}>
|
||
{model}
|
||
</option>
|
||
),
|
||
)}
|
||
</select>
|
||
</>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</section>
|
||
);
|
||
}
|