mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-02 19:00:49 +08:00
feat: enhance AiProvidersPage with OpenAI model discovery functionality, improve localization for model selection messages, and update styles for better user experience
This commit is contained in:
Supra4E8C
@@ -235,7 +235,7 @@
|
||||
"openai_test_success": "Test succeeded. The model responded.",
|
||||
"openai_test_failed": "Test failed",
|
||||
"openai_test_select_placeholder": "Choose from current models",
|
||||
"openai_test_select_empty": "No models configured, enter manually"
|
||||
"openai_test_select_empty": "No models configured. Add models first"
|
||||
},
|
||||
"auth_files": {
|
||||
"title": "Auth Files Management",
|
||||
@@ -616,7 +616,7 @@
|
||||
"openai_model_name_required": "Model name is required",
|
||||
"openai_test_url_required": "Please provide a valid Base URL before testing",
|
||||
"openai_test_key_required": "Please add at least one API key before testing",
|
||||
"openai_test_model_required": "Please select or enter a model to test",
|
||||
"openai_test_model_required": "Please select a model to test",
|
||||
"data_refreshed": "Data refreshed successfully",
|
||||
"connection_required": "Please establish connection first",
|
||||
"refresh_failed": "Refresh failed",
|
||||
|
||||
@@ -235,7 +235,7 @@
|
||||
"openai_test_success": "测试成功，模型可用。",
|
||||
"openai_test_failed": "测试失败",
|
||||
"openai_test_select_placeholder": "从当前模型列表选择",
|
||||
"openai_test_select_empty": "当前未配置模型，可直接输入"
|
||||
"openai_test_select_empty": "当前未配置模型，请先添加模型"
|
||||
},
|
||||
"auth_files": {
|
||||
"title": "认证文件管理",
|
||||
@@ -616,7 +616,7 @@
|
||||
"openai_model_name_required": "请填写模型名称",
|
||||
"openai_test_url_required": "请先填写有效的 Base URL 以进行测试",
|
||||
"openai_test_key_required": "请至少填写一个 API 密钥以进行测试",
|
||||
"openai_test_model_required": "请选择或输入要测试的模型",
|
||||
"openai_test_model_required": "请选择要测试的模型",
|
||||
"data_refreshed": "数据刷新成功",
|
||||
"connection_required": "请先建立连接",
|
||||
"refresh_failed": "刷新失败",
|
||||
|
||||
@@ -286,6 +286,78 @@
|
||||
color: var(--failure-badge-text, #991b1b);
|
||||
}
|
||||
|
||||
// OpenAI 模型发现（二级界面）
|
||||
.modelDiscoveryList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
max-height: 360px;
|
||||
overflow-y: auto;
|
||||
margin-top: 8px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.modelDiscoveryRow {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-primary);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, border-color 0.15s ease;
|
||||
|
||||
input[type='checkbox'] {
|
||||
margin-top: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary-color);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.modelDiscoveryRowSelected {
|
||||
border-color: var(--primary-color);
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.modelDiscoveryMeta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.modelDiscoveryName {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.modelDiscoveryAlias {
|
||||
margin-left: 6px;
|
||||
color: var(--text-tertiary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.modelDiscoveryDesc {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.openaiTestButtonSuccess {
|
||||
background-color: var(--success-badge-bg, #d1fae5);
|
||||
border-color: var(--success-badge-border, #6ee7b7);
|
||||
color: var(--success-badge-text, #065f46);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--success-badge-bg, #d1fae5);
|
||||
border-color: var(--success-badge-border, #6ee7b7);
|
||||
}
|
||||
}
|
||||
|
||||
// 暗色主题适配
|
||||
:global([data-theme='dark']) {
|
||||
.headerBadge {
|
||||
|
||||
@@ -8,7 +8,7 @@ import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { HeaderInputList } from '@/components/ui/HeaderInputList';
|
||||
import { ModelInputList, modelsToEntries, entriesToModels } from '@/components/ui/ModelInputList';
|
||||
import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
|
||||
import { providersApi, usageApi } from '@/services/api';
|
||||
import { modelsApi, providersApi, usageApi } from '@/services/api';
|
||||
import type {
|
||||
GeminiKeyConfig,
|
||||
ProviderKeyConfig,
|
||||
@@ -16,6 +16,7 @@ import type {
|
||||
ApiKeyEntry
|
||||
} from '@/types';
|
||||
import type { KeyStats, KeyStatBucket } from '@/utils/usage';
|
||||
import type { ModelInfo } from '@/utils/models';
|
||||
import { headersToEntries, buildHeaderObject, type HeaderEntry } from '@/utils/headers';
|
||||
import { maskApiKey } from '@/utils/format';
|
||||
import styles from './AiProvidersPage.module.scss';
|
||||
@@ -48,6 +49,21 @@ const parseExcludedModels = (text: string): string[] =>
|
||||
|
||||
const excludedModelsToText = (models?: string[]) => (Array.isArray(models) ? models.join('\n') : '');
|
||||
|
||||
const buildOpenAIModelsEndpoint = (baseUrl: string): string => {
|
||||
const trimmed = String(baseUrl || '').trim().replace(/\/+$/g, '');
|
||||
if (!trimmed) return '';
|
||||
return trimmed.endsWith('/v1') ? `${trimmed}/models` : `${trimmed}/v1/models`;
|
||||
};
|
||||
|
||||
const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => {
|
||||
const trimmed = String(baseUrl || '').trim().replace(/\/+$/g, '');
|
||||
if (!trimmed) return '';
|
||||
if (trimmed.endsWith('/chat/completions')) {
|
||||
return trimmed;
|
||||
}
|
||||
return trimmed.endsWith('/v1') ? `${trimmed}/chat/completions` : `${trimmed}/v1/chat/completions`;
|
||||
};
|
||||
|
||||
// 根据 source (apiKey) 获取统计数据 - 与旧版逻辑一致
|
||||
const getStatsBySource = (
|
||||
apiKey: string,
|
||||
@@ -130,9 +146,36 @@ export function AiProvidersPage() {
|
||||
apiKeyEntries: [buildApiKeyEntry()],
|
||||
modelEntries: [{ name: '', alias: '' }]
|
||||
});
|
||||
const [openaiDiscoveryOpen, setOpenaiDiscoveryOpen] = useState(false);
|
||||
const [openaiDiscoveryEndpoint, setOpenaiDiscoveryEndpoint] = useState('');
|
||||
const [openaiDiscoveryModels, setOpenaiDiscoveryModels] = useState<ModelInfo[]>([]);
|
||||
const [openaiDiscoveryLoading, setOpenaiDiscoveryLoading] = useState(false);
|
||||
const [openaiDiscoveryError, setOpenaiDiscoveryError] = useState('');
|
||||
const [openaiDiscoverySearch, setOpenaiDiscoverySearch] = useState('');
|
||||
const [openaiDiscoverySelected, setOpenaiDiscoverySelected] = useState<Set<string>>(new Set());
|
||||
const [openaiTestModel, setOpenaiTestModel] = useState('');
|
||||
const [openaiTestStatus, setOpenaiTestStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
|
||||
const [openaiTestMessage, setOpenaiTestMessage] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const disableControls = useMemo(() => connectionStatus !== 'connected', [connectionStatus]);
|
||||
const filteredOpenaiDiscoveryModels = useMemo(() => {
|
||||
const filter = openaiDiscoverySearch.trim().toLowerCase();
|
||||
if (!filter) return openaiDiscoveryModels;
|
||||
return openaiDiscoveryModels.filter((model) => {
|
||||
const name = (model.name || '').toLowerCase();
|
||||
const alias = (model.alias || '').toLowerCase();
|
||||
const desc = (model.description || '').toLowerCase();
|
||||
return name.includes(filter) || alias.includes(filter) || desc.includes(filter);
|
||||
});
|
||||
}, [openaiDiscoveryModels, openaiDiscoverySearch]);
|
||||
const openaiAvailableModels = useMemo(
|
||||
() =>
|
||||
openaiForm.modelEntries
|
||||
.map((entry) => entry.name.trim())
|
||||
.filter(Boolean),
|
||||
[openaiForm.modelEntries]
|
||||
);
|
||||
|
||||
// 加载 key 统计
|
||||
const loadKeyStats = useCallback(async () => {
|
||||
@@ -197,6 +240,15 @@ export function AiProvidersPage() {
|
||||
modelEntries: [{ name: '', alias: '' }],
|
||||
testModel: undefined
|
||||
});
|
||||
setOpenaiDiscoveryOpen(false);
|
||||
setOpenaiDiscoveryModels([]);
|
||||
setOpenaiDiscoverySelected(new Set());
|
||||
setOpenaiDiscoverySearch('');
|
||||
setOpenaiDiscoveryError('');
|
||||
setOpenaiDiscoveryEndpoint('');
|
||||
setOpenaiTestModel('');
|
||||
setOpenaiTestStatus('idle');
|
||||
setOpenaiTestMessage('');
|
||||
};
|
||||
|
||||
const openGeminiModal = (index: number | null) => {
|
||||
@@ -225,18 +277,229 @@ export function AiProvidersPage() {
|
||||
const openOpenaiModal = (index: number | null) => {
|
||||
if (index !== null) {
|
||||
const entry = openaiProviders[index];
|
||||
const modelEntries = modelsToEntries(entry.models);
|
||||
setOpenaiForm({
|
||||
name: entry.name,
|
||||
baseUrl: entry.baseUrl,
|
||||
headers: headersToEntries(entry.headers),
|
||||
testModel: entry.testModel,
|
||||
modelEntries: modelsToEntries(entry.models),
|
||||
modelEntries,
|
||||
apiKeyEntries: entry.apiKeyEntries?.length ? entry.apiKeyEntries : [buildApiKeyEntry()]
|
||||
});
|
||||
const available = modelEntries.map((m) => m.name.trim()).filter(Boolean);
|
||||
const initialModel =
|
||||
entry.testModel && available.includes(entry.testModel) ? entry.testModel : available[0] || '';
|
||||
setOpenaiTestModel(initialModel);
|
||||
} else {
|
||||
setOpenaiTestModel('');
|
||||
}
|
||||
setOpenaiTestStatus('idle');
|
||||
setOpenaiTestMessage('');
|
||||
setModal({ type: 'openai', index });
|
||||
};
|
||||
|
||||
const closeOpenaiModelDiscovery = () => {
|
||||
setOpenaiDiscoveryOpen(false);
|
||||
setOpenaiDiscoveryModels([]);
|
||||
setOpenaiDiscoverySelected(new Set());
|
||||
setOpenaiDiscoverySearch('');
|
||||
setOpenaiDiscoveryError('');
|
||||
};
|
||||
|
||||
const fetchOpenaiModelDiscovery = async ({ allowFallback = true }: { allowFallback?: boolean } = {}) => {
|
||||
const baseUrl = openaiForm.baseUrl.trim();
|
||||
if (!baseUrl) return;
|
||||
|
||||
setOpenaiDiscoveryLoading(true);
|
||||
setOpenaiDiscoveryError('');
|
||||
try {
|
||||
const headers = buildHeaderObject(openaiForm.headers);
|
||||
const firstKey = openaiForm.apiKeyEntries.find((entry) => entry.apiKey?.trim())?.apiKey?.trim();
|
||||
const hasAuthHeader = Boolean(headers.Authorization || headers['authorization']);
|
||||
const list = await modelsApi.fetchModels(baseUrl, hasAuthHeader ? undefined : firstKey, headers);
|
||||
setOpenaiDiscoveryModels(list);
|
||||
} catch (err: any) {
|
||||
if (allowFallback) {
|
||||
try {
|
||||
const list = await modelsApi.fetchModels(baseUrl);
|
||||
setOpenaiDiscoveryModels(list);
|
||||
return;
|
||||
} catch (fallbackErr: any) {
|
||||
const message = fallbackErr?.message || err?.message || '';
|
||||
setOpenaiDiscoveryModels([]);
|
||||
setOpenaiDiscoveryError(`${t('ai_providers.openai_models_fetch_error')}: ${message}`);
|
||||
}
|
||||
} else {
|
||||
setOpenaiDiscoveryModels([]);
|
||||
setOpenaiDiscoveryError(`${t('ai_providers.openai_models_fetch_error')}: ${err?.message || ''}`);
|
||||
}
|
||||
} finally {
|
||||
setOpenaiDiscoveryLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openOpenaiModelDiscovery = () => {
|
||||
const baseUrl = openaiForm.baseUrl.trim();
|
||||
if (!baseUrl) {
|
||||
showNotification(t('ai_providers.openai_models_fetch_invalid_url'), 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
setOpenaiDiscoveryEndpoint(buildOpenAIModelsEndpoint(baseUrl));
|
||||
setOpenaiDiscoveryModels([]);
|
||||
setOpenaiDiscoverySearch('');
|
||||
setOpenaiDiscoverySelected(new Set());
|
||||
setOpenaiDiscoveryError('');
|
||||
setOpenaiDiscoveryOpen(true);
|
||||
void fetchOpenaiModelDiscovery();
|
||||
};
|
||||
|
||||
const toggleOpenaiModelSelection = (name: string) => {
|
||||
setOpenaiDiscoverySelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(name)) {
|
||||
next.delete(name);
|
||||
} else {
|
||||
next.add(name);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const applyOpenaiModelDiscoverySelection = () => {
|
||||
const selectedModels = openaiDiscoveryModels.filter((model) => openaiDiscoverySelected.has(model.name));
|
||||
if (!selectedModels.length) {
|
||||
closeOpenaiModelDiscovery();
|
||||
return;
|
||||
}
|
||||
|
||||
const mergedMap = new Map<string, ModelEntry>();
|
||||
openaiForm.modelEntries.forEach((entry) => {
|
||||
const name = entry.name.trim();
|
||||
if (!name) return;
|
||||
mergedMap.set(name, { name, alias: entry.alias?.trim() || '' });
|
||||
});
|
||||
|
||||
let addedCount = 0;
|
||||
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());
|
||||
setOpenaiForm((prev) => ({
|
||||
...prev,
|
||||
modelEntries: mergedEntries.length ? mergedEntries : [{ name: '', alias: '' }]
|
||||
}));
|
||||
|
||||
closeOpenaiModelDiscovery();
|
||||
if (addedCount > 0) {
|
||||
showNotification(t('ai_providers.openai_models_fetch_added', { count: addedCount }), 'success');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (modal?.type !== 'openai') return;
|
||||
if (openaiAvailableModels.length === 0) {
|
||||
if (openaiTestModel) {
|
||||
setOpenaiTestModel('');
|
||||
setOpenaiTestStatus('idle');
|
||||
setOpenaiTestMessage('');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!openaiTestModel || !openaiAvailableModels.includes(openaiTestModel)) {
|
||||
setOpenaiTestModel(openaiAvailableModels[0]);
|
||||
setOpenaiTestStatus('idle');
|
||||
setOpenaiTestMessage('');
|
||||
}
|
||||
}, [modal?.type, openaiAvailableModels, openaiTestModel]);
|
||||
|
||||
const testOpenaiProviderConnection = async () => {
|
||||
const baseUrl = openaiForm.baseUrl.trim();
|
||||
if (!baseUrl) {
|
||||
const message = t('notification.openai_test_url_required');
|
||||
setOpenaiTestStatus('error');
|
||||
setOpenaiTestMessage(message);
|
||||
showNotification(message, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const endpoint = buildOpenAIChatCompletionsEndpoint(baseUrl);
|
||||
if (!endpoint) {
|
||||
const message = t('notification.openai_test_url_required');
|
||||
setOpenaiTestStatus('error');
|
||||
setOpenaiTestMessage(message);
|
||||
showNotification(message, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const firstKeyEntry = openaiForm.apiKeyEntries.find((entry) => entry.apiKey?.trim());
|
||||
if (!firstKeyEntry) {
|
||||
const message = t('notification.openai_test_key_required');
|
||||
setOpenaiTestStatus('error');
|
||||
setOpenaiTestMessage(message);
|
||||
showNotification(message, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const modelName = openaiTestModel.trim() || openaiAvailableModels[0] || '';
|
||||
if (!modelName) {
|
||||
const message = t('notification.openai_test_model_required');
|
||||
setOpenaiTestStatus('error');
|
||||
setOpenaiTestMessage(message);
|
||||
showNotification(message, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const customHeaders = buildHeaderObject(openaiForm.headers);
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
...customHeaders
|
||||
};
|
||||
if (!headers.Authorization && !headers['authorization']) {
|
||||
headers.Authorization = `Bearer ${firstKeyEntry.apiKey.trim()}`;
|
||||
}
|
||||
|
||||
setOpenaiTestStatus('loading');
|
||||
setOpenaiTestMessage(t('ai_providers.openai_test_running'));
|
||||
try {
|
||||
const response = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
headers,
|
||||
body: JSON.stringify({
|
||||
model: modelName,
|
||||
messages: [{ role: 'user', content: 'Hi' }],
|
||||
stream: false,
|
||||
max_tokens: 5
|
||||
})
|
||||
});
|
||||
const rawText = await response.text();
|
||||
|
||||
if (!response.ok) {
|
||||
let errorMessage = `${response.status} ${response.statusText}`;
|
||||
try {
|
||||
const parsed = rawText ? JSON.parse(rawText) : null;
|
||||
errorMessage = parsed?.error?.message || parsed?.message || errorMessage;
|
||||
} catch {
|
||||
if (rawText) {
|
||||
errorMessage = rawText;
|
||||
}
|
||||
}
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
setOpenaiTestStatus('success');
|
||||
setOpenaiTestMessage(t('ai_providers.openai_test_success'));
|
||||
} catch (err: any) {
|
||||
setOpenaiTestStatus('error');
|
||||
setOpenaiTestMessage(`${t('ai_providers.openai_test_failed')}: ${err?.message || ''}`);
|
||||
}
|
||||
};
|
||||
|
||||
const saveGemini = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
@@ -979,11 +1242,6 @@ export function AiProvidersPage() {
|
||||
value={openaiForm.baseUrl}
|
||||
onChange={(e) => setOpenaiForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
|
||||
/>
|
||||
<Input
|
||||
label={t('ai_providers.openai_test_model_placeholder')}
|
||||
value={openaiForm.testModel ?? ''}
|
||||
onChange={(e) => setOpenaiForm((prev) => ({ ...prev, testModel: e.target.value }))}
|
||||
/>
|
||||
|
||||
<HeaderInputList
|
||||
entries={openaiForm.headers}
|
||||
@@ -994,7 +1252,12 @@ export function AiProvidersPage() {
|
||||
/>
|
||||
|
||||
<div className="form-group">
|
||||
<label>{t('ai_providers.openai_models_fetch_title')}</label>
|
||||
<label>
|
||||
{modal?.index !== null
|
||||
? t('ai_providers.openai_edit_modal_models_label')
|
||||
: t('ai_providers.openai_add_modal_models_label')}
|
||||
</label>
|
||||
<div className="hint">{t('ai_providers.openai_models_hint')}</div>
|
||||
<ModelInputList
|
||||
entries={openaiForm.modelEntries}
|
||||
onChange={(entries) => setOpenaiForm((prev) => ({ ...prev, modelEntries: entries }))}
|
||||
@@ -1003,6 +1266,63 @@ export function AiProvidersPage() {
|
||||
aliasPlaceholder={t('common.model_alias_placeholder')}
|
||||
disabled={saving}
|
||||
/>
|
||||
<Button variant="secondary" size="sm" onClick={openOpenaiModelDiscovery} disabled={saving}>
|
||||
{t('ai_providers.openai_models_fetch_button')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>{t('ai_providers.openai_test_title')}</label>
|
||||
<div className="hint">{t('ai_providers.openai_test_hint')}</div>
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||
<select
|
||||
className="input"
|
||||
value={openaiTestModel}
|
||||
onChange={(e) => {
|
||||
setOpenaiTestModel(e.target.value);
|
||||
setOpenaiTestStatus('idle');
|
||||
setOpenaiTestMessage('');
|
||||
}}
|
||||
disabled={saving || openaiAvailableModels.length === 0}
|
||||
>
|
||||
<option value="">
|
||||
{openaiAvailableModels.length
|
||||
? t('ai_providers.openai_test_select_placeholder')
|
||||
: t('ai_providers.openai_test_select_empty')}
|
||||
</option>
|
||||
{openaiForm.modelEntries
|
||||
.filter((entry) => entry.name.trim())
|
||||
.map((entry, idx) => {
|
||||
const name = entry.name.trim();
|
||||
const alias = entry.alias.trim();
|
||||
const label = alias && alias !== name ? `${name} (${alias})` : name;
|
||||
return (
|
||||
<option key={`${name}-${idx}`} value={name}>
|
||||
{label}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={openaiTestStatus === 'error' ? 'danger' : 'secondary'}
|
||||
className={openaiTestStatus === 'success' ? styles.openaiTestButtonSuccess : ''}
|
||||
onClick={testOpenaiProviderConnection}
|
||||
loading={openaiTestStatus === 'loading'}
|
||||
disabled={saving || openaiAvailableModels.length === 0}
|
||||
>
|
||||
{t('ai_providers.openai_test_action')}
|
||||
</Button>
|
||||
</div>
|
||||
{openaiTestMessage && (
|
||||
<div
|
||||
className={`status-badge ${
|
||||
openaiTestStatus === 'error' ? 'error' : openaiTestStatus === 'success' ? 'success' : 'muted'
|
||||
}`}
|
||||
>
|
||||
{openaiTestMessage}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
@@ -1010,6 +1330,81 @@ export function AiProvidersPage() {
|
||||
{renderKeyEntries(openaiForm.apiKeyEntries)}
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* OpenAI Models Discovery Modal */}
|
||||
<Modal
|
||||
open={openaiDiscoveryOpen}
|
||||
onClose={closeOpenaiModelDiscovery}
|
||||
title={t('ai_providers.openai_models_fetch_title')}
|
||||
width={720}
|
||||
footer={
|
||||
<>
|
||||
<Button variant="secondary" onClick={closeOpenaiModelDiscovery} disabled={openaiDiscoveryLoading}>
|
||||
{t('ai_providers.openai_models_fetch_back')}
|
||||
</Button>
|
||||
<Button onClick={applyOpenaiModelDiscoverySelection} disabled={openaiDiscoveryLoading}>
|
||||
{t('ai_providers.openai_models_fetch_apply')}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="hint" style={{ marginBottom: 8 }}>
|
||||
{t('ai_providers.openai_models_fetch_hint')}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>{t('ai_providers.openai_models_fetch_url_label')}</label>
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||
<input className="input" readOnly value={openaiDiscoveryEndpoint} />
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => fetchOpenaiModelDiscovery({ allowFallback: true })}
|
||||
loading={openaiDiscoveryLoading}
|
||||
>
|
||||
{t('ai_providers.openai_models_fetch_refresh')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Input
|
||||
label={t('ai_providers.openai_models_search_label')}
|
||||
placeholder={t('ai_providers.openai_models_search_placeholder')}
|
||||
value={openaiDiscoverySearch}
|
||||
onChange={(e) => setOpenaiDiscoverySearch(e.target.value)}
|
||||
/>
|
||||
{openaiDiscoveryError && <div className="error-box">{openaiDiscoveryError}</div>}
|
||||
{openaiDiscoveryLoading ? (
|
||||
<div className="hint">{t('ai_providers.openai_models_fetch_loading')}</div>
|
||||
) : openaiDiscoveryModels.length === 0 ? (
|
||||
<div className="hint">{t('ai_providers.openai_models_fetch_empty')}</div>
|
||||
) : filteredOpenaiDiscoveryModels.length === 0 ? (
|
||||
<div className="hint">{t('ai_providers.openai_models_search_empty')}</div>
|
||||
) : (
|
||||
<div className={styles.modelDiscoveryList}>
|
||||
{filteredOpenaiDiscoveryModels.map((model) => {
|
||||
const checked = openaiDiscoverySelected.has(model.name);
|
||||
return (
|
||||
<label
|
||||
key={model.name}
|
||||
className={`${styles.modelDiscoveryRow} ${checked ? styles.modelDiscoveryRowSelected : ''}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={() => toggleOpenaiModelSelection(model.name)}
|
||||
/>
|
||||
<div className={styles.modelDiscoveryMeta}>
|
||||
<div className={styles.modelDiscoveryName}>
|
||||
{model.name}
|
||||
{model.alias && <span className={styles.modelDiscoveryAlias}>{model.alias}</span>}
|
||||
</div>
|
||||
{model.description && <div className={styles.modelDiscoveryDesc}>{model.description}</div>}
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user