Files
picoclaw/web/frontend/src/api/models.ts
T
肆月 d2c0b69243 feat(web,api): provider selection and model form foundation (#2831)
* feat: improve model configuration workflows

Add model catalog browsing, provider registry with form validation,
model fetch/test dialogs, and enhanced model management UI.

- Add model catalog API and catalog-dialog component for browsing saved models
- Add provider-registry with auto-populated form fields per provider
- Add provider-combobox, fetch-models-dialog, test-model-dialog components
- Add model-validation for provider-aware model ID validation
- Add command and popover UI components
- Enhance edit-model-sheet with tool schema transform support
- Add anthropic to protocolMetaByName for correct default API base
- Apply NormalizeBaseURL to anthropic provider for consistent URL handling
- Add i18n keys for new model management features (en/zh)

* fix(web): prevent auto-fetch when API key is missing in fetch models dialog

When a provider requires an API key but none is set, the dialog now shows
the warning without triggering a doomed fetch attempt. Fetch is deferred
until the user provides a key.

* fix(web): add credential warning for catalog imports from remote providers

When importing models from a catalog entry whose provider requires an API
key, a yellow warning banner now informs users that credentials will need
to be configured after import.

* feat(web,api): test connection with real connectivity verification and unsaved form values

Add POST /api/models/test-inline endpoint that performs actual network
probes (GET /models) instead of just checking config. Frontend Test
Connection now uses current form values (not saved state) and is
available in both Add and Edit model flows.

* style(web): apply linter formatting across model config components

Normalize quote style, import ordering, and class name ordering as
reported by the project linter.

* fix(web,api): fix edit test connection false negative and gate fetch for unsupported providers

- handleTestInlineModel now accepts optional model_index to fall back to stored credentials when api_key is empty, fixing false negatives when testing edited models
- Add supportsFetch to provider registry and FETCHABLE_PROVIDER_KEYS derived set
- Gate Fetch Models button to only show for OpenAI-compatible and Ollama providers
- Add backend guard in handleFetchModels to reject unsupported providers with clear error

* fix: address review feedback on model config workflow

- Send explicit {} for empty extra_body/custom_headers fields so the
  backend clears stored values instead of preserving them
- Merge backend provider_options with frontend PROVIDERS registry so
  the provider picker reflects backend-supported providers and policy
  fields (create_allowed, default_auth_method, auth_method_locked)
- Render provider combobox popover inside the sheet scroll container
  to fix wheel events scrolling the sheet instead of the provider list

* feat(web,api): add provider selection, model form foundation, and validation

Split from PR #2752 (part 1 of 3).

Backend:
- CRUD model endpoints (list/add/update/delete/set-default)
- Provider metadata with default API bases and model provider options
- Model ID validation and normalization
- Anthropic default API base normalization

Frontend:
- Provider registry with metadata, labels, icons, and aliases
- Provider combobox with backend option merging
- Model field validation with provider-aware checks
- Redesigned add/edit model sheets with provider selection
- Dynamic imports for fetch/catalog/test dialogs (coming in PR2/PR3)
- i18n support for model configuration UI
2026-05-11 16:57:37 +08:00

211 lines
4.8 KiB
TypeScript

import { launcherFetch } from "@/api/http"
import { refreshGatewayState } from "@/store/gateway"
// API client for model list management.
export interface ModelInfo {
index: number
model_name: string
provider?: string
model: string
api_base?: string
api_key: string
proxy?: string
auth_method?: string
// Advanced fields
connect_mode?: string
workspace?: string
rpm?: number
max_tokens_field?: string
request_timeout?: number
thinking_level?: string
tool_schema_transform?: string
extra_body?: Record<string, unknown>
custom_headers?: Record<string, string>
// Meta
enabled: boolean
available: boolean
status: "available" | "unconfigured" | "unreachable"
is_default: boolean
is_virtual: boolean
default_model_allowed?: boolean
}
export interface ModelProviderOption {
id: string
default_api_base: string
empty_api_key_allowed: boolean
create_allowed: boolean
default_model_allowed: boolean
default_auth_method?: string
auth_method_locked?: boolean
}
interface ModelsListResponse {
models: ModelInfo[]
total: number
default_model: string
provider_options: ModelProviderOption[]
}
interface ModelActionResponse {
status: string
index?: number
default_model?: string
}
const BASE_URL = ""
async function request<T>(path: string, options?: RequestInit): Promise<T> {
const res = await launcherFetch(`${BASE_URL}${path}`, options)
if (!res.ok) {
let detail = ""
try {
detail = await res.text()
} catch {
// ignore
}
throw new Error(detail || `API error: ${res.status} ${res.statusText}`)
}
return res.json() as Promise<T>
}
export async function getModels(): Promise<ModelsListResponse> {
return request<ModelsListResponse>("/api/models")
}
export async function addModel(
model: Partial<ModelInfo>,
): Promise<ModelActionResponse> {
return request<ModelActionResponse>("/api/models", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(model),
})
}
export async function updateModel(
index: number,
model: Partial<ModelInfo>,
): Promise<ModelActionResponse> {
return request<ModelActionResponse>(`/api/models/${index}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(model),
})
}
export async function deleteModel(index: number): Promise<ModelActionResponse> {
return request<ModelActionResponse>(`/api/models/${index}`, {
method: "DELETE",
})
}
export async function setDefaultModel(
modelName: string,
): Promise<ModelActionResponse> {
const response = await request<ModelActionResponse>("/api/models/default", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ model_name: modelName }),
})
await refreshGatewayState()
return response
}
export interface TestModelResponse {
success: boolean
latency_ms: number
status: string
error?: string
}
export async function testModel(index: number): Promise<TestModelResponse> {
return request<TestModelResponse>(`/api/models/${index}/test`, {
method: "POST",
})
}
export interface TestModelInlineRequest {
provider: string
model: string
api_base?: string
api_key?: string
auth_method?: string
model_index?: number
}
export async function testModelInline(
params: TestModelInlineRequest,
): Promise<TestModelResponse> {
return request<TestModelResponse>("/api/models/test-inline", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(params),
})
}
export interface UpstreamModel {
id: string
owned_by?: string
}
export interface FetchModelsRequest {
provider: string
api_key?: string
api_base?: string
}
export interface FetchModelsResponse {
models: UpstreamModel[]
total: number
}
export async function fetchUpstreamModels(
req: FetchModelsRequest,
): Promise<FetchModelsResponse> {
return request<FetchModelsResponse>("/api/models/fetch", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(req),
})
}
// --- Model Catalog API ---
export interface CatalogModel {
id: string
owned_by?: string
extra?: Record<string, unknown>
}
export interface CatalogEntry {
id: string
provider: string
api_base: string
api_key_mask: string
models: CatalogModel[]
fetched_at: string
}
interface CatalogListResponse {
entries: CatalogEntry[]
total: number
}
export async function getCatalogs(): Promise<CatalogListResponse> {
return request<CatalogListResponse>("/api/models/catalog")
}
export async function deleteCatalog(id: string): Promise<void> {
await request<Record<string, never>>(
`/api/models/catalog/${encodeURIComponent(id)}`,
{
method: "DELETE",
},
)
}
export type { ModelsListResponse, ModelActionResponse }