refactor!(ui): add support for customising reaction picker (#2248)

Co-authored-by: xsahil03x <25670178+xsahil03x@users.noreply.github.com>

Author: xsahil03x

packages/stream_chat_flutter/CHANGELOG.md

@@ -43,6 +43,12 @@ For more details, please refer to the [migration guide](Unpublished).
 - Updated `share_plus` dependency to `^11.0.0`.
 - Updated `desktop_drop` dependency to `">=0.5.0 <0.7.0"`.
 
+✅ Added
+
+- Added `desktopOrWeb` parameter to `PlatformWidgetBuilder` to allow specifying a single builder for both desktop and web platforms.
+- Added `reactionPickerBuilder` to `StreamMessageActionsModal`, `StreamMessageReactionsModal`, and `StreamMessageWidget` to enable custom reaction picker widgets.
+- Added `StreamReactionIcon.defaultReactions` providing a predefined list of common reaction icons.
+
 ## 9.9.0
 
 ✅ Added

packages/stream_chat_flutter/lib/platform_widget_builder/src/platform_widget_builder.dart

@@ -25,6 +25,7 @@ class PlatformWidgetBuilder extends StatelessWidget {
     this.mobile,
     this.desktop,
     this.web,
+    this.desktopOrWeb,
   });
 
   /// The child widget.
@@ -39,12 +40,21 @@ class PlatformWidgetBuilder extends StatelessWidget {
   /// The widget to build for web platforms.
   final PlatformTargetBuilder? web;
 
+  /// The widget to build for desktop or web platforms.
+  ///
+  /// Note: The widget will prefer the [desktop] or [web] widget if a
+  /// combination of desktop/web and desktopOrWeb is provided.
+  final PlatformTargetBuilder? desktopOrWeb;
+
   @override
   Widget build(BuildContext context) {
+    final webWidget = web ?? desktopOrWeb;
+    final desktopWidget = desktop ?? desktopOrWeb;
+
     return PlatformWidget(
-      desktop: (context) => desktop?.call(context, child),
+      desktop: (context) => desktopWidget?.call(context, child),
       mobile: (context) => mobile?.call(context, child),
-      web: (context) => web?.call(context, child),
+      web: (context) => webWidget?.call(context, child),
     );
   }
 }

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

@@ -72,7 +72,10 @@ final class MarkUnread extends MessageAction {
 /// Action to mute a user to prevent notifications from their messages
 final class MuteUser extends MessageAction {
   /// Create a new mute user action
-  const MuteUser({required super.message, required this.user});
+  const MuteUser({
+    required super.message,
+    required this.user,
+  });
 
   /// The user to be muted.
   final User user;
@@ -81,7 +84,10 @@ final class MuteUser extends MessageAction {
 /// Action to unmute a user to receive notifications from their messages
 final class UnmuteUser extends MessageAction {
   /// Create a new unmute user action
-  const UnmuteUser({required super.message, required this.user});
+  const UnmuteUser({
+    required super.message,
+    required this.user,
+  });
 
   /// The user to be unmuted.
   final User user;

packages/stream_chat_flutter/lib/src/message_list_view/message_list_view.dart

@@ -1474,31 +1474,41 @@ class _StreamMessageListViewState extends State<StreamMessageListView> {
   }
 
   void _getOnThreadTap() {
-    if (widget.onThreadTap != null) {
-      _onThreadTap = (Message message) {
-        final threadBuilder = widget.threadBuilder;
-        widget.onThreadTap!(
-          message,
-          threadBuilder != null ? threadBuilder(context, message) : null,
-        );
-      };
-    } else if (widget.threadBuilder != null) {
-      _onThreadTap = (Message message) {
-        Navigator.of(context).push(
-          MaterialPageRoute(
-            builder: (_) => BetterStreamBuilder<Message>(
-              stream: streamChannel!.channel.state!.messagesStream.map(
-                (messages) => messages.firstWhere((m) => m.id == message.id),
-              ),
-              initialData: message,
-              builder: (_, data) => StreamChannel(
-                channel: streamChannel!.channel,
-                child: widget.threadBuilder!(context, data),
+    _onThreadTap = switch ((widget.onThreadTap, widget.threadBuilder)) {
+      // Case 1: widget.onThreadTap is provided.
+      // The created callback will use widget.onThreadTap, passing the result
+      // of widget.threadBuilder (if provided) as the second argument.
+      (final onThreadTap?, final threadBuilder) => (Message message) {
+          onThreadTap(
+            message,
+            threadBuilder?.call(context, message),
+          );
+        },
+      // Case 2: widget.onThreadTap is null, but widget.threadBuilder is provided.
+      // The created callback will perform the default navigation action,
+      // using widget.threadBuilder to build the thread page.
+      (null, final threadBuilder?) => (Message message) {
+          final threadPage = StreamChatConfiguration(
+            // This is needed to provide the nearest reaction icons to the
+            // StreamMessageReactionsModal.
+            data: StreamChatConfiguration.of(context),
+            child: StreamChannel(
+              channel: streamChannel!.channel,
+              child: BetterStreamBuilder<Message>(
+                initialData: message,
+                stream: streamChannel!.channel.state?.messagesStream.map(
+                  (it) => it.firstWhere((m) => m.id == message.id),
+                ),
+                builder: (_, data) => threadBuilder(context, data),
               ),
             ),
-          ),
-        );
-      };
-    }
+          );
+
+          Navigator.of(context).push(
+            MaterialPageRoute(builder: (_) => threadPage),
+          );
+        },
+      _ => null,
+    };
   }
 }

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

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:stream_chat_flutter/src/message_widget/reactions/reactions_align.dart';
+import 'package:stream_chat_flutter/src/reactions/reactions_align.dart';
 
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
@@ -21,6 +21,7 @@ class StreamMessageActionsModal extends StatelessWidget {
     required this.messageWidget,
     this.reverse = false,
     this.showReactionPicker = false,
+    this.reactionPickerBuilder = StreamReactionPicker.builder,
     this.onActionTap,
   });
 
@@ -58,6 +59,9 @@ class StreamMessageActionsModal extends StatelessWidget {
   /// Defaults to `false`.
   final bool showReactionPicker;
 
+  /// {@macro reactionPickerBuilder}
+  final ReactionPickerBuilder reactionPickerBuilder;
+
   /// Callback triggered when a message action is tapped.
   ///
   /// Provides the tapped [MessageAction] object to the callback.
@@ -91,16 +95,9 @@ class StreamMessageActionsModal extends StatelessWidget {
                 },
             };
 
-            final config = StreamChatConfiguration.of(context);
-            final reactionIcons = config.reactionIcons;
-
             return Align(
               alignment: alignment,
-              child: StreamReactionPicker(
-                message: message,
-                reactionIcons: reactionIcons,
-                onReactionPicked: onReactionPicked,
-              ),
+              child: reactionPickerBuilder(context, message, onReactionPicked),
             );
           },
         ),

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

@@ -141,7 +141,7 @@ class StreamMessageModal extends StatelessWidget {
             crossAxisAlignment: alignment.toColumnCrossAxisAlignment(),
             children: [
               if (headerBuilder case final builder?) builder(context),
-              contentBuilder(context),
+              Flexible(child: contentBuilder(context)),
             ],
           ),
         ),

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

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:stream_chat_flutter/src/message_widget/reactions/reactions_align.dart';
-import 'package:stream_chat_flutter/src/message_widget/reactions/reactions_card.dart';
 import 'package:stream_chat_flutter/src/misc/empty_widget.dart';
+import 'package:stream_chat_flutter/src/reactions/reactions_align.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 /// {@template streamMessageReactionsModal}
@@ -24,6 +23,7 @@ class StreamMessageReactionsModal extends StatelessWidget {
     required this.messageWidget,
     this.reverse = false,
     this.showReactionPicker = true,
+    this.reactionPickerBuilder = StreamReactionPicker.builder,
     this.onReactionPicked,
     this.onUserAvatarTap,
   });
@@ -49,6 +49,9 @@ class StreamMessageReactionsModal extends StatelessWidget {
   /// When `false`, the reaction picker is hidden.
   final bool showReactionPicker;
 
+  /// {@macro reactionPickerBuilder}
+  final ReactionPickerBuilder reactionPickerBuilder;
+
   /// Callback triggered when a user adds or toggles a reaction.
   ///
   /// Provides the selected [Reaction] object to the callback.
@@ -87,16 +90,9 @@ class StreamMessageReactionsModal extends StatelessWidget {
                 },
             };
 
-            final config = StreamChatConfiguration.of(context);
-            final reactionIcons = config.reactionIcons;
-
             return Align(
               alignment: alignment,
-              child: StreamReactionPicker(
-                message: message,
-                reactionIcons: reactionIcons,
-                onReactionPicked: onReactionPicked,
-              ),
+              child: reactionPickerBuilder(context, message, onReactionPicked),
             );
           },
         ),
@@ -121,19 +117,14 @@ class StreamMessageReactionsModal extends StatelessWidget {
         );
       },
       contentBuilder: (context) {
-        final currentUser = StreamChat.of(context).currentUser;
-        if (currentUser == null) return const Empty();
-
         final reactions = message.latestReactions;
         final hasReactions = reactions != null && reactions.isNotEmpty;
         if (!hasReactions) return const Empty();
 
         return FractionallySizedBox(
           widthFactor: 0.78,
-          child: ReactionsCard(
+          child: StreamUserReactions(
             message: message,
-            currentUser: currentUser,
-            messageTheme: messageTheme,
             onUserAvatarTap: onUserAvatarTap,
           ),
         );