Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-09-22 08:12:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Update HoverButtons.tsx

Browse source
This commit is contained in:
bsu3338 2023-09-03 21:20:14 -05:00 • committed by GitHub
parent 609d1dfefb
commit 4b4afcdd37
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

14
client/src/components/Messages/HoverButtons.tsx
View file

@ -1,5 +1,6 @@
import { useState } from 'react'; import { useState } from 'react';
import type { TConversation, TMessage } from 'librechat-data-provider'; import type { TConversation, TMessage } from 'librechat-data-provider';
import useSpeechSynthesis from './SpeechSynthesis';
import { Clipboard, CheckMark, EditIcon, RegenerateIcon, ContinueIcon, VolumeIcon, VolumeMuteIcon } from '~/components/svg'; import { Clipboard, CheckMark, EditIcon, RegenerateIcon, ContinueIcon, VolumeIcon, VolumeMuteIcon } from '~/components/svg';
import { useGenerations } from '~/hooks'; import { useGenerations } from '~/hooks';
import { cn } from '~/utils'; import { cn } from '~/utils';
@ -27,12 +28,15 @@ export default function HoverButtons({
}: THoverButtons) { }: THoverButtons) {
const { endpoint } = conversation ?? {}; const { endpoint } = conversation ?? {};
const [isCopied, setIsCopied] = useState(false); const [isCopied, setIsCopied] = useState(false);
const [isSpeaking, setIsSpeaking] = useState(false);
const { synthesizeSpeech } = useSpeechSynthesis();
const { hideEditButton, regenerateEnabled, continueSupported } = useGenerations({ const { hideEditButton, regenerateEnabled, continueSupported } = useGenerations({
isEditing, isEditing,
isSubmitting, isSubmitting,
message, message,
endpoint: endpoint ?? '', endpoint: endpoint ?? '',
}); });
if (!conversation) { if (!conversation) {
return null; return null;
} }
@ -46,6 +50,16 @@ export default function HoverButtons({
enterEdit(); enterEdit();
}; };
const toggleSpeech = () => {
if (isSpeaking) {
synthesizeSpeech.cancel();
} else {
// const utterance = new SpeechSynthesisUtterance(message?.text ?? ""); // Assuming 'text' is the field in message that contains the text to speak
synthesizeSpeech(message?.text ?? "");
}
setIsSpeaking(!isSpeaking);
};
return ( return (
<div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:right-0 lg:top-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2"> <div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:right-0 lg:top-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
<button <button