Feature/532627 text reply

lib/src/controllers/chat/ds_reply.controller.dart

@@ -0,0 +1,15 @@
+import 'package:get/get.dart';
+
+import '../../models/ds_message_item.model.dart';
+
+class DSReplyController extends GetxController {
+  final List<DSMessageItemModel> messages = [];
+
+  void addMessages(List<DSMessageItemModel> newMessages) {
+    messages.addAll(newMessages);
+  }
+
+  DSMessageItemModel? getMessageById(String id) {
+    return messages.firstWhereOrNull((element) => element.id == id);
+  }
+}

lib/src/themes/colors/ds_colors.theme.dart

@@ -51,6 +51,8 @@ abstract class DSColors {
   static const Color surface1 = Color(0xFFF6F6F6);
   static const Color surface3 = Color(0xFFC7C7C7);
   static const Color contentDefault = Color(0xFF454545);
+  static const Color contentGhost = Color(0xFF949494);
+
 
   static const Color disabledText = Color(0xFF637798);
   static const Color disabledBg = Color(0xFFE8F2FF);

lib/src/widgets/chat/audio/ds_audio_message_bubble.widget.dart

@@ -15,13 +15,15 @@ class DSAudioMessageBubble extends StatelessWidget {
   final String? uniqueId;
   final String audioType;
   final bool shouldAuthenticate;
+  final String? replyId;
 
   DSAudioMessageBubble({
     super.key,
     required this.uri,
     required this.align,
     required this.audioType,
     this.uniqueId,
+    this.replyId,
     this.borderRadius = const [DSBorderRadius.all],
     this.shouldAuthenticate = false,
     final DSMessageBubbleStyle? style,
@@ -35,6 +37,7 @@ class DSAudioMessageBubble extends StatelessWidget {
     return DSMessageBubble(
       borderRadius: borderRadius,
       align: align,
+      replyId: replyId,
       style: style,
       padding: const EdgeInsets.only(
         left: 4.0,

lib/src/widgets/chat/ds_application_json_bubble.widget.dart

@@ -15,12 +15,14 @@ class DSApplicationJsonMessageBubble extends StatelessWidget {
     required this.borderRadius,
     required this.content,
     this.status,
+    this.replyId,
     DSMessageBubbleStyle? style,
   }) : style = style ?? DSMessageBubbleStyle();
 
   final DSAlign align;
   final List<DSBorderRadius> borderRadius;
   final Map<String, dynamic> content;
+  final String? replyId;
   final DSDeliveryReportStatus? status;
   final DSMessageBubbleStyle style;
 
@@ -31,6 +33,7 @@ class DSApplicationJsonMessageBubble extends StatelessWidget {
         opacity: status == DSDeliveryReportStatus.failed ? .3 : 1,
         child: DSUnsupportedContentMessageBubble(
           align: align,
+          replyId: replyId,
           borderRadius: borderRadius,
           style: style,
           overflow: TextOverflow.visible,
@@ -50,6 +53,7 @@ class DSApplicationJsonMessageBubble extends StatelessWidget {
       align: align,
       borderRadius: borderRadius,
       style: style,
+      replyId: replyId,
     );
   }
 }

lib/src/widgets/chat/ds_contact_message_bubble.widget.dart

@@ -6,6 +6,7 @@ class DSContactMessageBubble extends StatelessWidget {
   final String? phone;
   final String? email;
   final String? address;
+  final String? replyId;
   final DSAlign align;
   final List<DSBorderRadius> borderRadius;
   final DSMessageBubbleStyle style;
@@ -17,6 +18,7 @@ class DSContactMessageBubble extends StatelessWidget {
     required this.address,
     required this.email,
     required this.align,
+    this.replyId,
     this.borderRadius = const [DSBorderRadius.all],
     DSMessageBubbleStyle? style,
   }) : style = style ?? DSMessageBubbleStyle();
@@ -29,6 +31,7 @@ class DSContactMessageBubble extends StatelessWidget {
       padding: const EdgeInsets.all(16.0),
       shouldUseDefaultSize: true,
       style: style,
+      replyId: replyId,
       child: _buildContactCard(),
     );
   }

lib/src/widgets/chat/ds_file_message_bubble.widget.dart

@@ -22,6 +22,7 @@ class DSFileMessageBubble extends StatelessWidget {
   final List<DSBorderRadius> borderRadius;
   final DSMessageBubbleStyle style;
   final bool shouldAuthenticate;
+  final String? replyId;
 
   /// Creates a Design System's [DSMessageBubble] used on files other than image, audio, or video
   DSFileMessageBubble({
@@ -30,6 +31,7 @@ class DSFileMessageBubble extends StatelessWidget {
     required this.url,
     required this.size,
     required this.filename,
+    this.replyId,
     this.borderRadius = const [DSBorderRadius.all],
     this.shouldAuthenticate = false,
     DSMessageBubbleStyle? style,
@@ -46,6 +48,7 @@ class DSFileMessageBubble extends StatelessWidget {
       ),
       child: DSMessageBubble(
         borderRadius: borderRadius,
+        replyId: replyId,
         padding: EdgeInsets.zero,
         align: align,
         style: style,

lib/src/widgets/chat/ds_image_message_bubble.widget.dart

@@ -29,6 +29,7 @@ class DSImageMessageBubble extends StatefulWidget {
     this.showSelect = false,
     this.onSelected,
     this.onOpenLink,
+    this.replyId,
     this.shouldAuthenticate = false,
     this.mediaType,
     this.imageMaxHeight,
@@ -43,6 +44,7 @@ class DSImageMessageBubble extends StatefulWidget {
   final String? text;
   final String appBarText;
   final Uri? appBarPhotoUri;
+  final String? replyId;
   final DSMessageBubbleStyle style;
   final List<DSDocumentSelectOption> selectOptions;
   final bool showSelect;
@@ -84,6 +86,7 @@ class _DSImageMessageBubbleState extends State<DSImageMessageBubble>
       defaultMaxSize: 360.0,
       shouldUseDefaultSize: true,
       align: widget.align,
+      replyId:widget.replyId,
       borderRadius: widget.borderRadius,
       padding: EdgeInsets.zero,
       hasSpacer: widget.hasSpacer,

lib/src/widgets/chat/ds_location_message_bubble.widget.dart

@@ -16,6 +16,7 @@ class DSLocationMessageBubble extends StatelessWidget {
   final DSAlign align;
   final DSMessageBubbleStyle style;
   final String? title;
+  final String? replyId;
   final String latitude;
   final String longitude;
   final List<DSBorderRadius> borderRadius;
@@ -25,6 +26,7 @@ class DSLocationMessageBubble extends StatelessWidget {
     required this.align,
     required this.latitude,
     required this.longitude,
+    this.replyId,
     this.borderRadius = const [DSBorderRadius.all],
     DSMessageBubbleStyle? style,
     this.title,
@@ -56,6 +58,7 @@ class DSLocationMessageBubble extends StatelessWidget {
         defaultMaxSize: 240.0,
         defaultMinSize: 240.0,
         borderRadius: borderRadius,
+        replyId: replyId,
         padding: EdgeInsets.zero,
         align: align,
         style: style,

lib/src/widgets/chat/ds_message_bubble.widget.dart

@@ -1,3 +1,4 @@
+import 'package:blip_ds/src/widgets/chat/ds_reply_container.widget.dart';
 import 'package:flutter/material.dart';
 
 import '../../enums/ds_align.enum.dart';
@@ -10,6 +11,7 @@ import '../animations/ds_animated_size.widget.dart';
 class DSMessageBubble extends StatelessWidget {
   final DSAlign align;
   final Widget child;
+  final String? replyId;
   final List<DSBorderRadius> borderRadius;
   final EdgeInsets padding;
   final bool shouldUseDefaultSize;
@@ -22,6 +24,7 @@ class DSMessageBubble extends StatelessWidget {
     Key? key,
     required this.align,
     required this.child,
+    this.replyId,
     this.borderRadius = const [DSBorderRadius.all],
     this.padding = const EdgeInsets.symmetric(
       vertical: 8.0,
@@ -60,7 +63,19 @@ class DSMessageBubble extends StatelessWidget {
                 : null,
             padding: padding,
             color: style.bubbleBackgroundColor(align),
-            child: child,
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                if (replyId != null)
+                  DSReplyContainer(
+                    replyId: replyId!,
+                    style: style,
+                    align: align,
+                  ),
+                child,
+              ],
+            ),
           ),
         ),
       ),

lib/src/widgets/chat/ds_reply_container.widget.dart

@@ -0,0 +1,140 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+import '../../controllers/chat/ds_reply.controller.dart';
+import '../../enums/ds_align.enum.dart';
+import '../../models/ds_message_bubble_style.model.dart';
+import '../../themes/colors/ds_colors.theme.dart';
+import '../../themes/icons/ds_icons.dart';
+import '../../utils/ds_message_content_type.util.dart';
+import '../texts/ds_body_text.widget.dart';
+import '../texts/ds_caption_text.widget.dart';
+
+class DSReplyContainer extends StatelessWidget {
+  const DSReplyContainer({
+    super.key,
+    required this.replyId,
+    required this.style,
+    required this.align,
+  });
+
+  final DSAlign align;
+  final String replyId;
+  final DSMessageBubbleStyle style;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(
+        8.0,
+      ),
+      child: Column(
+        children: [
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              Icon(
+                DSIcons.undo_outline,
+                color: style.isLightBubbleBackground(align)
+                    ? DSColors.neutralDarkCity
+                    : DSColors.neutralLightSnow,
+              ),
+              const SizedBox(width: 8.0),
+              DSCaptionText(
+                'Reply',
+                fontStyle: FontStyle.italic,
+                color: style.isLightBubbleBackground(align)
+                    ? DSColors.neutralDarkCity
+                    : DSColors.neutralLightSnow,
+              ),
+            ],
+          ),
+          const SizedBox(height: 4.0),
+          DecoratedBox(
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(4.0),
+              border: Border.all(
+                color: style.isLightBubbleBackground(align)
+                    ? DSColors.contentGhost
+                    : DSColors.contentDisable,
+              ),
+              color: style.isLightBubbleBackground(align)
+                  ? DSColors.surface3
+                  : DSColors.contentDefault,
+            ),
+            child: IntrinsicHeight(
+              child: Row(
+                children: [
+                  Container(
+                    decoration: const ShapeDecoration(
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.only(
+                          topLeft: Radius.circular(8.0),
+                          bottomLeft: Radius.circular(8.0),
+                        ),
+                      ),
+                      color: DSColors.primary,
+                    ),
+                    width: 4.0,
+                  ),
+                  Flexible(
+                    child: Padding(
+                      padding: const EdgeInsets.only(
+                        top: 8.0,
+                        left: 8.0,
+                        bottom: 8.0,
+                      ),
+                      child: _replyWidget(replyId, style, align),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+Widget _replyWidget(
+  String id,
+  DSMessageBubbleStyle style,
+  DSAlign align,
+) {
+  final replyController = Get.find<DSReplyController>();
+  final message = replyController.getMessageById(id);
+
+  switch (message?.type) {
+    case DSMessageContentType.textPlain:
+      return DSBodyText(
+        message?.content is String ? message?.content : '**********',
+        color: _color(align, style),
+        overflow: TextOverflow.visible,
+      );
+    default:
+      return Row(
+        mainAxisSize: MainAxisSize.max,
+        children: [
+          Icon(
+            DSIcons.warning_outline,
+            color: _color(align, style),
+          ),
+          const SizedBox(width: 8.0),
+          Flexible(
+            child: DSBodyText(
+              'Failed to load message',
+              overflow: TextOverflow.visible,
+              color: _color(align, style),
+            ),
+          ),
+        ],
+      );
+  }
+}
+
+Color _color(DSAlign align, DSMessageBubbleStyle style) {
+  return style.isLightBubbleBackground(align)
+      ? DSColors.contentDefault
+      : DSColors.surface1;
+}

lib/src/widgets/chat/ds_request_location_bubble.widget.dart

@@ -14,6 +14,7 @@ class DSRequestLocationBubble extends StatelessWidget {
     required this.label,
     required this.value,
     required this.align,
+    this.replyId,
     this.type = DSMessageContentType.textPlain,
     this.borderRadius = const [DSBorderRadius.all],
     this.showRequestLocationButton = false,
@@ -23,6 +24,7 @@ class DSRequestLocationBubble extends StatelessWidget {
   final String? label;
   final String type;
   final String? value;
+  final String? replyId;
   final DSAlign align;
   final List<DSBorderRadius> borderRadius;
   final bool showRequestLocationButton;
@@ -45,6 +47,7 @@ class DSRequestLocationBubble extends StatelessWidget {
                 ),
                 child: DSTextMessageBubble(
                   text: value!,
+                  replyId: replyId,
                   align: align,
                   borderRadius: borderRadius,
                   style: style,