@olares/lares-mobile 0.15.31 → 0.15.33

package/package.json

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

package/src/App.vue

@@ -595,6 +595,8 @@ export default {
       const view = this.voicePanel.getSnapshot(); this.voicePanelState = view;
       this.voiceCall = view.snapshot?.connection === "closed" ? null : view.snapshot;
       this.voicePhase = view.snapshot?.capture || "idle"; this.voiceError = view.error || view.snapshot?.error || "";
+      // The call no longer owns the answer: a cancelled take gives it back.
+      if (this.voiceSuspended && view.snapshot?.connection !== "open") this.resumeSuspendedReadout();
     });
     this.replySpeaker = createReplySpeaker();
     this.reader = createSentencePlayer({
@@ -648,7 +650,7 @@ export default {
     this.voicePageShowHandler = () => {
       if (this.voiceReadoutPaused) { this.voiceReadoutPaused = false; this.reader.resume(); }
     };
-    this.voiceOfflineHandler = () => { this.reader.stop(); void this.voicePanel.pause().catch(() => {}); };
+    this.voiceOfflineHandler = () => { this.stopReadout(); void this.voicePanel.pause().catch(() => {}); };
     window.addEventListener("offline", this.voiceOfflineHandler);
     document.addEventListener("visibilitychange", this.voiceVisibilityHandler);
     window.addEventListener("pagehide", this.voicePageHideHandler);
@@ -663,7 +665,7 @@ export default {
     this.restoreLog();
   },
   deactivated() {
-    this.reader.stop();
+    this.stopReadout();
     void this.voicePanel?.pause().catch(() => {});
     this.captureLog();
   },
@@ -742,7 +744,7 @@ export default {
       }
       if (sessionChanged && snap.sessionId !== this.voiceAdoptingSession) {
         void this.voicePanel?.pause().catch(() => {});
-        this.reader.stop();
+        this.stopReadout();
         this.player?.stop();
       }
       if (sessionChanged) this.voiceAdoptingSession = null;
@@ -759,9 +761,12 @@ export default {
       // A paused call is not speaking. Only an open call owns the reply;
       // leaving it set after the keyboard returns is how later answers stay silent.
       const voiceSpeaking = this.voiceCall?.connection === "open";
-      if (voiceSpeaking) this.reader.stop();
+      if (voiceSpeaking) this.suspendReadout();
       const target = this.voiceSpeak && !voiceSpeaking && !document.hidden ? speakable(utterance, this.voiceStreaming) : null;
-      if (target) this.reader.follow({ ...target, sessionId: snap.sessionId, source: { sessionId: snap.sessionId, turn: target.turn, step: target.step, attemptId: target.attemptId }, key: `${snap.sessionId}:${target.key}` });
+      if (target) this.followReadout({ ...target, sessionId: snap.sessionId, source: { sessionId: snap.sessionId, turn: target.turn, step: target.step, attemptId: target.attemptId }, key: `${snap.sessionId}:${target.key}` });
+      // A cancelled voice take did not own the answer: play it again. A take
+      // that submitted a turn grew the transcript, so the call owns it.
+      if (!voiceSpeaking) this.resumeSuspendedReadout();
       this.failed = snap.failed;
       this.error = snap.error;
       this.sessions = snap.sessions ?? this.sessions;
@@ -1302,7 +1307,7 @@ export default {
     },
     async onVoiceShortcut(event) {
       if (this.chatDevice !== "desktop" || document.hidden || navigator.onLine === false || event.composedPath?.().some(node => node?.hasAttribute?.("data-voice-shortcut-recorder"))) return;
-      if (event.key === "Escape" && !event.defaultPrevented) { this.reader.stop(); void this.voicePanel.pause().catch(() => {}); return; }
+      if (event.key === "Escape" && !event.defaultPrevented) { this.stopReadout(); void this.voicePanel.pause().catch(() => {}); return; }
       const action = matchVoiceShortcut(event, this.voiceSettings?.config?.dictationShortcuts);
       if (!action || !laresVoiceAvailability(this.voiceSettings).dictation) return;
       event.preventDefault();
@@ -1322,20 +1327,27 @@ export default {
       const view = this.voicePanel.getSnapshot();
       if (view.busy) return;
       if (view.visible && view.mode === "single") { if (view.snapshot?.capture === "recording") await this.voicePanel.finish().catch(() => {}); return; }
-      await this.voicePanel.pause().catch(() => {});
       await this.voicePanel.open({ mode: "single", sessionId: this.sessionId || null, preset: preset && preset !== "default" ? preset : undefined, configSnapshot: this.voiceSettings.config }).catch(() => {});
     },
-    async onHoldStart() {
+    onHoldStart() {
       this.voicePanel.arm();
       if (this.voicePanelState?.mode === "single" && this.voicePanelState.raw) {
-        await this.voicePanel.open({ mode: "single", sessionId: this.sessionId || null });
-        return;
+        return this.voicePanel.open({ mode: "single", sessionId: this.sessionId || null });
       }
+      const settings = this.voiceSettings;
+      if (!settings) return this.openVoiceFromSettings();
+      this.voiceDefaultMode = settings.config.mobileMode;
+      const available = laresVoiceAvailability(settings, !this.modelBlocked);
+      if (!(this.voiceDefaultMode === "single" ? available.dictation : available.conversation)) { this.voiceError = "voice_model_unavailable"; return; }
+      return this.voicePanel.open({ mode: this.voiceDefaultMode, sessionId: this.sessionId || null, configSnapshot: settings.config });
+    },
+    async openVoiceFromSettings() {
       const settings = await this.runtime.settings.voice(false, { diagnostics: false });
+      this.voiceSettings = markRaw(settings);
       this.voiceDefaultMode = settings.config.mobileMode;
       const available = laresVoiceAvailability(settings, !this.modelBlocked);
       if (!(this.voiceDefaultMode === "single" ? available.dictation : available.conversation)) { this.voiceError = "voice_model_unavailable"; return; }
-      await this.voicePanel.open({ mode: this.voiceDefaultMode, sessionId: this.sessionId || null });
+      return this.voicePanel.open({ mode: this.voiceDefaultMode, sessionId: this.sessionId || null, configSnapshot: settings.config });
     },
     onVoiceAction({ action, value }) {
       if (action === "start" || action === "end" || action === "close") this.speakNotice = "";
@@ -1345,19 +1357,19 @@ export default {
       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 }) {
+    async createMobileVoiceConversation({ mode, onTranscript, onDevice, config, preparation }) {
       config = laresVoiceConfig(config, mode);
       const settings = { config };
       const continuous = mode === "continuous";
       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.suspendReadout(); this.player?.stop(); this.player?.unlock();
       if (config.transport !== "legacy") {
         return createUnifiedConversation({ request: (path, options) => this.runtime.voiceRequest(path, options), socket: (ticket) => this.runtime.voiceSocket(ticket),
           device: captureSource("mobile", config.device), readAloud: continuous && config.speak, preset: config.preset, presentationSession: true,
           endpointSilenceMs: config.endpointSilenceMs, idleTimeoutMs: config.idleTimeoutMs, recoveryTimeoutMs: config.recoveryTimeoutMs,
-          onTranscript: continuous ? null : onTranscript, mode: () => resolveSubmitMode(this.running, false, true, this.busyEnter),
+          onTranscript: continuous ? null : onTranscript, mode: () => resolveSubmitMode(this.running, false, true, this.busyEnter), preparation,
           transcribe: (blob, signal) => this.runtime.transcribe(blob, config.language, signal, config.model) });
       }
       let conversation;
@@ -1379,7 +1391,7 @@ export default {
         readAloud: continuous && settings.config.speak,
         preset: settings.config.preset, backend: settings.config.backend, endpointSilenceMs: settings.config.endpointSilenceMs, idleTimeoutMs: settings.config.idleTimeoutMs, recoveryTimeoutMs: settings.config.recoveryTimeoutMs,
         presentationSession: true,
-        onTranscript: continuous ? null : onTranscript,
+        onTranscript: continuous ? null : onTranscript, preparation,
         mode: () => resolveSubmitMode(this.running, false, true, this.busyEnter),
         playback: { get canPause() { return reader.canPause; }, get key() { return reader.key; }, pause: () => reader.pause(), resume: () => reader.resume(), stop: () => { reader.stop(); this.player.stop(); } },
         onReply: (reply) => { const value = speakable(reply, config.streaming === true); if (value) reader.follow(value); },
@@ -1394,6 +1406,34 @@ export default {
         onError: (error) => { this.voiceError = error.message; },
       });
     },
+    followReadout(value) {
+      if (!value) return;
+      this.lastReadout = value;
+      this.reader.follow(value);
+    },
+    suspendReadout() {
+      const key = this.reader?.key;
+      if (!key) return;
+      if (this.lastReadout?.key === key) {
+        this.voiceSuspended = this.lastReadout;
+        this.voiceSuspendedItems = this.items?.length ?? 0;
+      }
+      this.reader.suspend?.();
+    },
+    resumeSuspendedReadout() {
+      const suspended = this.voiceSuspended;
+      if (!suspended) return;
+      this.voiceSuspended = null;
+      const taken = (this.items?.length ?? 0) > this.voiceSuspendedItems;
+      if (taken) this.reader.consume(suspended.key);
+      else if (suspended.sessionId === this.sessionId && this.voiceSpeak && !document.hidden) this.followReadout(suspended);
+    },
+    stopReadout() {
+      this.voiceSuspended = null;
+      this.voiceSuspendedItems = 0;
+      this.lastReadout = null;
+      this.reader.stop();
+    },
     setReadoutAwake(active) {
       this.readoutActive = Boolean(active);
       if (this.readoutActive) void this.readoutWake?.hold();
@@ -1415,7 +1455,7 @@ export default {
       this.voiceSpeak = next;
       this.speakBusy = true;
       if (!next) {
-        this.reader.stop();
+        this.stopReadout();
         this.player?.stop();
         void this.runtime.interruptSpeech?.();
       }
@@ -1580,10 +1620,10 @@ export default {
       const text = this.draft.trim();
       if (!this.canSend) return;
       this.player?.unlock();
-      // A typed reply is the chat's. An open voice call would keep the reader
-      // quiet and then not speak this text, so pause it and let the reader take the answer.
+      // A typed reply is the chat's. Stop the old readout before pausing the
+      // call, so the pause cannot hand a suspended answer back for a moment.
+      this.stopReadout();
       if (this.voiceCall?.connection === "open") await this.voicePanel.pause();
-      this.reader.stop();
       const sessionId = this.sessionId;
       const images = this.draftImages.filter((row) => draftImageStatus(row) === "ready");
       const wasRunning = this.running;

package/src/chat/Composer.vue

@@ -9,6 +9,9 @@
       <p>{{ t("settings.readAloudSyncFailed") }}</p>
       <button type="button" @click="$emit('voice-action', { action: 'retryReadAloud' })">{{ t("dictation.retry") }}</button>
     </div>
+    <div v-else-if="voiceError && !voiceView?.inputActive" class="lares-composer__alert" role="alert">
+      <p>{{ voiceError }}</p>
+    </div>
     <div
       class="lares-composer__card"
       data-composer-card
@@ -93,10 +96,6 @@
           </button>
         </figure>
       </div>
-      <div v-if="playbackChrome" class="lares-composer__playback" role="status">
-        <span>{{ t(playbackChrome.status) }}</span>
-        <button type="button" @click="stopPlayback">{{ t(playbackChrome.stopLabel) }}</button>
-      </div>
       <div class="lares-composer__line" :data-expanded="expanded ? 'true' : 'false'">
         <button
           type="button"
@@ -174,7 +173,7 @@
 
 <script>
 import { messageFromCode } from "@olares/lares-core/i18n/t";
-import { voiceCallFailure, voicePlaybackChrome } from "@olares/lares-core/voice/presentation";
+import { voiceCallFailure } from "@olares/lares-core/voice/presentation";
 import LaresVoiceInput from "./VoiceInput.vue";
 import {
   REFERENCE_DEBOUNCE_MS,
@@ -256,9 +255,6 @@ export default {
     callFailure() {
       return this.voiceView?.inputActive ? voiceCallFailure(this.voiceView) : null;
     },
-    playbackChrome() {
-      return voicePlaybackChrome(this.voiceView);
-    },
     callFailureText() {
       return this.callFailure ? messageFromCode(this.t, this.callFailure.code, "error.voice_failed") : "";
     },
@@ -291,9 +287,6 @@ export default {
     window.removeEventListener("pointerdown", this.onTokenPointer, true);
   },
   methods: {
-    stopPlayback() {
-      this.$emit("voice-action", { action: "stopPlayback" });
-    },
     onInput(event) {
       const value = event.target.value;
       this.$emit("update:draft", value);
@@ -713,34 +706,6 @@ export default {
   stroke-linecap: round;
 }
 
-.lares-composer__playback {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 4px 4px 8px;
-  color: var(--q-ink-2);
-  font-size: 13px;
-  line-height: 20px;
-}
-
-.lares-composer__playback button {
-  flex: none;
-  min-height: 32px;
-  padding: 4px 12px;
-  border: 1px solid var(--q-separator);
-  border-radius: 999px;
-  background: transparent;
-  color: var(--q-ink-1);
-  font: inherit;
-  font-size: 13px;
-}
-
-.lares-composer__playback button:focus-visible {
-  outline: 2px solid var(--q-blue-default, #3377ff);
-  outline-offset: 2px;
-}
-
 .lares-composer__line {
   display: flex;
   width: 100%;

package/src/chat/Transcript.vue

@@ -81,7 +81,10 @@
           <span>{{ speechLabel }}</span>
           <button type="button" class="lares-message-stop" @click="readout.stop()">{{ t(readout.status === 'error' ? 'readout.dismiss' : 'readout.stop') }}</button>
         </div>
-        <button v-if="!row.pending && !readout && isSpeaking(row)" type="button" class="lares-message-stop" @click="$emit('stop-speaking')">{{ t('input.stopSpeaking') }}</button>
+        <div v-else-if="ownsPlayback(row)" role="status" class="lares-message-readout">
+          <span>{{ t(playbackChrome.status) }}</span>
+          <button type="button" class="lares-message-stop" @click="$emit('stop-speaking')">{{ t(playbackChrome.stopLabel) }}</button>
+        </div>
         <LaresMessageActions
           v-if="!row.pending"
           :text="row.text"
@@ -111,6 +114,7 @@
 
 <script>
 import { readoutState } from "@olares/lares-core/voice/speech";
+import { voicePlaybackChrome } from "@olares/lares-core/voice/presentation";
 import { partitionPreviews } from "@olares/lares-core/files/preview-groups";
 import { parseAskUserQuestions } from "@olares/lares-core/larepass/questions";
 import { hidesRunningClock, processFoldLabel, transcriptBlocks } from "@olares/lares-core/larepass/process-fold";
@@ -159,6 +163,7 @@ export default {
   },
   computed: {
     speechLabel() { return this.t(`readout.${this.readout?.status}`); },
+    playbackChrome() { return voicePlaybackChrome(this.voiceView); },
     runningText() {
       return runningLabel(this.runningSince, this.t, this.now);
     },
@@ -197,11 +202,12 @@ export default {
       const latest = this.items.findLast(item => item.type === "assistant" && item.turn === this.readout.turn);
       return latest && (row.id || row.key) === (latest.id || latest.key);
     },
-    isSpeaking(row) {
-      const snapshot = this.voiceView?.snapshot;
-      if (snapshot?.playback !== "playing") return false;
-      const latest = this.items.findLast(item => item.type === "assistant" && (item.voiceId || item.voicePlayback?.voiceId) === snapshot.voiceId);
-      return latest && (row.id || row.key) === (latest.id || latest.key);
+    ownsPlayback(row) {
+      if (!this.playbackChrome || row.type !== "assistant") return false;
+      const voiceId = this.voiceView?.snapshot?.voiceId;
+      const matched = voiceId && this.items.findLast((item) => item.type === "assistant" && (item.voiceId || item.voicePlayback?.voiceId) === voiceId);
+      const target = matched || this.items.findLast((item) => item.type === "assistant");
+      return Boolean(target) && (row.id || row.key) === (target.id || target.key);
     },
     syncClock() {
       clearInterval(this.clock);