sam/family_home_lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Voice assistant: immediate working/waiting spinner on Send

Browse Source
This commit is contained in:
Sam Rolfe
2026-08-30 15:22:31 +10:00
parent 7cfeeaf000
commit c6c9588d65
1 changed files with 18 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
portal/templates/voice.html
View File

@@ -7,15 +7,31 @@
<div class="admin-panel"> <div class="admin-panel">
<div class="linkout-card stack"> <div class="linkout-card stack">
{% if error %}<div class="form-error">{{ error }}</div>{% endif %} {% if error %}<div class="form-error">{{ error }}</div>{% endif %}
<form method="post" action="/voice"> <form method="post" action="/voice" onsubmit="onSend()">
<div class="form-field"> <div class="form-field">
<label for="message">Command</label> <label for="message">Command</label>
<input class="text-input" id="message" name="message" <input class="text-input" id="message" name="message"
placeholder="e.g. what time is it, what's the weather, turn on the lights, play some music, Donald tell me a joke…" placeholder="e.g. what time is it, what's the weather, turn on the lights, play some music, Donald tell me a joke…"
value="{{ command or '' }}" required> value="{{ command or '' }}" required>
</div> </div>
<button class="button button-primary width-full" type="submit">Send</button> <button class="button button-primary width-full" type="submit" id="sendBtn">Send</button>
</form> </form>
<div id="waiting" class="waiting">
<span class="spinner"></span> Working — asking Jervis…
</div>
<style>
.waiting { display: none; align-items: center; gap: 8px; margin-top: 14px; color: #555; font: var(--type-body-sm); }
.spinner { width: 16px; height: 16px; border: 2px solid #d7d7d7; border-top-color: var(--primary, #0075de); border-radius: 50%; animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
</style>
<script>
function onSend() {
var b = document.getElementById('sendBtn');
if (b) { b.disabled = true; b.textContent = 'Sending…'; }
var w = document.getElementById('waiting');
if (w) { w.style.display = 'flex'; }
}
</script>
{% if reply %} {% if reply %}
<div class="linkout-card stack" style="margin-top:16px"> <div class="linkout-card stack" style="margin-top:16px">
<strong>Jervis:</strong> <strong>Jervis:</strong>