fix(ui): substitute mentioned user ids with user names in system message (#1278)

Signed-off-by: xsahil03x <[email protected]>

packages/stream_chat_flutter/CHANGELOG.md

@@ -3,7 +3,10 @@
 🐞 Fixed
 
 - [[#1247]](https://github.com/GetStream/stream-chat-flutter/issues/1247) Fix Jiffy initialization.
-- [[#1232]](https://github.com/getstream/stream-chat-flutter/issues/1232) Fix DateDivider not showing up in the chat.
+- [[#1232]](https://github.com/getstream/stream-chat-flutter/issues/1232) Fix DateDivider not
+  showing up in the chat.
+- [[#1240]](https://github.com/getstream/stream-chat-flutter/issues/1240) Substitute mentioned user
+  ids with user names in system message.
 
 ## 4.4.0
 

packages/stream_chat_flutter/lib/src/system_message.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter/src/extension.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 /// {@macro system_message}
@@ -21,16 +22,22 @@ class StreamSystemMessage extends StatelessWidget {
 
   /// The function called when tapping on the message
   /// when the message is not failed
+  // TODO: Convert it to a simple OnTap instead.
   final void Function(Message)? onMessageTap;
 
   @override
   Widget build(BuildContext context) {
     final theme = StreamChatTheme.of(context);
+    final message = this.message.replaceMentions();
+
+    final messageText = message.text;
+    if (messageText == null) return const SizedBox.shrink();
+
     return GestureDetector(
       behavior: HitTestBehavior.opaque,
       onTap: onMessageTap == null ? null : () => onMessageTap!(message),
       child: Text(
-        message.text!,
+        messageText,
         textAlign: TextAlign.center,
         softWrap: true,
         style: theme.textTheme.captionBold.copyWith(