https://nstatus.org/noice/js/text-chat.js

1export default class TextChat {
2
3    onMessageSent = null;
4
5    constructor() {
6        this.messagesElement = document.getElementById('messages');
7        this.messageInput = document.getElementById('message-input');
8        this.sendButton = document.getElementById('send-button');
9
10        this.sendButton.addEventListener('click', () => {
11            const messageText = this.messageInput.value.trim();
12            if (messageText) {
13                if (this.onMessageSent != null) {
14                    this.onMessageSent(messageText);
15                }
16                this.addMessage(messageText, 'Sent');
17                this.messageInput.value = ''; // Clear input field after sending
18            }
19        });
20
21        this.messageInput.addEventListener('keydown', (event) => {
22            if (event.key === 'Enter') {
23                this.sendButton.click(); // Simulate a click on the send button
24            }
25        });
26    }
27
28    addMessage(text, isSent = false) {
29        const messageElement = document.createElement('div');
30        messageElement.classList.add('message', isSent ? 'sent' : 'received');
31        messageElement.textContent = text;
32
33        this.messagesElement.appendChild(messageElement);
34
35        // Animate message entry (optional)
36        messageElement.style.transform = 'translateY(20px)';
37        messageElement.style.transition = 'transform 0.2s ease-in-out';
38        setTimeout(() => {
39            messageElement.style.transform = 'translateY(0)';
40        }, 0);
41    }
42}