4.7.1-alpha2 (#1153)

Co-authored-by: UUUUnotfound <31206589+UUUUnotfound@users.noreply.github.com>
Co-authored-by: Hexiao Zhang <731931282qq@gmail.com>
Co-authored-by: heheer <71265218+newfish-cmyk@users.noreply.github.com>

projects/app/src/web/common/hooks/useSpeech.ts

@@ -5,7 +5,7 @@ import { useTranslation } from 'next-i18next';
 import { getErrText } from '@fastgpt/global/common/error/utils';
 import { OutLinkChatAuthProps } from '@fastgpt/global/support/permission/chat';
 
-export const useSpeech = (props?: OutLinkChatAuthProps) => {
+export const useSpeech = (props?: OutLinkChatAuthProps & { appId?: string }) => {
   const { t } = useTranslation();
   const mediaRecorder = useRef<MediaRecorder>();
   const [mediaStream, setMediaStream] = useState<MediaStream>();
@@ -15,6 +15,7 @@ export const useSpeech = (props?: OutLinkChatAuthProps) => {
   const [audioSecond, setAudioSecond] = useState(0);
   const intervalRef = useRef<any>();
   const startTimestamp = useRef(0);
+  const cancelWhisperSignal = useRef(false);
 
   const speakingTimeString = useMemo(() => {
     const minutes: number = Math.floor(audioSecond / 60);
@@ -51,6 +52,8 @@ export const useSpeech = (props?: OutLinkChatAuthProps) => {
 
   const startSpeak = async (onFinish: (text: string) => void) => {
     try {
+      cancelWhisperSignal.current = false;
+
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       setMediaStream(stream);
 
@@ -73,42 +76,45 @@ export const useSpeech = (props?: OutLinkChatAuthProps) => {
       };
 
       mediaRecorder.current.onstop = async () => {
-        const formData = new FormData();
-        let options = {};
-        if (MediaRecorder.isTypeSupported('audio/webm')) {
-          options = { type: 'audio/webm' };
-        } else if (MediaRecorder.isTypeSupported('video/mp3')) {
-          options = { type: 'video/mp3' };
-        } else {
-          console.error('no suitable mimetype found for this device');
-        }
-        const blob = new Blob(chunks, options);
-        const duration = Math.round((Date.now() - startTimestamp.current) / 1000);
+        if (!cancelWhisperSignal.current) {
+          const formData = new FormData();
+          let options = {};
+          if (MediaRecorder.isTypeSupported('audio/webm')) {
+            options = { type: 'audio/webm' };
+          } else if (MediaRecorder.isTypeSupported('video/mp3')) {
+            options = { type: 'video/mp3' };
+          } else {
+            console.error('no suitable mimetype found for this device');
+          }
+          const blob = new Blob(chunks, options);
+          const duration = Math.round((Date.now() - startTimestamp.current) / 1000);
 
-        formData.append('file', blob, 'recording.mp3');
-        formData.append(
-          'data',
-          JSON.stringify({
-            ...props,
-            duration
-          })
-        );
+          formData.append('file', blob, 'recording.mp3');
+          formData.append(
+            'data',
+            JSON.stringify({
+              ...props,
+              duration
+            })
+          );
 
-        setIsTransCription(true);
-        try {
-          const result = await POST<string>('/v1/audio/transcriptions', formData, {
-            timeout: 60000,
-            headers: {
-              'Content-Type': 'multipart/form-data; charset=utf-8'
-            }
-          });
-          onFinish(result);
-        } catch (error) {
-          toast({
-            status: 'warning',
-            title: getErrText(error, t('common.speech.error tip'))
-          });
+          setIsTransCription(true);
+          try {
+            const result = await POST<string>('/v1/audio/transcriptions', formData, {
+              timeout: 60000,
+              headers: {
+                'Content-Type': 'multipart/form-data; charset=utf-8'
+              }
+            });
+            onFinish(result);
+          } catch (error) {
+            toast({
+              status: 'warning',
+              title: getErrText(error, t('common.speech.error tip'))
+            });
+          }
         }
+
         setIsTransCription(false);
         setIsSpeaking(false);
       };
@@ -128,7 +134,8 @@ export const useSpeech = (props?: OutLinkChatAuthProps) => {
     }
   };
 
-  const stopSpeak = () => {
+  const stopSpeak = (cancel = false) => {
+    cancelWhisperSignal.current = cancel;
     if (mediaRecorder.current) {
       mediaRecorder.current?.stop();
       clearInterval(intervalRef.current);
@@ -147,6 +154,13 @@ export const useSpeech = (props?: OutLinkChatAuthProps) => {
     };
   }, []);
 
+  // listen minuted. over 60 seconds, stop speak
+  useEffect(() => {
+    if (audioSecond >= 60) {
+      stopSpeak();
+    }
+  }, [audioSecond]);
+
   return {
     startSpeak,
     stopSpeak,