wip: realtime updates

src/frontend/src/features/subtitle/component/Subtitles.tsx

@@ -65,6 +65,8 @@ const useTranscriptionState = () => {
   ) => {
     console.log(participant, segments)
 
+
+
     if (!participant || segments.length === 0) return
 
     if (segments.length > 1) {
@@ -75,15 +77,15 @@ const useTranscriptionState = () => {
     const segment = segments[0]
 
     setTranscriptionSegments((prevSegments) => {
-      const existingSegmentIds = new Set(prevSegments.map((s) => s.id))
-      if (existingSegmentIds.has(segment.id)) return prevSegments
-      return [
-        ...prevSegments,
-        {
-          participant: participant,
-          ...segment,
-        },
-      ]
+      const existingIndex = prevSegments.findIndex(
+        (s: TranscriptionSegmentWithParticipant) => s.id === segment.id
+      )
+      if (existingIndex === -1) {
+        return [...prevSegments, { participant, ...segment }]
+      }
+      const next = prevSegments.slice()
+      next[existingIndex] = { ...next[existingIndex], ...segment }
+      return next
     })
   }