import { useCallback, useEffect, useRef, useState } from 'react';
import { useVoiceSession } from '../hooks/useVoiceSession';
import { shouldShowVoiceInputControl, isVoiceInputAvailable } from '../voice/capabilities';
import { isWechatBrowser } from '../utils/wechat';
import {
checkWechatVoiceApis,
isWechatVoiceReady,
prepareWechatVoiceSdk,
startWechatVoiceRecord,
stopWechatVoiceRecord,
translateWechatVoice,
} from '../voice/wechatVoice';
function MicIcon() {
return (
);
}
function VoiceActiveIcon() {
return (
);
}
export function VoiceInputButton({
disabled = false,
onTranscript,
onLiveTranscript,
onVoiceStart,
onVoiceComplete,
onRecordingChange,
onError,
stopSignal = 0,
}: {
disabled?: boolean;
onTranscript?: (text: string) => void;
onLiveTranscript?: (text: string) => void;
onVoiceStart?: () => void;
onVoiceComplete?: () => void;
onRecordingChange?: (recording: boolean) => void;
onError?: (message: string) => void;
stopSignal?: number;
}) {
const [available, setAvailable] = useState(true);
const [browserActive, setBrowserActive] = useState(false);
const [wechatReady, setWechatReady] = useState(false);
const [wechatApiAvailable, setWechatApiAvailable] = useState(false);
const [wechatPrepareError, setWechatPrepareError] = useState(null);
const [wechatPhase, setWechatPhase] = useState<'idle' | 'requesting' | 'recording' | 'transcribing'>('idle');
const wechatPhaseRef = useRef(wechatPhase);
const pendingWechatStopRef = useRef(false);
const startedAtRef = useRef(0);
const startingRef = useRef(false);
const browserCommittedRef = useRef(false);
const prevRecordingRef = useRef(false);
const lastStopSignalRef = useRef(stopSignal);
useEffect(() => {
setAvailable(isVoiceInputAvailable());
}, []);
useEffect(() => {
wechatPhaseRef.current = wechatPhase;
}, [wechatPhase]);
const wechatMode = isWechatBrowser();
const wechatBusy = wechatPhase === 'requesting' || wechatPhase === 'transcribing';
const wechatRecording = wechatPhase === 'recording';
const wechatUnavailable = wechatMode && (!wechatReady || !wechatApiAvailable || !!wechatPrepareError);
const {
phase: browserPhase,
text: browserText,
liveRecognition,
stopListening,
finishFallbackRecording,
resetSession,
} = useVoiceSession({
active: !wechatMode && browserActive && !disabled,
onError,
});
const browserBusy = browserPhase === 'requesting' || browserPhase === 'transcribing';
const browserListening = browserPhase === 'listening';
const recording = wechatRecording || browserListening;
const busy = wechatMode ? wechatBusy : browserBusy;
const blocked = disabled || !available || busy;
useEffect(() => {
if (recording && !prevRecordingRef.current) {
onVoiceStart?.();
}
prevRecordingRef.current = recording;
onRecordingChange?.(recording);
}, [onRecordingChange, onVoiceStart, recording]);
useEffect(() => {
if (wechatMode || !browserListening || !onLiveTranscript) return;
onLiveTranscript(browserText);
}, [browserListening, browserText, onLiveTranscript, wechatMode]);
useEffect(() => {
if (wechatMode || !browserActive) return;
if (browserPhase === 'ready') {
const transcript = browserText.trim();
if (transcript && !browserCommittedRef.current) {
browserCommittedRef.current = true;
if (liveRecognition) {
onVoiceComplete?.();
} else {
onTranscript?.(transcript);
}
}
setBrowserActive(false);
return;
}
if (browserPhase === 'error') {
setBrowserActive(false);
}
}, [browserActive, browserPhase, browserText, liveRecognition, onTranscript, onVoiceComplete, wechatMode]);
useEffect(() => {
if (browserActive || wechatMode) return;
browserCommittedRef.current = false;
resetSession();
}, [browserActive, resetSession, wechatMode]);
useEffect(() => {
if (stopSignal === lastStopSignalRef.current) return;
lastStopSignalRef.current = stopSignal;
setBrowserActive(false);
if (wechatMode) {
void stopWechatVoiceRecord().catch(() => {
// best-effort stop when the parent explicitly ends the current draft
});
setWechatPhase('idle');
pendingWechatStopRef.current = false;
}
}, [stopSignal, wechatMode]);
useEffect(() => {
if (!wechatMode) return;
let cancelled = false;
setWechatReady(isWechatVoiceReady());
setWechatApiAvailable(false);
prepareWechatVoiceSdk()
.then(() => {
if (cancelled) return;
setWechatReady(true);
setWechatPrepareError(null);
return checkWechatVoiceApis();
})
.then((result) => {
if (cancelled || !result) return;
const unavailable = ['startRecord', 'stopRecord', 'translateVoice'].filter((api) => result[api] === false);
if (unavailable.length) {
setWechatApiAvailable(false);
setWechatPrepareError(`微信语音接口不可用:${unavailable.join(', ')}`);
return;
}
setWechatApiAvailable(true);
})
.catch((err) => {
if (cancelled) return;
setWechatReady(false);
setWechatApiAvailable(false);
setWechatPrepareError(err instanceof Error ? err.message : '微信语音初始化失败');
});
return () => {
cancelled = true;
};
}, [wechatMode]);
const commitWechatTranscript = useCallback(
(text: string) => {
const value = text.trim();
if (!value) {
onError?.('未识别到语音,请重试');
return;
}
onTranscript?.(value);
},
[onError, onTranscript],
);
const finishWechatRecording = useCallback(
async (localId?: string) => {
if (wechatPhaseRef.current === 'idle') return;
const duration = Date.now() - startedAtRef.current;
setWechatPhase('transcribing');
try {
if (duration < 500 && !localId) {
try {
await stopWechatVoiceRecord();
} catch {
// ignore best-effort cleanup for very short taps
}
onError?.('说话时间太短');
return;
}
const voiceId = localId || (await stopWechatVoiceRecord());
const text = await translateWechatVoice(voiceId);
commitWechatTranscript(text);
} catch (err) {
onError?.(err instanceof Error ? err.message : '微信语音识别失败');
} finally {
pendingWechatStopRef.current = false;
setWechatPhase('idle');
}
},
[commitWechatTranscript, onError],
);
const beginWechatRecording = useCallback(
async () => {
if (startingRef.current || wechatPhaseRef.current !== 'idle') return;
if (blocked) {
if (!available) onError?.('当前浏览器不支持语音输入');
return;
}
if (!isWechatVoiceReady() || !wechatApiAvailable) {
setWechatReady(false);
void prepareWechatVoiceSdk()
.then(() => {
setWechatReady(true);
setWechatPrepareError(null);
return checkWechatVoiceApis();
})
.then((result) => {
if (!result) return;
const unavailable = ['startRecord', 'stopRecord', 'translateVoice'].filter((api) => result[api] === false);
if (unavailable.length) {
setWechatApiAvailable(false);
setWechatPrepareError(`微信语音接口不可用:${unavailable.join(', ')}`);
return;
}
setWechatApiAvailable(true);
})
.catch((err) => {
setWechatReady(false);
setWechatApiAvailable(false);
setWechatPrepareError(err instanceof Error ? err.message : '微信语音初始化失败');
});
onError?.(wechatPrepareError || '微信语音初始化中,请稍后再试');
return;
}
pendingWechatStopRef.current = false;
startedAtRef.current = Date.now();
startingRef.current = true;
setWechatPhase('requesting');
try {
await startWechatVoiceRecord((localId) => {
void finishWechatRecording(localId);
});
setWechatPhase('recording');
if (pendingWechatStopRef.current) {
void finishWechatRecording();
}
} catch (err) {
pendingWechatStopRef.current = false;
setWechatPhase('idle');
onError?.(err instanceof Error ? err.message : '微信语音启动失败');
} finally {
startingRef.current = false;
}
},
[available, blocked, finishWechatRecording, onError, wechatApiAvailable, wechatPrepareError],
);
if (!shouldShowVoiceInputControl()) return null;
return (
);
}