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

Browse Source
This commit is contained in:
Gan, Jimmy
2026-02-26 15:40:15 +08:00
parent 9c5dbcdb37
commit 70d3be71b9
2 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/frontend/src/routes/Terminal.svelte
+29 -30
View File
@@ -142,37 +142,36 @@
</div>
{/if}
</div>
{#if activeTab && tabs.find(t => t.id === activeTab)?.connected}
{#if activeTab && tabs.find(t => t.id === activeTab)?.connected && activeVoice()}
{@const v = activeVoice()}
{#if v}
<div class="ml-auto flex items-center gap-1">
<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'}"
title={v.ttsEnabled ? 'Disable TTS' : 'Enable TTS'}
onclick={() => { v.toggleTts(); voiceTick++; }}
>
{#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>
{: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>
{: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>
{/if}
</button>
<button
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.listening ? 'Stop mic' : 'Start mic'}
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>
</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"
title="Switch language"
onclick={() => { v.cycleLang(); voiceTick++; }}
>{v.langLabel}</button>
</div>
{/if}
<div class="ml-auto flex items-center gap-1">
<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'}"
title={v.ttsEnabled ? 'Disable TTS' : 'Enable TTS'}
onclick={() => { v.toggleTts(); voiceTick++; }}
>
{#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>
{: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>
{: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>
{/if}
</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'}"
title={!v.sttAvailable ? 'STT not supported in this browser' : v.listening ? 'Stop mic' : 'Start mic'}
disabled={!v.sttAvailable}
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>
</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"
title="Switch language"
onclick={() => { v.cycleLang(); voiceTick++; }}
>{v.langLabel}</button>
</div>
{/if}
</div>