🌊 feat: refine SDK usage logic in STT and TTS services, improve header handling

api/server/services/Files/Audio/STTService.js

@@ -214,12 +214,12 @@ class STTService {
   }
 
   // TODO: Implement a better way to determine if the SDK should be used
-  shouldUseSDK(provider, sttSchema) {
-    if (provider !== STTProviders.OPENAI && provider !== STTProviders.AZURE_OPENAI) {
+  shouldUseSDK(provider) {
+    if (provider === STTProviders.DEEPGRAM) {
       return true;
     }
 
-    return typeof sttSchema.url === 'string' && sttSchema.url.trim().length > 0;
+    return false;
   }
 
   /**

api/server/services/Files/Audio/TTSService.js

@@ -23,7 +23,6 @@ class TTSService {
       [TTSProviders.AZURE_OPENAI]: this.azureOpenAIProvider.bind(this),
       [TTSProviders.ELEVENLABS]: this.elevenLabsProvider.bind(this),
       [TTSProviders.LOCALAI]: this.localAIProvider.bind(this),
-      [TTSProviders.ELEVENLABS]: this.elevenLabsProvider.bind(this),
     };
 
     this.sdkStrategies = {
@@ -129,7 +128,9 @@ class TTSService {
 
     const headers = {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${extractEnvVariable(ttsSchema?.apiKey)}`,
+      Authorization: `${
+        ttsSchema.apiKey ? 'Bearer ' + extractEnvVariable(ttsSchema.apiKey) : undefined
+      }`,
     };
 
     return [url, data, headers];
@@ -199,7 +200,7 @@ class TTSService {
 
     const headers = {
       'Content-Type': 'application/json',
-      'xi-api-key': extractEnvVariable(ttsSchema?.apiKey),
+      'xi-api-key': ttsSchema.apiKey ? extractEnvVariable(ttsSchema.apiKey) : '',
       Accept: 'audio/mpeg',
     };
 
@@ -229,13 +230,11 @@ class TTSService {
 
     const headers = {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${extractEnvVariable(ttsSchema?.apiKey)}`,
+      Authorization: `${
+        ttsSchema.apiKey ? 'Bearer ' + extractEnvVariable(ttsSchema.apiKey) : undefined
+      }`,
     };
 
-    if (extractEnvVariable(ttsSchema.apiKey) === '') {
-      delete headers.Authorization;
-    }
-
     return [url, data, headers];
   }
 
@@ -314,12 +313,12 @@ class TTSService {
   }
 
   // TODO: Implement a better way to determine if the SDK should be used
-  shouldUseSDK(provider, sttSchema) {
+  shouldUseSDK(provider) {
     if (provider == TTSProviders.DEEPGRAM) {
       return true;
     }
 
-    return typeof sttSchema.url === 'string' && sttSchema.url.trim().length > 0;
+    return false;
   }
 
   /**
@@ -335,7 +334,7 @@ class TTSService {
    * @throws {Error} If the provider is invalid or the request fails.
    */
   async ttsRequest(provider, ttsSchema, { input, voice, stream = true }) {
-    const useSDK = this.shouldUseSDK(provider, ttsSchema);
+    const useSDK = this.shouldUseSDK(provider);
     const strategy = useSDK ? this.sdkStrategies[provider] : this.apiStrategies[provider];
 
     if (!strategy) {

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

@@ -79,7 +79,7 @@ export default function HoverButtons({
           messageId={message.messageId}
           content={message.content ?? message.text}
           isLast={isLast}
-          className="hover-button rounded-md p-1 pl-0 text-gray-500 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"
+          className="hover-button 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:group-hover:visible md:group-[.final-completion]:visible"
         />
       )}
       {isEditableEndpoint && (

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

@@ -1,4 +1,3 @@
-// client/src/components/Chat/Messages/MessageAudio.tsx
 import { memo } from 'react';
 import { useRecoilValue } from 'recoil';
 import type { TMessageAudio } from '~/common';

client/src/hooks/Audio/useTTSBrowser.ts

@@ -1,4 +1,3 @@
-// client/src/hooks/Audio/useTTSBrowser.ts
 import { useRef, useEffect, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { parseTextParts } from 'librechat-data-provider';

client/src/hooks/Audio/useTTSEdge.ts

@@ -1,4 +1,3 @@
-// client/src/hooks/Audio/useTTSEdge.ts
 import { useRef, useEffect, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { parseTextParts } from 'librechat-data-provider';

client/src/hooks/Audio/useTTSExternal.ts

@@ -1,4 +1,3 @@
-// client/src/hooks/Audio/useTTSExternal.ts
 import { useRef, useEffect, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { parseTextParts } from 'librechat-data-provider';