From ff82bca9ec9fb5c340c831bbd23e93b305670582 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 23 Jan 2026 18:09:25 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20ensure=20transcript=20?=
 =?UTF-8?q?segments=20are=20sorted=20by=20their=20timestamp?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switching from Deepgram to our custom Kyutai implementation introduced changes
in how segment data is returned by the LiveKit agent, so the segment start time
is now treated as optional.
---
 CHANGELOG.md                                      |  1 +
 .../src/features/subtitle/component/Subtitles.tsx | 15 +++++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 88232c1e..90e2f1ff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ and this project adheres to
 - ♿️(frontend) announce copy state in invite dialog #877
 - 📝(frontend) align close dialog label in rooms locale #878
 - 🩹(backend) use case-insensitive email matching in the external api #887
+- 🐛(frontend) ensure transcript segments are sorted by their timestamp #899
 
 ## [1.3.0] - 2026-01-13
 
diff --git a/src/frontend/src/features/subtitle/component/Subtitles.tsx b/src/frontend/src/features/subtitle/component/Subtitles.tsx
index 6783f48a..da004c4b 100644
--- a/src/frontend/src/features/subtitle/component/Subtitles.tsx
+++ b/src/frontend/src/features/subtitle/component/Subtitles.tsx
@@ -13,7 +13,7 @@ export interface TranscriptionSegment {
   id: string
   text: string
   language: string
-  startTime: number
+  startTime?: number
   endTime: number
   final: boolean
   firstReceivedTime: number
@@ -24,8 +24,9 @@ export interface TranscriptionRow {
   id: string
   participant: Participant
   segments: TranscriptionSegment[]
-  startTime: number
+  startTime?: number
   lastUpdateTime: number
+  lastReceivedTime: number
 }
 
 const useTranscriptionState = () => {
@@ -72,7 +73,9 @@ const useTranscriptionState = () => {
           id: `${participant.identity}-${now}`,
           participant,
           segments: [...segments],
-          startTime: Math.min(...segments.map((s) => s.startTime)),
+          lastReceivedTime: Math.min(
+            ...segments.map((s) => s.lastReceivedTime)
+          ),
           lastUpdateTime: now,
         }
         updatedRows.push(newRow)
@@ -228,7 +231,11 @@ export const Subtitles = () => {
       >
         {transcriptionRows
           .slice()
-          .reverse()
+          .sort(
+            (a, b) =>
+              (b.startTime ?? b.lastUpdateTime) -
+              (a.startTime ?? a.lastUpdateTime)
+          )
           .map((row) => (
             <Transcription key={row.id} row={row} />
           ))}