feat: Added reaction faces to bottom sheet

lib/src/message_actions_bottom_sheet.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/reaction_picker.dart';
 import 'package:stream_chat_flutter/src/stream_channel.dart';
+import 'package:stream_chat_flutter/src/user_reaction_display.dart';
 
 import '../stream_chat_flutter.dart';
 import 'message_input.dart';
@@ -43,6 +44,14 @@ class MessageActionsBottomSheet extends StatelessWidget {
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: <Widget>[
+          if (showReactions &&
+              (message.status == MessageSendingStatus.SENT ||
+                  message.status == null) &&
+              message.latestReactions.isNotEmpty)
+            UserReactionDisplay(
+              reactionToEmoji: reactionToEmoji,
+              message: message,
+            ),
           if (showReactions &&
               (message.status == MessageSendingStatus.SENT ||
                   message.status == null))

lib/src/user_reaction_display.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/src/user_avatar.dart';
+
+class UserReactionDisplay extends StatelessWidget {
+  const UserReactionDisplay({
+    Key key,
+    @required this.reactionToEmoji,
+    @required this.message,
+    this.size = 30,
+  }) : super(key: key);
+
+  final Map<String, String> reactionToEmoji;
+  final Message message;
+  final double size;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.black87,
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.center,
+        mainAxisSize: MainAxisSize.min,
+        children: reactionToEmoji.keys.map((reactionType) {
+          var firstUserReaction = message.latestReactions.firstWhere(
+              (element) => element.type == reactionType, orElse: () {
+            return null;
+          });
+
+          if (firstUserReaction == null) {
+            return IconButton(
+              iconSize: size,
+              icon: Container(),
+              onPressed: null,
+            );
+          }
+
+          return IconButton(
+            iconSize: size,
+            icon: UserAvatar(
+              user: firstUserReaction.user,
+              constraints: BoxConstraints(
+                maxHeight: size - 5,
+                maxWidth: size - 5,
+              ),
+              onTap: (user) {},
+            ),
+            onPressed: () {},
+          );
+        }).toList(),
+      ),
+    );
+  }
+}