Chat-NG: Message Actions #2529

gtalha07 · 2025-01-28T14:27:14Z

PR Description:

Adds the implementation of message actions UI .i.e. reply/edit/copy/delete. The PR grew to large change-set, particularly because of how these features are aligned within chat editor and have to make adjustments across entire module to have this in effect.
I have pointed out explanation, by detail where a reviewer should probably look at, explaining why certain things are intended the way it is needed to work.

PREVIEW:

(Desktop):

Screen.Recording.2025-02-04.at.22.57.00.mov

(Mobile):

Screen.Recording.2025-02-04.at.23.14.34.mov

…mentation

codecov · 2025-01-28T14:29:11Z

Codecov Report

Attention: Patch coverage is 48.40764% with 162 lines in your changes missing coverage. Please review.

Project coverage is 31.88%. Comparing base (3a5aa68) to head (804afd5).
Report is 17 commits behind head on main.

Files with missing lines	Patch %	Lines
...dgets/chat_editor/chat_editor_actions_preview.dart	56.52%	30 Missing ⚠️
...eatures/chat_ng/actions/redact_message_action.dart	0.00%	26 Missing ⚠️
...tures/chat_ng/widgets/chat_editor/chat_editor.dart	72.30%	18 Missing ⚠️
.../lib/features/chat_ng/dialogs/message_actions.dart	0.00%	16 Missing ⚠️
...atures/chat_ng/widgets/message_actions_widget.dart	75.92%	13 Missing ⚠️
...pp/lib/common/widgets/html_editor/html_editor.dart	20.00%	8 Missing ⚠️
.../features/chat_ng/actions/send_message_action.dart	0.00%	8 Missing ⚠️
.../features/chat_ng/actions/copy_message_action.dart	0.00%	7 Missing ⚠️
...eatures/chat_ng/actions/report_message_action.dart	0.00%	7 Missing ⚠️
...chat_ng/providers/chat_room_messages_provider.dart	33.33%	6 Missing ⚠️
... and 10 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2529      +/-   ##
==========================================
+ Coverage   31.33%   31.88%   +0.54%     
==========================================
  Files         716      724       +8     
  Lines       47369    47609     +240     
==========================================
+ Hits        14843    15180     +337     
+ Misses      32526    32429      -97

Flag	Coverage Δ
integration-test	`41.70% <ø> (-0.02%)`	⬇️
unittest	`23.39% <48.40%> (+0.86%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

gtalha07 · 2025-02-04T15:37:01Z

app/lib/common/providers/chat_providers.dart

@@ -34,3 +34,12 @@ final selectedChatIdProvider =
    NotifierProvider<SelectedChatIdNotifier, String?>(
  () => SelectedChatIdNotifier(),
 );
+
+final chatComposerDraftProvider = FutureProvider.autoDispose


this is just moved from chat module to much more common providers section because it makes sense but also to avoid import conflicts.

gtalha07 · 2025-02-04T15:38:26Z

app/lib/common/widgets/html_editor/html_editor.dart

@@ -48,6 +48,23 @@ extension ActerEditorStateHelpers on EditorState {
  String intoMarkdown({AppFlowyEditorMarkdownCodec? codec}) {
    return (codec ?? defaultMarkdownCodec).encode(document);
  }
+
+  /// clear the editor text with selection
+  void clear() async {


this is utility fn added as extension to textEditorState to clear document content. Because it's usage is widely needed so having it neatly separated is so nice!!

gtalha07 · 2025-02-04T15:39:39Z

app/lib/features/chat_ng/actions/copy_message_action.dart

+import 'package:flutter_easyloading/flutter_easyloading.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+
+Future<void> copyMessageAction(


All these message actions along with other are moved entirely to actions for legibility.

gtalha07 · 2025-02-04T15:40:53Z

app/lib/features/chat_ng/dialogs/message_actions.dart

+  required String roomId,
+}) async {
+  // trigger vibration haptic
+  await HapticFeedback.heavyImpact();


just a vibration haptic which is often commonly seen on opening message actions .i.e. WhatsApp, Signal etc.

gtalha07 · 2025-02-04T15:42:34Z

app/lib/features/chat_ng/dialogs/message_actions.dart

@@ -22,29 +28,36 @@ void reactionSelectionAction({
    barrierColor: Colors.transparent,
    transitionDuration: const Duration(milliseconds: 200),
    pageBuilder: (context, animation, secondaryAnimation) {
-      return Stack(
+      return Column(


Moved from Stack to Column layout. Because it allows better positioning for message actions + reaction selector and makes the selected message appeared centered regardless of its actual position in message list.

gtalha07 · 2025-02-04T15:43:30Z

app/lib/features/chat_ng/dialogs/message_actions.dart

-          Positioned(
-            left: position.dx,
-            top: position.dy - 60,
-            child: _AnimatedReactionSelector(


This is evolved to single re-usable AnimatedActionsContainer because we need similar effect for message actions :)

gtalha07 · 2025-02-04T15:44:26Z

app/lib/features/chat_ng/models/chat_editor_state.dart

+
+enum MessageAction { none, reply, edit }
+
+class ChatEditorState {


A new ChatEditorState as opposed to other chat version ChatInputState, but much more simplified and refined.

gtalha07 · 2025-02-04T15:45:09Z

app/lib/features/chat_ng/providers/chat_room_messages_provider.dart

@@ -24,28 +26,29 @@ typedef RoomMsgId = ({String roomId, String uniqueId});
 typedef MentionQuery = (String, MentionType);
 typedef ReactionItem = (String, List<ReactionRecord>);

-final chatStateProvider = StateNotifierProvider.family<ChatRoomMessagesNotifier,
-    ChatRoomState, String>(
+final chatMessagesStateProvider = StateNotifierProvider.family<


To avoid conflicting namings of similar providers from other version chat.

gtalha07 · 2025-02-04T15:47:59Z

app/lib/features/chat_ng/providers/notifiers/chat_editor_notifier.dart

+    show RoomEventItem;
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+class ChatEditorNotifier extends AutoDisposeNotifier<ChatEditorState> {


A new notifier for ChatEditorState as opposed to ChatInputState. But the benefit here is this new notifier uses Notifier (newer API) from StateNotifier migration.

gtalha07 · 2025-02-04T15:48:55Z

app/lib/features/chat_ng/widgets/chat_editor/chat_editor.dart

@@ -55,6 +60,14 @@ class _ChatEditorState extends ConsumerState<ChatEditor> {
    // have it call the first time to adjust height
    _updateHeight();
    WidgetsBinding.instance.addPostFrameCallback((_) => _loadDraft());
+
+    ref.listenManual(chatEditorStateProvider, (prev, next) async {
+      if (next.isEditing &&


we only need Edit case here to update EditorState.

gtalha07 · 2025-02-04T15:49:36Z

app/lib/features/chat_ng/widgets/chat_editor/chat_editor.dart

@@ -72,6 +85,26 @@ class _ChatEditorState extends ConsumerState<ChatEditor> {
    }
  }

+  void _handleEditing(RoomEventItem? item) {


This part handles editorState field update when action is Editing.

gtalha07 · 2025-02-04T15:50:48Z

app/lib/features/chat_ng/widgets/chat_editor/chat_editor.dart

+    if (chatEditorState.isReplying || chatEditorState.isEditing) {
+      final msgItem = chatEditorState.selectedMsgItem;
+      previewWidget = msgItem.map(
+        (item) => ChatEditorActionsPreview(


This is actual preview widget of reply/edit actions which appears on top of ChatEditor.

gtalha07 · 2025-02-04T15:51:27Z

app/lib/features/chat_ng/widgets/chat_editor/chat_editor.dart

+    final chatEditorState = ref.watch(chatEditorStateProvider);
+    final isPreviewOpen =
+        chatEditorState.isReplying || chatEditorState.isEditing;
+    final radiusVal = isPreviewOpen ? 2.0 : 15.0;


To keep UI not ugly when preview widget is opened!

gtalha07 · 2025-02-04T15:52:47Z

app/lib/features/chat_ng/widgets/message_actions_widget.dart

+import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+class MessageActionsWidget extends ConsumerWidget {


This widget is responsible for rendering message actions options .i.e. copy/delete/reply/edit etc.

gtalha07 · 2025-02-04T15:53:57Z

app/test/features/chat_ng/chat_editor_test.dart

+}
+
+void main() {
+  group('Chat editor reply/edit preview tests', () {


And finally some widgets tests to ensure that actions state logics are working as intended!

gtalha07 · 2025-02-04T15:55:05Z

app/test/features/chat_ng/chat_editor_test.dart

+      },
+    );
+
+    // testWidgets('closing edit preview resets chat editor state',


I'd probably need some help here. This test-case is fine logic wise but somehow tester can't find close icon of preview widget. Would like to have thoughtful solutions here :)

kumarpalsinh25

Look good code wise.

Few minor remarks.

Action Menu and Reaction positioning looks weird on Desktop:
Addition new line gets added when you do Edit Message.

Edit.Message.mov

app/lib/common/widgets/html_editor/html_editor.dart

kumarpalsinh25 · 2025-02-05T09:59:36Z

app/lib/common/widgets/html_editor/html_editor.dart

+      final transaction = this.transaction;
+      final selection = this.selection;
+      final node = transaction.document.root.children.last;
+      transaction.deleteNode(node);
+      transaction.insertNode([0], paragraphNode(text: ''));


Skipping review of this logic as I don't have much insight knowledge of AppFlowy Editor.

app/lib/features/chat_ng/actions/redact_message_action.dart

gtalha07 · 2025-02-05T11:42:56Z

Look good code wise.

Few minor remarks.

Action Menu and Reaction positioning looks weird on Desktop:

Addition new line gets added when you do Edit Message.

Edit.Message.mov

Coming to your questions:

This is the case for message bubbles which have short content and bubble doesn't occupy maximum allowed width. Which also complicates further because desktop size window is dynamic. So shrinking the window size would achieve the desired behavior but I'd not probably write that heinous calculation code (for now) because the importance here is that message actions should be visible within current frame.
I sense the source is probably within Appflowy itself where it adds <br> upon text insertion operation. Or maybe the Appflowy document encoder parsers applies this when converting to document. The reason is still unknown to me so I'd like to put ticket on this for further debugging and research as to why it happens.

kumarpalsinh25 · 2025-02-05T11:51:59Z

@gtalha07

This is the case for message bubbles which have short content and bubble doesn't occupy maximum allowed width. Which also complicates further because desktop size window is dynamic. So shrinking the window size would achieve the desired behavior but I'd not probably write that heinous calculation code (for now) because the importance here is that message actions should be visible within current frame.

It fine to not write complicated calculation but just love to see alignment fixes which make it better UI feel. (Like MenuAction and Reaction can be in Right side for isMe message and vice a versa)

gtalha07 · 2025-02-05T11:53:46Z

@gtalha07

This is the case for message bubbles which have short content and bubble doesn't occupy maximum allowed width. Which also complicates further because desktop size window is dynamic. So shrinking the window size would achieve the desired behavior but I'd not probably write that heinous calculation code (for now) because the importance here is that message actions should be visible within current frame.

It fine to not write complicated calculation but just love to see alignment fixes which make it better UI feel. (Like MenuAction and Reaction can be in Right side for isMe message and vice a versa)

Hmm, I guess that's a fine suggestion to try. Will check and update if it fixes :)

…ow error line

clean up reaction actions UI and transform into message actions imple…

181bf49

…mentation

gtalha07 and others added 8 commits January 29, 2025 20:10

implement reply/edit preview UI

7725ba0

more better logic for previewing replied to items and general cleanup

cad88fb

update send message action with new editor state provider

acb5b50

fix editing/reply view logic and add editor utility fn

d4d3c49

Merge branch 'acterglobal:main' into chat_ng-message-actions

a8d5df1

fix editor state on switching reply/edit view

b826309

implement copy message action

131932e

add widget tests

34bf589

gtalha07 commented Feb 4, 2025

View reviewed changes

gtalha07 added 2 commits February 4, 2025 22:56

fix editor focus when switching message actions and composer draft state

941e997

lint and minor code clean up

4ef159f

gtalha07 marked this pull request as ready for review February 4, 2025 18:18

gtalha07 requested a review from gnunicorn February 4, 2025 18:19

gtalha07 requested review from kumarpalsinh25 and anisha-e10 February 4, 2025 18:19

gtalha07 added 2 commits February 4, 2025 23:27

fix tests

a6a55c7

add changelogs

0295470

kumarpalsinh25 approved these changes Feb 5, 2025

View reviewed changes

Feedback Review (Kumar): fix message actions alignment and remove thr…

a6bd120

…ow error line

gtalha07 enabled auto-merge February 5, 2025 13:18

gtalha07 and others added 2 commits February 5, 2025 18:32

Merge branch 'acterglobal:main' into chat_ng-message-actions

c1f628f

fix tests

804afd5

gtalha07 merged commit 509e976 into acterglobal:main Feb 5, 2025
22 of 23 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chat-NG: Message Actions #2529

Chat-NG: Message Actions #2529

gtalha07 commented Jan 28, 2025 •

edited

Loading

codecov bot commented Jan 28, 2025 •

edited

Loading

gtalha07 Feb 4, 2025

gtalha07 Feb 4, 2025

gtalha07 Feb 4, 2025

gtalha07 Feb 4, 2025

gtalha07 Feb 4, 2025

gtalha07 Feb 4, 2025

gtalha07 Feb 4, 2025

gtalha07 Feb 4, 2025

gtalha07 Feb 4, 2025

gtalha07 Feb 4, 2025

gtalha07 Feb 4, 2025

gtalha07 Feb 4, 2025

gtalha07 Feb 4, 2025

gtalha07 Feb 4, 2025

gtalha07 Feb 4, 2025

gtalha07 Feb 4, 2025

kumarpalsinh25 left a comment •

edited

Loading

kumarpalsinh25 Feb 5, 2025

gtalha07 commented Feb 5, 2025

kumarpalsinh25 commented Feb 5, 2025

gtalha07 commented Feb 5, 2025


		enum MessageAction { none, reply, edit }

		class ChatEditorState {

Chat-NG: Message Actions #2529

Chat-NG: Message Actions #2529

Conversation

gtalha07 commented Jan 28, 2025 • edited Loading

PR Description:

PREVIEW:

(Desktop):

(Mobile):

codecov bot commented Jan 28, 2025 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kumarpalsinh25 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gtalha07 commented Feb 5, 2025

kumarpalsinh25 commented Feb 5, 2025

gtalha07 commented Feb 5, 2025

gtalha07 commented Jan 28, 2025 •

edited

Loading

codecov bot commented Jan 28, 2025 •

edited

Loading

kumarpalsinh25 left a comment •

edited

Loading