refactor(ui)!: re-wrote message actions and modals #2156

xsahil03x · 2025-03-21T13:01:01Z

Resolves: FLU-79

Description of the pull request

This pull request combines the message actions building logic for desktop and mobile platforms by introducing a class StreamMessageAction to provide a reusable builder for message actions. Also introduced StreamMessageModal for creating message related modals in the SDK.

Screenshots / Videos

Screen.Recording.2025-05-13.at.17.11.41.mov

codecov · 2025-05-13T15:47:32Z

Codecov Report

Attention: Patch coverage is 63.24405% with 247 lines in your changes missing coverage. Please review.

Project coverage is 63.21%. Comparing base (4ea131e) to head (64b28d9).

Files with missing lines	Patch %	Lines
...flutter/lib/src/message_widget/message_widget.dart	31.62%	147 Missing ⚠️
...ssage_modal/message_action_confirmation_modal.dart	0.00%	22 Missing ⚠️
...t_flutter/lib/src/message_modal/message_modal.dart	54.16%	22 Missing ⚠️
...rc/fullscreen_media/full_screen_media_desktop.dart	0.00%	18 Missing ⚠️
...ib/src/message_action/message_actions_builder.dart	84.69%	15 Missing ⚠️
...t_flutter/lib/src/misc/adaptive_dialog_action.dart	63.15%	7 Missing ⚠️
.../src/message_widget/reactions/reaction_picker.dart	71.42%	6 Missing ⚠️
packages/stream_chat/lib/src/client/channel.dart	0.00%	4 Missing ⚠️
...r/lib/src/message_list_view/message_list_view.dart	50.00%	2 Missing ⚠️
...tter/lib/src/message_widget/ephemeral_message.dart	0.00%	2 Missing ⚠️
... and 1 more

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2156      +/-   ##
==========================================
+ Coverage   63.16%   63.21%   +0.04%     
==========================================
  Files         402      397       -5     
  Lines       25229    25065     -164     
==========================================
- Hits        15937    15845      -92     
+ Misses       9292     9220      -72

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

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

Copilot

Pull Request Overview

This pull request refactors the message actions and modal system to consolidate duplicated UI components and improve type safety. Key changes include:

Removal of individual action button widgets in favor of a generic, reusable builder (StreamMessageActionsBuilder) and modal (StreamMessageModal).
Updates to the retry logic in channel operations and localization tweaks for consistency.
Various cleanups and removals of legacy context menu and action files to streamline the codebase.

Reviewed Changes

Copilot reviewed 101 out of 101 changed files in this pull request.

Show a summary per file

File	Description
packages/stream_chat_flutter/lib/src/message_actions_modal/*	Removed legacy message action button widgets in favor of a centralized approach.
packages/stream_chat_flutter/lib/src/message_action/message_actions_builder.dart	Introduced a new builder class to generate message actions based on state and channel capabilities.
packages/stream_chat_flutter/lib/src/message_action/*	Added new generic message action types and updated related widgets for improved type safety.
packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media_desktop.dart	Updated DownloadMenuItem integration and adjusted menu builder for desktop media.
packages/stream_chat_flutter/lib/src/localization/translations.dart	Revised error messages to remove line breaks and standardize wording.
packages/stream_chat_flutter/lib/src/channel/channel.dart	Updated retryMessage logic with enhanced assertions and clearer retry paths.
packages/stream_chat_flutter/CHANGELOG.md, dart_test.yaml	Updated changelog and test configuration to reflect the refactor.

renefloor · 2025-05-14T07:49:41Z

packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media_desktop.dart

+class DownloadMenuItem extends StatelessWidget {
+  /// {@macro streamDownloadMenuItem}
+  const DownloadMenuItem({
+    super.key,
+    required this.mediaAttachment,
+  });


This can be private, as it's not used anywhere else. Making it private we prevent it being exposed later by accident.

Suggested change

class DownloadMenuItem extends StatelessWidget {

/// {@macro streamDownloadMenuItem}

const DownloadMenuItem({

super.key,

required this.mediaAttachment,

});

class _DownloadMenuItem extends StatelessWidget {

/// {@macro streamDownloadMenuItem}

const _DownloadMenuItem({

required this.mediaAttachment,

});

renefloor · 2025-05-14T07:51:20Z

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

+// ignore_for_file: lines_longer_than_80_chars
+


Do you know if the analyzer of pub.dev likes this?

renefloor · 2025-05-14T07:55:41Z

packages/stream_chat_flutter/lib/src/message_action/message_action_type.dart

+}
+
+/// Action to show reaction selector for adding reactions to a message
+final class SelectReaction extends MessageAction {


Is there a reason to make all these classes final? Maybe devs see use in extending these and adding their own data? Don't think that would influence our code right?

renefloor · 2025-05-14T08:00:12Z

packages/stream_chat_flutter/lib/src/message_modal/message_action_confirmation_modal.dart

+    this.cancelActionTitle = const Text('Cancel'),
+    this.confirmActionTitle = const Text('Confirm'),


I would make these nullable, so the default implementations can use localizations.

renefloor · 2025-05-15T07:13:49Z

packages/stream_chat_flutter/lib/src/message_modal/message_modal.dart

+}
+
+/// {@template streamMessageModal}
+/// A customized modal widget for displaying message-related content.


Shouldn't this be "A customizable"?

renefloor · 2025-05-15T07:22:39Z

packages/stream_chat_flutter/lib/src/message_modal/message_modal.dart

+      Alignment.topCenter => CrossAxisAlignment.start,
+      Alignment.center => CrossAxisAlignment.center,
+      Alignment.bottomCenter => CrossAxisAlignment.center,


How does this work? I would expect them to be all center, or start, center, end.

renefloor · 2025-05-15T07:44:10Z

packages/stream_chat_flutter/lib/src/message_modal/message_reactions_modal.dart

+      alignment: switch (reverse) {
+        true => Alignment.centerRight,
+        false => Alignment.centerLeft,
+      },


I'm wondering if we already should think of RTL support on new code we right. I think it's good to already start thinking about that while building it, but might break some of the layout as we don't really support it anywhere yet.

renefloor · 2025-05-15T07:56:08Z

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

 /// It is not recommended to use this widget directly as it's one of the
 /// default widgets used by [StreamMessageWidget.onMessageActions].
 /// {@endtemplate}
-class StreamReactionPicker extends StatefulWidget {
+class StreamReactionPicker extends StatelessWidget {
  /// {@macro streamReactionPicker}
  const StreamReactionPicker({
    super.key,
    required this.message,
+    required this.reactionIcons,
+    this.onReactionPicked,
+    this.padding = const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+    this.scrollable = true,
+    this.borderRadius = const BorderRadius.all(Radius.circular(24)),
  });

-  /// Message to attach the reaction to
-  final Message message;
+  /// Creates a [StreamReactionPicker] using the default reaction icons
+  /// provided by the [StreamChatConfiguration].
+  ///
+  /// This is the recommended way to create a reaction picker
+  /// as it ensures that the icons are consistent with the rest of the app.


The docs are a bit conflicting now.

On top of the class you have:
"It is not recommended to use this widget directly"

But for the builder you have "This is the recommended way to create a reaction picker"

I would change the first doc to something like this:
"It is not recommended to use this widget directly, but to use the StreamReactionPicker.builder for platforms specific optimizations."

renefloor · 2025-05-15T08:01:35Z

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

+  void triggerAnimations() async {
+    for (final animation in iconAnimations) {
+      if (mounted) animation.start();
+      // Add a small delay between the start of each animation.
+      await Future.delayed(const Duration(milliseconds: 100));
+    }
+  }
+
+  void dismissAnimations() {
+    for (final animation in iconAnimations) {
+      animation.stop();
+    }
+  }
+
+  void disposeAnimations() {
+    for (final animation in iconAnimations) {
+      animation.dispose();
+    }
+  }


More of a general comment, but I would make methods like these private. No need to have them public, even though the State class is already private. It's good practice to only make things public that should be public, so we don't have people use them when we don't expect it.

renefloor · 2025-05-15T08:25:57Z

packages/stream_chat_flutter/test/src/message_modal/moderated_message_actions_modal_test.dart

+    id: 'test-message',
+    type: MessageType.error,
+    text: 'This is a test message',
+    createdAt: DateTime.now(),


I wonder if this variable createdAt can influence the output of the golden test. I would just make this a fixed DateTime value.

xsahil03x changed the title ~~refactor(ui):~~ refactor(ui): introduce 'StreamMessageActionsBuilder' Mar 21, 2025

Base automatically changed from refactor/channel-capabilities to master March 21, 2025 16:06

xsahil03x force-pushed the refactor/message-actions branch from 9f56bed to a42c738 Compare March 24, 2025 02:18

xsahil03x changed the title ~~refactor(ui): introduce 'StreamMessageActionsBuilder'~~ refactor(ui): re-wrote message actions and modals Mar 24, 2025

xsahil03x force-pushed the refactor/message-actions branch from 0cde3d3 to 4a8c9ef Compare March 25, 2025 11:59

github-actions bot added the Stale label Apr 14, 2025

xsahil03x force-pushed the refactor/message-actions branch from 47293cc to 625524b Compare April 28, 2025 10:33

xsahil03x and others added 10 commits May 9, 2025 23:43

refactor(ui): rewrote message actions and modals

9c91301

chore: Update Goldens

1a6485d

fix: align message reactions as per message

c64a6b8

chore: Update Goldens

782e9a7

feat: add support for retrying bounced messages

47eda25

chore: fix translations formatting

7951b34

feat: rebase with master and update moderation actions

0056602

chore: Update Goldens

dfc9a55

chore: remove redundant test

9f61c43

refactor: introduce MessageAction sealed class

38156e9

xsahil03x force-pushed the refactor/message-actions branch from 7ce3ee7 to 38156e9 Compare May 9, 2025 21:47

xsahil03x and others added 3 commits May 9, 2025 21:50

chore: Update Goldens

d17d28b

chore: trigger build

f802ea6

chore: support onCustomActionTap in copyWith

72653fd

xsahil03x changed the title ~~refactor(ui): re-wrote message actions and modals~~ refactor!(ui): re-wrote message actions and modals May 12, 2025

xsahil03x added 5 commits May 13, 2025 15:38

fix: handle empty fallback channel name

ec54501

chore: improve reaction picker

74a2740

chore: export new widgets, classes

fbf014f

feat: export StreamMessageActionsBuilder

cce96ae

chore: update CHANGELOG.md

0598a31

xsahil03x removed the Stale label May 13, 2025

xsahil03x marked this pull request as ready for review May 13, 2025 15:10

xsahil03x changed the title ~~refactor!(ui): re-wrote message actions and modals~~ refactor(ui)!: re-wrote message actions and modals May 13, 2025

xsahil03x and others added 3 commits May 13, 2025 17:15

chore: fix lints

6e99dcc

chore: Update Goldens

c2efae8

chore: update CHANGELOG.md

64b28d9

xsahil03x requested a review from Copilot May 13, 2025 15:57

Copilot AI reviewed May 13, 2025

View reviewed changes

GetStream deleted a comment from Copilot AI May 13, 2025

renefloor reviewed May 14, 2025

View reviewed changes

xsahil03x changed the base branch from master to v10.0.0 May 14, 2025 12:57

renefloor reviewed May 15, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(ui)!: re-wrote message actions and modals #2156

refactor(ui)!: re-wrote message actions and modals #2156

xsahil03x commented Mar 21, 2025 •

edited

Loading

codecov bot commented May 13, 2025

Copilot AI left a comment •

edited by xsahil03x

Loading

renefloor May 14, 2025

renefloor May 14, 2025

renefloor May 14, 2025

renefloor May 14, 2025

renefloor May 15, 2025

renefloor May 15, 2025

renefloor May 15, 2025

renefloor May 15, 2025

renefloor May 15, 2025

renefloor May 15, 2025

		this.cancelActionTitle = const Text('Cancel'),
		this.confirmActionTitle = const Text('Confirm'),

refactor(ui)!: re-wrote message actions and modals #2156

Are you sure you want to change the base?

refactor(ui)!: re-wrote message actions and modals #2156

Conversation

xsahil03x commented Mar 21, 2025 • edited Loading

Description of the pull request

Screenshots / Videos

codecov bot commented May 13, 2025

Codecov Report

Copilot AI left a comment • edited by xsahil03x Loading

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

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

xsahil03x commented Mar 21, 2025 •

edited

Loading

Copilot AI left a comment •

edited by xsahil03x

Loading