🐛 fix: tts and translate error (#11871)

* fix: translate not responding error

* chore: optimistic tts and translate update

* fix: prevent regenerate file

* fix: prevent regenerate file

src/features/Conversation/Messages/Assistant/Actions/useAssistantActions.ts

@@ -153,9 +153,9 @@ export const useAssistantActions = ({
       },
       translate: {
         children: localeOptions.map((i) => ({
-          handleClick: () => translateMessage(id, i.value),
           key: i.value,
           label: t(`lang.${i.value}`),
+          onClick: () => translateMessage(id, i.value),
         })),
         icon: LanguagesIcon,
         key: 'translate',

src/features/Conversation/Messages/User/Actions/useUserActions.ts

@@ -89,9 +89,9 @@ export const useUserActions = ({ id, data }: UseUserActionsParams): UserActions
       },
       translate: {
         children: localeOptions.map((i) => ({
-          handleClick: () => translateMessage(id, i.value),
           key: i.value,
           label: t(`lang.${i.value}`),
+          onClick: () => translateMessage(id, i.value),
         })),
         icon: LanguagesIcon,
         key: 'translate',

src/features/Conversation/Messages/components/Extras/TTS/InitPlayer.tsx

@@ -1,6 +1,6 @@
 import { getMessageError } from '@lobechat/fetch-sse';
 import { type ChatMessageError, type ChatTTS } from '@lobechat/types';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useTTS } from '@/hooks/useTTS';
@@ -18,6 +18,7 @@ export interface TTSProps extends ChatTTS {
 const InitPlayer = memo<TTSProps>(({ id, content, contentMd5, file }) => {
   const [isStart, setIsStart] = useState(false);
   const [error, setError] = useState<ChatMessageError>();
+  const isDeletedRef = useRef(false);
   const uploadTTS = useFileStore((s) => s.uploadTTSByArrayBuffers);
   const { t } = useTranslation('chat');
 
@@ -32,14 +33,17 @@ const InitPlayer = memo<TTSProps>(({ id, content, contentMd5, file }) => {
 
   const { isGlobalLoading, audio, start, stop, response } = useTTS(content, {
     onError: (err) => {
+      if (isDeletedRef.current) return;
       stop();
       setDefaultError(err);
     },
     onErrorRetry: (err) => {
+      if (isDeletedRef.current) return;
       stop();
       setDefaultError(err);
     },
     onSuccess: async () => {
+      if (isDeletedRef.current) return;
       if (!response || response.ok) return;
       const message = await getMessageError(response);
       if (message) {
@@ -50,7 +54,9 @@ const InitPlayer = memo<TTSProps>(({ id, content, contentMd5, file }) => {
       stop();
     },
     onUpload: async (currentVoice, arrayBuffers) => {
+      if (isDeletedRef.current) return;
       const fileID = await uploadTTS(id, arrayBuffers);
+      if (isDeletedRef.current) return;
       ttsMessage(id, { contentMd5, file: fileID, voice: currentVoice });
     },
   });
@@ -62,6 +68,7 @@ const InitPlayer = memo<TTSProps>(({ id, content, contentMd5, file }) => {
   }, [isStart, start]);
 
   const handleDelete = useCallback(() => {
+    isDeletedRef.current = true;
     stop();
     clearTTS(id);
   }, [stop, id, clearTTS]);
@@ -72,11 +79,15 @@ const InitPlayer = memo<TTSProps>(({ id, content, contentMd5, file }) => {
   }, [start]);
 
   useEffect(() => {
-    if (file) return;
-    setTimeout(() => {
+    // Skip if file exists or user has deleted TTS
+    if (file || isDeletedRef.current) return;
+    const timer = setTimeout(() => {
+      // Double check in case user deleted during the delay
+      if (isDeletedRef.current) return;
       handleInitStart();
     }, 100);
-  }, [file]);
+    return () => clearTimeout(timer);
+  }, [file, handleInitStart]);
 
   return (
     <Player

src/store/chat/slices/translate/action.ts

@@ -114,8 +114,15 @@ export const chatTranslate: StateCreator<
   },
 
   updateMessageTranslate: async (id, data) => {
-    await messageService.updateMessageTranslate(id, data);
+    // Optimistic update
+    get().internal_dispatchMessage({
+      id,
+      key: 'translate',
+      type: 'updateMessageExtra',
+      value: data === false ? undefined : data,
+    });
 
-    await get().refreshMessages();
+    // Persist to database
+    await messageService.updateMessageTranslate(id, data);
   },
 });

src/store/chat/slices/tts/action.ts

@@ -29,7 +29,15 @@ export const chatTTS: StateCreator<ChatStore, [['zustand/devtools', never]], [],
   },
 
   updateMessageTTS: async (id, data) => {
+    // Optimistic update
+    get().internal_dispatchMessage({
+      id,
+      key: 'tts',
+      type: 'updateMessageExtra',
+      value: data === false ? undefined : data,
+    });
+
+    // Persist to database
     await messageService.updateMessageTTS(id, data);
-    await get().refreshMessages();
   },
 });