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

fix: compact voice mode bottom sheet, hide title, inline mic+transcript

Browse Source
This commit is contained in:
Gan, Jimmy
2026-02-26 16:25:35 +08:00
parent 3d6fb06439
commit 1b06aaa5c7
1 changed files with 23 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/frontend/src/routes/Terminal.svelte
+22 -24
View File
@@ -100,8 +100,10 @@
onDestroy(() => tabData.forEach((d) => { d.voice?.destroy(); d.ro?.disconnect(); d.ws?.close(); d.term?.dispose(); })); onDestroy(() => tabData.forEach((d) => { d.voice?.destroy(); d.ro?.disconnect(); d.ws?.close(); d.term?.dispose(); }));
</script> </script>
<div class="space-y-2"> <div class={activeVoice()?.voiceMode ? 'space-y-1' : 'space-y-2'}>
{#if !activeVoice()?.voiceMode}
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Terminal</h1> <h1 class="text-2xl font-bold text-surface-900 tracking-tight">Terminal</h1>
{/if}
<div class="flex items-center gap-1 border-b border-surface-700 pb-1 relative"> <div class="flex items-center gap-1 border-b border-surface-700 pb-1 relative">
{#each tabs as tab (tab.id)} {#each tabs as tab (tab.id)}
@@ -168,17 +170,17 @@
<div <div
use:initTerminal={tab} use:initTerminal={tab}
class="rounded-xl overflow-hidden shadow-lg border border-surface-700 transition-all duration-300" class="rounded-xl overflow-hidden shadow-lg border border-surface-700 transition-all duration-300"
style="background: #0f172a; height: calc(100vh - {activeVoice()?.voiceMode ? '25rem' : '10rem'});" style="background: #0f172a; height: calc(100vh - {activeVoice()?.voiceMode ? '19rem' : '10rem'});"
></div> ></div>
</div> </div>
{/each} {/each}
{#if activeVoice()?.voiceMode} {#if activeVoice()?.voiceMode}
{@const v = activeVoice()} {@const v = activeVoice()}
<div class="mt-2 rounded-xl bg-surface-800/95 border border-surface-700 shadow-xl overflow-hidden animate-slide-up" style="height: 180px;"> <div class="mt-1 rounded-xl bg-surface-800/95 border border-surface-700 shadow-xl overflow-hidden animate-slide-up">
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between px-4 py-2 border-b border-surface-700/50"> <div class="flex items-center justify-between px-3 py-1.5 border-b border-surface-700/50">
<span class="text-sm font-medium text-surface-300">Voice Mode</span> <span class="text-xs font-medium text-surface-300">Voice Mode</span>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<select <select
class="bg-surface-700 text-surface-300 text-xs rounded px-1 py-0.5 outline-none max-w-[120px]" class="bg-surface-700 text-surface-300 text-xs rounded px-1 py-0.5 outline-none max-w-[120px]"
@@ -202,42 +204,38 @@
>&times;</button> >&times;</button>
</div> </div>
</div> </div>
<!-- Transcript --> <!-- Transcript + Mic -->
<div class="px-4 py-2 h-[60px] overflow-y-auto"> <div class="flex items-center gap-3 px-3 py-2">
{#if v.transcript}
<p class="text-sm text-surface-400 italic">"{v.transcript}"</p>
{:else}
<p class="text-sm text-surface-600 italic">{v.speaking ? 'Speaking...' : 'Waiting for speech...'}</p>
{/if}
</div>
<!-- Mic area -->
<div class="flex flex-col items-center gap-1 py-2">
{#if v.talkMode === "hold"} {#if v.talkMode === "hold"}
<button <button
aria-label="Hold to talk" aria-label="Hold to talk"
class="w-14 h-14 rounded-full flex items-center justify-center transition-colors {v.listening ? 'bg-rose-500/30 text-rose-400' : 'bg-surface-700 text-surface-300 hover:bg-surface-600'}" class="w-10 h-10 shrink-0 rounded-full flex items-center justify-center transition-colors {v.listening ? 'bg-rose-500/30 text-rose-400' : 'bg-surface-700 text-surface-300 hover:bg-surface-600'}"
onpointerdown={() => { v.startHold(); voiceTick++; }} onpointerdown={() => { v.startHold(); voiceTick++; }}
onpointerup={() => { v.releaseHold(); voiceTick++; }} onpointerup={() => { v.releaseHold(); voiceTick++; }}
onpointerleave={() => { if (v.listening) { v.releaseHold(); voiceTick++; } }} onpointerleave={() => { if (v.listening) { v.releaseHold(); voiceTick++; } }}
> >
<svg class="w-6 h-6" 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-5 h-5" 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>
<span class="text-xs text-surface-500">{v.listening ? 'Release to send' : 'Hold to talk'}</span>
{:else if v.talkMode === "tap"} {:else if v.talkMode === "tap"}
<button <button
aria-label="Tap to talk" aria-label="Tap to talk"
class="w-14 h-14 rounded-full flex items-center justify-center transition-colors {v.listening ? 'bg-rose-500/30 text-rose-400' : 'bg-surface-700 text-surface-300 hover:bg-surface-600'}" class="w-10 h-10 shrink-0 rounded-full flex items-center justify-center transition-colors {v.listening ? 'bg-rose-500/30 text-rose-400' : 'bg-surface-700 text-surface-300 hover:bg-surface-600'}"
onclick={() => { v.tapMic(); voiceTick++; }} onclick={() => { v.tapMic(); voiceTick++; }}
> >
<svg class="w-6 h-6" 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-5 h-5" 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>
<span class="text-xs text-surface-500">{v.listening ? 'Tap to send' : 'Tap to talk'}</span>
{:else} {:else}
<div class="w-14 h-14 rounded-full flex items-center justify-center {v.listening ? 'bg-emerald-500/20 text-emerald-400 animate-pulse' : 'bg-surface-700 text-surface-500'}"> <div class="w-10 h-10 shrink-0 rounded-full flex items-center justify-center {v.listening ? 'bg-emerald-500/20 text-emerald-400 animate-pulse' : 'bg-surface-700 text-surface-500'}">
<svg class="w-6 h-6" 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-5 h-5" 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>
</div> </div>
<span class="text-xs text-surface-500">{v.listening ? 'Listening...' : v.speaking ? 'Speaking...' : 'Ready'}</span>
{/if} {/if}
<div class="flex-1 min-w-0">
{#if v.transcript}
<p class="text-sm text-surface-400 italic truncate">"{v.transcript}"</p>
{:else}
<p class="text-xs text-surface-600">{v.speaking ? 'Speaking...' : v.listening ? 'Listening...' : 'Ready'}</p>
{/if}
</div>
</div> </div>
</div> </div>
{/if} {/if}