From 5134b80689562d578d431507d09bb1e8a4a2e9e2 Mon Sep 17 00:00:00 2001
From: Christopher Strnad <strnadchristopher@gmail.com>
Date: Wed, 28 May 2025 12:34:01 -0500
Subject: [PATCH] feat(ui): add stop dictation button to Result component (#3)

---
 frontend/src/components/Result.jsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Result.jsx b/frontend/src/components/Result.jsx
index 104bf88..9997d44 100644
--- a/frontend/src/components/Result.jsx
+++ b/frontend/src/components/Result.jsx
@@ -1,8 +1,9 @@
 import ReactMarkdown from 'react-markdown';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 
 const Result = ({ data }) => {
   const utteranceRef = useRef(null);
+  const [readingAloud, setReadingAloud] = useState(false);
 
   const downloadSummary = () => {
     const element = document.createElement('a');
@@ -20,6 +21,15 @@ const Result = ({ data }) => {
     }
     utteranceRef.current = new window.SpeechSynthesisUtterance(data.summary);
     window.speechSynthesis.speak(utteranceRef.current);
+    setReadingAloud(true);
+  };
+
+  const stopDictation = () => {
+    if (utteranceRef.current) {
+      window.speechSynthesis.cancel();
+      utteranceRef.current = null;
+    }
+    setReadingAloud(false);
   };
 
   return (
@@ -35,7 +45,9 @@ const Result = ({ data }) => {
       </div>
       <div style={{ marginTop: 20, display: 'flex', gap: 16 }}>
         <button onClick={downloadSummary}>Download Summary</button>
-        <button onClick={readAloud}>🔊 Read Aloud</button>
+        <button onClick={readingAloud ? stopDictation : readAloud}>
+          {readingAloud ? '🔇 Stop Dictation' : '🔉 Read Aloud'}
+        </button>
       </div>
     </div>
   );