35 lines
1.1 KiB
JavaScript
35 lines
1.1 KiB
JavaScript
export const sendMessage = async (element, event) => {
|
|
event.preventDefault()
|
|
const messageInput = element.querySelector('[name="message"]');
|
|
if (!messageInput.value) return;
|
|
|
|
const recipentId = element.dataset.recipientId;
|
|
const message = messageInput.value;
|
|
messageInput.value = '';
|
|
|
|
addMessageToChat({message: message}, true);
|
|
|
|
const response = await axios.post(`/api/chat/${recipentId}/message`, {message: message});
|
|
}
|
|
|
|
export const addMessageToChat = (message, right = false) => {
|
|
const chatContainer = document.getElementById('chat-container');
|
|
if (!chatContainer) return;
|
|
|
|
const placeholder = chatContainer.querySelector('#no-messages-placeholder');
|
|
if (placeholder) {
|
|
placeholder.remove();
|
|
}
|
|
|
|
const messagePlaceholder = `
|
|
<div 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-2xl bg-gray-200">
|
|
${message.message}
|
|
</div>
|
|
</div>`;
|
|
|
|
chatContainer.insertAdjacentHTML('afterbegin', messagePlaceholder);
|
|
|
|
chatContainer.scrollTop = 0;
|
|
}
|