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

Show operator presence in admin chats

Browse Source
This commit is contained in:
rajchales-monito
2026-07-30 12:10:53 +02:00
parent ce560dcf4f
commit 9a0f7dd224
3 changed files with 151 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+13
View File
@@ -686,6 +686,19 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.conversation-header p { margin: 0; color: var(--muted); font-size: 13px; }
.conversation-header select { width: 150px; align-self: start; }
.visitor-head { width: 100%; min-width: 0; display: grid; gap: 7px; }
.visitor-summary-row .operator-presence {
max-width: 240px;
border-color: #dfe9e4;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
}
.visitor-summary-row .operator-presence.hidden { display: none; }
.visitor-summary-row .operator-presence.typing {
border-color: #f7d8a8;
background: #fff8ed;
color: #8a5a00;
}
.visitor-summary-row {
display: flex;
align-items: center;
public/admin.js
+79 -2
View File
@@ -20,7 +20,11 @@ const state = {
originalTitle: document.title,
originalFavicon: document.querySelector("link[rel='icon']")?.href || "/favicon.svg",
aiModels: [],
adminUsers: []
adminUsers: [],
me: null,
operatorPresence: {},
operatorTyping: {},
operatorPresenceTimer: null
};
const $ = (selector) => document.querySelector(selector);
@@ -39,7 +43,10 @@ renderAdminSoundControls();
async function boot() {
const me = await api("/api/admin/me").catch(() => null);
if (me?.user) showApp();
if (me?.user) {
state.me = me.user;
showApp();
}
else showLogin();
}
@@ -368,6 +375,10 @@ $("#conversationHeader").addEventListener("click", async (event) => {
async function showApp() {
$("#loginView").classList.add("hidden");
$("#appView").classList.remove("hidden");
if (!state.me) {
const me = await api("/api/admin/me").catch(() => null);
state.me = me?.user || null;
}
await loadBootstrap();
await loadAiModels().catch(() => {});
await loadAdminUsers().catch(() => {});
@@ -408,14 +419,39 @@ async function openConversation(id) {
state.activeId = id;
const data = await api(`/api/admin/conversations/${id}`);
state.active = data;
state.operatorPresence[id] = data.operators || [];
const index = state.conversations.findIndex((item) => item.id === id);
if (index >= 0) state.conversations[index] = { ...state.conversations[index], ...data.conversation };
syncConversationVisitors();
renderConversations();
renderActive();
startOperatorPresence(id);
syncAttentionWithUnread();
}
function startOperatorPresence(id) {
stopOperatorPresence();
sendOperatorPresence(id);
state.operatorPresenceTimer = setInterval(() => {
if (state.activeId) sendOperatorPresence(state.activeId);
}, 15_000);
}
function stopOperatorPresence() {
if (!state.operatorPresenceTimer) return;
clearInterval(state.operatorPresenceTimer);
state.operatorPresenceTimer = null;
}
function sendOperatorPresence(id) {
api(`/api/admin/conversations/${id}/presence`, { method: "POST" })
.then((data) => {
state.operatorPresence[id] = data.operators || [];
if (id === state.activeId) renderOperatorPresence();
})
.catch(() => {});
}
function connectEvents() {
if (state.events) state.events.close();
state.events = new EventSource("/api/admin/events");
@@ -423,6 +459,12 @@ function connectEvents() {
const data = JSON.parse(event.data);
if (data.type === "typing" && data.actor === "visitor" && data.conversationId !== state.activeId) return;
if (data.type === "typing" && data.actor === "visitor") return flashTyping();
if (data.type === "typing" && data.actor === "admin") return flashOperatorTyping(data);
if (data.type === "operator:presence") {
state.operatorPresence[data.conversationId] = data.operators || [];
if (data.conversationId === state.activeId) renderOperatorPresence();
return;
}
if (data.type === "site:update") {
state.site = data.site;
renderSite();
@@ -1046,6 +1088,7 @@ function renderActive() {
<span title="Navstivene stranky">${Number(conversation.pageCount || 0)} str.</span>
<span title="Pocet chatu">${Number(conversation.visitorConversationCount || 1)}x chat</span>
${visitorDetails(conversation)}
<span id="operatorPresence" class="operator-presence hidden"></span>
</div>
</div>
`;
@@ -1058,9 +1101,42 @@ function renderActive() {
</article>
`).join("") + adminReadReceipt(conversation, messages);
decorateTranslationMeta(messages);
renderOperatorPresence();
$("#messages").scrollTop = $("#messages").scrollHeight;
}
function renderOperatorPresence() {
const box = $("#operatorPresence");
if (!box || !state.activeId) return;
const operators = (state.operatorPresence[state.activeId] || [])
.filter((operator) => operator.username !== state.me?.username);
const typing = state.operatorTyping[state.activeId];
const parts = [];
if (operators.length) {
parts.push(`V chatu: ${operators.map((operator) => operator.name).join(", ")}`);
}
if (typing && typing.username !== state.me?.username) {
parts.push(`${typing.name} pise...`);
}
box.textContent = parts.join(" · ");
box.classList.toggle("hidden", !parts.length);
box.classList.toggle("typing", Boolean(typing && typing.username !== state.me?.username));
}
function flashOperatorTyping(data) {
if (data.conversationId !== state.activeId || data.username === state.me?.username) return;
state.operatorTyping[data.conversationId] = {
username: data.username,
name: data.name || "Operator"
};
renderOperatorPresence();
clearTimeout(flashOperatorTyping.timer);
flashOperatorTyping.timer = setTimeout(() => {
delete state.operatorTyping[data.conversationId];
renderOperatorPresence();
}, 2200);
}
function decorateTranslationMeta(messages) {
document.querySelectorAll("#messages .message .by").forEach((element, index) => {
const meta = translationMeta(messages[index]);
@@ -1242,6 +1318,7 @@ async function deleteConversation(id) {
}
function clearActiveConversation() {
stopOperatorPresence();
state.activeId = null;
state.active = null;
$("#conversationHeader").innerHTML = `
server.js
+59 -1
View File
@@ -43,6 +43,7 @@ initDb();
seedDefaults();
const streams = new Map();
const operatorPresence = new Map();
const server = http.createServer(async (req, res) => {
try {
@@ -112,6 +113,7 @@ async function adminApi(req, res, url) {
if (url.pathname.match(/^\/api\/admin\/conversations\/[^/]+\/messages$/) && req.method === "POST") return createAdminMessage(req, res, url);
if (url.pathname.match(/^\/api\/admin\/conversations\/[^/]+\/status$/) && req.method === "PATCH") return updateConversationStatus(req, res, url);
if (url.pathname.match(/^\/api\/admin\/conversations\/[^/]+\/typing$/) && req.method === "POST") return adminTyping(req, res, url);
if (url.pathname.match(/^\/api\/admin\/conversations\/[^/]+\/presence$/) && req.method === "POST") return adminPresence(req, res, url);
return json(res, 404, { error: "not_found" });
}
@@ -967,10 +969,65 @@ async function visitorTyping(req, res, url) {
async function adminTyping(req, res, url) {
const conversation = findConversation(publicIdFrom(url));
if (!conversation) return json(res, 404, { error: "conversation_not_found" });
publishConversation(conversation, { type: "typing", actor: "admin", conversationId: conversation.public_id });
touchOperatorPresence(conversation.public_id, req.adminUser);
publishConversation(conversation, {
type: "typing",
actor: "admin",
conversationId: conversation.public_id,
username: req.adminUser.username,
name: operatorDisplayName(req.adminUser)
});
publish("admin", {
type: "operator:presence",
conversationId: conversation.public_id,
operators: currentOperatorPresence(conversation.public_id)
});
return json(res, 200, { ok: true });
}
async function adminPresence(req, res, url) {
const conversation = findConversation(publicIdFrom(url));
if (!conversation) return json(res, 404, { error: "conversation_not_found" });
touchOperatorPresence(conversation.public_id, req.adminUser);
const operators = currentOperatorPresence(conversation.public_id);
publish("admin", { type: "operator:presence", conversationId: conversation.public_id, operators });
return json(res, 200, { ok: true, operators });
}
function touchOperatorPresence(conversationId, adminUser) {
cleanupOperatorPresence();
const username = adminUser.username || "operator";
operatorPresence.set(`${conversationId}:${username}`, {
conversationId,
username,
name: operatorDisplayName(adminUser),
lastSeenAt: Date.now()
});
}
function operatorDisplayName(adminUser = {}) {
return adminUser.chatNick || adminUser.displayName || adminUser.username || "Operator";
}
function currentOperatorPresence(conversationId) {
cleanupOperatorPresence();
return [...operatorPresence.values()]
.filter((item) => item.conversationId === conversationId)
.sort((a, b) => a.name.localeCompare(b.name))
.map((item) => ({
username: item.username,
name: item.name,
lastSeenAt: new Date(item.lastSeenAt).toISOString()
}));
}
function cleanupOperatorPresence() {
const now = Date.now();
for (const [key, item] of operatorPresence.entries()) {
if (now - item.lastSeenAt > 45_000) operatorPresence.delete(key);
}
}
function eventStream(req, res, url, channel) {
const key = channel === "admin" ? "admin" : `conversation:${publicIdFrom(url)}`;
res.writeHead(200, {
@@ -1731,6 +1788,7 @@ function conversationDetails(conversation) {
const attachments = db.prepare("SELECT * FROM attachments WHERE conversation_id = ? ORDER BY id ASC").all(conversation.id);
return {
conversation: formatConversationSummary(conversation),
operators: currentOperatorPresence(conversation.public_id),
messages: messages.map((message) => ({
id: message.id,
senderType: message.sender_type,