thandClaude Opus 4.6
0022f64c50
Caret and "chat" label were two hit targets with two hover states and
tooltips. Collapse them into a single <button id="chat-header-nav">
with one tooltip ("back to conversations") — the caret becomes a
visibility-only hint inside the button, shown when there's somewhere
to go back to, hidden on the list itself. The .navigable class
controls whether the button reads as interactive, so clicking the
label while already on the list is a cursor-default no-op.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
823 lines
32 KiB
JavaScript
823 lines
32 KiB
JavaScript
// ── Chat Plugin Frontend ──
|
|
//
|
|
// Footer button + bottom-right flyout. Polls /api/chat/poll on a loop
|
|
// (faster while open, slower while closed). Blinks the footer button
|
|
// when new incoming messages arrive while the flyout is closed.
|
|
//
|
|
// Threads come in two kinds:
|
|
// peer — classic 1:1 with a single relay tenant. Disposable flag per
|
|
// thread drops messages from the relay after delivery.
|
|
// room — named group chat with a member list. Always persistent on
|
|
// the relay so every device / late joiner has full history.
|
|
|
|
const hyprcrd = window.hyprcrd;
|
|
if (!hyprcrd) throw new Error('[chat plugin] window.hyprcrd missing');
|
|
|
|
const $ = (id) => document.getElementById(id);
|
|
|
|
// ── State ─────────────────────────────────────────────────────────
|
|
|
|
let conversations = [];
|
|
// Null = list view. Otherwise: { kind: 'peer'|'room', key, label }.
|
|
let currentThread = null;
|
|
let currentMessages = [];
|
|
let pollHandle = null;
|
|
let pollIntervalMs = 20000;
|
|
let recipientCache = null; // { tenants: [...], self: '...' }
|
|
let initialPollDone = false;
|
|
|
|
// Group creation pick-view state. Reset on every pick-view open.
|
|
let pickMode = 'peer'; // 'peer' or 'group'
|
|
let selectedMembers = new Set();
|
|
|
|
const POLL_OPEN_MS = 8000;
|
|
const POLL_CLOSED_MS = 20000;
|
|
|
|
// ── Helpers ───────────────────────────────────────────────────────
|
|
|
|
function escapeHtml(str) {
|
|
return String(str ?? '')
|
|
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
|
.replace(/"/g, '"').replace(/'/g, ''');
|
|
}
|
|
|
|
function formatChatTime(iso) {
|
|
if (!iso) return '';
|
|
const d = new Date(iso.includes('T') ? iso : iso.replace(' ', 'T') + 'Z');
|
|
if (isNaN(d.getTime())) return '';
|
|
const now = new Date();
|
|
const sameDay = d.toDateString() === now.toDateString();
|
|
if (sameDay) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
const diffDays = (now - d) / 86400000;
|
|
if (diffDays < 7) return d.toLocaleDateString([], { weekday: 'short' });
|
|
return d.toLocaleDateString([], { month: 'short', day: 'numeric' });
|
|
}
|
|
|
|
function isOpen() {
|
|
return !$('chat-flyout')?.classList.contains('hidden');
|
|
}
|
|
|
|
function threadFromItem(item) {
|
|
return { kind: item.kind || 'peer', key: item.key ?? item.peer, label: item.label ?? item.peer };
|
|
}
|
|
|
|
function sameThread(a, b) {
|
|
return a && b && a.kind === b.kind && a.key === b.key;
|
|
}
|
|
|
|
function threadBody(thread) {
|
|
return thread.kind === 'room' ? { room_uid: thread.key } : { peer: thread.key };
|
|
}
|
|
|
|
function threadStorageKey(thread) {
|
|
return `${thread.kind}:${thread.key}`;
|
|
}
|
|
|
|
function parseStorageKey(str) {
|
|
if (!str) return null;
|
|
const i = str.indexOf(':');
|
|
if (i < 0) return { kind: 'peer', key: str, label: str };
|
|
return { kind: str.slice(0, i), key: str.slice(i + 1), label: str.slice(i + 1) };
|
|
}
|
|
|
|
async function getSelfUsername() {
|
|
if (recipientCache?.self) return recipientCache.self;
|
|
const res = await fetch('api/chat/recipients').then(r => r.json()).catch(() => null);
|
|
if (res?.ok) recipientCache = res;
|
|
return recipientCache?.self || '';
|
|
}
|
|
|
|
// ── Footer button ─────────────────────────────────────────────────
|
|
|
|
function injectFooterButton() {
|
|
const footer = document.querySelector('footer');
|
|
if (!footer) return;
|
|
if (document.getElementById('chat-footer-btn')) return;
|
|
|
|
const rightGroup = footer.querySelector('.flex.items-center.gap-2:last-of-type');
|
|
if (!rightGroup) return;
|
|
|
|
const btn = document.createElement('button');
|
|
btn.id = 'chat-footer-btn';
|
|
btn.title = 'chat';
|
|
btn.innerHTML = `
|
|
<i class="ph ph-chats-circle text-sm"></i>
|
|
<span class="chat-footer-label">chat</span>
|
|
<span id="chat-unread-count" class="chat-unread-dot"></span>
|
|
`;
|
|
btn.addEventListener('click', toggleFlyout);
|
|
rightGroup.appendChild(btn);
|
|
}
|
|
|
|
function setUnreadBadge(n) {
|
|
const btn = $('chat-footer-btn');
|
|
if (!btn) return;
|
|
if (n > 0) {
|
|
btn.classList.add('has-unread');
|
|
} else {
|
|
btn.classList.remove('has-unread');
|
|
btn.classList.remove('blinking');
|
|
}
|
|
}
|
|
|
|
function startBlink() {
|
|
if (isOpen()) return;
|
|
$('chat-footer-btn')?.classList.add('blinking');
|
|
}
|
|
|
|
function stopBlink() {
|
|
$('chat-footer-btn')?.classList.remove('blinking');
|
|
}
|
|
|
|
// ── Flyout open / close ───────────────────────────────────────────
|
|
|
|
async function toggleFlyout() {
|
|
if (isOpen()) closeFlyout();
|
|
else await openFlyout();
|
|
}
|
|
|
|
async function openFlyout() {
|
|
$('chat-flyout').classList.remove('hidden');
|
|
const wasBlinking = $('chat-footer-btn')?.classList.contains('blinking');
|
|
stopBlink();
|
|
pollIntervalMs = POLL_OPEN_MS;
|
|
restartPoll();
|
|
await loadConversations();
|
|
await pollOnce();
|
|
await loadConversations();
|
|
|
|
// Initial view: newest unread thread after a blink, else the last
|
|
// thread the user opened (peer or room), else the list.
|
|
let target = null;
|
|
if (wasBlinking) {
|
|
const unread = conversations
|
|
.filter(c => parseInt(c.unread) > 0)
|
|
.sort((a, b) => String(b.last_at || '').localeCompare(String(a.last_at || '')));
|
|
if (unread.length) target = threadFromItem(unread[0]);
|
|
}
|
|
if (!target) {
|
|
const remembered = parseStorageKey(localStorage.getItem('chat-last-thread'));
|
|
if (remembered && conversations.some(c => c.kind === remembered.kind && c.key === remembered.key)) {
|
|
const item = conversations.find(c => c.kind === remembered.kind && c.key === remembered.key);
|
|
target = threadFromItem(item);
|
|
}
|
|
}
|
|
if (target) await openConversation(target);
|
|
else showListView();
|
|
}
|
|
|
|
function closeFlyout() {
|
|
$('chat-flyout').classList.add('hidden');
|
|
pollIntervalMs = POLL_CLOSED_MS;
|
|
restartPoll();
|
|
}
|
|
|
|
// ── Views ─────────────────────────────────────────────────────────
|
|
|
|
function hideAllViews() {
|
|
['chat-list-view', 'chat-thread-view', 'chat-pick-view', 'chat-room-info-view']
|
|
.forEach(id => $(id)?.classList.add('hidden'));
|
|
}
|
|
|
|
// Toggle the caret + make the "chat" trigger look/feel clickable only
|
|
// when there's actually somewhere to go back to.
|
|
function setNavState(canBack) {
|
|
$('chat-header-back-caret')?.classList.toggle('hidden', !canBack);
|
|
$('chat-header-nav')?.classList.toggle('navigable', canBack);
|
|
}
|
|
|
|
function showListView() {
|
|
hideAllViews();
|
|
$('chat-list-view').classList.remove('hidden');
|
|
$('chat-flyout-title').textContent = 'chat';
|
|
setNavState(false);
|
|
$('chat-thread-disposable')?.classList.add('hidden');
|
|
$('chat-thread-info')?.classList.add('hidden');
|
|
currentThread = null;
|
|
}
|
|
|
|
function showThreadView(thread) {
|
|
hideAllViews();
|
|
$('chat-thread-view').classList.remove('hidden');
|
|
$('chat-flyout-title').textContent = 'chat';
|
|
setNavState(true);
|
|
currentThread = thread;
|
|
// Room-only: info icon. 1:1-only: disposable icon.
|
|
$('chat-thread-info')?.classList.toggle('hidden', thread.kind !== 'room');
|
|
$('chat-thread-disposable')?.classList.toggle('hidden', thread.kind !== 'peer');
|
|
if (thread.kind === 'peer') refreshDisposableIcon(thread.key);
|
|
renderPeerTabs();
|
|
}
|
|
|
|
function showPickView() {
|
|
hideAllViews();
|
|
$('chat-pick-view').classList.remove('hidden');
|
|
setNavState(false);
|
|
$('chat-thread-disposable')?.classList.add('hidden');
|
|
$('chat-thread-info')?.classList.add('hidden');
|
|
}
|
|
|
|
function showRoomInfoView() {
|
|
hideAllViews();
|
|
$('chat-room-info-view').classList.remove('hidden');
|
|
setNavState(false);
|
|
$('chat-thread-disposable')?.classList.add('hidden');
|
|
$('chat-thread-info')?.classList.add('hidden');
|
|
}
|
|
|
|
// ── Conversation list ─────────────────────────────────────────────
|
|
|
|
async function loadConversations() {
|
|
const res = await fetch('api/chat/conversations').then(r => r.json()).catch(() => null);
|
|
if (!res) return;
|
|
conversations = res.conversations || [];
|
|
setUnreadBadge(res.total_unread || 0);
|
|
renderConversations();
|
|
}
|
|
|
|
function renderConversations() {
|
|
const list = $('chat-list');
|
|
const empty = $('chat-empty');
|
|
if (!list || !empty) return;
|
|
renderPeerTabs();
|
|
if (!conversations.length) {
|
|
list.innerHTML = '';
|
|
empty.classList.remove('hidden');
|
|
return;
|
|
}
|
|
empty.classList.add('hidden');
|
|
list.innerHTML = conversations.map(c => {
|
|
const isRoom = c.kind === 'room';
|
|
const label = c.label || c.key || '?';
|
|
const initial = label.charAt(0).toUpperCase();
|
|
const avatar = isRoom
|
|
? '<div class="chat-list-avatar"><i class="ph ph-users-three"></i></div>'
|
|
: `<div class="chat-list-avatar">${escapeHtml(initial)}</div>`;
|
|
const unreadBadge = parseInt(c.unread) > 0
|
|
? `<span class="chat-unread-badge">${c.unread}</span>` : '';
|
|
const previewClass = (!isRoom && c.last_direction === 'out')
|
|
? 'chat-list-preview outgoing'
|
|
: 'chat-list-preview';
|
|
const preview = isRoom && c.last_author
|
|
? `${escapeHtml(c.last_author)}: ${escapeHtml((c.last_body || '').slice(0, 70))}`
|
|
: escapeHtml((c.last_body || '').slice(0, 80));
|
|
return `
|
|
<div class="chat-list-row" data-kind="${isRoom ? 'room' : 'peer'}" data-key="${escapeHtml(c.key)}">
|
|
${avatar}
|
|
<div class="chat-list-info">
|
|
<div class="chat-list-peer">
|
|
<span>${escapeHtml(label)}</span>
|
|
<span class="chat-list-time">${escapeHtml(formatChatTime(c.last_at))}</span>
|
|
</div>
|
|
<div class="${previewClass}">${preview}</div>
|
|
</div>
|
|
${unreadBadge}
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
list.querySelectorAll('.chat-list-row').forEach(row => {
|
|
row.addEventListener('click', () => {
|
|
const item = conversations.find(c => c.kind === row.dataset.kind && c.key === row.dataset.key);
|
|
if (item) openConversation(threadFromItem(item));
|
|
});
|
|
});
|
|
}
|
|
|
|
// ── Peer tabs (thread-view quick-switch strip) ────────────────────
|
|
// Horizontal row above the thread so the user can hop between
|
|
// conversations without going back to the list. Hidden scrollbar;
|
|
// vertical wheel delta is redirected to horizontal scroll.
|
|
|
|
function renderPeerTabs() {
|
|
const strip = $('chat-thread-peers');
|
|
if (!strip) return;
|
|
const tabs = conversations.slice();
|
|
// Fold the current thread in even if it's brand-new (e.g. just
|
|
// created a room and haven't synced conversations yet), so the
|
|
// active tab is always visible.
|
|
if (currentThread && !tabs.some(c => c.kind === currentThread.kind && c.key === currentThread.key)) {
|
|
tabs.unshift({ kind: currentThread.kind, key: currentThread.key, label: currentThread.label, unread: 0 });
|
|
}
|
|
if (!tabs.length) { strip.innerHTML = ''; return; }
|
|
strip.innerHTML = tabs.map(c => {
|
|
const isRoom = c.kind === 'room';
|
|
const active = currentThread && currentThread.kind === c.kind && currentThread.key === c.key ? ' active' : '';
|
|
const notActive = !active;
|
|
const dot = parseInt(c.unread) > 0 && notActive
|
|
? '<span class="chat-peer-dot"></span>' : '';
|
|
const icon = isRoom
|
|
? '<i class="ph ph-users-three chat-peer-tab-icon"></i>'
|
|
: '';
|
|
const label = c.label || c.key || '?';
|
|
return `<button class="chat-peer-tab${active}" data-kind="${isRoom ? 'room' : 'peer'}" data-key="${escapeHtml(c.key)}" title="${escapeHtml(label)}">${dot}${icon}<span>${escapeHtml(label)}</span></button>`;
|
|
}).join('');
|
|
strip.querySelectorAll('.chat-peer-tab').forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
const thread = { kind: tab.dataset.kind, key: tab.dataset.key, label: tab.querySelector('span')?.textContent || tab.dataset.key };
|
|
if (!sameThread(currentThread, thread)) openConversation(thread);
|
|
});
|
|
});
|
|
const active = strip.querySelector('.chat-peer-tab.active');
|
|
if (active) active.scrollIntoView({ block: 'nearest', inline: 'nearest' });
|
|
}
|
|
|
|
function wirePeerStripWheel() {
|
|
const strip = $('chat-thread-peers');
|
|
if (!strip || strip.dataset.wheelWired) return;
|
|
strip.dataset.wheelWired = '1';
|
|
strip.addEventListener('wheel', (e) => {
|
|
if (e.deltaY === 0) return;
|
|
if (strip.scrollWidth <= strip.clientWidth) return;
|
|
e.preventDefault();
|
|
strip.scrollLeft += e.deltaY;
|
|
}, { passive: false });
|
|
}
|
|
|
|
// ── Thread ────────────────────────────────────────────────────────
|
|
|
|
async function openConversation(thread) {
|
|
showThreadView(thread);
|
|
localStorage.setItem('chat-last-thread', threadStorageKey(thread));
|
|
await loadThread(thread);
|
|
// Backfill older messages from the relay on open so a second device /
|
|
// cold cache catches up. Fire-and-forget: the re-render happens via
|
|
// the subsequent conversations refresh and the next poll tick.
|
|
backfillThread(thread).catch(() => {});
|
|
await hyprcrd.api('api/chat/read', { method: 'POST', body: threadBody(thread) }).catch(() => {});
|
|
loadConversations();
|
|
setTimeout(() => $('chat-thread-input')?.focus(), 50);
|
|
}
|
|
|
|
async function loadThread(thread) {
|
|
const qs = thread.kind === 'room'
|
|
? 'room_uid=' + encodeURIComponent(thread.key)
|
|
: 'peer=' + encodeURIComponent(thread.key);
|
|
const res = await fetch('api/chat/messages?' + qs).then(r => r.json()).catch(() => null);
|
|
if (!res) return;
|
|
currentMessages = res.messages || [];
|
|
await renderThread();
|
|
}
|
|
|
|
async function backfillThread(thread) {
|
|
const body = threadBody(thread);
|
|
// Oldest id we have locally is the lower bound for the backfill —
|
|
// we want messages BEFORE it.
|
|
const lowest = currentMessages.reduce((min, m) => {
|
|
const id = Number(m.id || 0);
|
|
return min === 0 || (id > 0 && id < min) ? id : min;
|
|
}, 0);
|
|
const res = await hyprcrd.api('api/chat/backfill', {
|
|
method: 'POST',
|
|
body: { ...body, before: lowest, limit: 100 },
|
|
}).catch(() => null);
|
|
if (res?.ok && (res.backfilled || 0) > 0 && sameThread(thread, currentThread)) {
|
|
await loadThread(thread);
|
|
}
|
|
}
|
|
|
|
async function renderThread() {
|
|
const wrap = $('chat-thread-messages');
|
|
if (!wrap) return;
|
|
const self = await getSelfUsername();
|
|
const isRoom = currentThread?.kind === 'room';
|
|
let lastAuthor = null;
|
|
wrap.innerHTML = currentMessages.map(m => {
|
|
// For groups: author == self → "out" bubble regardless of the
|
|
// stored direction (which reflects which device inserted the row).
|
|
const mine = isRoom ? (m.peer === self) : (m.direction === 'out');
|
|
const cls = mine ? 'out' : 'in';
|
|
let receipt = '';
|
|
if (!isRoom && mine) {
|
|
if (Number(m.seen)) receipt = '<i class="ph ph-checks chat-receipt seen"></i>';
|
|
else if (Number(m.delivered)) receipt = '<i class="ph ph-check chat-receipt delivered"></i>';
|
|
else receipt = '<i class="ph ph-clock chat-receipt pending"></i>';
|
|
}
|
|
let authorLine = '';
|
|
if (isRoom && !mine && m.peer !== lastAuthor) {
|
|
authorLine = `<div class="chat-bubble-author">${escapeHtml(m.peer || '')}</div>`;
|
|
}
|
|
lastAuthor = m.peer;
|
|
return `
|
|
${authorLine}
|
|
<div class="chat-bubble ${cls}">${escapeHtml(m.body)}</div>
|
|
<div class="chat-bubble-time">${escapeHtml(formatChatTime(m.sent_at))}${receipt}</div>
|
|
`;
|
|
}).join('');
|
|
wrap.scrollTop = wrap.scrollHeight;
|
|
}
|
|
|
|
async function sendMessage(e) {
|
|
e?.preventDefault();
|
|
const input = $('chat-thread-input');
|
|
const body = input.value.trim();
|
|
if (!body || !currentThread) return;
|
|
const sendBtn = $('chat-thread-send');
|
|
sendBtn.disabled = true;
|
|
input.disabled = true;
|
|
|
|
try {
|
|
const res = await hyprcrd.api('api/chat/send', {
|
|
method: 'POST',
|
|
body: { ...threadBody(currentThread), body },
|
|
});
|
|
if (!res.ok) {
|
|
const detail = [
|
|
res.error || 'unknown',
|
|
res.url ? `URL: ${res.url}` : null,
|
|
res.response_body ? `Body: ${res.response_body}` : null,
|
|
].filter(Boolean).join('\n');
|
|
await hyprcrd.dialog.show({
|
|
title: 'send failed',
|
|
message: detail,
|
|
danger: true,
|
|
okLabel: 'Ok',
|
|
cancelLabel: '',
|
|
});
|
|
return;
|
|
}
|
|
input.value = '';
|
|
await loadThread(currentThread);
|
|
await loadConversations();
|
|
} catch (err) {
|
|
await hyprcrd.dialog.show({
|
|
title: 'send error',
|
|
message: String(err?.message || err),
|
|
danger: true,
|
|
okLabel: 'Ok',
|
|
cancelLabel: '',
|
|
});
|
|
} finally {
|
|
sendBtn.disabled = false;
|
|
input.disabled = false;
|
|
input.focus();
|
|
}
|
|
}
|
|
|
|
// ── Pick recipient / group creation ───────────────────────────────
|
|
|
|
async function openPickView() {
|
|
showPickView();
|
|
pickMode = 'peer';
|
|
selectedMembers = new Set();
|
|
applyPickMode();
|
|
$('chat-group-name').value = '';
|
|
|
|
const list = $('chat-pick-list');
|
|
list.innerHTML = '<div class="px-3 py-3 text-[10px] text-t-dim font-pixel">loading...</div>';
|
|
|
|
if (!recipientCache) {
|
|
const res = await fetch('api/chat/recipients').then(r => r.json()).catch(() => null);
|
|
if (!res?.ok) {
|
|
list.innerHTML = `<div class="px-3 py-3 text-[10px] text-t-danger font-pixel">${escapeHtml(res?.error || 'failed to load recipients')}</div>`;
|
|
return;
|
|
}
|
|
recipientCache = res;
|
|
}
|
|
renderPickList();
|
|
}
|
|
|
|
function applyPickMode() {
|
|
const nameInput = $('chat-group-name');
|
|
const actions = $('chat-group-actions');
|
|
const title = $('chat-pick-title');
|
|
document.querySelectorAll('.chat-pick-mode-btn').forEach(b => {
|
|
b.classList.toggle('active', b.dataset.mode === pickMode);
|
|
});
|
|
if (pickMode === 'group') {
|
|
nameInput.classList.remove('hidden');
|
|
actions.classList.remove('hidden');
|
|
if (title) title.textContent = 'new group';
|
|
updateGroupCount();
|
|
} else {
|
|
nameInput.classList.add('hidden');
|
|
actions.classList.add('hidden');
|
|
if (title) title.textContent = 'new conversation';
|
|
}
|
|
renderPickList();
|
|
}
|
|
|
|
function renderPickList() {
|
|
const list = $('chat-pick-list');
|
|
if (!list || !recipientCache) return;
|
|
const self = recipientCache.self;
|
|
const others = (recipientCache.tenants || []).filter(t => t.username !== self);
|
|
if (!others.length) {
|
|
list.innerHTML = '<div class="px-3 py-3 text-[10px] text-t-dim font-pixel cursor-blink">no other users on the relay</div>';
|
|
return;
|
|
}
|
|
list.innerHTML = others.map(t => {
|
|
const selected = selectedMembers.has(t.username);
|
|
const selCls = (pickMode === 'group' && selected) ? ' selected' : '';
|
|
const check = pickMode === 'group'
|
|
? `<i class="ph ph-check chat-pick-check"></i>`
|
|
: '';
|
|
return `
|
|
<div class="chat-pick-row${selCls}" data-peer="${escapeHtml(t.username)}">
|
|
<i class="ph ph-user-circle text-sm"></i>
|
|
<span>${escapeHtml(t.username)}</span>
|
|
${check}
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
list.querySelectorAll('.chat-pick-row').forEach(row => {
|
|
row.addEventListener('click', () => {
|
|
const u = row.dataset.peer;
|
|
if (pickMode === 'group') {
|
|
if (selectedMembers.has(u)) selectedMembers.delete(u);
|
|
else selectedMembers.add(u);
|
|
renderPickList();
|
|
updateGroupCount();
|
|
} else {
|
|
openConversation({ kind: 'peer', key: u, label: u });
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function updateGroupCount() {
|
|
const el = $('chat-group-count');
|
|
if (!el) return;
|
|
const n = selectedMembers.size;
|
|
el.textContent = n ? `${n} member${n === 1 ? '' : 's'} selected` : 'pick at least one member';
|
|
}
|
|
|
|
async function createRoom() {
|
|
const name = $('chat-group-name').value.trim();
|
|
if (!name) {
|
|
await hyprcrd.dialog.show({ title: 'missing name', message: 'Give the group a name.', okLabel: 'Ok', cancelLabel: '' });
|
|
return;
|
|
}
|
|
if (!selectedMembers.size) {
|
|
await hyprcrd.dialog.show({ title: 'no members', message: 'Pick at least one other member.', okLabel: 'Ok', cancelLabel: '' });
|
|
return;
|
|
}
|
|
const res = await hyprcrd.api('api/chat/rooms', {
|
|
method: 'POST',
|
|
body: { name, members: [...selectedMembers] },
|
|
});
|
|
if (!res?.ok) {
|
|
await hyprcrd.dialog.show({
|
|
title: 'create failed',
|
|
message: res?.error || 'unknown error',
|
|
danger: true,
|
|
okLabel: 'Ok',
|
|
cancelLabel: '',
|
|
});
|
|
return;
|
|
}
|
|
await loadConversations();
|
|
openConversation({ kind: 'room', key: res.uid, label: name });
|
|
}
|
|
|
|
// ── Room info / member management ──────────────────────────────
|
|
|
|
async function openRoomInfo() {
|
|
if (currentThread?.kind !== 'room') return;
|
|
const savedThread = currentThread;
|
|
showRoomInfoView();
|
|
$('chat-room-info-name').textContent = savedThread.label || savedThread.key;
|
|
const body = $('chat-room-info-body');
|
|
body.innerHTML = '<div class="text-[10px] text-t-dim font-pixel">loading...</div>';
|
|
|
|
const res = await fetch('api/chat/rooms').then(r => r.json()).catch(() => null);
|
|
const room = (res?.rooms || []).find(r => r.uid === savedThread.key);
|
|
const self = await getSelfUsername();
|
|
if (!room) {
|
|
body.innerHTML = '<div class="text-[10px] text-t-danger font-pixel">room not found</div>';
|
|
return;
|
|
}
|
|
const isOwner = room.owner_username === self;
|
|
const others = (res?.tenants || recipientCache?.tenants || [])
|
|
.filter(t => t.username !== self && !(room.members || []).includes(t.username));
|
|
|
|
const memberRows = (room.members || []).map(u => {
|
|
const ownerTag = u === room.owner_username ? '<span class="owner-badge">owner</span>' : '';
|
|
const removeBtn = (isOwner && u !== room.owner_username)
|
|
? `<button class="btn danger" data-action="remove" data-user="${escapeHtml(u)}" style="margin-left:auto;padding:2px 8px;">remove</button>`
|
|
: '';
|
|
return `
|
|
<div class="chat-room-member-row">
|
|
<i class="ph ph-user-circle text-t-accent"></i>
|
|
<span>${escapeHtml(u)}</span>
|
|
${ownerTag}
|
|
${removeBtn}
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
const addSection = isOwner && (recipientCache?.tenants || []).length > (room.members || []).length
|
|
? `<div class="section-label">Add members</div>
|
|
<div id="chat-room-add-list">${
|
|
(recipientCache?.tenants || [])
|
|
.filter(t => t.username !== self && !(room.members || []).includes(t.username))
|
|
.map(t => `<div class="chat-room-member-row"><i class="ph ph-user-circle"></i><span>${escapeHtml(t.username)}</span><button class="btn" style="margin-left:auto;padding:2px 8px;" data-action="add" data-user="${escapeHtml(t.username)}">add</button></div>`)
|
|
.join('') || '<div class="text-[10px] text-t-dim font-pixel">everyone on the relay is already in</div>'
|
|
}</div>`
|
|
: '';
|
|
|
|
body.innerHTML = `
|
|
<div>
|
|
<div class="section-label">Members (${(room.members || []).length})</div>
|
|
${memberRows || '<div class="text-[10px] text-t-dim">no members</div>'}
|
|
</div>
|
|
${addSection}
|
|
<div style="display:flex;gap:8px;margin-top:12px;">
|
|
${isOwner
|
|
? '<button class="btn danger" data-action="delete" style="flex:1">Delete room</button>'
|
|
: '<button class="btn danger" data-action="leave" style="flex:1">Leave room</button>'
|
|
}
|
|
<button class="btn" data-action="back" style="flex:1">Back to chat</button>
|
|
</div>
|
|
`;
|
|
|
|
body.querySelectorAll('button[data-action]').forEach(btn => {
|
|
btn.addEventListener('click', () => handleRoomAction(btn.dataset.action, btn.dataset.user, savedThread));
|
|
});
|
|
}
|
|
|
|
async function handleRoomAction(action, user, thread) {
|
|
const uid = thread.key;
|
|
if (action === 'back') {
|
|
openConversation(thread);
|
|
return;
|
|
}
|
|
if (action === 'remove' || action === 'add') {
|
|
// Fetch current room, mutate members, PATCH.
|
|
const res = await fetch('api/chat/rooms').then(r => r.json()).catch(() => null);
|
|
const room = (res?.rooms || []).find(r => r.uid === uid);
|
|
if (!room) return;
|
|
let members = [...(room.members || [])];
|
|
if (action === 'remove') members = members.filter(m => m !== user);
|
|
else if (!members.includes(user)) members.push(user);
|
|
// Relay adds owner automatically, but we forward the full list
|
|
// minus the owner (owner ALWAYS stays on relay side).
|
|
const patchRes = await hyprcrd.api(`api/chat/rooms/${uid}`, {
|
|
method: 'PATCH',
|
|
body: { members },
|
|
});
|
|
if (!patchRes?.ok) {
|
|
await hyprcrd.dialog.show({ title: 'update failed', message: patchRes?.error || 'unknown', danger: true, okLabel: 'Ok', cancelLabel: '' });
|
|
}
|
|
await pollOnce(); // refresh local rooms mirror
|
|
await openRoomInfo(); // re-render
|
|
return;
|
|
}
|
|
if (action === 'leave' || action === 'delete') {
|
|
const confirm = await hyprcrd.dialog.show({
|
|
title: action === 'delete' ? 'Delete room?' : 'Leave room?',
|
|
message: action === 'delete'
|
|
? 'All members lose access and the message history is wiped.'
|
|
: 'You will stop receiving messages in this room.',
|
|
danger: true,
|
|
okLabel: action === 'delete' ? 'Delete' : 'Leave',
|
|
});
|
|
if (!confirm) return;
|
|
const res = await hyprcrd.api(`api/chat/rooms/${uid}`, { method: 'DELETE' });
|
|
if (!res?.ok) {
|
|
await hyprcrd.dialog.show({ title: 'failed', message: res?.error || 'unknown', danger: true, okLabel: 'Ok', cancelLabel: '' });
|
|
return;
|
|
}
|
|
await pollOnce();
|
|
await loadConversations();
|
|
showListView();
|
|
}
|
|
}
|
|
|
|
// ── Disposable toggle (1:1) ──────────────────────────────────────
|
|
|
|
async function refreshDisposableIcon(peer) {
|
|
const btn = $('chat-thread-disposable');
|
|
if (!btn) return;
|
|
const res = await fetch('api/chat/thread-settings?peer=' + encodeURIComponent(peer))
|
|
.then(r => r.json()).catch(() => null);
|
|
const on = !!res?.disposable;
|
|
btn.classList.toggle('active', on);
|
|
btn.setAttribute('data-tip', on
|
|
? 'disposable: new messages drop after delivery — click to persist'
|
|
: 'persistent: messages live on the relay — click to make disposable');
|
|
}
|
|
|
|
async function toggleDisposable() {
|
|
if (currentThread?.kind !== 'peer') return;
|
|
const peer = currentThread.key;
|
|
const cur = await fetch('api/chat/thread-settings?peer=' + encodeURIComponent(peer))
|
|
.then(r => r.json()).catch(() => ({ disposable: 0 }));
|
|
const next = cur.disposable ? 0 : 1;
|
|
await hyprcrd.api('api/chat/thread-settings', {
|
|
method: 'POST',
|
|
body: { peer, disposable: next },
|
|
});
|
|
refreshDisposableIcon(peer);
|
|
}
|
|
|
|
// ── Polling ───────────────────────────────────────────────────────
|
|
|
|
async function pollOnce() {
|
|
const icon = $('chat-refresh-icon');
|
|
if (icon && isOpen()) icon.classList.add('card-spinner');
|
|
try {
|
|
const res = await hyprcrd.api('api/chat/poll', { method: 'POST' }).catch(() => null);
|
|
if (!res?.ok) return;
|
|
const newCount = res.new || 0;
|
|
const receiptUpdates = res.receipts || 0;
|
|
if (newCount > 0) {
|
|
await loadConversations();
|
|
if (isOpen() && currentThread) {
|
|
await loadThread(currentThread);
|
|
hyprcrd.api('api/chat/read', { method: 'POST', body: threadBody(currentThread) })
|
|
.then(() => loadConversations()).catch(() => {});
|
|
}
|
|
if (!isOpen()) startBlink();
|
|
} else if (receiptUpdates > 0 && isOpen() && currentThread) {
|
|
await loadThread(currentThread);
|
|
} else if (initialPollDone === false) {
|
|
await loadConversations();
|
|
}
|
|
initialPollDone = true;
|
|
} finally {
|
|
if (icon) icon.classList.remove('card-spinner');
|
|
}
|
|
}
|
|
|
|
function restartPoll() {
|
|
if (pollHandle) clearInterval(pollHandle);
|
|
pollHandle = setInterval(pollOnce, pollIntervalMs);
|
|
}
|
|
|
|
// ── Init ──────────────────────────────────────────────────────────
|
|
|
|
function init() {
|
|
if (!$('chat-flyout')) return;
|
|
|
|
injectFooterButton();
|
|
|
|
$('chat-close-btn').addEventListener('click', closeFlyout);
|
|
$('chat-refresh-btn').addEventListener('click', () => pollOnce().then(loadConversations));
|
|
$('chat-new-btn').addEventListener('click', openPickView);
|
|
$('chat-empty-start')?.addEventListener('click', openPickView);
|
|
// Caret + "chat" label are one button with one tooltip. Click is a
|
|
// no-op when the caret is hidden (already on the list) — the CSS
|
|
// .navigable class tracks whether the button looks clickable.
|
|
$('chat-header-nav')?.addEventListener('click', () => {
|
|
if (!$('chat-header-nav')?.classList.contains('navigable')) return;
|
|
showListView();
|
|
loadConversations();
|
|
});
|
|
$('chat-pick-back').addEventListener('click', showListView);
|
|
$('chat-thread-form').addEventListener('submit', sendMessage);
|
|
$('chat-thread-info')?.addEventListener('click', openRoomInfo);
|
|
$('chat-thread-disposable')?.addEventListener('click', toggleDisposable);
|
|
$('chat-room-info-back')?.addEventListener('click', () => {
|
|
if (currentThread) openConversation(currentThread);
|
|
else showListView();
|
|
});
|
|
$('chat-group-create')?.addEventListener('click', createRoom);
|
|
document.querySelectorAll('.chat-pick-mode-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
pickMode = btn.dataset.mode;
|
|
applyPickMode();
|
|
});
|
|
});
|
|
|
|
wirePeerStripWheel();
|
|
|
|
$('chat-flyout').addEventListener('keydown', e => {
|
|
if (e.key === 'Escape') { e.stopPropagation(); closeFlyout(); }
|
|
});
|
|
|
|
loadConversations().catch(() => {});
|
|
const startPolling = () => {
|
|
pollOnce().catch(() => {});
|
|
restartPoll();
|
|
};
|
|
if (hyprcrd.util.csrf?.()) {
|
|
startPolling();
|
|
} else {
|
|
hyprcrd.hooks.on('csrf.ready', startPolling);
|
|
}
|
|
|
|
document.addEventListener('visibilitychange', () => {
|
|
if (document.hidden) {
|
|
if (pollHandle) { clearInterval(pollHandle); pollHandle = null; }
|
|
} else {
|
|
pollOnce().catch(() => {});
|
|
restartPoll();
|
|
}
|
|
});
|
|
|
|
hyprcrd.hooks?.on?.('sync.tick', () => { pollOnce().catch(() => {}); });
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
|
|
hyprcrd.registerPlugin?.({
|
|
name: 'chat',
|
|
version: '1.1.0',
|
|
description: 'Encrypted chat between relay tenants (1:1 + group rooms)',
|
|
});
|