fix: 🐛 Adjust emoji display logic to handle multiple emojis width and add maxOutSideBubbleEmojis parameter in EmojiMessageConfig (#415)

Co-authored-by: Sahil-Simform <sahil.t@simformsolutions.com>

Author: japanshah-simform

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## [3.0.0]
 
+* **Fix**: [415](https://github.com/SimformSolutionsPvtLtd/chatview/pull/415)
+  Adjust emoji display logic to handle multiple emojis display width and added
+  `maxOutSideBubbleEmojis` parameter in `EmojiMessageConfig`.
 * **Fix**: [358](https://github.com/SimformSolutionsPvtLtd/chatview/issues/358) Fix issue of Image
   selected from the locally is unable to display in message (windows).
 * **Feat**: [414](https://github.com/SimformSolutionsPvtLtd/chatview/pull/414)

example/lib/main.dart

@@ -844,6 +844,9 @@ class _ExampleOneChatScreenState extends State<ExampleOneChatScreen> {
               }
               return const SizedBox.shrink();
             },
+            emojiMessageConfig: const EmojiMessageConfiguration(
+              maxOutSideBubbleEmojis: 1,
+            ),
           ),
           profileCircleConfig: const ProfileCircleConfiguration(
             padding: EdgeInsets.only(right: 4),

lib/src/extensions/extensions.dart

@@ -125,7 +125,7 @@ extension ValidateString on String {
     final regex = _urlRegex.allMatches(this);
     final urls = <String>[];
     for (final match in regex) {
-      if (match.group(0) case final url?) {
+      if (match.group(0) case final url? when url.isUrl) {
         urls.add(url);
       }
     }

lib/src/models/config_models/emoji_message_configuration.dart

@@ -25,11 +25,16 @@ class EmojiMessageConfiguration {
   const EmojiMessageConfiguration({
     this.padding,
     this.textStyle,
+    this.maxOutSideBubbleEmojis,
   });
 
   /// Used for giving padding to emoji messages.
   final EdgeInsetsGeometry? padding;
 
   /// Used for giving text style to emoji messages.
   final TextStyle? textStyle;
+
+  /// Maximum number of emojis to show outside the bubble
+  /// for emoji-only messages.
+  final int? maxOutSideBubbleEmojis;
 }

lib/src/widgets/message_view.dart

@@ -161,6 +161,8 @@ class _MessageViewState extends State<MessageView>
   Widget get _messageView {
     final message = widget.message.message;
     final emojiMessageConfiguration = messageConfig?.emojiMessageConfig;
+    final maxOutSideBubbleEmojis =
+        emojiMessageConfiguration?.maxOutSideBubbleEmojis;
     return Padding(
       padding: EdgeInsets.only(
         bottom: widget.message.reaction.reactions.isNotEmpty ? 6 : 0,
@@ -169,11 +171,13 @@ class _MessageViewState extends State<MessageView>
         crossAxisAlignment: CrossAxisAlignment.end,
         children: [
           (() {
-                if (message.isAllEmoji) {
+                if (message.isAllEmoji &&
+                    (maxOutSideBubbleEmojis == null ||
+                        message.characters.length <= maxOutSideBubbleEmojis)) {
                   return Stack(
                     clipBehavior: Clip.none,
                     children: [
-                      Padding(
+                      Container(
                         padding: emojiMessageConfiguration?.padding ??
                             EdgeInsets.fromLTRB(
                               leftPadding2,
@@ -183,6 +187,9 @@ class _MessageViewState extends State<MessageView>
                                   ? 14
                                   : 0,
                             ),
+                        constraints: BoxConstraints(
+                            maxWidth: widget.chatBubbleMaxWidth ??
+                                MediaQuery.sizeOf(context).width * 0.75),
                         child: Transform.scale(
                           scale: widget.shouldHighlight
                               ? widget.highlightScale