This message was deleted
`;
+ }
+
+ const name = displayNameOf(msg);
+ const senderName = isSelf ? '' :
+ `${escapeHtml(name)}
`;
+ const avatar = isSelf
+ ? ''
+ : `${avatarSmallHTML(msg)}
`;
+
+ let content = '';
+ if (msg.content) {
+ content += ``;
+ }
+ if (msg.file_path) {
+ content += buildAttachmentHTML(msg);
+ }
+ if (msg.reply_to_id) {
+ content = buildReplyQuote(msg) + content;
+ }
+
+ const meta = buildMetaHTML(msg, isSelf);
+
+ // actions
+ let actions = '';
+ actions += actionBtn('reply', 'fas fa-reply', 'Reply');
+ if (!isSelf) {
+ actions += ``;
+ } else {
+ actions += actionBtn('edit', 'fas fa-pen', 'Edit');
+ actions += actionBtn('delete', 'fas fa-trash', 'Delete');
+ }
+ actions += actionBtn('copy', 'fas fa-copy', 'Copy');
+
+ return `
+ ${avatar}
+
+ ${senderName}
+
+
+
`;
+ }
+
+ function actionBtn(action, icon, label) {
+ return ``;
+ }
+
+ function avatarSmallHTML(msg) {
+ if (msg.sender_avatar_path) {
+ return `${initialOf(displayNameOf(msg))}
`;
+ }
+
+ function buildMetaHTML(msg, isSelf) {
+ let s = ``;
+ return s;
+ }
+
+ function buildReplyQuote(msg) {
+ const target = State.messages.get(msg.reply_to_id);
+ const tn = target ? escapeHtml(displayNameOf(target)) : escapeHtml('Unknown');
+ let text;
+ if (!target) {
+ text = 'Message unavailable';
+ } else {
+ const tomb = (State.tombstoned.get(target.conversation_id) || new Set()).has(target.id);
+ if (tomb || target.is_deleted) text = 'deleted message';
+ else text = escapeHtml(truncate(plainPreview(target), 80));
+ }
+ return ``;
+ }
+
+ function plainPreview(m) {
+ let txt = m.content ? stripMarkdown(m.content.replace(/
+ 
+
`;
+ }
+ if (ft.startsWith('video/')) {
+ return ``;
+ }
+ if (ft.startsWith('audio/')) {
+ return ``;
+ }
+ const icon = ft.includes('pdf') ? 'fa-file-pdf' : ft.startsWith('text') ? 'fa-file-alt' : 'fa-file';
+ return ``;
+ }
+
+ // ---------------- content formatting ----------------
+ const TOKEN_PLACEHOLDER = '\u0001';
+
+ function renderInlineContent(raw) {
+ let text = String(raw).replace(/\r\n/g, '\n');
+ const parts = [];
+ const ph = (i) => TOKEN_PLACEHOLDER + i + TOKEN_PLACEHOLDER;
+
+ // fenced code blocks ``` ... ``` (their contents are never re-parsed)
+ text = text.replace(/```([\s\S]*?)```/g, (whole, code) => {
+ const clean = code.replace(/^\n/, '').replace(/\n$/, '');
+ parts.push(`${escapeHtml(clean)}$1');
+ out = out.replace(/(^|[\s(>])\*([^*\n]+)\*(?=[\s.,!?;:)\n]|$)/g, '$1$2');
+ parts.forEach((html, i) => {
+ out = out.split(ph(i)).join(html);
+ });
+ return out;
+ }
+
+ function isAllowedImageSrc(src) {
+ if (!src) return false;
+ if (src.startsWith('/api/download/')) return true;
+ if (/^https?:\/\//i.test(src)) return true;
+ if (/^data:image\/(png|jpe?g|gif|webp);base64,/i.test(src)) return src.length < 200000;
+ return false;
+ }
+
+ // ---------------- DOM patching ----------------
+ function rowEl(id) {
+ return DOM.messagesList.querySelector(`.message-row[data-id="${id}"]`);
+ }
+
+ function updateMessageDom(id, asTombstone = false) {
+ const el = rowEl(id);
+ const msg = State.messages.get(id);
+ if (!el || !msg) return;
+ const isSelf = msg.sender_id === State.user?.id;
+ const tomb = asTombstone || (State.tombstoned.get(msg.conversation_id) || new Set()).has(id);
+ el.className = 'message-row ' + (isSelf ? 'self' : 'other') + (tomb ? ' tomb' : '');
+ el.innerHTML = buildMessageHTML(msg, isSelf);
+ // keep hug class if previous row same author
+ const prev = el.previousElementSibling;
+ if (prev && prev.classList && prev.classList.contains('message-row')) {
+ const prevId = parseInt(prev.dataset.id, 10);
+ const prevMsg = State.messages.get(prevId);
+ if (prevMsg && sameAuthor(msg, prevMsg)) el.classList.add('hug');
+ }
+ }
+
+ function removeMessageDom(id) {
+ const el = rowEl(id);
+ if (el) el.remove();
+ // clean dangling day chips
+ DOM.messagesList.querySelectorAll('.day-separator').forEach((chip) => {
+ const next = chip.nextElementSibling;
+ if (!next || next.classList.contains('day-separator')) chip.remove();
+ });
+ if (!DOM.messagesList.querySelector('.message-row') &&
+ !DOM.messagesList.querySelector('.deleted-note')) {
+ renderEmptyLoading(State.activeConvId);
+ }
+ }
+
+ function updateTick(id) {
+ const el = rowEl(id);
+ if (!el) return;
+ const status = el.querySelector('.message-status');
+ if (status) {
+ status.classList.add('read');
+ const i = status.querySelector('i');
+ if (i) i.className = 'fas fa-check-double';
+ }
+ }
+
+ function appendMessageDom(m) {
+ const ids = getConv(m.conversation_id).ids;
+ const prevId = ids.length > 1 ? ids[ids.length - 2] : null;
+ const prevMsg = prevId ? State.messages.get(prevId) : null;
+ const dayChanged = !prevMsg || dayKey(prevMsg.timestamp_ms) !== dayKey(m.timestamp_ms);
+
+ if (dayChanged) {
+ DOM.messagesList.appendChild(dayChip(dayKey(m.timestamp_ms), m.timestamp_ms));
+ }
+ const row = buildMessageRow(m, prevMsg);
+ if (prevMsg && !dayChanged && sameAuthor(m, prevMsg)) row.classList.add('hug');
+ DOM.messagesList.appendChild(row);
+ DOM.emptyState.style.display = 'none';
+ }
+
+ // ============================================================
+ // Scroll UI
+ // ============================================================
+ function updateScrollUI() {
+ if (!State.isAtBottom) {
+ DOM.scrollBottomBtn.classList.toggle('hidden', !State.prefs.showScrollBtn);
+ } else {
+ DOM.scrollBottomBtn.classList.add('hidden');
+ hideLatestBar();
+ }
+ }
+
+ DOM.messagesScroll.addEventListener('scroll', () => {
+ const { scrollTop, scrollHeight, clientHeight } = DOM.messagesScroll;
+ State.isAtBottom = (scrollHeight - scrollTop - clientHeight) < 90;
+ updateScrollUI();
+ if (State.isAtBottom) hideLatestBar();
+ });
+
+ DOM.scrollBottomBtn.addEventListener('click', () => { scrollToBottom(); hideLatestBar(); });
+
+ function scrollToBottom() {
+ requestAnimationFrame(() => {
+ DOM.messagesScroll.scrollTop = DOM.messagesScroll.scrollHeight;
+ State.isAtBottom = true;
+ updateScrollUI();
+ });
+ }
+
+ // ============================================================
+ // Latest message bar
+ // ============================================================
+ function showLatestBar(m) {
+ if (!State.prefs.showLatestBar || !DOM.latestMessageBar) return;
+ const name = displayNameOf(m);
+ if (m.sender_avatar_path) {
+ DOM.lmbAvatar.innerHTML = `
+
+
`;
+ const ta = bubble.querySelector('textarea');
+ ta.focus();
+ ta.setSelectionRange(ta.value.length, ta.value.length);
+
+ bubble.querySelector('[data-edit="save"]').addEventListener('click', () => saveInlineEdit(messageId, ta.value));
+ bubble.querySelector('[data-edit="cancel"]').addEventListener('click', () => cancelInlineEdit());
+ ta.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); saveInlineEdit(messageId, ta.value); }
+ if (e.key === 'Escape') cancelInlineEdit();
+ });
+ }
+
+ function cancelInlineEdit() {
+ const id = State.editingId;
+ State.editingId = null;
+ if (id && State.messages.has(id)) updateMessageDom(id);
+ }
+
+ async function saveInlineEdit(id, content) {
+ content = content.trim();
+ if (!content) { showToast('Message cannot be empty', 'warning'); return; }
+ const msg = State.messages.get(id);
+ if (!msg) return;
+ try {
+ const res = await fetch(`${API}/api/messages/${id}?content=${encodeURIComponent(content)}`, {
+ method: 'PATCH',
+ headers: { 'X-Auth-Token': State.token }
+ });
+ const data = await res.json().catch(() => ({}));
+ if (!res.ok) throw new Error(data.detail || 'Edit failed');
+ msg.content = content;
+ msg.is_edited = true;
+ State.editingId = null;
+ updateMessageDom(id);
+ const convId = msg.conversation_id;
+ const summary = convById(convId);
+ if (summary && summary.last_message_id === id) {
+ summary.last_message_preview = truncate(content.replace(/\s+/g, ' '), 90);
+ renderSidebar();
+ }
+ } catch (err) {
+ showToast(err.message, 'error');
+ }
+ }
+
+ // ============================================================
+ // Delete (HTTP - reliable, never relies on a fragile WS send)
+ // ============================================================
+ async function requestDelete(msg) {
+ const ok = await showConfirm({
+ title: 'Delete message',
+ message: 'This permanently deletes the message for everyone. This cannot be undone.',
+ okText: 'Delete'
+ });
+ if (!ok) return;
+ try {
+ const res = await fetch(`${API}/api/messages/${msg.id}`, {
+ method: 'DELETE',
+ headers: { 'X-Auth-Token': State.token }
+ });
+ if (!res.ok) {
+ const data = await res.json().catch(() => ({}));
+ throw new Error(data.detail || 'Delete failed');
+ }
+ removeMessageDom(msg.id);
+ State.messages.delete(msg.id);
+ pruneConvId(msg.conversation_id, msg.id);
+ if (State.replyTo && State.replyTo.id === msg.id) clearReply();
+ showToast('Message deleted', 'success');
+ const summary = convById(msg.conversation_id);
+ if (summary && summary.last_message_id === msg.id) {
+ summary.last_message_preview = '';
+ summary.last_message_ts = null;
+ renderSidebar();
+ }
+ } catch (err) {
+ showToast(err.message, 'error');
+ }
+ }
+
+ // ============================================================
+ // Compose / send
+ // ============================================================
+ DOM.composeForm.addEventListener('submit', (e) => { e.preventDefault(); sendMessage(); });
+
+ DOM.messageInput.addEventListener('input', () => {
+ const hasContent = DOM.messageInput.value.trim().length > 0 || !!State.pendingFile;
+ DOM.sendBtn.disabled = !hasContent;
+ sendTyping(true);
+ autoResize();
+ });
+
+ DOM.messageInput.addEventListener('keydown', (e) => {
+ const enterSends = State.prefs.enterSend;
+ if (e.key === 'Enter' && !e.shiftKey && enterSends) {
+ e.preventDefault();
+ sendMessage();
+ } else if (e.key === 'Enter' && !e.shiftKey && !enterSends) {
+ // plain Enter = newline; Ctrl/Cmd+Enter still sends
+ if (e.ctrlKey || e.metaKey) { e.preventDefault(); sendMessage(); }
+ }
+ });
+
+ DOM.messageInput.addEventListener('blur', () => sendTyping(false));
+
+ function sendMessage() {
+ const content = DOM.messageInput.value.trim();
+ if (!content && !State.pendingFile) return;
+ if (!State.activeConvId) { showToast('No conversation selected', 'warning'); return; }
+ if (!wsOpen()) {
+ showToast('Not connected - message queued, sending when reconnected', 'warning');
+ }
+ const clientId = generateId();
+ const payload = {
+ type: 'send_message',
+ content: content,
+ conversation_id: State.activeConvId,
+ reply_to_id: State.replyTo ? State.replyTo.id : null,
+ client_id: clientId
+ };
+ if (State.pendingFile) {
+ payload.file_path = State.pendingFile.file_path;
+ payload.file_type = State.pendingFile.file_type;
+ payload.file_name = State.pendingFile.file_name;
+ payload.file_size = State.pendingFile.file_size;
+ }
+ State.pendingSends.set(clientId, payload);
+ // only keep the most recent 30 queued messages
+ while (State.pendingSends.size > 30) {
+ State.pendingSends.delete(State.pendingSends.keys().next().value);
+ }
+
+ if (!wsSend(payload)) {
+ // offline: keep queued; UI clears and message re-sends on reconnect
+ showToast('Message queued - will send when you reconnect', 'warning');
+ }
+ DOM.messageInput.value = '';
+ DOM.sendBtn.disabled = true;
+ DOM.messageInput.dispatchEvent(new Event('input'));
+ clearReply();
+ clearPendingFile();
+ sendTyping(false);
+ autoResize();
+ }
+
+ function flushPendingSends() {
+ const pending = [...State.pendingSends.entries()];
+ pending.forEach(([clientId, payload]) => {
+ if (payload.conversation_id === GLOBAL_CONV && !getConv(GLOBAL_CONV).ids.length) {
+ // ensure lobby is loaded before replaying
+ loadMessages(GLOBAL_CONV);
+ }
+ wsSend({ ...payload });
+ });
+ }
+
+ function sendTyping(isTyping) {
+ if (!wsOpen()) return;
+ const now = Date.now();
+ if (isTyping && now - State.typingSentAt < 1600) return;
+ State.typingSentAt = now;
+ wsSend({ type: 'typing', is_typing: isTyping, conversation_id: State.activeConvId });
+ if (isTyping) {
+ clearTimeout(window.__typingStop);
+ window.__typingStop = setTimeout(() => sendTyping(false), 2200);
+ }
+ }
+
+ function updateTypingIndicator() {
+ const prefix = `${State.activeConvId}:`;
+ const names = [...State.typingUsers.entries()]
+ .filter(([k]) => k.startsWith(prefix))
+ .map(([, v]) => v.name);
+ DOM.typingIndicator.classList.toggle('hidden', names.length === 0);
+ if (names.length) {
+ DOM.typingText.textContent = names.join(', ') + (names.length === 1 ? ' is typing…' : ' are typing…');
+ }
+ }
+
+ function autoResize() {
+ DOM.messageInput.style.height = 'auto';
+ DOM.messageInput.style.height = Math.min(DOM.messageInput.scrollHeight, 120) + 'px';
+ }
+
+ // ============================================================
+ // Start private chat modal
+ // ============================================================
+ function openConvModal(peerId, peerName) {
+ if (peerId === State.user?.id) { showToast('That is you!', 'info'); return; }
+ const existing = [...State.conversations.values()].filter(
+ c => c.type === 'dm' && c.peer && c.peer.id === peerId
+ );
+ DOM.convModalDesc.innerHTML = `Chat privately with ${escapeHtml(peerName)}` +
+ (existing.length ? ` (${existing.length} of 3 existing)` : '');
+ DOM.convModal.dataset.peerId = peerId;
+ DOM.convModal.dataset.peerName = peerName;
+ renderConvModal(existing);
+ openModal(DOM.convModal);
+ }
+
+ function renderConvModal(existing) {
+ let html = '';
+ existing.forEach(c => {
+ html += ``;
+ });
+ if (!existing.length) {
+ html = '
+
+
+
+ No private chats with this person yet
';
+ }
+ DOM.convModalList.innerHTML = html;
+ const atLimit = existing.length >= 3;
+ DOM.newChatBtn.disabled = atLimit;
+ DOM.newChatBtn.querySelector('i').className = atLimit ? 'fas fa-ban' : 'fas fa-plus';
+ DOM.newChatBtn.lastChild.textContent = atLimit ? ' Limit Reached' : ' Start New Chat';
+ if (atLimit) {
+ const note = document.createElement('div');
+ note.className = 'conv-modal-note';
+ note.id = 'conv-limit-note';
+ note.innerHTML = ' You already have 3 private chats with this person. The limit is 3 per person.';
+ if (!DOM.convModalList.querySelector('#conv-limit-note')) DOM.convModalList.appendChild(note);
+ } else {
+ const note = DOM.convModalList.querySelector('#conv-limit-note');
+ if (note) note.remove();
+ }
+ DOM.convModalList.querySelectorAll('[data-open-conv]').forEach(btn => {
+ btn.addEventListener('click', () => {
+ const cid = parseInt(btn.dataset.openConv, 10);
+ closeModal(DOM.convModal);
+ switchConversation(cid);
+ });
+ });
+ }
+
+ DOM.newChatBtn.addEventListener('click', async () => {
+ const peerId = parseInt(DOM.convModal.dataset.peerId, 10);
+ const peerName = DOM.convModal.dataset.peerName;
+ if (!peerId) return;
+ const btn = DOM.newChatBtn;
+ btn.disabled = true;
+ btn.innerHTML = ' Creating…';
+ const finish = () => { btn.disabled = false; btn.innerHTML = ' Start New Chat'; };
+ try {
+ if (wsOpen()) {
+ wsSend({ type: 'create_dm', user_id: peerId });
+ // The dm_created event switches conversation automatically.
+ // Close the modal: outcome arrives via ws in ms.
+ closeModal(DOM.convModal);
+ finish();
+ return;
+ }
+ const res = await fetch(`${API}/api/conversations/dm?user_id=${peerId}`, {
+ method: 'POST', headers: { 'X-Auth-Token': State.token }
+ });
+ const data = await res.json().catch(() => ({}));
+ if (!res.ok) throw new Error(data.detail || 'Could not start chat');
+ upsertConversation(data.conversation);
+ closeModal(DOM.convModal);
+ switchConversation(data.conversation.id);
+ showToast(`Private chat with ${peerName} started`, 'success');
+ } catch (err) {
+ showToast(err.message, 'error');
+ finish();
+ }
+ });
+
+ // ============================================================
+ // Uploads (attach, paste, drag & drop)
+ // ============================================================
+ DOM.attachBtn.addEventListener('click', () => DOM.fileInput.click());
+ DOM.fileInput.addEventListener('change', async (e) => {
+ const file = e.target.files[0];
+ e.target.value = '';
+ if (!file) return;
+ await uploadChunked(file);
+ });
+
+ DOM.messageInput.addEventListener('paste', (e) => {
+ const items = e.clipboardData && e.clipboardData.items;
+ if (!items) return;
+ for (const item of items) {
+ if (item.type && item.type.startsWith('image/')) {
+ e.preventDefault();
+ const file = item.getAsFile();
+ if (file) uploadChunked(file);
+ break;
+ }
+ }
+ });
+
+ // drag & drop onto the chat window
+ let dragDepth = 0;
+ DOM.chatScreen.addEventListener('dragenter', (e) => {
+ if (!e.dataTransfer || ![...(e.dataTransfer.types || [])].includes('Files')) return;
+ dragDepth++;
+ DOM.dropOverlay.classList.remove('hidden');
+ });
+ DOM.chatScreen.addEventListener('dragover', (e) => { e.preventDefault(); });
+ DOM.chatScreen.addEventListener('dragleave', () => {
+ dragDepth = Math.max(0, dragDepth - 1);
+ if (!dragDepth) DOM.dropOverlay.classList.add('hidden');
+ });
+ DOM.chatScreen.addEventListener('drop', async (e) => {
+ e.preventDefault();
+ dragDepth = 0;
+ DOM.dropOverlay.classList.add('hidden');
+ const files = e.dataTransfer && e.dataTransfer.files;
+ if (!files || !files.length) return;
+ const file = files[0];
+ if (files.length > 1) showToast('Attaching the first file (one per message)', 'info');
+ await uploadChunked(file);
+ });
+
+ async function uploadChunked(file) {
+ if (file.size > 500 * 1024 * 1024) {
+ showToast('File too large (max 500MB)', 'error');
+ return;
+ }
+ const CHUNK_SIZE = 5 * 1024 * 1024;
+ const totalChunks = Math.max(1, Math.ceil(file.size / CHUNK_SIZE));
+ const uploadId = generateId();
+ DOM.uploadProgress.classList.remove('hidden');
+ updateProgress(0, file.name, file.size);
+
+ for (let i = 0; i < totalChunks; i++) {
+ const blob = file.slice(i * CHUNK_SIZE, Math.min((i + 1) * CHUNK_SIZE, file.size));
+ const formData = new FormData();
+ formData.append('file', blob);
+ const url = `${API}/api/upload/chunk?chunk_index=${i}&total_chunks=${totalChunks}` +
+ `&file_name=${encodeURIComponent(file.name)}&file_type=${encodeURIComponent(file.type || 'application/octet-stream')}` +
+ `&file_size=${file.size}&upload_id=${uploadId}`;
+ try {
+ const res = await fetch(url, {
+ method: 'POST', body: formData, headers: { 'X-Auth-Token': State.token }
+ });
+ if (!res.ok) {
+ const data = await res.json().catch(() => ({}));
+ throw new Error(data.detail || 'Upload failed');
+ }
+ const data = await res.json();
+ updateProgress(((i + 1) / totalChunks) * 100, file.name, file.size);
+ if (data.status === 'complete') {
+ State.pendingFile = {
+ file_path: data.file_path,
+ file_type: data.file_type || file.type,
+ file_name: data.file_name,
+ file_size: data.file_size
+ };
+ showUploadPreview(State.pendingFile);
+ DOM.uploadProgress.classList.add('hidden');
+ DOM.sendBtn.disabled = false;
+ DOM.messageInput.focus();
+ return;
+ }
+ } catch (err) {
+ showToast('Upload failed: ' + err.message, 'error');
+ DOM.uploadProgress.classList.add('hidden');
+ return;
+ }
+ }
+ DOM.uploadProgress.classList.add('hidden');
+ }
+
+ function updateProgress(percent, filename, size) {
+ DOM.progressFill.style.width = `${percent}%`;
+ DOM.progressText.textContent = `${Math.round(percent)}%`;
+ if (filename) DOM.uploadFilename.textContent = filename;
+ if (size !== undefined) DOM.uploadSize.textContent = formatFileSize(size);
+ }
+
+ function showUploadPreview(pf) {
+ const ft = (pf.file_type || '').toLowerCase();
+ DOM.uploadIcon.className = 'fas ' + (ft.startsWith('image/') ? 'fa-image'
+ : ft.startsWith('video/') ? 'fa-video'
+ : ft.startsWith('audio/') ? 'fa-music' : 'fa-paperclip');
+ DOM.uploadFilename.textContent = pf.file_name;
+ DOM.uploadSize.textContent = formatFileSize(pf.file_size);
+ DOM.uploadPreview.classList.remove('hidden');
+ }
+
+ function clearPendingFile() {
+ State.pendingFile = null;
+ DOM.uploadPreview.classList.add('hidden');
+ }
+
+ DOM.cancelUpload.addEventListener('click', () => {
+ clearPendingFile();
+ DOM.sendBtn.disabled = DOM.messageInput.value.trim().length === 0;
+ });
+
+ // ============================================================
+ // Emoji picker
+ // ============================================================
+ DOM.emojiBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ DOM.emojiPicker.classList.toggle('hidden');
+ if (!DOM.emojiPicker.classList.contains('hidden')) renderEmojis('smileys');
+ });
+ document.addEventListener('click', (e) => {
+ if (!DOM.emojiPicker.contains(e.target) && e.target !== DOM.emojiBtn) {
+ DOM.emojiPicker.classList.add('hidden');
+ }
+ });
+
+ const emojiSets = {
+ smileys: ['😀','😃','😄','😁','😅','😂','🤣','😊','😇','🙂','😉','😌','😍','🥰','😘','😗','😋','😛','😜','🤪','😝','🤑','🤗','🤭','🤫','🤔','🤐','🤨','😐','😑','😶','😏','😒','🙄','😬','😮','🤥','😔','😪','🤤','😴','😷','🤒','🤕','🤢','🤮','🤧','😵','🤯','🥵','🥶','😎','🤓','🧐','😕','😟','🙁','😮','😯','😲','😳','🥺','😦','😧','😨','😰','😥','😢','😭','😱','😖','😣','😞','😓','😩','😫','🥱','😤','😡','😠','🤬','😈','👿','💀','☠️','💩','🤡','👹','👺','👻','👽','👾','🤖'],
+ people: ['👶','🧒','👦','👧','🧑','👱','👨','🧔','👩','🧓','👴','👵','👲','👳','🧕','👮','👷','💂','🕵️','👨⚕️','👩⚕️','👨🎓','👩🎓','👨🏫','👩🏫','👨⚖️','👩⚖️','👨🌾','👩🌾','👨🍳','👩🍳','👨🔧','👩🔧','👨🏭','👩🏭','👨💼','👩💼','👨🔬','👩🔬','👨💻','👩💻','👨🎤','👩🎤','👨🎨','👩🎨','👨✈️','👩✈️','👨🚀','👩🚀','👨🚒','👩🚒'],
+ animals: ['🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐨','🐯','🦁','🐮','🐷','🐸','🐵','🙈','🙉','🙊','🐒','🐔','🐧','🐦','🐤','🦆','🦅','🦉','🦇','🐺','🐗','🐴','🦄','🐝','🐛','🦋','🐌','🐞','🐜','🦟','🦗','🕷️','🦂','🐢','🐍','🦎','🐙','🦑','🦐','🦞','🦀','🐡','🐠','🐟','🐬','🐳','🐋','🦈','🐊','🐅','🐆','🦓','🦍','🐘','🦛','🦏','🐪','🐫','🦒','🦘','🐃','🐂','🐄','🐎','🐖','🐏','🐑','🦙','🐐','🦌','🐕','🐩','🐈','🐓','🦃','🦚','🦜','🦢','🦩','🕊️','🐇','🦝','🦨','🦡','🦦','🦥','🐁','🐀','🐿️','🦔'],
+ food: ['🍏','🍎','🍐','🍊','🍋','🍌','🍉','🍇','🍓','🫐','🍈','🍒','🍑','🥭','🍍','🥥','🥝','🍅','🍆','🥑','🥦','🥬','🥒','🌶️','🌽','🥕','🧄','🧅','🥔','🍠','🥐','🍞','🥖','🥨','🧀','🥚','🍳','🧈','🥞','🧇','🥓','🥩','🍗','🍖','🌭','🍔','🍟','🍕','🥪','🥙','🧆','🌮','🌯','🥗','🥘','🥫','🍝','🍜','🍲','🍛','🍣','🍱','🥟','🦪','🍤','🍙','🍚','🍘','🍥','🥠','🥮','🍢','🍡','🍧','🍨','🍦','🥧','🧁','🍰','🎂','🍮','🍭','🍬','🍫','🍿','🍩','🍪','🌰','🥜','🍯','🥛','🍼','☕','🍵','🧃','🥤','🧋','🍺','🍻','🥂','🍷','🥃','🍸','🍹','🍾'],
+ activities: ['⚽','🏀','🏈','⚾','🥎','🎾','🏐','🏉','🥏','🎱','🏓','🏸','🏒','🏑','🥍','🏏','🥅','⛳','🏹','🎣','🤿','🥊','🥋','🎽','🛹','🛼','🛷','⛸️','🥌','🎿','⛷️','🏂','🪂','🏋️','🤼','🤸','⛹️','🤾','🏌️','🏇','🧘','🏄','🏊','🤽','🚣','🧗','🚵','🚴','🏆','🥇','🥈','🥉','🏅','🎖️','🏵️','🎗️','🎫','🎟️','🎪','🤹','🎭','🩰','🎨','🎬','🎤','🎧','🎼','🎹','🥁','🎷','🎺','🎸','🎻','🎲','♟️','🎯','🎳','🎮','🎰','🧩'],
+ objects: ['⌚','📱','💻','⌨️','🖥️','🖨️','🖱️','💽','💾','💿','📀','📼','📷','📸','📹','🎥','📞','☎️','📺','📻','🧭','⏱️','⏲️','⏰','🕰️','⌛','📡','🔋','🔌','💡','🔦','🕯️','🧯','💸','💵','💴','💶','💷','🪙','💰','💳','💎','⚖️','🧰','🔧','🔨','⚒️','🛠️','⛏️','🪚','🔩','⚙️','🧲','🔫','💣','🧨','🔪','🗡️','⚔️','🛡️','🚬','⚰️','🪦','⚱️','🏺','🔮','📿','💈','⚗️','🔭','🔬','💊','💉','🩸','🧬','🦠','🧫','🧪','🌡️','🧹','🧺','🧻','🚽','🚰','🚿','🛁','🧼','🪥','🪒','🧽','🪣','🧴','🪢','🧷'],
+ symbols: ['❤️','🧡','💛','💚','💙','💜','🖤','🤍','🤎','💔','❣️','💕','💞','💓','💗','💖','💘','💝','💟','☮️','✝️','☪️','🕉️','☸️','✡️','🔯','🕎','☯️','☦️','🛐','⛎','♈','♉','♊','♋','♌','♍','♎','♏','♐','♑','♒','♓','🆔','⚛️','☢️','☣️','📴','📳','🈶','🈚','🈸','🈺','🈷️','✴️','🆚','💮','🉐','㊙️','㊗️','🈴','🈵','🈹','🈲','🅰️','🅱️','🆎','🆑','🅾️','🆘','❌','⭕','🛑','⛔','📛','🚫','💯','💢','♨️','❗','❕','❓','❔','‼️','⁉️','⚠️','🚸','🔱','⚜️','🔰','♻️','✅','❇️','✳️','❎','🌐','💠','Ⓜ️','🌀','💤','🏧','♿','🅿️','🚹','🚺','🚻','🚮','🎦','📶','ℹ️','🔤','🔡','🔠','🆖','🆗','🆙','🆒','🆕','🆓','0️⃣','1️⃣','2️⃣','3️⃣','4️⃣','5️⃣','6️⃣','7️⃣','8️⃣','9️⃣','🔟','#️⃣','*️⃣','▶️','⏸️','⏹️','⏺️','⏭️','⏮️','⏩','⏪','⏫','⏬','◀️','🔼','🔽','➡️','⬅️','⬆️','⬇️','↗️','↘️','↙️','↖️','↕️','↔️','↪️','↩️','⤴️','⤵️','🔀','🔁','🔂','🔄','🔃','🎵','🎶','➕','➖','➗','✖️','♾️','💲','💱','™️','©️','®️','〰️','➰','➿','✔️','☑️'],
+ flags: ['🏁','🚩','🎌','🏴','🏳️','🏳️🌈','🏳️⚧️','🏴☠️','🇺🇸','🇬🇧','🇨🇦','🇦🇺','🇩🇪','🇫🇷','🇯🇵','🇨🇳','🇷🇺','🇧🇷','🇮🇳','🇰🇷','🇪🇸','🇮🇹','🇲🇽','🇿🇦','🇸🇪','🇳🇴','🇩🇰','🇫🇮','🇳🇱','🇧🇪','🇦🇹','🇨🇭','🇵🇱','🇵🇹','🇬🇷','🇹🇷','🇸🇦','🇦🇪','🇮🇱','🇮🇷','🇵🇰','🇧🇩','🇻🇳','🇹🇭','🇮🇩','🇲🇾','🇵🇭','🇸🇬','🇳🇿','🇦🇷','🇨🇱','🇨🇴','🇵🇪','🇻🇪','🇺🇾','🇪🇨','🇧🇴','🇵🇾','🇬🇹','🇨🇺','🇩🇴']
+ };
+
+ document.querySelectorAll('.emoji-cat').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ document.querySelectorAll('.emoji-cat').forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+ renderEmojis(btn.dataset.cat);
+ });
+ });
+
+ function renderEmojis(category) {
+ const emojis = emojiSets[category] || [];
+ DOM.emojiGrid.innerHTML = emojis.map(e => ``).join('');
+ DOM.emojiGrid.querySelectorAll('.emoji-item').forEach(btn => {
+ btn.addEventListener('click', () => {
+ DOM.messageInput.value += btn.textContent;
+ DOM.messageInput.focus();
+ DOM.messageInput.dispatchEvent(new Event('input'));
+ DOM.emojiPicker.classList.add('hidden');
+ });
+ });
+ }
+
+ // ============================================================
+ // Load older
+ // ============================================================
+ DOM.loadOlderBtn.addEventListener('click', () => {
+ const convId = State.activeConvId;
+ const cache = getConv(convId);
+ if (wsOpen() && cache.hasMore && cache.cursor && !cache.loading) {
+ cache.loading = true;
+ loadMessages(convId, { older: true });
+ }
+ });
+
+ // ============================================================
+ // Online users
+ // ============================================================
+ DOM.onlineBtn.addEventListener('click', () => {
+ renderOnlineUsers();
+ openModal(DOM.onlineModal);
+ requestOnlineUsers();
+ });
+
+ function requestOnlineUsers() {
+ if (wsOpen()) wsSend({ type: 'get_online_users' });
+ }
+
+ function updateOnlineBadge() {
+ DOM.onlineBadge.textContent = State.onlineUsers.size;
+ DOM.onlineBadge.classList.toggle('hidden', State.onlineUsers.size === 0);
+ }
+
+ function renderOnlineUsers() {
+ DOM.onlineUsersList.innerHTML = '';
+ if (!State.onlineUsers.size) {
+ DOM.onlineUsersList.innerHTML = 'No users online
';
+ DOM.onlineTotal.textContent = '0 users online';
+ return;
+ }
+ State.onlineUsers.forEach(u => {
+ if (u.id === State.user?.id) return; // don't list yourself
+ const div = document.createElement('div');
+ div.className = 'user-item';
+ const av = u.avatar_path
+ ? `${av}
+ `;
+ DOM.onlineUsersList.appendChild(div);
+ });
+ DOM.onlineTotal.textContent = `${State.onlineUsers.size - (State.onlineUsers.has(State.user?.id) ? 1 : 0)} user${State.onlineUsers.size !== 1 ? 's' : ''} online`;
+ }
+
+ // ============================================================
+ // Settings
+ // ============================================================
+ function openSettings() {
+ DOM.settingsDisplayName.value = State.user?.display_name || '';
+ DOM.settingsUsername.value = State.user?.username || '';
+ DOM.pwCurrent.value = '';
+ DOM.pwNew.value = '';
+ DOM.pwMsg.textContent = '';
+
+ if (State.user?.avatar_path) {
+ DOM.settingsAvatarImg.src = fileUrl(State.user.avatar_path);
+ DOM.settingsAvatarImg.classList.remove('hidden');
+ DOM.settingsAvatarPreview.classList.add('hidden');
+ } else {
+ DOM.settingsAvatarImg.classList.add('hidden');
+ DOM.settingsAvatarPreview.classList.remove('hidden');
+ }
+
+ DOM.themeOptions.forEach(opt => opt.classList.toggle('active', opt.dataset.theme === State.theme));
+ DOM.customThemeSettings.classList.toggle('hidden', State.theme !== 'custom');
+ if (State.theme === 'custom') {
+ DOM.customSelfColor.value = State.customColors.self;
+ DOM.customOtherColor.value = State.customColors.other;
+ DOM.customTextColor.value = State.customColors.text;
+ DOM.selfColorHex.textContent = State.customColors.self;
+ DOM.otherColorHex.textContent = State.customColors.other;
+ DOM.textColorHex.textContent = State.customColors.text;
+ }
+ DOM.aboutVersion.textContent = APP_VERSION;
+ applyPrefs();
+ openModal(DOM.settingsModal);
+ }
+
+ DOM.settingsBtn.addEventListener('click', openSettings);
+ DOM.meSettingsBtn.addEventListener('click', openSettings);
+
+ async function saveSettings() {
+ const newName = DOM.settingsDisplayName.value.trim();
+ if (newName && newName !== State.user?.display_name) {
+ try {
+ const res = await fetch(`${API}/api/profile?display_name=${encodeURIComponent(newName)}`, {
+ method: 'PATCH', headers: { 'X-Auth-Token': State.token }
+ });
+ if (res.ok) {
+ State.user.display_name = newName;
+ updateSidebarMe();
+ renderSidebar();
+ renderConversationHeader(State.activeConvId);
+ showToast('Display name updated', 'success');
+ } else {
+ const data = await res.json().catch(() => ({}));
+ throw new Error(data.detail || 'Failed');
+ }
+ } catch (e) { showToast('Failed to update name', 'error'); }
+ }
+
+ const avatarFile = DOM.avatarInput.files[0];
+ if (avatarFile) {
+ const formData = new FormData();
+ formData.append('file', avatarFile);
+ DOM.avatarUploadBtn.disabled = true;
+ DOM.avatarUploadBtn.innerHTML = '';
+ try {
+ const res = await fetch(`${API}/api/profile/avatar`, {
+ method: 'POST', body: formData, headers: { 'X-Auth-Token': State.token }
+ });
+ if (res.ok) {
+ const data = await res.json();
+ State.user.avatar_path = data.avatar_path;
+ DOM.settingsAvatarImg.src = fileUrl(data.avatar_path);
+ DOM.settingsAvatarImg.classList.remove('hidden');
+ DOM.settingsAvatarPreview.classList.add('hidden');
+ updateSidebarMe();
+ renderSidebar();
+ renderConversationHeader(State.activeConvId);
+ showToast('Avatar updated', 'success');
+ } else {
+ const data = await res.json().catch(() => ({}));
+ throw new Error(data.detail || 'Upload failed');
+ }
+ } catch (e) {
+ showToast(e.message, 'error');
+ } finally {
+ DOM.avatarUploadBtn.disabled = false;
+ DOM.avatarUploadBtn.innerHTML = ' Change Photo';
+ }
+ }
+
+ State.prefs.autoScroll = DOM.toggleAutoScroll.checked;
+ State.prefs.showScrollBtn = DOM.toggleScrollBtn.checked;
+ State.prefs.showLatestBar = DOM.toggleLatestBar.checked;
+ State.prefs.sound = DOM.toggleSound.checked;
+ State.prefs.enterSend = DOM.toggleEnterSend.checked;
+ savePrefs();
+
+ const selectedTheme = document.querySelector('.theme-option.active')?.dataset.theme || 'light';
+ if (selectedTheme === 'custom') {
+ State.customColors.self = DOM.customSelfColor.value;
+ State.customColors.other = DOM.customOtherColor.value;
+ State.customColors.text = DOM.customTextColor.value;
+ localStorage.setItem('custom-self', State.customColors.self);
+ localStorage.setItem('custom-other', State.customColors.other);
+ localStorage.setItem('custom-text', State.customColors.text);
+ }
+ applyTheme(selectedTheme);
+ closeModal(DOM.settingsModal);
+ }
+
+ DOM.customSelfColor.addEventListener('input', () => { DOM.selfColorHex.textContent = DOM.customSelfColor.value; });
+ DOM.customOtherColor.addEventListener('input', () => { DOM.otherColorHex.textContent = DOM.customOtherColor.value; });
+ DOM.customTextColor.addEventListener('input', () => { DOM.textColorHex.textContent = DOM.customTextColor.value; });
+
+ DOM.themeOptions.forEach(opt => {
+ opt.addEventListener('click', () => {
+ DOM.themeOptions.forEach(o => o.classList.remove('active'));
+ opt.classList.add('active');
+ DOM.customThemeSettings.classList.toggle('hidden', opt.dataset.theme !== 'custom');
+ if (opt.dataset.theme === 'custom') {
+ DOM.customSelfColor.value = State.customColors.self;
+ DOM.customOtherColor.value = State.customColors.other;
+ DOM.customTextColor.value = State.customColors.text;
+ DOM.selfColorHex.textContent = State.customColors.self;
+ DOM.otherColorHex.textContent = State.customColors.other;
+ DOM.textColorHex.textContent = State.customColors.text;
+ }
+ });
+ });
+
+ DOM.avatarUploadBtn.addEventListener('click', () => DOM.avatarInput.click());
+ DOM.avatarInput.addEventListener('change', () => {
+ const file = DOM.avatarInput.files[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ DOM.settingsAvatarImg.src = e.target.result;
+ DOM.settingsAvatarImg.classList.remove('hidden');
+ DOM.settingsAvatarPreview.classList.add('hidden');
+ };
+ reader.readAsDataURL(file);
+ }
+ });
+
+ document.getElementById('save-settings').addEventListener('click', saveSettings);
+
+ DOM.pwChangeBtn.addEventListener('click', async () => {
+ const current = DOM.pwCurrent.value;
+ const next = DOM.pwNew.value;
+ if (!current || next.length < 6) {
+ DOM.pwMsg.textContent = 'Enter your current password and a new one (6+ characters)';
+ DOM.pwMsg.className = 'form-hint error';
+ return;
+ }
+ DOM.pwChangeBtn.disabled = true;
+ DOM.pwChangeBtn.innerHTML = '';
+ try {
+ const res = await fetch(
+ `${API}/api/profile/password?current_password=${encodeURIComponent(current)}&new_password=${encodeURIComponent(next)}`,
+ { method: 'POST', headers: { 'X-Auth-Token': State.token } }
+ );
+ const data = await res.json().catch(() => ({}));
+ if (!res.ok) throw new Error(data.detail || 'Failed');
+ DOM.pwMsg.textContent = 'Password updated successfully';
+ DOM.pwMsg.className = 'form-hint success';
+ DOM.pwCurrent.value = '';
+ DOM.pwNew.value = '';
+ } catch (err) {
+ DOM.pwMsg.textContent = err.message;
+ DOM.pwMsg.className = 'form-hint error';
+ } finally {
+ DOM.pwChangeBtn.disabled = false;
+ DOM.pwChangeBtn.innerHTML = ' Change Password';
+ }
+ });
+
+ // ============================================================
+ // Auth lifecycle
+ // ============================================================
+ async function init() {
+ applyPrefs();
+ DOM.aboutVersion.textContent = APP_VERSION;
+ if (State.token) {
+ try {
+ const res = await fetch(`${API}/api/auth/verify`, { headers: { 'X-Auth-Token': State.token } });
+ if (res.ok) {
+ const data = await res.json();
+ State.user = data.user;
+ showChat();
+ connectWebSocket();
+ return;
+ }
+ } catch (e) { /* fall through to auth screen */ }
+ localStorage.removeItem('token');
+ State.token = null;
+ }
+ showAuth();
+ }
+
+ function showAuth() {
+ State.wsState = 'disconnected';
+ DOM.authScreen.classList.add('active');
+ DOM.chatScreen.classList.remove('active');
+ }
+
+ function showChat() {
+ DOM.authScreen.classList.remove('active');
+ DOM.chatScreen.classList.add('active');
+ updateSidebarMe();
+ }
+
+ function updateSidebarMe() {
+ if (!State.user) return;
+ DOM.sbMeName.textContent = displayNameOf(State.user);
+ if (State.user.avatar_path) {
+ DOM.sbMeAvatar.src = fileUrl(State.user.avatar_path);
+ DOM.sbMeAvatar.classList.remove('hidden');
+ DOM.sbMeAvatarPh.classList.add('hidden');
+ } else {
+ DOM.sbMeAvatar.classList.add('hidden');
+ DOM.sbMeAvatarPh.classList.remove('hidden');
+ }
+ }
+
+ function forceLogout() {
+ showToast('Session expired - please sign in again', 'warning');
+ localStorage.removeItem('token');
+ State.token = null;
+ State.wsState = 'disconnected';
+ if (State.ws) { try { State.ws.close(); } catch (e) { /* noop */ } }
+ State.ws = null;
+ resetAllState();
+ showAuth();
+ }
+
+ function resetAllState() {
+ State.user = null;
+ State.conversations.clear();
+ State.conversationOrder = [];
+ State.convCache.clear();
+ State.messages.clear();
+ State.tombstoned.clear();
+ State.pendingSends.clear();
+ State.onlineUsers.clear();
+ State.typingUsers.clear();
+ State.activeConvId = null;
+ State.cursor = null;
+ State.replyTo = null;
+ State.pendingFile = null;
+ State.latestUnseen = null;
+ State.editingId = null;
+ DOM.messagesList.innerHTML = '';
+ DOM.convList.innerHTML = '';
+ DOM.sidebar.classList.remove('open');
+ DOM.sidebarBackdrop.classList.add('hidden');
+ DOM.loadOlderBtn.classList.add('hidden');
+ DOM.emptyState.style.display = 'flex';
+ hideLatestBar();
+ updateOnlineBadge();
+ updateTitleUnread();
+ clearReply();
+ clearPendingFile();
+ DOM.messageInput.value = '';
+ DOM.sendBtn.disabled = true;
+ DOM.uploadProgress.classList.add('hidden');
+ DOM.onlineModal.classList.add('hidden');
+ DOM.settingsModal.classList.add('hidden');
+ DOM.convModal.classList.add('hidden');
+ DOM.receiptsModal.classList.add('hidden');
+ DOM.confirmModal.classList.add('hidden');
+ DOM.lightboxModal.classList.add('hidden');
+ DOM.emojiPicker.classList.add('hidden');
+ openModals.length = 0;
+ document.body.style.overflow = '';
+ }
+
+ function doLogout() {
+ if (State.token) {
+ fetch(`${API}/api/auth/logout`, { method: 'POST', headers: { 'X-Auth-Token': State.token } }).catch(() => { });
+ }
+ if (State.ws) { try { State.ws.close(); } catch (e) { /* noop */ } }
+ State.ws = null;
+ localStorage.removeItem('token');
+ State.token = null;
+ resetAllState();
+ showAuth();
+ }
+
+ DOM.logoutBtn.addEventListener('click', () => {
+ showConfirm({
+ title: 'Log out',
+ message: 'Log out of InfinityChat on this device?',
+ okText: 'Log Out',
+ danger: false
+ }).then(ok => { if (ok) doLogout(); });
+ });
+ DOM.sidebarLogoutBtn.addEventListener('click', () => {
+ showConfirm({
+ title: 'Log out',
+ message: 'Log out of InfinityChat on this device?',
+ okText: 'Log Out',
+ danger: false
+ }).then(ok => { if (ok) doLogout(); });
+ });
+
+ document.querySelectorAll('.input-toggle').forEach(btn => {
+ btn.addEventListener('click', () => {
+ const input = document.getElementById(btn.dataset.toggle);
+ if (input) {
+ input.type = input.type === 'password' ? 'text' : 'password';
+ const icon = btn.querySelector('i');
+ if (icon) icon.className = input.type === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash';
+ }
+ });
+ });
+
+ // ============================================================
+ // Go
+ // ============================================================
+ init();
+})();
\ No newline at end of file