From 9101a94691c7e2d356eb62c8f1ccd8a54185c76d Mon Sep 17 00:00:00 2001 From: Van Leemput Dayron Date: Thu, 13 Nov 2025 18:35:00 +0100 Subject: [PATCH] Add sender avatar display and member list enhancements in chat group --- lib/components/group/chat_group_content.dart | 178 ++++++++++++------- 1 file changed, 117 insertions(+), 61 deletions(-) diff --git a/lib/components/group/chat_group_content.dart b/lib/components/group/chat_group_content.dart index b2f990d..f1bce91 100644 --- a/lib/components/group/chat_group_content.dart +++ b/lib/components/group/chat_group_content.dart @@ -380,77 +380,118 @@ class _ChatGroupContentState extends State { bubbleColor = isDark ? Colors.grey[800]! : Colors.grey[200]!; textColor = isDark ? Colors.white : Colors.black87; } - + + // Trouver le membre qui a envoyé le message pour récupérer sa photo + final senderMember = widget.group.members.firstWhere( + (m) => m.userId == message.senderId, + orElse: () => null as dynamic, + ) as dynamic; + return Align( alignment: isMe ? Alignment.centerRight : Alignment.centerLeft, child: GestureDetector( onLongPress: () => _showMessageOptions(context, message, isMe, currentUserId), - child: Container( - margin: const EdgeInsets.symmetric(vertical: 4), - padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10), - constraints: BoxConstraints( - maxWidth: MediaQuery.of(context).size.width * 0.7, + child: Padding( + padding: EdgeInsets.symmetric( + horizontal: 8, + vertical: 4, ), - decoration: BoxDecoration( - color: bubbleColor, - borderRadius: BorderRadius.only( - topLeft: const Radius.circular(16), - topRight: const Radius.circular(16), - bottomLeft: Radius.circular(isMe ? 16 : 4), - bottomRight: Radius.circular(isMe ? 4 : 16), - ), - ), - child: Column( - crossAxisAlignment: isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start, + child: Row( + mainAxisAlignment: isMe ? MainAxisAlignment.end : MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.end, children: [ + // Avatar du sender (seulement pour les autres messages) if (!isMe) ...[ - Text( - message.senderName, - style: TextStyle( - fontSize: 12, - fontWeight: FontWeight.bold, - color: isDark ? Colors.grey[400] : Colors.grey[700], - ), + CircleAvatar( + radius: 16, + backgroundImage: (senderMember != null && + senderMember.profilePictureUrl != null && + senderMember.profilePictureUrl!.isNotEmpty) + ? NetworkImage(senderMember.profilePictureUrl!) + : null, + child: (senderMember == null || + senderMember.profilePictureUrl == null || + senderMember.profilePictureUrl!.isEmpty) + ? Text( + message.senderName.isNotEmpty + ? message.senderName[0].toUpperCase() + : '?', + style: const TextStyle(fontSize: 12), + ) + : null, ), - const SizedBox(height: 4), + const SizedBox(width: 8), ], - Text( - message.text, - style: TextStyle(fontSize: 15, color: textColor), - ), - const SizedBox(height: 4), - Row( - mainAxisSize: MainAxisSize.min, - children: [ - Text( - _formatTime(message.timestamp), - style: TextStyle( - fontSize: 11, - color: textColor.withValues(alpha: 0.7), - ), - ), - if (message.isEdited) ...[ - const SizedBox(width: 4), - Text( - '(modifié)', - style: TextStyle( - fontSize: 10, - fontStyle: FontStyle.italic, - color: textColor.withValues(alpha: 0.6), - ), - ), - ], - ], - ), - // Afficher les réactions - if (message.reactions.isNotEmpty) - Padding( - padding: const EdgeInsets.only(top: 4), - child: Wrap( - spacing: 4, - children: _buildReactionChips(message, currentUserId), + + Container( + margin: const EdgeInsets.symmetric(vertical: 4), + padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10), + constraints: BoxConstraints( + maxWidth: MediaQuery.of(context).size.width * 0.65, + ), + decoration: BoxDecoration( + color: bubbleColor, + borderRadius: BorderRadius.only( + topLeft: const Radius.circular(16), + topRight: const Radius.circular(16), + bottomLeft: Radius.circular(isMe ? 16 : 4), + bottomRight: Radius.circular(isMe ? 4 : 16), ), ), + child: Column( + crossAxisAlignment: isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start, + children: [ + if (!isMe) ...[ + Text( + message.senderName, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.bold, + color: isDark ? Colors.grey[400] : Colors.grey[700], + ), + ), + const SizedBox(height: 4), + ], + Text( + message.text, + style: TextStyle(fontSize: 15, color: textColor), + ), + const SizedBox(height: 4), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + _formatTime(message.timestamp), + style: TextStyle( + fontSize: 11, + color: textColor.withValues(alpha: 0.7), + ), + ), + if (message.isEdited) ...[ + const SizedBox(width: 4), + Text( + '(modifié)', + style: TextStyle( + fontSize: 10, + fontStyle: FontStyle.italic, + color: textColor.withValues(alpha: 0.6), + ), + ), + ], + ], + ), + // Afficher les réactions + if (message.reactions.isNotEmpty) + Padding( + padding: const EdgeInsets.only(top: 4), + child: Wrap( + spacing: 4, + children: _buildReactionChips(message, currentUserId), + ), + ), + ], + ), + ), ], ), ), @@ -642,11 +683,26 @@ class _ChatGroupContentState extends State { itemCount: widget.group.members.length, itemBuilder: (context, index) { final member = widget.group.members[index]; + final initials = member.pseudo.isNotEmpty + ? member.pseudo[0].toUpperCase() + : (member.firstName.isNotEmpty + ? member.firstName[0].toUpperCase() + : '?'); + return ListTile( leading: CircleAvatar( - child: Text(member.pseudo.substring(0, 1).toUpperCase()), + backgroundImage: (member.profilePictureUrl != null && + member.profilePictureUrl!.isNotEmpty) + ? NetworkImage(member.profilePictureUrl!) + : null, + child: (member.profilePictureUrl == null || member.profilePictureUrl!.isEmpty) + ? Text(initials) + : null, ), title: Text(member.pseudo), + subtitle: member.role == 'admin' + ? const Text('Administrateur', style: TextStyle(fontSize: 12)) + : null, ); }, ),