import { useState } from "react";
import { deleteAiEndpoint, saveAiEndpoint } from "~/fns/ai-endpoints";
import { useAction } from "~/hooks/use-action";
import { Panel } from "~/ui/Panel";
import { Button } from "~/ui/Button";
import { SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
type Kind = "provider" | "openai" | "cf-gateway";
export type AiEndpointSummaryView = {
kind: Kind;
provider: string | null;
model: string;
baseUrl: string | null;
cfAccountId: string | null;
cfGatewayId: string | null;
};
export type AiEndpointTarget =
| { scope: "repo"; owner: string; repo: string }
| { scope: "account"; org: string | null };
const KIND_LABELS: Record<Kind, string> = {
provider: "Provider key (through this instance's AI Gateway)",
openai: "OpenAI-compatible endpoint",
"cf-gateway": "My Cloudflare AI Gateway",
};
function describe(endpoint: AiEndpointSummaryView): string {
if (endpoint.kind === "openai") return `${endpoint.model} at ${endpoint.baseUrl}`;
if (endpoint.kind === "cf-gateway")
return `${endpoint.provider}/${endpoint.model} via gateway ${endpoint.cfGatewayId}`;
return `${endpoint.provider}/${endpoint.model}`;
}
/** Bring-your-own AI endpoint for an account or a repository. The saved key is never shown again. */
export function AiEndpointForm({
title,
target,