🔉 feat: TTS/STT rate limiters (#2925)

* fix: remove double initialization of speech routes

* refactor(useMessageHelpers): more consistent latestMessage updates based on unique textKey and early returns when setting

* feat: TTS/STT rate limiters

* chore: remove console log

* fix: make modular chat true by default

client/src/components/Chat/Input/StreamAudio.tsx

@@ -7,6 +7,7 @@ import type { TMessage } from 'librechat-data-provider';
 import { useCustomAudioRef, MediaSourceAppender, usePauseGlobalAudio } from '~/hooks/Audio';
 import { useAuthContext } from '~/hooks';
 import { globalAudioId } from '~/common';
+import { getLatestText } from '~/utils';
 import store from '~/store';
 
 function timeoutPromise(ms: number, message?: string) {
@@ -47,13 +48,14 @@ export default function StreamAudio({ index = 0 }) {
   );
 
   useEffect(() => {
+    const latestText = getLatestText(latestMessage);
     const shouldFetch =
       token &&
       automaticPlayback &&
       isSubmitting &&
       latestMessage &&
       !latestMessage.isCreatedByUser &&
-      (latestMessage.text || latestMessage.content) &&
+      latestText &&
       latestMessage.messageId &&
       !latestMessage.messageId.includes('_') &&
       !isFetching &&

client/src/hooks/Messages/useMessageHelpers.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useCallback } from 'react';
 import { isAssistantsEndpoint } from 'librechat-data-provider';
 import type { TMessageProps } from '~/common';
 import { useChatContext, useAssistantsMapContext } from '~/Providers';
+import { getLatestText, getLengthAndFirstFiveChars } from '~/utils';
 import useCopyToClipboard from './useCopyToClipboard';
 
 export default function useMessageHelpers(props: TMessageProps) {
@@ -26,20 +27,25 @@ export default function useMessageHelpers(props: TMessageProps) {
   const isLast = !children?.length;
 
   useEffect(() => {
-    let contentChanged = message?.content
-      ? message?.content?.length !== latestText.current
-      : message?.text !== latestText.current;
-
-    if (!isLast) {
-      contentChanged = false;
+    if (conversation?.conversationId === 'new') {
+      return;
     }
-
     if (!message) {
       return;
-    } else if (isLast && conversation?.conversationId !== 'new' && contentChanged) {
-      setLatestMessage({ ...message });
-      latestText.current = message?.content ? message.content.length : message.text;
     }
+    if (!isLast) {
+      return;
+    }
+
+    const text = getLatestText(message);
+    const textKey = `${message?.messageId ?? ''}${getLengthAndFirstFiveChars(text)}`;
+
+    if (textKey === latestText.current) {
+      return;
+    }
+
+    latestText.current = textKey;
+    setLatestMessage({ ...message });
   }, [isLast, message, setLatestMessage, conversation?.conversationId]);
 
   const enterEdit = useCallback(

client/src/store/settings.ts

@@ -52,7 +52,7 @@ const localStorageAtoms = {
   autoScroll: atomWithLocalStorage('autoScroll', false),
   showCode: atomWithLocalStorage('showCode', false),
   hideSidePanel: atomWithLocalStorage('hideSidePanel', false),
-  modularChat: atomWithLocalStorage('modularChat', false),
+  modularChat: atomWithLocalStorage('modularChat', true),
   LaTeXParsing: atomWithLocalStorage('LaTeXParsing', true),
   UsernameDisplay: atomWithLocalStorage('UsernameDisplay', true),
   TextToSpeech: atomWithLocalStorage('textToSpeech', true),

client/src/utils/index.ts

@@ -5,6 +5,7 @@ export * from './latex';
 export * from './convos';
 export * from './presets';
 export * from './textarea';
+export * from './messages';
 export * from './languages';
 export * from './endpoints';
 export * from './sharedLink';

client/src/utils/messages.ts

@@ -0,0 +1,26 @@
+import { ContentTypes } from 'librechat-data-provider';
+import type { TMessage } from 'librechat-data-provider';
+
+export const getLengthAndFirstFiveChars = (str?: string) => {
+  const length = str ? str.length : 0;
+  const firstFiveChars = str ? str.substring(0, 5) : '';
+  return `${length}${firstFiveChars}`;
+};
+
+export const getLatestText = (message?: TMessage | null) => {
+  if (!message) {
+    return '';
+  }
+  if (message.text) {
+    return message.text;
+  }
+  if (message.content?.length) {
+    for (let i = message.content.length - 1; i >= 0; i--) {
+      const part = message.content[i];
+      if (part.type === ContentTypes.TEXT && part[ContentTypes.TEXT]?.value?.length > 0) {
+        return part[ContentTypes.TEXT].value;
+      }
+    }
+  }
+  return '';
+};