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
|
|
@ -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