admtracksteel
97eb42c243
- Added support for Google Gemini, OpenAI, Anthropic, and Azure OpenAI - Implemented API key validation with auto model detection - Added Error Boundary for better error handling - Migrated PDF generation to native jsPDF (better quality) - Added PWA support with offline capabilities - Implemented tests with Vitest - Fixed language consistency (PT-BR) - Improved accessibility (ARIA)
282 lines
13 KiB
TypeScript
282 lines
13 KiB
TypeScript
import React, { useState, useCallback, useEffect } from 'react';
|
|
import { KeyIcon, SaveIcon, TestTubeIcon } from './Icons';
|
|
import { PROVIDERS, type AIProvider } from '../types/providers';
|
|
import { testApiKey, type ModelInfo } from '../services/apiTestService';
|
|
|
|
interface ApiKeySetupProps {
|
|
onKeySave: (key: string, provider: AIProvider, model: string) => void;
|
|
}
|
|
|
|
const isValidApiKey = (key: string): boolean => {
|
|
const trimmedKey = key.trim();
|
|
return trimmedKey.length > 10 && /^[A-Za-z0-9_-]+$/.test(trimmedKey);
|
|
};
|
|
|
|
export const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onKeySave }) => {
|
|
const [localApiKey, setLocalApiKey] = useState('');
|
|
const [endpoint, setEndpoint] = useState('');
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isValid, setIsValid] = useState<boolean | null>(null);
|
|
const [provider, setProvider] = useState<AIProvider>('gemini');
|
|
const [model, setModel] = useState('gemini-2.5-flash');
|
|
const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);
|
|
const [isTesting, setIsTesting] = useState(false);
|
|
const [testStatus, setTestStatus] = useState<'idle' | 'success' | 'error'>('idle');
|
|
|
|
useEffect(() => {
|
|
const savedProvider = localStorage.getItem('ai-provider') as AIProvider;
|
|
if (savedProvider && PROVIDERS.find(p => p.id === savedProvider)) {
|
|
setProvider(savedProvider);
|
|
const savedModel = localStorage.getItem(`model-${savedProvider}`);
|
|
const providerConfig = PROVIDERS.find(p => p.id === savedProvider);
|
|
setModel(savedModel || providerConfig?.defaultModel || '');
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const providerConfig = PROVIDERS.find(p => p.id === provider);
|
|
if (providerConfig && !providerConfig.models.includes(model)) {
|
|
setModel(providerConfig.defaultModel);
|
|
}
|
|
setAvailableModels([]);
|
|
setTestStatus('idle');
|
|
}, [provider, model]);
|
|
|
|
const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = e.target.value;
|
|
setLocalApiKey(value);
|
|
setTestStatus('idle');
|
|
|
|
if (value.trim() === '') {
|
|
setIsValid(null);
|
|
setError(null);
|
|
} else {
|
|
const valid = isValidApiKey(value);
|
|
setIsValid(valid);
|
|
setError(valid ? null : 'A chave de API parece inválida.');
|
|
}
|
|
}, []);
|
|
|
|
const getProviderLink = (provider: AIProvider): string => {
|
|
switch (provider) {
|
|
case 'gemini': return 'https://aistudio.google.com/app/apikey';
|
|
case 'openai': return 'https://platform.openai.com/api-keys';
|
|
case 'anthropic': return 'https://console.anthropic.com/keys';
|
|
case 'azure': return 'https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps';
|
|
default: return '#';
|
|
}
|
|
};
|
|
|
|
const getProviderLabel = (provider: AIProvider): string => {
|
|
switch (provider) {
|
|
case 'gemini': return 'Google Gemini';
|
|
case 'openai': return 'OpenAI';
|
|
case 'anthropic': return 'Anthropic (Claude)';
|
|
case 'azure': return 'Azure OpenAI';
|
|
default: return 'API';
|
|
}
|
|
};
|
|
|
|
const handleTestApi = async () => {
|
|
if (!localApiKey.trim() || !isValidApiKey(localApiKey)) {
|
|
setError('Insira uma chave de API válida para testar.');
|
|
return;
|
|
}
|
|
|
|
setIsTesting(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const result = await testApiKey(provider, localApiKey, endpoint);
|
|
|
|
if (result.success && result.models && result.models.length > 0) {
|
|
setAvailableModels(result.models);
|
|
setModel(result.models[0].id);
|
|
setTestStatus('success');
|
|
setError(null);
|
|
} else {
|
|
setTestStatus('error');
|
|
setError(result.error || 'Falha ao testar API');
|
|
}
|
|
} catch (err) {
|
|
setTestStatus('error');
|
|
setError(err instanceof Error ? err.message : 'Erro ao testar API');
|
|
} finally {
|
|
setIsTesting(false);
|
|
}
|
|
};
|
|
|
|
const handleProviderChange = (newProvider: AIProvider) => {
|
|
setProvider(newProvider);
|
|
const providerConfig = PROVIDERS.find(p => p.id === newProvider);
|
|
setModel(providerConfig?.defaultModel || '');
|
|
setAvailableModels([]);
|
|
setTestStatus('idle');
|
|
};
|
|
|
|
const handleSave = () => {
|
|
if (localApiKey.trim() && isValidApiKey(localApiKey)) {
|
|
onKeySave(localApiKey.trim(), provider, model);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-md mx-auto animate-fade-in pt-10">
|
|
<div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-xl p-6 sm:p-8 rounded-2xl relative overflow-hidden group">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
|
|
<div className="relative z-10">
|
|
<h2 className="text-2xl font-display font-bold text-center mb-3 text-slate-800 dark:text-white">
|
|
Configurar API
|
|
</h2>
|
|
<p className="text-sm text-slate-500 dark:text-slate-400 text-center mb-6">
|
|
Selecione o provedor e insira sua chave de API.
|
|
</p>
|
|
|
|
<div className="space-y-5">
|
|
{/* Provider Selector */}
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">
|
|
Provedor de IA
|
|
</label>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{PROVIDERS.map((p) => (
|
|
<button
|
|
key={p.id}
|
|
type="button"
|
|
onClick={() => handleProviderChange(p.id)}
|
|
className={`px-3 py-2 rounded-lg text-sm font-medium transition-all border
|
|
${provider === p.id
|
|
? 'bg-blue-500 text-white border-blue-500'
|
|
: 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-600 hover:border-blue-400'
|
|
}`}
|
|
>
|
|
{p.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Azure Endpoint (only show if Azure is selected) */}
|
|
{provider === 'azure' && (
|
|
<div>
|
|
<label htmlFor="azure-endpoint" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
|
Endpoint do Azure
|
|
</label>
|
|
<input
|
|
type="url"
|
|
id="azure-endpoint"
|
|
className="block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 px-4 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
|
|
placeholder="https://seu-resource.openai.azure.com"
|
|
value={endpoint}
|
|
onChange={(e) => setEndpoint(e.target.value)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* API Key Input */}
|
|
<div>
|
|
<label htmlFor="api-key-setup" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
|
Chave de API ({getProviderLabel(provider)})
|
|
</label>
|
|
<div className="relative">
|
|
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
|
<KeyIcon className="h-5 w-5 text-slate-400" />
|
|
</div>
|
|
<input
|
|
type="password"
|
|
id="api-key-setup"
|
|
className={`block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 pl-10 pr-24 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm transition-all
|
|
${isValid === false ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
|
|
${testStatus === 'success' ? 'border-green-500 focus:border-green-500 focus:ring-green-500' : ''}`}
|
|
placeholder="Cole sua chave aqui"
|
|
value={localApiKey}
|
|
onChange={handleChange}
|
|
onKeyDown={(e) => e.key === 'Enter' && handleTestApi()}
|
|
autoComplete="off"
|
|
/>
|
|
<div className="absolute inset-y-0 right-0 flex items-center pr-2">
|
|
<button
|
|
type="button"
|
|
onClick={handleTestApi}
|
|
disabled={isTesting || !localApiKey.trim()}
|
|
className={`flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium transition-all
|
|
${testStatus === 'success'
|
|
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
|
: testStatus === 'error'
|
|
? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
|
: 'bg-slate-200 dark:bg-slate-600 text-slate-600 dark:text-slate-300 hover:bg-blue-500 hover:text-white'
|
|
} disabled:opacity-50 disabled:cursor-not-allowed`}
|
|
>
|
|
{isTesting ? (
|
|
<span className="w-3 h-3 border-2 border-current border-t-transparent rounded-full animate-spin"></span>
|
|
) : testStatus === 'success' ? (
|
|
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
) : (
|
|
<TestTubeIcon className="w-3 h-3" />
|
|
)}
|
|
<span>{isTesting ? 'Testando...' : testStatus === 'success' ? 'OK' : 'Testar'}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{error && (
|
|
<p className="mt-2 text-xs text-red-600 dark:text-red-400" role="alert">
|
|
{error}
|
|
</p>
|
|
)}
|
|
<p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
|
|
Não tem uma chave? <a href={getProviderLink(provider)} target="_blank" rel="noopener noreferrer" className="font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 hover:underline">Obtenha aqui</a>.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Model Selector */}
|
|
<div>
|
|
<label htmlFor="model-selector" className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">
|
|
Modelo{availableModels.length > 0 && <span className="text-green-600 ml-1">(detectado automaticamente)</span>}
|
|
</label>
|
|
{availableModels.length > 0 ? (
|
|
<select
|
|
id="model-selector"
|
|
value={model}
|
|
onChange={(e) => setModel(e.target.value)}
|
|
className="block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 px-4 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
|
|
>
|
|
{availableModels.map((m) => (
|
|
<option key={m.id} value={m.id}>{m.name}</option>
|
|
))}
|
|
</select>
|
|
) : (
|
|
<select
|
|
id="model-selector"
|
|
value={model}
|
|
onChange={(e) => setModel(e.target.value)}
|
|
className="block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 px-4 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
|
|
>
|
|
{PROVIDERS.find(p => p.id === provider)?.models.map((m) => (
|
|
<option key={m} value={m}>{m}</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
{testStatus === 'success' && availableModels.length > 0 && (
|
|
<p className="mt-2 text-xs text-green-600 dark:text-green-400">
|
|
✓ {availableModels.length} modelos disponíveis detectados
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={!localApiKey.trim() || isValid === false}
|
|
className="w-full flex justify-center items-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg hover:shadow-blue-500/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 transform active:scale-[0.98]"
|
|
>
|
|
<SaveIcon className="h-5 w-5" />
|
|
<span>Salvar e Continuar</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |