Add voice audio, capture and transcript, browser monitor, and DM UI
This commit is contained in:
Fisto
+209
-56
@@ -15,6 +15,11 @@
|
||||
<span class="vk-brand-version">debug</span>
|
||||
</span>
|
||||
|
||||
<div class="vk-scope">
|
||||
<button id="scope-guild" class="vk-scope-btn active" type="button">Guild</button>
|
||||
<button id="scope-dm" class="vk-scope-btn" type="button">DM</button>
|
||||
</div>
|
||||
|
||||
<div class="vk-guild-picker">
|
||||
<button id="guild-picker" class="btn btn-secondary vk-guild-button" type="button">
|
||||
<span id="guild-picker-label">Direct messages</span>
|
||||
@@ -33,6 +38,17 @@
|
||||
</div>
|
||||
|
||||
<div class="vk-header-right">
|
||||
<button id="core-start-banner" class="btn btn-primary vk-small-btn vk-start-server" type="button" hidden>
|
||||
Start server
|
||||
</button>
|
||||
<button
|
||||
id="client-audio"
|
||||
class="btn btn-secondary vk-small-btn vk-client-audio"
|
||||
type="button"
|
||||
title="Play the call in this browser"
|
||||
>
|
||||
Client audio
|
||||
</button>
|
||||
<label class="vk-takeover" title="Read-only unless takeover is on">
|
||||
<input type="checkbox" id="takeover" />
|
||||
<span class="vk-switch"><span class="vk-knob"></span></span>
|
||||
@@ -51,19 +67,28 @@
|
||||
<aside class="vk-rail">
|
||||
<div id="guild-switcher" class="vk-guild-switcher"></div>
|
||||
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">Text</div>
|
||||
<div id="text-channels" class="vk-rail-list"></div>
|
||||
<div id="rail-guild" class="vk-rail-scope">
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">Text</div>
|
||||
<div id="text-channels" class="vk-rail-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">Voice</div>
|
||||
<div id="voice-channels" class="vk-rail-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">People</div>
|
||||
<div id="people-list" class="vk-rail-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">Voice</div>
|
||||
<div id="voice-channels" class="vk-rail-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">Direct</div>
|
||||
<div id="direct-list" class="vk-rail-list"></div>
|
||||
<div id="rail-dm" class="vk-rail-scope" hidden>
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">Direct messages</div>
|
||||
<div id="dm-rail-list" class="vk-rail-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="agent-identity" class="vk-rail-footer"></div>
|
||||
@@ -103,16 +128,18 @@
|
||||
</div>
|
||||
<div class="vk-tts-settings">
|
||||
<span class="vk-micro-label">Voice settings</span>
|
||||
<span class="vk-chip vk-chip-on">sv-SE · Mattias</span>
|
||||
<span class="vk-chip">rate 1.0×</span>
|
||||
<span class="vk-chip vk-chip-on">yield to call</span>
|
||||
<span class="vk-chip">duck 30%</span>
|
||||
<select id="tts-provider" class="vk-select">
|
||||
<option value="local">local TTS</option>
|
||||
<option value="api">API TTS</option>
|
||||
</select>
|
||||
<span class="vk-chip vk-chip-on">duck on voice</span>
|
||||
<span class="vk-chip vk-chip-on">queue lines</span>
|
||||
</div>
|
||||
<div class="vk-tts-body">
|
||||
<textarea id="tts-input" class="vk-tts-field" rows="3" placeholder="Speak text into the call…"></textarea>
|
||||
<div class="vk-tts-meta">
|
||||
<span class="vk-mono vk-dim">voice audio is not implemented yet</span>
|
||||
<span class="vk-mono vk-dim" id="tts-status">idle</span>
|
||||
<button id="tts-stop" class="btn btn-secondary vk-small-btn" type="button">Stop</button>
|
||||
<button id="tts-speak" class="btn btn-primary vk-small-btn" type="button">Speak</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -154,7 +181,6 @@
|
||||
<div id="right-dms" class="vk-right-list"></div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="vk-right-footer vk-mono vk-dim">full roster sits behind the guild header</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
@@ -186,9 +212,12 @@
|
||||
<div id="event-log" class="vk-event-log"></div>
|
||||
</div>
|
||||
<div id="console-panel-transcript" class="vk-console-panel">
|
||||
<div class="vk-roadmap">
|
||||
<span class="tag tag-outline">roadmap</span>
|
||||
<p>Voice transcription (STT/TTS) is not implemented yet. Transcript segments will appear here once voice audio lands.</p>
|
||||
<div class="vk-transcript">
|
||||
<div class="vk-transcript-toolbar">
|
||||
<span id="transcript-status" class="vk-mono vk-dim">no capture session</span>
|
||||
<button id="transcript-refresh" class="btn btn-secondary vk-small-btn" type="button">Refresh</button>
|
||||
</div>
|
||||
<div id="transcript-list" class="vk-transcript-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -205,50 +234,174 @@
|
||||
</div>
|
||||
|
||||
<div class="vk-settings-body">
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Core process</span>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="core-start" class="btn btn-primary vk-small-btn" type="button">Start</button>
|
||||
<button id="core-stop" class="btn btn-secondary vk-small-btn" type="button">Stop</button>
|
||||
<button id="core-restart" class="btn btn-secondary vk-small-btn" type="button">Restart</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="core-status" class="vk-settings-card"></div>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Account login</span>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="auth-start" class="btn btn-primary vk-small-btn" type="button">Start QR login</button>
|
||||
<button id="auth-cancel" class="btn btn-secondary vk-small-btn" type="button">Cancel</button>
|
||||
<button id="auth-restart" class="btn btn-secondary vk-small-btn" type="button">Restart with token</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="auth-status" class="vk-settings-card"></div>
|
||||
<div id="auth-qr" class="vk-qr" hidden></div>
|
||||
<form id="auth-captcha" class="vk-settings-row" hidden>
|
||||
<input id="auth-captcha-key" class="input" placeholder="hCaptcha response token" />
|
||||
<button class="btn btn-secondary vk-small-btn" type="submit">Submit captcha</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Visible guilds</span>
|
||||
<button id="guilds-show-all" class="btn btn-secondary vk-small-btn" type="button">Show all</button>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="guilds-save" class="btn btn-primary vk-small-btn" type="button" disabled>Save</button>
|
||||
<button id="guilds-hide-all" class="btn btn-secondary vk-small-btn" type="button">Hide all</button>
|
||||
<button id="guilds-show-all" class="btn btn-secondary vk-small-btn" type="button">Show all</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="guild-visibility" class="vk-settings-card"></div>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Action log</span>
|
||||
<button id="logs-refresh" class="btn btn-secondary vk-small-btn" type="button">Refresh</button>
|
||||
<details class="vk-settings-group" open>
|
||||
<summary class="vk-settings-summary">
|
||||
<span class="vk-icon vk-caret" data-icon="caretDown"></span>
|
||||
<span>Client</span>
|
||||
</summary>
|
||||
|
||||
<div class="vk-settings-group-body">
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Bot audio</span>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="audio-connect" class="btn btn-primary vk-small-btn" type="button">Connect devices</button>
|
||||
<button id="audio-refresh" class="btn btn-secondary vk-small-btn" type="button">Refresh</button>
|
||||
<button id="audio-capture" class="btn btn-secondary vk-small-btn" type="button">Start capture</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="vk-settings-card">
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Audio engine</span>
|
||||
<span class="vk-status-value" id="audio-status">checking…</span>
|
||||
</div>
|
||||
<div class="vk-status-row" id="audio-hint-row" hidden>
|
||||
<span class="vk-status-label">Fix</span>
|
||||
<span class="vk-status-value vk-dim" id="audio-hint"></span>
|
||||
</div>
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">TTS</span>
|
||||
<span class="vk-status-value" id="audio-tts">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Speech</span>
|
||||
<span class="vk-mono vk-dim" id="speech-status"></span>
|
||||
</div>
|
||||
<div class="vk-settings-card">
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">TTS engine</span>
|
||||
<select class="vk-select" id="speech-provider">
|
||||
<option value="">Auto</option>
|
||||
<option value="local">Local</option>
|
||||
<option value="api">API</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Language</span>
|
||||
<select class="vk-select" id="speech-language">
|
||||
<option value="">Auto</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Voice</span>
|
||||
<select class="vk-select" id="speech-voice">
|
||||
<option value="">Default</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">STT</span>
|
||||
<span class="vk-status-value vk-dim" id="speech-stt">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Display</span>
|
||||
<span class="vk-mono vk-dim" id="timezone-status"></span>
|
||||
</div>
|
||||
<div class="vk-settings-card">
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Timezone</span>
|
||||
<select class="vk-select" id="timezone-select"></select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Browser audio</span>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="browser-grant" class="btn btn-primary vk-small-btn" type="button">Enable browser audio</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="vk-settings-card">
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Output device</span>
|
||||
<select class="vk-select" id="browser-output">
|
||||
<option value="">Browser default</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Input device</span>
|
||||
<select class="vk-select" id="browser-input" disabled>
|
||||
<option value="">Mic puppeting not implemented</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Call audio</span>
|
||||
<span class="vk-status-value vk-dim" id="browser-audio-status">off</span>
|
||||
</div>
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Note</span>
|
||||
<span class="vk-status-value vk-dim" id="browser-hint">Browser audio needs HTTPS or localhost.</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div id="action-log" class="vk-log"></div>
|
||||
</section>
|
||||
</details>
|
||||
|
||||
<details class="vk-settings-group" open>
|
||||
<summary class="vk-settings-summary">
|
||||
<span class="vk-icon vk-caret" data-icon="caretDown"></span>
|
||||
<span>Server</span>
|
||||
</summary>
|
||||
|
||||
<div class="vk-settings-group-body">
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Core process</span>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="core-start" class="btn btn-primary vk-small-btn" type="button">Start</button>
|
||||
<button id="core-stop" class="btn btn-secondary vk-small-btn" type="button">Stop</button>
|
||||
<button id="core-restart" class="btn btn-secondary vk-small-btn" type="button">Restart</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="core-status" class="vk-settings-card"></div>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Account login</span>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="auth-start" class="btn btn-primary vk-small-btn" type="button">Start QR login</button>
|
||||
<button id="auth-cancel" class="btn btn-secondary vk-small-btn" type="button">Cancel</button>
|
||||
<button id="auth-restart" class="btn btn-secondary vk-small-btn" type="button">Restart with token</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="auth-status" class="vk-settings-card"></div>
|
||||
<div id="auth-qr" class="vk-qr" hidden></div>
|
||||
<form id="auth-captcha" class="vk-settings-row" hidden>
|
||||
<input id="auth-captcha-key" class="input" placeholder="hCaptcha response token" />
|
||||
<button class="btn btn-secondary vk-small-btn" type="submit">Submit captcha</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Action log</span>
|
||||
<button id="logs-refresh" class="btn btn-secondary vk-small-btn" type="button">Refresh</button>
|
||||
</div>
|
||||
<div id="action-log" class="vk-log"></div>
|
||||
</section>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user