Bring-your-own keys for cloud providers (OpenAI-compatible)
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.
This commit is contained in:
parent
37f7d22041
commit
4372423167
28 changed files with 1538 additions and 150 deletions
242
components/ProvidersSection.tsx
Normal file
242
components/ProvidersSection.tsx
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
"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>
|
||||
);
|
||||
}
|
||||
|
|
@ -14,6 +14,7 @@ import { DataSection } from "@/components/DataSection";
|
|||
import { LearningSection } from "@/components/LearningSection";
|
||||
import { ThemeSection } from "@/components/ThemeSection";
|
||||
import { useReducedMotionPref } from "@/lib/motion-pref";
|
||||
import { ProvidersSection } from "@/components/ProvidersSection";
|
||||
import { SyncSection } from "@/components/SyncSection";
|
||||
import { clearApiKey, saveSettings, settingsStore } from "@/lib/settings";
|
||||
import { useBackClose } from "@/lib/use-back-close";
|
||||
|
|
@ -426,6 +427,9 @@ export function SettingsDialog({
|
|||
/>
|
||||
</section>
|
||||
|
||||
{/* --------------------------------------- providers */}
|
||||
<ProvidersSection />
|
||||
|
||||
{/* ----------------------------------------- learning */}
|
||||
<LearningSection level={3} />
|
||||
|
||||
|
|
@ -801,6 +805,9 @@ export function SettingsDialog({
|
|||
/>
|
||||
</section>
|
||||
|
||||
{/* --------------------------------------- providers */}
|
||||
<ProvidersSection />
|
||||
|
||||
{/* ----------------------------------------- learning */}
|
||||
<LearningSection level={3} />
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ import { HistorySheet } from "./HistoryPanel";
|
|||
import { MessageRow } from "./MessageRow";
|
||||
import { ModelPicker } from "./ModelPicker";
|
||||
import { ChatIcon, ChatPlusIcon, ChevronDownIcon, ChevronLeftIcon, HistoryIcon, RefreshIcon } from "@/components/icons";
|
||||
import { PROVIDERS, providerInfo } from "@/lib/providers";
|
||||
import { modelsFor, useProviders } from "@/lib/providers-client";
|
||||
import { ModelErrorActions } from "@/components/ModelErrorActions";
|
||||
import { ThemeToggle } from "@/components/ThemeToggle";
|
||||
import { Button } from "@/components/ui";
|
||||
|
|
@ -24,7 +26,9 @@ import { chatHistoryStore, conversationMessages, deleteConversation, ensureChats
|
|||
import {
|
||||
chatMessageId,
|
||||
readStoredChatModel,
|
||||
readStoredChatProvider,
|
||||
storeChatModel,
|
||||
storeChatProvider,
|
||||
titleFromMessage,
|
||||
type ChatAttachment,
|
||||
type ChatMessage,
|
||||
|
|
@ -75,6 +79,7 @@ export function ChatScreen() {
|
|||
const [attachments, setAttachments] = useState<PendingAttachment[]>([]);
|
||||
const [attachBusy, setAttachBusy] = useState(false);
|
||||
const [model, setModel] = useState("");
|
||||
const [provider, setProvider] = useState("ollama");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [pinned, setPinned] = useState(true);
|
||||
const [scopeOpen, setScopeOpen] = useState(false);
|
||||
|
|
@ -106,6 +111,7 @@ export function ChatScreen() {
|
|||
|
||||
useEffect(() => {
|
||||
setModel(readStoredChatModel() ?? "");
|
||||
setProvider(readStoredChatProvider());
|
||||
}, []);
|
||||
|
||||
/* History: hydrate once, then open ?c=<id> conversations. */
|
||||
|
|
@ -124,6 +130,7 @@ export function ChatScreen() {
|
|||
setDraft("");
|
||||
setError(null);
|
||||
if (found.model) setModel(found.model);
|
||||
if ((found as { provider?: string }).provider) setProvider((found as { provider?: string }).provider ?? "ollama");
|
||||
loadedRef.current = found.id;
|
||||
chatActive.set(found.id);
|
||||
}, []);
|
||||
|
|
@ -154,6 +161,7 @@ export function ChatScreen() {
|
|||
};
|
||||
}, []);
|
||||
|
||||
const providerState = useProviders();
|
||||
const chatModels = useMemo<ChatModelChoice[]>(() => {
|
||||
const fromHealth = health?.chatModels ?? [];
|
||||
const list =
|
||||
|
|
@ -163,16 +171,30 @@ export function ChatScreen() {
|
|||
{ name: health?.text?.configured ?? "", badge: "text" as const, available: health?.text?.available ?? null },
|
||||
{ name: health?.vision?.configured ?? "", badge: "vision" as const, available: health?.vision?.available ?? null },
|
||||
];
|
||||
return list.filter((entry) => entry.name);
|
||||
}, [health]);
|
||||
const ollama = list.filter((entry) => entry.name);
|
||||
// Every enabled cloud provider contributes its models (live listing first,
|
||||
// the built-in seeds otherwise), labelled with the provider.
|
||||
const cloud: ChatModelChoice[] = [];
|
||||
for (const info of PROVIDERS) {
|
||||
if (!providerState.keys[info.id]) continue;
|
||||
const models = modelsFor(providerState, info.id).slice(0, 400);
|
||||
if (models.length === 0) continue;
|
||||
for (const name of models) {
|
||||
cloud.push({ name, badge: "text", available: true, provider: info.id });
|
||||
}
|
||||
}
|
||||
return [...ollama, ...cloud];
|
||||
}, [health, providerState]);
|
||||
|
||||
const activeModel = useMemo(() => {
|
||||
if (model && chatModels.some((entry) => entry.name === model)) return model;
|
||||
if (model && chatModels.some((entry) => entry.name === model && (entry.provider ?? "ollama") === provider)) return model;
|
||||
const sameProvider = chatModels.find((entry) => (entry.provider ?? "ollama") === provider && entry.available !== false);
|
||||
if (model && sameProvider?.name === model) return model;
|
||||
// The server puts the default first, but a different server may not have
|
||||
// it — fall back to the first model that is actually available.
|
||||
const firstAvailable = chatModels.find((entry) => entry.available !== false);
|
||||
return (firstAvailable ?? chatModels[0])?.name ?? model;
|
||||
}, [model, chatModels]);
|
||||
const firstAvailable = chatModels.find((entry) => (entry.provider ?? "ollama") === provider && entry.available !== false);
|
||||
return (firstAvailable ?? chatModels.find((entry) => (entry.provider ?? "ollama") === provider) ?? chatModels[0])?.name ?? model;
|
||||
}, [model, chatModels, provider]);
|
||||
|
||||
const scopeText = useMemo(() => {
|
||||
if (scope.kind === "all") return t("chat.scope.all");
|
||||
|
|
@ -297,6 +319,7 @@ export function ChatScreen() {
|
|||
try {
|
||||
await streamChat({
|
||||
model: activeModel || undefined,
|
||||
provider,
|
||||
messages: history.map((message) => ({ role: message.role, content: message.content })),
|
||||
context: context.chunks.map(({ deckId, deckTitle, section, text }) => ({ deckId, deckTitle, section, text })),
|
||||
signal: controller.signal,
|
||||
|
|
@ -689,8 +712,14 @@ export function ChatScreen() {
|
|||
busy={busy}
|
||||
online={online}
|
||||
scopeLabel={scopeText}
|
||||
modelLabel={activeModel ? prettyModelName(activeModel) : t("chat.modelTitle")}
|
||||
modelTitle={activeModel || undefined}
|
||||
modelLabel={
|
||||
activeModel
|
||||
? provider !== "ollama"
|
||||
? `${providerInfo(provider)?.label ?? provider} · ${prettyModelName(activeModel)}`
|
||||
: prettyModelName(activeModel)
|
||||
: t("chat.modelTitle")
|
||||
}
|
||||
modelTitle={activeModel ? `${activeModel} · ${providerInfo(provider)?.label ?? provider}` : undefined}
|
||||
scopeOpen={scopeOpen}
|
||||
modelOpen={modelOpen}
|
||||
// The chips toggle their own popover (and open one at a time), so a
|
||||
|
|
@ -713,7 +742,10 @@ export function ChatScreen() {
|
|||
onClose={() => setModelOpen(false)}
|
||||
models={chatModels}
|
||||
value={activeModel}
|
||||
onChange={(next) => {
|
||||
valueProvider={provider}
|
||||
onChange={(next, nextProvider) => {
|
||||
setProvider(nextProvider ?? "ollama");
|
||||
storeChatProvider(nextProvider ?? "ollama");
|
||||
setModel(next);
|
||||
storeChatModel(next);
|
||||
if (messages.length > 0) persist(messages, { model: next });
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
|
|||
|
||||
import { CheckCircleIcon } from "@/components/icons";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { providerInfo } from "@/lib/providers";
|
||||
import { springSheet } from "@/lib/motion";
|
||||
import { useIsPhone } from "@/lib/use-phone";
|
||||
import type { ChatModelChoice } from "@/lib/chat";
|
||||
|
|
@ -20,13 +21,16 @@ export function ModelPicker({
|
|||
onClose,
|
||||
models,
|
||||
value,
|
||||
valueProvider,
|
||||
onChange,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
models: ChatModelChoice[];
|
||||
value: string;
|
||||
onChange: (model: string) => void;
|
||||
/** Provider that owns `value` (Ollama when omitted). */
|
||||
valueProvider?: string;
|
||||
onChange: (model: string, provider?: string) => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const isPhone = useIsPhone();
|
||||
|
|
@ -66,6 +70,8 @@ export function ModelPicker({
|
|||
return () => document.removeEventListener("pointerdown", onDown);
|
||||
}, [open, isPhone, onClose]);
|
||||
|
||||
const providerLabel = (id: string) => providerInfo(id)?.label ?? id;
|
||||
|
||||
const badge = (model: ChatModelChoice) =>
|
||||
model.badge === "vision" ? t("chat.modelVision") : model.badge === "both" ? t("chat.modelBoth") : t("chat.modelText");
|
||||
|
||||
|
|
@ -87,7 +93,7 @@ export function ModelPicker({
|
|||
<li className="px-3 py-2 text-[12.5px] text-[var(--text-subtle)]">{t("chat.modelSearchEmpty")}</li>
|
||||
) : null}
|
||||
{visible.map((model) => {
|
||||
const selected = model.name === value;
|
||||
const selected = model.name === value && (model.provider ?? "ollama") === (valueProvider ?? "ollama");
|
||||
const unavailable = model.available === false;
|
||||
return (
|
||||
<li key={model.name}>
|
||||
|
|
@ -96,7 +102,7 @@ export function ModelPicker({
|
|||
disabled={unavailable}
|
||||
aria-pressed={selected}
|
||||
onClick={() => {
|
||||
onChange(model.name);
|
||||
onChange(model.name, model.provider);
|
||||
onClose();
|
||||
}}
|
||||
className={cn(
|
||||
|
|
@ -110,7 +116,9 @@ export function ModelPicker({
|
|||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate text-[13.5px] font-semibold text-[var(--text)]">{model.name}</span>
|
||||
<span className="mt-0.5 flex items-center gap-2 text-[11.5px] text-[var(--text-subtle)]">
|
||||
<span className="rounded-md border border-[var(--hairline-soft)] px-1.5 py-0.5">{badge(model)}</span>
|
||||
<span className="rounded-md border border-[var(--hairline-soft)] px-1.5 py-0.5">
|
||||
{model.provider ? `${providerLabel(model.provider)} · ${badge(model)}` : badge(model)}
|
||||
</span>
|
||||
{model.available === true ? (
|
||||
<span className="text-emerald-600 dark:text-emerald-300">{t("chat.modelAvailable")}</span>
|
||||
) : model.available === false ? (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue