From 3769447604b6427a1785110588792cd2d5f8252a Mon Sep 17 00:00:00 2001 From: Supra4E8C Date: Tue, 17 Feb 2026 01:22:45 +0800 Subject: [PATCH] feat(ai-providers): add Claude model discovery and connectivity test --- src/components/providers/utils.ts | 25 ++ src/i18n/locales/en.json | 25 ++ src/i18n/locales/ru.json | 25 ++ src/i18n/locales/zh-CN.json | 25 ++ src/pages/AiProvidersClaudeEditLayout.tsx | 292 ++++++++++++++ src/pages/AiProvidersClaudeEditPage.tsx | 456 ++++++++++++++-------- src/pages/AiProvidersClaudeModelsPage.tsx | 248 ++++++++++++ src/router/MainRoutes.tsx | 20 +- src/services/api/models.ts | 104 ++++- 9 files changed, 1059 insertions(+), 161 deletions(-) create mode 100644 src/pages/AiProvidersClaudeEditLayout.tsx create mode 100644 src/pages/AiProvidersClaudeModelsPage.tsx diff --git a/src/components/providers/utils.ts b/src/components/providers/utils.ts index 6835f67..8b49000 100644 --- a/src/components/providers/utils.ts +++ b/src/components/providers/utils.ts @@ -43,6 +43,19 @@ export const normalizeOpenAIBaseUrl = (baseUrl: string): string => { return trimmed; }; +export const normalizeClaudeBaseUrl = (baseUrl: string): string => { + let trimmed = String(baseUrl || '').trim(); + if (!trimmed) { + return 'https://api.anthropic.com'; + } + trimmed = trimmed.replace(/\/?v0\/management\/?$/i, ''); + trimmed = trimmed.replace(/\/+$/g, ''); + if (!/^https?:\/\//i.test(trimmed)) { + trimmed = `http://${trimmed}`; + } + return trimmed; +}; + export const buildOpenAIModelsEndpoint = (baseUrl: string): string => { const trimmed = normalizeOpenAIBaseUrl(baseUrl); if (!trimmed) return ''; @@ -58,6 +71,18 @@ export const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => { return `${trimmed}/chat/completions`; }; +export const buildClaudeMessagesEndpoint = (baseUrl: string): string => { + const trimmed = normalizeClaudeBaseUrl(baseUrl); + if (!trimmed) return ''; + if (trimmed.endsWith('/v1/messages')) { + return trimmed; + } + if (trimmed.endsWith('/v1')) { + return `${trimmed}/messages`; + } + return `${trimmed}/v1/messages`; +}; + // 根据 source (apiKey) 获取统计数据 - 与旧版逻辑一致 export const getStatsBySource = ( apiKey: string, diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index 249ada1..fa7644f 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -250,6 +250,31 @@ "claude_models_hint": "Leave empty to allow all models, or add name[, alias] entries to limit/alias them.", "claude_models_add_btn": "Add Model", "claude_models_count": "Models Count", + "claude_models_fetch_button": "Fetch via /v1/models", + "claude_models_fetch_title": "Pick Models from Claude /v1/models", + "claude_models_fetch_hint": "Call GET /v1/models with Anthropic headers. By default, this sends x-api-key and anthropic-version: 2023-06-01, merged with your custom headers.", + "claude_models_fetch_url_label": "Request URL", + "claude_models_fetch_refresh": "Refresh", + "claude_models_fetch_loading": "Fetching models from Claude /v1/models...", + "claude_models_fetch_empty": "No models returned. Please check Base URL, API key, or headers.", + "claude_models_fetch_error": "Failed to fetch Claude models", + "claude_models_fetch_apply": "Add selected models", + "claude_models_search_label": "Search models", + "claude_models_search_placeholder": "Filter by name, alias, or description", + "claude_models_search_empty": "No models match your search. Try a different keyword.", + "claude_models_fetch_added": "{{count}} new models added", + "claude_test_title": "Connection Test", + "claude_test_hint": "Send a test request to /v1/messages using Anthropic headers to verify this configuration.", + "claude_test_select_placeholder": "Choose from current models", + "claude_test_select_empty": "No models configured. Add models first", + "claude_test_action": "Test", + "claude_test_running": "Sending Claude test request...", + "claude_test_timeout": "Test request timed out after {{seconds}} seconds.", + "claude_test_success": "Test succeeded. Claude model responded.", + "claude_test_failed": "Test failed", + "claude_test_key_required": "Please provide a Claude API key or set x-api-key in custom headers", + "claude_test_model_required": "Please select a model to test", + "claude_test_endpoint_invalid": "Unable to build a valid Claude /v1/messages endpoint", "vertex_title": "Vertex API Configuration", "vertex_add_button": "Add Configuration", "vertex_empty_title": "No Vertex Configuration", diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json index 96363d1..3232b8f 100644 --- a/src/i18n/locales/ru.json +++ b/src/i18n/locales/ru.json @@ -250,6 +250,31 @@ "claude_models_hint": "Оставьте пустым, чтобы разрешить все модели, или добавьте записи name[, alias], чтобы ограничить/переименовать их.", "claude_models_add_btn": "Добавить модель", "claude_models_count": "Количество моделей", + "claude_models_fetch_button": "Получить через /v1/models", + "claude_models_fetch_title": "Выбор моделей из Claude /v1/models", + "claude_models_fetch_hint": "Вызывает GET /v1/models по спецификации Anthropic. По умолчанию отправляются x-api-key и anthropic-version: 2023-06-01, объединённые с вашими пользовательскими заголовками.", + "claude_models_fetch_url_label": "URL запроса", + "claude_models_fetch_refresh": "Обновить", + "claude_models_fetch_loading": "Получение моделей из Claude /v1/models...", + "claude_models_fetch_empty": "Модели не вернулись. Проверьте Base URL, API-ключ или заголовки.", + "claude_models_fetch_error": "Не удалось получить модели Claude", + "claude_models_fetch_apply": "Добавить выбранные модели", + "claude_models_search_label": "Поиск моделей", + "claude_models_search_placeholder": "Фильтр по имени, псевдониму или описанию", + "claude_models_search_empty": "Модели по запросу не найдены. Попробуйте другой ключ.", + "claude_models_fetch_added": "Добавлено новых моделей: {{count}}", + "claude_test_title": "Тест подключения", + "claude_test_hint": "Отправляет тестовый запрос в /v1/messages по спецификации Anthropic, чтобы проверить текущую конфигурацию.", + "claude_test_select_placeholder": "Выберите из текущих моделей", + "claude_test_select_empty": "Модели не настроены. Сначала добавьте модели", + "claude_test_action": "Тест", + "claude_test_running": "Отправка тестового запроса Claude...", + "claude_test_timeout": "Тестовый запрос превысил тайм-аут {{seconds}} с", + "claude_test_success": "Тест выполнен успешно. Модель Claude ответила.", + "claude_test_failed": "Тест не выполнен", + "claude_test_key_required": "Укажите Claude API-ключ или задайте x-api-key в пользовательских заголовках", + "claude_test_model_required": "Выберите модель для теста", + "claude_test_endpoint_invalid": "Не удалось сформировать корректный endpoint Claude /v1/messages", "vertex_title": "Конфигурация Vertex API", "vertex_add_button": "Добавить конфигурацию", "vertex_empty_title": "Конфигурации Vertex отсутствуют", diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json index 9195771..54257df 100644 --- a/src/i18n/locales/zh-CN.json +++ b/src/i18n/locales/zh-CN.json @@ -250,6 +250,31 @@ "claude_models_hint": "为空表示使用全部模型；可填写 name[, alias] 以限制或重命名模型。", "claude_models_add_btn": "添加模型", "claude_models_count": "模型数量", + "claude_models_fetch_button": "从 /v1/models 获取", + "claude_models_fetch_title": "从 Claude /v1/models 选择模型", + "claude_models_fetch_hint": "按 Anthropic 规范请求 GET /v1/models，默认附带 x-api-key 与 anthropic-version: 2023-06-01；也会合并你配置的自定义请求头。", + "claude_models_fetch_url_label": "请求地址", + "claude_models_fetch_refresh": "重新获取", + "claude_models_fetch_loading": "正在从 Claude /v1/models 获取模型列表...", + "claude_models_fetch_empty": "未获取到模型，请检查 Base URL、API Key 或请求头。", + "claude_models_fetch_error": "获取 Claude 模型失败", + "claude_models_fetch_apply": "添加所选模型", + "claude_models_search_label": "搜索模型", + "claude_models_search_placeholder": "按名称、别名或描述筛选", + "claude_models_search_empty": "没有匹配的模型，请更换关键字试试。", + "claude_models_fetch_added": "已添加 {{count}} 个新模型", + "claude_test_title": "连通性测试", + "claude_test_hint": "按 Anthropic 规范向 /v1/messages 发送测试请求，验证当前配置是否可用。", + "claude_test_select_placeholder": "从当前模型列表选择", + "claude_test_select_empty": "当前未配置模型，请先添加模型", + "claude_test_action": "测试", + "claude_test_running": "正在发送 Claude 测试请求...", + "claude_test_timeout": "测试请求超时（{{seconds}}秒）。", + "claude_test_success": "测试成功，Claude 模型可用。", + "claude_test_failed": "测试失败", + "claude_test_key_required": "请先填写 Claude API Key 或在自定义请求头中设置 x-api-key", + "claude_test_model_required": "请选择要测试的模型", + "claude_test_endpoint_invalid": "无法构造有效的 Claude /v1/messages 请求地址", "vertex_title": "Vertex API 配置", "vertex_add_button": "添加配置", "vertex_empty_title": "暂无Vertex配置", diff --git a/src/pages/AiProvidersClaudeEditLayout.tsx b/src/pages/AiProvidersClaudeEditLayout.tsx new file mode 100644 index 0000000..62e30b6 --- /dev/null +++ b/src/pages/AiProvidersClaudeEditLayout.tsx @@ -0,0 +1,292 @@ +import type { Dispatch, SetStateAction } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; +import { providersApi } from '@/services/api'; +import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores'; +import type { ProviderKeyConfig } from '@/types'; +import type { ModelInfo } from '@/utils/models'; +import type { ModelEntry, ProviderFormState } from '@/components/providers/types'; +import { buildHeaderObject, headersToEntries } from '@/utils/headers'; +import { excludedModelsToText, parseExcludedModels } from '@/components/providers/utils'; +import { modelsToEntries } from '@/components/ui/modelInputListUtils'; + +type LocationState = { fromAiProviders?: boolean } | null; + +type TestStatus = 'idle' | 'loading' | 'success' | 'error'; + +export type ClaudeEditOutletContext = { + hasIndexParam: boolean; + editIndex: number | null; + invalidIndexParam: boolean; + invalidIndex: boolean; + disableControls: boolean; + loading: boolean; + saving: boolean; + form: ProviderFormState; + setForm: Dispatch>; + testModel: string; + setTestModel: Dispatch>; + testStatus: TestStatus; + setTestStatus: Dispatch>; + testMessage: string; + setTestMessage: Dispatch>; + availableModels: string[]; + handleBack: () => void; + handleSave: () => Promise; + mergeDiscoveredModels: (selectedModels: ModelInfo[]) => void; +}; + +const buildEmptyForm = (): ProviderFormState => ({ + apiKey: '', + prefix: '', + baseUrl: '', + proxyUrl: '', + headers: [], + models: [], + excludedModels: [], + modelEntries: [{ name: '', alias: '' }], + excludedText: '', +}); + +const parseIndexParam = (value: string | undefined) => { + if (!value) return null; + const parsed = Number.parseInt(value, 10); + return Number.isFinite(parsed) ? parsed : null; +}; + +const getErrorMessage = (err: unknown) => { + if (err instanceof Error) return err.message; + if (typeof err === 'string') return err; + return ''; +}; + +export function AiProvidersClaudeEditLayout() { + const { t } = useTranslation(); + const navigate = useNavigate(); + const location = useLocation(); + const { showNotification } = useNotificationStore(); + + const params = useParams<{ index?: string }>(); + const hasIndexParam = typeof params.index === 'string'; + const editIndex = useMemo(() => parseIndexParam(params.index), [params.index]); + const invalidIndexParam = hasIndexParam && editIndex === null; + + const connectionStatus = useAuthStore((state) => state.connectionStatus); + const disableControls = connectionStatus !== 'connected'; + + const config = useConfigStore((state) => state.config); + const fetchConfig = useConfigStore((state) => state.fetchConfig); + const isCacheValid = useConfigStore((state) => state.isCacheValid); + const updateConfigValue = useConfigStore((state) => state.updateConfigValue); + const clearCache = useConfigStore((state) => state.clearCache); + + const [configs, setConfigs] = useState(() => config?.claudeApiKeys ?? []); + const [loading, setLoading] = useState(() => !isCacheValid('claude-api-key')); + const [saving, setSaving] = useState(false); + const [form, setForm] = useState(() => buildEmptyForm()); + const [testModel, setTestModel] = useState(''); + const [testStatus, setTestStatus] = useState('idle'); + const [testMessage, setTestMessage] = useState(''); + + const initialData = useMemo(() => { + if (editIndex === null) return undefined; + return configs[editIndex]; + }, [configs, editIndex]); + + const invalidIndex = editIndex !== null && !initialData; + + const availableModels = useMemo( + () => form.modelEntries.map((entry) => entry.name.trim()).filter(Boolean), + [form.modelEntries] + ); + + const handleBack = useCallback(() => { + const state = location.state as LocationState; + if (state?.fromAiProviders) { + navigate(-1); + return; + } + navigate('/ai-providers', { replace: true }); + }, [location.state, navigate]); + + useEffect(() => { + let cancelled = false; + const hasValidCache = isCacheValid('claude-api-key'); + if (!hasValidCache) { + setLoading(true); + } + + fetchConfig('claude-api-key') + .then((value) => { + if (cancelled) return; + setConfigs(Array.isArray(value) ? (value as ProviderKeyConfig[]) : []); + }) + .catch((err: unknown) => { + if (cancelled) return; + const message = getErrorMessage(err) || t('notification.refresh_failed'); + showNotification(`${t('notification.load_failed')}: ${message}`, 'error'); + }) + .finally(() => { + if (cancelled) return; + setLoading(false); + }); + + return () => { + cancelled = true; + }; + }, [fetchConfig, isCacheValid, showNotification, t]); + + useEffect(() => { + if (loading) return; + + if (initialData) { + setForm({ + ...initialData, + headers: headersToEntries(initialData.headers), + modelEntries: modelsToEntries(initialData.models), + excludedText: excludedModelsToText(initialData.excludedModels), + }); + return; + } + + setForm(buildEmptyForm()); + }, [initialData, loading]); + + useEffect(() => { + if (loading) return; + + if (availableModels.length === 0) { + if (testModel) { + setTestModel(''); + setTestStatus('idle'); + setTestMessage(''); + } + return; + } + + if (!testModel || !availableModels.includes(testModel)) { + setTestModel(availableModels[0]); + setTestStatus('idle'); + setTestMessage(''); + } + }, [availableModels, loading, testModel]); + + const mergeDiscoveredModels = useCallback( + (selectedModels: ModelInfo[]) => { + if (!selectedModels.length) return; + + let addedCount = 0; + setForm((prev) => { + const mergedMap = new Map(); + prev.modelEntries.forEach((entry) => { + const name = entry.name.trim(); + if (!name) return; + mergedMap.set(name, { name, alias: entry.alias?.trim() || '' }); + }); + + selectedModels.forEach((model) => { + const name = model.name.trim(); + if (!name || mergedMap.has(name)) return; + mergedMap.set(name, { name, alias: model.alias ?? '' }); + addedCount += 1; + }); + + const mergedEntries = Array.from(mergedMap.values()); + return { + ...prev, + modelEntries: mergedEntries.length ? mergedEntries : [{ name: '', alias: '' }], + }; + }); + + if (addedCount > 0) { + showNotification(t('ai_providers.claude_models_fetch_added', { count: addedCount }), 'success'); + } + }, + [showNotification, t] + ); + + const handleSave = useCallback(async () => { + const canSave = !disableControls && !saving && !loading && !invalidIndexParam && !invalidIndex; + if (!canSave) return; + + setSaving(true); + try { + const payload: ProviderKeyConfig = { + apiKey: form.apiKey.trim(), + prefix: form.prefix?.trim() || undefined, + baseUrl: (form.baseUrl ?? '').trim() || undefined, + proxyUrl: form.proxyUrl?.trim() || undefined, + headers: buildHeaderObject(form.headers), + models: form.modelEntries + .map((entry) => { + const name = entry.name.trim(); + if (!name) return null; + const alias = entry.alias.trim(); + return { name, alias: alias || name }; + }) + .filter(Boolean) as ProviderKeyConfig['models'], + excludedModels: parseExcludedModels(form.excludedText), + }; + + const nextList = + editIndex !== null + ? configs.map((item, idx) => (idx === editIndex ? payload : item)) + : [...configs, payload]; + + await providersApi.saveClaudeConfigs(nextList); + setConfigs(nextList); + updateConfigValue('claude-api-key', nextList); + clearCache('claude-api-key'); + showNotification( + editIndex !== null ? t('notification.claude_config_updated') : t('notification.claude_config_added'), + 'success' + ); + handleBack(); + } catch (err: unknown) { + showNotification(`${t('notification.update_failed')}: ${getErrorMessage(err)}`, 'error'); + } finally { + setSaving(false); + } + }, [ + clearCache, + configs, + disableControls, + editIndex, + form, + handleBack, + invalidIndex, + invalidIndexParam, + loading, + saving, + showNotification, + t, + updateConfigValue, + ]); + + return ( + + ); +} diff --git a/src/pages/AiProvidersClaudeEditPage.tsx b/src/pages/AiProvidersClaudeEditPage.tsx index 9d9c1fe..9f028bb 100644 --- a/src/pages/AiProvidersClaudeEditPage.tsx +++ b/src/pages/AiProvidersClaudeEditPage.tsx @@ -1,88 +1,75 @@ -import { useCallback, useEffect, useMemo, useState } from 'react'; -import { useLocation, useNavigate, useParams } from 'react-router-dom'; +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { useNavigate, useOutletContext } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { Card } from '@/components/ui/Card'; import { Button } from '@/components/ui/Button'; import { Input } from '@/components/ui/Input'; +import { Select } from '@/components/ui/Select'; import { HeaderInputList } from '@/components/ui/HeaderInputList'; import { ModelInputList } from '@/components/ui/ModelInputList'; -import { modelsToEntries } from '@/components/ui/modelInputListUtils'; import { useEdgeSwipeBack } from '@/hooks/useEdgeSwipeBack'; import { SecondaryScreenShell } from '@/components/common/SecondaryScreenShell'; -import { providersApi } from '@/services/api'; -import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores'; -import type { ProviderKeyConfig } from '@/types'; -import { buildHeaderObject, headersToEntries } from '@/utils/headers'; -import { excludedModelsToText, parseExcludedModels } from '@/components/providers/utils'; -import type { ProviderFormState } from '@/components/providers'; +import { apiCallApi, getApiCallErrorMessage } from '@/services/api'; +import { useNotificationStore } from '@/stores'; +import { buildHeaderObject } from '@/utils/headers'; +import { buildClaudeMessagesEndpoint } from '@/components/providers/utils'; +import type { ClaudeEditOutletContext } from './AiProvidersClaudeEditLayout'; +import styles from './AiProvidersPage.module.scss'; import layoutStyles from './AiProvidersEditLayout.module.scss'; -type LocationState = { fromAiProviders?: boolean } | null; +const CLAUDE_TEST_TIMEOUT_MS = 30_000; +const DEFAULT_ANTHROPIC_VERSION = '2023-06-01'; -const buildEmptyForm = (): ProviderFormState => ({ - apiKey: '', - prefix: '', - baseUrl: '', - proxyUrl: '', - headers: [], - models: [], - excludedModels: [], - modelEntries: [{ name: '', alias: '' }], - excludedText: '', -}); +const getErrorMessage = (err: unknown) => { + if (err instanceof Error) return err.message; + if (typeof err === 'string') return err; + return ''; +}; -const parseIndexParam = (value: string | undefined) => { - if (!value) return null; - const parsed = Number.parseInt(value, 10); - return Number.isFinite(parsed) ? parsed : null; +const hasHeader = (headers: Record, name: string) => { + const target = name.toLowerCase(); + return Object.keys(headers).some((key) => key.toLowerCase() === target); +}; + +const resolveBearerTokenFromAuthorization = (headers: Record): string => { + const entry = Object.entries(headers).find(([key]) => key.toLowerCase() === 'authorization'); + if (!entry) return ''; + const value = String(entry[1] ?? '').trim(); + if (!value) return ''; + const match = value.match(/^Bearer\s+(.+)$/i); + return match?.[1]?.trim() || ''; }; export function AiProvidersClaudeEditPage() { const { t } = useTranslation(); const navigate = useNavigate(); - const location = useLocation(); - const params = useParams<{ index?: string }>(); - const { showNotification } = useNotificationStore(); - const connectionStatus = useAuthStore((state) => state.connectionStatus); - const disableControls = connectionStatus !== 'connected'; + const { + hasIndexParam, + invalidIndexParam, + invalidIndex, + disableControls, + loading, + saving, + form, + setForm, + testModel, + setTestModel, + testStatus, + setTestStatus, + testMessage, + setTestMessage, + availableModels, + handleBack, + handleSave, + } = useOutletContext(); - const fetchConfig = useConfigStore((state) => state.fetchConfig); - const updateConfigValue = useConfigStore((state) => state.updateConfigValue); - const clearCache = useConfigStore((state) => state.clearCache); - - const [configs, setConfigs] = useState([]); - const [loading, setLoading] = useState(true); - const [saving, setSaving] = useState(false); - const [error, setError] = useState(''); - const [form, setForm] = useState(() => buildEmptyForm()); - - const hasIndexParam = typeof params.index === 'string'; - const editIndex = useMemo(() => parseIndexParam(params.index), [params.index]); - const invalidIndexParam = hasIndexParam && editIndex === null; - - const initialData = useMemo(() => { - if (editIndex === null) return undefined; - return configs[editIndex]; - }, [configs, editIndex]); - - const invalidIndex = editIndex !== null && !initialData; - - const title = - editIndex !== null - ? t('ai_providers.claude_edit_modal_title') - : t('ai_providers.claude_add_modal_title'); - - const handleBack = useCallback(() => { - const state = location.state as LocationState; - if (state?.fromAiProviders) { - navigate(-1); - return; - } - navigate('/ai-providers', { replace: true }); - }, [location.state, navigate]); + const title = hasIndexParam + ? t('ai_providers.claude_edit_modal_title') + : t('ai_providers.claude_add_modal_title'); const swipeRef = useEdgeSwipeBack({ onBack: handleBack }); + const [isTesting, setIsTesting] = useState(false); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { @@ -94,101 +81,163 @@ export function AiProvidersClaudeEditPage() { return () => window.removeEventListener('keydown', handleKeyDown); }, [handleBack]); - useEffect(() => { - let cancelled = false; - setLoading(true); - setError(''); + const canSave = + !disableControls && !loading && !saving && !invalidIndexParam && !invalidIndex && !isTesting; - fetchConfig('claude-api-key') - .then((value) => { - if (cancelled) return; - setConfigs(Array.isArray(value) ? (value as ProviderKeyConfig[]) : []); - }) - .catch((err: unknown) => { - if (cancelled) return; - const message = err instanceof Error ? err.message : ''; - setError(message || t('notification.refresh_failed')); - }) - .finally(() => { - if (cancelled) return; - setLoading(false); + const modelSelectOptions = useMemo(() => { + const seen = new Set(); + return form.modelEntries.reduce>((acc, entry) => { + const name = entry.name.trim(); + if (!name || seen.has(name)) return acc; + seen.add(name); + const alias = entry.alias.trim(); + acc.push({ + value: name, + label: alias && alias !== name ? `${name} (${alias})` : name, }); + return acc; + }, []); + }, [form.modelEntries]); - return () => { - cancelled = true; - }; - }, [fetchConfig, t]); + const connectivityConfigSignature = useMemo(() => { + const headersSignature = form.headers + .map((entry) => `${entry.key.trim()}:${entry.value.trim()}`) + .join('|'); + const modelsSignature = form.modelEntries + .map((entry) => `${entry.name.trim()}:${entry.alias.trim()}`) + .join('|'); + return [ + form.apiKey.trim(), + form.baseUrl?.trim() ?? '', + testModel.trim(), + headersSignature, + modelsSignature, + ].join('||'); + }, [form.apiKey, form.baseUrl, form.headers, form.modelEntries, testModel]); + + const previousConnectivityConfigRef = useRef(connectivityConfigSignature); useEffect(() => { - if (loading) return; - - if (initialData) { - setForm({ - ...initialData, - headers: headersToEntries(initialData.headers), - modelEntries: modelsToEntries(initialData.models), - excludedText: excludedModelsToText(initialData.excludedModels), - }); + if (previousConnectivityConfigRef.current === connectivityConfigSignature) { return; } - setForm(buildEmptyForm()); - }, [initialData, loading]); + previousConnectivityConfigRef.current = connectivityConfigSignature; + setTestStatus('idle'); + setTestMessage(''); + }, [connectivityConfigSignature, setTestMessage, setTestStatus]); - const canSave = !disableControls && !saving && !loading && !invalidIndexParam && !invalidIndex; + const openClaudeModelDiscovery = () => { + navigate('models'); + }; - const handleSave = useCallback(async () => { - if (!canSave) return; + const runClaudeConnectivityTest = useCallback(async () => { + if (isTesting) return; + + const modelName = testModel.trim() || availableModels[0] || ''; + if (!modelName) { + const message = t('ai_providers.claude_test_model_required'); + setTestStatus('error'); + setTestMessage(message); + showNotification(message, 'error'); + return; + } + + const customHeaders = buildHeaderObject(form.headers); + const apiKey = form.apiKey.trim(); + const hasApiKeyHeader = hasHeader(customHeaders, 'x-api-key'); + const apiKeyFromAuthorization = resolveBearerTokenFromAuthorization(customHeaders); + const resolvedApiKey = apiKey || apiKeyFromAuthorization; + + if (!resolvedApiKey && !hasApiKeyHeader) { + const message = t('ai_providers.claude_test_key_required'); + setTestStatus('error'); + setTestMessage(message); + showNotification(message, 'error'); + return; + } + + const endpoint = buildClaudeMessagesEndpoint(form.baseUrl ?? ''); + if (!endpoint) { + const message = t('ai_providers.claude_test_endpoint_invalid'); + setTestStatus('error'); + setTestMessage(message); + showNotification(message, 'error'); + return; + } + + const headers: Record = { + 'Content-Type': 'application/json', + ...customHeaders, + }; + + if (!hasHeader(headers, 'anthropic-version')) { + headers['anthropic-version'] = DEFAULT_ANTHROPIC_VERSION; + } + if (!Object.prototype.hasOwnProperty.call(headers, 'Anthropic-Version')) { + headers['Anthropic-Version'] = headers['anthropic-version'] ?? DEFAULT_ANTHROPIC_VERSION; + } + + if (!hasApiKeyHeader && resolvedApiKey) { + headers['x-api-key'] = resolvedApiKey; + } + if (!Object.prototype.hasOwnProperty.call(headers, 'X-Api-Key') && resolvedApiKey) { + headers['X-Api-Key'] = resolvedApiKey; + } + + setIsTesting(true); + setTestStatus('loading'); + setTestMessage(t('ai_providers.claude_test_running')); - setSaving(true); - setError(''); try { - const payload: ProviderKeyConfig = { - apiKey: form.apiKey.trim(), - prefix: form.prefix?.trim() || undefined, - baseUrl: (form.baseUrl ?? '').trim() || undefined, - proxyUrl: form.proxyUrl?.trim() || undefined, - headers: buildHeaderObject(form.headers), - models: form.modelEntries - .map((entry) => { - const name = entry.name.trim(); - if (!name) return null; - const alias = entry.alias.trim(); - return { name, alias: alias || name }; - }) - .filter(Boolean) as ProviderKeyConfig['models'], - excludedModels: parseExcludedModels(form.excludedText), - }; - - const nextList = - editIndex !== null - ? configs.map((item, idx) => (idx === editIndex ? payload : item)) - : [...configs, payload]; - - await providersApi.saveClaudeConfigs(nextList); - updateConfigValue('claude-api-key', nextList); - clearCache('claude-api-key'); - showNotification( - editIndex !== null ? t('notification.claude_config_updated') : t('notification.claude_config_added'), - 'success' + const result = await apiCallApi.request( + { + method: 'POST', + url: endpoint, + header: headers, + data: JSON.stringify({ + model: modelName, + max_tokens: 8, + messages: [{ role: 'user', content: 'Hi' }], + }), + }, + { timeout: CLAUDE_TEST_TIMEOUT_MS } ); - handleBack(); + + if (result.statusCode < 200 || result.statusCode >= 300) { + throw new Error(getApiCallErrorMessage(result)); + } + + const message = t('ai_providers.claude_test_success'); + setTestStatus('success'); + setTestMessage(message); + showNotification(message, 'success'); } catch (err: unknown) { - const message = err instanceof Error ? err.message : ''; - setError(message); - showNotification(`${t('notification.update_failed')}: ${message}`, 'error'); + const message = getErrorMessage(err); + const errorCode = + typeof err === 'object' && err !== null && 'code' in err + ? String((err as { code?: string }).code) + : ''; + const isTimeout = errorCode === 'ECONNABORTED' || message.toLowerCase().includes('timeout'); + const resolvedMessage = isTimeout + ? t('ai_providers.claude_test_timeout', { seconds: CLAUDE_TEST_TIMEOUT_MS / 1000 }) + : `${t('ai_providers.claude_test_failed')}: ${message || t('common.unknown_error')}`; + setTestStatus('error'); + setTestMessage(resolvedMessage); + showNotification(resolvedMessage, 'error'); } finally { - setSaving(false); + setIsTesting(false); } }, [ - canSave, - clearCache, - configs, - editIndex, - form, - handleBack, + availableModels, + form.apiKey, + form.baseUrl, + form.headers, + isTesting, + setTestMessage, + setTestStatus, showNotification, t, - updateConfigValue, + testModel, ]); return ( @@ -200,7 +249,7 @@ export function AiProvidersClaudeEditPage() { backLabel={t('common.back')} backAriaLabel={t('common.back')} rightAction={ - } @@ -208,16 +257,15 @@ export function AiProvidersClaudeEditPage() { loadingLabel={t('common.loading')} > - {error &&
{error}
} {invalidIndexParam || invalidIndex ? ( -
{t('common.invalid_provider_index')}
+
{t('common.invalid_provider_index')}
) : ( - <> +
setForm((prev) => ({ ...prev, apiKey: e.target.value }))} - disabled={disableControls || saving} + disabled={saving || disableControls || isTesting} /> setForm((prev) => ({ ...prev, prefix: e.target.value }))} hint={t('ai_providers.prefix_hint')} - disabled={disableControls || saving} + disabled={saving || disableControls || isTesting} /> setForm((prev) => ({ ...prev, baseUrl: e.target.value }))} - disabled={disableControls || saving} + disabled={saving || disableControls || isTesting} /> setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))} - disabled={disableControls || saving} + disabled={saving || disableControls || isTesting} /> -
- + +
+
+ +
+ + +
+
+ +
{t('ai_providers.claude_models_hint')}
+ setForm((prev) => ({ ...prev, modelEntries: entries }))} - addLabel={t('ai_providers.claude_models_add_btn')} namePlaceholder={t('common.model_name_placeholder')} aliasPlaceholder={t('common.model_alias_placeholder')} + disabled={saving || disableControls || isTesting} + hideAddButton + className={styles.modelInputList} + rowClassName={styles.modelInputRow} + inputClassName={styles.modelInputField} + removeButtonClassName={styles.modelRowRemoveButton} removeButtonTitle={t('common.delete')} removeButtonAriaLabel={t('common.delete')} - disabled={disableControls || saving} /> + +
+
+ + {t('ai_providers.claude_test_hint')} +
+
+