Add visitor read receipts

public/admin.css

@@ -501,6 +501,13 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 .message .by { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
 .message p { margin: 0; white-space: pre-wrap; }
 .message a { color: var(--brand); display: inline-block; margin-top: 6px; }
+.read-receipt {
+  align-self: flex-end;
+  margin-top: -4px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.read-receipt.seen { color: var(--brand); }
 .attachments {
   display: flex;
   flex-wrap: wrap;

public/admin.js

@@ -435,10 +435,19 @@ function renderActive() {
       ${message.body ? `<p>${escapeHtml(message.body)}</p>` : ""}
       ${renderAttachments(message.attachments)}
     </article>
-  `).join("");
+  `).join("") + adminReadReceipt(conversation, messages);
   $("#messages").scrollTop = $("#messages").scrollHeight;
 }
 
+function adminReadReceipt(conversation, messages) {
+  const lastAdminMessage = [...messages].reverse().find((message) => message.senderType === "admin");
+  if (!lastAdminMessage) return "";
+  const seenAt = conversation.visitorSeenAt;
+  const isSeen = Boolean(seenAt && String(seenAt) >= String(lastAdminMessage.createdAt));
+  const text = isSeen ? `Precteno zakaznikem ${formatTime(seenAt)}` : "Zatim neprecteno";
+  return `<div class="read-receipt ${isSeen ? "seen" : "unseen"}">${escapeHtml(text)}</div>`;
+}
+
 function filteredConversations() {
   if (state.statusFilter === "all") return state.conversations;
   if (state.statusFilter === "active") return state.conversations.filter((item) => item.status === "new" || item.status === "open");
@@ -641,6 +650,14 @@ function formatVisitedAt(value) {
   return date.toLocaleTimeString("cs-CZ", { hour: "2-digit", minute: "2-digit" });
 }
 
+function formatTime(value) {
+  const text = String(value || "");
+  const normalized = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(text) ? `${text.replace(" ", "T")}Z` : text;
+  const date = new Date(normalized);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleTimeString("cs-CZ", { hour: "2-digit", minute: "2-digit" });
+}
+
 function deviceLabel(device = {}, language, timezone) {
   return [device.platform, device.viewport, language, timezone].filter(Boolean).join(" | ");
 }

public/widget.js

@@ -76,6 +76,7 @@
       if (panel.classList.contains("open")) {
         launcher.classList.remove("mf-notify");
         scrollMessagesToBottom(messages);
+        markConversationSeen();
       }
     });
     close.addEventListener("click", () => panel.classList.remove("open"));
@@ -175,7 +176,7 @@
       }
     });
     if (session.conversationId) {
-      loadExistingConversation(messages).finally(() => connectEvents(messages, typing, panel, launcher, settings));
+      loadExistingConversation(messages, panel).finally(() => connectEvents(messages, typing, panel, launcher, settings));
     }
   }
 
@@ -199,6 +200,7 @@
       }
       if (data.type === "message:new") {
         renderConversation(messages, data.payload);
+        if (panel.classList.contains("open")) markConversationSeen();
         const eventMessages = data.payload?.messages || [];
         const lastMessage = eventMessages[eventMessages.length - 1];
         if (settings.notifications?.pulseOnAdminReply !== false && lastMessage?.senderType === "admin" && !panel.classList.contains("open")) {
@@ -267,10 +269,11 @@
     setTimeout(() => audio.close().catch(() => {}), 420);
   }
 
-  async function loadExistingConversation(messages) {
+  async function loadExistingConversation(messages, panel) {
     try {
       const data = await fetchJson(`${apiBase}/api/widget/conversations/${session.conversationId}?visitorToken=${encodeURIComponent(session.visitorToken)}`);
       renderConversation(messages, data);
+      if (panel.classList.contains("open")) markConversationSeen();
     } catch {
       session.conversationId = null;
       saveSession();
@@ -288,6 +291,14 @@
     scrollMessagesToBottom(messages);
   }
 
+  function markConversationSeen() {
+    if (!session.conversationId) return;
+    clearTimeout(markConversationSeen.timer);
+    markConversationSeen.timer = setTimeout(() => {
+      postJson(`${apiBase}/api/widget/conversations/${session.conversationId}/seen`, { visitorToken: session.visitorToken }).catch(() => {});
+    }, 250);
+  }
+
   function addMessage(messages, sender, senderName, body, attachments, lastAdminName) {
     if (sender === "admin" && (senderName || "Operator") !== lastAdminName) {
       const label = document.createElement("div");