File size: 2,911 Bytes
131da12 c622774 131da12 c622774 131da12 c622774 131da12 c622774 131da12 c622774 131da12 | 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 | import React, { useState } from 'react';
import { Eye, EyeOff, Key, RefreshCw } from 'lucide-react';
export default function Settings({
apiKey,
setApiKey,
backendStatus,
checkBackendStatus
}) {
const [showKey, setShowKey] = useState(false);
return (
<div className="settings-drawer">
<div className="settings-group">
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<Key size={16} color="var(--primary)" />
Gemini API Key
</label>
<span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>
Saved locally in your browser
</span>
</div>
<div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
<input
type={showKey ? 'text' : 'password'}
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
placeholder={backendStatus.gemini_api_key_configured ? "Using backend environment variable" : "Enter your GEMINI_API_KEY..."}
style={{ width: '100%', paddingRight: '2.5rem' }}
/>
<button
type="button"
onClick={() => setShowKey(!showKey)}
style={{
position: 'absolute',
right: '10px',
background: 'none',
border: 'none',
color: 'var(--text-secondary)',
cursor: 'pointer',
display: 'flex',
alignItems: 'center'
}}
>
{showKey ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
</div>
<div style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
borderTop: '1px solid var(--border-color)',
paddingTop: '1rem',
marginTop: '0.5rem'
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Gemini Connection:</span>
<span className={`status-badge`} style={{ padding: '0.2rem 0.6rem' }}>
<span className={`status-dot ${backendStatus.gemini_api_key_configured || apiKey ? 'ready' : 'loading'}`}></span>
<span style={{ marginLeft: '4px', fontSize: '0.8rem' }}>
{backendStatus.gemini_api_key_configured || apiKey ? 'Configured' : 'Missing API Key'}
</span>
</span>
</div>
<button
onClick={checkBackendStatus}
className="settings-toggle-btn"
style={{ padding: '0.35rem 0.75rem' }}
title="Refresh connection status"
>
<RefreshCw size={14} />
Refresh
</button>
</div>
</div>
);
}
|