diff --git a/public/widget.js b/public/widget.js
index 17c6f56..2af4f25 100644
--- a/public/widget.js
+++ b/public/widget.js
@@ -52,7 +52,7 @@
Pridat fotku nebo pretahnout
- Odeslanim zpravy nam predavate udaje potrebne pro odpoved.
+
Powered by MaalFlows
@@ -61,7 +61,7 @@
const panel = root.querySelector(".mf-panel");
const launcher = root.querySelector(".mf-launcher");
const close = root.querySelector(".mf-close");
- const soundButton = createSoundButton(root, close);
+ const { soundButton, infoButton } = createHeaderActions(root, close);
const form = root.querySelector(".mf-form");
const messages = root.querySelector(".mf-messages");
const typing = root.querySelector(".mf-typing");
@@ -80,6 +80,9 @@
saveSession();
renderSoundState(soundButton);
});
+ infoButton.addEventListener("click", () => {
+ root.querySelector(".mf-gdpr").hidden = !root.querySelector(".mf-gdpr").hidden;
+ });
form.message.addEventListener("input", debounce(() => {
if (!session.conversationId) return;
@@ -193,7 +196,7 @@
});
}
- function createSoundButton(root, closeButton) {
+ function createHeaderActions(root, closeButton) {
const actions = document.createElement("div");
actions.className = "mf-header-actions";
const soundButton = document.createElement("button");
@@ -207,12 +210,23 @@
`;
+ const infoButton = document.createElement("button");
+ infoButton.className = "mf-info";
+ infoButton.type = "button";
+ infoButton.setAttribute("aria-label", "GDPR informace");
+ infoButton.title = "GDPR informace";
+ infoButton.innerHTML = ``;
closeButton.innerHTML = ``;
closeButton.setAttribute("aria-label", "Zmensit chat");
closeButton.title = "Zmensit chat";
closeButton.before(actions);
- actions.append(soundButton, closeButton);
- return soundButton;
+ actions.append(soundButton, infoButton, closeButton);
+ const gdpr = document.createElement("p");
+ gdpr.className = "mf-gdpr";
+ gdpr.hidden = true;
+ gdpr.textContent = "Odeslanim zpravy nam predavate udaje potrebne pro odpoved. Historii chatu uchovavame pro zakaznickou podporu.";
+ root.querySelector(".mf-form").prepend(gdpr);
+ return { soundButton, infoButton };
}
function renderSoundState(button) {
@@ -316,10 +330,12 @@
function showFormError(root, message) {
const note = root.querySelector(".mf-note");
note.textContent = message;
+ note.hidden = false;
note.classList.add("error");
clearTimeout(showFormError.timer);
showFormError.timer = setTimeout(() => {
- note.textContent = "Odeslanim zpravy nam predavate udaje potrebne pro odpoved.";
+ note.textContent = "";
+ note.hidden = true;
note.classList.remove("error");
}, 3500);
}
@@ -363,12 +379,12 @@
background: ${c.surface}; border: 1px solid #dfe6e2; border-radius: 8px; overflow: hidden; box-shadow: 0 18px 50px rgb(0 0 0 / 18%);
}
.mf-panel.open { display: grid; grid-template-rows: auto minmax(130px, 1fr) auto auto; }
- header { position: relative; display: grid; gap: 3px; background: ${c.brand}; color: ${c.brandText}; padding: 15px 86px 15px 16px; }
+ header { position: relative; display: grid; gap: 3px; background: ${c.brand}; color: ${c.brandText}; padding: 15px 122px 15px 16px; }
header strong { font-size: 16px; }
header small { opacity: .92; font-size: 13px; line-height: 1.35; }
.mf-header-actions { position: absolute; top: 9px; right: 9px; display: flex; gap: 6px; }
- .mf-close, .mf-sound { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: rgb(255 255 255 / 16%); color: ${c.brandText}; cursor: pointer; padding: 0; }
- .mf-close svg, .mf-sound svg { width: 19px; height: 19px; fill: currentColor; }
+ .mf-close, .mf-sound, .mf-info { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: rgb(255 255 255 / 16%); color: ${c.brandText}; cursor: pointer; padding: 0; }
+ .mf-close svg, .mf-sound svg, .mf-info svg { width: 19px; height: 19px; fill: currentColor; }
.mf-sound .mf-sound-off { display: none; }
.mf-sound.muted .mf-sound-on { display: none; }
.mf-sound.muted .mf-sound-off { display: block; }
@@ -388,7 +404,7 @@
.mf-send { width: 48px; min-height: 72px; height: 100%; display: grid; place-items: center; border: 0; border-radius: 6px; background: ${c.brand}; color: ${c.brandText}; cursor: pointer; }
.mf-send:disabled { opacity: .55; cursor: wait; }
.mf-send svg { width: 22px; height: 22px; fill: currentColor; transform: translateX(1px); }
- .mf-dropzone { min-height: 42px; border: 1px dashed #b9c9c1; border-radius: 8px; display: flex; align-items: center; gap: 8px; padding: 9px 10px; color: ${c.muted}; background: #f8fbf9; font-size: 12px; cursor: pointer; }
+ .mf-dropzone { min-height: 64px; border: 1px dashed #b9c9c1; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 12px; color: ${c.muted}; background: #f8fbf9; font-size: 12px; cursor: pointer; text-align: center; }
.mf-dropzone.dragging { border-color: ${c.brand}; background: #eef8f4; color: ${c.text}; }
.mf-dropzone input { display: none; }
.mf-dropzone svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
@@ -398,6 +414,7 @@
.mf-attachment-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #e8eee9; color: ${c.text}; cursor: pointer; padding: 0; }
.mf-note { margin: 0; color: ${c.muted}; font-size: 11px; line-height: 1.3; }
.mf-note.error { color: #b42318; }
+ .mf-gdpr { margin: 0; padding: 9px 10px; border: 1px solid #dfe6e2; border-radius: 8px; background: #f8fbf9; color: ${c.muted}; font-size: 11px; line-height: 1.35; }
.mf-powered { justify-self: center; color: ${c.muted}; font-size: 11px; text-decoration: none; }
.mf-powered:hover { color: ${c.brand}; text-decoration: underline; }
@keyframes mfPulse {