fix(ui): deprecate exposed showReactionPickerTail in MessageWidget

`showReactionPickerTail` property is bind with `showReactionPicker` as it is the only one needed to couple the reaction modal with the tail

Closes #1759

packages/stream_chat_flutter/CHANGELOG.md

@@ -1,3 +1,10 @@
+# Upcoming
+
+🐞 Fixed
+
+- [[#1759]](https://github.com/GetStream/stream-chat-flutter/issues/1759) Fixed
+  The Reaction Picker is not being removed when I set showReactionPicker to false.
+
 # 6.11.0
 
 🐞 Fixed

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

@@ -60,7 +60,9 @@ class StreamMessageWidget extends StatefulWidget {
     bool? showReactionPicker,
     @Deprecated('Use `showReactionPicker` instead')
     bool showReactionPickerIndicator = true,
-    @internal this.showReactionPickerTail = false,
+    @internal
+    @Deprecated('Use `showReactionPicker` instead')
+    this.showReactionPickerTail,
     this.showUserAvatar = DisplayWidget.show,
     this.showSendingIndicator = true,
     this.showThreadReplyIndicator = false,
@@ -483,7 +485,8 @@ class StreamMessageWidget extends StatefulWidget {
   /// Whether or not to show the reaction picker tail
   /// {@endtemplate}
   @internal
-  final bool showReactionPickerTail;
+  @Deprecated('Use `showReactionPicker` instead')
+  final bool? showReactionPickerTail;
 
   /// {@template onShowMessage}
   /// Callback when show message is tapped
@@ -743,8 +746,6 @@ class StreamMessageWidget extends StatefulWidget {
       showReactionPicker: showReactionPicker ??
           showReactionPickerIndicator ??
           this.showReactionPicker,
-      showReactionPickerTail:
-          showReactionPickerTail ?? this.showReactionPickerTail,
       onShowMessage: onShowMessage ?? this.onShowMessage,
       showUsername: showUsername ?? this.showUsername,
       showTimestamp: showTimestamp ?? this.showTimestamp,
@@ -1002,7 +1003,7 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
                       messageWidget: widget,
                       showBottomRow: showBottomRow,
                       showPinHighlight: widget.showPinHighlight,
-                      showReactionPickerTail: widget.showReactionPickerTail,
+                      showReactionPickerTail: widget.showReactionPicker,
                       showReactions: showReactions,
                       onReactionsTap: () {
                         widget.onReactionsTap != null
@@ -1217,7 +1218,8 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
             translateUserAvatar: false,
             showSendingIndicator: false,
             padding: EdgeInsets.zero,
-            // Show the tail if the reaction picker is visible.
+            // Show both the tail if the picker is shown.
+            showReactionPicker: widget.showReactionPicker,
             showReactionPickerTail: widget.showReactionPicker,
             showPinHighlight: false,
             showUserAvatar:
@@ -1258,6 +1260,7 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
         return StreamChannel(
           channel: channel,
           child: MessageActionsModal(
+            showReactionPicker: widget.showReactionPicker,
             messageWidget: widget.copyWith(
               key: const Key('MessageWidget'),
               message: widget.message.copyWith(
@@ -1271,9 +1274,6 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
               translateUserAvatar: false,
               showSendingIndicator: false,
               padding: EdgeInsets.zero,
-              // Show both the tail if the picker is shown.
-              showReactionPicker: widget.showReactionPicker,
-              showReactionPickerTail: widget.showReactionPicker,
               showPinHighlight: false,
               showUserAvatar: widget.message.user!.id ==
                       channel.client.state.currentUser!.id

packages/stream_chat_flutter/test/src/message_actions_modal/message_actions_modal_test.dart

@@ -64,6 +64,101 @@ void main() {
     },
   );
 
+  testWidgets(
+    'it should show the reaction picker',
+    (WidgetTester tester) async {
+      final client = MockClient();
+      final clientState = MockClientState();
+      final channel = MockChannel(
+        ownCapabilities: ['send-message', 'send-reaction'],
+      );
+
+      when(() => client.state).thenReturn(clientState);
+      when(() => clientState.currentUser).thenReturn(OwnUser(id: 'user-id'));
+
+      final themeData = ThemeData();
+      final streamTheme = StreamChatThemeData.fromTheme(themeData);
+      await tester.pumpWidget(
+        MaterialApp(
+          theme: themeData,
+          home: StreamChat(
+            streamChatThemeData: streamTheme,
+            client: client,
+            child: SizedBox(
+              child: StreamChannel(
+                channel: channel,
+                child: MessageActionsModal(
+                  message: Message(
+                    text: 'test',
+                    user: User(
+                      id: 'user-id',
+                    ),
+                    state: MessageState.sent,
+                  ),
+                  messageWidget: const Text(
+                    'test',
+                    key: Key('MessageWidget'),
+                  ),
+                  messageTheme: streamTheme.ownMessageTheme,
+                ),
+              ),
+            ),
+          ),
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(StreamReactionPicker), findsOneWidget);
+    },
+  );
+
+  testWidgets(
+    'it should not show the reaction picker',
+    (WidgetTester tester) async {
+      final client = MockClient();
+      final clientState = MockClientState();
+      final channel = MockChannel();
+
+      when(() => client.state).thenReturn(clientState);
+      when(() => clientState.currentUser).thenReturn(OwnUser(id: 'user-id'));
+
+      final themeData = ThemeData();
+      final streamTheme = StreamChatThemeData.fromTheme(themeData);
+      await tester.pumpWidget(
+        MaterialApp(
+          theme: themeData,
+          home: StreamChat(
+            streamChatThemeData: streamTheme,
+            client: client,
+            child: SizedBox(
+              child: StreamChannel(
+                channel: channel,
+                child: MessageActionsModal(
+                  showReactionPicker: false,
+                  message: Message(
+                    text: 'test',
+                    user: User(
+                      id: 'user-id',
+                    ),
+                    state: MessageState.sent,
+                  ),
+                  messageWidget: const Text(
+                    'test',
+                    key: Key('MessageWidget'),
+                  ),
+                  messageTheme: streamTheme.ownMessageTheme,
+                ),
+              ),
+            ),
+          ),
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(StreamReactionPicker), findsNothing);
+    },
+  );
+
   testWidgets(
     'it should show some actions',
     (WidgetTester tester) async {

packages/stream_chat_flutter/test/src/mocks.dart

@@ -14,6 +14,13 @@ class MockClient extends Mock implements StreamChatClient {
 class MockClientState extends Mock implements ClientState {}
 
 class MockChannel extends Mock implements Channel {
+  MockChannel({
+    this.ownCapabilities = const ['send-message'],
+  });
+
+  @override
+  final List<String> ownCapabilities;
+
   @override
   Future<bool> get initialized async => true;
 
@@ -22,9 +29,6 @@ class MockChannel extends Mock implements Channel {
   Future<void> keyStroke([String? parentId]) async {
     return;
   }
-
-  @override
-  List<String> get ownCapabilities => ['send-message'];
 }
 
 class MockChannelState extends Mock implements ChannelClientState {