File size: 4,056 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 119 120 121 122 123 124 125 126 127 128 | import { useCallback, useRef } from 'react';
import { useToastContext, TooltipAnchor, ListeningIcon, Spinner } from '@librechat/client';
import { useLocalize, useSpeechToText, useGetAudioSettings } from '~/hooks';
import { useChatFormContext } from '~/Providers';
import { globalAudioId } from '~/common';
import { cn } from '~/utils';
const isExternalSTT = (speechToTextEndpoint: string) => speechToTextEndpoint === 'external';
export default function AudioRecorder({
disabled,
ask,
methods,
textAreaRef,
isSubmitting,
}: {
disabled: boolean;
ask: (data: { text: string }) => void;
methods: ReturnType<typeof useChatFormContext>;
textAreaRef: React.RefObject<HTMLTextAreaElement>;
isSubmitting: boolean;
}) {
const { setValue, reset, getValues } = methods;
const localize = useLocalize();
const { showToast } = useToastContext();
const { speechToTextEndpoint } = useGetAudioSettings();
const existingTextRef = useRef<string>('');
const onTranscriptionComplete = useCallback(
(text: string) => {
if (isSubmitting) {
showToast({
message: localize('com_ui_speech_while_submitting'),
status: 'error',
});
return;
}
if (text) {
const globalAudio = document.getElementById(globalAudioId) as HTMLAudioElement | null;
if (globalAudio) {
console.log('Unmuting global audio');
globalAudio.muted = false;
}
/** For external STT, append existing text to the transcription */
const finalText =
isExternalSTT(speechToTextEndpoint) && existingTextRef.current
? `${existingTextRef.current} ${text}`
: text;
ask({ text: finalText });
reset({ text: '' });
existingTextRef.current = '';
}
},
[ask, reset, showToast, localize, isSubmitting, speechToTextEndpoint],
);
const setText = useCallback(
(text: string) => {
let newText = text;
if (isExternalSTT(speechToTextEndpoint)) {
/** For external STT, the text comes as a complete transcription, so append to existing */
newText = existingTextRef.current ? `${existingTextRef.current} ${text}` : text;
} else {
/** For browser STT, the transcript is cumulative, so we only need to prepend the existing text once */
newText = existingTextRef.current ? `${existingTextRef.current} ${text}` : text;
}
setValue('text', newText, {
shouldValidate: true,
});
},
[setValue, speechToTextEndpoint],
);
const { isListening, isLoading, startRecording, stopRecording } = useSpeechToText(
setText,
onTranscriptionComplete,
);
if (!textAreaRef.current) {
return null;
}
const handleStartRecording = async () => {
existingTextRef.current = getValues('text') || '';
startRecording();
};
const handleStopRecording = async () => {
stopRecording();
/** For browser STT, clear the reference since text was already being updated */
if (!isExternalSTT(speechToTextEndpoint)) {
existingTextRef.current = '';
}
};
const renderIcon = () => {
if (isListening === true) {
return <ListeningIcon className="stroke-red-500" />;
}
if (isLoading === true) {
return <Spinner className="stroke-text-secondary" />;
}
return <ListeningIcon className="stroke-text-secondary" />;
};
return (
<TooltipAnchor
description={localize('com_ui_use_micrphone')}
render={
<button
id="audio-recorder"
type="button"
aria-label={localize('com_ui_use_micrphone')}
onClick={isListening === true ? handleStopRecording : handleStartRecording}
disabled={disabled}
className={cn(
'flex size-9 items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover',
)}
title={localize('com_ui_use_micrphone')}
aria-pressed={isListening}
>
{renderIcon()}
</button>
}
/>
);
}
|