Merge pull request #1611 from GetStream/feat/quoted-message-builder

packages/stream_chat_flutter/CHANGELOG.md

@@ -35,6 +35,22 @@
   )
   ```
 
+- Added support for `StreamMessageWidget.quotedMessageBuilder` and `StreamMessageInput.quotedMessageBuilder` to override
+  the default quoted message widget. [#1547](https://github.com/GetStream/stream-chat-flutter/issues/1547)
+
+  ```dart
+  StreamMessageWidget(
+    ...,
+    quotedMessageBuilder: (context, message) {
+      return Container(
+        color: Colors.red,
+        child: Text('Quoted Message'),
+      );
+    },
+  )
+  ```
+
+
 ## 6.3.0
 
 🐞 Fixed

packages/stream_chat_flutter/lib/src/message_input/quoted_message_widget.dart

@@ -20,7 +20,6 @@ class StreamQuotedMessageWidget extends StatelessWidget {
     this.textLimit = 170,
     this.attachmentThumbnailBuilders,
     this.padding = const EdgeInsets.all(8),
-    this.onTap,
     this.onQuotedMessageClear,
   });
 
@@ -46,9 +45,6 @@ class StreamQuotedMessageWidget extends StatelessWidget {
   /// Padding around the widget
   final EdgeInsetsGeometry padding;
 
-  /// Callback for tap on widget
-  final GestureTapCallback? onTap;
-
   /// Callback for clearing quoted messages.
   final VoidCallback? onQuotedMessageClear;
 
@@ -77,19 +73,12 @@ class StreamQuotedMessageWidget extends StatelessWidget {
           showOnlineStatus: false,
         ),
     ];
-    return MouseRegion(
+    return Padding(
-      cursor: SystemMouseCursors.click,
+      padding: padding,
-      child: GestureDetector(
+      child: Row(
-        behavior: HitTestBehavior.opaque,
+        crossAxisAlignment: CrossAxisAlignment.end,
-        onTap: onTap,
+        mainAxisSize: MainAxisSize.min,
-        child: Padding(
+        children: reverse ? children.reversed.toList() : children,
-          padding: padding,
-          child: Row(
-            crossAxisAlignment: CrossAxisAlignment.end,
-            mainAxisSize: MainAxisSize.min,
-            children: reverse ? children.reversed.toList() : children,
-          ),
-        ),
       ),
     );
   }
@@ -258,23 +247,26 @@ class _ParseAttachments extends StatelessWidget {
         child = attachmentBuilder(context, attachment);
       }
     }
-    child = AbsorbPointer(child: child);
+
+    final isImageFile = attachment.title?.mimeType?.type == 'image';
+    final isVideoFile = attachment.title?.mimeType?.type == 'video';
+
     return Material(
       clipBehavior: Clip.hardEdge,
       type: MaterialType.transparency,
-      shape: attachment.type == 'file'
+      shape: attachment.type == 'file' && (!isImageFile && !isVideoFile)
           ? null
           : RoundedRectangleBorder(
               side: const BorderSide(width: 0, color: Colors.transparent),
               borderRadius: BorderRadius.circular(8),
             ),
-      child: child,
+      child: AbsorbPointer(child: child),
     );
   }
 
   Map<String, QuotedMessageAttachmentThumbnailBuilder>
       get _defaultAttachmentBuilder {
-    return {
+    final builders = <String, QuotedMessageAttachmentThumbnailBuilder>{
       'image': (_, attachment) {
         return StreamImageAttachment(
           attachment: attachment,
@@ -315,16 +307,33 @@ class _ParseAttachments extends StatelessWidget {
           fit: BoxFit.cover,
         );
       },
-      'file': (_, attachment) {
-        return SizedBox(
-          height: 32,
-          width: 32,
-          child: getFileTypeImage(
-            attachment.extraData['mime_type'] as String?,
-          ),
-        );
-      },
     };
+
+    builders['file'] = (_, attachment) {
+      return SizedBox(
+        height: 32,
+        width: 32,
+        child: Builder(
+          builder: (context) {
+            final isImageFile = attachment.title?.mimeType?.type == 'image';
+            if (isImageFile) {
+              return builders['image']!(context, attachment);
+            }
+
+            final isVideoFile = attachment.title?.mimeType?.type == 'video';
+            if (isVideoFile) {
+              return builders['video']!(context, attachment);
+            }
+
+            return getFileTypeImage(
+              attachment.extraData['mime_type'] as String?,
+            );
+          },
+        ),
+      );
+    };
+
+    return builders;
   }
 }
 

packages/stream_chat_flutter/lib/src/message_input/stream_message_input.dart

@@ -129,6 +129,7 @@ class StreamMessageInput extends StatefulWidget {
     this.customAutocompleteTriggers = const [],
     this.mentionAllAppUsers = false,
     this.sendButtonBuilder,
+    this.quotedMessageBuilder,
     this.shouldKeepFocusAfterMessage,
     this.validator = _defaultValidator,
     this.restorationId,
@@ -265,6 +266,9 @@ class StreamMessageInput extends StatefulWidget {
   /// Builder for creating send button
   final MessageRelatedBuilder? sendButtonBuilder;
 
+  /// Builder for building quoted message
+  final Widget Function(BuildContext, Message)? quotedMessageBuilder;
+
   /// Defines if the [StreamMessageInput] loses focuses after a message is sent.
   /// The default behaviour keeps focus until a command is enabled.
   final bool? shouldKeepFocusAfterMessage;
@@ -1126,14 +1130,20 @@ class StreamMessageInputState extends State<StreamMessageInput>
     if (!_hasQuotedMessage) return const Offstage();
     final containsUrl = _effectiveController.message.quotedMessage!.attachments
         .any((element) => element.titleLink != null);
-    return StreamQuotedMessageWidget(
+
-      reverse: true,
+    return widget.quotedMessageBuilder?.call(
-      showBorder: !containsUrl,
+          context,
-      message: _effectiveController.message.quotedMessage!,
+          _effectiveController.message.quotedMessage!,
-      messageTheme: _streamChatTheme.otherMessageTheme,
+        ) ??
-      padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
+        StreamQuotedMessageWidget(
-      onQuotedMessageClear: widget.onQuotedMessageCleared,
+          reverse: true,
-    );
+          showBorder: !containsUrl,
+          message: _effectiveController.message.quotedMessage!,
+          messageTheme: _streamChatTheme.otherMessageTheme,
+          padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
+          onQuotedMessageClear: widget.onQuotedMessageCleared,
+          attachmentThumbnailBuilders: widget.attachmentThumbnailBuilders,
+        );
   }
 
   Widget _buildAttachments() {

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

@@ -29,6 +29,7 @@ class MessageCard extends StatefulWidget {
     this.borderSide,
     this.borderRadiusGeometry,
     this.textBuilder,
+    this.quotedMessageBuilder,
     this.onLinkTap,
     this.onMentionTap,
     this.onQuotedMessageTap,
@@ -82,6 +83,9 @@ class MessageCard extends StatefulWidget {
   /// {@macro textBuilder}
   final Widget Function(BuildContext, Message)? textBuilder;
 
+  /// {@macro quotedMessageBuilder}
+  final Widget Function(BuildContext, Message)? quotedMessageBuilder;
+
   /// {@macro onLinkTap}
   final void Function(String)? onLinkTap;
 
@@ -129,8 +133,12 @@ class _MessageCardState extends State<MessageCard> {
 
   @override
   Widget build(BuildContext context) {
+    final onQuotedMessageTap = widget.onQuotedMessageTap;
+    final quotedMessageBuilder = widget.quotedMessageBuilder;
+
     return Card(
       elevation: 0,
+      clipBehavior: Clip.hardEdge,
       margin: EdgeInsets.symmetric(
         horizontal: (widget.isFailedState ? 15.0 : 0.0) +
             (widget.showUserAvatar == DisplayWidget.gone ? 0 : 4.0),
@@ -150,15 +158,27 @@ class _MessageCardState extends State<MessageCard> {
           maxWidth: widthLimit ?? double.infinity,
         ),
         child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
           mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             if (widget.hasQuotedMessage)
-              QuotedMessage(
+              MouseRegion(
-                reverse: widget.reverse,
+                cursor: SystemMouseCursors.click,
-                message: widget.message,
+                child: InkWell(
-                hasNonUrlAttachments: widget.hasNonUrlAttachments,
+                  onTap: !widget.message.quotedMessage!.isDeleted &&
-                onQuotedMessageTap: widget.onQuotedMessageTap,
+                          onQuotedMessageTap != null
+                      ? () => onQuotedMessageTap(widget.message.quotedMessageId)
+                      : null,
+                  child: quotedMessageBuilder?.call(
+                        context,
+                        widget.message.quotedMessage!,
+                      ) ??
+                      QuotedMessage(
+                        reverse: widget.reverse,
+                        message: widget.message,
+                        hasNonUrlAttachments: widget.hasNonUrlAttachments,
+                      ),
+                ),
               ),
             if (widget.hasNonUrlAttachments)
               ParseAttachments(

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

@@ -79,6 +79,7 @@ class StreamMessageWidget extends StatefulWidget {
     this.onMessageActions,
     this.onShowMessage,
     this.userAvatarBuilder,
+    this.quotedMessageBuilder,
     this.editMessageInputBuilder,
     this.textBuilder,
     @Deprecated('''
@@ -354,6 +355,11 @@ class StreamMessageWidget extends StatefulWidget {
   /// {@endtemplate}
   final Widget Function(BuildContext, User)? userAvatarBuilder;
 
+  /// {@template quotedMessageBuilder}
+  /// Widget builder for building quoted message
+  /// {@endtemplate}
+  final Widget Function(BuildContext, Message)? quotedMessageBuilder;
+
   /// {@template message}
   /// The message to display.
   /// {@endtemplate}
@@ -577,6 +583,7 @@ class StreamMessageWidget extends StatefulWidget {
     Future<void> Function(Message)? onConfirmDeleteTap,
     Widget Function(BuildContext, Message)? editMessageInputBuilder,
     Widget Function(BuildContext, Message)? textBuilder,
+    Widget Function(BuildContext, Message)? quotedMessageBuilder,
     @Deprecated('''
     Use [bottomRowBuilderWithDefaultWidget] instead.
     Will be removed in the next major version.
@@ -670,6 +677,7 @@ class StreamMessageWidget extends StatefulWidget {
       editMessageInputBuilder:
           editMessageInputBuilder ?? this.editMessageInputBuilder,
       textBuilder: textBuilder ?? this.textBuilder,
+      quotedMessageBuilder: quotedMessageBuilder ?? this.quotedMessageBuilder,
       bottomRowBuilderWithDefaultWidget: _bottomRowBuilderWithDefaultWidget,
       onMessageActions: onMessageActions ?? this.onMessageActions,
       message: message ?? this.message,
@@ -965,6 +973,7 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
                       borderSide: widget.borderSide,
                       borderRadiusGeometry: widget.borderRadiusGeometry,
                       textBuilder: widget.textBuilder,
+                      quotedMessageBuilder: widget.quotedMessageBuilder,
                       onLinkTap: widget.onLinkTap,
                       onMentionTap: widget.onMentionTap,
                       onQuotedMessageTap: widget.onQuotedMessageTap,

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

@@ -63,6 +63,7 @@ class MessageWidgetContent extends StatelessWidget {
     this.onMentionTap,
     this.onLinkTap,
     this.textBuilder,
+    this.quotedMessageBuilder,
     @Deprecated('''
     Use [bottomRowBuilderWithDefaultWidget] instead.
     Will be removed in the next major version.
@@ -170,6 +171,9 @@ class MessageWidgetContent extends StatelessWidget {
   /// {@macro textBuilder}
   final Widget Function(BuildContext, Message)? textBuilder;
 
+  /// {@macro quotedMessageBuilder}
+  final Widget Function(BuildContext, Message)? quotedMessageBuilder;
+
   /// {@macro showReactionPickerIndicator}
   final bool showReactionPickerIndicator;
 
@@ -351,6 +355,8 @@ class MessageWidgetContent extends StatelessWidget {
                                         onMentionTap: onMentionTap,
                                         onLinkTap: onLinkTap,
                                         textBuilder: textBuilder,
+                                        quotedMessageBuilder:
+                                            quotedMessageBuilder,
                                         borderRadiusGeometry:
                                             borderRadiusGeometry,
                                         borderSide: borderSide,

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

@@ -7,63 +7,41 @@ import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 ///
 /// Used in [QuotedMessageCard]. Should not be used elsewhere.
 /// {@endtemplate}
-class QuotedMessage extends StatefulWidget {
+class QuotedMessage extends StatelessWidget {
   /// {@macro quotedMessage}
   const QuotedMessage({
     super.key,
     required this.message,
     required this.reverse,
     required this.hasNonUrlAttachments,
-    this.onQuotedMessageTap,
   });
 
   /// {@macro message}
   final Message message;
 
-  /// {@macro onQuotedMessageTap}
-  final OnQuotedMessageTap? onQuotedMessageTap;
-
   /// {@macro reverse}
   final bool reverse;
 
   /// {@macro hasNonUrlAttachments}
   final bool hasNonUrlAttachments;
 
-  @override
-  State<QuotedMessage> createState() => _QuotedMessageState();
-}
-
-class _QuotedMessageState extends State<QuotedMessage> {
-  late StreamChatState _streamChat;
-  late StreamChatThemeData _streamChatTheme;
-
-  @override
-  void didChangeDependencies() {
-    super.didChangeDependencies();
-    _streamChatTheme = StreamChatTheme.of(context);
-    _streamChat = StreamChat.of(context);
-  }
-
   @override
   Widget build(BuildContext context) {
-    final isMyMessage = widget.message.user?.id == _streamChat.currentUser?.id;
+    final streamChat = StreamChat.of(context);
-    final onTap = widget.message.quotedMessage?.isDeleted != true &&
+    final chatThemeData = StreamChatTheme.of(context);
-            widget.onQuotedMessageTap != null
+
-        ? () => widget.onQuotedMessageTap!(widget.message.quotedMessageId)
+    final isMyMessage = message.user?.id == streamChat.currentUser?.id;
-        : null;
-    final chatThemeData = _streamChatTheme;
     return StreamQuotedMessageWidget(
-      onTap: onTap,
+      message: message.quotedMessage!,
-      message: widget.message.quotedMessage!,
       messageTheme: isMyMessage
           ? chatThemeData.otherMessageTheme
           : chatThemeData.ownMessageTheme,
-      reverse: widget.reverse,
+      reverse: reverse,
       padding: EdgeInsets.only(
         right: 8,
         left: 8,
         top: 8,
-        bottom: widget.hasNonUrlAttachments ? 8 : 0,
+        bottom: hasNonUrlAttachments ? 8 : 0,
       ),
     );
   }