don't rely on token offsets from speech_to_text endpoint for creating text spans

lib/pangea/widgets/chat/message_speech_to_text_card.dart

@@ -72,12 +72,11 @@ class MessageSpeechToTextCardState extends State<MessageSpeechToTextCard> {
   TextSpan _buildTranscriptText(BuildContext context) {
     final Transcript transcript = speechToTextResponse!.transcript;
     final List<InlineSpan> spans = [];
-    final String fullText = transcript.text;
+    String remainingFullText = transcript.text;
-    int lastEnd = 0;
 
     if (transcript.sttTokens.isEmpty) {
       return TextSpan(
-        text: fullText,
+        text: remainingFullText,
         style: BotStyle.text(
           context,
           existingStyle: TextStyle(
@@ -89,19 +88,26 @@ class MessageSpeechToTextCardState extends State<MessageSpeechToTextCard> {
     }
 
     for (final token in transcript.sttTokens) {
-      if (token.offset > lastEnd) {
+      final offset = remainingFullText.indexOf(token.token.text.content);
+      final length = token.length;
+
+      if (remainingFullText.substring(0, offset).trim().isNotEmpty) {
+        continue;
+      }
+
+      if (offset > 0) {
         // Add any plain text before the token
         spans.add(
-          TextSpan(
+          TextSpan(text: remainingFullText.substring(0, offset)),
-            text: fullText.substring(lastEnd, token.offset),
-          ),
         );
-        // debugPrint('Pre: ${fullText.substring(lastEnd, token.offset)}');
       }
 
       spans.add(
         TextSpan(
-          text: fullText.substring(token.offset, token.offset + token.length),
+          text: remainingFullText.substring(
+            offset,
+            offset + token.length,
+          ),
           style: BotStyle.text(
             context,
             existingStyle: TextStyle(color: token.color(context)),
@@ -125,21 +131,12 @@ class MessageSpeechToTextCardState extends State<MessageSpeechToTextCard> {
         ),
       );
 
-      // debugPrint(
+      remainingFullText = remainingFullText.substring(offset + length);
-      //   'Main: ${fullText.substring(token.offset, token.offset + token.length)}',
-      // );
-
-      lastEnd = token.offset + token.length;
     }
 
-    if (lastEnd < fullText.length) {
+    if (remainingFullText.isNotEmpty) {
       // Add any remaining text after the last token
-      spans.add(
+      spans.add(TextSpan(text: remainingFullText));
-        TextSpan(
-          text: fullText.substring(lastEnd),
-        ),
-      );
-      // debugPrint('Post: ${fullText.substring(lastEnd)}');
     }
 
     return TextSpan(children: spans);