@envive-ai/react-toolkit-v3 0.3.23 → 0.3.25

package/src/components/TextField/hooks/useVoiceInput.ts

@@ -26,22 +26,34 @@ export const useVoiceInput = ({
     useSpeechRecognition();
 
   const handleStartListening = async () => {
+    if (disabled) {
+      return;
+    }
+
     try {
       resetTranscript();
       await SpeechRecognition.startListening({ continuous: true, language: 'en-US' });
       onTranscriptionStarted?.();
     } catch (error) {
       console.log('Microphone permission denied or error:', error);
-      setListeningToSpeech(false);
+      setListeningToSpeech('abort');
     }
   };
 
   const handleStopListening = async () => {
+    if (disabled) {
+      return;
+    }
+
     await SpeechRecognition.stopListening();
     onTranscriptionCompleted?.(transcript);
   };
 
   const handleAbortListening = async () => {
+    if (disabled) {
+      return;
+    }
+
     await SpeechRecognition.abortListening();
     resetTranscript();
   };
@@ -49,27 +61,25 @@ export const useVoiceInput = ({
   const handleToggleListening = () => {
     if (disabled || !isMicrophoneAvailable || !browserSupportsSpeechRecognition) return;
 
-    if (!listeningToSpeech) {
-      handleStartListening();
-      setListeningToSpeech(true);
+    if (listeningToSpeech !== 'start') {
+      setListeningToSpeech('start');
     } else {
-      handleStopListening();
-      setListeningToSpeech(false);
+      setListeningToSpeech('stop');
     }
   };
 
   useEffect(() => {
-    if (listeningToSpeech) {
+    if (listeningToSpeech === 'start') {
       handleStartListening();
+    } else if (listeningToSpeech === 'stop') {
+      handleStopListening();
+    } else if (listeningToSpeech === 'abort') {
+      handleAbortListening();
     }
-    return () => {
-      resetTranscript();
-      setListeningToSpeech(false);
-    };
-  }, []);
+  }, [listeningToSpeech]);
 
   return {
-    isListening: listeningToSpeech,
+    isListening: listeningToSpeech === 'start',
     handleToggleListening,
     handleAbortListening,
     browserSupportsSpeechRecognition,

package/src/components/WidgetTextField/WidgetTextField.tsx

@@ -33,7 +33,9 @@ export const WidgetTextField = ({
   const setListeningToSpeech = useSetAtom(listeningToSpeechAtom);
   const { skeletonClass } = useGetSkeletonProperties(isLoading);
 
-  const { browserSupportsSpeechRecognition } = useVoiceInput({});
+  const { browserSupportsSpeechRecognition } = useVoiceInput({
+    disabled: true,
+  });
 
   const { micWidgetButtonClasses } = useGetMicWidgetButtonProperties({
     theme: resolvedTheme,
@@ -51,7 +53,7 @@ export const WidgetTextField = ({
   }
 
   const handleToggleListening = () => {
-    setListeningToSpeech(true);
+    setListeningToSpeech('start');
     onTranscriptionStarted?.();
     onClick();
   };