feat(ui): add error badge for failed and bounced messages (#2597)

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

Author: xsahil03x

melos.yaml

@@ -95,7 +95,7 @@ command:
       stream_core_flutter:
         git:
           url: https://github.com/GetStream/stream-core-flutter.git
-          ref: 4b976d340f7ce085c4b41b7322f82555758ce893
+          ref: c0c5986c2388d7064b81e207ad82ddadb9021032
           path: packages/stream_core_flutter
       synchronized: ^3.1.0+1
       thumblr: ^0.0.4

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

@@ -27,7 +27,7 @@ class StreamMessageDialog extends StatelessWidget {
     this.useSafeArea = true,
     this.insetAnimationDuration = const Duration(milliseconds: 100),
     this.insetAnimationCurve = Curves.decelerate,
-    this.insetPadding = const EdgeInsets.all(8),
+    this.insetPadding = const EdgeInsets.all(16),
     this.alignment = Alignment.center,
   });
 

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

@@ -34,6 +34,7 @@ class StreamMessageContent extends StatefulWidget {
     super.key,
     required this.message,
     this.annotation,
+    this.errorBadge,
     this.metadata,
     this.replies,
     this.attachmentBuilders,
@@ -56,6 +57,12 @@ class StreamMessageContent extends StatefulWidget {
   /// or show-in-channel annotations.
   final Widget? annotation;
 
+  /// Optional error badge widget overlaid on the message bubble.
+  ///
+  /// When non-null, the badge is positioned at the top-end corner of the
+  /// bubble using a [Stack] with [PositionedDirectional].
+  final Widget? errorBadge;
+
   /// Optional metadata widget displayed below the message content column.
   ///
   /// Typically a [StreamMessageMetadata] containing the author name, timestamp,
@@ -208,7 +215,19 @@ class _StreamMessageContentState extends State<StreamMessageContent> {
                   ),
                 );
 
-                return core.StreamMessageBubble(child: bubbleContent);
+                final bubble = core.StreamMessageBubble(child: bubbleContent);
+
+                if (widget.errorBadge case final errorBadge?) {
+                  return Stack(
+                    clipBehavior: .none,
+                    children: [
+                      bubble,
+                      PositionedDirectional(top: 8, end: -12, child: errorBadge),
+                    ],
+                  );
+                }
+
+                return bubble;
               },
             ),
           ),

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

@@ -443,6 +443,7 @@ class DefaultStreamMessage extends StatelessWidget {
       context,
       isPinned: message.pinned,
       isEdited: message.messageTextUpdatedAt != null,
+      isBouncedWithError: message.isBouncedWithError,
       state: message.state,
     );
 
@@ -453,6 +454,7 @@ class DefaultStreamMessage extends StatelessWidget {
     final effectiveBackgroundColor = props.backgroundColor ?? theme.backgroundColor ?? defaults.backgroundColor;
     final effectiveAvatarVisibility = resolve((theme) => theme?.avatarVisibility);
     final effectiveAnnotationVisibility = resolve((theme) => theme?.annotationVisibility);
+    final effectiveErrorBadgeVisibility = resolve((theme) => theme?.errorBadgeVisibility);
     final effectiveMetadataVisibility = resolve((theme) => theme?.metadataVisibility);
     final effectiveRepliesVisibility = resolve((theme) => theme?.repliesVisibility);
 
@@ -468,16 +470,13 @@ class DefaultStreamMessage extends StatelessWidget {
       );
     }
 
-    final listKind = StreamMessageLayout.listKindOf(context);
-    final onViewTap = switch ((listKind, props.onViewInChannelTap)) {
-      (.thread, final onTap?) => () => onTap(message),
-      _ => () => _onViewThread(context, message),
-    };
-
     final annotationWidget = effectiveAnnotationVisibility.apply(
       StreamMessageAnnotations(
         message: message,
-        onViewChannelTap: onViewTap,
+        onViewChannelTap: switch (props.onViewInChannelTap) {
+          final onTap? => () => onTap(message),
+          _ => () => _onViewThread(context, message),
+        },
       ),
     );
 
@@ -500,9 +499,14 @@ class DefaultStreamMessage extends StatelessWidget {
       );
     }
 
+    final errorBadgeWidget = effectiveErrorBadgeVisibility.apply(
+      core.StreamErrorBadge(size: core.StreamErrorBadgeSize.sm),
+    );
+
     final contentWidget = StreamMessageContent(
       message: message,
       annotation: annotationWidget,
+      errorBadge: errorBadgeWidget,
       metadata: metadataWidget,
       replies: repliesWidget,
       attachmentBuilders: props.attachmentBuilders,
@@ -1045,11 +1049,13 @@ class _StreamMessageWidgetDefaults extends core.StreamMessageItemThemeData {
     this._context, {
     this.isPinned = false,
     this.isEdited = false,
+    this.isBouncedWithError = false,
     required MessageState state,
   }) : _messageState = state;
 
   final bool isPinned;
   final bool isEdited;
+  final bool isBouncedWithError;
 
   final BuildContext _context;
   final MessageState _messageState;
@@ -1084,6 +1090,11 @@ class _StreamMessageWidgetDefaults extends core.StreamMessageItemThemeData {
   @override
   core.StreamMessageLayoutVisibility get annotationVisibility => .all(.visible);
 
+  @override
+  core.StreamMessageLayoutVisibility get errorBadgeVisibility => .all(
+    _messageState.isFailed || isBouncedWithError ? .visible : .gone,
+  );
+
   @override
   core.StreamMessageLayoutVisibility get metadataVisibility {
     if (isEdited) return .all(.visible);

packages/stream_chat_flutter/pubspec.yaml

@@ -62,7 +62,7 @@ dependencies:
   stream_core_flutter:
     git:
       url: https://github.com/GetStream/stream-core-flutter.git
-      ref: 4b976d340f7ce085c4b41b7322f82555758ce893
+      ref: c0c5986c2388d7064b81e207ad82ddadb9021032
       path: packages/stream_core_flutter
   svg_icon_widget: ^0.0.1
   synchronized: ^3.1.0+1