opencode-voice-dictation 0.0.0-stage → 0.2.0

package/src/gui/settings.tsx

@@ -0,0 +1,297 @@
+import { createSignal, onMount, Show } from "solid-js"
+import { usePlugin } from "@opencode/plugin/gui"
+import { Dictation, VoiceTyping } from "./contract"
+import type { definition } from "./definition"
+import type { Speaker } from "./speak"
+
+const FALLBACK_LOCALES = [
+  "es-ES",
+  "es-MX",
+  "es-AR",
+  "es-CO",
+  "pt-BR",
+  "pt-PT",
+  "en-US",
+  "en-GB",
+  "fr-FR",
+  "de-DE",
+  "it-IT",
+]
+
+/**
+ * Settings page. It only reads and writes the declared store; the engine is
+ * asked for installed languages when the page mounts.
+ */
+export function VoiceSettings(props: { speaker: Speaker }) {
+  const ctx = usePlugin<typeof definition>()
+  const ui = ctx.ui
+  const prefs = ctx.stores.prefs
+  const speechPrefs = ctx.stores.speech
+  const enginePrefs = ctx.stores.engine
+  const dictation = ctx.main(Dictation)
+  const voiceTyping = ctx.main(VoiceTyping)
+
+  const [locales, setLocales] = createSignal<readonly string[]>([])
+  const [busy, setBusy] = createSignal(false)
+
+  onMount(() => {
+    void dictation
+      .diagnose()
+      .then((result) => {
+        if (result.locales.length > 0) setLocales(result.locales)
+      })
+      .catch(() => {})
+    void props.speaker.refreshVoices()
+  })
+
+  const localeOptions = () => {
+    const list = locales()
+    const current = prefs.value.locale
+    const merged = list.includes(current) ? list : [current, ...list]
+    return merged.map((value) => ({ value, label: value }))
+  }
+
+  const voiceOptions = () => [
+    { value: "", label: ctx.t("speech.voice.auto") },
+    ...props.speaker.voices().map((voice) => ({ value: voice.id, label: voice.label })),
+  ]
+
+  const patch = (change: { locale?: string; minConfidence?: number; trailingSpace?: boolean; autoFocus?: boolean }) => {
+    prefs.update((draft) => {
+      if (change.locale !== undefined) draft.locale = change.locale
+      if (change.minConfidence !== undefined) draft.minConfidence = change.minConfidence
+      if (change.trailingSpace !== undefined) draft.trailingSpace = change.trailingSpace
+      if (change.autoFocus !== undefined) draft.autoFocus = change.autoFocus
+    })
+  }
+
+  const patchSpeech = (change: { voiceURI?: string; rate?: number; skipCode?: boolean }) => {
+    speechPrefs.update((draft) => {
+      if (change.voiceURI !== undefined) draft.voiceURI = change.voiceURI
+      if (change.rate !== undefined) draft.rate = change.rate
+      if (change.skipCode !== undefined) draft.skipCode = change.skipCode
+    })
+  }
+
+  const patchEngine = (mode: string) => {
+    enginePrefs.update((draft) => {
+      draft.mode = mode
+    })
+  }
+
+  const testWinH = async () => {
+    try {
+      await voiceTyping.toggle()
+      ctx.toast.show({
+        variant: "default",
+        title: ctx.t("settings.winh"),
+        description: ctx.t("settings.winh.sent"),
+      })
+    } catch (cause) {
+      ctx.toast.show({
+        variant: "error",
+        title: ctx.t("pill.title"),
+        description: cause instanceof Error ? cause.message : ctx.t("error.winh"),
+      })
+    }
+  }
+
+  const preview = async () => {
+    try {
+      await props.speaker.preview()
+    } catch (cause) {
+      ctx.toast.show({
+        variant: "error",
+        title: ctx.t("read.title"),
+        description: cause instanceof Error ? cause.message : ctx.t("read.error"),
+      })
+    }
+  }
+
+  const test = async () => {
+    setBusy(true)
+    try {
+      const result = await dictation.diagnose()
+
+      if (result.locales.length === 0) {
+        ctx.toast.show({
+          variant: "error",
+          title: ctx.t("error.title"),
+          description: ctx.t("settings.test.failed", { reason: ctx.t("common.reason.no-recognizers") }),
+          persistent: true,
+        })
+        return
+      }
+
+      if (!result.microphone) {
+        ctx.toast.show({
+          variant: "error",
+          title: ctx.t("error.title"),
+          description: ctx.t("settings.test.failed", { reason: ctx.t("common.reason.no-microphone") }),
+          persistent: true,
+        })
+        return
+      }
+
+      if (result.locales.length > 0 && !locales().length) setLocales(result.locales)
+
+      ctx.toast.show({
+        variant: "success",
+        title: ctx.t("error.title"),
+        description: ctx.t("settings.test.success", { locale: result.selected || result.locales[0] || prefs.value.locale }),
+      })
+    } catch (cause) {
+      ctx.toast.show({
+        variant: "error",
+        title: ctx.t("error.title"),
+        description: cause instanceof Error ? cause.message : String(cause),
+      })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <ui.SettingsLayout title={ctx.t("settings.title")} description={ctx.t("settings.description")}>
+      <ui.SettingsSection title={ctx.t("settings.section")}>
+        <ui.SettingsRow
+          id="engine"
+          title={ctx.t("settings.engine")}
+          description={ctx.t("settings.engine.description")}
+        >
+          <ui.Select
+            label={ctx.t("settings.engine")}
+            value={enginePrefs.value.mode}
+            options={[
+              { value: "windows", label: ctx.t("engine.windows") },
+              { value: "system", label: ctx.t("engine.system") },
+            ]}
+            onChange={(value) => patchEngine(value)}
+          />
+        </ui.SettingsRow>
+
+        <Show when={enginePrefs.value.mode === "windows"}>
+          <ui.SettingsRow
+            id="winh"
+            title={ctx.t("settings.winh")}
+            description={ctx.t("settings.winh.description")}
+          >
+            <ui.Button onClick={() => void testWinH()}>{ctx.t("settings.winh.run")}</ui.Button>
+          </ui.SettingsRow>
+        </Show>
+
+        <Show when={enginePrefs.value.mode === "system"}>
+          <ui.SettingsRow
+            id="language"
+            title={ctx.t("settings.language")}
+            description={ctx.t("settings.language.description")}
+          >
+            <ui.Select
+              label={ctx.t("settings.language")}
+              value={prefs.value.locale}
+              options={localeOptions().length > 0 ? localeOptions() : FALLBACK_LOCALES.map((value) => ({ value, label: value }))}
+              onChange={(value) => patch({ locale: value })}
+            />
+          </ui.SettingsRow>
+
+          <ui.SettingsRow
+            id="confidence"
+            title={ctx.t("settings.confidence")}
+            description={ctx.t("settings.confidence.description")}
+          >
+            <ui.Select
+              label={ctx.t("settings.confidence")}
+              value={String(prefs.value.minConfidence)}
+              options={[
+                { value: "0.2", label: ctx.t("confidence.low") },
+                { value: "0.4", label: ctx.t("confidence.normal") },
+                { value: "0.6", label: ctx.t("confidence.high") },
+              ]}
+              onChange={(value) => patch({ minConfidence: Number(value) || 0.4 })}
+            />
+          </ui.SettingsRow>
+
+          <ui.SettingsRow id="space" title={ctx.t("settings.space")} description={ctx.t("settings.space.description")}>
+            <ui.Switch
+              label={ctx.t("settings.space")}
+              hideLabel
+              checked={prefs.value.trailingSpace}
+              onChange={(checked) => patch({ trailingSpace: checked })}
+            />
+          </ui.SettingsRow>
+
+          <ui.SettingsRow id="focus" title={ctx.t("settings.focus")} description={ctx.t("settings.focus.description")}>
+            <ui.Switch
+              label={ctx.t("settings.focus")}
+              hideLabel
+              checked={prefs.value.autoFocus}
+              onChange={(checked) => patch({ autoFocus: checked })}
+            />
+          </ui.SettingsRow>
+        </Show>
+      </ui.SettingsSection>
+
+      <ui.SettingsSection title={ctx.t("speech.section")}>
+        <ui.SettingsRow
+          id="voice"
+          title={ctx.t("speech.voice")}
+          description={ctx.t("speech.voice.description")}
+        >
+          <ui.Select
+            label={ctx.t("speech.voice")}
+            value={speechPrefs.value.voiceURI}
+            options={voiceOptions()}
+            onChange={(value) => patchSpeech({ voiceURI: value })}
+          />
+        </ui.SettingsRow>
+
+        <ui.SettingsRow
+          id="rate"
+          title={ctx.t("speech.rate")}
+          description={ctx.t("speech.rate.description")}
+        >
+          <ui.Select
+            label={ctx.t("speech.rate")}
+            value={String(speechPrefs.value.rate)}
+            options={[
+              { value: "0.8", label: ctx.t("speech.rate.slow") },
+              { value: "1", label: ctx.t("speech.rate.normal") },
+              { value: "1.2", label: ctx.t("speech.rate.fast") },
+              { value: "1.5", label: ctx.t("speech.rate.faster") },
+            ]}
+            onChange={(value) => patchSpeech({ rate: Number(value) || 1 })}
+          />
+        </ui.SettingsRow>
+
+        <ui.SettingsRow
+          id="skip-code"
+          title={ctx.t("speech.skipCode")}
+          description={ctx.t("speech.skipCode.description")}
+        >
+          <ui.Switch
+            label={ctx.t("speech.skipCode")}
+            hideLabel
+            checked={speechPrefs.value.skipCode}
+            onChange={(checked) => patchSpeech({ skipCode: checked })}
+          />
+        </ui.SettingsRow>
+
+        <ui.SettingsRow
+          id="preview"
+          title={ctx.t("speech.preview")}
+          description={ctx.t("speech.preview.description")}
+        >
+          <ui.Button onClick={() => void preview()}>{ctx.t("read.idle")}</ui.Button>
+        </ui.SettingsRow>
+      </ui.SettingsSection>
+
+      <ui.SettingsSection title={ctx.t("settings.test.section")}>
+        <ui.SettingsRow id="test" title={ctx.t("settings.test")} description={ctx.t("settings.test.description")}>
+          <ui.Button busy={busy()} onClick={() => void test()}>
+            {ctx.t("settings.test.run")}
+          </ui.Button>
+        </ui.SettingsRow>
+      </ui.SettingsSection>
+    </ui.SettingsLayout>
+  )
+}

package/src/gui/speak.ts

@@ -0,0 +1,260 @@
+import { createSignal } from "solid-js"
+import type { IpcClient, SetupContext } from "@opencode/plugin/gui"
+import { Speech } from "./contract"
+import type { definition } from "./definition"
+
+export interface VoiceOption {
+  id: string
+  label: string
+}
+
+export interface Speaker {
+  speaking(): boolean
+  backend(): "web" | "sapi" | "none"
+  voices(): VoiceOption[]
+  refreshVoices(): Promise<void>
+  lastAssistantText(): Promise<string>
+  speak(text: string): Promise<boolean>
+  cancel(): void
+  preview(): Promise<boolean>
+}
+
+const MAX_CHUNK = 250
+
+/** Turns Markdown into something worth hearing. */
+export function cleanForSpeech(text: string, skipCode: boolean): string {
+  let value = text.replace(/\r\n/g, "\n")
+
+  if (skipCode) {
+    value = value.replace(/```[\s\S]*?```/g, " ")
+  } else {
+    value = value.replace(/```[^\n]*\n([\s\S]*?)```/g, "$1")
+  }
+
+  value = value.replace(/`([^`]+)`/g, "$1")
+  value = value.replace(/!\[[^\]]*\]\([^)]*\)/g, " ")
+  value = value.replace(/\[([^\]]+)\]\([^)]*\)/g, "$1")
+  value = value.replace(/^\s*#{1,6}\s+/gm, "")
+  value = value.replace(/^\s*>\s?/gm, "")
+  value = value.replace(/^\s*[-*+]\s+/gm, "")
+  value = value.replace(/^\s*\d+\.\s+/gm, "")
+  value = value.replace(/(\*\*|__)(.*?)\1/g, "$2")
+  value = value.replace(/(\*|_)(.*?)\1/g, "$2")
+  value = value.replace(/^\s*\|.*\|\s*$/gm, " ")
+  value = value.replace(/\n{2,}/g, ". ")
+  value = value.replace(/\n/g, " ")
+  value = value.replace(/\s+/g, " ")
+  value = value.replace(/\s+([.,;:!?])/g, "$1")
+  value = value.replace(/([.,;:!?]){2,}/g, "$1")
+
+  return value.trim()
+}
+
+/** Splits at sentence boundaries, then at word boundaries for long sentences. */
+export function chunkForSpeech(text: string, max = MAX_CHUNK): string[] {
+  const trimmed = text.trim()
+  if (!trimmed) return []
+
+  const sentences = trimmed.split(/(?<=[.!?…])\s+/)
+  const chunks: string[] = []
+  let current = ""
+
+  const pushWords = (sentence: string) => {
+    let part = ""
+    for (const word of sentence.split(/\s+/)) {
+      if (!word) continue
+      if (part && part.length + 1 + word.length > max) {
+        chunks.push(part)
+        part = word
+      } else {
+        part = part ? `${part} ${word}` : word
+      }
+    }
+    return part
+  }
+
+  for (const sentence of sentences) {
+    if (sentence.length > max) {
+      if (current) {
+        chunks.push(current)
+        current = ""
+      }
+      current = pushWords(sentence)
+      continue
+    }
+
+    if (current && current.length + 1 + sentence.length > max) {
+      chunks.push(current)
+      current = sentence
+    } else {
+      current = current ? `${current} ${sentence}` : sentence
+    }
+  }
+
+  if (current) chunks.push(current)
+  return chunks
+}
+
+export function createSpeaker(
+  ctx: SetupContext<typeof definition>,
+  speech: IpcClient<typeof Speech.spec>,
+): Speaker {
+  const prefs = ctx.stores.speech
+
+  const [speaking, setSpeaking] = createSignal(false)
+  const [voices, setVoices] = createSignal<VoiceOption[]>([])
+  const [backend, setBackend] = createSignal<"web" | "sapi" | "none">("none")
+
+  let generation = 0
+  let queue: string[] = []
+
+  const synth = () =>
+    typeof globalThis.speechSynthesis !== "undefined" ? globalThis.speechSynthesis : undefined
+
+  const pickVoice = () => {
+    const available = synth()?.getVoices() ?? []
+    if (available.length === 0) return undefined
+
+    const wanted = prefs.value.voiceURI
+    if (wanted) {
+      const chosen = available.find((voice) => voice.voiceURI === wanted)
+      if (chosen) return chosen
+    }
+
+    const base = ctx.locale.locale().split("-")[0]?.toLowerCase() ?? "es"
+    return available.find((voice) => voice.lang.toLowerCase().startsWith(base)) ?? available[0]
+  }
+
+  const refreshVoices = async () => {
+    const available = synth()?.getVoices() ?? []
+
+    if (available.length > 0) {
+      setVoices(
+        available.map((voice) => ({
+          id: voice.voiceURI,
+          label: `${voice.name} — ${voice.lang}`,
+        })),
+      )
+      setBackend("web")
+      return
+    }
+
+    try {
+      const names = await speech.voices()
+      if (names.length > 0) {
+        setVoices(names.map((name) => ({ id: name, label: name })))
+        setBackend("sapi")
+        return
+      }
+    } catch {
+      // Main is unreachable or PowerShell failed; treat as no voices.
+    }
+
+    setBackend("none")
+  }
+
+  const cancel = () => {
+    generation++
+    queue = []
+    synth()?.cancel()
+    setSpeaking(false)
+    void speech.stop().catch(() => {})
+  }
+
+  const speak = async (text: string) => {
+    const cleaned = cleanForSpeech(text, prefs.value.skipCode)
+    if (!cleaned) return false
+
+    cancel()
+    await refreshVoices()
+
+    if (backend() === "web") {
+      const engine = synth()
+      if (!engine) return false
+
+      const voice = pickVoice()
+      const rate = prefs.value.rate
+      const gen = generation
+      queue = chunkForSpeech(cleaned)
+      setSpeaking(true)
+
+      const pump = () => {
+        if (gen !== generation) return
+        const next = queue.shift()
+        if (!next) {
+          setSpeaking(false)
+          return
+        }
+
+        const utterance = new SpeechSynthesisUtterance(next)
+        if (voice) utterance.voice = voice
+        if (voice?.lang) utterance.lang = voice.lang
+        utterance.rate = rate
+        utterance.onend = pump
+        utterance.onerror = pump
+        engine.speak(utterance)
+      }
+
+      pump()
+      return true
+    }
+
+    if (backend() === "sapi") {
+      setSpeaking(true)
+      try {
+        await speech.speak({
+          text: cleaned,
+          rate: prefs.value.rate,
+          voice: prefs.value.voiceURI,
+        })
+      } catch (cause) {
+        setSpeaking(false)
+        throw cause
+      }
+      return true
+    }
+
+    setSpeaking(false)
+    throw new Error(ctx.t("read.noVoices"))
+  }
+
+  const lastAssistantText = async () => {
+    const session = ctx.sessions.current()
+    if (!session) return ""
+
+    // The session may live on another server than the one that runs the plugin
+    // (the desktop app can show WSL and Windows servers side by side), so ask
+    // the session's own server instead of `ctx.client`.
+    const page = await session.server.client.message.list({
+      sessionID: session.id,
+      type: "assistant",
+      order: "desc",
+      limit: 1,
+    })
+
+    const message = page.data[0]
+    if (!message || message.type !== "assistant") return ""
+
+    return message.content
+      .filter((part) => part.type === "text")
+      .map((part) => part.text)
+      .join("\n")
+  }
+
+  speech.on("done", () => setSpeaking(false))
+
+  const engine = synth()
+  engine?.addEventListener?.("voiceschanged", () => void refreshVoices())
+  void refreshVoices()
+
+  return {
+    speaking,
+    backend,
+    voices,
+    refreshVoices,
+    lastAssistantText,
+    speak,
+    cancel,
+    preview: () => speak(ctx.t("speech.preview.text")),
+  }
+}