File size: 6,122 Bytes
342595c | 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 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | import { useState, useEffect } from "react";
export default function SettingsModal({ isOpen, onClose, onSave }) {
const [geminiKey, setGeminiKey] = useState("");
const [openaiKey, setOpenaiKey] = useState("");
const [activeTab, setActiveTab] = useState("gemini");
const [saved, setSaved] = useState(false);
// Load keys from localStorage on mount
useEffect(() => {
const stored = localStorage.getItem("gemini_api_key") || "";
setGeminiKey(stored);
}, [isOpen]);
const handleSave = () => {
localStorage.setItem("gemini_api_key", geminiKey);
setSaved(true);
onSave(geminiKey);
setTimeout(() => setSaved(false), 2000);
};
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50 flex items-center justify-center p-4">
<div className="bg-surface rounded-2xl shadow-2xl w-full max-w-md border border-outline-variant/30">
{/* Header */}
<div className="px-6 py-4 border-b border-outline-variant/30 flex justify-between items-center">
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-primary text-xl">settings</span>
<h2 className="text-lg font-bold text-primary">Settings</h2>
</div>
<button
onClick={onClose}
className="text-on-surface-variant hover:text-on-surface p-1 rounded-full hover:bg-surface-container transition-colors"
>
<span className="material-symbols-outlined">close</span>
</button>
</div>
{/* Tabs */}
<div className="flex border-b border-outline-variant/30">
<button
onClick={() => setActiveTab("gemini")}
className={`flex-1 px-4 py-3 text-sm font-semibold transition-colors ${
activeTab === "gemini"
? "text-primary border-b-2 border-primary"
: "text-on-surface-variant hover:text-on-surface"
}`}
>
Gemini API
</button>
<button
onClick={() => setActiveTab("about")}
className={`flex-1 px-4 py-3 text-sm font-semibold transition-colors ${
activeTab === "about"
? "text-primary border-b-2 border-primary"
: "text-on-surface-variant hover:text-on-surface"
}`}
>
About
</button>
</div>
{/* Content */}
<div className="px-6 py-6">
{activeTab === "gemini" && (
<div className="space-y-4">
<div>
<label className="block text-sm font-semibold text-primary mb-2">
Gemini API Key
</label>
<input
type="password"
value={geminiKey}
onChange={(e) => setGeminiKey(e.target.value)}
placeholder="Enter your Gemini API key (e.g., AIza...)"
className="w-full px-3 py-2 bg-surface-container border border-outline-variant rounded-lg text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30 transition-colors"
/>
<p className="text-xs text-on-surface-variant mt-2">
Get your free API key from{" "}
<a
href="https://makersuite.google.com/app/apikey"
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:underline font-semibold"
>
Google AI Studio
</a>
</p>
</div>
<div className="bg-secondary-container/30 border border-secondary-container/50 rounded-lg p-3">
<p className="text-xs text-on-surface-variant leading-relaxed">
<span className="font-semibold text-primary">💡 Tip:</span> Adding your Gemini API key enables AI-powered response synthesis. Your key is stored locally in your browser and never sent to our servers.
</p>
</div>
<button
onClick={handleSave}
className="w-full bg-primary text-on-primary hover:bg-primary-container hover:text-on-primary-container font-semibold py-2 rounded-lg transition-all flex items-center justify-center gap-2"
>
<span className="material-symbols-outlined text-base">
{saved ? "check_circle" : "save"}
</span>
{saved ? "Saved!" : "Save API Key"}
</button>
</div>
)}
{activeTab === "about" && (
<div className="space-y-3 text-sm text-on-surface-variant">
<div>
<h3 className="font-semibold text-primary mb-1">Oracle of Librio</h3>
<p className="text-xs">
An intelligent RAG (Retrieval-Augmented Generation) system for banking document analysis.
</p>
</div>
<div>
<h3 className="font-semibold text-primary mb-1">How It Works</h3>
<p className="text-xs">
1. Upload documents (CSV, XLSX, PDF, etc.)
<br />
2. System indexes them into ChromaDB vector database
<br />
3. Ask questions and get AI-synthesized answers with citations
</p>
</div>
<div>
<h3 className="font-semibold text-primary mb-1">Privacy</h3>
<p className="text-xs">
Your documents and API keys are stored locally. No data is sent to external servers unless you enable LLM synthesis.
</p>
</div>
</div>
)}
</div>
</div>
</div>
);
}
|