#778304 [Feat] - Scroll to message

lib/src/models/ds_reply_content_in_reply_to.model.dart

@@ -13,7 +13,7 @@ class DSReplyContentInReplyTo {
 
   DSReplyContentInReplyTo.fromJson(Map<String, dynamic> json)
       : id = json['id'],
-        type = json['type'],
-        value = json['value'],
-        direction = json['direction'];
+        type = json['type'] ?? "",
+        value = json['value'] ?? "",
+        direction = json['direction'] ?? "";
 }

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

@@ -16,6 +16,7 @@ class DSAudioMessageBubble extends StatelessWidget {
   final String? uniqueId;
   final bool shouldAuthenticate;
   final DSReplyContent? replyContent;
+  final void Function(String)? onReplyTap;
 
   DSAudioMessageBubble({
     super.key,
@@ -26,6 +27,7 @@ class DSAudioMessageBubble extends StatelessWidget {
     this.borderRadius = const [DSBorderRadius.all],
     this.shouldAuthenticate = false,
     final DSMessageBubbleStyle? style,
+    this.onReplyTap,
   }) : style = style ?? DSMessageBubbleStyle();
 
   @override
@@ -34,6 +36,7 @@ class DSAudioMessageBubble extends StatelessWidget {
     final isLightBubbleBackground = style.isLightBubbleBackground(align);
 
     return DSMessageBubble(
+      onReplyTap: onReplyTap,
       borderRadius: borderRadius,
       align: align,
       replyContent: replyContent,

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

@@ -36,6 +36,7 @@ class DSImageMessageBubble extends StatefulWidget {
     this.mediaType,
     this.isUploading = false,
     this.replyContent,
+    this.onReplyTap,
   }) : style = style ?? DSMessageBubbleStyle();
 
   final DSAlign align;
@@ -55,6 +56,7 @@ class DSImageMessageBubble extends StatefulWidget {
   final String? mediaType;
   final bool isUploading;
   final DSReplyContent? replyContent;
+  final void Function(String)? onReplyTap;
 
   @override
   State<StatefulWidget> createState() => _DSImageMessageBubbleState();
@@ -84,6 +86,7 @@ class _DSImageMessageBubbleState extends State<DSImageMessageBubble>
         : DSColors.neutralLightSnow;
 
     return DSMessageBubble(
+      onReplyTap: widget.onReplyTap,
       replyContent: widget.replyContent,
       defaultMaxSize: DSUtils.bubbleMinSize,
       shouldUseDefaultSize: true,

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

@@ -20,6 +20,7 @@ class DSMessageBubble extends StatelessWidget {
   final double defaultMinSize;
   final DSMessageBubbleStyle style;
   final bool hasSpacer;
+  final void Function(String)? onReplyTap;
 
   const DSMessageBubble({
     super.key,
@@ -36,6 +37,7 @@ class DSMessageBubble extends StatelessWidget {
     this.defaultMinSize = DSUtils.bubbleMinSize,
     required this.style,
     this.hasSpacer = true,
+    this.onReplyTap,
   });
 
   @override
@@ -80,10 +82,13 @@ class DSMessageBubble extends StatelessWidget {
                   : CrossAxisAlignment.start,
               children: [
                 if (replyContent != null)
-                  DSReplyContainer(
-                    replyContent: replyContent!,
-                    style: style,
-                    align: align,
+                  GestureDetector(
+                    onTap: () => onReplyTap?.call(replyContent!.inReplyTo.id),
+                    child: DSReplyContainer(
+                      replyContent: replyContent!,
+                      style: style,
+                      align: align,
+                    ),
                   ),
                 child,
               ],

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

@@ -21,6 +21,7 @@ class DSTextMessageBubble extends StatefulWidget {
   final bool showSelect;
   final void Function(String, Map<String, dynamic>)? onSelected;
   final DSMessageBubbleStyle style;
+  final void Function(String)? onReplyTap;
 
   DSTextMessageBubble({
     super.key,
@@ -33,7 +34,8 @@ class DSTextMessageBubble extends StatefulWidget {
     this.showSelect = false,
     this.onSelected,
     DSMessageBubbleStyle? style,
-  })  : style = style ?? DSMessageBubbleStyle();
+    this.onReplyTap,
+  }) : style = style ?? DSMessageBubbleStyle();
 
   @override
   State<DSTextMessageBubble> createState() => _DSTextMessageBubbleState();
@@ -58,6 +60,7 @@ class _DSTextMessageBubbleState extends State<DSTextMessageBubble> {
   @override
   Widget build(BuildContext context) {
     return DSMessageBubble(
+      onReplyTap: widget.onReplyTap,
       align: widget.align,
       borderRadius: widget.borderRadius,
       padding: EdgeInsets.zero,

lib/src/widgets/chat/video/ds_video_message_bubble.widget.dart

@@ -61,6 +61,9 @@ class DSVideoMessageBubble extends StatefulWidget {
   /// Title of the video which will be displayed inside the message bubble.
   final String? title;
 
+  /// Callback function to be executed when the reply button is tapped.
+  final void Function(String)? onReplyTap;
+
   /// Card for the purpose of triggering a video to play.
   ///
   /// This widget is intended to display a video card from a url passed in the [url] parameter.
@@ -81,6 +84,7 @@ class DSVideoMessageBubble extends StatefulWidget {
     this.isUploading = false,
     this.replyContent,
     this.title,
+    this.onReplyTap,
   }) : style = style ?? DSMessageBubbleStyle();
 
   @override
@@ -137,6 +141,7 @@ class _DSVideoMessageBubbleState extends State<DSVideoMessageBubble>
             : DSColors.neutralDarkCity;
 
     return DSMessageBubble(
+      onReplyTap: widget.onReplyTap,
       defaultMaxSize: DSUtils.bubbleMinSize,
       shouldUseDefaultSize: true,
       replyContent: widget.replyContent,

lib/src/widgets/utils/ds_card.widget.dart

@@ -52,6 +52,7 @@ class DSCard extends StatelessWidget {
     this.replyContent,
     this.isUploading = false,
     this.onAsyncFetchSession,
+    this.onReplyTap,
   }) : style = style ?? DSMessageBubbleStyle();
 
   final String type;
@@ -70,6 +71,7 @@ class DSCard extends StatelessWidget {
   final DSReplyContent? replyContent;
   final bool isUploading;
   final Future<String?> Function(String)? onAsyncFetchSession;
+  final void Function(String)? onReplyTap;
 
   @override
   Widget build(BuildContext context) {
@@ -86,6 +88,7 @@ class DSCard extends StatelessWidget {
           borderRadius: borderRadius,
           style: style,
           replyContent: replyContent,
+          onReplyTap: onReplyTap,
         );
 
       case DSMessageContentType.contact:
@@ -107,6 +110,7 @@ class DSCard extends StatelessWidget {
           messageId: messageId,
           customer: customer,
           replyContent: DSUtils.shouldShowReplyContainer ? replyContent : null,
+          onReplyTap: onReplyTap,
         );
 
       case DSMessageContentType.mediaLink:
@@ -213,6 +217,7 @@ class DSCard extends StatelessWidget {
       onSelected: onSelected,
       onOpenLink: onOpenLink,
       mediaType: documentSelectModel.header.mediaLink.type,
+      onReplyTap: onReplyTap,
     );
   }
 
@@ -293,6 +298,7 @@ class DSCard extends StatelessWidget {
         replyContent: replyContent,
         uniqueId: messageId,
         shouldAuthenticate: shouldAuthenticate,
+        onReplyTap: onReplyTap,
       );
     } else if (media.type.contains('image')) {
       return DSImageMessageBubble(
@@ -313,6 +319,7 @@ class DSCard extends StatelessWidget {
         shouldAuthenticate: shouldAuthenticate,
         mediaType: media.type,
         isUploading: isUploading,
+        onReplyTap: onReplyTap,
       );
     } else if (media.type.contains('video')) {
       return DSVideoMessageBubble(
@@ -333,6 +340,7 @@ class DSCard extends StatelessWidget {
         mediaSize: size,
         shouldAuthenticate: shouldAuthenticate,
         isUploading: isUploading,
+        onReplyTap: onReplyTap,
       );
     } else {
       return DSFileMessageBubble(

lib/src/widgets/utils/ds_group_card.widget.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:scroll_to_index/scroll_to_index.dart';
 
 import '../../enums/ds_align.enum.dart';
 import '../../enums/ds_border_radius.enum.dart';
@@ -10,7 +11,6 @@ import '../../models/ds_message_item.model.dart';
 import '../../themes/colors/ds_colors.theme.dart';
 import '../../themes/icons/ds_icons.dart';
 import '../../themes/texts/styles/ds_caption_small_text_style.theme.dart';
-import '../../utils/ds_animate.util.dart';
 import '../../utils/ds_message_content_type.util.dart';
 import '../../utils/ds_utils.util.dart';
 import '../buttons/ds_button.widget.dart';
@@ -64,11 +64,9 @@ class DSGroupCard extends StatefulWidget {
     this.shrinkWrap = false,
     DSMessageBubbleStyle? style,
     bool Function(DSMessageItem, DSMessageItem)? compareMessages,
-    ScrollController? scrollController,
     this.onAsyncFetchSession,
   })  : compareMessages = compareMessages ?? _defaultCompareMessageFuntion,
-        style = style ?? DSMessageBubbleStyle(),
-        scrollController = scrollController ?? ScrollController();
+        style = style ?? DSMessageBubbleStyle();
 
   final List<DSMessageItem> documents;
   final bool Function(DSMessageItem, DSMessageItem) compareMessages;
@@ -82,7 +80,6 @@ class DSGroupCard extends StatefulWidget {
   final DSMessageBubbleAvatarConfig avatarConfig;
   final void Function()? onInfinitScroll;
   final bool shrinkWrap;
-  final ScrollController scrollController;
   final Future<String?> Function(String)? onAsyncFetchSession;
 
   @override
@@ -92,29 +89,33 @@ class DSGroupCard extends StatefulWidget {
 class _DSGroupCardState extends State<DSGroupCard> {
   final List<Widget> widgets = [];
   final showScrollBottomButton = false.obs;
+  late final AutoScrollController controller;
+  String? previousReplyId;
 
   @override
   void initState() {
-    widget.scrollController.addListener(() {
-      final nextPageTrigger =
-          0.90 * widget.scrollController.position.maxScrollExtent;
-
-      if (widget.scrollController.position.pixels > nextPageTrigger) {
-        if (widget.onInfinitScroll != null) {
-          widget.onInfinitScroll!();
-        }
+    controller = AutoScrollController(
+      suggestedRowHeight: 80,
+      viewportBoundaryGetter: () =>
+          Rect.fromLTRB(0, 0, 0, MediaQuery.of(context).padding.bottom),
+      axis: Axis.vertical,
+    );
+
+    controller.addListener(() {
+      final nextPageTrigger = 0.90 * controller.position.maxScrollExtent;
+
+      if (controller.position.pixels > nextPageTrigger) {
+        widget.onInfinitScroll?.call();
       }
 
-      showScrollBottomButton.value =
-          widget.scrollController.position.pixels > 600;
+      showScrollBottomButton.value = controller.position.pixels > 600;
     });
 
     super.initState();
   }
 
   @override
   void dispose() {
-    widget.scrollController.dispose();
     super.dispose();
   }
 
@@ -125,13 +126,19 @@ class _DSGroupCardState extends State<DSGroupCard> {
     return Stack(
       children: [
         ListView.builder(
+          controller: controller,
           padding: const EdgeInsets.symmetric(vertical: 16.0),
-          controller: widget.scrollController,
           reverse: true,
           shrinkWrap: widget.shrinkWrap,
           itemCount: widgets.length,
           itemBuilder: (_, int index) {
-            return widgets[index];
+            return AutoScrollTag(
+              key: widgets[index].key as ValueKey<String>,
+              controller: controller,
+              index: index,
+              highlightColor: Colors.black.withOpacity(0.1),
+              child: widgets[index],
+            );
           },
           findChildIndexCallback: (Key key) {
             final valueKey = key as ValueKey<String>;
@@ -151,10 +158,7 @@ class _DSGroupCardState extends State<DSGroupCard> {
                 padding: const EdgeInsets.all(16),
                 child: DSButton(
                   shape: DSButtonShape.rounded,
-                  onPressed: () async => await DSAnimate.animateTo(
-                    widget.scrollController,
-                    duration: const Duration(milliseconds: 600),
-                  ),
+                  onPressed: () => _onScrollPrevious(),
                   leadingIcon: const Icon(
                     DSIcons.arrow_down_outline,
                     size: 20,
@@ -267,6 +271,8 @@ class _DSGroupCardState extends State<DSGroupCard> {
             customer: message.customer,
             isUploading: message.isUploading,
             onAsyncFetchSession: widget.onAsyncFetchSession,
+            onReplyTap: (final inReplyToId) =>
+                _onReplyTap(inReplyToId, message.id!),
           );
 
           final isLastMsg = msgCount == length;
@@ -461,4 +467,51 @@ class _DSGroupCardState extends State<DSGroupCard> {
 
     return borderRadius;
   }
+
+  Future<void> _onScrollPrevious() async {
+    int index = 0;
+
+    if (previousReplyId != null) {
+      index = widgets.indexWhere(
+        (element) => element.key.toString().contains(previousReplyId!),
+      );
+    }
+
+    if (index == -1) {
+      index = 0;
+    }
+
+    await _scrollToIndex(index, highlight: index != 0);
+
+    previousReplyId = null;
+  }
+
+  Future<void> _onReplyTap(
+    final String inReplyToId,
+    final String repliedId,
+  ) async {
+    previousReplyId = repliedId;
+
+    final index = widgets.indexWhere(
+      (element) => element.key.toString().contains(inReplyToId),
+    );
+
+    if (index == -1) {
+      return;
+    }
+
+    await _scrollToIndex(index);
+  }
+
+  Future<void> _scrollToIndex(final int index, {bool highlight = true}) async {
+    await controller.scrollToIndex(
+      index,
+      preferPosition: AutoScrollPosition.middle,
+      duration: const Duration(milliseconds: 500),
+    );
+
+    if (highlight) {
+      controller.highlight(index);
+    }
+  }
 }

pubspec.yaml

@@ -41,6 +41,7 @@ dependencies:
   video_compress: ^3.1.3
   flutter_image_compress: ^2.1.0
   phone_number: ^2.0.1
+  scroll_to_index: ^3.0.1
 
 dev_dependencies:
   flutter_test: