chore: style tokens in transcription like other clickable tokens (#5055)

lib/pangea/toolbar/layout/overlay_message.dart

@@ -307,6 +307,7 @@ class OverlayMessage extends StatelessWidget {
                     isSubscribed != false,
                 maxWidth: maxWidth,
                 style: style,
+                eventId: event.eventId,
                 onTokenSelected: overlayController.onClickOverlayMessageToken,
                 isTokenSelected: overlayController.isTokenSelected,
               ),
@@ -437,6 +438,7 @@ class _MessageBubbleTranscription extends StatelessWidget {
   final bool enabled;
   final double maxWidth;
   final TextStyle style;
+  final String eventId;
 
   final Function(PangeaToken) onTokenSelected;
   final bool Function(PangeaToken) isTokenSelected;
@@ -446,6 +448,7 @@ class _MessageBubbleTranscription extends StatelessWidget {
     required this.enabled,
     required this.maxWidth,
     required this.style,
+    required this.eventId,
     required this.onTokenSelected,
     required this.isTokenSelected,
   });
@@ -497,6 +500,7 @@ class _MessageBubbleTranscription extends StatelessWidget {
                     mainAxisSize: MainAxisSize.min,
                     children: [
                       SttTranscriptTokens(
+                        eventId: eventId,
                         model: transcription,
                         style: style.copyWith(fontStyle: FontStyle.italic),
                         onClick: onTokenSelected,

lib/pangea/toolbar/reading_assistance/stt_transcript_tokens.dart

@@ -2,9 +2,12 @@ import 'package:flutter/material.dart';
 
 import 'package:fluffychat/pangea/events/models/pangea_token_model.dart';
 import 'package:fluffychat/pangea/speech_to_text/speech_to_text_response_model.dart';
+import 'package:fluffychat/pangea/toolbar/reading_assistance/token_rendering_util.dart';
 import 'package:fluffychat/pangea/toolbar/reading_assistance/tokens_util.dart';
+import 'package:fluffychat/widgets/hover_builder.dart';
 
 class SttTranscriptTokens extends StatelessWidget {
+  final String eventId;
   final SpeechToTextResponseModel model;
   final TextStyle? style;
 
@@ -13,6 +16,7 @@ class SttTranscriptTokens extends StatelessWidget {
 
   const SttTranscriptTokens({
     super.key,
+    required this.eventId,
     required this.model,
     this.onClick,
     this.isSelected,
@@ -24,6 +28,7 @@ class SttTranscriptTokens extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    debugPrint("Tokens: ${tokens.map((t) => t.toJson())}");
     if (model.transcript.sttTokens.isEmpty) {
       return Text(
         model.transcript.text,
@@ -33,6 +38,11 @@ class SttTranscriptTokens extends StatelessWidget {
     }
 
     final messageCharacters = model.transcript.text.characters;
+    final renderer = TokenRenderingUtil(
+      existingStyle: (style ?? DefaultTextStyle.of(context).style),
+    );
+
+    final newTokens = TokensUtil.getNewTokens(eventId, tokens);
     return RichText(
       textScaler: TextScaler.noScaling,
       text: TextSpan(
@@ -55,21 +65,24 @@ class SttTranscriptTokens extends StatelessWidget {
           final selected = isSelected?.call(token) ?? false;
 
           return WidgetSpan(
-            child: MouseRegion(
-              cursor: SystemMouseCursors.click,
-              child: GestureDetector(
-                behavior: HitTestBehavior.translucent,
-                onTap: onClick != null ? () => onClick?.call(token) : null,
-                child: RichText(
-                  text: TextSpan(
-                    text: text,
-                    style:
-                        (style ?? DefaultTextStyle.of(context).style).copyWith(
-                      decoration: TextDecoration.underline,
-                      decorationThickness: 4,
-                      decorationColor: selected
-                          ? Theme.of(context).colorScheme.primary
-                          : Colors.white.withAlpha(0),
+            child: HoverBuilder(
+              builder: (context, hovered) => MouseRegion(
+                cursor: SystemMouseCursors.click,
+                child: GestureDetector(
+                  behavior: HitTestBehavior.translucent,
+                  onTap: onClick != null ? () => onClick?.call(token) : null,
+                  child: RichText(
+                    text: TextSpan(
+                      text: text,
+                      style: renderer.style(
+                        underlineColor: Theme.of(context)
+                            .colorScheme
+                            .primary
+                            .withAlpha(200),
+                        hovered: hovered,
+                        selected: selected,
+                        isNew: newTokens.any((t) => t == token.text),
+                      ),
                     ),
                   ),
                 ),