52 lines
1.7 KiB
JavaScript
52 lines
1.7 KiB
JavaScript
import {showToast} from "./toast.js";
|
|
|
|
export const sendMessage = async (element, event) => {
|
|
event.preventDefault();
|
|
const messageInput = element.querySelector('[name="message"]');
|
|
const message = messageInput.value;
|
|
if (!message) return;
|
|
|
|
const recipentId = element.dataset.recipientId;
|
|
messageInput.value = '';
|
|
|
|
// Capture the ID of the UI element we just added
|
|
const tempMessageId = addMessageToChat({message: message}, true);
|
|
|
|
try {
|
|
await axios.post(`/api/chat/${recipentId}/message`, {message: message});
|
|
} catch (e) {
|
|
console.error(e);
|
|
showToast('Message could not be sent.');
|
|
|
|
const failedMessage = document.getElementById(tempMessageId);
|
|
if (failedMessage) {
|
|
failedMessage.remove();
|
|
}
|
|
|
|
messageInput.value = message;
|
|
}
|
|
}
|
|
|
|
export const addMessageToChat = (message, right = false) => {
|
|
const chatContainer = document.getElementById('chat-container');
|
|
if (!chatContainer) return;
|
|
|
|
const tempId = 'msg-' + Date.now();
|
|
|
|
const placeholder = chatContainer.querySelector('#no-messages-placeholder');
|
|
if (placeholder) placeholder.remove();
|
|
|
|
const messagePlaceholder = `
|
|
<div id="${tempId}" class="grid px-4 my-1 w-full ${right ? 'place-items-end' : 'place-items-start'}">
|
|
<div class="max-w-[40vw] py-2 px-4 rounded-full ${right ? 'rounded-br-none' : 'rounded-tl-none'} bg-gray-200">
|
|
${message.message}
|
|
</div>
|
|
</div>`;
|
|
|
|
chatContainer.insertAdjacentHTML('afterbegin', messagePlaceholder);
|
|
chatContainer.scrollTop = 0;
|
|
|
|
// Return the ID so the caller can find this specific message later
|
|
return tempId;
|
|
}
|