Conversations

import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

class ChatApp extends StatefulWidget {
  const ChatApp({super.key});

  @override
  State<ChatApp> createState() => _ChatAppState();
}

class _ChatAppState extends State<ChatApp> {
  User? selectedUser;
  Group? selectedGroup;

  void handleItemTap(Conversation conversation) {
    final entity = conversation.conversationWith;
    setState(() {
      if (entity is User) {
        selectedUser = entity;
        selectedGroup = null;
      } else if (entity is Group) {
        selectedGroup = entity;
        selectedUser = null;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          SizedBox(
            width: 400,
            child: CometChatConversations(
              onItemTap: handleItemTap,
            ),
          ),
          Expanded(
            child: selectedUser != null || selectedGroup != null
                ? CometChatMessages(
                    user: selectedUser,
                    group: selectedGroup,
                  )
                : const Center(
                    child: Text('Select a conversation'),
                  ),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

class ConversationsDemo extends StatelessWidget {
  const ConversationsDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: CometChatConversations(),
      ),
    );
  }
}

CometChatConversations(
  conversationsRequestBuilder: ConversationsRequestBuilder()
    ..conversationType = "user"
    ..limit = 10,
)

CometChatConversations(
  onItemTap: (conversation) {
    print("Selected: ${conversation.conversationId}");
  },
)

CometChatConversations(
  onItemLongPress: (conversation) {
    // Show custom context menu
  },
)

CometChatConversations(
  selectionMode: SelectionMode.multiple,
  onSelection: (selectedList) {
    print("Selected ${selectedList?.length ?? 0} conversations");
  },
)

CometChatConversations(
  onError: (error) {
    print("CometChatConversations error: $error");
  },
)

CometChatConversations(
  showBackButton: true,
  onBack: () {
    Navigator.pop(context);
  },
)

CometChatConversations(
  onLoad: (list) {
    print("Loaded ${list.length} conversations");
  },
)

CometChatConversations(
  onEmpty: () {
    print("No conversations found");
  },
)

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

class _YourScreenState extends State<YourScreen> with CometChatConversationEventListener {

  @override
  void initState() {
    super.initState();
    CometChatConversationEvents.addConversationListListener("listenerId", this);
  }

  @override
  void dispose() {
    CometChatConversationEvents.removeConversationListListener("listenerId");
    super.dispose();
  }

  @override
  void ccConversationDeleted(Conversation conversation) {
    print("Deleted: ${conversation.conversationId}");
  }
}

CometChatConversations(
  listItemView: (conversation) {
    final entity = conversation.conversationWith;
    final name = entity is User ? entity.name : (entity as Group).name;
    
    return CometChatListItem(
      avatarName: name,
      avatarURL: entity is User ? entity.avatar : (entity as Group).icon,
      title: name,
      avatarStyle: CometChatAvatarStyle(
        borderRadius: BorderRadius.circular(8),
      ),
    );
  },
)

Widget getCustomListItem(Conversation conversation, BuildContext context) {
  User? conversationWithUser;
  Group? conversationWithGroup;
  
  if (conversation.conversationWith is User) {
    conversationWithUser = conversation.conversationWith as User;
  } else {
    conversationWithGroup = conversation.conversationWith as Group;
  }

  // Get status indicator
  StatusIndicatorUtils statusIndicatorUtils = StatusIndicatorUtils.getStatusIndicatorFromParams(
    context: context,
    user: conversationWithUser,
    group: conversationWithGroup,
    onlineStatusIndicatorColor: Color(0xFF09C26F),
  );

  // Build tail view with date
  final lastMessageTime = conversation.lastMessage?.sentAt ?? DateTime.now();
  Widget tail = CometChatDate(
    date: lastMessageTime,
    padding: EdgeInsets.zero,
    style: CometChatDateStyle(
      backgroundColor: Colors.transparent,
      textStyle: TextStyle(color: Color(0xFF727272), fontSize: 12),
      border: Border.all(width: 0, color: Colors.transparent),
    ),
    pattern: DateTimePattern.dayDateTimeFormat,
  );

  return CometChatListItem(
    avatarHeight: 48,
    avatarWidth: 48,
    id: conversation.conversationId,
    avatarName: conversationWithUser?.name ?? conversationWithGroup?.name,
    avatarURL: conversationWithUser?.avatar ?? conversationWithGroup?.icon,
    avatarStyle: CometChatAvatarStyle(
      borderRadius: BorderRadius.circular(8),
      backgroundColor: Color(0xFFAA9EE8),
    ),
    title: conversationWithUser?.name ?? conversationWithGroup?.name,
    tailView: tail,
    statusIndicatorColor: statusIndicatorUtils.statusIndicatorColor,
    statusIndicatorIcon: statusIndicatorUtils.icon,
    statusIndicatorStyle: CometChatStatusIndicatorStyle(
      border: Border.all(width: 2, color: Colors.white),
    ),
    hideSeparator: true,
    style: ListItemStyle(
      background: Colors.transparent,
      titleStyle: TextStyle(
        overflow: TextOverflow.ellipsis,
        fontSize: 16,
        fontWeight: FontWeight.w500,
        color: Color(0xFF141414),
      ),
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    ),
  );
}

// Usage:
CometChatConversations(
  listItemView: (conversation) => getCustomListItem(conversation, context),
)

// In your StatefulWidget, use the MessageListener mixin:
class _ConversationsScreenState extends State<ConversationsScreen> with MessageListener {
  Map<String, TypingIndicator> typingMap = {};

  @override
  void initState() {
    super.initState();
    CometChat.addMessageListener("typing_listener", this);
  }

  @override
  void dispose() {
    CometChat.removeMessageListener("typing_listener");
    super.dispose();
  }

  @override
  void onTypingStarted(TypingIndicator typingIndicator) {
    setTypingIndicator(typingIndicator, true);
  }

  @override
  void onTypingEnded(TypingIndicator typingIndicator) {
    setTypingIndicator(typingIndicator, false);
  }

  void setTypingIndicator(TypingIndicator typingIndicator, bool isTypingStarted) {
    final id = typingIndicator.receiverType == ReceiverTypeConstants.user
        ? typingIndicator.sender.uid
        : typingIndicator.receiverId;
    
    setState(() {
      if (isTypingStarted) {
        typingMap[id] = typingIndicator;
      } else {
        typingMap.remove(id);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return CometChatConversations(
      leadingView: (context, conversation) {
        final entity = conversation.conversationWith;
        final id = entity is User ? entity.uid : (entity as Group).guid;
        
        if (typingMap.containsKey(id)) {
          return Container(
            decoration: BoxDecoration(
              border: Border.all(color: Color(0xFFF76808), width: 2),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Image.asset("assets/typing_icon.png", height: 40, width: 40),
          );
        }
        return null; // Use default avatar
      },
    );
  }
}

CometChatConversations(
  titleView: (context, conversation) {
    final entity = conversation.conversationWith;
    final name = entity is User ? entity.name : (entity as Group).name;
    final statusMessage = entity is User ? entity.statusMessage : null;
    
    return Row(
      children: [
        Text(name ?? "", style: TextStyle(fontWeight: FontWeight.w500)),
        if (statusMessage != null)
          Text(" · $statusMessage", style: TextStyle(color: Color(0xFF6852D6))),
      ],
    );
  },
)

CometChatConversations(
  subtitleView: (context, conversation) {
    final entity = conversation.conversationWith;
    String subtitle;
    
    if (entity is User) {
      final dateTime = entity.lastActiveAt ?? DateTime.now();
      subtitle = "Last Active: ${DateFormat('dd/MM/yyyy, HH:mm').format(dateTime)}";
    } else {
      final dateTime = (entity as Group).createdAt ?? DateTime.now();
      subtitle = "Created: ${DateFormat('dd/MM/yyyy, HH:mm').format(dateTime)}";
    }
    
    return Text(subtitle, style: TextStyle(color: Color(0xFF727272), fontSize: 14));
  },
)

CometChatConversations(
  trailingView: (conversation) {
    final timestamp = conversation.updatedAt?.millisecondsSinceEpoch ?? 0;
    final now = DateTime.now();
    final lastSeen = DateTime.fromMillisecondsSinceEpoch(timestamp * 1000);
    final diffInMinutes = now.difference(lastSeen).inMinutes;
    final diffInHours = now.difference(lastSeen).inHours;

    String timeText;
    String label;
    Color cardColor;

    if (diffInMinutes < 60) {
      timeText = "$diffInMinutes";
      label = "Min ago";
      cardColor = Color(0x666852D6);
    } else if (diffInHours < 10) {
      timeText = "$diffInHours";
      label = "Hr ago";
      cardColor = Color(0x66FFAB00);
    } else {
      timeText = "$diffInHours";
      label = "Hr ago";
      cardColor = Color(0x66F44649);
    }

    return Card(
      color: cardColor,
      child: Padding(
        padding: EdgeInsets.all(4),
        child: Column(
          children: [
            Text(timeText, style: TextStyle(fontWeight: FontWeight.bold)),
            Text(label, style: TextStyle(fontSize: 12)),
          ],
        ),
      ),
    );
  },
)

CometChatConversations(
  setOptions: (conversation, controller, context) {
    return [
      CometChatOption(
        id: "delete",
        title: "Delete",
        icon: AssetConstants.delete,
        onClick: () {
          // Delete conversation
        },
      ),
    ];
  },
)

CometChatConversations(
  addOptions: (conversation, controller, context) {
    return [
      CometChatOption(
        id: "archive",
        title: "Archive",
        iconWidget: Icon(Icons.archive_outlined),
        onClick: () {
          // Archive conversation
        },
      ),
      CometChatOption(
        id: "pin",
        title: "Pin",
        iconWidget: Icon(Icons.push_pin_outlined),
        onClick: () {
          // Pin conversation
        },
      ),
      CometChatOption(
        id: "mark_unread",
        title: "Mark as unread",
        iconWidget: Icon(Icons.mark_chat_unread_outlined),
        onClick: () {
          // Mark conversation as unread
        },
      ),
    ];
  },
)

CometChatConversations(
  showBackButton: false,
  appBarOptions: [
    PopupMenuButton(
      icon: CometChatAvatar(
        image: CometChatUIKit.loggedInUser?.avatar,
        name: CometChatUIKit.loggedInUser?.name,
      ),
      itemBuilder: (context) => [
        PopupMenuItem(value: 'create', child: Text("Create Conversation")),
        PopupMenuItem(value: 'logout', child: Text("Logout")),
      ],
      onSelected: (value) {
        // Handle menu selection
      },
    ),
  ],
)

CometChatConversations(
  showBackButton: false,
  appBarOptions: [
    PopupMenuButton(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
        side: BorderSide(color: Color(0xFFF5F5F5), width: 1),
      ),
      color: Colors.white,
      elevation: 4,
      menuPadding: EdgeInsets.zero,
      padding: EdgeInsets.zero,
      icon: Padding(
        padding: EdgeInsets.only(left: 12, right: 16),
        child: CometChatAvatar(
          width: 40,
          height: 40,
          image: CometChatUIKit.loggedInUser?.avatar,
          name: CometChatUIKit.loggedInUser?.name,
        ),
      ),
      onSelected: (value) {
        switch (value) {
          case '/create':
            // Navigate to create conversation
            break;
          case '/logout':
            CometChatUIKit.logout();
            break;
        }
      },
      position: PopupMenuPosition.under,
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            height: 44,
            padding: EdgeInsets.all(16),
            value: '/create',
            child: Row(
              children: [
                Padding(
                  padding: EdgeInsets.only(right: 8),
                  child: Icon(Icons.add_comment_outlined, color: Color(0xFFA1A1A1), size: 24),
                ),
                Text("Create Conversation", style: TextStyle(fontSize: 14, color: Color(0xFF141414))),
              ],
            ),
          ),
          PopupMenuItem(
            height: 44,
            padding: EdgeInsets.all(16),
            value: '/name',
            child: Row(
              children: [
                Padding(
                  padding: EdgeInsets.only(right: 8),
                  child: Icon(Icons.account_circle_outlined, color: Color(0xFFA1A1A1), size: 24),
                ),
                Text(CometChatUIKit.loggedInUser?.name ?? "", style: TextStyle(fontSize: 14, color: Color(0xFF141414))),
              ],
            ),
          ),
          PopupMenuItem(
            height: 44,
            padding: EdgeInsets.all(16),
            value: '/logout',
            child: Row(
              children: [
                Padding(
                  padding: EdgeInsets.only(right: 8),
                  child: Icon(Icons.logout, color: Colors.red, size: 24),
                ),
                Text("Logout", style: TextStyle(fontSize: 14, color: Colors.red)),
              ],
            ),
          ),
        ];
      },
    ),
  ],
  onItemTap: (conversation) {
    User? user;
    Group? group;
    if (conversation.conversationWith is User) {
      user = conversation.conversationWith as User;
    } else {
      group = conversation.conversationWith as Group;
    }
    // Navigate to messages
  },
)

CometChatConversations(
  conversationsStyle: CometChatConversationsStyle(
    backgroundColor: Colors.white,
    titleTextColor: Color(0xFF141414),
    avatarStyle: CometChatAvatarStyle(
      borderRadius: BorderRadius.circular(8),
      backgroundColor: Color(0xFFFBAA75),
    ),
    badgeStyle: CometChatBadgeStyle(
      backgroundColor: Color(0xFFF76808),
    ),
  ),
)

import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

CometChatConversations(
  emptyStateView: (context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("No conversations yet"),
          SizedBox(height: 16),
          ElevatedButton(
            onPressed: () {
              // Navigate to contacts
            },
            child: Text("Start a conversation"),
          ),
        ],
      ),
    );
  },
)

import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

CometChatConversations(
  receiptsVisibility: false,
  usersStatusVisibility: false,
  groupTypeVisibility: false,
  deleteConversationOptionVisibility: false,
  hideAppbar: true,
)

import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

CometChatConversations(
  hideSearch: false,
  onSearchTap: () {
    // Handle search tap - navigate to search screen
  },
)

import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:intl/intl.dart';

CometChatConversations(
  datePattern: (conversation) {
    final date = conversation.lastMessage?.sentAt ?? DateTime.now();
    return DateFormat('d MMM, hh:mm a').format(date);
  },
)

import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

CometChatConversations(
  textFormatters: [
    CometChatMentionsFormatter(
      style: CometChatMentionsStyle(
        mentionSelfTextBackgroundColor: Color(0xFFF76808),
        mentionTextBackgroundColor: Colors.white,
        mentionTextColor: Colors.black,
        mentionSelfTextColor: Colors.white,
      ),
    ),
  ],
)