58 lines
3.3 KiB
TypeScript
58 lines
3.3 KiB
TypeScript
/**
|
|
* Add/Edit dialog for an LlmProvider row.
|
|
* Save is disabled until provider_code + provider_name are non-empty.
|
|
*/
|
|
import React from 'react';
|
|
import {
|
|
Box, Dialog, DialogTitle, DialogContent, DialogActions, TextField, FormControl,
|
|
InputLabel, Select, MenuItem, FormControlLabel, Checkbox, Button,
|
|
} from '@mui/material';
|
|
import type { LlmProvider } from '../ProvidersManagement.types';
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
data: Partial<LlmProvider> | null;
|
|
onClose: () => void;
|
|
onChange: (data: Partial<LlmProvider>) => void;
|
|
onSave: () => void;
|
|
}
|
|
|
|
export const ProviderDialog: React.FC<Props> = ({ open, data, onClose, onChange, onSave }) => {
|
|
if (!data) return null;
|
|
const isEdit = 'provider_id' in data && !!data.provider_id;
|
|
|
|
return (
|
|
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
|
|
<DialogTitle>{isEdit ? 'Edit Provider' : 'Add Provider'}</DialogTitle>
|
|
<DialogContent>
|
|
<Box display="flex" flexDirection="column" gap={2} pt={1}>
|
|
<TextField label="Provider Code" value={data.provider_code || ''} onChange={(e) => onChange({ ...data, provider_code: e.target.value })} required fullWidth />
|
|
<TextField label="Provider Name" value={data.provider_name || ''} onChange={(e) => onChange({ ...data, provider_name: e.target.value })} required fullWidth />
|
|
<TextField label="Base URL" value={data.base_url || ''} onChange={(e) => onChange({ ...data, base_url: e.target.value })} fullWidth placeholder="https://api.example.com/v1" />
|
|
<FormControl fullWidth>
|
|
<InputLabel>Auth Type</InputLabel>
|
|
<Select value={data.auth_type || 'bearer'} label="Auth Type" onChange={(e) => onChange({ ...data, auth_type: e.target.value })}>
|
|
<MenuItem value="bearer">Bearer Token</MenuItem>
|
|
<MenuItem value="api_key">API Key Header</MenuItem>
|
|
<MenuItem value="x-api-key">X-API-Key Header</MenuItem>
|
|
<MenuItem value="none">No Auth</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<Box display="flex" gap={2}>
|
|
<TextField label="Priority" type="number" value={data.priority || 100} onChange={(e) => onChange({ ...data, priority: parseInt(e.target.value) })} sx={{ flex: 1 }} />
|
|
<TextField label="Rate Limit (RPM)" type="number" value={data.rate_limit_rpm || 60} onChange={(e) => onChange({ ...data, rate_limit_rpm: parseInt(e.target.value) })} sx={{ flex: 1 }} />
|
|
<TextField label="Rate Limit (TPM)" type="number" value={data.rate_limit_tpm || 100000} onChange={(e) => onChange({ ...data, rate_limit_tpm: parseInt(e.target.value) })} sx={{ flex: 1 }} />
|
|
</Box>
|
|
<TextField label="Description" value={data.description || ''} onChange={(e) => onChange({ ...data, description: e.target.value })} multiline rows={2} fullWidth />
|
|
<FormControlLabel control={<Checkbox checked={data.is_active !== false} onChange={(e) => onChange({ ...data, is_active: e.target.checked })} />} label="Active" />
|
|
</Box>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={onClose}>Cancel</Button>
|
|
<Button variant="contained" onClick={onSave} disabled={!data.provider_code || !data.provider_name}>
|
|
{isEdit ? 'Update' : 'Create'}
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
};
|