🔊 feat: download audio files

client/src/components/Chat/Messages/MessageAudio.tsx

@@ -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,81 +15,138 @@ 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);
 
-    return <VolumeIcon size={size} />;
+    window.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleMouseUp = () => {
+    if (counterRef.current > 0) {
+      toggleSpeech(false);
+    }
+
+    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;
     }
   }, [audioRef, isSpeaking, playbackRate, message.messageId]);
 
   return (
-    <>
-      <button
-        className="hover-button rounded-md p-1 pl-0 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 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"
+            >
+              {renderIcon('19')}
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" sideOffset={0}>
+            <div className="space-y-2">
+              {isSpeaking ? (
+                <p className="text-center text-sm text-gray-600 dark:text-gray-300">
+                  {localize('com_ui_stop')}
+                </p>
+              ) : (
+                <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>
   );
 }

client/src/components/ui/Tooltip.tsx

@@ -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>

client/src/hooks/Audio/useAudioRef.ts

@@ -9,20 +9,17 @@ export default function useCustomAudioRef({
   useEffect(() => {
     const handleEnded = () => {
       setIsPlaying(false);
-      console.log('message audio ended');
       if (audioRef.current) {
         URL.revokeObjectURL(audioRef.current.src);
       }
     };
 
     const handleStart = () => {
       setIsPlaying(true);
-      console.log('message audio started');
     };
 
     const handlePause = () => {
       setIsPlaying(false);
-      console.log('message audio paused');
     };
 
     const audioElement = audioRef.current;

client/src/hooks/Input/useTextToSpeech.ts

@@ -50,7 +50,7 @@ const useTextToSpeech = (message: TMessage, isLast: boolean, index = 0) => {
     }
   };
 
-  const toggleSpeech = () => {
+  const toggleSpeech = (download: boolean) => {
     if (isSpeaking) {
       console.log('canceling message audio speech');
       cancelSpeech();
@@ -59,7 +59,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);
     }
   };
 

client/src/hooks/Input/useTextToSpeechExternal.ts

@@ -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({

client/src/localization/languages/Eng.ts

@@ -293,6 +293,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_ui_bookmarks: 'Bookmarks',
   com_ui_bookmarks_rebuild: 'Rebuild',
   com_ui_bookmarks_new: 'New Bookmark',