mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-17 07:55:32 +01:00
feat: download audio file support
This commit is contained in:
Marco Beretta
parent
302b28fc9b
commit
d839e4661c
6 changed files with 113 additions and 59 deletions
|
|
@ -1,6 +1,7 @@
|
|||
import { useEffect } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import type { TMessage } from 'librechat-data-provider';
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '~/components/ui';
|
||||
import { VolumeIcon, VolumeMuteIcon, Spinner } from '~/components/svg';
|
||||
import { useLocalize, useTextToSpeech } from '~/hooks';
|
||||
import store from '~/store';
|
||||
|
|
@ -14,32 +15,77 @@ type THoverButtons = {
|
|||
export default function MessageAudio({ index, message, isLast }: THoverButtons) {
|
||||
const localize = useLocalize();
|
||||
const playbackRate = useRecoilValue(store.playbackRate);
|
||||
const [audioText, setAudioText] = useState<string>(localize('com_ui_info_read_aloud'));
|
||||
const [tooltipOpen, setTooltipOpen] = useState(false);
|
||||
const [wasLongPress, setWasLongPress] = useState(false);
|
||||
|
||||
const { toggleSpeech, isSpeaking, isLoading, audioRef } = useTextToSpeech(message, isLast, index);
|
||||
|
||||
const isMouseDownRef = useRef(false);
|
||||
const timerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const counterRef = useRef(0);
|
||||
|
||||
const renderIcon = (size: string) => {
|
||||
if (isLoading) {
|
||||
return <Spinner size={size} />;
|
||||
}
|
||||
return isSpeaking ? <VolumeMuteIcon size={size} /> : <VolumeIcon size={size} />;
|
||||
};
|
||||
|
||||
if (isSpeaking) {
|
||||
return <VolumeMuteIcon size={size} />;
|
||||
const handleMouseDown = () => {
|
||||
setWasLongPress(false);
|
||||
setTooltipOpen(true);
|
||||
if (isMouseDownRef.current) {
|
||||
return;
|
||||
}
|
||||
isMouseDownRef.current = true;
|
||||
counterRef.current = 2;
|
||||
setAudioText(localize('com_ui_hold_mouse_download', counterRef.current.toString()));
|
||||
timerRef.current = setInterval(() => {
|
||||
counterRef.current--;
|
||||
if (counterRef.current >= 0) {
|
||||
setAudioText(localize('com_ui_hold_mouse_download', counterRef.current.toString()));
|
||||
}
|
||||
if (isMouseDownRef.current && counterRef.current === 0) {
|
||||
setAudioText(localize('com_ui_downloading'));
|
||||
toggleSpeech(true);
|
||||
}
|
||||
if (counterRef.current < 0 && timerRef.current) {
|
||||
clearInterval(timerRef.current);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
if (counterRef.current > 0) {
|
||||
toggleSpeech(false);
|
||||
}
|
||||
|
||||
return <VolumeIcon size={size} />;
|
||||
if (counterRef.current === 0) {
|
||||
setWasLongPress(true);
|
||||
}
|
||||
|
||||
setTooltipOpen(false);
|
||||
isMouseDownRef.current = false;
|
||||
if (timerRef.current) {
|
||||
clearInterval(timerRef.current);
|
||||
timerRef.current = null;
|
||||
setAudioText(localize('com_ui_info_read_aloud'));
|
||||
}
|
||||
|
||||
window.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const messageAudio = document.getElementById(
|
||||
`audio-${message.messageId}`,
|
||||
) as HTMLAudioElement | null;
|
||||
if (!messageAudio) {
|
||||
return;
|
||||
}
|
||||
if (
|
||||
playbackRate &&
|
||||
playbackRate > 0 &&
|
||||
messageAudio &&
|
||||
playbackRate !== null &&
|
||||
playbackRate > 0 &&
|
||||
messageAudio.playbackRate !== playbackRate
|
||||
) {
|
||||
messageAudio.playbackRate = playbackRate;
|
||||
|
|
@ -47,48 +93,55 @@ export default function MessageAudio({ index, message, isLast }: THoverButtons)
|
|||
}, [audioRef, isSpeaking, playbackRate, message.messageId]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
className="hover-button rounded-md p-1 pl-0 text-gray-400 hover:text-gray-950 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible"
|
||||
// onMouseDownCapture={() => {
|
||||
// if (audioRef.current) {
|
||||
// audioRef.current.muted = false;
|
||||
// }
|
||||
// handleMouseDown();
|
||||
// }}
|
||||
// onMouseUpCapture={() => {
|
||||
// if (audioRef.current) {
|
||||
// audioRef.current.muted = false;
|
||||
// }
|
||||
// handleMouseUp();
|
||||
// }}
|
||||
onClickCapture={() => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.muted = false;
|
||||
}
|
||||
toggleSpeech();
|
||||
}}
|
||||
type="button"
|
||||
title={isSpeaking ? localize('com_ui_stop') : localize('com_ui_read_aloud')}
|
||||
>
|
||||
{renderIcon('19')}
|
||||
</button>
|
||||
<audio
|
||||
ref={audioRef}
|
||||
controls
|
||||
controlsList="nodownload nofullscreen noremoteplayback"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
overflow: 'hidden',
|
||||
display: 'none',
|
||||
height: '0px',
|
||||
width: '0px',
|
||||
}}
|
||||
src={audioRef.current?.src || undefined}
|
||||
id={`audio-${message.messageId}`}
|
||||
muted
|
||||
autoPlay
|
||||
/>
|
||||
</>
|
||||
<TooltipProvider>
|
||||
<>
|
||||
<Tooltip open={tooltipOpen}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
className="hover-button rounded-md p-1 pl-0 text-gray-400 hover:text-gray-950 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible"
|
||||
onMouseDownCapture={handleMouseDown}
|
||||
onMouseUpCapture={handleMouseUp}
|
||||
onMouseEnter={() => setTooltipOpen(true)}
|
||||
onMouseLeave={() => setTooltipOpen(false)}
|
||||
onClickCapture={() => {
|
||||
if (!wasLongPress && audioRef.current) {
|
||||
audioRef.current.muted = false;
|
||||
toggleSpeech(false);
|
||||
}
|
||||
}}
|
||||
type="button"
|
||||
title={isSpeaking ? localize('com_ui_stop') : localize('com_ui_read_aloud')}
|
||||
>
|
||||
{renderIcon('19')}
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" sideOffset={0}>
|
||||
<div className="space-y-2">
|
||||
<p className="text-center text-sm text-gray-600 dark:text-gray-300">
|
||||
{localize('com_ui_read_aloud')}
|
||||
<br />
|
||||
{audioText}
|
||||
</p>
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<audio
|
||||
ref={audioRef}
|
||||
controls
|
||||
controlsList="nodownload nofullscreen noremoteplayback"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
overflow: 'hidden',
|
||||
display: 'none',
|
||||
height: '0px',
|
||||
width: '0px',
|
||||
}}
|
||||
src={audioRef.current?.src || undefined}
|
||||
id={`audio-${message.messageId}`}
|
||||
muted
|
||||
autoPlay
|
||||
/>
|
||||
</>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const TooltipContent = React.forwardRef<
|
|||
>
|
||||
<span className="flex items-center whitespace-pre-wrap px-2 py-1 text-center text-sm font-medium normal-case text-white">
|
||||
{children}
|
||||
<TooltipArrow className="TooltipArrow" />
|
||||
<TooltipArrow className="TooltipArrow border-gray-700" />
|
||||
</span>
|
||||
</TooltipPrimitive.Content>
|
||||
</TooltipPortal>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ export default function useCustomAudioRef({
|
|||
useEffect(() => {
|
||||
const handleEnded = () => {
|
||||
setIsPlaying(false);
|
||||
console.log('message audio ended');
|
||||
if (audioRef.current) {
|
||||
URL.revokeObjectURL(audioRef.current.src);
|
||||
}
|
||||
|
|
@ -17,12 +16,10 @@ export default function useCustomAudioRef({
|
|||
|
||||
const handleStart = () => {
|
||||
setIsPlaying(true);
|
||||
console.log('message audio started');
|
||||
};
|
||||
|
||||
const handlePause = () => {
|
||||
setIsPlaying(false);
|
||||
console.log('message audio paused');
|
||||
};
|
||||
|
||||
const audioElement = audioRef.current;
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const useTextToSpeech = (message: TMessage, isLast: boolean, index = 0) => {
|
|||
}
|
||||
};
|
||||
|
||||
const toggleSpeech = () => {
|
||||
const toggleSpeech = (download: boolean) => {
|
||||
if (isSpeaking) {
|
||||
console.log('canceling message audio speech');
|
||||
cancelSpeech();
|
||||
|
|
@ -61,7 +61,7 @@ const useTextToSpeech = (message: TMessage, isLast: boolean, index = 0) => {
|
|||
const messageContent = message?.content ?? message?.text ?? '';
|
||||
const parsedMessage =
|
||||
typeof messageContent === 'string' ? messageContent : parseTextParts(messageContent);
|
||||
generateSpeech(parsedMessage, false);
|
||||
generateSpeech(parsedMessage, download);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,6 @@ function useTextToSpeechExternal(messageId: string, isLast: boolean, index = 0)
|
|||
});
|
||||
|
||||
newAudio.onended = () => {
|
||||
console.log('Cached message audio ended');
|
||||
URL.revokeObjectURL(blobUrl);
|
||||
setIsSpeaking(false);
|
||||
};
|
||||
|
|
@ -100,7 +99,9 @@ function useTextToSpeechExternal(messageId: string, isLast: boolean, index = 0)
|
|||
const blobUrl = URL.createObjectURL(audioBlob);
|
||||
if (downloadFile) {
|
||||
downloadAudio(blobUrl);
|
||||
return;
|
||||
}
|
||||
|
||||
autoPlayAudio(blobUrl);
|
||||
} catch (error) {
|
||||
showToast({
|
||||
|
|
|
|||
|
|
@ -247,6 +247,9 @@ export default {
|
|||
com_ui_use_micrphone: 'Use microphone',
|
||||
com_ui_min_tags: 'Cannot remove more values, a minimum of {0} are required.',
|
||||
com_ui_max_tags: 'Maximum number allowed is {0}, using latest values.',
|
||||
com_ui_hold_mouse_download: 'Hold for {0} more seconds to download the audio',
|
||||
com_ui_info_read_aloud: 'Hold click 3 seconds to download',
|
||||
com_ui_downloading: 'Downloading...',
|
||||
com_auth_error_login:
|
||||
'Unable to login with the information provided. Please check your credentials and try again.',
|
||||
com_auth_error_login_rl:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue