Hermes Agent
55 lines
2.5 KiB
TypeScript
55 lines
2.5 KiB
TypeScript
import { FormEvent, useState } from 'react';
|
|
import { KeyRound, Link, PlugZap, Save } from 'lucide-react';
|
|
import { useCompanion } from '../../api/CompanionContext.js';
|
|
import { CompanionClient, DEFAULT_COMPANION_URL } from '../../api/companionClient.js';
|
|
|
|
export function SettingsScreen() {
|
|
const { client, settings, updateSettings } = useCompanion();
|
|
const [baseUrl, setBaseUrl] = useState(settings.baseUrl);
|
|
const [accessKey, setAccessKey] = useState(settings.accessKey);
|
|
const [status, setStatus] = useState('Run companion setup, paste the access key, then test the connection.');
|
|
|
|
function save(event: FormEvent<HTMLFormElement>): void {
|
|
event.preventDefault();
|
|
updateSettings({ baseUrl: baseUrl || DEFAULT_COMPANION_URL, accessKey });
|
|
setStatus('Settings saved.');
|
|
}
|
|
|
|
async function testConnection(): Promise<void> {
|
|
updateSettings({ baseUrl: baseUrl || DEFAULT_COMPANION_URL, accessKey });
|
|
setStatus('Testing connection…');
|
|
|
|
try {
|
|
const testClient = new CompanionClient({ baseUrl: baseUrl || DEFAULT_COMPANION_URL, accessKey });
|
|
await testClient.health();
|
|
const response = await testClient.validate();
|
|
setStatus(response.message);
|
|
} catch (caughtError) {
|
|
setStatus(caughtError instanceof Error ? caughtError.message : 'Connection failed');
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className="screen stack-screen settings-screen">
|
|
<article className="quest-card quest-card--compact quest-card--green">
|
|
<div className="quest-orb quest-orb--green"><PlugZap size={32} strokeWidth={3} /></div>
|
|
<div>
|
|
<p className="eyebrow">Nest setup</p>
|
|
<h2>Pair your companion</h2>
|
|
<p>{status}</p>
|
|
</div>
|
|
</article>
|
|
<form className="settings-card" onSubmit={save}>
|
|
<label htmlFor="server-url"><Link size={18} /> Companion server URL</label>
|
|
<input id="server-url" onChange={(event) => setBaseUrl(event.target.value)} placeholder={DEFAULT_COMPANION_URL} type="url" value={baseUrl} />
|
|
<label htmlFor="access-key"><KeyRound size={18} /> Access key</label>
|
|
<input id="access-key" onChange={(event) => setAccessKey(event.target.value)} placeholder="hm_…" type="password" value={accessKey} />
|
|
<div className="button-row">
|
|
<button className="secondary-button" type="submit"><Save size={18} /> Save</button>
|
|
<button className="primary-button" onClick={() => void testConnection()} type="button">Test <PlugZap size={19} /></button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
);
|
|
}
|