@olares/lares-mobile 0.15.22 → 0.15.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olares/lares-mobile",
-  "version": "0.15.22",
+  "version": "0.15.23",
   "description": "Lares chat component for LarePass",
   "type": "module",
   "repository": {
@@ -28,7 +28,7 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
-    "@olares/lares-core": "0.15.22",
+    "@olares/lares-core": "0.15.23",
     "markdown-it": "^14.3.0"
   }
 }

package/src/App.vue

@@ -101,6 +101,7 @@
       @open-references="loadReferences"
       @pick-command="pickCommand"
       @toggle-speak="toggleSpeak"
+      @dismiss-speak="speakNotice = ''"
     />
     <LaresVoicePanel v-if="voicePanelState" :view="voicePanelState" :t="t"
       @close="runVoicePanel('close')" @edit="voicePanel.edit($event)" @preset="voicePanel.selectPreset($event, true).catch(() => {})"
@@ -124,7 +125,7 @@ import { captureSource } from "@olares/lares-core/voice/input";
 import { laresVoiceConfig, laresVoiceAvailability } from "@olares/lares-core/voice/lares-policy";
 import { createVoiceConversation } from "@olares/lares-core/voice/conversation";
 import { createAnswerPlayer } from "./chat/playback.js";
-import { createReplySpeaker, createSentencePlayer, speakable } from "@olares/lares-core/voice/speech";
+import { createReplySpeaker, createSentencePlayer, readoutState, speakable } from "@olares/lares-core/voice/speech";
 import { prepareBrowserCapture } from "@olares/lares-core/voice/browser-capture";
 import { playAudioStream, createStreamingCapture } from "@olares/lares-core/voice/stream-client";
 import { voiceHeaders, wavBlob } from "@olares/lares-core/voice/client";
@@ -558,6 +559,7 @@ export default {
     this.imageUploadControllers = new Map();
     this.player = createAnswerPlayer();
     this.voicePanel = createVoicePanel({
+      armOutput: () => this.player?.unlock(),
       create: (options) => this.createMobileVoiceConversation(options),
       prepareInput: (config) => config?.device === "headset" ? null : prepareBrowserCapture(),
       loadConfig: async () => (await this.runtime.settings.voice(false, { diagnostics: false })).config,
@@ -1275,6 +1277,7 @@ export default {
       await this.openDictation();
     },
     async openDictation(preset) {
+      this.voicePanel.arm();
       if (document.hidden || navigator.onLine === false) return;
       if (!this.voiceSettings) {
         try { this.voiceSettings = markRaw(await this.runtime.settings.voice(false, { diagnostics: false })); }
@@ -1288,6 +1291,7 @@ export default {
       await this.voicePanel.open({ mode: "single", sessionId: this.sessionId || null, preset: preset && preset !== "default" ? preset : undefined, configSnapshot: this.voiceSettings.config }).catch(() => {});
     },
     async onHoldStart() {
+      this.voicePanel.arm();
       if (this.voicePanelState?.mode === "single" && this.voicePanelState.raw) {
         await this.voicePanel.open({ mode: "single", sessionId: this.sessionId || null });
         return;
@@ -1299,10 +1303,11 @@ export default {
       await this.voicePanel.open({ mode: this.voiceDefaultMode, sessionId: this.sessionId || null });
     },
     onVoiceAction({ action, value }) {
+      if (action === "start" || action === "end" || action === "close") this.speakNotice = "";
       if (action === "retryReadAloud") { void this.voicePanel.retryReadAloud(); return; }
       if (action === "stopPlayback") { void this.voicePanel.conversation?.controller.stopPlayback().catch(() => {}); return; }
       if (action === "setCancelArmed") { this.voicePanel.setCancelArmed(value); return; }
-      if (["holdStart", "holdEnd", "finish", "start", "close"].includes(action)) void Promise.resolve(this.voicePanel[action](value)).catch(() => {});
+      if (["holdStart", "holdEnd", "finish", "start", "close", "end"].includes(action)) void Promise.resolve(this.voicePanel[action](value)).catch(() => {});
     },
     runVoicePanel(action) { void this.voicePanel[action]().catch(() => {}); },
     async createMobileVoiceConversation({ mode, onTranscript, onDevice, config }) {
@@ -1312,7 +1317,7 @@ export default {
       const device = settings.config.device === "headset" ? "headset" : "device";
       onDevice(device);
       if (settings.config.backend === "realtime" && continuous) throw new Error("voice_manual_realtime_unavailable");
-      this.reader.stop(); this.player?.stop(); this.player?.unlock();
+      this.reader.stop(); this.player?.stop();
       let conversation;
       const reader = createSentencePlayer({
         stream: (value) => playAudioStream({ ...value, request: (path, options) => this.runtime.voiceRequest(path, options), headers: conversation.headers, socket: (ticket) => this.runtime.voiceSocket(ticket, "/api/lares/voice/stream") }),
@@ -1320,7 +1325,8 @@ export default {
         play: (sentence) => sentence.bluetooth === "played" ? Promise.resolve() : this.player.play(wavBlob(sentence.audio)),
         halt: () => this.player.stop(), silence: () => {},
         onState: (playing) => conversation?.playbackState(playing),
-        fail: (error) => { this.showSpeakProblem(error); void conversation.controller.disconnect("voice_playback_failed"); },
+        onOutput: (value) => readoutState.publish(value?.status === "error" ? null : value),
+        fail: (error) => { void conversation.controller.disconnect(error?.code || error?.message || "voice_playback_failed"); },
       });
       conversation = createVoiceConversation({
         streamInput: (stream, callbacks) => createStreamingCapture(stream, { ...callbacks, request: (path, options) => this.runtime.voiceRequest(path, options), headers: conversation.headers, model: config.model, language: config.language, socket: (ticket) => this.runtime.voiceSocket(ticket, "/api/lares/voice/stream") }),
@@ -1350,6 +1356,7 @@ export default {
       this.speakNotice = speakProblemText(this.t, err);
     },
     async toggleSpeak() {
+      this.player?.unlock();
       if (this.speakBusy) return;
       this.speakNotice = "";
       if (typeof this.runtime.settings?.saveVoice !== "function") {
@@ -1525,9 +1532,9 @@ export default {
     async send(mode = "queue") {
       const text = this.draft.trim();
       if (!this.canSend) return;
+      this.player?.unlock();
       this.reader.stop();
       if (this.voiceCall?.connection === "open") await this.voicePanel.pause();
-      this.player?.unlock();
       const sessionId = this.sessionId;
       const images = this.draftImages.filter((row) => draftImageStatus(row) === "ready");
       const wasRunning = this.running;

package/src/chat/Composer.vue

@@ -1,6 +1,11 @@
 <template>
   <form class="lares-composer" :class="{ 'lares-composer--hero': hero }" @submit.prevent="onSend">
-    <div v-if="voiceView?.readAloudError" class="lares-composer__alert" role="alert">
+    <div v-if="callFailure" class="lares-composer__alert" role="alert">
+      <p>{{ callFailureText }}</p>
+      <button type="button" :disabled="voiceView.busy" @click="$emit('voice-action', { action: 'start' })">{{ t(callFailure.action === 'resume' ? 'call.resume' : 'call.restart') }}</button>
+      <button type="button" class="lares-composer__alert-quiet" :disabled="voiceView.busy" @click="$emit('voice-action', { action: 'end' })">{{ t('panel.close') }}</button>
+    </div>
+    <div v-else-if="voiceView?.readAloudError" class="lares-composer__alert" role="alert">
       <p>{{ t("settings.readAloudSyncFailed") }}</p>
       <button type="button" @click="$emit('voice-action', { action: 'retryReadAloud' })">{{ t("dictation.retry") }}</button>
     </div>
@@ -164,6 +169,8 @@
 </template>
 
 <script>
+import { messageFromCode } from "@olares/lares-core/i18n/t";
+import { voiceCallFailure } from "@olares/lares-core/voice/presentation";
 import LaresVoiceInput from "./VoiceInput.vue";
 import {
   REFERENCE_DEBOUNCE_MS,
@@ -242,6 +249,12 @@ export default {
     overlayPointerActive() {
       return this.referenceOpen || this.commandsOpen;
     },
+    callFailure() {
+      return this.voiceView?.inputActive ? voiceCallFailure(this.voiceView) : null;
+    },
+    callFailureText() {
+      return this.callFailure ? messageFromCode(this.t, this.callFailure.code, "error.voice_failed") : "";
+    },
   },
   watch: {
     draft(value) {
@@ -453,7 +466,8 @@ export default {
 .lares-composer__alert {
   display: flex;
   align-items: center;
-  gap: 12px;
+  flex-wrap: wrap;
+  gap: 8px 12px;
   padding: 8px 12px;
   border-radius: 12px;
   background: var(--q-background-1);
@@ -480,6 +494,11 @@ export default {
   font-weight: 600;
 }
 
+.lares-composer__alert button.lares-composer__alert-quiet {
+  background: transparent;
+  color: var(--q-ink-2);
+}
+
 .lares-composer__card {
   position: relative;
   display: flex;

package/src/chat/VoiceInput.vue

@@ -6,7 +6,7 @@
       <svg v-if="view.mode === 'single' && ui.recording && levels.length" class="lares-inline-level" viewBox="0 0 32 24" aria-hidden="true"><line v-for="(level, index) in levels" :key="index" :x1="index * 5 + 3" :x2="index * 5 + 3" :y1="12 - Math.max(2, Math.min(10, level * 500))" :y2="12 + Math.max(2, Math.min(10, level * 500))" /></svg>
       <span>{{ t(ui.label) }}</span><span v-if="ui.timed" class="lares-inline-time" aria-hidden="true"> · {{ ui.elapsed }}</span>
     </button>
-    <span class="lares-inline-status" :data-error="Boolean(ui.error)" :data-visible="['speaking', 'working'].includes(ui.phase)" role="status" aria-live="polite" aria-atomic="true">{{ status }}</span>
+    <span v-if="!ui.error" class="lares-inline-status" :data-visible="['speaking', 'working'].includes(ui.phase)" role="status" aria-live="polite" aria-atomic="true">{{ status }}</span>
   </div>
 </template>
 <script>
@@ -45,6 +45,5 @@ export default {
 [data-phase=recording] .lares-inline-main { color: var(--q-blue-default, #3377ff); }
 [data-phase=cancel] .lares-inline-main, .lares-inline-cancel[data-armed=true] { color: var(--q-red-default, #c23d32); }
 .lares-inline-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
-.lares-inline-status[data-visible=true], .lares-inline-status[data-error=true] { width: auto; height: auto; clip-path: none; bottom: calc(100% + 16px); background: var(--q-background-1, white); padding: 6px; font-size: 12px; color: var(--q-ink-2, #777); }
-.lares-inline-status[data-error=true] { color: var(--q-red-default, #c23d32); }
+.lares-inline-status[data-visible=true] { width: auto; height: auto; clip-path: none; bottom: calc(100% + 16px); background: var(--q-background-1, white); padding: 6px; font-size: 12px; color: var(--q-ink-2, #777); }
 </style>

package/src/chat/playback.js

@@ -1,3 +1,5 @@
+import { primePlaybackContext } from "@olares/lares-core/voice/pcm-player";
+
 const SILENT_WAV = "data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQAAAAA=";
 
 /**
@@ -20,6 +22,7 @@ export function createAnswerPlayer() {
   };
   return {
     unlock() {
+      primePlaybackContext();
       if (!audio || !audio.paused) return;
       audio.src = SILENT_WAV;
       void audio.play().catch(() => {});

package/src/mobile/MobileShell.vue

@@ -15,7 +15,10 @@
       @effort="$emit('open-model')"
       @speak="$emit('toggle-speak')"
     />
-    <p v-if="state.speakNotice" class="lares-speak-notice" role="status">{{ state.speakNotice }}</p>
+    <p v-if="state.speakNotice" class="lares-speak-notice" role="status">
+      <span>{{ state.speakNotice }}</span>
+      <button type="button" @click="$emit('dismiss-speak')">{{ t('readout.dismiss') }}</button>
+    </p>
     <LaresHistoryPanel
       :open="state.panel === 'history'"
       :sessions="state.sessions"
@@ -268,6 +271,7 @@ export default {
     "close-directory", "choose-directory", "create-folder", "toggle-hidden",
     "rename-session", "archive-session",
     "move-session",
+    "dismiss-speak",
   ],
   data() {
     return { composerMode: "text" };
@@ -340,12 +344,35 @@ export default {
 }
 
 .lares-speak-notice {
+  display: flex;
+  align-items: center;
+  gap: 12px;
   margin: 0 16px 8px;
+  padding: 8px 12px;
+  border-radius: 12px;
+  background: var(--q-orange-alpha);
   color: var(--q-orange-default);
   font-size: 14px;
   line-height: 20px;
 }
 
+.lares-speak-notice span {
+  flex: 1;
+  min-width: 0;
+}
+
+.lares-speak-notice button {
+  flex: none;
+  border: 0;
+  border-radius: 8px;
+  padding: 6px 10px;
+  background: transparent;
+  color: var(--q-ink-2);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+}
+
 .lares-shell__retry {
   align-self: flex-start;
   margin: 0 20px;