fix: Disable send button until speech recording stopped (#1131)

Author: Rohini-Microsoft

code/frontend/src/components/QuestionInput/QuestionInput.module.css

@@ -35,6 +35,13 @@
     height: 23px;
 }
 
+.SendButtonDisabled{
+    pointer-events: none;
+    width: 24px;
+    height: 23px;
+    margin-right: 12px;
+}
+
 .questionInputSendButtonDisabled {
     /* opacity: 0.4; */
     width: 24px;
@@ -60,6 +67,10 @@
     height: 30px;
 }
 
+.microphoneIcon ,.microphoneIconActive{
+    height: 1.3em;
+}
+
 .questionInputMicrophone {
     width: 24px;
     height: 24px;
@@ -70,8 +81,11 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-right: 12px;
-    margin-top: 25px;
+    margin-right: 1rem;
+    margin-top: 0.3rem;
+    width: 3%;
+    min-width: 3%;
+    height: 70px;
   }
 
 

code/frontend/src/components/QuestionInput/QuestionInput.tsx

@@ -11,6 +11,7 @@ interface Props {
   onMicrophoneClick: () => void;
   onStopClick: () => void;
   disabled: boolean;
+  isSendButtonDisabled:boolean;
   placeholder?: string;
   clearOnSend?: boolean;
   recognizedText: string;
@@ -24,6 +25,7 @@ export const QuestionInput = ({
   onMicrophoneClick,
   onStopClick,
   disabled,
+  isSendButtonDisabled,
   placeholder,
   clearOnSend,
   recognizedText,
@@ -131,26 +133,28 @@ export const QuestionInput = ({
         </div>
 
         {/* Send Button */}
-        <div
-          role="button"
-          tabIndex={0}
-          aria-label="Ask question button"
-          onClick={sendQuestion}
-          onKeyDown={(e) =>
-            e.key === "Enter" || e.key === " " ? sendQuestion() : null
-          }
-          className={styles.questionInputSendButtonContainer}
-        >
-          {disabled ? (
-            <SendRegular className={styles.questionInputSendButtonDisabled} />
-          ) : (
-            <img
-              src={Send}
-              className={styles.questionInputSendButton}
-              alt="Send"
-            />
-          )}
-        </div>
+        {isSendButtonDisabled?( <SendRegular className={styles.SendButtonDisabled} />):(
+              <div
+              role="button"
+              tabIndex={0}
+              aria-label="Ask question button"
+              onClick={sendQuestion}
+              onKeyDown={(e) =>
+                e.key === "Enter" || e.key === " " ? sendQuestion() : null
+              }
+              className={styles.questionInputSendButtonContainer}
+              >
+              {disabled? (
+                <SendRegular className={styles.questionInputSendButtonDisabled} />
+              ) : (
+                <img
+                  src={Send}
+                  className={styles.questionInputSendButton}
+                  alt="Send"
+                />
+              )}
+              </div>
+        )}
       </div>
     </Stack>
   );

code/frontend/src/pages/chat/Chat.tsx

@@ -34,6 +34,8 @@ const Chat = () => {
   const chatMessageStreamEnd = useRef<HTMLDivElement | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [showLoadingMessage, setShowLoadingMessage] = useState<boolean>(false);
+
+  const [isSendButtonDisabled, setSendButtonDisabled] = useState(false);
   const [activeCitation, setActiveCitation] =
     useState<
       [
@@ -180,16 +182,16 @@ const Chat = () => {
       }
       setIsRecognizing(false);
       setRecognizedText("");
+      setSendButtonDisabled(false);
       setIsListening(false);
     }
   };
 
   const onMicrophoneClick = async () => {
     if (!isRecognizing) {
-      // console.log("Starting speech recognition...");
+      setSendButtonDisabled(true);
       await startSpeechRecognition();
     } else {
-      // console.log("Stopping speech recognition...");
       stopSpeechRecognition();
       setRecognizedText(userMessage);
     }
@@ -355,6 +357,7 @@ const Chat = () => {
               disabled={isLoading}
               onSend={(question) => makeApiRequest(question)}
               recognizedText={recognizedText}
+              isSendButtonDisabled={isSendButtonDisabled}
               onMicrophoneClick={onMicrophoneClick}
               onStopClick={stopSpeechRecognition}
               isListening={isListening}