259 lines
11 KiB
TypeScript
259 lines
11 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Box, Plus, X } from 'lucide-react';
|
|
import type { Provider } from '../../types';
|
|
import apiClient from '../../api/client';
|
|
|
|
export function ProvidersSettings() {
|
|
const [providers, setProviders] = useState<Provider[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [formData, setFormData] = useState({
|
|
provider_type: 'openai',
|
|
provider_title: '',
|
|
provider_url: '',
|
|
provider_apikey: ''
|
|
});
|
|
const [submitLoading, setSubmitLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
const fetchProviders = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const response = await apiClient.get('/api/v1/provider/list');
|
|
const data = response.data.provider_list || {};
|
|
const providerArray: Provider[] = Object.values(data);
|
|
setProviders(providerArray);
|
|
} catch (error) {
|
|
console.error("Failed to fetch providers", error);
|
|
setProviders([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
fetchProviders();
|
|
}, []);
|
|
|
|
const handleOpenModal = () => {
|
|
setFormData({
|
|
provider_type: 'openai',
|
|
provider_title: '',
|
|
provider_url: '',
|
|
provider_apikey: ''
|
|
});
|
|
setError('');
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleCloseModal = () => {
|
|
setIsModalOpen(false);
|
|
};
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
|
setFormData({
|
|
...formData,
|
|
[e.target.name]: e.target.value
|
|
});
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!formData.provider_title || !formData.provider_url || !formData.provider_apikey) {
|
|
setError('Please fill in all fields.');
|
|
return;
|
|
}
|
|
|
|
setSubmitLoading(true);
|
|
setError('');
|
|
try {
|
|
await apiClient.post('/api/v1/provider', formData);
|
|
await fetchProviders();
|
|
handleCloseModal();
|
|
} catch (err) {
|
|
console.error("Error adding provider", err);
|
|
setError('Failed to add provider. Please check your inputs and try again.');
|
|
} finally {
|
|
setSubmitLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h3 className="text-xl font-semibold text-slate-800">Provider Management</h3>
|
|
<p className="text-sm text-slate-500 mt-1">Configure external AI model providers and API keys.</p>
|
|
</div>
|
|
<button
|
|
onClick={handleOpenModal}
|
|
className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium transition-colors shadow-sm cursor-pointer"
|
|
>
|
|
<Plus size={16} className="mr-2" />
|
|
Add Provider
|
|
</button>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="text-center text-slate-500 py-8">Loading providers...</div>
|
|
) : providers.length === 0 ? (
|
|
<div className="text-center text-slate-500 py-8 bg-white rounded-xl border border-slate-200">
|
|
No providers configured yet. Click "Add Provider" to get started.
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-2 gap-6">
|
|
{providers.map((provider, i) => (
|
|
<div key={i} className="bg-white border border-slate-200 p-5 rounded-xl shadow-sm hover:border-blue-200 transition-colors flex flex-col justify-between">
|
|
<div>
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div className="flex items-center">
|
|
<div className="w-10 h-10 rounded-lg bg-slate-50 border border-slate-100 flex items-center justify-center mr-3">
|
|
<Box size={20} className="text-slate-600" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold text-slate-800">{provider.provider_title}</h4>
|
|
<span className="text-xs text-slate-500 font-mono uppercase">{provider.provider_type}</span>
|
|
</div>
|
|
</div>
|
|
<span className={`flex items-center text-xs font-medium px-2 py-1 rounded-md border ${provider.status === 'Connected' ? 'bg-green-50 text-green-700 border-green-200' : 'bg-slate-50 text-slate-500 border-slate-200'}`}>
|
|
{provider.status === 'Connected' && <span className="w-1.5 h-1.5 rounded-full bg-green-500 mr-1.5"></span>}
|
|
{provider.status || 'Unknown'}
|
|
</span>
|
|
</div>
|
|
<div className="mb-4">
|
|
<p className="text-sm text-slate-600 mb-1">URL / Endpoint:</p>
|
|
<div className="bg-slate-50 border border-slate-100 rounded text-sm px-3 py-1.5 font-mono text-slate-700 truncate" title={provider.provider_url}>
|
|
{provider.provider_url || 'Default'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end space-x-2 mt-2">
|
|
<button className="px-3 py-1.5 text-sm font-medium text-slate-600 bg-white border border-slate-200 rounded hover:bg-slate-50 transition-colors cursor-pointer">Edit</button>
|
|
<button
|
|
onClick={async () => {
|
|
if (!confirm('Are you sure you want to delete this provider?')) return;
|
|
try {
|
|
await apiClient.delete(`/api/v1/provider/${provider.provider_title}`);
|
|
fetchProviders();
|
|
} catch (err) {
|
|
console.error('Failed to delete provider', err);
|
|
alert('Failed to delete provider');
|
|
}
|
|
}}
|
|
className="px-3 py-1.5 text-sm font-medium text-red-600 bg-white border border-slate-200 rounded hover:bg-red-50 transition-colors cursor-pointer"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Add Provider Modal */}
|
|
{isModalOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm transition-opacity">
|
|
<div className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in-95 duration-200">
|
|
<div className="flex justify-between items-center p-5 border-b border-slate-100">
|
|
<h3 className="text-lg font-semibold text-slate-800">Add New Provider</h3>
|
|
<button
|
|
onClick={handleCloseModal}
|
|
className="text-slate-400 hover:text-slate-600 p-1 rounded-md transition-colors cursor-pointer"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
|
{error && (
|
|
<div className="p-3 bg-red-50 text-red-600 text-sm rounded-lg border border-red-100">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1.5">Provider Type</label>
|
|
<select
|
|
name="provider_type"
|
|
value={formData.provider_type}
|
|
onChange={handleChange}
|
|
className="w-full bg-slate-50 border border-slate-200 text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all cursor-pointer"
|
|
>
|
|
<option value="openai">OpenAI</option>
|
|
<option value="deepseek">DeepSeek</option>
|
|
<option value="claude">Claude</option>
|
|
<option value="local">Local</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1.5">Provider Title</label>
|
|
<input
|
|
type="text"
|
|
name="provider_title"
|
|
placeholder="e.g. My OpenAI Instance"
|
|
value={formData.provider_title}
|
|
onChange={handleChange}
|
|
className="w-full bg-white border border-slate-200 text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all placeholder:text-slate-400"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1.5">Base URL</label>
|
|
<input
|
|
type="url"
|
|
name="provider_url"
|
|
placeholder="e.g. https://api.openai.com/v1"
|
|
value={formData.provider_url}
|
|
onChange={handleChange}
|
|
className="w-full bg-white border border-slate-200 text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all placeholder:text-slate-400"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1.5">API Key</label>
|
|
<input
|
|
type="password"
|
|
name="provider_apikey"
|
|
placeholder="sk-..."
|
|
value={formData.provider_apikey}
|
|
onChange={handleChange}
|
|
className="w-full bg-white border border-slate-200 text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all placeholder:text-slate-400 font-mono"
|
|
/>
|
|
</div>
|
|
|
|
<div className="pt-4 flex justify-end space-x-3">
|
|
<button
|
|
type="button"
|
|
onClick={handleCloseModal}
|
|
className="px-4 py-2 text-sm font-medium text-slate-600 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors cursor-pointer"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={submitLoading}
|
|
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors cursor-pointer disabled:opacity-70 flex items-center"
|
|
>
|
|
{submitLoading ? (
|
|
<span className="flex items-center">
|
|
<svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Saving...
|
|
</span>
|
|
) : (
|
|
'Add Provider'
|
|
)}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|