fix: Slight pauses while speaking cause reco to halt and start a new …

…phrase. (#982) Co-authored-by: Ross Smith <[email protected]> Co-authored-by: Adam Dougal <[email protected]>
Azure-Samples · Jun 14, 2024 · e10a0fa · e10a0fa
1 parent ce9281a
commit e10a0fa
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 9 deletions.
diff --git a/code/frontend/src/components/QuestionInput/QuestionInput.tsx b/code/frontend/src/components/QuestionInput/QuestionInput.tsx
@@ -35,12 +35,14 @@ export const QuestionInput = ({
   const [liveRecognizedText, setLiveRecognizedText] = useState<string>("");
   const [microphoneIconActive, setMicrophoneIconActive] =
     useState<boolean>(false);
-
+  const [isTextAreaDisabled, setIsTextAreaDisabled] = useState(false);
   useEffect(() => {
     if (isRecognizing) {
       setLiveRecognizedText(recognizedText);
+      setIsTextAreaDisabled(true)
       setMicrophoneIconActive(true); // Set microphone icon to active (blue)
     } else {
+      setIsTextAreaDisabled(false)
       setMicrophoneIconActive(false); // Set microphone icon to inactive
     }
   }, [recognizedText, isRecognizing]);
@@ -81,6 +83,8 @@ export const QuestionInput = ({
     <Stack horizontal className={styles.questionInputContainer}>
       {/* Text Input Field */}
       <TextField
+        style={{backgroundColor: 'white'}}
+        disabled={isTextAreaDisabled}
         className={styles.questionInputTextArea}
         placeholder={placeholder}
         multiline

diff --git a/code/frontend/src/pages/chat/Chat.tsx b/code/frontend/src/pages/chat/Chat.tsx
@@ -130,25 +130,40 @@ const Chat = () => {
 
     return abortController.abort();
   };
+    // Buffer to store recognized text
+    let recognizedTextBuffer = "";
+    let currentSentence = "";
 
   const startSpeechRecognition = async () => {
     if (!isRecognizing) {
       setIsRecognizing(true);
-
       recognizerRef.current = await multiLingualSpeechRecognizer(); // Store the recognizer in the ref
 
       recognizerRef.current.recognized = (s, e) => {
         if (e.result.reason === ResultReason.RecognizedSpeech) {
-          const recognized = e.result.text;
-          setUserMessage(recognized);
-          setRecognizedText(recognized);
+          let recognizedText = e.result.text.trim();
+          // Append current sentence to buffer if it's not empty
+          if (currentSentence) {
+              recognizedTextBuffer += ` ${currentSentence.trim()}`;
+              currentSentence = "";
+          }
+          // Start new sentence
+          currentSentence += ` ${recognizedText}`;
+          //set text in textarea
+           setUserMessage((recognizedTextBuffer + currentSentence).trim());
+           setRecognizedText((recognizedTextBuffer + currentSentence).trim());
         }
       };
 
-      recognizerRef.current.startContinuousRecognitionAsync(() => {
-        setIsRecognizing(true);
-        setIsListening(true);
-      });
+      recognizerRef.current.startContinuousRecognitionAsync(
+        () => {
+            setIsRecognizing(true);
+            setIsListening(true);
+        },
+        error => {
+            console.error(`Error starting recognition: ${error}`);
+        }
+    );
     }
   };