Design and insert inline tooltip

assets/l10n/intl_en.arb

@@ -4058,5 +4058,7 @@
   "suggestToSpaceDesc": "Suggested spaces will appear in the chat lists for their parent spaces",
   "practice": "Practice",
   "noLanguagesSet": "No languages set",
-  "noActivitiesFound": "No practice activities found for this message"
+  "noActivitiesFound": "No practice activities found for this message",
+  "hintTitle": "Hint:",
+  "speechToTextBody": "See how well you did by looking at your Accuracy and Words Per Minute scores"
 }

lib/pages/chat/chat_event_list.dart

@@ -4,8 +4,8 @@ import 'package:fluffychat/pages/chat/events/message.dart';
 import 'package:fluffychat/pages/chat/seen_by_row.dart';
 import 'package:fluffychat/pages/chat/typing_indicators.dart';
 import 'package:fluffychat/pages/user_bottom_sheet/user_bottom_sheet.dart';
+import 'package:fluffychat/pangea/enum/instructions_enum.dart';
 import 'package:fluffychat/pangea/extensions/pangea_room_extension/pangea_room_extension.dart';
-import 'package:fluffychat/pangea/utils/instructions.dart';
 import 'package:fluffychat/pangea/widgets/chat/locked_chat_message.dart';
 import 'package:fluffychat/utils/account_config.dart';
 import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';

lib/pangea/choreographer/widgets/it_bar_buttons.dart

@@ -1,5 +1,5 @@
 import 'package:fluffychat/pangea/controllers/pangea_controller.dart';
-import 'package:fluffychat/pangea/utils/instructions.dart';
+import 'package:fluffychat/pangea/enum/instructions_enum.dart';
 import 'package:fluffychat/widgets/matrix.dart';
 import 'package:flutter/material.dart';
 

lib/pangea/enum/instructions_enum.dart

@@ -0,0 +1,68 @@
+import 'package:fluffychat/pangea/utils/bot_style.dart';
+import 'package:fluffychat/utils/platform_infos.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+
+enum InstructionsEnum {
+  itInstructions,
+  clickMessage,
+  blurMeansTranslate,
+  tooltipInstructions,
+  speechToText,
+}
+
+extension Copy on InstructionsEnum {
+  String title(BuildContext context) {
+    switch (this) {
+      case InstructionsEnum.itInstructions:
+        return L10n.of(context)!.itInstructionsTitle;
+      case InstructionsEnum.clickMessage:
+        return L10n.of(context)!.clickMessageTitle;
+      case InstructionsEnum.blurMeansTranslate:
+        return L10n.of(context)!.blurMeansTranslateTitle;
+      case InstructionsEnum.tooltipInstructions:
+        return L10n.of(context)!.tooltipInstructionsTitle;
+      case InstructionsEnum.speechToText:
+        return L10n.of(context)!.hintTitle;
+    }
+  }
+
+  String body(BuildContext context) {
+    switch (this) {
+      case InstructionsEnum.itInstructions:
+        return L10n.of(context)!.itInstructionsBody;
+      case InstructionsEnum.clickMessage:
+        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
+            : L10n.of(context)!.tooltipInstructionsBrowserBody;
+    }
+  }
+
+  Widget inlineTooltip(BuildContext context) {
+    switch (this) {
+      case InstructionsEnum.speechToText:
+        return Column(
+          children: [
+            Text(
+              title(context),
+              style: BotStyle.text(context),
+            ),
+            Text(
+              body(context),
+              style: BotStyle.text(context),
+            ),
+            // ),
+          ],
+        );
+      default:
+        debugPrint('inlineTooltip not implemented for $this');
+        return const SizedBox();
+    }
+  }
+}

lib/pangea/models/user_model.dart

@@ -4,8 +4,8 @@ import 'package:country_picker/country_picker.dart';
 import 'package:fluffychat/pangea/constants/local.key.dart';
 import 'package:fluffychat/pangea/constants/model_keys.dart';
 import 'package:fluffychat/pangea/controllers/pangea_controller.dart';
+import 'package:fluffychat/pangea/enum/instructions_enum.dart';
 import 'package:fluffychat/pangea/models/space_model.dart';
-import 'package:fluffychat/pangea/utils/instructions.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 

lib/pangea/utils/instructions.dart

@@ -1,4 +1,4 @@
-import 'package:fluffychat/utils/platform_infos.dart';
+import 'package:fluffychat/pangea/enum/instructions_enum.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 
@@ -14,24 +14,24 @@ import 'overlay.dart';
 class InstructionsController {
   late PangeaController _pangeaController;
 
+  // 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 = {};
 
-  /// Instructions that were shown in that session
+  /// Instruction popup has already been shown this session
   final Map<InstructionsEnum, bool> _instructionsShown = {};
 
-  /// Returns true if the instructions were turned off by the user via the toggle switch
+  /// Returns true if the user requested this popup not be shown again
   bool? toggledOff(InstructionsEnum key) =>
       _pangeaController.pStoreService.read(key.toString());
 
-  /// We have these three methods to make sure that the instructions are not shown too much
-
   InstructionsController(PangeaController pangeaController) {
     _pangeaController = pangeaController;
   }
 
-  /// Returns true if the instructions were turned off by the user
-  /// via the toggle switch
+  /// Returns true if the instructions were closed
+  /// or turned off by the user via the toggle switch
   bool wereInstructionsTurnedOff(InstructionsEnum key) =>
       toggledOff(key) ?? _instructionsClosed[key] ?? false;
 
@@ -44,29 +44,6 @@ class InstructionsController {
         value,
       );
 
-  // return a text widget with constainer that expands to fill a parent container
-  // and displays instructions text defined in the enum extension
-  Future<Widget> getInlineTooltip(
-    BuildContext context,
-    InstructionsEnum key,
-  ) async {
-    if (wereInstructionsTurnedOff(key)) {
-      return const SizedBox();
-    }
-    if (L10n.of(context) == null) {
-      ErrorHandler.logError(
-        m: "null context in ITBotButton.showCard",
-        s: StackTrace.current,
-      );
-      return const SizedBox();
-    }
-    if (_instructionsShown[key] ?? false) {
-      return const SizedBox();
-    }
-
-    return key.inlineTooltip(context);
-  }
-
   Future<void> showInstructionsPopup(
     BuildContext context,
     InstructionsEnum key,
@@ -130,58 +107,56 @@ class InstructionsController {
       ),
     );
   }
-}
 
-enum InstructionsEnum {
-  itInstructions,
-  clickMessage,
-  blurMeansTranslate,
-  tooltipInstructions,
-}
-
-extension Copy on InstructionsEnum {
-  String title(BuildContext context) {
-    switch (this) {
-      case InstructionsEnum.itInstructions:
-        return L10n.of(context)!.itInstructionsTitle;
-      case InstructionsEnum.clickMessage:
-        return L10n.of(context)!.clickMessageTitle;
-      case InstructionsEnum.blurMeansTranslate:
-        return L10n.of(context)!.blurMeansTranslateTitle;
-      case InstructionsEnum.tooltipInstructions:
-        return L10n.of(context)!.tooltipInstructionsTitle;
-    }
-  }
-
-  String body(BuildContext context) {
-    switch (this) {
-      case InstructionsEnum.itInstructions:
-        return L10n.of(context)!.itInstructionsBody;
-      case InstructionsEnum.clickMessage:
-        return L10n.of(context)!.clickMessageBody;
-      case InstructionsEnum.blurMeansTranslate:
-        return L10n.of(context)!.blurMeansTranslateBody;
-      case InstructionsEnum.tooltipInstructions:
-        return PlatformInfos.isMobile
-            ? L10n.of(context)!.tooltipInstructionsMobileBody
-            : L10n.of(context)!.tooltipInstructionsBrowserBody;
+  /// Returns a widget that will be added to existing widget
+  /// that displays hint text defined in the enum extension
+  Widget getInlineTooltip(
+    BuildContext context,
+    InstructionsEnum key,
+    Function refreshOnClose,
+  ) {
+    if (wereInstructionsTurnedOff(key)) {
+      // Uncomment this line to make hint viewable again
+      // _instructionsClosed[key] = false;
+      return const SizedBox();
     }
-  }
-
-  Widget inlineTooltip(BuildContext context) {
-    switch (this) {
-      case InstructionsEnum.itInstructions:
-        return Padding(
-          padding: const EdgeInsets.all(6.0),
-          child: Text(
-            body(context),
-            style: BotStyle.text(context),
-          ),
-        );
-      default:
-        print('inlineTooltip not implemented for $this');
-        return const SizedBox();
+    if (L10n.of(context) == null) {
+      ErrorHandler.logError(
+        m: "null context in ITBotButton.showCard",
+        s: StackTrace.current,
+      );
+      return const SizedBox();
     }
+    return Column(
+      children: [
+        Row(
+          children: [
+            const Expanded(
+              child: Divider(),
+            ),
+            CircleAvatar(
+              radius: 10,
+              backgroundColor:
+                  Theme.of(context).colorScheme.primary.withAlpha(50),
+              child: IconButton(
+                padding: EdgeInsets.zero,
+                icon: const Icon(
+                  Icons.close_outlined,
+                  size: 15,
+                ),
+                onPressed: () {
+                  _instructionsClosed[key] = true;
+                  refreshOnClose();
+                },
+              ),
+            ),
+          ],
+        ),
+        key.inlineTooltip(context),
+        const SizedBox(height: 9),
+        const Divider(),
+      ],
+    );
   }
 }
 

lib/pangea/widgets/chat/message_speech_to_text_card.dart

@@ -1,9 +1,9 @@
 import 'dart:developer';
 
+import 'package:fluffychat/pangea/enum/instructions_enum.dart';
 import 'package:fluffychat/pangea/matrix_event_wrappers/pangea_message_event.dart';
 import 'package:fluffychat/pangea/models/speech_to_text_models.dart';
 import 'package:fluffychat/pangea/utils/error_handler.dart';
-import 'package:fluffychat/pangea/utils/instructions.dart';
 import 'package:fluffychat/pangea/widgets/chat/toolbar_content_loading_indicator.dart';
 import 'package:fluffychat/pangea/widgets/common/icon_number_widget.dart';
 import 'package:fluffychat/pangea/widgets/igc/card_error_widget.dart';
@@ -65,6 +65,10 @@ class MessageSpeechToTextCardState extends State<MessageSpeechToTextCard> {
     }
   }
 
+  void refreshOnCloseHint() {
+    setState(() {});
+  }
+
   TextSpan _buildTranscriptText(BuildContext context) {
     final Transcript transcript = speechToTextResponse!.transcript;
     final List<InlineSpan> spans = [];
@@ -195,6 +199,11 @@ class MessageSpeechToTextCardState extends State<MessageSpeechToTextCard> {
             ),
           ],
         ),
+        MatrixState.pangeaController.instructions.getInlineTooltip(
+          context,
+          InstructionsEnum.speechToText,
+          refreshOnCloseHint,
+        ),
       ],
     );
   }

lib/pangea/widgets/chat/message_toolbar.dart

@@ -134,6 +134,8 @@ class ToolbarDisplayController {
                 ? Alignment.bottomLeft
                 : Alignment.topLeft,
         backgroundColor: const Color.fromRGBO(0, 0, 0, 1).withAlpha(100),
+        closePrevOverlay:
+            MatrixState.pangeaController.subscriptionController.isSubscribed,
       );
 
       if (MatrixState.pAnyState.entries.isNotEmpty) {

lib/pangea/widgets/igc/pangea_rich_text.dart

@@ -3,10 +3,10 @@ import 'dart:ui';
 
 import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/pangea/controllers/pangea_controller.dart';
+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/utils/error_handler.dart';
-import 'package:fluffychat/pangea/utils/instructions.dart';
 import 'package:fluffychat/pangea/widgets/chat/message_context_menu.dart';
 import 'package:fluffychat/pangea/widgets/chat/message_toolbar.dart';
 import 'package:fluffychat/widgets/matrix.dart';