fix: Read Aloud audio playback stops when switching to another section (#2020)

Author: Rafi-Microsoft

code/frontend/src/components/Answer/Answer.tsx

@@ -129,6 +129,14 @@ export const Answer = ({
     }
   }, [isActive, synthesizer]);
 
+  useEffect(() => {
+    return () => {
+      if (isSpeaking) {
+        resetSpeech();
+      }
+    };
+  }, []);
+
   useEffect(() => {
     setChevronIsExpanded(isRefAccordionOpen);
     // if (chevronIsExpanded && refContainer.current) {
@@ -221,7 +229,7 @@ export const Answer = ({
   const handleSpeakPauseResume = () => {
     if (isSpeaking) {
       if (isPaused) {
-        onSpeak(index, "speak");
+        onSpeak(index, "speak", resetSpeech);
         audioDestination?.resume();
         setIsPaused(false);
         setStartTime(Date.now());
@@ -238,7 +246,7 @@ export const Answer = ({
         }
       }
     } else {
-      onSpeak(index, "speak");
+      onSpeak(index, "speak", resetSpeech);
       startSpeech();
     }
   };

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

@@ -38,6 +38,7 @@ const [ASSISTANT, TOOL, ERROR] = ["assistant", "tool", "error"];
 const Chat = () => {
   const lastQuestionRef = useRef<string>("");
   const chatMessageStreamEnd = useRef<HTMLDivElement | null>(null);
+  const audioStopRef = useRef<(() => void) | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isGenerating, setIsGenerating] = useState<boolean>(false);  // Add this state
   const [showLoadingMessage, setShowLoadingMessage] = useState<boolean>(false);
@@ -303,11 +304,13 @@ const Chat = () => {
   };
 
   const clearChat = () => {
+    audioStopRef.current?.();
     lastQuestionRef.current = "";
     setActiveCitation(undefined);
     setAnswers([]);
     setConversationId(uuidv4());
     setSelectedConvId("");
+    setActiveCardIndex(null);
   };
 
   const stopGenerating = () => {
@@ -385,9 +388,12 @@ const Chat = () => {
     []
   );
 
-  const handleSpeech = (index: number, status: string) => {
+  const handleSpeech = (index: number, status: string, stopAudioFn?: () => void) => {
     if (status != "pause") setActiveCardIndex(index);
     setIsTextToSpeachActive(status == "speak" ? true : false);
+    if (status == "speak" && stopAudioFn) {
+      audioStopRef.current = stopAudioFn;
+    }
   };
   const onSetShowHistoryPanel = () => {
     if (!showHistoryPanel) {
@@ -423,8 +429,15 @@ const Chat = () => {
       console.error("No conversation Id found");
       return;
     }
+
+    if (id !== selectedConvId) {
+      audioStopRef.current?.();
+      setActiveCardIndex(null);
+    }
+
     const messages = getMessagesByConvId(id);
     if (messages.length === 0) {
+      setAnswers([]);
       setFetchingConvMessages(true);
       const responseMessages = await historyRead(id);
       setAnswers(responseMessages);
@@ -433,7 +446,10 @@ const Chat = () => {
     } else {
       setAnswers(messages);
     }
-    setSelectedConvId(id);
+
+    if (id !== selectedConvId) {
+      setSelectedConvId(id);
+    }
   };
 
   useEffect(() => {
@@ -477,6 +493,7 @@ const Chat = () => {
     );
     setChatHistory(tempChatHistory);
     if (id === selectedConvId) {
+      audioStopRef.current?.();
       lastQuestionRef.current = "";
       setActiveCitation(undefined);
       setAnswers([]);