${escapeHtml(copy.title)}
${escapeHtml(site.isOnline ? copy.intro : copy.offlineIntro)}
Operator pise...
`;
const panel = root.querySelector(".mf-panel");
const launcher = root.querySelector(".mf-launcher");
const close = root.querySelector(".mf-close");
const form = root.querySelector(".mf-form");
const messages = root.querySelector(".mf-messages");
const typing = root.querySelector(".mf-typing");
const dropzone = root.querySelector(".mf-dropzone");
const attachmentList = root.querySelector(".mf-attachment-list");
let selectedFiles = [];
launcher.addEventListener("click", () => panel.classList.toggle("open"));
close.addEventListener("click", () => panel.classList.remove("open"));
form.message.addEventListener("input", debounce(() => {
if (!session.conversationId) return;
fetch(`${apiBase}/api/widget/conversations/${session.conversationId}/typing`, { method: "POST" }).catch(() => {});
}, 700));
form.attachments.addEventListener("change", () => {
selectedFiles = mergeImageFiles(selectedFiles, [...form.attachments.files]);
renderSelectedFiles(attachmentList, selectedFiles);
form.attachments.value = "";
});
dropzone.addEventListener("keydown", (event) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
form.attachments.click();
}
});
for (const eventName of ["dragenter", "dragover"]) {
dropzone.addEventListener(eventName, (event) => {
event.preventDefault();
dropzone.classList.add("dragging");
});
}
for (const eventName of ["dragleave", "drop"]) {
dropzone.addEventListener(eventName, (event) => {
event.preventDefault();
dropzone.classList.remove("dragging");
});
}
dropzone.addEventListener("drop", (event) => {
selectedFiles = mergeImageFiles(selectedFiles, [...event.dataTransfer.files]);
renderSelectedFiles(attachmentList, selectedFiles);
});
attachmentList.addEventListener("click", (event) => {
const removeButton = event.target.closest("[data-remove]");
if (!removeButton) return;
selectedFiles.splice(Number(removeButton.dataset.remove), 1);
renderSelectedFiles(attachmentList, selectedFiles);
});
form.addEventListener("submit", async (event) => {
event.preventDefault();
const body = await payloadFromForm(form, selectedFiles);
if (!body.message.trim()) return;
const submitButton = root.querySelector(".mf-send");
submitButton.disabled = true;
const url = session.conversationId
? `${apiBase}/api/widget/conversations/${session.conversationId}/messages`
: `${apiBase}/api/widget/conversations`;
try {
const data = await postJson(url, withVisitorContext(body));
session.conversationId = data.conversation.id;
saveSession();
form.message.value = "";
selectedFiles = [];
renderSelectedFiles(attachmentList, selectedFiles);
renderConversation(messages, data);
connectEvents(messages, typing);
} catch {
showFormError(root, "Zpravu se nepodarilo odeslat. Zkuste to prosim znovu.");
} finally {
submitButton.disabled = false;
}
});
rememberPage();
if (session.conversationId) {
loadExistingConversation(messages).finally(() => connectEvents(messages, typing));
}
}
async function payloadFromForm(form, selectedFiles) {
const fd = new FormData(form);
return {
message: fd.get("message") || "",
attachments: await Promise.all(selectedFiles.slice(0, 3).map(fileToPayload))
};
}
function connectEvents(messages, typing) {
if (session.events || !session.conversationId) return;
session.events = new EventSource(`${apiBase}/api/widget/conversations/${session.conversationId}/events`);
session.events.addEventListener("message", (event) => {
const data = JSON.parse(event.data);
if (data.type === "typing" && data.actor === "admin") {
typing.hidden = false;
clearTimeout(connectEvents.typingTimer);
connectEvents.typingTimer = setTimeout(() => { typing.hidden = true; }, 1800);
}
if (data.type === "message:new") renderConversation(messages, data.payload);
});
}
async function loadExistingConversation(messages) {
try {
const data = await fetchJson(`${apiBase}/api/widget/conversations/${session.conversationId}?visitorToken=${encodeURIComponent(session.visitorToken)}`);
renderConversation(messages, data);
} catch {
session.conversationId = null;
saveSession();
}
}
function renderConversation(messages, data) {
messages.innerHTML = "";
for (const message of data.messages) {
addMessage(messages, message.senderType, message.body, message.attachments || []);
}
messages.scrollTop = messages.scrollHeight;
}
function addMessage(messages, sender, body, attachments) {
const item = document.createElement("article");
item.className = `mf-message ${sender}`;
item.innerHTML = `