Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-22 11:20:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🔊 fix(tts): NotAllowedError (mobile/safari), Unsupported MediaSource type (firefox), Hide Audio Element (#2854)

Browse source 
* fix: hide audio element on mobile

* chore: add tts docs link

* fix: select voice option on first render

* fix: NotAllowedError, prevent async playback for mobile triggers, consolidate MessageAudio code, user user-triggered unmutes

* fix: Firefox/unsupported type for MediaSource hack

* refactor(STT): make icon red when recording. consolidate logic to AudioRecorder component

* fix: revert Redis changes to use separate client for sessions
This commit is contained in:
Danny Avila 2024-05-24 12:18:11 -04:00 • committed by GitHub
parent dcd2e3e62d
commit 35ba4ba1a4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 421 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

62
client/src/components/Chat/Input/AudioRecorder.tsx
View file

@ -1,16 +1,46 @@
import React from 'react';
import { ListeningIcon, Spinner, SpeechIcon } from '~/components/svg';
import { useEffect } from 'react';
import type { UseFormReturn } from 'react-hook-form';
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/';
import { useLocalize } from '~/hooks';
import { ListeningIcon, Spinner } from '~/components/svg';
import { useLocalize, useSpeechToText } from '~/hooks';
import { globalAudioId } from '~/common';
export default function AudioRecorder({
isListening,
isLoading,
startRecording,
stopRecording,
textAreaRef,
methods,
ask,
disabled,
}: {
textAreaRef: React.RefObject<HTMLTextAreaElement>;
methods: UseFormReturn<{ text: string }>;
ask: (data: { text: string }) => void;
disabled: boolean;
}) {
const localize = useLocalize();
const handleTranscriptionComplete = (text: string) => {
if (text) {
const globalAudio = document.getElementById(globalAudioId) as HTMLAudioElement;
if (globalAudio) {
console.log('Unmuting global audio');
globalAudio.muted = false;
}
ask({ text });
methods.reset({ text: '' });
clearText();
}
};
const { isListening, isLoading, startRecording, stopRecording, speechText, clearText } =
useSpeechToText(handleTranscriptionComplete);
useEffect(() => {
if (textAreaRef.current) {
textAreaRef.current.value = speechText;
methods.setValue('text', speechText, { shouldValidate: true });
}
}, [speechText, methods, textAreaRef]);
const handleStartRecording = async () => {
await startRecording();
};
@ -19,6 +49,16 @@ export default function AudioRecorder({
await stopRecording();
};
const renderIcon = () => {
if (isListening) {
return <ListeningIcon className="stroke-red-500" />;
}
if (isLoading) {
return <Spinner className="stroke-gray-700 dark:stroke-gray-300" />;
}
return <ListeningIcon className="stroke-gray-700 dark:stroke-gray-300" />;
};
return (
<TooltipProvider delayDuration={250}>
<Tooltip>
@ -29,13 +69,7 @@ export default function AudioRecorder({
className="absolute bottom-1.5 right-12 flex h-[30px] w-[30px] items-center justify-center rounded-lg p-0.5 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 md:bottom-3 md:right-12"
type="button"
>
{isListening ? (
<SpeechIcon className="stroke-gray-700 dark:stroke-gray-300" />
) : isLoading ? (
<Spinner className="stroke-gray-700 dark:stroke-gray-300" />
) : (
<ListeningIcon className="stroke-gray-700 dark:stroke-gray-300" />
)}
{renderIcon()}
</button>
</TooltipTrigger>
<TooltipContent side="top" sideOffset={10}>