feat: differentiate between SSE messages

For spoken text, we have JSON data that can be differentiated from other data. We show this spoken text in a different UI field.

ref: N25B-110

src/App.tsx

@@ -4,6 +4,7 @@ import './App.css'
 function App() {
   const [message, setMessage] = useState('');
   const [sseMessage, setSseMessage] = useState('');
+  const [spoken, setSpoken] = useState<string>("");
 
   const sendMessage = async () => {
     try {
@@ -26,12 +27,17 @@ function App() {
 
     eventSource.onmessage = (event) => {
       setSseMessage(event.data);
+
+      try {
+          const data = JSON.parse(event.data);
+          if (data.speech) setSpoken(data.speech);
+      } catch {}
     };
 
     return () => {
       eventSource.close();
     };
-  });
+  }, []);
 
   return (
     <div className="App">
@@ -40,6 +46,7 @@ function App() {
           type="text"
           value={message}
           onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && sendMessage().then(() => setMessage(""))}
           placeholder="Enter a message"
         />
         <button onClick={sendMessage}>Send Message to Backend</button>
@@ -48,6 +55,10 @@ function App() {
         <h2>Message from Server (SSE):</h2>
         <p>{sseMessage}</p>
       </div>
+      <div>
+        <h2>Spoken text (SSE):</h2>
+        <p>{spoken}</p>
+      </div>
     </div>
   );
 }