jimmy/nas-tools
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix: voice controls reactivity, disable mic on unsupported browsers
Deploy Dashboard / deploy (push) Successful in 55s
Details

Browse Source
This commit is contained in:
Gan, Jimmy
2026-02-26 15:40:15 +08:00
parent fa4da3868e
commit fca929df9f
2 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/frontend/src/lib/voice.js
+1
View File
@@ -8,6 +8,7 @@ export class VoiceSession {
this.ttsEnabled = false; this.ttsEnabled = false;
this.speaking = false; this.speaking = false;
this.listening = false; this.listening = false;
this.sttAvailable = !!(window.SpeechRecognition || window.webkitSpeechRecognition);
this.langIdx = 0; this.langIdx = 0;
this.term = null; this.term = null;
this.ws = null; this.ws = null;
dashboard/frontend/src/routes/Terminal.svelte
+29 -30
View File
@@ -142,37 +142,36 @@
</div> </div>
{/if} {/if}
</div> </div>
{#if activeTab && tabs.find(t => t.id === activeTab)?.connected} {#if activeTab && tabs.find(t => t.id === activeTab)?.connected && activeVoice()}
{@const v = activeVoice()} {@const v = activeVoice()}
{#if v} <div class="ml-auto flex items-center gap-1">
<div class="ml-auto flex items-center gap-1"> <button
<button class="px-2 py-1 rounded text-sm transition-colors {v.ttsEnabled ? (v.speaking ? 'text-indigo-400' : 'text-emerald-400') : 'text-surface-500 hover:text-surface-300'}"
class="px-2 py-1 rounded text-sm transition-colors {v.ttsEnabled ? (v.speaking ? 'text-indigo-400' : 'text-emerald-400') : 'text-surface-500 hover:text-surface-300'}" title={v.ttsEnabled ? 'Disable TTS' : 'Enable TTS'}
title={v.ttsEnabled ? 'Disable TTS' : 'Enable TTS'} onclick={() => { v.toggleTts(); voiceTick++; }}
onclick={() => { v.toggleTts(); voiceTick++; }} >
> {#if !v.ttsEnabled}
{#if !v.ttsEnabled} <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg> {:else if v.speaking}
{:else if v.speaking} <svg class="w-4 h-4 animate-pulse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 010 7.07"/><path d="M19.07 4.93a10 10 0 010 14.14"/></svg>
<svg class="w-4 h-4 animate-pulse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 010 7.07"/><path d="M19.07 4.93a10 10 0 010 14.14"/></svg> {:else}
{:else} <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 010 7.07"/></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 010 7.07"/></svg> {/if}
{/if} </button>
</button> <button
<button class="px-2 py-1 rounded text-sm transition-colors {v.listening ? 'text-rose-400 animate-pulse' : v.sttAvailable ? 'text-surface-500 hover:text-surface-300' : 'text-surface-700 cursor-not-allowed'}"
class="px-2 py-1 rounded text-sm transition-colors {v.listening ? 'text-rose-400 animate-pulse' : 'text-surface-500 hover:text-surface-300'}" title={!v.sttAvailable ? 'STT not supported in this browser' : v.listening ? 'Stop mic' : 'Start mic'}
title={v.listening ? 'Stop mic' : 'Start mic'} disabled={!v.sttAvailable}
onclick={() => { v.toggleMic(); voiceTick++; }} onclick={() => { v.toggleMic(); voiceTick++; }}
> >
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg> <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
</button> </button>
<button <button
class="px-1.5 py-0.5 rounded text-xs font-medium transition-colors text-surface-400 hover:text-surface-200 hover:bg-surface-800" class="px-1.5 py-0.5 rounded text-xs font-medium transition-colors text-surface-400 hover:text-surface-200 hover:bg-surface-800"
title="Switch language" title="Switch language"
onclick={() => { v.cycleLang(); voiceTick++; }} onclick={() => { v.cycleLang(); voiceTick++; }}
>{v.langLabel}</button> >{v.langLabel}</button>
</div> </div>
{/if}
{/if} {/if}
</div> </div>