Select a channel or conversation to start chatting.
';
return;
}
const messages = db.messages.filter(m => m.channelId === activeChannelId);
let html = '';
messages.forEach(msg => {
const user = db.users.find(u => u.id === msg.userId);
const isCurrentUser = user.id === currentUser.id;
html += `
${!isCurrentUser ? `
${user.name}
` : ''}
${msg.text}
${msg.timestamp}
`;
});
chatMessages.innerHTML = html;
chatMessages.scrollTop = chatMessages.scrollHeight; // Auto-scroll to bottom
};
/**
* Handles switching the active chat channel.
* @param {string} id - The ID of the channel or DM to switch to.
*/
const switchChannel = (id) => {
activeChannelId = id;
const channel = [...db.channels, ...db.directMessages].find(c => c.id === id);
chatTitle.textContent = channel.name;
messageInput.disabled = false;
sendBtn.disabled = false;
messageInput.placeholder = `Message ${channel.name}`;
downloadPdfBtn.classList.remove('hidden');
renderSidebar();
renderChat();
};
/**
* Handles sending a new message.
*/
const sendMessage = () => {
const text = messageInput.value.trim();
if (text && activeChannelId) {
const newMessage = {
channelId: activeChannelId,
userId: currentUser.id,
text: text,
timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
};
db.messages.push(newMessage);
messageInput.value = '';
renderChat();
}
};
/**
* Generates and downloads a PDF of the current chat.
*/
const generatePdf = () => {
if (!activeChannelId) return;
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const channel = [...db.channels, ...db.directMessages].find(c => c.id === activeChannelId);
const messages = db.messages.filter(m => m.channelId === activeChannelId);
doc.setFontSize(18);
doc.text(`Chat History: ${channel.name}`, 14, 22);
doc.setFontSize(11);
doc.setTextColor(100);
doc.text(`Exported on: ${new Date().toLocaleDateString()}`, 14, 30);
const body = messages.map(msg => {
const user = db.users.find(u => u.id === msg.userId);
return [user.name, msg.text, msg.timestamp];
});
doc.autoTable({
head: [['Sender', 'Message', 'Time']],
body: body,
startY: 40,
theme: 'grid',
headStyles: { fillColor: [243, 244, 246], textColor: [55, 65, 81], fontStyle: 'bold' },
styles: { cellPadding: 2.5, fontSize: 9, cellWidth: 'wrap' },
columnStyles: {
1: { cellWidth: 100 } // Wider column for the message text
}
});
doc.save(`Chat_History_${channel.name.replace(/#\s/g, '')}.pdf`);
};
// --- Event Listeners ---
const addSidebarListeners = () => {
document.querySelectorAll('.sidebar-item').forEach(item => {
item.addEventListener('click', () => switchChannel(item.dataset.id));
});
};
messageForm.addEventListener('submit', (e) => {
e.preventDefault();
sendMessage();
});
// Allow sending with Enter key, new line with Shift+Enter
messageInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
downloadPdfBtn.addEventListener('click', generatePdf);
// --- Initial Setup ---
renderSidebar();
renderChat();
});
