File size: 3,089 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 | // client/src/hooks/Audio/useTTSExternal.ts
import { useRef, useEffect, useState } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { parseTextParts } from 'librechat-data-provider';
import type { TMessageContentParts } from 'librechat-data-provider';
import useTextToSpeechExternal from '~/hooks/Input/useTextToSpeechExternal';
import usePauseGlobalAudio from '~/hooks/Audio/usePauseGlobalAudio';
import useAudioRef from '~/hooks/Audio/useAudioRef';
import { logger } from '~/utils';
import store from '~/store';
type TUseTextToSpeech = {
messageId?: string;
content?: TMessageContentParts[] | string;
isLast?: boolean;
index?: number;
};
const useTTSExternal = (props?: TUseTextToSpeech) => {
const { messageId, content, isLast = false, index = 0 } = props ?? {};
const isMouseDownRef = useRef(false);
const timerRef = useRef<number | undefined>(undefined);
const [isSpeakingState, setIsSpeaking] = useState(false);
const { audioRef } = useAudioRef({ setIsPlaying: setIsSpeaking });
const { pauseGlobalAudio } = usePauseGlobalAudio(index);
const [voice, setVoice] = useRecoilState(store.voice);
const globalIsPlaying = useRecoilValue(store.globalAudioPlayingFamily(index));
const isSpeaking = isSpeakingState || (isLast && globalIsPlaying);
const {
cancelSpeech,
generateSpeechExternal: generateSpeech,
isLoading,
voices,
} = useTextToSpeechExternal({
setIsSpeaking,
audioRef,
messageId,
isLast,
index,
});
useEffect(() => {
const firstVoice = voices[0];
if (voices.length) {
const lastSelectedVoice = voices.find((v) => v === voice);
if (lastSelectedVoice != null) {
logger.log('useTextToSpeech.ts - Effect:', { voices, voice: lastSelectedVoice });
setVoice(lastSelectedVoice.toString());
return;
}
logger.log('useTextToSpeech.ts - Effect:', { voices, voice: firstVoice });
setVoice(firstVoice.toString());
}
}, [setVoice, voice, voices]);
const handleMouseDown = () => {
isMouseDownRef.current = true;
timerRef.current = window.setTimeout(() => {
if (isMouseDownRef.current) {
const messageContent = content ?? '';
const parsedMessage =
typeof messageContent === 'string' ? messageContent : parseTextParts(messageContent);
generateSpeech(parsedMessage, false);
}
}, 1000);
};
const handleMouseUp = () => {
isMouseDownRef.current = false;
if (timerRef.current != null) {
window.clearTimeout(timerRef.current);
}
};
const toggleSpeech = () => {
if (isSpeaking === true) {
cancelSpeech();
pauseGlobalAudio();
} else {
const messageContent = content ?? '';
const parsedMessage =
typeof messageContent === 'string' ? messageContent : parseTextParts(messageContent);
generateSpeech(parsedMessage, false);
}
};
return {
handleMouseDown,
handleMouseUp,
toggleSpeech,
isSpeaking,
isLoading,
audioRef,
voices,
};
};
export default useTTSExternal;
|