AI scribe UI by zatteo · Pull Request #4197 · linagora/tmail-flutter

zatteo · 2025-12-10T08:51:37Z

Big Scribe PR #4187 has been split in two:

logical part AI scribe data layer and requirements #4196 (merged in the features/ai branch)
UI part (here)

About prompts

A small PR will come soon that slighty update them to make them work as good as we can quickly. But later, we will handle differently prompts:

they will be fetched from a remote location
they will be managed by a dedicated library or SDK

Video

Screen.Recording.2025-12-10.at.09.47.59.mov

Summary by CodeRabbit

New Features
- Added AI Scribe integration enabling users to generate text suggestions directly in the composer via AI-powered assistance.
- Introduced AI assistant button in composer with menu for predefined actions and custom prompts.
- Added multilingual support for AI assistant across French, Russian, and Vietnamese.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2025-12-10T08:51:43Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This PR integrates AI Scribe functionality throughout the Composer module. Key changes include adding AIScribeInComposerMixin to ComposerController, implementing text selection monitoring in mobile and web editor views through callback propagation, introducing AIScribe UI components (button, menu, bar, suggestion dialog), establishing a centralized styling system for AIScribe, implementing dependency injection for AI services, adding localization strings across multiple languages, and providing a utility method to convert HTML editor content to plain text. The integration enables users to access AI-assisted text generation from the composer via full-text or selected-text workflows.

Possibly related PRs

PR #4196: Introduces the core AI Scribe infrastructure and GenerateAITextInteractor dependency that this PR integrates into the Composer workflow.

Suggested reviewers

chibenwa
hoangdat

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title "AI scribe UI" is vague and generic; it does not clearly convey the specific changes being introduced.	Consider a more specific title such as "Add AI Scribe UI integration for text generation" or "Implement AI Scribe dialog and editor selection UI" to better describe the primary change.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

zatteo · 2025-12-10T09:05:00Z

@coderabbitai review

coderabbitai · 2025-12-10T09:05:06Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

github-actions · 2025-12-10T09:10:08Z

This PR has been deployed to https://linagora.github.io/tmail-flutter/4197.

coderabbitai

Actionable comments posted: 2

🧹 Nitpick comments (17)

scribe/pubspec.yaml (1)

27-28: GetX dependency addition

Adding get: 4.6.6 here is reasonable for the AIScribe bindings/DI. Just confirm this version matches what the main app uses to avoid version skew across packages.

lib/main/localizations/app_localizations.dart (1)

5440-5445: aiAssistant getter wiring is correct; consider copy consistency

The new getter correctly exposes the aiAssistant key for use in the UI. If you want strict consistency with other locales or marketing copy, you might consider capitalizing it as "AI Assistant" in the default string.

scribe/lib/scribe/ai/presentation/widgets/ai_scribe_bar.dart (1)

1-89: AIScribeBar state & lifecycle look solid; minor UX tweak optional

Controller setup/disposal and _isButtonEnabled logic are correct, and trimming before send avoids empty/whitespace prompts.

Button and onSubmitted both funnel through _onSendPressed, so behavior is consistent.

Optional: you could add textInputAction: TextInputAction.send to the TextField to better align the keyboard affordance with the send action.
scribe/lib/scribe/ai/presentation/widgets/ai_scribe_button.dart (1)
18-26: Consider using theme-aware colors for dark mode compatibility.

The backgroundColor: Colors.white is hardcoded. If the app supports dark mode or plans to, consider extracting this to AIScribeColors or using theme-based colors for consistency.
-        backgroundColor: Colors.white,
+        backgroundColor: AIScribeColors.scribeButtonBackground,
scribe/lib/scribe/ai/presentation/widgets/ai_scribe_suggestion.dart (2)
196-198: Add user feedback after copying to clipboard.

The copy operation silently copies text without any visual confirmation. Users may not know if the copy succeeded.
             onPressed: () {
               Clipboard.setData(ClipboardData(text: suggestion));
+              ScaffoldMessenger.of(context).showSnackBar(
+                SnackBar(content: Text(ScribeLocalizations.of(context)!.copiedToClipboard)),
+              );
             },
147-150: Redundant error display - showing both generic and raw error.

The error state currently shows both a generic "Failed to generate" message and the raw error string. If you keep the raw error, it duplicates information; if you sanitize it (per earlier suggestion), this second text block becomes unnecessary.
lib/features/composer/presentation/widgets/mobile/mobile_editor_widget.dart (2)
53-56: Add defensive type checking for JavaScript callback data.

The cast args[0] as Map<dynamic, dynamic> will throw a TypeError if the JavaScript side sends unexpected data. Consider adding type checking.
         if (args.isNotEmpty) {
-          final data = args[0] as Map<dynamic, dynamic>;
-          handleSelectionChange(data);
+          final rawData = args[0];
+          if (rawData is Map<dynamic, dynamic>) {
+            handleSelectionChange(rawData);
+          }
         }
65-69: Setting _editorApi = null doesn't remove the JavaScript handler.

The JavaScript handler registered via addJavaScriptHandler persists until the webview is destroyed. While the mounted check prevents processing after disposal, consider whether explicit handler removal is needed for cleaner lifecycle management.
lib/features/composer/presentation/composer_view.dart (2)
567-571: Hardcoded padding value should reference the actual style constant.

The editorHorizontalPadding = 12.0 should reference ComposerStyle.mobileEditorPadding.horizontal or the actual constant to stay in sync if the padding changes.
-        // Account for the horizontal padding around the editor
-        const editorHorizontalPadding = 12.0;
+        // Account for the horizontal padding around the editor
+        final editorHorizontalPadding = ComposerStyle.mobileEditorPadding.left;
         return PositionedDirectional(
           start: coordinates.dx + editorHorizontalPadding,
239-270: Duplicated Stack/AIScribe overlay structure between mobile and tablet layouts.

The Stack wrapping the editor with AIScribe selection button is duplicated. Consider extracting this into a shared builder method to reduce duplication and ensure consistency.
Widget _buildEditorWithAIScribeOverlay({
  required BuildContext context,
  required Widget editorView,
  required Widget? viewEntireMessageWidget,
}) {
  return Stack(
    children: [
      Column(
        children: [
          editorView,
          viewEntireMessageWidget ?? const SizedBox.shrink(),
          SizedBox(height: MediaQuery.viewInsetsOf(context).bottom + 64),
        ],
      ),
      _buildAIScribeSelectionButton(context),
    ],
  );
}
Also applies to: 428-459
scribe/lib/scribe/ai/presentation/bindings/ai_scribe_bindings.dart (1)

19-27: Consider documenting dependency lifecycle expectations if instances may be disposed during app runtime.

GetX's lazyPut without fenix: true (the default) removes the factory after instance disposal, preventing automatic recreation on subsequent Get.find() calls. If your application's SmartManagement disposes these dependencies (AIDataSourceImpl, AIDataSource, etc.) and they need to be recreated, add fenix: true to preserve the factory for resurrection. Alternatively, use permanent: true if they should never be auto-disposed. Without visibility into the disposal patterns, clarify the intended lifecycle for these bindings.
scribe/lib/scribe/ai/presentation/widgets/ai_scribe_menu.dart (2)
207-248: Submenu panel lacks dismiss-on-outside-tap behavior.

The _SubmenuPanel displays as a positioned overlay but doesn't handle taps outside the submenu to dismiss it. Users may expect tapping outside to close the submenu.

Consider wrapping with a full-screen GestureDetector to capture outside taps:
     return Stack(
       children: [
+        Positioned.fill(
+          child: GestureDetector(
+            onTap: widget.onDismiss,
+            behavior: HitTestBehavior.translucent,
+            child: const SizedBox.expand(),
+          ),
+        ),
         Positioned(
           left: adjustedLeft,
           top: adjustedTop,
118-128: Silent no-op when category has no actions.

If a category without a submenu has an empty actions list, onTap does nothing. Consider adding a guard or logging for this edge case.
scribe/lib/scribe/ai/presentation/widgets/ai_scribe.dart (2)

76-92: Consider extracting duplicated positioned dialog wrapper.

The pattern of wrapping content with PointerInterceptor, GestureDetector, and Positioned inside a Stack is repeated for both dialog phases. A helper widget could reduce duplication.

Also applies to: 137-153

201-216: Throwing generic exceptions loses error context.

Using throw Exception(...) discards typed failure information. Consider propagating the original failure or using a custom exception type for better error handling upstream.

lib/features/composer/presentation/composer_view_web.dart (1)

563-564: Minor: Repeated AIConfig.isAiEnabled checks could be consolidated.

The same ternary pattern appears twice. Consider caching the result or extracting to a local variable if the config is static.

Also applies to: 839-840
lib/features/composer/presentation/composer_controller.dart (1)
872-884: HTML-to-text conversion has limited entity support.

The manual entity replacement handles only 6 common HTML entities. Consider using a dedicated HTML parsing library for more robust conversion, especially for user-generated content that may contain numeric entities ({) or other named entities.
+import 'package:html/parser.dart' as html_parser;
+
 String convertHtmlContentToTextContent(String htmlContent) {
-    String textContent = htmlContent.replaceAll(RegExp(r'<[^>]*>'), '');
-
-    textContent = textContent
-      .replaceAll('&nbsp;', ' ')
-      .replaceAll('&amp;', '&')
-      .replaceAll('&lt;', '<')
-      .replaceAll('&gt;', '>')
-      .replaceAll('&quot;', '"')
-      .replaceAll('&#39;', "'");
-
-    return textContent.trim();
+    final document = html_parser.parse(htmlContent);
+    return document.body?.text ?? '';
 }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 986ddb9 and a5720ac.

⛔ Files ignored due to path filters (1)

scribe/pubspec.lock is excluded by !**/*.lock

📒 Files selected for processing (26)

lib/features/composer/presentation/composer_bindings.dart (2 hunks)
lib/features/composer/presentation/composer_controller.dart (7 hunks)
lib/features/composer/presentation/composer_view.dart (6 hunks)
lib/features/composer/presentation/composer_view_web.dart (11 hunks)
lib/features/composer/presentation/view/mobile/mobile_editor_view.dart (3 hunks)
lib/features/composer/presentation/view/web/web_editor_view.dart (8 hunks)
lib/features/composer/presentation/widgets/mobile/mobile_editor_widget.dart (2 hunks)
lib/features/composer/presentation/widgets/mobile/tablet_bottom_bar_composer_widget.dart (3 hunks)
lib/features/composer/presentation/widgets/web/bottom_bar_composer_widget.dart (3 hunks)
lib/features/composer/presentation/widgets/web/web_editor_widget.dart (8 hunks)
lib/l10n/intl_fr.arb (1 hunks)
lib/l10n/intl_messages.arb (2 hunks)
lib/l10n/intl_ru.arb (1 hunks)
lib/l10n/intl_vi.arb (1 hunks)
lib/main/bindings/main_bindings.dart (2 hunks)
lib/main/localizations/app_localizations.dart (1 hunks)
scribe/lib/scribe.dart (1 hunks)
scribe/lib/scribe/ai/l10n/intl_messages.arb (1 hunks)
scribe/lib/scribe/ai/presentation/bindings/ai_scribe_bindings.dart (1 hunks)
scribe/lib/scribe/ai/presentation/styles/ai_scribe_styles.dart (1 hunks)
scribe/lib/scribe/ai/presentation/widgets/ai_scribe.dart (1 hunks)
scribe/lib/scribe/ai/presentation/widgets/ai_scribe_bar.dart (1 hunks)
scribe/lib/scribe/ai/presentation/widgets/ai_scribe_button.dart (1 hunks)
scribe/lib/scribe/ai/presentation/widgets/ai_scribe_menu.dart (1 hunks)
scribe/lib/scribe/ai/presentation/widgets/ai_scribe_suggestion.dart (1 hunks)
scribe/pubspec.yaml (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📚 Learning: 2025-12-09T09:36:45.349Z

Learnt from: dab246
Repo: linagora/tmail-flutter PR: 4194
File: lib/features/manage_account/presentation/manage_account_dashboard_controller.dart:174-176
Timestamp: 2025-12-09T09:36:45.349Z
Learning: In Dart/Flutter projects using GetX, do not wrap getBinding<T>() calls in try/catch since they return null when not found. Only wrap Get.find<T>() calls in try/catch because they throw if a dependency is unavailable. When a binding is optional, consider checking Get.isRegistered<T>() or handling the null/exception path gracefully instead of blindly catching, and document the expectation for failure modes where a dependency may not be registered.

Applied to files:

scribe/lib/scribe.dart
lib/features/composer/presentation/widgets/web/bottom_bar_composer_widget.dart
lib/main/localizations/app_localizations.dart
scribe/lib/scribe/ai/presentation/widgets/ai_scribe_bar.dart
lib/features/composer/presentation/view/web/web_editor_view.dart
scribe/lib/scribe/ai/presentation/widgets/ai_scribe_suggestion.dart
lib/features/composer/presentation/composer_bindings.dart
scribe/lib/scribe/ai/presentation/widgets/ai_scribe_button.dart
lib/features/composer/presentation/widgets/mobile/tablet_bottom_bar_composer_widget.dart
lib/features/composer/presentation/view/mobile/mobile_editor_view.dart
scribe/lib/scribe/ai/presentation/widgets/ai_scribe_menu.dart
scribe/lib/scribe/ai/presentation/widgets/ai_scribe.dart
lib/features/composer/presentation/widgets/web/web_editor_widget.dart
scribe/lib/scribe/ai/presentation/bindings/ai_scribe_bindings.dart
scribe/lib/scribe/ai/presentation/styles/ai_scribe_styles.dart
lib/main/bindings/main_bindings.dart
lib/features/composer/presentation/widgets/mobile/mobile_editor_widget.dart
lib/features/composer/presentation/composer_controller.dart
lib/features/composer/presentation/composer_view_web.dart
lib/features/composer/presentation/composer_view.dart

📚 Learning: 2025-12-09T12:47:45.861Z

Learnt from: zatteo
Repo: linagora/tmail-flutter PR: 4196
File: scribe/lib/scribe/ai/data/datasource_impl/ai_datasource_impl.dart:34-35
Timestamp: 2025-12-09T12:47:45.861Z
Learning: In the tmail-flutter repository, avoid suggesting replacing DioError with DioException unless there is a codebase-wide migration. This pattern applies to all Dart files; when reviewing, only propose a DioError-safe change (e.g., compatible error handling or conversion) unless a global migration is in place. Ensure consistency of DioError usage across modules and flag any deviations for a repo-wide decision.

Applied to files:

scribe/lib/scribe.dart
lib/features/composer/presentation/widgets/web/bottom_bar_composer_widget.dart
lib/main/localizations/app_localizations.dart
scribe/lib/scribe/ai/presentation/widgets/ai_scribe_bar.dart
lib/features/composer/presentation/view/web/web_editor_view.dart
scribe/lib/scribe/ai/presentation/widgets/ai_scribe_suggestion.dart
lib/features/composer/presentation/composer_bindings.dart
scribe/lib/scribe/ai/presentation/widgets/ai_scribe_button.dart
lib/features/composer/presentation/widgets/mobile/tablet_bottom_bar_composer_widget.dart
lib/features/composer/presentation/view/mobile/mobile_editor_view.dart
scribe/lib/scribe/ai/presentation/widgets/ai_scribe_menu.dart
scribe/lib/scribe/ai/presentation/widgets/ai_scribe.dart
lib/features/composer/presentation/widgets/web/web_editor_widget.dart
scribe/lib/scribe/ai/presentation/bindings/ai_scribe_bindings.dart
scribe/lib/scribe/ai/presentation/styles/ai_scribe_styles.dart
lib/main/bindings/main_bindings.dart
lib/features/composer/presentation/widgets/mobile/mobile_editor_widget.dart
lib/features/composer/presentation/composer_controller.dart
lib/features/composer/presentation/composer_view_web.dart
lib/features/composer/presentation/composer_view.dart

🪛 GitHub Actions: Analyze and test

scribe/lib/scribe.dart