rajch_ales/MaalFlows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show operator name groups in widget

Browse Source
This commit is contained in:
rajchales-monito
2026-07-24 10:44:12 +02:00
parent e1d63db62f
commit 69fa9075ab
3 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/widget.js
+12 -2
View File
@@ -252,13 +252,22 @@
function renderConversation(messages, data) {
messages.innerHTML = "";
let lastAdminName = null;
for (const message of data.messages) {
addMessage(messages, message.senderType, message.body, message.attachments || []);
addMessage(messages, message.senderType, message.senderName, message.body, message.attachments || [], lastAdminName);
if (message.senderType === "admin") lastAdminName = message.senderName || "Operator";
else lastAdminName = null;
}
messages.scrollTop = messages.scrollHeight;
}
function addMessage(messages, sender, body, attachments) {
function addMessage(messages, sender, senderName, body, attachments, lastAdminName) {
if (sender === "admin" && (senderName || "Operator") !== lastAdminName) {
const label = document.createElement("div");
label.className = "mf-operator-label";
label.textContent = `${senderName || "Operator"} odpovida`;
messages.append(label);
}
const item = document.createElement("article");
item.className = `mf-message ${sender}`;
item.innerHTML = `${body ? `<p>${escapeHtml(body)}</p>` : ""}${attachments.map((a) => `<a class="mf-photo" href="${apiBase}${a.url}" target="_blank" rel="noreferrer"><img src="${apiBase}${a.url}" alt="${escapeHtml(a.name)}"></a>`).join("")}`;
@@ -367,6 +376,7 @@
.mf-message { max-width: 86%; padding: 9px 11px; border-radius: 8px; background: #f1f5f2; color: ${c.text}; }
.mf-message.admin { align-self: flex-start; background: #eef7f4; }
.mf-message.visitor { align-self: flex-end; background: ${c.brand}; color: ${c.brandText}; }
.mf-operator-label { align-self: flex-start; margin: 4px 0 -4px; color: ${c.muted}; font-size: 12px; font-weight: 700; }
.mf-message p { margin: 0; white-space: pre-wrap; }
.mf-message a { color: inherit; display: inline-block; margin-top: 6px; }
.mf-photo img { display: block; width: min(180px, 100%); max-height: 130px; object-fit: cover; border-radius: 6px; }