feat(ui): added edited label to messages (#2032)

* added edited label to messages

* lint and test fixes

* changelog

* added tests

* chore: re-run drift build_runner

---------

Co-authored-by: Sahil Kumar <[email protected]>

Author: d3xvn

packages/stream_chat/lib/src/core/models/message.dart

@@ -44,6 +44,7 @@ class Message extends Equatable {
     this.localUpdatedAt,
     DateTime? deletedAt,
     this.localDeletedAt,
+    this.messageTextUpdatedAt,
     this.user,
     this.pinned = false,
     this.pinnedAt,
@@ -192,6 +193,10 @@ class Message extends Equatable {
   @JsonKey(includeToJson: false)
   DateTime? get deletedAt => localDeletedAt ?? remoteDeletedAt;
 
+  /// Reserved field indicating when the message text was edited.
+  @JsonKey(includeToJson: false)
+  final DateTime? messageTextUpdatedAt;
+
   /// Indicates when the message was deleted locally.
   @JsonKey(includeToJson: false, includeFromJson: false)
   final DateTime? localDeletedAt;
@@ -265,6 +270,7 @@ class Message extends Equatable {
     'created_at',
     'updated_at',
     'deleted_at',
+    'message_text_updated_at',
     'user',
     'pinned',
     'pinned_at',
@@ -304,6 +310,7 @@ class Message extends Equatable {
     DateTime? localUpdatedAt,
     DateTime? deletedAt,
     DateTime? localDeletedAt,
+    DateTime? messageTextUpdatedAt,
     User? user,
     bool? pinned,
     DateTime? pinnedAt,
@@ -373,6 +380,7 @@ class Message extends Equatable {
       localUpdatedAt: localUpdatedAt ?? this.localUpdatedAt,
       deletedAt: deletedAt ?? remoteDeletedAt,
       localDeletedAt: localDeletedAt ?? this.localDeletedAt,
+      messageTextUpdatedAt: messageTextUpdatedAt ?? this.messageTextUpdatedAt,
       user: user ?? this.user,
       pinned: pinned ?? this.pinned,
       pinnedAt: pinnedAt ?? this.pinnedAt,
@@ -413,6 +421,7 @@ class Message extends Equatable {
       localUpdatedAt: other.localUpdatedAt,
       deletedAt: other.remoteDeletedAt,
       localDeletedAt: other.localDeletedAt,
+      messageTextUpdatedAt: other.messageTextUpdatedAt,
       user: other.user,
       pinned: other.pinned,
       pinnedAt: other.pinnedAt,
@@ -472,6 +481,7 @@ class Message extends Equatable {
         remoteUpdatedAt,
         localDeletedAt,
         remoteDeletedAt,
+        messageTextUpdatedAt,
         user,
         pinned,
         pinnedAt,

packages/stream_chat/lib/src/core/models/message.g.dart

@@ -1,3 +1,9 @@
+## Upcoming
+
+✅ Added
+
+- Messages by default now show an "Edited" label if text is edited. Use `showEditedLabel` to disable this functionality. 
+
 ## 8.1.0
 
 🐞 Fixed

packages/stream_chat_flutter/CHANGELOG.md

@@ -1,7 +1,7 @@
 import UIKit
 import Flutter
 
-@UIApplicationMain
+@main
 @objc class AppDelegate: FlutterAppDelegate {
   override func application(
     _ application: UIApplication,

packages/stream_chat_flutter/example/ios/Runner/AppDelegate.swift

@@ -69,6 +69,9 @@ abstract class Translations {
   /// The label for message deleted
   String get messageDeletedLabel;
 
+  /// The label for showing the message is edited
+  String get editedMessageLabel;
+
   /// The label for message reactions
   String get messageReactionsLabel;
 
@@ -455,6 +458,9 @@ class DefaultTranslations implements Translations {
   @override
   String get messageDeletedLabel => 'Message deleted';
 
+  @override
+  String get editedMessageLabel => 'Edited';
+
   @override
   String get messageReactionsLabel => 'Message Reactions';
 

packages/stream_chat_flutter/lib/src/localization/translations.dart

@@ -20,6 +20,7 @@ class BottomRow extends StatelessWidget {
     required this.showInChannel,
     required this.showTimeStamp,
     required this.showUsername,
+    required this.showEditedLabel,
     required this.reverse,
     required this.showSendingIndicator,
     required this.hasUrlAttachments,
@@ -56,6 +57,9 @@ class BottomRow extends StatelessWidget {
   /// {@macro showUsername}
   final bool showUsername;
 
+  /// {@macro showEdited}
+  final bool showEditedLabel;
+
   /// {@macro reverse}
   final bool reverse;
 
@@ -104,6 +108,7 @@ class BottomRow extends StatelessWidget {
     bool? showInChannel,
     bool? showTimeStamp,
     bool? showUsername,
+    bool? showEditedLabel,
     bool? reverse,
     bool? showSendingIndicator,
     bool? hasUrlAttachments,
@@ -127,6 +132,7 @@ class BottomRow extends StatelessWidget {
         showInChannel: showInChannel ?? this.showInChannel,
         showTimeStamp: showTimeStamp ?? this.showTimeStamp,
         showUsername: showUsername ?? this.showUsername,
+        showEditedLabel: showEditedLabel ?? this.showEditedLabel,
         reverse: reverse ?? this.reverse,
         showSendingIndicator: showSendingIndicator ?? this.showSendingIndicator,
         hasUrlAttachments: hasUrlAttachments ?? this.hasUrlAttachments,
@@ -156,6 +162,7 @@ class BottomRow extends StatelessWidget {
     final threadParticipants = message.threadParticipants?.take(2);
     final showThreadParticipants = threadParticipants?.isNotEmpty == true;
     final replyCount = message.replyCount;
+    final isEdited = message.messageTextUpdatedAt != null;
 
     var msg = context.translations.threadReplyLabel;
     if (showThreadReplyIndicator && replyCount! > 1) {
@@ -185,6 +192,11 @@ class BottomRow extends StatelessWidget {
               message: message,
               messageTheme: messageTheme,
             ),
+      if (showEditedLabel && isEdited)
+        Text(
+          context.translations.editedMessageLabel,
+          style: messageTheme.createdAtStyle,
+        ),
       if (showTimeStamp)
         Text(
           Jiffy.parseFromDateTime(message.createdAt.toLocal()).jm,

packages/stream_chat_flutter/lib/src/message_widget/bottom_row.dart

@@ -63,6 +63,7 @@ class StreamMessageWidget extends StatefulWidget {
     this.onConfirmDeleteTap,
     this.showUsername = true,
     this.showTimestamp = true,
+    this.showEditedLabel = true,
     this.showReactions = true,
     this.showDeleteMessage = true,
     this.showEditMessage = true,
@@ -268,6 +269,11 @@ class StreamMessageWidget extends StatefulWidget {
   /// {@endtemplate}
   final bool showTimestamp;
 
+  /// {@template showTimestamp}
+  /// Show edited label if message is edited
+  /// {@endtemplate}
+  final bool showEditedLabel;
+
   /// {@template showReplyMessage}
   /// Show reply action
   /// {@endtemplate}
@@ -415,6 +421,7 @@ class StreamMessageWidget extends StatefulWidget {
     ShowMessageCallback? onShowMessage,
     bool? showUsername,
     bool? showTimestamp,
+    bool? showEditedLabel,
     bool? showReplyMessage,
     bool? showThreadReplyMessage,
     bool? showEditMessage,
@@ -465,6 +472,7 @@ class StreamMessageWidget extends StatefulWidget {
       widthFactor: widthFactor ?? this.widthFactor,
       showUserAvatar: showUserAvatar ?? this.showUserAvatar,
       showSendingIndicator: showSendingIndicator ?? this.showSendingIndicator,
+      showEditedLabel: showEditedLabel ?? this.showEditedLabel,
       showReactions: showReactions ?? this.showReactions,
       showThreadReplyIndicator:
           showThreadReplyIndicator ?? this.showThreadReplyIndicator,
@@ -525,6 +533,10 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
 
   bool get showTimeStamp => widget.showTimestamp;
 
+  bool get showEditedLabel => widget.showEditedLabel;
+
+  bool get isTextEdited => widget.message.messageTextUpdatedAt != null;
+
   bool get showInChannel => widget.showInChannelIndicator;
 
   /// {@template hasQuotedMessage}
@@ -582,7 +594,8 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
       showUsername ||
       showTimeStamp ||
       showInChannel ||
-      showSendingIndicator;
+      showSendingIndicator ||
+      isTextEdited;
 
   /// {@template isPinned}
   /// Whether [StreamMessageWidget.message] is pinned or not.
@@ -695,6 +708,7 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
                       streamChatTheme: _streamChatTheme,
                       showUsername: showUsername,
                       showTimeStamp: showTimeStamp,
+                      showEditedLabel: showEditedLabel,
                       showThreadReplyIndicator: showThreadReplyIndicator,
                       showSendingIndicator: showSendingIndicator,
                       showInChannel: showInChannel,

packages/stream_chat_flutter/lib/src/message_widget/message_widget.dart

@@ -61,6 +61,7 @@ class MessageWidgetContent extends StatelessWidget {
     required this.showThreadReplyIndicator,
     required this.showTimeStamp,
     required this.showUsername,
+    required this.showEditedLabel,
     required this.messageWidget,
     this.onUserAvatarTap,
     this.borderRadiusGeometry,
@@ -210,6 +211,9 @@ class MessageWidgetContent extends StatelessWidget {
   /// {@macro showUsername}
   final bool showUsername;
 
+  /// {@macro showEdited}
+  final bool showEditedLabel;
+
   /// {@macro messageWidget}
   final StreamMessageWidget messageWidget;
 
@@ -437,6 +441,7 @@ class MessageWidgetContent extends StatelessWidget {
       showThreadReplyIndicator: showThreadReplyIndicator,
       showTimeStamp: showTimeStamp,
       showUsername: showUsername,
+      showEditedLabel: showEditedLabel,
       streamChatTheme: streamChatTheme,
       streamChat: streamChat,
       hasNonUrlAttachments: hasNonUrlAttachments,

packages/stream_chat_flutter/lib/src/message_widget/message_widget_content.dart

@@ -45,6 +45,7 @@ void main() {
                 showUsername: false,
                 showInChannel: true,
                 showTimeStamp: false,
+                showEditedLabel: false,
                 reverse: false,
                 showSendingIndicator: false,
                 hasUrlAttachments: false,

packages/stream_chat_flutter/test/src/message_list_view/bottom_row_test.dart

@@ -108,6 +108,9 @@ class NnStreamChatLocalizations extends GlobalStreamChatLocalizations {
   @override
   String get messageDeletedLabel => 'Message deleted';
 
+  @override
+  String get editedMessageLabel => 'Edited';
+
   @override
   String get messageReactionsLabel => 'Message Reactions';