File size: 4,324 Bytes
4840fb6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
import React from 'react';
import KeyIcon from './icons/KeyIcon';
import GoogleIcon from './icons/GoogleIcon';
import OpenAIIcon from './icons/OpenAIIcon';
import AnthropicIcon from './icons/AnthropicIcon';
import { Provider } from '../types';
interface ApiConfigProps {
provider: Provider;
setProvider: (provider: Provider) => void;
apiKeys: { gemini: string; openai: string; anthropic: string; };
setApiKey: (provider: Provider, key: string) => void;
isProcessing: boolean;
}
const ProviderTab: React.FC<{
providerName: Provider;
activeProvider: Provider;
setProvider: (provider: Provider) => void;
isProcessing: boolean;
children: React.ReactNode;
}> = ({ providerName, activeProvider, setProvider, isProcessing, children }) => {
const isActive = providerName === activeProvider;
const activeClasses = 'border-blue-400 text-white bg-gray-700/50';
const inactiveClasses = 'border-transparent text-gray-400 hover:bg-gray-700/30 hover:text-gray-200';
return (
<button
onClick={() => setProvider(providerName)}
disabled={isProcessing}
className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 border-b-2 font-semibold transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-60 ${isActive ? activeClasses : inactiveClasses}`}
role="tab"
aria-selected={isActive}
>
{children}
</button>
);
};
const ApiConfig: React.FC<ApiConfigProps> = ({
provider,
setProvider,
apiKeys,
setApiKey,
isProcessing,
}) => {
const providerDetails = {
gemini: {
name: "Google Gemini",
model: "gemini-2.5-flash-preview-04-17",
url: "https://aistudio.google.com/app/apikey",
urlText: "Google AI Studio",
focusColor: "focus:ring-blue-500 focus:border-blue-500",
},
openai: {
name: "OpenAI",
model: "gpt-4o",
url: "https://platform.openai.com/api-keys",
urlText: "OpenAI Dashboard",
focusColor: "focus:ring-green-500 focus:border-green-500",
},
anthropic: {
name: "Anthropic",
model: "claude-3-sonnet-20240229",
url: "https://console.anthropic.com/settings/keys",
urlText: "Anthropic Console",
focusColor: "focus:ring-purple-500 focus:border-purple-500",
}
};
const currentProvider = providerDetails[provider];
return (
<div className="mb-8">
<h2 className="text-2xl font-semibold mb-4 text-gray-200 flex items-center gap-3">
<KeyIcon className="w-6 h-6" />
AI Provider Configuration
</h2>
<div className="flex border-b border-gray-700 mb-6" role="tablist">
<ProviderTab providerName="gemini" activeProvider={provider} setProvider={setProvider} isProcessing={isProcessing}>
<GoogleIcon className="w-5 h-5" /> Gemini
</ProviderTab>
<ProviderTab providerName="openai" activeProvider={provider} setProvider={setProvider} isProcessing={isProcessing}>
<OpenAIIcon className="w-5 h-5" /> OpenAI
</ProviderTab>
<ProviderTab providerName="anthropic" activeProvider={provider} setProvider={setProvider} isProcessing={isProcessing}>
<AnthropicIcon className="w-5 h-5" /> Anthropic
</ProviderTab>
</div>
<div className="space-y-4">
<div>
<label htmlFor="api-key" className="block text-sm font-medium text-gray-400 mb-1">
{currentProvider.name} API Key
</label>
<input
id="api-key"
type="password"
value={apiKeys[provider]}
onChange={(e) => setApiKey(provider, e.target.value)}
disabled={isProcessing}
placeholder={`Enter your ${currentProvider.name} API Key`}
className={`w-full p-3 bg-gray-900/70 border-2 border-gray-600 rounded-xl text-gray-300 placeholder-gray-500 transition-all duration-200 ${currentProvider.focusColor}`}
/>
<p className="text-xs text-gray-500 mt-1">
Using model: <code className="bg-gray-700 px-1 rounded">{currentProvider.model}</code>. Get your key from <a href={currentProvider.url} target="_blank" rel="noopener noreferrer" className="underline hover:text-blue-400">{currentProvider.urlText}</a>.
</p>
</div>
</div>
</div>
);
};
export default ApiConfig;
|