Add user defined system message

This commit is contained in:
dwrz
2026-05-28 00:53:08 +00:00
parent a06833bb8b
commit 9ea4005e96
26 changed files with 652 additions and 222 deletions

View File

@@ -2,5 +2,6 @@
<body>
{{ template "main" . }}
{{ template "templates" . }}
{{ template "modal/settings" . }}
</body>
{{ end }}

View File

@@ -1,5 +1,14 @@
{{ define "footer/toolbar" }}
<div class="footer__toolbar">
<button
type="button"
class="footer__toolbar-btn"
id="settings"
aria-label="Settings"
>
<svg class="icon"><use href="/static/icons.svg#settings"></use></svg>
</button>
<div class="footer__toolbar-spacer"></div>
<button
type="button"
class="footer__toolbar-btn"
@@ -8,17 +17,6 @@
>
<svg class="icon"><use href="/static/icons.svg#reset"></use></svg>
</button>
<div class="footer__toolbar-spacer"></div>
<select id="model" class="footer__select" aria-label="Model">
<option value="" disabled selected>
Loading...
</option>
</select>
<select id="voice" class="footer__select" aria-label="Voice">
<option value="" disabled selected>
Loading...
</option>
</select>
<button
type="button"
class="footer__toolbar-btn"

View File

@@ -0,0 +1,83 @@
{{ define "modal/settings" }}
<div class="settings-overlay" id="settings-overlay">
<div class="settings-panel" role="dialog" aria-modal="true"
aria-labelledby="settings-title">
<div class="settings-panel__header">
<h2 class="settings-panel__title" id="settings-title">Settings</h2>
<button
type="button"
class="footer__toolbar-btn"
id="settings-close"
aria-label="Close settings"
>
<svg class="icon"><use href="/static/icons.svg#close"></use></svg>
</button>
</div>
<div class="settings-tabs" role="tablist">
<button
type="button"
class="settings-tab active"
role="tab"
data-tab="model-voice"
aria-selected="true"
aria-controls="panel-model-voice"
>Model &amp; Voice</button>
<button
type="button"
class="settings-tab"
role="tab"
data-tab="system-message"
aria-selected="false"
aria-controls="panel-system-message"
>System Message</button>
</div>
<div class="settings-tab-panels">
<div
class="settings-tab-panel active"
role="tabpanel"
data-tab-panel="model-voice"
id="panel-model-voice"
aria-labelledby="tab-model-voice"
>
<label class="settings-label" for="model">Model</label>
<select id="model" class="settings-select" aria-label="Model">
<option value="" disabled selected>Loading...</option>
</select>
<label class="settings-label" for="voice">Voice</label>
<select id="voice" class="settings-select" aria-label="Voice">
<option value="" disabled selected>Loading...</option>
</select>
</div>
<div
class="settings-tab-panel"
role="tabpanel"
data-tab-panel="system-message"
id="panel-system-message"
aria-labelledby="tab-system-message"
hidden
>
<label class="settings-label" for="system-message-input">
System Message
</label>
<textarea
id="system-message-input"
class="settings-textarea"
rows="8"
placeholder="Enter system message..."
></textarea>
<div class="settings-save-row">
<button
type="button"
class="settings-save-btn"
id="save-system-message"
>Save</button>
</div>
</div>
</div>
</div>
</div>
{{ end }}