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

🎙️ fix: Optimize and Fix Browser TTS Incompatibility (firefox) (#3627)

Browse source 
* fix: 'disable' MsEdgeTTS on unsupported browser (firefox)

* refactor: only pass necessary props to HoverButton MessageAudio

* refactor: Fix conditional comparison operators in MessageAudio component

* refactor: Remove console.log statement in MessageAudio component
This commit is contained in:
Danny Avila 2024-08-13 04:14:37 -04:00 • committed by GitHub
parent 6655304753
commit e3ebcfd2b1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 62 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

11
client/src/components/Chat/Messages/HoverButtons.tsx
View file

@ -73,7 +73,14 @@ export default function HoverButtons({
return (
<div className="visible mt-0 flex justify-center gap-1 self-end text-gray-500 lg:justify-start">
{TextToSpeech && <MessageAudio index={index} message={message} isLast={isLast} />}
{TextToSpeech && (
<MessageAudio
index={index}
messageId={message.messageId}
content={message.content ?? message.text}
isLast={isLast}
/>
)}
{isEditableEndpoint && (
<button
className={cn(
@ -128,7 +135,7 @@ export default function HoverButtons({
forkingSupported={forkingSupported}
latestMessage={latestMessage}
/>
{continueSupported ? (
{continueSupported === true ? (
<button
className={cn(
'hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible',

37
client/src/components/Chat/Messages/MessageAudio.tsx
View file

@ -1,28 +1,34 @@
import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import type { TMessage } from 'librechat-data-provider';
import type { TMessageContentParts } from 'librechat-data-provider';
import { VolumeIcon, VolumeMuteIcon, Spinner } from '~/components/svg';
import { useLocalize, useTextToSpeech } from '~/hooks';
import store from '~/store';
type THoverButtons = {
message: TMessage;
messageId?: string;
content?: TMessageContentParts[] | string;
isLast: boolean;
index: number;
};
export default function MessageAudio({ index, message, isLast }: THoverButtons) {
export default function MessageAudio({ isLast, index, messageId, content }: THoverButtons) {
const localize = useLocalize();
const playbackRate = useRecoilValue(store.playbackRate);
const { toggleSpeech, isSpeaking, isLoading, audioRef } = useTextToSpeech(message, isLast, index);
const { toggleSpeech, isSpeaking, isLoading, audioRef } = useTextToSpeech({
isLast,
index,
messageId,
content,
});
const renderIcon = (size: string) => {
if (isLoading) {
if (isLoading === true) {
return <Spinner size={size} />;
}
if (isSpeaking) {
if (isSpeaking === true) {
return <VolumeMuteIcon size={size} />;
}
@ -30,21 +36,14 @@ export default function MessageAudio({ index, message, isLast }: THoverButtons)
};
useEffect(() => {
const messageAudio = document.getElementById(
`audio-${message.messageId}`,
) as HTMLAudioElement | null;
const messageAudio = document.getElementById(`audio-${messageId}`) as HTMLAudioElement | null;
if (!messageAudio) {
return;
}
if (
playbackRate &&
playbackRate > 0 &&
messageAudio &&
messageAudio.playbackRate !== playbackRate
) {
if (playbackRate != null && playbackRate > 0 && messageAudio.playbackRate !== playbackRate) {
messageAudio.playbackRate = playbackRate;
}
}, [audioRef, isSpeaking, playbackRate, message.messageId]);
}, [audioRef, isSpeaking, playbackRate, messageId]);
return (
<>
@ -69,7 +68,7 @@ export default function MessageAudio({ index, message, isLast }: THoverButtons)
toggleSpeech();
}}
type="button"
title={isSpeaking ? localize('com_ui_stop') : localize('com_ui_read_aloud')}
title={isSpeaking === true ? localize('com_ui_stop') : localize('com_ui_read_aloud')}
>
{renderIcon('19')}
</button>
@ -84,8 +83,8 @@ export default function MessageAudio({ index, message, isLast }: THoverButtons)
height: '0px',
width: '0px',
}}
src={audioRef.current?.src || undefined}
id={`audio-${message.messageId}`}
src={audioRef.current?.src ?? undefined}
id={`audio-${messageId}`}
muted
autoPlay
/>