| 110 | |
| 111 | let messageId = 0; |
| 112 | function appendMessage(message, sender, appendAfter) { |
| 113 | const messageDiv = document.createElement('div'); |
| 114 | messageDiv.classList = `message ${sender}`; |
| 115 | messageDiv.innerHTML = message; |
| 116 | messageDiv.dataset.messageId = messageId++; |
| 117 | |
| 118 | const messageArea = document.getElementById('message-area'); |
| 119 | if (appendAfter == null) { |
| 120 | messageArea.appendChild(messageDiv); |
| 121 | } else { |
| 122 | const inputMsg = |
| 123 | document.querySelector(`.message[data-message-id="${appendAfter}"]`); |
| 124 | inputMsg.parentNode.insertBefore(messageDiv, inputMsg.nextElementSibling); |
| 125 | } |
| 126 | |
| 127 | // Scroll the message area to the bottom. |
| 128 | messageArea.scroll({top: messageArea.scrollHeight, behavior: 'smooth'}); |
| 129 | |
| 130 | // Return this message id so that a reply can be posted to it later |
| 131 | return messageDiv.dataset.messageId; |
| 132 | } |
| 133 | |
| 134 | function setupListeners() { |
| 135 | const form = document.getElementById('textentry'); |