Group Chat

Create New Group

Add Users to Group

Group Chat Messages

body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } .container { max-width: 800px; margin: 20px auto; background-color: #fff; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1, h2 { text-align: center; } .create-group, .add-users, .group-chat { margin-bottom: 20px; } input[type="text"], button { margin-bottom: 10px; padding: 8px; font-size: 16px; } button { background-color: #4CAF50; color: white; border: none; cursor: pointer; } button:hover { background-color: #45a049; } .chat-messages { border: 1px solid #ccc; padding: 10px; max-height: 300px; overflow-y: auto; } .chat-messages div { margin-bottom: 10px; } .chat-messages .message { padding: 8px; background-color: #f9f9f9; border-radius: 5px; border: 1px solid #ddd; } .chat-messages .message.right { background-color: #d9edf7; border-color: #bce8f1; text-align: right; } .chat-messages .message.left { background-color: #dff0d8; border-color: #d6e9c6; text-align: left; } .chat-messages .message .user { font-weight: bold; margin-bottom: 5px; } .chat-messages .message .text { font-size: 14px; color: #333; } // Example functions (replace with actual AJAX functions) // Function to create a new group function createGroup() { var groupName = document.getElementById('groupName').value; console.log('Creating group:', groupName); // Implement AJAX call to create group } // Function to add users to an existing group function addUsersToGroup() { var groupId = document.getElementById('groupId').value; var userIds = document.getElementById('userIds').value.split(',').map(function(item) { return parseInt(item.trim(), 10); }); console.log('Adding users to group:', groupId, userIds); // Implement AJAX call to add users to group } // Function to retrieve and display group chat messages function getGroupChatMessages() { var groupId = document.getElementById('groupId').value; // Get group ID from input console.log('Loading group chat messages for group ID:', groupId); // Implement AJAX call to retrieve group chat messages // Update the DOM to display messages dynamically var chatMessages = document.getElementById('chatMessages'); chatMessages.innerHTML = ''; // Clear previous messages // Example of appending messages (replace with actual logic) var messageDiv = document.createElement('div'); messageDiv.className = 'message'; messageDiv.innerHTML = '
User1
Hello, this is a message!
'; chatMessages.appendChild(messageDiv); }