From c512739a25b29f9631db23014f7a0dd40ac33496 Mon Sep 17 00:00:00 2001
From: Twirre Meulenbelt <43213592+TwirreM@users.noreply.github.com>
Date: Wed, 1 Oct 2025 10:17:16 +0200
Subject: [PATCH] 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 | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index e9ce59b..53505d5 100644
--- a/src/App.tsx
+++ b/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>
   );
 }