Add provider-backed dictation mode (#1327)

2026-08-05 06:24:37 +00:00 · 2026-08-03 06:05:58 +08:00
parent abf9cb02a5
commit 9d07857570
22 changed files with 934 additions and 43 deletions
@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { ApiClient } from '@/api/client'
+import type {
+    TranscriptionMode,
+    TranscriptionProvider,
+    TranscriptionProviderInfo,
+    VoiceMode
+} from '@hapi/protocol/voice'
+
+const VOICE_MODE_KEY = 'hapi-voice-mode'
+const TRANSCRIPTION_PROVIDER_KEY = 'hapi-transcription-provider'
+const TRANSCRIPTION_MODE_KEY = 'hapi-transcription-mode'
+const CHANGE_EVENT = 'hapi-voice-input-change'
+
+function notifyChange(): void {
+    window.dispatchEvent(new Event(CHANGE_EVENT))
+}
+
+function readVoiceMode(): VoiceMode {
+    return localStorage.getItem(VOICE_MODE_KEY) === 'dictation' ? 'dictation' : 'assistant'
+}
+
+function resolveProvider(
+    providers: readonly TranscriptionProviderInfo[],
+    stored: string | null
+): TranscriptionProvider | null {
+    return providers.find((provider) => provider.id === stored)?.id ?? providers[0]?.id ?? null
+}
+
+function resolveMode(
+    providers: readonly TranscriptionProviderInfo[],
+    provider: TranscriptionProvider | null,
+    stored: string | null
+): TranscriptionMode {
+    const modes = providers.find((candidate) => candidate.id === provider)?.modes ?? ['standard']
+    return stored === 'realtime' && modes.includes('realtime') ? 'realtime' : 'standard'
+}
+
+export function useVoiceInputPreferences(api: ApiClient | null) {
+    const [voiceMode, setVoiceModeState] = useState<VoiceMode>(readVoiceMode)
+    const [providers, setProviders] = useState<TranscriptionProviderInfo[]>([])
+    const [provider, setProviderState] = useState<TranscriptionProvider | null>(null)
+    const [transcriptionMode, setTranscriptionModeState] = useState<TranscriptionMode>('standard')
+
+    useEffect(() => {
+        if (!api) return
+        let cancelled = false
+        api.fetchTranscriptionProviders().then(({ providers: available }) => {
+            if (cancelled) return
+            setProviders(available)
+            const selectedProvider = resolveProvider(available, localStorage.getItem(TRANSCRIPTION_PROVIDER_KEY))
+            setProviderState(selectedProvider)
+            setTranscriptionModeState(resolveMode(available, selectedProvider, localStorage.getItem(TRANSCRIPTION_MODE_KEY)))
+        }).catch(() => {
+            if (!cancelled) setProviders([])
+        })
+        return () => { cancelled = true }
+    }, [api])
+
+    useEffect(() => {
+        const sync = () => {
+            setVoiceModeState(readVoiceMode())
+            const selectedProvider = resolveProvider(providers, localStorage.getItem(TRANSCRIPTION_PROVIDER_KEY))
+            setProviderState(selectedProvider)
+            setTranscriptionModeState(resolveMode(providers, selectedProvider, localStorage.getItem(TRANSCRIPTION_MODE_KEY)))
+        }
+        window.addEventListener('storage', sync)
+        window.addEventListener(CHANGE_EVENT, sync)
+        return () => {
+            window.removeEventListener('storage', sync)
+            window.removeEventListener(CHANGE_EVENT, sync)
+        }
+    }, [providers])
+
+    const setVoiceMode = useCallback((value: VoiceMode) => {
+        localStorage.setItem(VOICE_MODE_KEY, value)
+        setVoiceModeState(value)
+        notifyChange()
+    }, [])
+
+    const setProvider = useCallback((value: TranscriptionProvider) => {
+        const nextMode = resolveMode(providers, value, localStorage.getItem(TRANSCRIPTION_MODE_KEY))
+        localStorage.setItem(TRANSCRIPTION_PROVIDER_KEY, value)
+        localStorage.setItem(TRANSCRIPTION_MODE_KEY, nextMode)
+        setProviderState(value)
+        setTranscriptionModeState(nextMode)
+        notifyChange()
+    }, [providers])
+
+    const setTranscriptionMode = useCallback((value: TranscriptionMode) => {
+        const nextMode = resolveMode(providers, provider, value)
+        localStorage.setItem(TRANSCRIPTION_MODE_KEY, nextMode)
+        setTranscriptionModeState(nextMode)
+        notifyChange()
+    }, [provider, providers])
+
+    return {
+        voiceMode,
+        setVoiceMode,
+        providers,
+        provider,
+        setProvider,
+        transcriptionMode,
+        setTranscriptionMode,
+        modes: providers.find((candidate) => candidate.id === provider)?.modes ?? ['standard']
+    }
+}