mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-18 18:50:49 +08:00
refactor(providers): modularize AiProvidersPage into separate provider components
This commit is contained in:
Supra4E8C
264
src/components/providers/AmpcodeSection/AmpcodeModal.tsx
Normal file
264
src/components/providers/AmpcodeSection/AmpcodeModal.tsx
Normal file
@@ -0,0 +1,264 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { Input } from '@/components/ui/Input';
|
||||||
|
import { Modal } from '@/components/ui/Modal';
|
||||||
|
import { ModelInputList } from '@/components/ui/ModelInputList';
|
||||||
|
import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
|
||||||
|
import { useConfigStore, useNotificationStore } from '@/stores';
|
||||||
|
import { ampcodeApi } from '@/services/api';
|
||||||
|
import type { AmpcodeConfig } from '@/types';
|
||||||
|
import { maskApiKey } from '@/utils/format';
|
||||||
|
import { buildAmpcodeFormState, entriesToAmpcodeMappings } from '../utils';
|
||||||
|
import type { AmpcodeFormState } from '../types';
|
||||||
|
|
||||||
|
interface AmpcodeModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
disableControls: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
onBusyChange?: (busy: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AmpcodeModal({ isOpen, disableControls, onClose, onBusyChange }: AmpcodeModalProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const { showNotification } = useNotificationStore();
|
||||||
|
const config = useConfigStore((state) => state.config);
|
||||||
|
const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
|
||||||
|
const clearCache = useConfigStore((state) => state.clearCache);
|
||||||
|
|
||||||
|
const [form, setForm] = useState<AmpcodeFormState>(() => buildAmpcodeFormState(null));
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [loaded, setLoaded] = useState(false);
|
||||||
|
const [mappingsDirty, setMappingsDirty] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const initializedRef = useRef(false);
|
||||||
|
|
||||||
|
const getErrorMessage = (err: unknown) => {
|
||||||
|
if (err instanceof Error) return err.message;
|
||||||
|
if (typeof err === 'string') return err;
|
||||||
|
return '';
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
onBusyChange?.(loading || saving);
|
||||||
|
}, [loading, saving, onBusyChange]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) {
|
||||||
|
initializedRef.current = false;
|
||||||
|
setLoading(false);
|
||||||
|
setSaving(false);
|
||||||
|
setError('');
|
||||||
|
setLoaded(false);
|
||||||
|
setMappingsDirty(false);
|
||||||
|
setForm(buildAmpcodeFormState(null));
|
||||||
|
onBusyChange?.(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (initializedRef.current) return;
|
||||||
|
initializedRef.current = true;
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
setLoaded(false);
|
||||||
|
setMappingsDirty(false);
|
||||||
|
setError('');
|
||||||
|
setForm(buildAmpcodeFormState(config?.ampcode ?? null));
|
||||||
|
|
||||||
|
void (async () => {
|
||||||
|
try {
|
||||||
|
const ampcode = await ampcodeApi.getAmpcode();
|
||||||
|
setLoaded(true);
|
||||||
|
updateConfigValue('ampcode', ampcode);
|
||||||
|
clearCache('ampcode');
|
||||||
|
setForm(buildAmpcodeFormState(ampcode));
|
||||||
|
} catch (err: unknown) {
|
||||||
|
setError(getErrorMessage(err) || t('notification.refresh_failed'));
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}, [clearCache, config?.ampcode, isOpen, onBusyChange, t, updateConfigValue]);
|
||||||
|
|
||||||
|
const clearAmpcodeUpstreamApiKey = async () => {
|
||||||
|
if (!window.confirm(t('ai_providers.ampcode_clear_upstream_api_key_confirm'))) return;
|
||||||
|
setSaving(true);
|
||||||
|
setError('');
|
||||||
|
try {
|
||||||
|
await ampcodeApi.clearUpstreamApiKey();
|
||||||
|
const previous = config?.ampcode ?? {};
|
||||||
|
const next: AmpcodeConfig = { ...previous };
|
||||||
|
delete next.upstreamApiKey;
|
||||||
|
updateConfigValue('ampcode', next);
|
||||||
|
clearCache('ampcode');
|
||||||
|
showNotification(t('notification.ampcode_upstream_api_key_cleared'), 'success');
|
||||||
|
} catch (err: unknown) {
|
||||||
|
const message = getErrorMessage(err);
|
||||||
|
setError(message);
|
||||||
|
showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveAmpcode = async () => {
|
||||||
|
if (!loaded && mappingsDirty) {
|
||||||
|
const confirmed = window.confirm(t('ai_providers.ampcode_mappings_overwrite_confirm'));
|
||||||
|
if (!confirmed) return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSaving(true);
|
||||||
|
setError('');
|
||||||
|
try {
|
||||||
|
const upstreamUrl = form.upstreamUrl.trim();
|
||||||
|
const overrideKey = form.upstreamApiKey.trim();
|
||||||
|
const modelMappings = entriesToAmpcodeMappings(form.mappingEntries);
|
||||||
|
|
||||||
|
if (upstreamUrl) {
|
||||||
|
await ampcodeApi.updateUpstreamUrl(upstreamUrl);
|
||||||
|
} else {
|
||||||
|
await ampcodeApi.clearUpstreamUrl();
|
||||||
|
}
|
||||||
|
|
||||||
|
await ampcodeApi.updateForceModelMappings(form.forceModelMappings);
|
||||||
|
|
||||||
|
if (loaded || mappingsDirty) {
|
||||||
|
if (modelMappings.length) {
|
||||||
|
await ampcodeApi.saveModelMappings(modelMappings);
|
||||||
|
} else {
|
||||||
|
await ampcodeApi.clearModelMappings();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (overrideKey) {
|
||||||
|
await ampcodeApi.updateUpstreamApiKey(overrideKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
const previous = config?.ampcode ?? {};
|
||||||
|
const next: AmpcodeConfig = {
|
||||||
|
upstreamUrl: upstreamUrl || undefined,
|
||||||
|
forceModelMappings: form.forceModelMappings,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (previous.upstreamApiKey) {
|
||||||
|
next.upstreamApiKey = previous.upstreamApiKey;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(previous.modelMappings)) {
|
||||||
|
next.modelMappings = previous.modelMappings;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (overrideKey) {
|
||||||
|
next.upstreamApiKey = overrideKey;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loaded || mappingsDirty) {
|
||||||
|
if (modelMappings.length) {
|
||||||
|
next.modelMappings = modelMappings;
|
||||||
|
} else {
|
||||||
|
delete next.modelMappings;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateConfigValue('ampcode', next);
|
||||||
|
clearCache('ampcode');
|
||||||
|
showNotification(t('notification.ampcode_updated'), 'success');
|
||||||
|
onClose();
|
||||||
|
} catch (err: unknown) {
|
||||||
|
const message = getErrorMessage(err);
|
||||||
|
setError(message);
|
||||||
|
showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
open={isOpen}
|
||||||
|
onClose={onClose}
|
||||||
|
title={t('ai_providers.ampcode_modal_title')}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="secondary" onClick={onClose} disabled={saving}>
|
||||||
|
{t('common.cancel')}
|
||||||
|
</Button>
|
||||||
|
<Button onClick={saveAmpcode} loading={saving} disabled={disableControls || loading}>
|
||||||
|
{t('common.save')}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{error && <div className="error-box">{error}</div>}
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.ampcode_upstream_url_label')}
|
||||||
|
placeholder={t('ai_providers.ampcode_upstream_url_placeholder')}
|
||||||
|
value={form.upstreamUrl}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, upstreamUrl: e.target.value }))}
|
||||||
|
disabled={loading || saving}
|
||||||
|
hint={t('ai_providers.ampcode_upstream_url_hint')}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.ampcode_upstream_api_key_label')}
|
||||||
|
placeholder={t('ai_providers.ampcode_upstream_api_key_placeholder')}
|
||||||
|
type="password"
|
||||||
|
value={form.upstreamApiKey}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, upstreamApiKey: e.target.value }))}
|
||||||
|
disabled={loading || saving}
|
||||||
|
hint={t('ai_providers.ampcode_upstream_api_key_hint')}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
gap: 8,
|
||||||
|
alignItems: 'center',
|
||||||
|
marginTop: -8,
|
||||||
|
marginBottom: 12,
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="hint" style={{ margin: 0 }}>
|
||||||
|
{t('ai_providers.ampcode_upstream_api_key_current', {
|
||||||
|
key: config?.ampcode?.upstreamApiKey
|
||||||
|
? maskApiKey(config.ampcode.upstreamApiKey)
|
||||||
|
: t('common.not_set'),
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="danger"
|
||||||
|
size="sm"
|
||||||
|
onClick={clearAmpcodeUpstreamApiKey}
|
||||||
|
disabled={loading || saving || !config?.ampcode?.upstreamApiKey}
|
||||||
|
>
|
||||||
|
{t('ai_providers.ampcode_clear_upstream_api_key')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<ToggleSwitch
|
||||||
|
label={t('ai_providers.ampcode_force_model_mappings_label')}
|
||||||
|
checked={form.forceModelMappings}
|
||||||
|
onChange={(value) => setForm((prev) => ({ ...prev, forceModelMappings: value }))}
|
||||||
|
disabled={loading || saving}
|
||||||
|
/>
|
||||||
|
<div className="hint">{t('ai_providers.ampcode_force_model_mappings_hint')}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label>{t('ai_providers.ampcode_model_mappings_label')}</label>
|
||||||
|
<ModelInputList
|
||||||
|
entries={form.mappingEntries}
|
||||||
|
onChange={(entries) => {
|
||||||
|
setMappingsDirty(true);
|
||||||
|
setForm((prev) => ({ ...prev, mappingEntries: entries }));
|
||||||
|
}}
|
||||||
|
addLabel={t('ai_providers.ampcode_model_mappings_add_btn')}
|
||||||
|
namePlaceholder={t('ai_providers.ampcode_model_mappings_from_placeholder')}
|
||||||
|
aliasPlaceholder={t('ai_providers.ampcode_model_mappings_to_placeholder')}
|
||||||
|
disabled={loading || saving}
|
||||||
|
/>
|
||||||
|
<div className="hint">{t('ai_providers.ampcode_model_mappings_hint')}</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
111
src/components/providers/AmpcodeSection/AmpcodeSection.tsx
Normal file
111
src/components/providers/AmpcodeSection/AmpcodeSection.tsx
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { Card } from '@/components/ui/Card';
|
||||||
|
import iconAmp from '@/assets/icons/amp.svg';
|
||||||
|
import type { AmpcodeConfig } from '@/types';
|
||||||
|
import { maskApiKey } from '@/utils/format';
|
||||||
|
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { AmpcodeModal } from './AmpcodeModal';
|
||||||
|
|
||||||
|
interface AmpcodeSectionProps {
|
||||||
|
config: AmpcodeConfig | null | undefined;
|
||||||
|
loading: boolean;
|
||||||
|
disableControls: boolean;
|
||||||
|
isSaving: boolean;
|
||||||
|
isSwitching: boolean;
|
||||||
|
isBusy: boolean;
|
||||||
|
isModalOpen: boolean;
|
||||||
|
onOpen: () => void;
|
||||||
|
onCloseModal: () => void;
|
||||||
|
onBusyChange: (busy: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AmpcodeSection({
|
||||||
|
config,
|
||||||
|
loading,
|
||||||
|
disableControls,
|
||||||
|
isSaving,
|
||||||
|
isSwitching,
|
||||||
|
isBusy,
|
||||||
|
isModalOpen,
|
||||||
|
onOpen,
|
||||||
|
onCloseModal,
|
||||||
|
onBusyChange,
|
||||||
|
}: AmpcodeSectionProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card
|
||||||
|
title={
|
||||||
|
<span className={styles.cardTitle}>
|
||||||
|
<img src={iconAmp} alt="" className={styles.cardTitleIcon} />
|
||||||
|
{t('ai_providers.ampcode_title')}
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
extra={
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={onOpen}
|
||||||
|
disabled={disableControls || isSaving || isBusy || isSwitching}
|
||||||
|
>
|
||||||
|
{t('common.edit')}
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<div className="hint">{t('common.loading')}</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('ai_providers.ampcode_upstream_url_label')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{config?.upstreamUrl || t('common.not_set')}</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>
|
||||||
|
{t('ai_providers.ampcode_upstream_api_key_label')}:
|
||||||
|
</span>
|
||||||
|
<span className={styles.fieldValue}>
|
||||||
|
{config?.upstreamApiKey ? maskApiKey(config.upstreamApiKey) : t('common.not_set')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>
|
||||||
|
{t('ai_providers.ampcode_force_model_mappings_label')}:
|
||||||
|
</span>
|
||||||
|
<span className={styles.fieldValue}>
|
||||||
|
{(config?.forceModelMappings ?? false) ? t('common.yes') : t('common.no')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.fieldRow} style={{ marginTop: 8 }}>
|
||||||
|
<span className={styles.fieldLabel}>{t('ai_providers.ampcode_model_mappings_count')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{config?.modelMappings?.length || 0}</span>
|
||||||
|
</div>
|
||||||
|
{config?.modelMappings?.length ? (
|
||||||
|
<div className={styles.modelTagList}>
|
||||||
|
{config.modelMappings.slice(0, 5).map((mapping) => (
|
||||||
|
<span key={`${mapping.from}→${mapping.to}`} className={styles.modelTag}>
|
||||||
|
<span className={styles.modelName}>{mapping.from}</span>
|
||||||
|
<span className={styles.modelAlias}>{mapping.to}</span>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{config.modelMappings.length > 5 && (
|
||||||
|
<span className={styles.modelTag}>
|
||||||
|
<span className={styles.modelName}>+{config.modelMappings.length - 5}</span>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<AmpcodeModal
|
||||||
|
isOpen={isModalOpen}
|
||||||
|
disableControls={disableControls}
|
||||||
|
onClose={onCloseModal}
|
||||||
|
onBusyChange={onBusyChange}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/components/providers/AmpcodeSection/index.ts
Normal file
1
src/components/providers/AmpcodeSection/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { AmpcodeSection } from './AmpcodeSection';
|
||||||
128
src/components/providers/ClaudeSection/ClaudeModal.tsx
Normal file
128
src/components/providers/ClaudeSection/ClaudeModal.tsx
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { HeaderInputList } from '@/components/ui/HeaderInputList';
|
||||||
|
import { Input } from '@/components/ui/Input';
|
||||||
|
import { Modal } from '@/components/ui/Modal';
|
||||||
|
import { ModelInputList, modelsToEntries } from '@/components/ui/ModelInputList';
|
||||||
|
import type { ProviderKeyConfig } from '@/types';
|
||||||
|
import { buildHeaderObject, headersToEntries } from '@/utils/headers';
|
||||||
|
import { excludedModelsToText } from '../utils';
|
||||||
|
import type { ProviderFormState, ProviderModalProps } from '../types';
|
||||||
|
|
||||||
|
interface ClaudeModalProps extends ProviderModalProps<ProviderKeyConfig, ProviderFormState> {
|
||||||
|
isSaving: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const buildEmptyForm = (): ProviderFormState => ({
|
||||||
|
apiKey: '',
|
||||||
|
prefix: '',
|
||||||
|
baseUrl: '',
|
||||||
|
proxyUrl: '',
|
||||||
|
headers: {},
|
||||||
|
models: [],
|
||||||
|
excludedModels: [],
|
||||||
|
modelEntries: [{ name: '', alias: '' }],
|
||||||
|
excludedText: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
export function ClaudeModal({
|
||||||
|
isOpen,
|
||||||
|
editIndex,
|
||||||
|
initialData,
|
||||||
|
onClose,
|
||||||
|
onSave,
|
||||||
|
isSaving,
|
||||||
|
}: ClaudeModalProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [form, setForm] = useState<ProviderFormState>(buildEmptyForm);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) return;
|
||||||
|
if (initialData) {
|
||||||
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||||
|
setForm({
|
||||||
|
...initialData,
|
||||||
|
headers: initialData.headers ?? {},
|
||||||
|
modelEntries: modelsToEntries(initialData.models),
|
||||||
|
excludedText: excludedModelsToText(initialData.excludedModels),
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setForm(buildEmptyForm());
|
||||||
|
}, [initialData, isOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
open={isOpen}
|
||||||
|
onClose={onClose}
|
||||||
|
title={
|
||||||
|
editIndex !== null
|
||||||
|
? t('ai_providers.claude_edit_modal_title')
|
||||||
|
: t('ai_providers.claude_add_modal_title')
|
||||||
|
}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="secondary" onClick={onClose} disabled={isSaving}>
|
||||||
|
{t('common.cancel')}
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => void onSave(form, editIndex)} loading={isSaving}>
|
||||||
|
{t('common.save')}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.claude_add_modal_key_label')}
|
||||||
|
value={form.apiKey}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, apiKey: e.target.value }))}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.prefix_label')}
|
||||||
|
placeholder={t('ai_providers.prefix_placeholder')}
|
||||||
|
value={form.prefix ?? ''}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, prefix: e.target.value }))}
|
||||||
|
hint={t('ai_providers.prefix_hint')}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.claude_add_modal_url_label')}
|
||||||
|
value={form.baseUrl ?? ''}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.claude_add_modal_proxy_label')}
|
||||||
|
value={form.proxyUrl ?? ''}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
|
||||||
|
/>
|
||||||
|
<HeaderInputList
|
||||||
|
entries={headersToEntries(form.headers)}
|
||||||
|
onChange={(entries) => setForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
|
||||||
|
addLabel={t('common.custom_headers_add')}
|
||||||
|
keyPlaceholder={t('common.custom_headers_key_placeholder')}
|
||||||
|
valuePlaceholder={t('common.custom_headers_value_placeholder')}
|
||||||
|
/>
|
||||||
|
<div className="form-group">
|
||||||
|
<label>{t('ai_providers.claude_models_label')}</label>
|
||||||
|
<ModelInputList
|
||||||
|
entries={form.modelEntries}
|
||||||
|
onChange={(entries) => 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={isSaving}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="form-group">
|
||||||
|
<label>{t('ai_providers.excluded_models_label')}</label>
|
||||||
|
<textarea
|
||||||
|
className="input"
|
||||||
|
placeholder={t('ai_providers.excluded_models_placeholder')}
|
||||||
|
value={form.excludedText}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, excludedText: e.target.value }))}
|
||||||
|
rows={4}
|
||||||
|
/>
|
||||||
|
<div className="hint">{t('ai_providers.excluded_models_hint')}</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
202
src/components/providers/ClaudeSection/ClaudeSection.tsx
Normal file
202
src/components/providers/ClaudeSection/ClaudeSection.tsx
Normal file
@@ -0,0 +1,202 @@
|
|||||||
|
import { Fragment, useMemo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { Card } from '@/components/ui/Card';
|
||||||
|
import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
|
||||||
|
import iconClaude from '@/assets/icons/claude.svg';
|
||||||
|
import type { ProviderKeyConfig } from '@/types';
|
||||||
|
import { maskApiKey } from '@/utils/format';
|
||||||
|
import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
|
||||||
|
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||||
|
import { ProviderList } from '../ProviderList';
|
||||||
|
import { ProviderStatusBar } from '../ProviderStatusBar';
|
||||||
|
import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
|
||||||
|
import type { ProviderFormState } from '../types';
|
||||||
|
import { ClaudeModal } from './ClaudeModal';
|
||||||
|
|
||||||
|
interface ClaudeSectionProps {
|
||||||
|
configs: ProviderKeyConfig[];
|
||||||
|
keyStats: KeyStats;
|
||||||
|
usageDetails: UsageDetail[];
|
||||||
|
loading: boolean;
|
||||||
|
disableControls: boolean;
|
||||||
|
isSaving: boolean;
|
||||||
|
isSwitching: boolean;
|
||||||
|
isModalOpen: boolean;
|
||||||
|
modalIndex: number | null;
|
||||||
|
onAdd: () => void;
|
||||||
|
onEdit: (index: number) => void;
|
||||||
|
onDelete: (index: number) => void;
|
||||||
|
onToggle: (index: number, enabled: boolean) => void;
|
||||||
|
onCloseModal: () => void;
|
||||||
|
onSave: (data: ProviderFormState, index: number | null) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ClaudeSection({
|
||||||
|
configs,
|
||||||
|
keyStats,
|
||||||
|
usageDetails,
|
||||||
|
loading,
|
||||||
|
disableControls,
|
||||||
|
isSaving,
|
||||||
|
isSwitching,
|
||||||
|
isModalOpen,
|
||||||
|
modalIndex,
|
||||||
|
onAdd,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
onToggle,
|
||||||
|
onCloseModal,
|
||||||
|
onSave,
|
||||||
|
}: ClaudeSectionProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const actionsDisabled = disableControls || isSaving || isSwitching;
|
||||||
|
const toggleDisabled = disableControls || loading || isSaving || isSwitching;
|
||||||
|
|
||||||
|
const statusBarCache = useMemo(() => {
|
||||||
|
const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
|
||||||
|
const allApiKeys = new Set<string>();
|
||||||
|
configs.forEach((config) => config.apiKey && allApiKeys.add(config.apiKey));
|
||||||
|
allApiKeys.forEach((apiKey) => {
|
||||||
|
cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
|
||||||
|
});
|
||||||
|
return cache;
|
||||||
|
}, [configs, usageDetails]);
|
||||||
|
|
||||||
|
const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card
|
||||||
|
title={
|
||||||
|
<span className={styles.cardTitle}>
|
||||||
|
<img src={iconClaude} alt="" className={styles.cardTitleIcon} />
|
||||||
|
{t('ai_providers.claude_title')}
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
extra={
|
||||||
|
<Button size="sm" onClick={onAdd} disabled={actionsDisabled}>
|
||||||
|
{t('ai_providers.claude_add_button')}
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ProviderList<ProviderKeyConfig>
|
||||||
|
items={configs}
|
||||||
|
loading={loading}
|
||||||
|
keyField={(item) => item.apiKey}
|
||||||
|
emptyTitle={t('ai_providers.claude_empty_title')}
|
||||||
|
emptyDescription={t('ai_providers.claude_empty_desc')}
|
||||||
|
onEdit={onEdit}
|
||||||
|
onDelete={onDelete}
|
||||||
|
actionsDisabled={actionsDisabled}
|
||||||
|
getRowDisabled={(item) => hasDisableAllModelsRule(item.excludedModels)}
|
||||||
|
renderExtraActions={(item, index) => (
|
||||||
|
<ToggleSwitch
|
||||||
|
label={t('ai_providers.config_toggle_label')}
|
||||||
|
checked={!hasDisableAllModelsRule(item.excludedModels)}
|
||||||
|
disabled={toggleDisabled}
|
||||||
|
onChange={(value) => void onToggle(index, value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
renderContent={(item) => {
|
||||||
|
const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
|
||||||
|
const headerEntries = Object.entries(item.headers || {});
|
||||||
|
const configDisabled = hasDisableAllModelsRule(item.excludedModels);
|
||||||
|
const excludedModels = item.excludedModels ?? [];
|
||||||
|
const statusData =
|
||||||
|
statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<div className="item-title">{t('ai_providers.claude_item_title')}</div>
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.api_key')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
|
||||||
|
</div>
|
||||||
|
{item.prefix && (
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.prefix')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{item.prefix}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.baseUrl && (
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.base_url')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{item.baseUrl}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.proxyUrl && (
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.proxy_url')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{item.proxyUrl}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{headerEntries.length > 0 && (
|
||||||
|
<div className={styles.headerBadgeList}>
|
||||||
|
{headerEntries.map(([key, value]) => (
|
||||||
|
<span key={key} className={styles.headerBadge}>
|
||||||
|
<strong>{key}:</strong> {value}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{configDisabled && (
|
||||||
|
<div className="status-badge warning" style={{ marginTop: 8, marginBottom: 0 }}>
|
||||||
|
{t('ai_providers.config_disabled_badge')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.models?.length ? (
|
||||||
|
<div className={styles.modelTagList}>
|
||||||
|
<span className={styles.modelCountLabel}>
|
||||||
|
{t('ai_providers.claude_models_count')}: {item.models.length}
|
||||||
|
</span>
|
||||||
|
{item.models.map((model) => (
|
||||||
|
<span key={model.name} className={styles.modelTag}>
|
||||||
|
<span className={styles.modelName}>{model.name}</span>
|
||||||
|
{model.alias && model.alias !== model.name && (
|
||||||
|
<span className={styles.modelAlias}>{model.alias}</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
{excludedModels.length ? (
|
||||||
|
<div className={styles.excludedModelsSection}>
|
||||||
|
<div className={styles.excludedModelsLabel}>
|
||||||
|
{t('ai_providers.excluded_models_count', { count: excludedModels.length })}
|
||||||
|
</div>
|
||||||
|
<div className={styles.modelTagList}>
|
||||||
|
{excludedModels.map((model) => (
|
||||||
|
<span key={model} className={`${styles.modelTag} ${styles.excludedModelTag}`}>
|
||||||
|
<span className={styles.modelName}>{model}</span>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<div className={styles.cardStats}>
|
||||||
|
<span className={`${styles.statPill} ${styles.statSuccess}`}>
|
||||||
|
{t('stats.success')}: {stats.success}
|
||||||
|
</span>
|
||||||
|
<span className={`${styles.statPill} ${styles.statFailure}`}>
|
||||||
|
{t('stats.failure')}: {stats.failure}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ProviderStatusBar statusData={statusData} />
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<ClaudeModal
|
||||||
|
isOpen={isModalOpen}
|
||||||
|
editIndex={modalIndex}
|
||||||
|
initialData={initialData}
|
||||||
|
onClose={onCloseModal}
|
||||||
|
onSave={onSave}
|
||||||
|
isSaving={isSaving}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/components/providers/ClaudeSection/index.ts
Normal file
1
src/components/providers/ClaudeSection/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { ClaudeSection } from './ClaudeSection';
|
||||||
117
src/components/providers/CodexSection/CodexModal.tsx
Normal file
117
src/components/providers/CodexSection/CodexModal.tsx
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { HeaderInputList } from '@/components/ui/HeaderInputList';
|
||||||
|
import { Input } from '@/components/ui/Input';
|
||||||
|
import { Modal } from '@/components/ui/Modal';
|
||||||
|
import type { ProviderKeyConfig } from '@/types';
|
||||||
|
import { buildHeaderObject, headersToEntries } from '@/utils/headers';
|
||||||
|
import { modelsToEntries } from '@/components/ui/ModelInputList';
|
||||||
|
import { excludedModelsToText } from '../utils';
|
||||||
|
import type { ProviderFormState, ProviderModalProps } from '../types';
|
||||||
|
|
||||||
|
interface CodexModalProps extends ProviderModalProps<ProviderKeyConfig, ProviderFormState> {
|
||||||
|
isSaving: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const buildEmptyForm = (): ProviderFormState => ({
|
||||||
|
apiKey: '',
|
||||||
|
prefix: '',
|
||||||
|
baseUrl: '',
|
||||||
|
proxyUrl: '',
|
||||||
|
headers: {},
|
||||||
|
models: [],
|
||||||
|
excludedModels: [],
|
||||||
|
modelEntries: [{ name: '', alias: '' }],
|
||||||
|
excludedText: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
export function CodexModal({
|
||||||
|
isOpen,
|
||||||
|
editIndex,
|
||||||
|
initialData,
|
||||||
|
onClose,
|
||||||
|
onSave,
|
||||||
|
isSaving,
|
||||||
|
}: CodexModalProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [form, setForm] = useState<ProviderFormState>(buildEmptyForm);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) return;
|
||||||
|
if (initialData) {
|
||||||
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||||
|
setForm({
|
||||||
|
...initialData,
|
||||||
|
headers: initialData.headers ?? {},
|
||||||
|
modelEntries: modelsToEntries(initialData.models),
|
||||||
|
excludedText: excludedModelsToText(initialData.excludedModels),
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setForm(buildEmptyForm());
|
||||||
|
}, [initialData, isOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
open={isOpen}
|
||||||
|
onClose={onClose}
|
||||||
|
title={
|
||||||
|
editIndex !== null
|
||||||
|
? t('ai_providers.codex_edit_modal_title')
|
||||||
|
: t('ai_providers.codex_add_modal_title')
|
||||||
|
}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="secondary" onClick={onClose} disabled={isSaving}>
|
||||||
|
{t('common.cancel')}
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => void onSave(form, editIndex)} loading={isSaving}>
|
||||||
|
{t('common.save')}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.codex_add_modal_key_label')}
|
||||||
|
value={form.apiKey}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, apiKey: e.target.value }))}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.prefix_label')}
|
||||||
|
placeholder={t('ai_providers.prefix_placeholder')}
|
||||||
|
value={form.prefix ?? ''}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, prefix: e.target.value }))}
|
||||||
|
hint={t('ai_providers.prefix_hint')}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.codex_add_modal_url_label')}
|
||||||
|
value={form.baseUrl ?? ''}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.codex_add_modal_proxy_label')}
|
||||||
|
value={form.proxyUrl ?? ''}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
|
||||||
|
/>
|
||||||
|
<HeaderInputList
|
||||||
|
entries={headersToEntries(form.headers)}
|
||||||
|
onChange={(entries) => setForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
|
||||||
|
addLabel={t('common.custom_headers_add')}
|
||||||
|
keyPlaceholder={t('common.custom_headers_key_placeholder')}
|
||||||
|
valuePlaceholder={t('common.custom_headers_value_placeholder')}
|
||||||
|
/>
|
||||||
|
<div className="form-group">
|
||||||
|
<label>{t('ai_providers.excluded_models_label')}</label>
|
||||||
|
<textarea
|
||||||
|
className="input"
|
||||||
|
placeholder={t('ai_providers.excluded_models_placeholder')}
|
||||||
|
value={form.excludedText}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, excludedText: e.target.value }))}
|
||||||
|
rows={4}
|
||||||
|
/>
|
||||||
|
<div className="hint">{t('ai_providers.excluded_models_hint')}</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
194
src/components/providers/CodexSection/CodexSection.tsx
Normal file
194
src/components/providers/CodexSection/CodexSection.tsx
Normal file
@@ -0,0 +1,194 @@
|
|||||||
|
import { Fragment, useMemo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { Card } from '@/components/ui/Card';
|
||||||
|
import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
|
||||||
|
import iconOpenaiLight from '@/assets/icons/openai-light.svg';
|
||||||
|
import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
|
||||||
|
import type { ProviderKeyConfig } from '@/types';
|
||||||
|
import { maskApiKey } from '@/utils/format';
|
||||||
|
import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
|
||||||
|
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||||
|
import { ProviderList } from '../ProviderList';
|
||||||
|
import { ProviderStatusBar } from '../ProviderStatusBar';
|
||||||
|
import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
|
||||||
|
import type { ProviderFormState } from '../types';
|
||||||
|
import { CodexModal } from './CodexModal';
|
||||||
|
|
||||||
|
interface CodexSectionProps {
|
||||||
|
configs: ProviderKeyConfig[];
|
||||||
|
keyStats: KeyStats;
|
||||||
|
usageDetails: UsageDetail[];
|
||||||
|
loading: boolean;
|
||||||
|
disableControls: boolean;
|
||||||
|
isSaving: boolean;
|
||||||
|
isSwitching: boolean;
|
||||||
|
resolvedTheme: string;
|
||||||
|
isModalOpen: boolean;
|
||||||
|
modalIndex: number | null;
|
||||||
|
onAdd: () => void;
|
||||||
|
onEdit: (index: number) => void;
|
||||||
|
onDelete: (index: number) => void;
|
||||||
|
onToggle: (index: number, enabled: boolean) => void;
|
||||||
|
onCloseModal: () => void;
|
||||||
|
onSave: (data: ProviderFormState, index: number | null) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CodexSection({
|
||||||
|
configs,
|
||||||
|
keyStats,
|
||||||
|
usageDetails,
|
||||||
|
loading,
|
||||||
|
disableControls,
|
||||||
|
isSaving,
|
||||||
|
isSwitching,
|
||||||
|
resolvedTheme,
|
||||||
|
isModalOpen,
|
||||||
|
modalIndex,
|
||||||
|
onAdd,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
onToggle,
|
||||||
|
onCloseModal,
|
||||||
|
onSave,
|
||||||
|
}: CodexSectionProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const actionsDisabled = disableControls || isSaving || isSwitching;
|
||||||
|
const toggleDisabled = disableControls || loading || isSaving || isSwitching;
|
||||||
|
|
||||||
|
const statusBarCache = useMemo(() => {
|
||||||
|
const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
|
||||||
|
const allApiKeys = new Set<string>();
|
||||||
|
configs.forEach((config) => config.apiKey && allApiKeys.add(config.apiKey));
|
||||||
|
allApiKeys.forEach((apiKey) => {
|
||||||
|
cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
|
||||||
|
});
|
||||||
|
return cache;
|
||||||
|
}, [configs, usageDetails]);
|
||||||
|
|
||||||
|
const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card
|
||||||
|
title={
|
||||||
|
<span className={styles.cardTitle}>
|
||||||
|
<img
|
||||||
|
src={resolvedTheme === 'dark' ? iconOpenaiDark : iconOpenaiLight}
|
||||||
|
alt=""
|
||||||
|
className={styles.cardTitleIcon}
|
||||||
|
/>
|
||||||
|
{t('ai_providers.codex_title')}
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
extra={
|
||||||
|
<Button size="sm" onClick={onAdd} disabled={actionsDisabled}>
|
||||||
|
{t('ai_providers.codex_add_button')}
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ProviderList<ProviderKeyConfig>
|
||||||
|
items={configs}
|
||||||
|
loading={loading}
|
||||||
|
keyField={(item) => item.apiKey}
|
||||||
|
emptyTitle={t('ai_providers.codex_empty_title')}
|
||||||
|
emptyDescription={t('ai_providers.codex_empty_desc')}
|
||||||
|
onEdit={onEdit}
|
||||||
|
onDelete={onDelete}
|
||||||
|
actionsDisabled={actionsDisabled}
|
||||||
|
getRowDisabled={(item) => hasDisableAllModelsRule(item.excludedModels)}
|
||||||
|
renderExtraActions={(item, index) => (
|
||||||
|
<ToggleSwitch
|
||||||
|
label={t('ai_providers.config_toggle_label')}
|
||||||
|
checked={!hasDisableAllModelsRule(item.excludedModels)}
|
||||||
|
disabled={toggleDisabled}
|
||||||
|
onChange={(value) => void onToggle(index, value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
renderContent={(item) => {
|
||||||
|
const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
|
||||||
|
const headerEntries = Object.entries(item.headers || {});
|
||||||
|
const configDisabled = hasDisableAllModelsRule(item.excludedModels);
|
||||||
|
const excludedModels = item.excludedModels ?? [];
|
||||||
|
const statusData =
|
||||||
|
statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<div className="item-title">{t('ai_providers.codex_item_title')}</div>
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.api_key')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
|
||||||
|
</div>
|
||||||
|
{item.prefix && (
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.prefix')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{item.prefix}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.baseUrl && (
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.base_url')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{item.baseUrl}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.proxyUrl && (
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.proxy_url')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{item.proxyUrl}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{headerEntries.length > 0 && (
|
||||||
|
<div className={styles.headerBadgeList}>
|
||||||
|
{headerEntries.map(([key, value]) => (
|
||||||
|
<span key={key} className={styles.headerBadge}>
|
||||||
|
<strong>{key}:</strong> {value}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{configDisabled && (
|
||||||
|
<div className="status-badge warning" style={{ marginTop: 8, marginBottom: 0 }}>
|
||||||
|
{t('ai_providers.config_disabled_badge')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{excludedModels.length ? (
|
||||||
|
<div className={styles.excludedModelsSection}>
|
||||||
|
<div className={styles.excludedModelsLabel}>
|
||||||
|
{t('ai_providers.excluded_models_count', { count: excludedModels.length })}
|
||||||
|
</div>
|
||||||
|
<div className={styles.modelTagList}>
|
||||||
|
{excludedModels.map((model) => (
|
||||||
|
<span key={model} className={`${styles.modelTag} ${styles.excludedModelTag}`}>
|
||||||
|
<span className={styles.modelName}>{model}</span>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<div className={styles.cardStats}>
|
||||||
|
<span className={`${styles.statPill} ${styles.statSuccess}`}>
|
||||||
|
{t('stats.success')}: {stats.success}
|
||||||
|
</span>
|
||||||
|
<span className={`${styles.statPill} ${styles.statFailure}`}>
|
||||||
|
{t('stats.failure')}: {stats.failure}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ProviderStatusBar statusData={statusData} />
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<CodexModal
|
||||||
|
isOpen={isModalOpen}
|
||||||
|
editIndex={modalIndex}
|
||||||
|
initialData={initialData}
|
||||||
|
onClose={onCloseModal}
|
||||||
|
onSave={onSave}
|
||||||
|
isSaving={isSaving}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/components/providers/CodexSection/index.ts
Normal file
1
src/components/providers/CodexSection/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { CodexSection } from './CodexSection';
|
||||||
113
src/components/providers/GeminiSection/GeminiModal.tsx
Normal file
113
src/components/providers/GeminiSection/GeminiModal.tsx
Normal file
@@ -0,0 +1,113 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { HeaderInputList } from '@/components/ui/HeaderInputList';
|
||||||
|
import { Input } from '@/components/ui/Input';
|
||||||
|
import { Modal } from '@/components/ui/Modal';
|
||||||
|
import type { GeminiKeyConfig } from '@/types';
|
||||||
|
import { buildHeaderObject, headersToEntries } from '@/utils/headers';
|
||||||
|
import { excludedModelsToText } from '../utils';
|
||||||
|
import type { GeminiFormState, ProviderModalProps } from '../types';
|
||||||
|
|
||||||
|
interface GeminiModalProps extends ProviderModalProps<GeminiKeyConfig, GeminiFormState> {
|
||||||
|
isSaving: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const buildEmptyForm = (): GeminiFormState => ({
|
||||||
|
apiKey: '',
|
||||||
|
prefix: '',
|
||||||
|
baseUrl: '',
|
||||||
|
headers: {},
|
||||||
|
excludedModels: [],
|
||||||
|
excludedText: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
export function GeminiModal({
|
||||||
|
isOpen,
|
||||||
|
editIndex,
|
||||||
|
initialData,
|
||||||
|
onClose,
|
||||||
|
onSave,
|
||||||
|
isSaving,
|
||||||
|
}: GeminiModalProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [form, setForm] = useState<GeminiFormState>(buildEmptyForm);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) return;
|
||||||
|
if (initialData) {
|
||||||
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||||
|
setForm({
|
||||||
|
...initialData,
|
||||||
|
headers: initialData.headers ?? {},
|
||||||
|
excludedText: excludedModelsToText(initialData.excludedModels),
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setForm(buildEmptyForm());
|
||||||
|
}, [initialData, isOpen]);
|
||||||
|
|
||||||
|
const handleSave = () => {
|
||||||
|
void onSave(form, editIndex);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
open={isOpen}
|
||||||
|
onClose={onClose}
|
||||||
|
title={
|
||||||
|
editIndex !== null
|
||||||
|
? t('ai_providers.gemini_edit_modal_title')
|
||||||
|
: t('ai_providers.gemini_add_modal_title')
|
||||||
|
}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="secondary" onClick={onClose} disabled={isSaving}>
|
||||||
|
{t('common.cancel')}
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleSave} loading={isSaving}>
|
||||||
|
{t('common.save')}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.gemini_add_modal_key_label')}
|
||||||
|
placeholder={t('ai_providers.gemini_add_modal_key_placeholder')}
|
||||||
|
value={form.apiKey}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, apiKey: e.target.value }))}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.prefix_label')}
|
||||||
|
placeholder={t('ai_providers.prefix_placeholder')}
|
||||||
|
value={form.prefix ?? ''}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, prefix: e.target.value }))}
|
||||||
|
hint={t('ai_providers.prefix_hint')}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.gemini_base_url_label')}
|
||||||
|
placeholder={t('ai_providers.gemini_base_url_placeholder')}
|
||||||
|
value={form.baseUrl ?? ''}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
|
||||||
|
/>
|
||||||
|
<HeaderInputList
|
||||||
|
entries={headersToEntries(form.headers)}
|
||||||
|
onChange={(entries) => setForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
|
||||||
|
addLabel={t('common.custom_headers_add')}
|
||||||
|
keyPlaceholder={t('common.custom_headers_key_placeholder')}
|
||||||
|
valuePlaceholder={t('common.custom_headers_value_placeholder')}
|
||||||
|
/>
|
||||||
|
<div className="form-group">
|
||||||
|
<label>{t('ai_providers.excluded_models_label')}</label>
|
||||||
|
<textarea
|
||||||
|
className="input"
|
||||||
|
placeholder={t('ai_providers.excluded_models_placeholder')}
|
||||||
|
value={form.excludedText}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, excludedText: e.target.value }))}
|
||||||
|
rows={4}
|
||||||
|
/>
|
||||||
|
<div className="hint">{t('ai_providers.excluded_models_hint')}</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
183
src/components/providers/GeminiSection/GeminiSection.tsx
Normal file
183
src/components/providers/GeminiSection/GeminiSection.tsx
Normal file
@@ -0,0 +1,183 @@
|
|||||||
|
import { Fragment, useMemo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { Card } from '@/components/ui/Card';
|
||||||
|
import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
|
||||||
|
import iconGemini from '@/assets/icons/gemini.svg';
|
||||||
|
import type { GeminiKeyConfig } from '@/types';
|
||||||
|
import { maskApiKey } from '@/utils/format';
|
||||||
|
import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
|
||||||
|
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||||
|
import type { GeminiFormState } from '../types';
|
||||||
|
import { ProviderList } from '../ProviderList';
|
||||||
|
import { ProviderStatusBar } from '../ProviderStatusBar';
|
||||||
|
import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
|
||||||
|
import { GeminiModal } from './GeminiModal';
|
||||||
|
|
||||||
|
interface GeminiSectionProps {
|
||||||
|
configs: GeminiKeyConfig[];
|
||||||
|
keyStats: KeyStats;
|
||||||
|
usageDetails: UsageDetail[];
|
||||||
|
loading: boolean;
|
||||||
|
disableControls: boolean;
|
||||||
|
isSaving: boolean;
|
||||||
|
isSwitching: boolean;
|
||||||
|
isModalOpen: boolean;
|
||||||
|
modalIndex: number | null;
|
||||||
|
onAdd: () => void;
|
||||||
|
onEdit: (index: number) => void;
|
||||||
|
onDelete: (index: number) => void;
|
||||||
|
onToggle: (index: number, enabled: boolean) => void;
|
||||||
|
onCloseModal: () => void;
|
||||||
|
onSave: (data: GeminiFormState, index: number | null) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function GeminiSection({
|
||||||
|
configs,
|
||||||
|
keyStats,
|
||||||
|
usageDetails,
|
||||||
|
loading,
|
||||||
|
disableControls,
|
||||||
|
isSaving,
|
||||||
|
isSwitching,
|
||||||
|
isModalOpen,
|
||||||
|
modalIndex,
|
||||||
|
onAdd,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
onToggle,
|
||||||
|
onCloseModal,
|
||||||
|
onSave,
|
||||||
|
}: GeminiSectionProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const actionsDisabled = disableControls || isSaving || isSwitching;
|
||||||
|
const toggleDisabled = disableControls || loading || isSaving || isSwitching;
|
||||||
|
|
||||||
|
const statusBarCache = useMemo(() => {
|
||||||
|
const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
|
||||||
|
const allApiKeys = new Set<string>();
|
||||||
|
configs.forEach((config) => config.apiKey && allApiKeys.add(config.apiKey));
|
||||||
|
allApiKeys.forEach((apiKey) => {
|
||||||
|
cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
|
||||||
|
});
|
||||||
|
return cache;
|
||||||
|
}, [configs, usageDetails]);
|
||||||
|
|
||||||
|
const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card
|
||||||
|
title={
|
||||||
|
<span className={styles.cardTitle}>
|
||||||
|
<img src={iconGemini} alt="" className={styles.cardTitleIcon} />
|
||||||
|
{t('ai_providers.gemini_title')}
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
extra={
|
||||||
|
<Button size="sm" onClick={onAdd} disabled={actionsDisabled}>
|
||||||
|
{t('ai_providers.gemini_add_button')}
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ProviderList<GeminiKeyConfig>
|
||||||
|
items={configs}
|
||||||
|
loading={loading}
|
||||||
|
keyField={(item) => item.apiKey}
|
||||||
|
emptyTitle={t('ai_providers.gemini_empty_title')}
|
||||||
|
emptyDescription={t('ai_providers.gemini_empty_desc')}
|
||||||
|
onEdit={onEdit}
|
||||||
|
onDelete={onDelete}
|
||||||
|
actionsDisabled={actionsDisabled}
|
||||||
|
getRowDisabled={(item) => hasDisableAllModelsRule(item.excludedModels)}
|
||||||
|
renderExtraActions={(item, index) => (
|
||||||
|
<ToggleSwitch
|
||||||
|
label={t('ai_providers.config_toggle_label')}
|
||||||
|
checked={!hasDisableAllModelsRule(item.excludedModels)}
|
||||||
|
disabled={toggleDisabled}
|
||||||
|
onChange={(value) => void onToggle(index, value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
renderContent={(item, index) => {
|
||||||
|
const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
|
||||||
|
const headerEntries = Object.entries(item.headers || {});
|
||||||
|
const configDisabled = hasDisableAllModelsRule(item.excludedModels);
|
||||||
|
const excludedModels = item.excludedModels ?? [];
|
||||||
|
const statusData =
|
||||||
|
statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<div className="item-title">
|
||||||
|
{t('ai_providers.gemini_item_title')} #{index + 1}
|
||||||
|
</div>
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.api_key')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
|
||||||
|
</div>
|
||||||
|
{item.prefix && (
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.prefix')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{item.prefix}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.baseUrl && (
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.base_url')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{item.baseUrl}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{headerEntries.length > 0 && (
|
||||||
|
<div className={styles.headerBadgeList}>
|
||||||
|
{headerEntries.map(([key, value]) => (
|
||||||
|
<span key={key} className={styles.headerBadge}>
|
||||||
|
<strong>{key}:</strong> {value}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{configDisabled && (
|
||||||
|
<div className="status-badge warning" style={{ marginTop: 8, marginBottom: 0 }}>
|
||||||
|
{t('ai_providers.config_disabled_badge')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{excludedModels.length ? (
|
||||||
|
<div className={styles.excludedModelsSection}>
|
||||||
|
<div className={styles.excludedModelsLabel}>
|
||||||
|
{t('ai_providers.excluded_models_count', { count: excludedModels.length })}
|
||||||
|
</div>
|
||||||
|
<div className={styles.modelTagList}>
|
||||||
|
{excludedModels.map((model) => (
|
||||||
|
<span key={model} className={`${styles.modelTag} ${styles.excludedModelTag}`}>
|
||||||
|
<span className={styles.modelName}>{model}</span>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<div className={styles.cardStats}>
|
||||||
|
<span className={`${styles.statPill} ${styles.statSuccess}`}>
|
||||||
|
{t('stats.success')}: {stats.success}
|
||||||
|
</span>
|
||||||
|
<span className={`${styles.statPill} ${styles.statFailure}`}>
|
||||||
|
{t('stats.failure')}: {stats.failure}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ProviderStatusBar statusData={statusData} />
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<GeminiModal
|
||||||
|
isOpen={isModalOpen}
|
||||||
|
editIndex={modalIndex}
|
||||||
|
initialData={initialData}
|
||||||
|
onClose={onCloseModal}
|
||||||
|
onSave={onSave}
|
||||||
|
isSaving={isSaving}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/components/providers/GeminiSection/index.ts
Normal file
1
src/components/providers/GeminiSection/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { GeminiSection } from './GeminiSection';
|
||||||
194
src/components/providers/OpenAISection/OpenAIDiscoveryModal.tsx
Normal file
194
src/components/providers/OpenAISection/OpenAIDiscoveryModal.tsx
Normal file
@@ -0,0 +1,194 @@
|
|||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { Input } from '@/components/ui/Input';
|
||||||
|
import { Modal } from '@/components/ui/Modal';
|
||||||
|
import { modelsApi } from '@/services/api';
|
||||||
|
import type { ApiKeyEntry } from '@/types';
|
||||||
|
import type { ModelInfo } from '@/utils/models';
|
||||||
|
import { buildHeaderObject, type HeaderEntry } from '@/utils/headers';
|
||||||
|
import { buildOpenAIModelsEndpoint } from '../utils';
|
||||||
|
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||||
|
|
||||||
|
interface OpenAIDiscoveryModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
baseUrl: string;
|
||||||
|
headers: HeaderEntry[];
|
||||||
|
apiKeyEntries: ApiKeyEntry[];
|
||||||
|
onClose: () => void;
|
||||||
|
onApply: (selected: ModelInfo[]) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function OpenAIDiscoveryModal({
|
||||||
|
isOpen,
|
||||||
|
baseUrl,
|
||||||
|
headers,
|
||||||
|
apiKeyEntries,
|
||||||
|
onClose,
|
||||||
|
onApply,
|
||||||
|
}: OpenAIDiscoveryModalProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [endpoint, setEndpoint] = useState('');
|
||||||
|
const [models, setModels] = useState<ModelInfo[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
|
const getErrorMessage = (err: unknown) => {
|
||||||
|
if (err instanceof Error) return err.message;
|
||||||
|
if (typeof err === 'string') return err;
|
||||||
|
return '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredModels = useMemo(() => {
|
||||||
|
const filter = search.trim().toLowerCase();
|
||||||
|
if (!filter) return models;
|
||||||
|
return models.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);
|
||||||
|
});
|
||||||
|
}, [models, search]);
|
||||||
|
|
||||||
|
const fetchOpenaiModelDiscovery = useCallback(
|
||||||
|
async ({ allowFallback = true }: { allowFallback?: boolean } = {}) => {
|
||||||
|
const trimmedBaseUrl = baseUrl.trim();
|
||||||
|
if (!trimmedBaseUrl) return;
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
setError('');
|
||||||
|
try {
|
||||||
|
const headerObject = buildHeaderObject(headers);
|
||||||
|
const firstKey = apiKeyEntries.find((entry) => entry.apiKey?.trim())?.apiKey?.trim();
|
||||||
|
const hasAuthHeader = Boolean(headerObject.Authorization || headerObject['authorization']);
|
||||||
|
const list = await modelsApi.fetchModelsViaApiCall(
|
||||||
|
trimmedBaseUrl,
|
||||||
|
hasAuthHeader ? undefined : firstKey,
|
||||||
|
headerObject
|
||||||
|
);
|
||||||
|
setModels(list);
|
||||||
|
} catch (err: unknown) {
|
||||||
|
if (allowFallback) {
|
||||||
|
try {
|
||||||
|
const list = await modelsApi.fetchModelsViaApiCall(trimmedBaseUrl);
|
||||||
|
setModels(list);
|
||||||
|
return;
|
||||||
|
} catch (fallbackErr: unknown) {
|
||||||
|
const message = getErrorMessage(fallbackErr) || getErrorMessage(err);
|
||||||
|
setModels([]);
|
||||||
|
setError(`${t('ai_providers.openai_models_fetch_error')}: ${message}`);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setModels([]);
|
||||||
|
setError(`${t('ai_providers.openai_models_fetch_error')}: ${getErrorMessage(err)}`);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[apiKeyEntries, baseUrl, headers, t]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) return;
|
||||||
|
setEndpoint(buildOpenAIModelsEndpoint(baseUrl));
|
||||||
|
setModels([]);
|
||||||
|
setSearch('');
|
||||||
|
setSelected(new Set());
|
||||||
|
setError('');
|
||||||
|
void fetchOpenaiModelDiscovery();
|
||||||
|
}, [baseUrl, fetchOpenaiModelDiscovery, isOpen]);
|
||||||
|
|
||||||
|
const toggleSelection = (name: string) => {
|
||||||
|
setSelected((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (next.has(name)) {
|
||||||
|
next.delete(name);
|
||||||
|
} else {
|
||||||
|
next.add(name);
|
||||||
|
}
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleApply = () => {
|
||||||
|
const selectedModels = models.filter((model) => selected.has(model.name));
|
||||||
|
onApply(selectedModels);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
open={isOpen}
|
||||||
|
onClose={onClose}
|
||||||
|
title={t('ai_providers.openai_models_fetch_title')}
|
||||||
|
width={720}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="secondary" onClick={onClose} disabled={loading}>
|
||||||
|
{t('ai_providers.openai_models_fetch_back')}
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleApply} disabled={loading}>
|
||||||
|
{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={endpoint} />
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => void fetchOpenaiModelDiscovery({ allowFallback: true })}
|
||||||
|
loading={loading}
|
||||||
|
>
|
||||||
|
{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={search}
|
||||||
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
|
/>
|
||||||
|
{error && <div className="error-box">{error}</div>}
|
||||||
|
{loading ? (
|
||||||
|
<div className="hint">{t('ai_providers.openai_models_fetch_loading')}</div>
|
||||||
|
) : models.length === 0 ? (
|
||||||
|
<div className="hint">{t('ai_providers.openai_models_fetch_empty')}</div>
|
||||||
|
) : filteredModels.length === 0 ? (
|
||||||
|
<div className="hint">{t('ai_providers.openai_models_search_empty')}</div>
|
||||||
|
) : (
|
||||||
|
<div className={styles.modelDiscoveryList}>
|
||||||
|
{filteredModels.map((model) => {
|
||||||
|
const checked = selected.has(model.name);
|
||||||
|
return (
|
||||||
|
<label
|
||||||
|
key={model.name}
|
||||||
|
className={`${styles.modelDiscoveryRow} ${checked ? styles.modelDiscoveryRowSelected : ''}`}
|
||||||
|
>
|
||||||
|
<input type="checkbox" checked={checked} onChange={() => toggleSelection(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>
|
||||||
|
);
|
||||||
|
}
|
||||||
432
src/components/providers/OpenAISection/OpenAIModal.tsx
Normal file
432
src/components/providers/OpenAISection/OpenAIModal.tsx
Normal file
@@ -0,0 +1,432 @@
|
|||||||
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { HeaderInputList } from '@/components/ui/HeaderInputList';
|
||||||
|
import { Input } from '@/components/ui/Input';
|
||||||
|
import { Modal } from '@/components/ui/Modal';
|
||||||
|
import { ModelInputList, modelsToEntries } from '@/components/ui/ModelInputList';
|
||||||
|
import { useNotificationStore } from '@/stores';
|
||||||
|
import { apiCallApi, getApiCallErrorMessage } from '@/services/api';
|
||||||
|
import type { OpenAIProviderConfig, ApiKeyEntry } from '@/types';
|
||||||
|
import { buildHeaderObject, headersToEntries } from '@/utils/headers';
|
||||||
|
import type { ModelInfo } from '@/utils/models';
|
||||||
|
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||||
|
import { buildApiKeyEntry, buildOpenAIChatCompletionsEndpoint } from '../utils';
|
||||||
|
import type { ModelEntry, OpenAIFormState, ProviderModalProps } from '../types';
|
||||||
|
import { OpenAIDiscoveryModal } from './OpenAIDiscoveryModal';
|
||||||
|
|
||||||
|
const OPENAI_TEST_TIMEOUT_MS = 30_000;
|
||||||
|
|
||||||
|
interface OpenAIModalProps extends ProviderModalProps<OpenAIProviderConfig, OpenAIFormState> {
|
||||||
|
isSaving: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const buildEmptyForm = (): OpenAIFormState => ({
|
||||||
|
name: '',
|
||||||
|
prefix: '',
|
||||||
|
baseUrl: '',
|
||||||
|
headers: [],
|
||||||
|
apiKeyEntries: [buildApiKeyEntry()],
|
||||||
|
modelEntries: [{ name: '', alias: '' }],
|
||||||
|
testModel: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
export function OpenAIModal({
|
||||||
|
isOpen,
|
||||||
|
editIndex,
|
||||||
|
initialData,
|
||||||
|
onClose,
|
||||||
|
onSave,
|
||||||
|
isSaving,
|
||||||
|
}: OpenAIModalProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const { showNotification } = useNotificationStore();
|
||||||
|
const [form, setForm] = useState<OpenAIFormState>(buildEmptyForm);
|
||||||
|
const [discoveryOpen, setDiscoveryOpen] = useState(false);
|
||||||
|
const [testModel, setTestModel] = useState('');
|
||||||
|
const [testStatus, setTestStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
|
||||||
|
const [testMessage, setTestMessage] = useState('');
|
||||||
|
|
||||||
|
const getErrorMessage = (err: unknown) => {
|
||||||
|
if (err instanceof Error) return err.message;
|
||||||
|
if (typeof err === 'string') return err;
|
||||||
|
return '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const availableModels = useMemo(
|
||||||
|
() => form.modelEntries.map((entry) => entry.name.trim()).filter(Boolean),
|
||||||
|
[form.modelEntries]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) {
|
||||||
|
setDiscoveryOpen(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (initialData) {
|
||||||
|
const modelEntries = modelsToEntries(initialData.models);
|
||||||
|
setForm({
|
||||||
|
name: initialData.name,
|
||||||
|
prefix: initialData.prefix ?? '',
|
||||||
|
baseUrl: initialData.baseUrl,
|
||||||
|
headers: headersToEntries(initialData.headers),
|
||||||
|
testModel: initialData.testModel,
|
||||||
|
modelEntries,
|
||||||
|
apiKeyEntries: initialData.apiKeyEntries?.length
|
||||||
|
? initialData.apiKeyEntries
|
||||||
|
: [buildApiKeyEntry()],
|
||||||
|
});
|
||||||
|
const available = modelEntries.map((entry) => entry.name.trim()).filter(Boolean);
|
||||||
|
const initialModel =
|
||||||
|
initialData.testModel && available.includes(initialData.testModel)
|
||||||
|
? initialData.testModel
|
||||||
|
: available[0] || '';
|
||||||
|
setTestModel(initialModel);
|
||||||
|
} else {
|
||||||
|
setForm(buildEmptyForm());
|
||||||
|
setTestModel('');
|
||||||
|
}
|
||||||
|
|
||||||
|
setTestStatus('idle');
|
||||||
|
setTestMessage('');
|
||||||
|
setDiscoveryOpen(false);
|
||||||
|
}, [initialData, isOpen]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) return;
|
||||||
|
if (availableModels.length === 0) {
|
||||||
|
if (testModel) {
|
||||||
|
setTestModel('');
|
||||||
|
setTestStatus('idle');
|
||||||
|
setTestMessage('');
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!testModel || !availableModels.includes(testModel)) {
|
||||||
|
setTestModel(availableModels[0]);
|
||||||
|
setTestStatus('idle');
|
||||||
|
setTestMessage('');
|
||||||
|
}
|
||||||
|
}, [availableModels, isOpen, testModel]);
|
||||||
|
|
||||||
|
const renderKeyEntries = (entries: ApiKeyEntry[]) => {
|
||||||
|
const list = entries.length ? entries : [buildApiKeyEntry()];
|
||||||
|
const updateEntry = (idx: number, field: keyof ApiKeyEntry, value: string) => {
|
||||||
|
const next = list.map((entry, i) => (i === idx ? { ...entry, [field]: value } : entry));
|
||||||
|
setForm((prev) => ({ ...prev, apiKeyEntries: next }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeEntry = (idx: number) => {
|
||||||
|
const next = list.filter((_, i) => i !== idx);
|
||||||
|
setForm((prev) => ({
|
||||||
|
...prev,
|
||||||
|
apiKeyEntries: next.length ? next : [buildApiKeyEntry()],
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const addEntry = () => {
|
||||||
|
setForm((prev) => ({ ...prev, apiKeyEntries: [...list, buildApiKeyEntry()] }));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="stack">
|
||||||
|
{list.map((entry, index) => (
|
||||||
|
<div key={index} className="item-row">
|
||||||
|
<div className="item-meta">
|
||||||
|
<Input
|
||||||
|
label={`${t('common.api_key')} #${index + 1}`}
|
||||||
|
value={entry.apiKey}
|
||||||
|
onChange={(e) => updateEntry(index, 'apiKey', e.target.value)}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label={t('common.proxy_url')}
|
||||||
|
value={entry.proxyUrl ?? ''}
|
||||||
|
onChange={(e) => updateEntry(index, 'proxyUrl', e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="item-actions">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => removeEntry(index)}
|
||||||
|
disabled={list.length <= 1 || isSaving}
|
||||||
|
>
|
||||||
|
{t('common.delete')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<Button variant="secondary" size="sm" onClick={addEntry} disabled={isSaving}>
|
||||||
|
{t('ai_providers.openai_keys_add_btn')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openOpenaiModelDiscovery = () => {
|
||||||
|
const baseUrl = form.baseUrl.trim();
|
||||||
|
if (!baseUrl) {
|
||||||
|
showNotification(t('ai_providers.openai_models_fetch_invalid_url'), 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setDiscoveryOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const applyOpenaiModelDiscoverySelection = (selectedModels: ModelInfo[]) => {
|
||||||
|
if (!selectedModels.length) {
|
||||||
|
setDiscoveryOpen(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const mergedMap = new Map<string, ModelEntry>();
|
||||||
|
form.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());
|
||||||
|
setForm((prev) => ({
|
||||||
|
...prev,
|
||||||
|
modelEntries: mergedEntries.length ? mergedEntries : [{ name: '', alias: '' }],
|
||||||
|
}));
|
||||||
|
|
||||||
|
setDiscoveryOpen(false);
|
||||||
|
if (addedCount > 0) {
|
||||||
|
showNotification(t('ai_providers.openai_models_fetch_added', { count: addedCount }), 'success');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const testOpenaiProviderConnection = async () => {
|
||||||
|
const baseUrl = form.baseUrl.trim();
|
||||||
|
if (!baseUrl) {
|
||||||
|
const message = t('notification.openai_test_url_required');
|
||||||
|
setTestStatus('error');
|
||||||
|
setTestMessage(message);
|
||||||
|
showNotification(message, 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const endpoint = buildOpenAIChatCompletionsEndpoint(baseUrl);
|
||||||
|
if (!endpoint) {
|
||||||
|
const message = t('notification.openai_test_url_required');
|
||||||
|
setTestStatus('error');
|
||||||
|
setTestMessage(message);
|
||||||
|
showNotification(message, 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const firstKeyEntry = form.apiKeyEntries.find((entry) => entry.apiKey?.trim());
|
||||||
|
if (!firstKeyEntry) {
|
||||||
|
const message = t('notification.openai_test_key_required');
|
||||||
|
setTestStatus('error');
|
||||||
|
setTestMessage(message);
|
||||||
|
showNotification(message, 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const modelName = testModel.trim() || availableModels[0] || '';
|
||||||
|
if (!modelName) {
|
||||||
|
const message = t('notification.openai_test_model_required');
|
||||||
|
setTestStatus('error');
|
||||||
|
setTestMessage(message);
|
||||||
|
showNotification(message, 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const customHeaders = buildHeaderObject(form.headers);
|
||||||
|
const headers: Record<string, string> = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...customHeaders,
|
||||||
|
};
|
||||||
|
if (!headers.Authorization && !headers['authorization']) {
|
||||||
|
headers.Authorization = `Bearer ${firstKeyEntry.apiKey.trim()}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
setTestStatus('loading');
|
||||||
|
setTestMessage(t('ai_providers.openai_test_running'));
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await apiCallApi.request(
|
||||||
|
{
|
||||||
|
method: 'POST',
|
||||||
|
url: endpoint,
|
||||||
|
header: Object.keys(headers).length ? headers : undefined,
|
||||||
|
data: JSON.stringify({
|
||||||
|
model: modelName,
|
||||||
|
messages: [{ role: 'user', content: 'Hi' }],
|
||||||
|
stream: false,
|
||||||
|
max_tokens: 5,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{ timeout: OPENAI_TEST_TIMEOUT_MS }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (result.statusCode < 200 || result.statusCode >= 300) {
|
||||||
|
throw new Error(getApiCallErrorMessage(result));
|
||||||
|
}
|
||||||
|
|
||||||
|
setTestStatus('success');
|
||||||
|
setTestMessage(t('ai_providers.openai_test_success'));
|
||||||
|
} catch (err: unknown) {
|
||||||
|
setTestStatus('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');
|
||||||
|
if (isTimeout) {
|
||||||
|
setTestMessage(t('ai_providers.openai_test_timeout', { seconds: OPENAI_TEST_TIMEOUT_MS / 1000 }));
|
||||||
|
} else {
|
||||||
|
setTestMessage(`${t('ai_providers.openai_test_failed')}: ${message}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Modal
|
||||||
|
open={isOpen}
|
||||||
|
onClose={onClose}
|
||||||
|
title={
|
||||||
|
editIndex !== null
|
||||||
|
? t('ai_providers.openai_edit_modal_title')
|
||||||
|
: t('ai_providers.openai_add_modal_title')
|
||||||
|
}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="secondary" onClick={onClose} disabled={isSaving}>
|
||||||
|
{t('common.cancel')}
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => void onSave(form, editIndex)} loading={isSaving}>
|
||||||
|
{t('common.save')}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.openai_add_modal_name_label')}
|
||||||
|
value={form.name}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.prefix_label')}
|
||||||
|
placeholder={t('ai_providers.prefix_placeholder')}
|
||||||
|
value={form.prefix ?? ''}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, prefix: e.target.value }))}
|
||||||
|
hint={t('ai_providers.prefix_hint')}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.openai_add_modal_url_label')}
|
||||||
|
value={form.baseUrl}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<HeaderInputList
|
||||||
|
entries={form.headers}
|
||||||
|
onChange={(entries) => setForm((prev) => ({ ...prev, headers: entries }))}
|
||||||
|
addLabel={t('common.custom_headers_add')}
|
||||||
|
keyPlaceholder={t('common.custom_headers_key_placeholder')}
|
||||||
|
valuePlaceholder={t('common.custom_headers_value_placeholder')}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label>
|
||||||
|
{editIndex !== 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={form.modelEntries}
|
||||||
|
onChange={(entries) => setForm((prev) => ({ ...prev, modelEntries: entries }))}
|
||||||
|
addLabel={t('ai_providers.openai_models_add_btn')}
|
||||||
|
namePlaceholder={t('common.model_name_placeholder')}
|
||||||
|
aliasPlaceholder={t('common.model_alias_placeholder')}
|
||||||
|
disabled={isSaving}
|
||||||
|
/>
|
||||||
|
<Button variant="secondary" size="sm" onClick={openOpenaiModelDiscovery} disabled={isSaving}>
|
||||||
|
{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 ${styles.openaiTestSelect}`}
|
||||||
|
value={testModel}
|
||||||
|
onChange={(e) => {
|
||||||
|
setTestModel(e.target.value);
|
||||||
|
setTestStatus('idle');
|
||||||
|
setTestMessage('');
|
||||||
|
}}
|
||||||
|
disabled={isSaving || availableModels.length === 0}
|
||||||
|
>
|
||||||
|
<option value="">
|
||||||
|
{availableModels.length
|
||||||
|
? t('ai_providers.openai_test_select_placeholder')
|
||||||
|
: t('ai_providers.openai_test_select_empty')}
|
||||||
|
</option>
|
||||||
|
{form.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
|
||||||
|
variant={testStatus === 'error' ? 'danger' : 'secondary'}
|
||||||
|
className={`${styles.openaiTestButton} ${testStatus === 'success' ? styles.openaiTestButtonSuccess : ''}`}
|
||||||
|
onClick={testOpenaiProviderConnection}
|
||||||
|
loading={testStatus === 'loading'}
|
||||||
|
disabled={isSaving || availableModels.length === 0}
|
||||||
|
>
|
||||||
|
{t('ai_providers.openai_test_action')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{testMessage && (
|
||||||
|
<div
|
||||||
|
className={`status-badge ${
|
||||||
|
testStatus === 'error' ? 'error' : testStatus === 'success' ? 'success' : 'muted'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{testMessage}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label>{t('ai_providers.openai_add_modal_keys_label')}</label>
|
||||||
|
{renderKeyEntries(form.apiKeyEntries)}
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<OpenAIDiscoveryModal
|
||||||
|
isOpen={discoveryOpen}
|
||||||
|
baseUrl={form.baseUrl}
|
||||||
|
headers={form.headers}
|
||||||
|
apiKeyEntries={form.apiKeyEntries}
|
||||||
|
onClose={() => setDiscoveryOpen(false)}
|
||||||
|
onApply={applyOpenaiModelDiscoverySelection}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
206
src/components/providers/OpenAISection/OpenAISection.tsx
Normal file
206
src/components/providers/OpenAISection/OpenAISection.tsx
Normal file
@@ -0,0 +1,206 @@
|
|||||||
|
import { Fragment, useMemo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { Card } from '@/components/ui/Card';
|
||||||
|
import { IconCheck, IconX } from '@/components/ui/icons';
|
||||||
|
import iconOpenaiLight from '@/assets/icons/openai-light.svg';
|
||||||
|
import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
|
||||||
|
import type { OpenAIProviderConfig } from '@/types';
|
||||||
|
import { maskApiKey } from '@/utils/format';
|
||||||
|
import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
|
||||||
|
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||||
|
import { ProviderList } from '../ProviderList';
|
||||||
|
import { ProviderStatusBar } from '../ProviderStatusBar';
|
||||||
|
import { getOpenAIProviderStats, getStatsBySource } from '../utils';
|
||||||
|
import type { OpenAIFormState } from '../types';
|
||||||
|
import { OpenAIModal } from './OpenAIModal';
|
||||||
|
|
||||||
|
interface OpenAISectionProps {
|
||||||
|
configs: OpenAIProviderConfig[];
|
||||||
|
keyStats: KeyStats;
|
||||||
|
usageDetails: UsageDetail[];
|
||||||
|
loading: boolean;
|
||||||
|
disableControls: boolean;
|
||||||
|
isSaving: boolean;
|
||||||
|
isSwitching: boolean;
|
||||||
|
resolvedTheme: string;
|
||||||
|
isModalOpen: boolean;
|
||||||
|
modalIndex: number | null;
|
||||||
|
onAdd: () => void;
|
||||||
|
onEdit: (index: number) => void;
|
||||||
|
onDelete: (index: number) => void;
|
||||||
|
onCloseModal: () => void;
|
||||||
|
onSave: (data: OpenAIFormState, index: number | null) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function OpenAISection({
|
||||||
|
configs,
|
||||||
|
keyStats,
|
||||||
|
usageDetails,
|
||||||
|
loading,
|
||||||
|
disableControls,
|
||||||
|
isSaving,
|
||||||
|
isSwitching,
|
||||||
|
resolvedTheme,
|
||||||
|
isModalOpen,
|
||||||
|
modalIndex,
|
||||||
|
onAdd,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
onCloseModal,
|
||||||
|
onSave,
|
||||||
|
}: OpenAISectionProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const actionsDisabled = disableControls || isSaving || isSwitching;
|
||||||
|
|
||||||
|
const statusBarCache = useMemo(() => {
|
||||||
|
const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
|
||||||
|
|
||||||
|
configs.forEach((provider) => {
|
||||||
|
const allKeys = (provider.apiKeyEntries || []).map((entry) => entry.apiKey).filter(Boolean);
|
||||||
|
const filteredDetails = usageDetails.filter((detail) => allKeys.includes(detail.source));
|
||||||
|
cache.set(provider.name, calculateStatusBarData(filteredDetails));
|
||||||
|
});
|
||||||
|
|
||||||
|
return cache;
|
||||||
|
}, [configs, usageDetails]);
|
||||||
|
|
||||||
|
const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card
|
||||||
|
title={
|
||||||
|
<span className={styles.cardTitle}>
|
||||||
|
<img
|
||||||
|
src={resolvedTheme === 'dark' ? iconOpenaiDark : iconOpenaiLight}
|
||||||
|
alt=""
|
||||||
|
className={styles.cardTitleIcon}
|
||||||
|
/>
|
||||||
|
{t('ai_providers.openai_title')}
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
extra={
|
||||||
|
<Button size="sm" onClick={onAdd} disabled={actionsDisabled}>
|
||||||
|
{t('ai_providers.openai_add_button')}
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ProviderList<OpenAIProviderConfig>
|
||||||
|
items={configs}
|
||||||
|
loading={loading}
|
||||||
|
keyField={(item) => item.name}
|
||||||
|
emptyTitle={t('ai_providers.openai_empty_title')}
|
||||||
|
emptyDescription={t('ai_providers.openai_empty_desc')}
|
||||||
|
onEdit={onEdit}
|
||||||
|
onDelete={onDelete}
|
||||||
|
actionsDisabled={actionsDisabled}
|
||||||
|
renderContent={(item) => {
|
||||||
|
const stats = getOpenAIProviderStats(item.apiKeyEntries, keyStats, maskApiKey);
|
||||||
|
const headerEntries = Object.entries(item.headers || {});
|
||||||
|
const apiKeyEntries = item.apiKeyEntries || [];
|
||||||
|
const statusData = statusBarCache.get(item.name) || calculateStatusBarData([]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<div className="item-title">{item.name}</div>
|
||||||
|
{item.prefix && (
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.prefix')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{item.prefix}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.base_url')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{item.baseUrl}</span>
|
||||||
|
</div>
|
||||||
|
{headerEntries.length > 0 && (
|
||||||
|
<div className={styles.headerBadgeList}>
|
||||||
|
{headerEntries.map(([key, value]) => (
|
||||||
|
<span key={key} className={styles.headerBadge}>
|
||||||
|
<strong>{key}:</strong> {value}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{apiKeyEntries.length > 0 && (
|
||||||
|
<div className={styles.apiKeyEntriesSection}>
|
||||||
|
<div className={styles.apiKeyEntriesLabel}>
|
||||||
|
{t('ai_providers.openai_keys_count')}: {apiKeyEntries.length}
|
||||||
|
</div>
|
||||||
|
<div className={styles.apiKeyEntryList}>
|
||||||
|
{apiKeyEntries.map((entry, entryIndex) => {
|
||||||
|
const entryStats = getStatsBySource(entry.apiKey, keyStats, maskApiKey);
|
||||||
|
return (
|
||||||
|
<div key={entryIndex} className={styles.apiKeyEntryCard}>
|
||||||
|
<span className={styles.apiKeyEntryIndex}>{entryIndex + 1}</span>
|
||||||
|
<span className={styles.apiKeyEntryKey}>{maskApiKey(entry.apiKey)}</span>
|
||||||
|
{entry.proxyUrl && (
|
||||||
|
<span className={styles.apiKeyEntryProxy}>{entry.proxyUrl}</span>
|
||||||
|
)}
|
||||||
|
<div className={styles.apiKeyEntryStats}>
|
||||||
|
<span
|
||||||
|
className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatSuccess}`}
|
||||||
|
>
|
||||||
|
<IconCheck size={12} /> {entryStats.success}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatFailure}`}
|
||||||
|
>
|
||||||
|
<IconX size={12} /> {entryStats.failure}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className={styles.fieldRow} style={{ marginTop: '8px' }}>
|
||||||
|
<span className={styles.fieldLabel}>{t('ai_providers.openai_models_count')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{item.models?.length || 0}</span>
|
||||||
|
</div>
|
||||||
|
{item.models?.length ? (
|
||||||
|
<div className={styles.modelTagList}>
|
||||||
|
{item.models.map((model) => (
|
||||||
|
<span key={model.name} className={styles.modelTag}>
|
||||||
|
<span className={styles.modelName}>{model.name}</span>
|
||||||
|
{model.alias && model.alias !== model.name && (
|
||||||
|
<span className={styles.modelAlias}>{model.alias}</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
{item.testModel && (
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>Test Model:</span>
|
||||||
|
<span className={styles.fieldValue}>{item.testModel}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className={styles.cardStats}>
|
||||||
|
<span className={`${styles.statPill} ${styles.statSuccess}`}>
|
||||||
|
{t('stats.success')}: {stats.success}
|
||||||
|
</span>
|
||||||
|
<span className={`${styles.statPill} ${styles.statFailure}`}>
|
||||||
|
{t('stats.failure')}: {stats.failure}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ProviderStatusBar statusData={statusData} />
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<OpenAIModal
|
||||||
|
isOpen={isModalOpen}
|
||||||
|
editIndex={modalIndex}
|
||||||
|
initialData={initialData}
|
||||||
|
onClose={onCloseModal}
|
||||||
|
onSave={onSave}
|
||||||
|
isSaving={isSaving}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/components/providers/OpenAISection/index.ts
Normal file
1
src/components/providers/OpenAISection/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { OpenAISection } from './OpenAISection';
|
||||||
80
src/components/providers/ProviderList.tsx
Normal file
80
src/components/providers/ProviderList.tsx
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
import type { ReactNode } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { EmptyState } from '@/components/ui/EmptyState';
|
||||||
|
|
||||||
|
interface ProviderListProps<T> {
|
||||||
|
items: T[];
|
||||||
|
loading: boolean;
|
||||||
|
keyField: (item: T) => string;
|
||||||
|
renderContent: (item: T, index: number) => ReactNode;
|
||||||
|
onEdit: (index: number) => void;
|
||||||
|
onDelete: (index: number) => void;
|
||||||
|
emptyTitle: string;
|
||||||
|
emptyDescription: string;
|
||||||
|
deleteLabel?: string;
|
||||||
|
actionsDisabled?: boolean;
|
||||||
|
getRowDisabled?: (item: T, index: number) => boolean;
|
||||||
|
renderExtraActions?: (item: T, index: number) => ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ProviderList<T>({
|
||||||
|
items,
|
||||||
|
loading,
|
||||||
|
keyField,
|
||||||
|
renderContent,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
emptyTitle,
|
||||||
|
emptyDescription,
|
||||||
|
deleteLabel,
|
||||||
|
actionsDisabled = false,
|
||||||
|
getRowDisabled,
|
||||||
|
renderExtraActions,
|
||||||
|
}: ProviderListProps<T>) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="hint">{t('common.loading')}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!items.length) {
|
||||||
|
return <EmptyState title={emptyTitle} description={emptyDescription} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="item-list">
|
||||||
|
{items.map((item, index) => {
|
||||||
|
const rowDisabled = getRowDisabled ? getRowDisabled(item, index) : false;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={keyField(item)}
|
||||||
|
className="item-row"
|
||||||
|
style={rowDisabled ? { opacity: 0.6 } : undefined}
|
||||||
|
>
|
||||||
|
<div className="item-meta">{renderContent(item, index)}</div>
|
||||||
|
<div className="item-actions">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onEdit(index)}
|
||||||
|
disabled={actionsDisabled}
|
||||||
|
>
|
||||||
|
{t('common.edit')}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="danger"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onDelete(index)}
|
||||||
|
disabled={actionsDisabled}
|
||||||
|
>
|
||||||
|
{deleteLabel || t('common.delete')}
|
||||||
|
</Button>
|
||||||
|
{renderExtraActions ? renderExtraActions(item, index) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
38
src/components/providers/ProviderStatusBar.tsx
Normal file
38
src/components/providers/ProviderStatusBar.tsx
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import { calculateStatusBarData } from '@/utils/usage';
|
||||||
|
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||||
|
|
||||||
|
interface ProviderStatusBarProps {
|
||||||
|
statusData: ReturnType<typeof calculateStatusBarData>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ProviderStatusBar({ statusData }: ProviderStatusBarProps) {
|
||||||
|
const hasData = statusData.totalSuccess + statusData.totalFailure > 0;
|
||||||
|
const rateClass = !hasData
|
||||||
|
? ''
|
||||||
|
: statusData.successRate >= 90
|
||||||
|
? styles.statusRateHigh
|
||||||
|
: statusData.successRate >= 50
|
||||||
|
? styles.statusRateMedium
|
||||||
|
: styles.statusRateLow;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.statusBar}>
|
||||||
|
<div className={styles.statusBlocks}>
|
||||||
|
{statusData.blocks.map((state, idx) => {
|
||||||
|
const blockClass =
|
||||||
|
state === 'success'
|
||||||
|
? styles.statusBlockSuccess
|
||||||
|
: state === 'failure'
|
||||||
|
? styles.statusBlockFailure
|
||||||
|
: state === 'mixed'
|
||||||
|
? styles.statusBlockMixed
|
||||||
|
: styles.statusBlockIdle;
|
||||||
|
return <div key={idx} className={`${styles.statusBlock} ${blockClass}`} />;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<span className={`${styles.statusRate} ${rateClass}`}>
|
||||||
|
{hasData ? `${statusData.successRate.toFixed(1)}%` : '--'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
37
src/components/providers/hooks/useProviderStats.ts
Normal file
37
src/components/providers/hooks/useProviderStats.ts
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import { useCallback, useRef, useState } from 'react';
|
||||||
|
import { useInterval } from '@/hooks/useInterval';
|
||||||
|
import { usageApi } from '@/services/api';
|
||||||
|
import { collectUsageDetails, type KeyStats, type UsageDetail } from '@/utils/usage';
|
||||||
|
|
||||||
|
const EMPTY_STATS: KeyStats = { bySource: {}, byAuthIndex: {} };
|
||||||
|
|
||||||
|
export const useProviderStats = () => {
|
||||||
|
const [keyStats, setKeyStats] = useState<KeyStats>(EMPTY_STATS);
|
||||||
|
const [usageDetails, setUsageDetails] = useState<UsageDetail[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const loadingRef = useRef(false);
|
||||||
|
|
||||||
|
// 加载 key 统计和 usage 明细（API 层已有60秒超时）
|
||||||
|
const loadKeyStats = useCallback(async () => {
|
||||||
|
if (loadingRef.current) return;
|
||||||
|
loadingRef.current = true;
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
const usageResponse = await usageApi.getUsage();
|
||||||
|
const usageData = usageResponse?.usage ?? usageResponse;
|
||||||
|
const stats = await usageApi.getKeyStats(usageData);
|
||||||
|
setKeyStats(stats);
|
||||||
|
setUsageDetails(collectUsageDetails(usageData));
|
||||||
|
} catch {
|
||||||
|
// 静默失败
|
||||||
|
} finally {
|
||||||
|
loadingRef.current = false;
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 定时刷新状态数据（每240秒）
|
||||||
|
useInterval(loadKeyStats, 240_000);
|
||||||
|
|
||||||
|
return { keyStats, usageDetails, loadKeyStats, isLoading };
|
||||||
|
};
|
||||||
10
src/components/providers/index.ts
Normal file
10
src/components/providers/index.ts
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
export { AmpcodeSection } from './AmpcodeSection';
|
||||||
|
export { ClaudeSection } from './ClaudeSection';
|
||||||
|
export { CodexSection } from './CodexSection';
|
||||||
|
export { GeminiSection } from './GeminiSection';
|
||||||
|
export { OpenAISection } from './OpenAISection';
|
||||||
|
export { ProviderList } from './ProviderList';
|
||||||
|
export { ProviderStatusBar } from './ProviderStatusBar';
|
||||||
|
export * from './hooks/useProviderStats';
|
||||||
|
export * from './types';
|
||||||
|
export * from './utils';
|
||||||
59
src/components/providers/types.ts
Normal file
59
src/components/providers/types.ts
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
import type { ApiKeyEntry, GeminiKeyConfig, ProviderKeyConfig } from '@/types';
|
||||||
|
import type { HeaderEntry } from '@/utils/headers';
|
||||||
|
import type { KeyStats, UsageDetail } from '@/utils/usage';
|
||||||
|
|
||||||
|
export type ProviderModal =
|
||||||
|
| { type: 'gemini'; index: number | null }
|
||||||
|
| { type: 'codex'; index: number | null }
|
||||||
|
| { type: 'claude'; index: number | null }
|
||||||
|
| { type: 'ampcode'; index: null }
|
||||||
|
| { type: 'openai'; index: number | null };
|
||||||
|
|
||||||
|
export interface ModelEntry {
|
||||||
|
name: string;
|
||||||
|
alias: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OpenAIFormState {
|
||||||
|
name: string;
|
||||||
|
prefix: string;
|
||||||
|
baseUrl: string;
|
||||||
|
headers: HeaderEntry[];
|
||||||
|
testModel?: string;
|
||||||
|
modelEntries: ModelEntry[];
|
||||||
|
apiKeyEntries: ApiKeyEntry[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AmpcodeFormState {
|
||||||
|
upstreamUrl: string;
|
||||||
|
upstreamApiKey: string;
|
||||||
|
forceModelMappings: boolean;
|
||||||
|
mappingEntries: ModelEntry[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export type GeminiFormState = GeminiKeyConfig & { excludedText: string };
|
||||||
|
|
||||||
|
export type ProviderFormState = ProviderKeyConfig & {
|
||||||
|
modelEntries: ModelEntry[];
|
||||||
|
excludedText: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface ProviderSectionProps<TConfig> {
|
||||||
|
configs: TConfig[];
|
||||||
|
keyStats: KeyStats;
|
||||||
|
usageDetails: UsageDetail[];
|
||||||
|
disabled: boolean;
|
||||||
|
onEdit: (index: number) => void;
|
||||||
|
onAdd: () => void;
|
||||||
|
onDelete: (index: number) => void;
|
||||||
|
onToggle?: (index: number, enabled: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProviderModalProps<TConfig, TPayload = TConfig> {
|
||||||
|
isOpen: boolean;
|
||||||
|
editIndex: number | null;
|
||||||
|
initialData?: TConfig;
|
||||||
|
onClose: () => void;
|
||||||
|
onSave: (data: TPayload, index: number | null) => Promise<void>;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
132
src/components/providers/utils.ts
Normal file
132
src/components/providers/utils.ts
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
import type { AmpcodeConfig, AmpcodeModelMapping, ApiKeyEntry } from '@/types';
|
||||||
|
import type { KeyStatBucket, KeyStats } from '@/utils/usage';
|
||||||
|
import type { AmpcodeFormState, ModelEntry } from './types';
|
||||||
|
|
||||||
|
export const DISABLE_ALL_MODELS_RULE = '*';
|
||||||
|
|
||||||
|
export const hasDisableAllModelsRule = (models?: string[]) =>
|
||||||
|
Array.isArray(models) &&
|
||||||
|
models.some((model) => String(model ?? '').trim() === DISABLE_ALL_MODELS_RULE);
|
||||||
|
|
||||||
|
export const stripDisableAllModelsRule = (models?: string[]) =>
|
||||||
|
Array.isArray(models)
|
||||||
|
? models.filter((model) => String(model ?? '').trim() !== DISABLE_ALL_MODELS_RULE)
|
||||||
|
: [];
|
||||||
|
|
||||||
|
export const withDisableAllModelsRule = (models?: string[]) => {
|
||||||
|
const base = stripDisableAllModelsRule(models);
|
||||||
|
return [...base, DISABLE_ALL_MODELS_RULE];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const withoutDisableAllModelsRule = (models?: string[]) => {
|
||||||
|
const base = stripDisableAllModelsRule(models);
|
||||||
|
return base;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const parseExcludedModels = (text: string): string[] =>
|
||||||
|
text
|
||||||
|
.split(/[\n,]+/)
|
||||||
|
.map((item) => item.trim())
|
||||||
|
.filter(Boolean);
|
||||||
|
|
||||||
|
export const excludedModelsToText = (models?: string[]) =>
|
||||||
|
Array.isArray(models) ? models.join('\n') : '';
|
||||||
|
|
||||||
|
export const normalizeOpenAIBaseUrl = (baseUrl: string): string => {
|
||||||
|
let trimmed = String(baseUrl || '').trim();
|
||||||
|
if (!trimmed) return '';
|
||||||
|
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 '';
|
||||||
|
return trimmed.endsWith('/v1') ? `${trimmed}/models` : `${trimmed}/v1/models`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => {
|
||||||
|
const trimmed = normalizeOpenAIBaseUrl(baseUrl);
|
||||||
|
if (!trimmed) return '';
|
||||||
|
if (trimmed.endsWith('/chat/completions')) {
|
||||||
|
return trimmed;
|
||||||
|
}
|
||||||
|
return trimmed.endsWith('/v1') ? `${trimmed}/chat/completions` : `${trimmed}/v1/chat/completions`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 根据 source (apiKey) 获取统计数据 - 与旧版逻辑一致
|
||||||
|
export const getStatsBySource = (
|
||||||
|
apiKey: string,
|
||||||
|
keyStats: KeyStats,
|
||||||
|
maskFn: (key: string) => string
|
||||||
|
): KeyStatBucket => {
|
||||||
|
const bySource = keyStats.bySource ?? {};
|
||||||
|
const masked = maskFn(apiKey);
|
||||||
|
return bySource[apiKey] || bySource[masked] || { success: 0, failure: 0 };
|
||||||
|
};
|
||||||
|
|
||||||
|
// 对于 OpenAI 提供商，汇总所有 apiKeyEntries 的统计 - 与旧版逻辑一致
|
||||||
|
export const getOpenAIProviderStats = (
|
||||||
|
apiKeyEntries: ApiKeyEntry[] | undefined,
|
||||||
|
keyStats: KeyStats,
|
||||||
|
maskFn: (key: string) => string
|
||||||
|
): KeyStatBucket => {
|
||||||
|
const bySource = keyStats.bySource ?? {};
|
||||||
|
let totalSuccess = 0;
|
||||||
|
let totalFailure = 0;
|
||||||
|
|
||||||
|
(apiKeyEntries || []).forEach((entry) => {
|
||||||
|
const key = entry?.apiKey || '';
|
||||||
|
if (!key) return;
|
||||||
|
const masked = maskFn(key);
|
||||||
|
const stats = bySource[key] || bySource[masked] || { success: 0, failure: 0 };
|
||||||
|
totalSuccess += stats.success;
|
||||||
|
totalFailure += stats.failure;
|
||||||
|
});
|
||||||
|
|
||||||
|
return { success: totalSuccess, failure: totalFailure };
|
||||||
|
};
|
||||||
|
|
||||||
|
export const buildApiKeyEntry = (input?: Partial<ApiKeyEntry>): ApiKeyEntry => ({
|
||||||
|
apiKey: input?.apiKey ?? '',
|
||||||
|
proxyUrl: input?.proxyUrl ?? '',
|
||||||
|
headers: input?.headers ?? {},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const ampcodeMappingsToEntries = (mappings?: AmpcodeModelMapping[]): ModelEntry[] => {
|
||||||
|
if (!Array.isArray(mappings) || mappings.length === 0) {
|
||||||
|
return [{ name: '', alias: '' }];
|
||||||
|
}
|
||||||
|
return mappings.map((mapping) => ({
|
||||||
|
name: mapping.from ?? '',
|
||||||
|
alias: mapping.to ?? '',
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
export const entriesToAmpcodeMappings = (entries: ModelEntry[]): AmpcodeModelMapping[] => {
|
||||||
|
const seen = new Set<string>();
|
||||||
|
const mappings: AmpcodeModelMapping[] = [];
|
||||||
|
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
const from = entry.name.trim();
|
||||||
|
const to = entry.alias.trim();
|
||||||
|
if (!from || !to) return;
|
||||||
|
const key = from.toLowerCase();
|
||||||
|
if (seen.has(key)) return;
|
||||||
|
seen.add(key);
|
||||||
|
mappings.push({ from, to });
|
||||||
|
});
|
||||||
|
|
||||||
|
return mappings;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const buildAmpcodeFormState = (ampcode?: AmpcodeConfig | null): AmpcodeFormState => ({
|
||||||
|
upstreamUrl: ampcode?.upstreamUrl ?? '',
|
||||||
|
upstreamApiKey: '',
|
||||||
|
forceModelMappings: ampcode?.forceModelMappings ?? false,
|
||||||
|
mappingEntries: ampcodeMappingsToEntries(ampcode?.modelMappings),
|
||||||
|
});
|
||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user