Merge pull request #445 from pangeachat/l1-tooltip

when user sees message translation for messages being dispalying in l…

assets/l10n/intl_en.arb

@@ -4068,7 +4068,7 @@
   "hintTitle": "Hint:",
   "speechToTextBody": "See how well you did by looking at your Accuracy and Words Per Minute scores",
   "previous": "Previous",
-    "versionNotFound": "Version Not Found",
+  "versionNotFound": "Version Not Found",
   "fetchingVersion": "Fetching version...",
   "versionFetchError": "Error fetching version",
   "connectedToStaging": "Connected to Staging",
@@ -4104,5 +4104,6 @@
     "type": "text",
     "placeholders": {}
   },
-  "changeAnalyticsView": "Change Analytics View"
+  "changeAnalyticsView": "Change Analytics View",
+  "l1TranslationBody": "Oops! It looks like this message wasn't sent in your target language. Messages not sent in your target language will not be translated."
 }

lib/pangea/enum/instructions_enum.dart

@@ -7,7 +7,6 @@ enum InstructionsEnum {
   clickMessage,
   blurMeansTranslate,
   tooltipInstructions,
-  speechToText,
 }
 
 extension Copy on InstructionsEnum {
@@ -21,8 +20,6 @@ extension Copy on InstructionsEnum {
         return L10n.of(context)!.blurMeansTranslateTitle;
       case InstructionsEnum.tooltipInstructions:
         return L10n.of(context)!.tooltipInstructionsTitle;
-      case InstructionsEnum.speechToText:
-        return L10n.of(context)!.hintTitle;
     }
   }
 
@@ -34,8 +31,6 @@ extension Copy on InstructionsEnum {
         return L10n.of(context)!.clickMessageBody;
       case InstructionsEnum.blurMeansTranslate:
         return L10n.of(context)!.blurMeansTranslateBody;
-      case InstructionsEnum.speechToText:
-        return L10n.of(context)!.speechToTextBody;
       case InstructionsEnum.tooltipInstructions:
         return PlatformInfos.isMobile
             ? L10n.of(context)!.tooltipInstructionsMobileBody
@@ -43,3 +38,19 @@ extension Copy on InstructionsEnum {
     }
   }
 }
+
+enum InlineInstructions {
+  speechToText,
+  l1Translation,
+}
+
+extension InlineInstructionsExtension on InlineInstructions {
+  String body(BuildContext context) {
+    switch (this) {
+      case InlineInstructions.speechToText:
+        return L10n.of(context)!.speechToTextBody;
+      case InlineInstructions.l1Translation:
+        return L10n.of(context)!.l1TranslationBody;
+    }
+  }
+}

lib/pangea/utils/inline_tooltip.dart

@@ -34,7 +34,7 @@ class InlineTooltip extends StatelessWidget {
         child: Padding(
           padding: const EdgeInsets.all(10),
           child: RichText(
-            textAlign: TextAlign.justify,
+            textAlign: TextAlign.center,
             text: TextSpan(
               children: [
                 const WidgetSpan(
@@ -50,6 +50,7 @@ class InlineTooltip extends StatelessWidget {
                   text: body,
                   style: TextStyle(
                     color: Theme.of(context).colorScheme.onSurface,
+                    height: 1.5,
                   ),
                 ),
               ],

lib/pangea/utils/instructions.dart

@@ -18,13 +18,13 @@ class InstructionsController {
   // We have these three methods to make sure that the instructions are not shown too much
 
   /// Instruction popup was closed by the user
-  final Map<InstructionsEnum, bool> _instructionsClosed = {};
+  final Map<String, bool> _instructionsClosed = {};
 
   /// Instruction popup has already been shown this session
-  final Map<InstructionsEnum, bool> _instructionsShown = {};
+  final Map<String, bool> _instructionsShown = {};
 
   /// Returns true if the user requested this popup not be shown again
-  bool? toggledOff(InstructionsEnum key) =>
+  bool? toggledOff(String key) =>
       _pangeaController.pStoreService.read(key.toString());
 
   InstructionsController(PangeaController pangeaController) {
@@ -33,18 +33,17 @@ class InstructionsController {
 
   /// Returns true if the instructions were closed
   /// or turned off by the user via the toggle switch
-  bool wereInstructionsTurnedOff(InstructionsEnum key) =>
+  bool wereInstructionsTurnedOff(String key) =>
       toggledOff(key) ?? _instructionsClosed[key] ?? false;
 
-  void turnOffInstruction(InstructionsEnum key) =>
-      _instructionsClosed[key] = true;
+  void turnOffInstruction(String key) => _instructionsClosed[key] = true;
 
   Future<void> updateEnableInstructions(
-    InstructionsEnum key,
+    String key,
     bool value,
   ) async =>
       await _pangeaController.pStoreService.save(
-        key.toString(),
+        key,
         value,
       );
 
@@ -56,12 +55,12 @@ class InstructionsController {
     String transformTargetKey, [
     bool showToggle = true,
   ]) async {
-    if (_instructionsShown[key] ?? false) {
+    if (_instructionsShown[key.toString()] ?? false) {
       return;
     }
-    _instructionsShown[key] = true;
+    _instructionsShown[key.toString()] = true;
 
-    if (wereInstructionsTurnedOff(key)) {
+    if (wereInstructionsTurnedOff(key.toString())) {
       return;
     }
     if (L10n.of(context) == null) {
@@ -90,7 +89,7 @@ class InstructionsController {
             CardHeader(
               text: key.title(context),
               botExpression: BotExpression.idle,
-              onClose: () => {_instructionsClosed[key] = true},
+              onClose: () => {_instructionsClosed[key.toString()] = true},
             ),
             const SizedBox(height: 10.0),
             Expanded(
@@ -118,10 +117,10 @@ class InstructionsController {
   /// which displays hint text defined in the enum extension
   Widget getInstructionInlineTooltip(
     BuildContext context,
-    InstructionsEnum key,
+    InlineInstructions key,
     VoidCallback onClose,
   ) {
-    if (wereInstructionsTurnedOff(key)) {
+    if (wereInstructionsTurnedOff(key.toString())) {
       return const SizedBox();
     }
 
@@ -134,7 +133,7 @@ class InstructionsController {
     }
 
     return InlineTooltip(
-      body: InstructionsEnum.speechToText.body(context),
+      body: InlineInstructions.speechToText.body(context),
       onClose: onClose,
     );
   }
@@ -167,11 +166,12 @@ class InstructionsToggleState extends State<InstructionsToggle> {
     return SwitchListTile.adaptive(
       activeColor: AppConfig.activeToggleColor,
       title: Text(L10n.of(context)!.doNotShowAgain),
-      value: pangeaController.instructions
-          .wereInstructionsTurnedOff(widget.instructionsKey),
+      value: pangeaController.instructions.wereInstructionsTurnedOff(
+        widget.instructionsKey.toString(),
+      ),
       onChanged: ((value) async {
         await pangeaController.instructions.updateEnableInstructions(
-          widget.instructionsKey,
+          widget.instructionsKey.toString(),
           value,
         );
         setState(() {});

lib/pangea/widgets/chat/message_speech_to_text_card.dart

@@ -67,7 +67,11 @@ class MessageSpeechToTextCardState extends State<MessageSpeechToTextCard> {
 
   void closeHint() {
     MatrixState.pangeaController.instructions.turnOffInstruction(
-      InstructionsEnum.speechToText,
+      InlineInstructions.speechToText.toString(),
+    );
+    MatrixState.pangeaController.instructions.updateEnableInstructions(
+      InlineInstructions.speechToText.toString(),
+      true,
     );
     setState(() {});
   }
@@ -204,7 +208,7 @@ class MessageSpeechToTextCardState extends State<MessageSpeechToTextCard> {
         ),
         MatrixState.pangeaController.instructions.getInstructionInlineTooltip(
           context,
-          InstructionsEnum.speechToText,
+          InlineInstructions.speechToText,
           closeHint,
         ),
       ],

lib/pangea/widgets/chat/message_translation_card.dart

@@ -1,8 +1,10 @@
+import 'package:fluffychat/pangea/enum/instructions_enum.dart';
 import 'package:fluffychat/pangea/matrix_event_wrappers/pangea_message_event.dart';
 import 'package:fluffychat/pangea/models/representation_content_model.dart';
 import 'package:fluffychat/pangea/repo/full_text_translation_repo.dart';
 import 'package:fluffychat/pangea/utils/bot_style.dart';
 import 'package:fluffychat/pangea/utils/error_handler.dart';
+import 'package:fluffychat/pangea/utils/inline_tooltip.dart';
 import 'package:fluffychat/pangea/widgets/chat/message_text_selection.dart';
 import 'package:fluffychat/pangea/widgets/chat/toolbar_content_loading_indicator.dart';
 import 'package:fluffychat/pangea/widgets/igc/card_error_widget.dart';
@@ -119,6 +121,17 @@ class MessageTranslationCardState extends State<MessageTranslationCard> {
     }
   }
 
+  void closeHint() {
+    MatrixState.pangeaController.instructions.turnOffInstruction(
+      InlineInstructions.l1Translation.toString(),
+    );
+    MatrixState.pangeaController.instructions.updateEnableInstructions(
+      InlineInstructions.l1Translation.toString(),
+      true,
+    );
+    setState(() {});
+  }
+
   @override
   Widget build(BuildContext context) {
     if (!_fetchingRepresentation &&
@@ -127,18 +140,35 @@ class MessageTranslationCardState extends State<MessageTranslationCard> {
       return const CardErrorWidget();
     }
 
+    final bool showWarning = l2Code != null &&
+        !widget.immersionMode &&
+        widget.messageEvent.originalSent?.langCode != l2Code &&
+        !MatrixState.pangeaController.instructions.wereInstructionsTurnedOff(
+          InlineInstructions.l1Translation.toString(),
+        );
+
     return Container(
       child: _fetchingRepresentation
           ? const ToolbarContentLoadingIndicator()
-          : selectionTranslation != null
-              ? Text(
-                  selectionTranslation!,
-                  style: BotStyle.text(context),
-                )
-              : Text(
-                  repEvent!.text,
-                  style: BotStyle.text(context),
-                ),
+          : Column(
+              children: [
+                selectionTranslation != null
+                    ? Text(
+                        selectionTranslation!,
+                        style: BotStyle.text(context),
+                      )
+                    : Text(
+                        repEvent!.text,
+                        style: BotStyle.text(context),
+                      ),
+                const SizedBox(height: 10),
+                if (showWarning)
+                  InlineTooltip(
+                    body: InlineInstructions.l1Translation.body(context),
+                    onClose: closeHint,
+                  ),
+              ],
+            ),
     );
   }
 }