fix(ui): refactor message widget bottom row

packages/stream_chat_flutter/lib/src/message_widget.dart

@@ -878,7 +878,7 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
           const Offstage();
     }
 
-    final children = <Widget>[];
+    final children = <WidgetSpan>[];
 
     final threadParticipants = widget.message.threadParticipants?.take(2);
     final showThreadParticipants = threadParticipants?.isNotEmpty == true;
@@ -909,56 +909,70 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
     const usernameKey = Key('username');
 
     children.addAll([
-      if (showUsername) Flexible(child: _buildUsername(usernameKey)),
+      if (showUsername)
+        WidgetSpan(child: Flexible(child: _buildUsername(usernameKey))),
       if (showTimeStamp)
-        Text(
+        WidgetSpan(
-          Jiffy(widget.message.createdAt.toLocal()).jm,
+          child: Text(
-          style: widget.messageTheme.createdAtStyle,
+            Jiffy(widget.message.createdAt.toLocal()).jm,
+            style: widget.messageTheme.createdAtStyle,
+          ),
+        ),
+      if (showSendingIndicator)
+        WidgetSpan(
+          child: _buildSendingIndicator(),
+          alignment: PlaceholderAlignment.top,
         ),
-      if (showSendingIndicator) _buildSendingIndicator(),
     ]);
 
     final showThreadTail = !(hasUrlAttachments || isGiphy || isOnlyEmoji) &&
         (showThreadReplyIndicator || showInChannel);
 
-    final threadIndicatorWidgets = <Widget>[
+    final threadIndicatorWidgets = <InlineSpan>[
       if (showThreadTail)
-        Container(
+        WidgetSpan(
-          margin: EdgeInsets.only(
+          child: Container(
-            bottom: context.textScaleFactor *
+            margin: EdgeInsets.only(
-                ((widget.messageTheme.repliesStyle?.fontSize ?? 1) / 2),
+              bottom: context.textScaleFactor *
-          ),
+                  ((widget.messageTheme.repliesStyle?.fontSize ?? 1) / 2),
-          child: CustomPaint(
+            ),
-            size: const Size(16, 32) * context.textScaleFactor,
+            child: CustomPaint(
-            painter: _ThreadReplyPainter(
+              size: const Size(16, 32) * context.textScaleFactor,
-              context: context,
+              painter: _ThreadReplyPainter(
-              color: widget.messageTheme.messageBorderColor,
+                context: context,
-              reverse: widget.reverse,
+                color: widget.messageTheme.messageBorderColor,
+                reverse: widget.reverse,
+              ),
             ),
           ),
         ),
       if (showInChannel || showThreadReplyIndicator) ...[
         if (showThreadParticipants)
-          SizedBox.fromSize(
+          WidgetSpan(
-            size: Size((threadParticipants!.length * 8.0) + 8, 16),
+            child: SizedBox.fromSize(
-            child: _buildThreadParticipantsIndicator(threadParticipants),
+              size: Size((threadParticipants!.length * 8.0) + 8, 16),
+              child: _buildThreadParticipantsIndicator(threadParticipants),
+            ),
+          ),
+        WidgetSpan(
+          child: InkWell(
+            onTap: widget.onThreadTap != null ? onThreadTap : null,
+            child: Text(msg, style: widget.messageTheme.repliesStyle),
           ),
-        InkWell(
-          onTap: widget.onThreadTap != null ? onThreadTap : null,
-          child: Text(msg, style: widget.messageTheme.repliesStyle),
         ),
       ],
     ];
 
-    return Row(
+    return Text.rich(
-      crossAxisAlignment: CrossAxisAlignment.end,
+      TextSpan(
-      mainAxisAlignment:
+        children: [
-          widget.reverse ? MainAxisAlignment.end : MainAxisAlignment.start,
+          if (!widget.reverse) ...threadIndicatorWidgets,
-      children: [
+          ...children,
-        if (!widget.reverse) ...threadIndicatorWidgets,
+          if (widget.reverse) ...threadIndicatorWidgets.reversed,
-        ...children,
+        ].insertBetween(const WidgetSpan(child: SizedBox(width: 8))),
-        if (widget.reverse) ...threadIndicatorWidgets.reversed,
+      ),
-      ].insertBetween(const SizedBox(width: 8)),
+      maxLines: 1,
+      textAlign: widget.reverse ? TextAlign.right : TextAlign.left,
     );
   }
 
@@ -1247,6 +1261,7 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
         );
         if (isMessageRead) {
           child = Row(
+            mainAxisSize: MainAxisSize.min,
             children: [
               if (memberCount > 2)
                 Text(