✨ Provide three styles of message

lib/widgets/chat/message_sender_info.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:gap/gap.dart';
 import 'package:island/models/chat.dart';
 import 'package:island/widgets/account/account_name.dart';
 import 'package:island/widgets/account/account_pfc.dart';
@@ -9,14 +10,16 @@ class MessageSenderInfo extends StatelessWidget {
   final SnChatMember sender;
   final DateTime createdAt;
   final Color textColor;
-  final bool compact;
+  final bool showAvatar;
+  final bool isCompact;
 
   const MessageSenderInfo({
     super.key,
     required this.sender,
     required this.createdAt,
     required this.textColor,
-    this.compact = false,
+    this.showAvatar = true,
+    this.isCompact = false,
   });
 
   @override
@@ -28,11 +31,42 @@ class MessageSenderInfo extends StatelessWidget {
             ? DateFormat('MM/dd HH:mm').format(createdAt.toLocal())
             : DateFormat('HH:mm').format(createdAt.toLocal());
 
-    if (compact) {
+    if (isCompact) {
+      return Row(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.baseline,
+        textBaseline: TextBaseline.alphabetic,
+        children: [
+          if (showAvatar)
+            AccountPfcGestureDetector(
+              uname: sender.account.name,
+              child: ProfilePictureWidget(
+                fileId: sender.account.profile.picture?.id,
+                radius: 14,
+              ),
+            ),
+          if (showAvatar) const Gap(4),
+          AccountName(
+            account: sender.account,
+            style: Theme.of(context).textTheme.bodySmall?.copyWith(
+              color: textColor,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+          const Gap(6),
+          Text(
+            timestamp,
+            style: TextStyle(fontSize: 10, color: textColor.withOpacity(0.7)),
+          ),
+        ],
+      );
+    }
+
+    if (showAvatar) {
       return Row(
         spacing: 8,
         children: [
-          if (!compact)
+          if (!showAvatar)
             AccountPfcGestureDetector(
               uname: sender.account.name,
               child: ProfilePictureWidget(
@@ -84,13 +118,14 @@ class MessageSenderInfo extends StatelessWidget {
       spacing: 8,
       mainAxisSize: MainAxisSize.min,
       children: [
-        AccountPfcGestureDetector(
-          uname: sender.account.name,
-          child: ProfilePictureWidget(
-            fileId: sender.account.profile.picture?.id,
-            radius: 16,
+        if (showAvatar)
+          AccountPfcGestureDetector(
+            uname: sender.account.name,
+            child: ProfilePictureWidget(
+              fileId: sender.account.profile.picture?.id,
+              radius: 16,
+            ),
           ),
-        ),
         Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           spacing: 2,