Spaces:
Sleeping
Sleeping
File size: 2,085 Bytes
71a564a eb63144 71a564a eb63144 71a564a eb63144 71a564a | 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 | import React from "react";
import { X } from "lucide-react";
const SettingsModal = ({ onClose, apiKey, onApiKeyChange, llmProvider, onProviderChange, onSave }) => {
return (
<div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/10 backdrop-blur-sm animate-in fade-in">
<div className="bg-white p-6 shadow-xl border border-[#333] w-full max-w-md relative">
<button onClick={onClose} className="absolute top-2 right-2">
<X className="w-4 h-4" />
</button>
<h3 className="font-bold uppercase tracking-widest mb-4 text-[#b392ac]">Configuration</h3>
<div className="space-y-4">
<div>
<label className="block text-xs font-bold text-gray-500 mb-1">LLM Provider</label>
<select
value={llmProvider}
onChange={(e) => onProviderChange(e.target.value)}
className="w-full border p-2 text-sm outline-none focus:border-[#b392ac] bg-white"
>
<option value="openai">OpenAI (GPT-3.5/4)</option>
<option value="groq">Groq (Llama3 - Free/Fast)</option>
<option value="ollama">Ollama (Local)</option>
</select>
</div>
<div>
<label className="block text-xs font-bold text-gray-500 mb-1">API Key (OpenAI / Groq)</label>
<input
type="password"
className="w-full border p-2 text-sm outline-none focus:border-[#b392ac]"
placeholder="sk-..."
value={apiKey}
onChange={(e) => onApiKeyChange(e.target.value)}
/>
<p className="text-[9px] text-gray-400 mt-1">
Required for OpenAI or Groq. Stored locally.
</p>
</div>
<button
onClick={onSave}
className="w-full px-4 py-2 text-sm font-bold transition-all bg-[#b392ac] text-white hover:bg-[#9d7799]"
>
Save Settings
</button>
</div>
</div>
</div>
);
};
export default SettingsModal;
|