feat: add message translation feature and integrate translator service

trongtindev · trongtindev · commit 415042ae81b2 · 2025-01-31T15:05:43.000+07:00
diff --git a/README.md b/README.md
@@ -29,6 +29,7 @@ Cross-Platform app for chatwoot! Built with Flutter.
 - Reply easily with canned responses
 - Receive realtime notifications about system activities
 - Communicate with other team members via private notes
+- Message translation in conversations
 - Assign statuses to your conversations, recorder, execute macro... and more to come!
 
 ```
@@ -49,6 +50,7 @@ Cross-Platform app for chatwoot! Built with Flutter.
 | UI - Customize theme     | ✅ Completed   |
 | Settings (Partially)     | 💪 In-Progress |
 | Conversations            | 💪 In-Progress |
+| Message Translation      | ✅ Completed   |
 | Contacts                 | 💪 In-Progress |
 | Notifications            | 💪 In-Progress |
 | Push Notifications       | ☑️ Not tested  |
diff --git a/lib/config/bindings.dart b/lib/config/bindings.dart
@@ -13,6 +13,7 @@ class BindingsConfig {
     await Get.putAsync(() => AssistantService().init());
     await Get.putAsync(() => NotificationService().init());
     await Get.putAsync(() => RealtimeService().init());
+    await Get.putAsync(() => TranslatorService().init());
 
     // global controllers
     await Get.putAsync(() => CannedResponsesController().init(),
diff --git a/lib/imports.dart b/lib/imports.dart
@@ -79,6 +79,7 @@ export 'services/notification.dart';
 export 'services/realtime.dart';
 export 'services/settings.dart';
 export 'services/theme.dart';
+export 'services/translator.dart';
 export 'services/updater.dart';
 
 export 'utils/bytes.dart';
diff --git a/lib/screens/conversations/controllers/chat.dart b/lib/screens/conversations/controllers/chat.dart
@@ -1,3 +1,5 @@
+import 'package:chatwoot/screens/conversations/widgets/message_action.dart';
+
 import '/screens/contacts/views/detail.dart';
 import '/imports.dart';
 
@@ -6,13 +8,15 @@ class ConversationChatController extends GetxController {
   final _api = Get.find<ApiService>();
   final _auth = Get.find<AuthService>();
   final _realtime = Get.find<RealtimeService>();
+  final _translator = Get.find<TranslatorService>();
 
   final scrollController = ScrollController();
   final int conversation_id;
   final loading = false.obs;
   final isNoMore = false.obs;
   final info = Rxn<ConversationInfo>();
   final error = ''.obs;
+  final translated = RxMap<int, String?>({});
   late RxList<MessageInfo> messages;
 
   ConversationChatController({
@@ -194,4 +198,22 @@ class ConversationChatController extends GetxController {
       status: status,
     );
   }
+
+  Future<void> showMessageActions(MessageInfo info) async {
+    await Get.bottomSheet(MessageActions(controller: this, info: info));
+  }
+
+  Future<void> translate(MessageInfo info) async {
+    translated[info.id] = null;
+    final result = await _translator.getProvider.translate(
+      info.content!,
+      to: Get.locale!,
+    );
+    if (result.isError()) {
+      showSnackBar(result.exceptionOrNull()!.toString());
+      translated.remove(info.id);
+      return;
+    }
+    translated[info.id] = result.getOrThrow();
+  }
 }
diff --git a/lib/screens/conversations/widgets/message.dart b/lib/screens/conversations/widgets/message.dart
@@ -1,15 +1,18 @@
+import 'package:chatwoot/screens/conversations/controllers/chat.dart';
 import 'package:flutter_markdown/flutter_markdown.dart';
 import '/imports.dart';
 
 class Message extends StatelessWidget {
   final auth = Get.find<AuthService>();
   final realtime = Get.find<RealtimeService>();
 
+  final ConversationChatController controller;
   final MessageInfo info;
   final BorderRadius borderRadius;
 
   Message({
     super.key,
+    required this.controller,
     required this.info,
     required this.borderRadius,
   });
@@ -146,54 +149,58 @@ class Message extends StatelessWidget {
                 }),
               ),
             Flexible(
-              child: Container(
+              child: Ink(
                 decoration: BoxDecoration(
                   color: backgroundColor,
                   border: Border.all(color: backgroundColor),
                   borderRadius: borderRadius,
                 ),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    if (info.attachments.isNotEmpty) buildAttachments(context),
-                    if (info.content != null && info.content!.isNotEmpty)
-                      buildContent(context),
-                    // TODO: align right
-                    Padding(
-                      padding: const EdgeInsets.all(8),
-                      child: Row(
-                        mainAxisSize: MainAxisSize.min,
-                        spacing: 8,
-                        children: [
-                          if (info.private)
-                            Text(
-                              t.private,
-                              style: TextStyle(
-                                fontSize: Get.textTheme.labelSmall!.fontSize,
+                child: InkWell(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      if (info.attachments.isNotEmpty)
+                        buildAttachments(context),
+                      if (info.content != null && info.content!.isNotEmpty)
+                        buildContent(context),
+                      // TODO: align right
+                      Padding(
+                        padding: const EdgeInsets.all(8),
+                        child: Row(
+                          mainAxisSize: MainAxisSize.min,
+                          spacing: 8,
+                          children: [
+                            if (info.private)
+                              Text(
+                                t.private,
+                                style: TextStyle(
+                                  fontSize: Get.textTheme.labelSmall!.fontSize,
+                                ),
+                              ),
+                            if (isOwner == false)
+                              Text(
+                                sender.display_name,
+                                style: TextStyle(
+                                  fontSize: Get.textTheme.labelSmall!.fontSize,
+                                ),
                               ),
-                            ),
-                          if (isOwner == false)
                             Text(
-                              sender.display_name,
+                              created_at,
                               style: TextStyle(
                                 fontSize: Get.textTheme.labelSmall!.fontSize,
                               ),
                             ),
-                          Text(
-                            created_at,
-                            style: TextStyle(
-                              fontSize: Get.textTheme.labelSmall!.fontSize,
-                            ),
-                          ),
-                          if (statusIcon != null)
-                            Padding(
-                              padding: EdgeInsets.only(right: 4),
-                              child: statusIcon,
-                            ),
-                        ],
+                            if (statusIcon != null)
+                              Padding(
+                                padding: EdgeInsets.only(right: 4),
+                                child: statusIcon,
+                              ),
+                          ],
+                        ),
                       ),
-                    ),
-                  ],
+                    ],
+                  ),
+                  onLongPress: () => controller.showMessageActions(info),
                 ),
               ),
             ),
@@ -210,14 +217,21 @@ class Message extends StatelessWidget {
         right: 8,
         top: 8,
       ),
-      child: MarkdownBody(
-        data: info.content!.trim(),
-        selectable: true,
-        onTapLink: (text, href, title) {
-          if (href == null || href.isEmpty) return;
-          openInAppBrowser(href);
-        },
-      ),
+      child: Obx(() {
+        final translated = controller.translated.value;
+        final content = translated.containsKey(info.id) &&
+                isNotNullOrEmpty(translated[info.id])
+            ? translated[info.id]!
+            : info.content!.trim();
+
+        return MarkdownBody(
+          data: content,
+          onTapLink: (text, href, title) {
+            if (href == null || href.isEmpty) return;
+            openInAppBrowser(href);
+          },
+        );
+      }),
     );
   }
 
diff --git a/lib/screens/conversations/widgets/message_action.dart b/lib/screens/conversations/widgets/message_action.dart
@@ -0,0 +1,59 @@
+import '/screens/conversations/controllers/chat.dart';
+import '/imports.dart';
+
+class MessageActions extends StatelessWidget {
+  final ConversationChatController controller;
+  final MessageInfo info;
+
+  const MessageActions({
+    super.key,
+    required this.controller,
+    required this.info,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView(
+      shrinkWrap: true,
+      children: [
+        // CustomListTile(
+        //   leading: Icon(Icons.copy_outlined),
+        //   title: Text(t.copy),
+        //   onTap: () {
+        //     Get.close();
+        //   },
+        // ),
+        // CustomListTile(
+        //   leading: Icon(Icons.delete_outline),
+        //   title: Text(t.delete),
+        //   onTap: () {
+        //     Get.close();
+        //   },
+        // ),
+        Obx(() {
+          final translated = controller.translated.value;
+          final isTranslating = translated.containsKey(info.id);
+          final isTranslated =
+              isTranslating && isNotNullOrEmpty(translated[info.id]);
+
+          return CustomListTile(
+            enabled: !translated.containsKey(info.id),
+            leading: Icon(Icons.translate),
+            title: Text(t.translate),
+            onTap: () async {
+              await controller.translate(info);
+              Get.close();
+            },
+            trailing: SizedBox(
+              width: 24,
+              height: 24,
+              child: isTranslating && !isTranslated
+                  ? CircularProgressIndicator()
+                  : null,
+            ),
+          );
+        }),
+      ],
+    );
+  }
+}
diff --git a/pubspec.lock b/pubspec.lock
@@ -1163,6 +1163,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.10.0"
+  translator:
+    dependency: "direct main"
+    description:
+      name: translator
+      sha256: "8f5e56d0ffb8f493b23ad0e4f824c17e5f43d45997e33b7c7b689c7a33cf3b06"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.3+1"
   typed_data:
     dependency: transitive
     description:
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -47,6 +47,7 @@ dependencies:
   just_audio: ^0.9.44 # feature-rich audio player
   record: ^5.2.0 # Audio recorder from microphone to a given file path or stream.
   flutter_colorpicker: ^1.1.0
+  translator: ^1.0.3+1 # Free Google Translate API for Dart
 
   # desktop
   window_manager: ^0.4.3 # This plugin allows Flutter desktop apps to resizing and repositioning the window.
