feat: ✨ Enhance link preview to support multiple URLs extraction and clickable links.

Author: japanshah-simform

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [3.0.0]
-
+* **Feat**: [414](https://github.com/SimformSolutionsPvtLtd/chatview/pull/414)
+  Enhance link preview to support multiple URLs extraction and clickable links.
 * **Feat**: [374](https://github.com/SimformSolutionsPvtLtd/chatview/issues/374)
   Add support for displaying and selecting text and links in a single message view.
 * **Breaking**: [411](https://github.com/SimformSolutionsPvtLtd/chatview/pull/411)

lib/src/extensions/extensions.dart

@@ -115,8 +115,10 @@ extension ValidateString on String {
   /// Regular expression pattern to match URLs.
   static final _urlRegex = RegExp(urlRegex, caseSensitive: false);
 
-  /// Extracts the first URL found in the string.
-  String? get extractedUrl => _urlRegex.firstMatch(this)?.group(0);
+  /// Extracts all URLs from the string and returns them as a list.
+  List<String> get extractedUrls {
+    return _urlRegex.allMatches(this).map((m) => m.group(0)!).toList();
+  }
 
   Widget getUserProfilePicture({
     required ChatUser? Function(String) getChatUser,

lib/src/widgets/link_preview.dart

@@ -26,28 +26,34 @@ import 'package:url_launcher/url_launcher.dart';
 import '../extensions/extensions.dart';
 import '../models/config_models/link_preview_configuration.dart';
 import '../utils/constants/constants.dart';
+import 'link_preview_text.dart';
 
 class LinkPreview extends StatelessWidget {
   const LinkPreview({
     Key? key,
     required this.textMessage,
-    required this.extractedUrl,
+    required this.extractedUrls,
     this.linkPreviewConfig,
+    required this.normalTextStyle,
   }) : super(key: key);
 
   /// Provides the whole text message to show.
   final String textMessage;
 
   /// Provides url which is passed in message.
-  final String extractedUrl;
+  final List<String> extractedUrls;
 
   /// Provides configuration of chat bubble appearance when link/URL is passed
   /// in message.
   final LinkPreviewConfiguration? linkPreviewConfig;
 
+  /// Provides normal text style for message text.
+  final TextStyle normalTextStyle;
+
   @override
   Widget build(BuildContext context) {
-    final isImageUrl = extractedUrl.isImageUrl;
+    final firstUrl = extractedUrls.first;
+    final isImageUrl = firstUrl.isImageUrl;
     return Padding(
       padding: linkPreviewConfig?.padding ??
           const EdgeInsets.symmetric(horizontal: 6, vertical: verticalPadding),
@@ -59,11 +65,11 @@ class LinkPreview extends StatelessWidget {
             Padding(
               padding: const EdgeInsets.symmetric(vertical: verticalPadding),
               child: AnyLinkPreview(
-                link: extractedUrl,
+                link: firstUrl,
                 removeElevation: true,
                 errorBody: linkPreviewConfig?.errorBody,
                 proxyUrl: linkPreviewConfig?.proxyUrl,
-                onTap: _onLinkTap,
+                onTap: () => _onLinkTap(firstUrl),
                 placeholderWidget: SizedBox(
                   height: MediaQuery.of(context).size.height * 0.25,
                   width: double.infinity,
@@ -86,9 +92,9 @@ class LinkPreview extends StatelessWidget {
             Padding(
               padding: const EdgeInsets.symmetric(vertical: verticalPadding),
               child: InkWell(
-                onTap: _onLinkTap,
+                onTap: () => _onLinkTap(firstUrl),
                 child: Image.network(
-                  extractedUrl,
+                  firstUrl,
                   height: 120,
                   width: double.infinity,
                   fit: BoxFit.fitWidth,
@@ -97,32 +103,28 @@ class LinkPreview extends StatelessWidget {
             ),
           },
           const SizedBox(height: verticalPadding),
-          InkWell(
-            onTap: _onLinkTap,
-            child: Text(
-              textMessage,
-              style: linkPreviewConfig?.linkStyle ??
-                  const TextStyle(
-                    color: Colors.white,
-                    decoration: TextDecoration.underline,
-                  ),
-            ),
+          LinkPreviewText(
+            textMessage: textMessage,
+            extractedUrls: extractedUrls,
+            linkPreviewConfig: linkPreviewConfig,
+            onLinkTap: _onLinkTap,
+            normalTextStyle: normalTextStyle,
           ),
         ],
       ),
     );
   }
 
-  void _onLinkTap() {
+  void _onLinkTap(String url) {
     if (linkPreviewConfig?.onUrlDetect case final onUrlDetect?) {
-      onUrlDetect(extractedUrl);
+      onUrlDetect(url);
     } else {
-      _launchURL();
+      _launchURL(url);
     }
   }
 
-  void _launchURL() async {
-    final parsedUrl = Uri.parse(extractedUrl);
+  void _launchURL(String url) async {
+    final parsedUrl = Uri.parse(url);
     await canLaunchUrl(parsedUrl)
         ? await launchUrl(parsedUrl)
         : throw couldNotLaunch;

lib/src/widgets/link_preview_text.dart

@@ -0,0 +1,93 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+
+import '../../chatview.dart';
+
+class LinkPreviewText extends StatefulWidget {
+  const LinkPreviewText({
+    super.key,
+    required this.textMessage,
+    required this.extractedUrls,
+    required this.linkPreviewConfig,
+    required this.onLinkTap,
+    required this.normalTextStyle,
+  });
+
+  /// Provides the whole text message to show.
+  final String textMessage;
+
+  /// Provides urls which are passed in message.
+  final List<String> extractedUrls;
+
+  /// Provides configuration of chat bubble appearance when link/URL is passed
+  final LinkPreviewConfiguration? linkPreviewConfig;
+
+  /// Callback when a link is tapped.
+  final ValueSetter<String> onLinkTap;
+
+  /// Provides normal text style for message text.
+  final TextStyle normalTextStyle;
+
+  @override
+  State<LinkPreviewText> createState() => _LinkPreviewTextState();
+}
+
+class _LinkPreviewTextState extends State<LinkPreviewText> {
+  final List<TapGestureRecognizer> _recognizers = [];
+
+  @override
+  Widget build(BuildContext context) {
+    final linkStyle = widget.linkPreviewConfig?.linkStyle;
+    final spans = <TextSpan>[];
+    int lastIndex = 0;
+
+    for (final url in widget.extractedUrls) {
+      final start = widget.textMessage.indexOf(url, lastIndex);
+      if (start == -1) continue;
+
+      if (start > lastIndex) {
+        spans.add(
+          TextSpan(
+            text: widget.textMessage.substring(lastIndex, start),
+            style: widget.normalTextStyle,
+          ),
+        );
+      }
+
+      final recognizer = TapGestureRecognizer()
+        ..onTap = () => widget.onLinkTap(url);
+      _recognizers.add(recognizer);
+
+      spans.add(
+        TextSpan(
+          text: url,
+          style: linkStyle,
+          recognizer: recognizer,
+        ),
+      );
+
+      lastIndex = start + url.length;
+    }
+
+    if (lastIndex < widget.textMessage.length) {
+      spans.add(
+        TextSpan(
+          text: widget.textMessage.substring(lastIndex),
+          style: widget.normalTextStyle,
+        ),
+      );
+    }
+
+    return RichText(
+      text: TextSpan(children: spans),
+    );
+  }
+
+  @override
+  void dispose() {
+    for (final recognizer in _recognizers) {
+      recognizer.dispose();
+    }
+    super.dispose();
+  }
+}

lib/src/widgets/text_message_view.dart

@@ -65,6 +65,7 @@ class TextMessageView extends StatelessWidget {
   /// Allow user to set color of highlighted message.
   final Color? highlightColor;
 
+  /// Provides configuration of active features in chat.
   final FeatureActiveConfig? featureActiveConfig;
 
   @override
@@ -78,12 +79,17 @@ class TextMessageView extends StatelessWidget {
     final textSelectionConfig = isMessageBySender
         ? outgoingChatBubbleConfig?.textSelectionConfig
         : inComingChatBubbleConfig?.textSelectionConfig;
-    final extractedUrl = textMessage.extractedUrl;
-    final baseWidget = extractedUrl != null
+    final extractedUrls = textMessage.extractedUrls;
+    final baseWidget = extractedUrls.isNotEmpty
         ? LinkPreview(
             linkPreviewConfig: _linkPreviewConfig,
             textMessage: textMessage,
-            extractedUrl: extractedUrl,
+            extractedUrls: extractedUrls,
+            normalTextStyle: _textStyle ??
+                textTheme.bodyMedium!.copyWith(
+                  color: Colors.white,
+                  fontSize: 16,
+                ),
           )
         : Text(
             textMessage,