SettingsPanel.tsx

src/components/SettingsPanel.tsx

1. import { useState } from 'react'
3. import type { Preset } from '../ipc/gen/Preset'
4. import type { Provider } from '../ipc/gen/Provider'
5. import type { Settings } from '../ipc/gen/Settings'
6. import { isMac } from '../lib/theme'
7. import { useStore } from '../state/store'
9. const LOCAL_PRESETS: [string, string][] = [
10. ['Ollama', 'http://localhost:11434/v1'],
11. ['LM Studio', 'http://localhost:1234/v1'],
12. ['llama.cpp', 'http://localhost:8080/v1'],
13. ]
15. /** A key press as a global-shortcut string, e.g. "CommandOrControl+Shift+Space". */
16. export function shortcutFrom(
17. e: { metaKey: boolean; ctrlKey: boolean; altKey: boolean; shiftKey: boolean; code: string },
18. mac = isMac,
19. ): string | null {
20. const parts: string[] = []
21. if (mac ? e.metaKey : e.ctrlKey) parts.push('CommandOrControl')
22. if (mac && e.ctrlKey) parts.push('Control')
23. if (e.altKey) parts.push('Alt')
24. if (e.shiftKey) parts.push('Shift')
25. const code = e.code
26. let key: string | null = null
27. if (/^Key[A-Z]$/.test(code)) key = code.slice(3)
28. else if (/^Digit\d$/.test(code)) key = code.slice(5)
29. else if (/^F\d{1,2}$/.test(code)) key = code
30. else if (['Space', 'Enter', 'Tab', 'Backquote', 'Slash', 'Period', 'Comma', 'Semicolon'].includes(code)) key = code
31. if (!key || parts.length === 0) return null
32. return [...parts, key].join('+')
33. }
35. export function prettyShortcut(s: string, mac = isMac): string {
36. return s
37. .split('+')
38. .map((p) =>
39. p === 'CommandOrControl'
40. ? mac
41. ? '⌘'
42. : 'Ctrl'
43. : p === 'Shift'
44. ? mac
45. ? '⇧'
46. : 'Shift'
47. : p === 'Alt'
48. ? mac
49. ? '⌥'
50. : 'Alt'
51. : p === 'Control'
52. ? '⌃'
53. : p,
54. )
55. .join(mac ? '' : '+')
56. }
58. function KeyField({ provider }: { provider: Provider }) {
59. const client = useStore((s) => s.client)
60. const has = useStore((s) => s.keys[provider.id])
61. const refreshProviders = useStore((s) => s.refreshProviders)
62. const refreshModels = useStore((s) => s.refreshModels)
63. const toast = useStore((s) => s.toast)
64. const [key, setKey] = useState('')
65. const [busy, setBusy] = useState(false)
66. const save = async () => {
67. if (!key.trim() || busy) return
68. setBusy(true)
69. try {
70. // The key is checked with the provider before it is stored; a refused
71. // key throws and is not stored.
72. const saved = await client?.setApiKey(provider.id, key)
73. setKey('')
74. await refreshProviders()
75. if (saved && !saved.accepted) {
76. toast(`Key saved, but it could not be checked: ${saved.detail ?? 'no reply'}`, 'error')
77. } else {
78. toast(`Key saved. ${provider.name} accepted it.`)
79. void refreshModels(provider.id, true)
80. }
81. } catch (err) {
82. toast(String(err).replace(/^Error: /, ''), 'error')
83. } finally {
84. setBusy(false)
85. }
86. }
87. return (
88. <form
89. className="field"
90. onSubmit={(e) => {
91. e.preventDefault()
92. void save()
93. }}
94. >
95. <label htmlFor={`key-${provider.id}`}>API key</label>
96. <div className="row">
97. <input
98. id={`key-${provider.id}`}
99. type="password"
100. autoComplete="off"
101. spellCheck={false}
102. placeholder={has ? 'Saved in your keychain' : 'Paste a key'}
103. value={key}
104. onChange={(e) => setKey(e.target.value)}
105. data-testid="api-key"
106. />
107. <button type="submit" className="primary" disabled={!key.trim() || busy}>
108. {busy ? 'Saving...' : 'Save'}
109. </button>
110. {has && (
111. <button
112. type="button"
113. className="ghost"
114. onClick={async () => {
115. await client?.clearApiKey(provider.id)
116. await refreshProviders()
117. }}
118. >
119. Remove
120. </button>
121. )}
122. </div>
123. <p className="hint">
124. {has ? 'A key is saved. ' : ''}Stored in the {isMac ? 'macOS Keychain' : 'system keychain'}. The interface can
125. replace or remove it, never read it.
126. </p>
127. </form>
128. )
129. }
131. function LocalProviders() {
132. const providers = useStore((s) => s.providers)
133. const models = useStore((s) => s.models)
134. const client = useStore((s) => s.client)
135. const refreshProviders = useStore((s) => s.refreshProviders)
136. const refreshModels = useStore((s) => s.refreshModels)
137. const toast = useStore((s) => s.toast)
138. const [name, setName] = useState('')
139. const [url, setUrl] = useState('')
140. const locals = providers.filter((p) => p.kind !== 'deepinfra')
141. const add = async () => {
142. try {
143. const p = await client!.saveProvider({
144. id: '',
145. kind: 'openai_compatible',
146. name: name.trim() || 'Local',
147. base_url: url.trim(),
148. requires_key: false,
149. })
150. setName('')
151. setUrl('')
152. await refreshProviders()
153. await refreshModels(p.id, true)
154. } catch (err) {
155. toast(String(err), 'error')
156. }
157. }
158. return (
159. <>
160. {locals.map((p) => (
161. <div className="provider-row glass-tint" key={p.id}>
162. <div>
163. <strong>{p.name}</strong>
164. <div className="muted small mono">{p.base_url}</div>
165. <div className="muted small">{models[p.id]?.models.length ?? 0} models, free</div>
166. </div>
167. <div className="row">
168. <button className="ghost small" onClick={() => void refreshModels(p.id, true)}>
169. Refresh
170. </button>
171. <button
172. className="ghost small danger"
173. onClick={async () => {
174. await client?.deleteProvider(p.id)
175. await refreshProviders()
176. }}
177. >
178. Remove
179. </button>
180. </div>
181. </div>
182. ))}
183. <div className="field">
184. <label>Add a local server</label>
185. <div className="row wrap">
186. {LOCAL_PRESETS.map(([n, u]) => (
187. <button
188. key={n}
189. className="pill"
190. onClick={() => {
191. setName(n)
192. setUrl(u)
193. }}
194. >
195. {n}
196. </button>
197. ))}
198. </div>
199. <div className="row">
200. <input placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} aria-label="Server name" />
201. <input
202. className="grow mono"
203. placeholder="http://localhost:11434/v1"
204. value={url}
205. onChange={(e) => setUrl(e.target.value)}
206. aria-label="Base URL"
207. />
208. <button className="primary" disabled={!url.trim()} onClick={() => void add()}>
209. Add
210. </button>
211. </div>
212. <p className="hint">
213. Any OpenAI-compatible server. Local models cost nothing; their token counts are estimated when the server
214. reports none.
215. </p>
216. </div>
217. </>
218. )
219. }
221. function Presets() {
222. const presets = useStore((s) => s.presets)
223. const client = useStore((s) => s.client)
224. const toast = useStore((s) => s.toast)
225. const [edit, setEdit] = useState<Preset | null>(null)
226. const reload = async () => useStore.setState({ presets: await client!.listPresets() })
227. const blank: Preset = {
228. id: '',
229. name: '',
230. system_prompt: '',
231. provider_id: null,
232. model_id: null,
233. temperature: null,
234. max_tokens: null,
235. }
236. return (
237. <>
238. <ul className="preset-list">
239. {presets.map((p) => (
240. <li key={p.id} className="glass-tint">
241. <div>
242. <strong>{p.name}</strong>
243. <div className="muted small clamp">{p.system_prompt}</div>
244. </div>
245. <div className="row">
246. <button className="ghost small" onClick={() => setEdit(p)}>
247. Edit
248. </button>
249. <button
250. className="ghost small danger"
251. onClick={async () => {
252. await client?.deletePreset(p.id)
253. await reload()
254. }}
255. >
256. Delete
257. </button>
258. </div>
259. </li>
260. ))}
261. </ul>
262. {edit ? (
263. <div className="field">
264. <input
265. placeholder="Preset name"
266. value={edit.name}
267. onChange={(e) => setEdit({ ...edit, name: e.target.value })}
268. aria-label="Preset name"
269. />
270. <textarea
271. rows={4}
272. placeholder="System prompt"
273. value={edit.system_prompt}
274. onChange={(e) => setEdit({ ...edit, system_prompt: e.target.value })}
275. aria-label="System prompt"
276. />
277. <div className="row">
278. <label className="inline">
279. Temperature
280. <input
281. type="number"
282. min={0}
283. max={2}
284. step={0.1}
285. value={edit.temperature ?? ''}
286. onChange={(e) =>
287. setEdit({ ...edit, temperature: e.target.value === '' ? null : Number(e.target.value) })
288. }
289. />
290. </label>
291. <span className="grow" />
292. <button className="ghost" onClick={() => setEdit(null)}>
293. Cancel
294. </button>
295. <button
296. className="primary"
297. onClick={async () => {
298. try {
299. await client!.savePreset(edit)
300. setEdit(null)
301. await reload()
302. } catch (err) {
303. toast(String(err), 'error')
304. }
305. }}
306. >
307. Save preset
308. </button>
309. </div>
310. </div>
311. ) : (
312. <button className="ghost" onClick={() => setEdit(blank)}>
313. New preset
314. </button>
315. )}
316. </>
317. )
318. }
320. export function SettingsPanel() {
321. const settings = useStore((s) => s.settings)
322. const saveSettings = useStore((s) => s.saveSettings)
323. const providers = useStore((s) => s.providers)
324. const models = useStore((s) => s.models)
325. const info = useStore((s) => s.info)
326. const client = useStore((s) => s.client)
327. const setPanel = useStore((s) => s.setPanel)
328. const [recording, setRecording] = useState(false)
329. if (!settings) return null
330. const put = (patch: Partial<Settings>) => void saveSettings({ ...settings, ...patch })
331. const di = providers.find((p) => p.kind === 'deepinfra')
332. const allModels = providers.flatMap((p) => (models[p.id]?.models ?? []).map((m) => ({ p, m })))
333. const modelSelect = (
334. providerKey: 'default_provider_id' | 'quick_provider_id',
335. modelKey: 'default_model_id' | 'quick_model_id',
336. label: string,
337. ) => (
338. <label className="field">
339. {label}
340. <select
341. value={`${settings[providerKey]}::${settings[modelKey]}`}
342. onChange={(e) => {
343. const [pid, ...rest] = e.target.value.split('::')
344. put({ [providerKey]: pid, [modelKey]: rest.join('::') } as Partial<Settings>)
345. }}
346. >
347. {!allModels.some(({ p, m }) => p.id === settings[providerKey] && m.id === settings[modelKey]) && (
348. <option value={`${settings[providerKey]}::${settings[modelKey]}`}>{settings[modelKey] || 'Choose'}</option>
349. )}
350. {allModels.map(({ p, m }) => (
351. <option key={`${p.id}::${m.id}`} value={`${p.id}::${m.id}`}>
352. {m.id}
353. {p.kind !== 'deepinfra' ? ` (${p.name})` : ''}
354. </option>
355. ))}
356. </select>
357. </label>
358. )
360. return (
361. <div className="overlay" onMouseDown={(e) => e.target === e.currentTarget && setPanel(null)}>
362. <div className="sheet glass-strong" role="dialog" aria-label="Settings">
363. <header className="sheet-head">
364. <h2>Settings</h2>
365. <button className="ghost" onClick={() => setPanel(null)}>
366. Done
367. </button>
368. </header>
369. <div className="sheet-body settings">
370. <section>
371. <h3>DeepInfra</h3>
372. {di && <KeyField provider={di} />}
373. </section>
374. <section>
375. <h3>Local servers</h3>
376. <LocalProviders />
377. </section>
378. <section>
379. <h3>Models</h3>
380. {modelSelect('default_provider_id', 'default_model_id', 'New chats use')}
381. {modelSelect('quick_provider_id', 'quick_model_id', 'The quick prompt uses')}
382. </section>
383. <section>
384. <h3>Spending</h3>
385. <label className="field">
386. Monthly budget (USD)
387. <input
388. type="number"
389. min={0}
390. step={1}
391. value={settings.monthly_budget_usd ?? ''}
392. placeholder="No budget"
393. onChange={(e) => put({ monthly_budget_usd: e.target.value === '' ? null : Number(e.target.value) })}
394. />
395. </label>
396. <label className="check">
397. <input
398. type="checkbox"
399. checked={settings.confirm_over_budget}
400. onChange={(e) => put({ confirm_over_budget: e.target.checked })}
401. />
402. Ask before sending once the budget is spent
403. </label>
404. <p className="hint">Cortex warns at 80% and at 100%. It never blocks a send on its own.</p>
405. </section>
406. <section>
407. <h3>Quick prompt</h3>
408. <div className="field">
409. Shortcut
410. <div className="row">
411. <button
412. className={`shortcut ${recording ? 'recording' : ''}`}
413. onClick={() => setRecording(true)}
414. onBlur={() => setRecording(false)}
415. onKeyDown={(e) => {
416. if (!recording) return
417. e.preventDefault()
418. if (e.key === 'Escape') return setRecording(false)
419. const s = shortcutFrom(e)
420. if (s) {
421. setRecording(false)
422. put({ shortcut: s })
423. }
424. }}
425. data-testid="shortcut"
426. >
427. {recording ? 'Press the new shortcut' : prettyShortcut(settings.shortcut)}
428. </button>
429. </div>
430. </div>
431. </section>
432. <section>
433. <h3>Export</h3>
434. <div className="field">
435. Vault folder
436. <div className="row">
437. <span className="path mono grow">
438. {settings.vault_dir ?? 'Not set; you will be asked on the first export'}
439. </span>
440. <button
441. className="ghost"
442. onClick={async () => {
443. const d = await client?.chooseVaultFolder()
444. if (d) put({ vault_dir: d })
445. }}
446. >
447. Choose...
448. </button>
449. </div>
450. </div>
451. <label className="field">
452. Images in exported notes
453. <select value={settings.image_links} onChange={(e) => put({ image_links: e.target.value })}>
454. <option value="wiki">Obsidian embeds: ![[image.png]]</option>
455. <option value="markdown">Markdown links: ![image](attachments/image.png)</option>
456. </select>
457. </label>
458. </section>
459. <section>
460. <h3>Appearance</h3>
461. <div className="filters" role="radiogroup" aria-label="Theme">
462. {(['system', 'light', 'dark'] as const).map((t) => (
463. <button
464. key={t}
465. role="radio"
466. aria-checked={settings.theme === t}
467. className={`pill ${settings.theme === t ? 'on' : ''}`}
468. onClick={() => put({ theme: t })}
469. >
470. {t[0].toUpperCase() + t.slice(1)}
471. </button>
472. ))}
473. </div>
474. <label className="check">
475. <input
476. type="checkbox"
477. checked={settings.reduce_transparency}
478. onChange={(e) => put({ reduce_transparency: e.target.checked })}
479. />
480. Reduce transparency (solid panels)
481. </label>
482. {info?.vibrancy && !settings.reduce_transparency && (
483. <>
484. <label className="field">
485. Window material
486. <select
487. data-testid="material"
488. value={settings.material}
489. onChange={(e) => put({ material: e.target.value })}
490. >
491. <option value="sidebar">Sidebar (default)</option>
492. <option value="window">Window background</option>
493. <option value="fullscreen">Full-screen UI</option>
494. <option value="hud">HUD (always dark)</option>
495. </select>
496. </label>
497. <label className="field">
498. Panel tint: {settings.glass_tint}%
499. <input
500. data-testid="glass-tint"
501. type="range"
502. min={0}
503. max={100}
504. step={5}
505. value={settings.glass_tint}
506. onChange={(e) => put({ glass_tint: Number(e.target.value) })}
507. />
508. </label>
509. <p className="muted small">macOS sets the blur for each material; lower tint lets more of it show.</p>
510. </>
511. )}
512. <label className="check">
513. <input
514. type="checkbox"
515. checked={settings.send_on_enter}
516. onChange={(e) => put({ send_on_enter: e.target.checked })}
517. />
518. Enter sends; Shift+Enter for a new line
519. </label>
520. </section>
521. <section>
522. <h3>Presets</h3>
523. <Presets />
524. </section>
525. <section>
526. <h3>About</h3>
527. <p className="muted small">
528. Cortex {info?.version}. Chats are stored on this computer only, in{' '}
529. <span className="mono">{info?.data_dir}</span>. No telemetry.
530. </p>
531. </section>
532. </div>
533. </div>
534. </div>
535. )
536. }