pi-web-voice 0.1.3 → 0.1.5

package/README.md

@@ -2,9 +2,9 @@
 
 Voice input for [pi-web](https://github.com/agegr/pi-web), added from the outside.
 
-A microphone button appears in the chat composer. Tap it to start and tap again to stop,
-or press and hold to talk and release when done — the gesture decides, there is nothing
-to configure. The transcript lands at your caret; you review it, then send. pi-web is never modified: the
+A microphone button appears in the chat composer. Click it to start, click again to stop.
+The transcript lands at your caret; you review it, then send. Keyboard, VoiceOver and the
+accessibility API can press it too. pi-web is never modified: the
 whole thing is one `--require` hook that injects a single `<script>` tag into HTML
 responses and serves two routes of its own.
 
@@ -87,7 +87,7 @@ file, loaded by Node itself — no dependency, no parser of ours:
 ```sh
 AZURE_SPEECH_ENDPOINT=https://my-resource.cognitiveservices.azure.com
 AZURE_SPEECH_KEY=abc123...
-PI_VOICE_MODE=hold
+PI_VOICE_PROVIDER=azure-speech
 ```
 
 Anything already exported wins over the file, so `AZURE_SPEECH_KEY=other pi-web-voice`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-web-voice",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Voice input for pi-web. A NODE_OPTIONS hook that injects a microphone button into the chat composer and transcribes speech with Azure AI Speech, Azure OpenAI, or any OpenAI-compatible endpoint. No fork, no patching, no rebuild.",
   "keywords": [
     "pi",

package/public/inject.js

@@ -17,9 +17,6 @@
     window.__PI_WEB_VOICE__ || {},
   );
 
-  // A press shorter than this latches recording on, so a tap toggles and a
-  // long press is walkie-talkie. No setting needed: the gesture says which.
-  const HOLD_THRESHOLD_MS = 400;
   const MAX_SECONDS = 180;
   const SHORTCUT = "mod+shift+v";
 
@@ -89,24 +86,24 @@
   const zh = (navigator.language || "").toLowerCase().startsWith("zh");
   const T = zh
     ? {
-        idle: "语音输入 — 点击开始，或按住说话",
+        idle: "语音输入 — 点击开始，再点一次结束",
         recording: "正在录音 — 点击停止",
-        holding: "松开结束录音",
         working: "转写中…",
         insecure: "浏览器只在 HTTPS 或 localhost 下允许使用麦克风",
         denied: "麦克风权限被拒绝",
         empty: "没有识别到语音",
         failed: "转写失败",
+        noComposer: "找不到输入框，转写结果",
       }
     : {
-        idle: "Voice input — click, or press and hold",
+        idle: "Voice input — click to start, click again to stop",
         recording: "Recording — click to stop",
-        holding: "Release to stop",
         working: "Transcribing…",
         insecure: "Microphone needs HTTPS or localhost",
         denied: "Microphone permission denied",
         empty: "No speech detected",
         failed: "Transcription failed",
+        noComposer: "No composer found; transcript",
       };
 
   // ── audio ────────────────────────────────────────────────────────────────
@@ -224,10 +221,26 @@
 
   // ── composer ─────────────────────────────────────────────────────────────
 
+  // "The last visible textarea" is not good enough: pi-web's workspace
+  // terminal is xterm.js, which keeps a hidden IME helper textarea mounted
+  // after the composer. Writing there drops the transcript at best, and at
+  // worst hands it to the shell.
+  function isComposerCandidate(area) {
+    if (area.offsetParent === null) return false;
+    if (area.classList.contains("xterm-helper-textarea")) return false;
+    return !area.closest(".xterm");
+  }
+
   function findComposer() {
-    const areas = Array.from(document.querySelectorAll("textarea")).filter(
-      (area) => area.offsetParent !== null,
-    );
+    // The button was mounted next to the composer's own toolbar, so walking up
+    // from it finds the right textarea even when the page holds several.
+    const button = document.getElementById(BUTTON_ID);
+    for (let node = button?.parentElement; node; node = node.parentElement) {
+      const nearby = Array.from(node.querySelectorAll("textarea")).filter(isComposerCandidate);
+      if (nearby.length) return nearby[nearby.length - 1];
+    }
+
+    const areas = Array.from(document.querySelectorAll("textarea")).filter(isComposerCandidate);
     return areas[areas.length - 1] || null;
   }
 
@@ -325,30 +338,16 @@
         "transition:color .15s,background .15s,transform .1s",
       ].join(";");
 
-      // One button, two gestures. A quick tap latches recording on and the
-      // next tap ends it; holding records only while held.
-      let pressedAt = 0;
-      let latched = false;
-
-      button.addEventListener("pointerdown", (event) => {
-        event.preventDefault();
-        if (this.state === "recording") {
-          latched = false;
-          this.stop();
-          return;
-        }
-        pressedAt = Date.now();
-        latched = false;
-        this.start();
-      });
+      // One button, one gesture: click to start, click again to stop. Going
+      // through `click` rather than pointer events is what makes the keyboard,
+      // VoiceOver and the accessibility API able to press it at all — none of
+      // them produce pointer events.
+      button.addEventListener("click", () => this.toggle());
 
-      const release = () => {
-        if (this.state !== "recording" || latched) return;
-        if (Date.now() - pressedAt < HOLD_THRESHOLD_MS) latched = true; // a tap
-        else this.stop(); // a hold
-      };
-      button.addEventListener("pointerup", release);
-      button.addEventListener("pointercancel", release);
+      // A button steals focus from the composer on mousedown. Refusing that
+      // default keeps the caret where it was, and on a phone keeps the
+      // on-screen keyboard from collapsing under the composer.
+      button.addEventListener("mousedown", (event) => event.preventDefault());
 
       anchor.parentElement.insertBefore(button, anchor);
       this.button = button;
@@ -453,7 +452,10 @@
           // Always inserted, never sent: a wrong term is one keystroke from
           // being fixed, and Enter is right there when it is correct.
           const textarea = findComposer();
+          // Never fail silently: a transcript with nowhere to go is shown
+          // rather than dropped, so it can still be copied by hand.
           if (textarea) insertAtCaret(textarea, text);
+          else this.toast(`${T.noComposer}: ${text}`);
         }
       } catch (error) {
         this.toast(`${T.failed}: ${error.message}`);
@@ -516,6 +518,7 @@
     ui,
     recorder,
     config: CONFIG,
+    findComposer,
     get sessionId() {
       return sessionId;
     },