File size: 3,291 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | import { useEffect, useRef, useMemo } from 'react';
import { useRecoilState } from 'recoil';
import { useToastContext } from '@librechat/client';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
import useGetAudioSettings from './useGetAudioSettings';
import store from '~/store';
const useSpeechToTextBrowser = (
setText: (text: string) => void,
onTranscriptionComplete: (text: string) => void,
) => {
const { showToast } = useToastContext();
const { speechToTextEndpoint } = useGetAudioSettings();
const isBrowserSTTEnabled = speechToTextEndpoint === 'browser';
const lastTranscript = useRef<string | null>(null);
const lastInterim = useRef<string | null>(null);
const timeoutRef = useRef<NodeJS.Timeout | null>();
const [autoSendText] = useRecoilState(store.autoSendText);
const [languageSTT] = useRecoilState<string>(store.languageSTT);
const [autoTranscribeAudio] = useRecoilState<boolean>(store.autoTranscribeAudio);
const {
listening,
finalTranscript,
resetTranscript,
interimTranscript,
isMicrophoneAvailable,
browserSupportsSpeechRecognition,
} = useSpeechRecognition();
const isListening = useMemo(() => listening, [listening]);
useEffect(() => {
if (interimTranscript == null || interimTranscript === '') {
return;
}
if (lastInterim.current === interimTranscript) {
return;
}
setText(interimTranscript);
lastInterim.current = interimTranscript;
}, [setText, interimTranscript]);
useEffect(() => {
if (finalTranscript == null || finalTranscript === '') {
return;
}
if (lastTranscript.current === finalTranscript) {
return;
}
setText(finalTranscript);
lastTranscript.current = finalTranscript;
if (autoSendText > -1 && finalTranscript.length > 0) {
timeoutRef.current = setTimeout(() => {
onTranscriptionComplete(finalTranscript);
resetTranscript();
}, autoSendText * 1000);
}
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
};
}, [setText, onTranscriptionComplete, resetTranscript, finalTranscript, autoSendText]);
const toggleListening = () => {
if (!browserSupportsSpeechRecognition) {
showToast({
message: 'Browser does not support SpeechRecognition',
status: 'error',
});
return;
}
if (!isMicrophoneAvailable) {
showToast({
message: 'Microphone is not available',
status: 'error',
});
return;
}
if (isListening === true) {
SpeechRecognition.stopListening();
} else {
SpeechRecognition.startListening({
language: languageSTT,
continuous: autoTranscribeAudio,
});
}
};
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.shiftKey && e.altKey && e.code === 'KeyL' && !isBrowserSTTEnabled) {
toggleListening();
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, []);
return {
isListening,
isLoading: false,
startRecording: toggleListening,
stopRecording: toggleListening,
};
};
export default useSpeechToTextBrowser;
|