78 lines
2.9 KiB
TypeScript
78 lines
2.9 KiB
TypeScript
import { useState } from "react";
|
|
import { useStore } from "../state/store";
|
|
import { ConnectionForm } from "./ConnectionForm";
|
|
import { DerezLogoLink } from "./DerezLogo";
|
|
import { EditIcon, TrashIcon } from "./Icons";
|
|
|
|
export function ConfigScreen() {
|
|
const config = useStore((s) => s.config);
|
|
const saveConnection = useStore((s) => s.saveConnection);
|
|
const removeConnection = useStore((s) => s.removeConnection);
|
|
const setActiveConnection = useStore((s) => s.setActiveConnection);
|
|
|
|
const [editingId, setEditingId] = useState<string | null>(null);
|
|
|
|
return (
|
|
<div className="screen">
|
|
<div className="card">
|
|
<div style={{ marginBottom: 18 }}>
|
|
<DerezLogoLink height={30} />
|
|
</div>
|
|
<h1>Connect to your Hermes</h1>
|
|
<p className="lead">
|
|
Point this app at your Hermes <strong>API Server</strong> (the OpenAI-compatible endpoint),
|
|
not the dashboard. It authenticates with your <code>API_SERVER_KEY</code>.
|
|
</p>
|
|
|
|
<ConnectionForm onSave={saveConnection} />
|
|
|
|
{config.connections.length > 0 && (
|
|
<div className="section" style={{ marginTop: 24, marginBottom: 0 }}>
|
|
<h3>Saved connections</h3>
|
|
{config.connections.map((c) => (
|
|
<div key={c.id}>
|
|
<div className="kv">
|
|
<span
|
|
className="link-btn"
|
|
style={{ cursor: "pointer" }}
|
|
onClick={() => setActiveConnection(c.id)}
|
|
>
|
|
{c.name}
|
|
{c.profile ? ` · ${c.profile}` : ""}
|
|
</span>
|
|
<span style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
|
{c.sameOrigin ? "same origin" : c.baseUrl}
|
|
<button
|
|
className={`icon-btn ${editingId === c.id ? "active" : ""}`}
|
|
title="Edit"
|
|
onClick={() => setEditingId(editingId === c.id ? null : c.id)}
|
|
>
|
|
<EditIcon width={15} height={15} />
|
|
</button>
|
|
<button className="icon-btn" title="Remove" onClick={() => removeConnection(c.id)}>
|
|
<TrashIcon width={15} height={15} />
|
|
</button>
|
|
</span>
|
|
</div>
|
|
{editingId === c.id && (
|
|
<div style={{ margin: "10px 0 18px" }}>
|
|
<ConnectionForm
|
|
initial={c}
|
|
onSave={async (conn) => {
|
|
await saveConnection(conn);
|
|
setEditingId(null);
|
|
}}
|
|
onCancel={() => setEditingId(null)}
|
|
saveLabel="Save changes"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|