nodebb-plugin-admin-chats 1.1.0 → 2.1.0

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "kiroAgent.configureMCP": "Disabled"
+}

package/client.js

@@ -1,150 +1,349 @@
 $(document).ready(function() {
     const LOCK_PREFIX = '[admin-chat-lock]';
-    const LOCKED_MESSAGE_TEXT = '🔒 חדר זה ננעל ע"י המנהלים.';
+    const roomStateCache = new Map();
+    const TEXT = {
+        he: {
+            lockBanner: '🔒 חדר זה ננעל ע"י המנהלים.',
+            menuLock: 'נעל חדר',
+            menuRelease: 'שחרר נעילה',
+            updateError: 'לא ניתן לעדכן את נעילת החדר.',
+            viewChats: "צפיה בצ'אטים",
+            emptyState: "אנא בחר צ'אט מסרגל הצד.",
+            participants: 'משתתפים',
+        },
+        en: {
+            lockBanner: '🔒 This room was locked by the administrators.',
+            menuLock: 'Lock Room',
+            menuRelease: 'Release Lock',
+            updateError: 'Unable to update room lock.',
+            viewChats: 'View Chats',
+            emptyState: 'Please select a chat from the sidebar.',
+            participants: 'Participants',
+        },
+    };
 
     function isEnglishSystem() {
         return $('html').attr('lang') && $('html').attr('lang').startsWith('en');
     }
 
-    function replaceAdminEmptyStateText() {
-        if (!app.user.isAdmin) return;
+    function t(key) {
+        const dict = isEnglishSystem() ? TEXT.en : TEXT.he;
+        return dict[key];
+    }
 
-        $('span.text-muted.text-sm').each(function() {
-            const currentText = $(this).text().trim();
+    // Get lockedAction message from server translations only (based on forum settings)
+    function getLockedActionMessage() {
+        if (window.adminChatsTranslations && window.adminChatsTranslations.lockedAction) {
+            return window.adminChatsTranslations.lockedAction;
+        }
+        // If server translation not available, default to English
+        return 'This action cannot be performed in a locked room.';
+    }
 
-            if (currentText.includes("אין לכם צ'אטים פעילים") || currentText === "אין לכם צ'אטים פעילים.") {
-                $(this).text("אנא בחר צ'אט מסרגל הצד.");
-                $(this).removeClass('text-muted');
+    function isAdminAllChatsPage() {
+        return !!(ajaxify && ajaxify.data && ajaxify.data.adminAllChats);
+    }
+
+    function getAdminChatsPageUrl(roomId) {
+        return roomId ? `chats/${roomId}` : 'chats';
+    }
+
+    function getAdminChatsDataUrl(roomId) {
+        const params = new URL(document.location).searchParams;
+        params.set('switch', 1);
+        const query = params.toString();
+        return `${config.relative_path || ''}/api/admin-chats/page${roomId ? `/${roomId}` : ''}${query ? `?${query}` : ''}`;
+    }
+
+    async function loadMoreAdminChats() {
+        const recentChats = $('[component="chat/recent"]');
+        if (!isAdminAllChatsPage() || !recentChats.length || recentChats.attr('loading')) {
+            return;
+        }
+
+        recentChats.attr('loading', 1);
+
+        try {
+            const start = parseInt(recentChats.attr('data-nextstart'), 10) || 0;
+            const response = await fetch(`${config.relative_path || ''}/api/admin-chats?start=${start}`, {
+                headers: {
+                    'x-csrf-token': config.csrf_token,
+                },
+                credentials: 'same-origin',
+            });
+
+            if (!response.ok) {
+                throw new Error('Unable to load chats');
             }
 
-            if (currentText.includes('You have no active chats') || currentText === 'You have no active chats.') {
-                $(this).text('Please select a chat from the sidebar.');
-                $(this).removeClass('text-muted');
+            const payload = await response.json();
+            if (payload.rooms && payload.rooms.length) {
+                payload.loadingMore = true;
+                const html = await app.parseAndTranslate('chats', 'rooms', payload);
+                recentChats.append(html);
+                html.find('.timeago').timeago();
+                recentChats.attr('data-nextstart', payload.nextStart);
             }
+        } catch (err) {
+            app.alertError(err);
+        } finally {
+            recentChats.removeAttr('loading');
+        }
+    }
+
+    function bindAdminRecentChatsInfiniteScroll() {
+        if (!isAdminAllChatsPage()) {
+            return;
+        }
+
+        $('[component="chat/recent"]').off('scroll').on('scroll', utils.debounce(function() {
+            const $this = $(this);
+            const bottom = ($this[0].scrollHeight - $this.height()) * 0.9;
+            if ($this.scrollTop() > bottom) {
+                loadMoreAdminChats();
+            }
+        }, 100));
+    }
+
+    function patchForumChatsForAdminAll() {
+        if (!isAdminAllChatsPage()) {
+            return;
+        }
+
+        require(['forum/chats', 'forum/chats/messages'], function(Chats, ChatsMessages) {
+            if (!Chats) {
+                return;
+            }
+
+            if (!Chats._adminAllChatsPatched) {
+                const originalSwitchChat = Chats.switchChat;
+
+                Chats.switchChat = function(roomId) {
+                    if (!isAdminAllChatsPage()) {
+                        return originalSwitchChat.call(this, roomId);
+                    }
+
+                    roomId = roomId || '';
+                    Chats.destroyAutoComplete(ajaxify.data.roomId);
+                    socket.emit('modules.chats.leave', ajaxify.data.roomId);
+
+                    const url = getAdminChatsPageUrl(roomId);
+                    fetch(getAdminChatsDataUrl(roomId), { credentials: 'include' })
+                        .then(async function(response) {
+                            if (!response.ok) {
+                                throw new Error(`Received ${response.status}`);
+                            }
+
+                            const payload = await response.json();
+                            const html = await app.parseAndTranslate('partials/chats/message-window', payload);
+                            const mainWrapper = $('[component="chat/main-wrapper"]');
+                            mainWrapper.html(html);
+                            mainWrapper.attr('data-roomid', roomId);
+                            html.find('.timeago').timeago();
+                            ajaxify.data = { ...ajaxify.data, ...payload, roomId: roomId };
+                            ajaxify.updateTitle(ajaxify.data.title);
+                            $('body').toggleClass('chat-loaded', !!roomId);
+                            mainWrapper.find('[data-bs-toggle="tooltip"]').tooltip({ trigger: 'hover', container: '#content' });
+                            Chats.setActive(roomId);
+                            Chats.addEventListeners();
+                            $(window).trigger('action:chat.loaded');
+                            if (roomId) {
+                                ChatsMessages.scrollToBottomAfterImageLoad(mainWrapper.find('[component="chat/message/content"]'));
+                            }
+                            if (history.pushState) {
+                                history.pushState({ url: url }, null, `${window.location.protocol}//${window.location.host}${config.relative_path || ''}/${url}`);
+                            }
+                            bindAdminRecentChatsInfiniteScroll();
+                        });
+                };
+
+                Chats._adminAllChatsPatched = true;
+            }
+
+            bindAdminRecentChatsInfiniteScroll();
         });
     }
 
-    function getRoomData() {
-        if (!ajaxify || !ajaxify.data) {
-            return null;
+    function replaceAdminEmptyStateText() {
+        if (!app.user.isAdmin) {
+            return;
         }
 
-        return ajaxify.data.room || ajaxify.data;
+        $('span.text-muted.text-sm').each(function() {
+            const currentText = $(this).text().trim();
+            if (
+                currentText.includes("אין לכם צ'אטים פעילים") ||
+                currentText === "אין לכם צ'אטים פעילים." ||
+                currentText.includes('You have no active chats') ||
+                currentText === 'You have no active chats.'
+            ) {
+                $(this).text(t('emptyState'));
+                $(this).removeClass('text-muted');
+            }
+        });
+    }
+
+    function getChatWindows() {
+        return $('[component="chat/message/window"]');
+    }
+
+    function getWindowRoomId($window) {
+        const roomId = $window.find('[component="chat/messages"]').first().attr('data-roomid') ||
+            $window.closest('.chat-modal').attr('data-roomid') ||
+            (ajaxify && ajaxify.data && ajaxify.data.roomId);
+        return parseInt(roomId, 10) || 0;
     }
 
-    function getLockText() {
-        if (isEnglishSystem()) {
-            return '🔒 This room was locked by the administrators.';
+    function getCachedRoomData(roomId) {
+        const cached = roomStateCache.get(String(roomId));
+        if (!cached) {
+            return null;
+        }
+        if (Date.now() - cached.timestamp > 10000) {
+            roomStateCache.delete(String(roomId));
+            return null;
         }
+        return cached.data;
+    }
 
-        return LOCKED_MESSAGE_TEXT;
+    function setCachedRoomData(roomId, data) {
+        roomStateCache.set(String(roomId), {
+            data,
+            timestamp: Date.now(),
+        });
     }
 
-    function renderLockBanner() {
-        const roomData = getRoomData();
-        const lockData = roomData && roomData.adminChatLock;
-        $('.admin-chat-lock-banner').remove();
+    async function fetchRoomData(roomId) {
+        if (!roomId) {
+            return null;
+        }
 
-        if (!lockData || !lockData.isLocked) {
-            return;
+        const currentRoom = ajaxify && ajaxify.data && (ajaxify.data.room || ajaxify.data);
+        if (currentRoom && parseInt(currentRoom.roomId, 10) === roomId && currentRoom.adminChatLock) {
+            setCachedRoomData(roomId, currentRoom);
+            return currentRoom;
         }
 
-        const target = $('[component="chat/messages"]').first().parent();
-        if (!target.length) {
-            return;
+        const cached = getCachedRoomData(roomId);
+        if (cached) {
+            return cached;
+        }
+
+        const endpoint = isAdminAllChatsPage() ?
+            `${config.relative_path || ''}/api/admin-chats/page/${roomId}` :
+            `${config.relative_path || ''}/api/chats/${roomId}`;
+        const response = await fetch(endpoint, {
+            headers: {
+                'x-csrf-token': config.csrf_token,
+            },
+            credentials: 'same-origin',
+        });
+        if (!response.ok) {
+            return null;
         }
 
-        target.prepend(`
-            <div class="admin-chat-lock-banner alert alert-warning mb-2">${getLockText()}</div>
-        `);
+        const payload = await response.json();
+        const roomData = payload && payload.roomId ? payload : (payload && payload.room ? payload.room : null);
+        if (roomData) {
+            setCachedRoomData(roomId, roomData);
+        }
+        return roomData;
     }
 
-    function setComposerVisibility(shouldHide) {
-        const selectors = [
-            '[component="chat/composer"]',
-            '[component="chat/replies"]',
-            '[component="chat/input"]',
-            '[component="chat/textarea"]',
-            '.chat-input',
-            '.composer',
-        ];
-
-        const seen = new Set();
-        selectors.forEach(function(selector) {
-            $(selector).each(function() {
-                const $element = $(this);
-                const $container = $element.closest('[component="chat/composer"], [component="chat/replies"], .chat-input, .composer').length ?
-                    $element.closest('[component="chat/composer"], [component="chat/replies"], .chat-input, .composer').first() :
-                    $element;
-                const domNode = $container.get(0);
-
-                if (!domNode || seen.has(domNode)) {
-                    return;
-                }
+    function isLockedForUser(roomData) {
+        return !!(roomData && roomData.adminChatLock && roomData.adminChatLock.isLocked && !(app.user && app.user.isAdmin));
+    }
 
-                seen.add(domNode);
-                $container.toggle(!shouldHide);
-            });
+    function setComposerHidden($window, hidden) {
+        $window.find('[component="chat/composer"]').each(function() {
+            const $composer = $(this);
+            if (hidden) {
+                $composer.addClass('hidden').hide();
+            } else {
+                $composer.removeClass('hidden').show();
+            }
         });
+
+        $window.find('[component="chat/input"], [component="chat/send"], button[data-action="send"], textarea.chat-input')
+            .prop('disabled', hidden)
+            .attr('disabled', hidden ? 'disabled' : null);
     }
 
-    function updateComposerState() {
-        const roomData = getRoomData();
-        const lockData = roomData && roomData.adminChatLock;
-        const shouldHideComposer = !!(lockData && lockData.isLocked && !(app.user && app.user.isAdmin));
+    function renderLockBanner($window, hidden) {
+        $window.find('.admin-chat-lock-banner').remove();
+        if (!hidden) {
+            return;
+        }
+
+        const target = $window.find('[component="chat/messages"]').first();
+        if (!target.length) {
+            return;
+        }
 
-        $('[component="chat/input"], [component="chat/textarea"], textarea.chat-input, .chat-input textarea')
-            .prop('disabled', shouldHideComposer)
-            .attr('placeholder', shouldHideComposer ? getLockText() : null);
+        const positionStyle = isEnglishSystem() ? 'float:right; clear:both;' : 'float:left; clear:both;';
+        target.prepend(`<div class="admin-chat-lock-banner alert alert-warning mb-2 text-start" style="${positionStyle} max-width: fit-content;">${t('lockBanner')}</div>`);
+    }
 
-        $('[component="chat/send"], .chat-send, button[component="chat/submit"]').prop('disabled', shouldHideComposer);
+    function updateLockedActionVisibility($window, hidden) {
+        [
+            '[data-action="reply"]',
+            '[data-action="edit"]',
+            '[data-action="delete"]',
+            '[data-action="restore"]',
+            '[data-action="kick"]',
+            '[data-action="toggleOwner"]'
+        ].forEach(function(selector) {
+            $window.find(selector).toggleClass('hidden', hidden).toggle(!hidden);
+        });
 
-        setComposerVisibility(shouldHideComposer);
-        renderLockBanner();
+        $window.find('[component="chat/controlsToggle"]').closest('.dropdown').toggleClass('hidden', hidden).toggle(!hidden);
+        $window.find('[component="chat/manage/user/add/search"], [component="chat/manage/user/list/search"], [component="chat/manage/save"]')
+            .toggleClass('hidden', hidden)
+            .toggle(!hidden)
+            .prop('disabled', hidden)
+            .attr('disabled', hidden ? 'disabled' : null);
+        $window.find('[component="chat/manage-modal"] .form-text, [component="chat/manage-modal"] .text-danger')
+            .toggleClass('hidden', hidden);
     }
 
-    function normalizeLockMessages() {
-        $('[component="chat/message/content"], .chat-message-content').each(function() {
+    function normalizeLockMessages($window) {
+        $window.find('[component="chat/system-message"] > div').each(function() {
             const $el = $(this);
             const text = $el.text().trim();
-            if (!text.startsWith(LOCK_PREFIX)) {
+            if (!text.includes(LOCK_PREFIX.slice(1, -1)) && !text.includes('admin-chat-lock')) {
                 return;
             }
-
-            $el.text(text.replace(LOCK_PREFIX, '').trim());
+            $el.text(t('lockBanner'));
         });
     }
 
-    function getRoomMenuTargets() {
-        return $('[component="chat/header"], .chat-header, [component="chat/nav"]')
-            .find('.dropdown-menu');
+    function getRoomMenuTargets($window) {
+        const scoped = $window.find('[component="chat/controls"]');
+        if (scoped.length) {
+            return scoped;
+        }
+        return $window.find('[component="chat/header"], .chat-header, .modal-header, [component="chat/nav"]').find('.dropdown-menu');
     }
 
-    function renderAdminLockControl() {
-        $('.admin-chat-lock-toggle-item, .admin-chat-lock-divider').remove();
+    function renderAdminLockControl($window, roomData) {
+        $window.find('.admin-chat-lock-toggle-item, .admin-chat-lock-divider, .admin-chat-lock-item-wrap').remove();
 
-        if (!app.user.isAdmin) {
-            return;
-        }
-
-        const roomData = getRoomData();
-        const roomId = roomData && roomData.roomId;
-        if (!roomId) {
+        if (!app.user.isAdmin || !roomData || !roomData.roomId) {
             return;
         }
 
-        const menus = getRoomMenuTargets();
+        const menus = getRoomMenuTargets($window);
         if (!menus.length) {
             return;
         }
 
         const lockData = roomData.adminChatLock || {};
         const isLocked = !!lockData.isLocked;
-        const itemText = isEnglishSystem() ? (isLocked ? 'Unlock Room' : 'Lock Room') : (isLocked ? 'פתח חדר' : 'נעל חדר');
+        const itemText = isLocked ? t('menuRelease') : t('menuLock');
         const iconClass = isLocked ? 'fa-lock-open' : 'fa-lock';
         const menuItemHtml = `
             <li role="presentation" class="admin-chat-lock-item-wrap">
-                <a href="#" role="menuitem" class="dropdown-item rounded-1 d-flex align-items-center gap-2 admin-chat-lock-toggle-item" data-room-id="${roomId}" data-locked="${isLocked}">
+                <a href="#" role="menuitem" class="dropdown-item rounded-1 d-flex align-items-center gap-2 admin-chat-lock-toggle-item" data-room-id="${roomData.roomId}" data-locked="${isLocked}">
                     <i class="fa fa-fw ${iconClass}"></i>
                     <span>${itemText}</span>
                 </a>
@@ -157,11 +356,75 @@ $(document).ready(function() {
             if ($menu.find('.admin-chat-lock-toggle-item').length) {
                 return;
             }
-
             $menu.prepend(menuItemHtml);
         });
     }
 
+    async function applyUiToWindow($window) {
+        const roomId = getWindowRoomId($window);
+        if (!roomId) {
+            return;
+        }
+
+        const roomData = await fetchRoomData(roomId);
+        if (!roomData) {
+            return;
+        }
+
+        const hidden = isLockedForUser(roomData);
+        setComposerHidden($window, hidden);
+        updateLockedActionVisibility($window, hidden);
+        renderLockBanner($window, hidden);
+        renderAdminLockControl($window, roomData);
+        normalizeLockMessages($window);
+    }
+
+
+    function getAdminRoomsMap() {
+        const rooms = ajaxify && ajaxify.data && Array.isArray(ajaxify.data.rooms) ? ajaxify.data.rooms : [];
+        return new Map(rooms.map(room => [String(room.roomId), room]));
+    }
+
+    function renderAdminParticipants() {
+        if (!isAdminAllChatsPage()) {
+            return;
+        }
+
+        const roomsMap = getAdminRoomsMap();
+        $('[component="chat/recent/room"]').each(function() {
+            const $room = $(this);
+            const roomId = String($room.attr('data-roomid') || '');
+            const roomData = roomsMap.get(roomId);
+            const $container = $room.find('[component="chat/room/title"]').closest('.d-flex.flex-grow-1.flex-column.w-100');
+
+            $container.find('.admin-chat-participants').remove();
+            if (!$container.length || !roomData || !roomData.participantsLabel) {
+                return;
+            }
+
+            const html = `<div class="admin-chat-participants text-muted text-xs text-break line-clamp-2"><span class="fw-semibold">${t('participants')}:</span> ${utils.escapeHTML(roomData.participantsLabel)}</div>`;
+            $container.find('[component="chat/room/title"]').after(html);
+        });
+    }
+
+    function applyAdminAllPageTweaks() {
+        if (!isAdminAllChatsPage()) {
+            return;
+        }
+
+        $('[component="chat/recent"] .mark-read').addClass('hidden');
+        $('[data-action="leave"]').closest('li').addClass('hidden');
+        renderAdminParticipants();
+    }
+    async function refreshChatUi() {
+        replaceAdminEmptyStateText();
+        applyAdminAllPageTweaks();
+        const windows = getChatWindows();
+        await Promise.all(windows.map(function() {
+            return applyUiToWindow($(this));
+        }).get());
+    }
+
     async function toggleRoomLock(roomId, nextState) {
         const response = await fetch(`${config.relative_path || ''}/api/admin-chats/${roomId}/lock`, {
             method: 'POST',
@@ -170,6 +433,7 @@ $(document).ready(function() {
                 'x-csrf-token': config.csrf_token,
             },
             body: JSON.stringify({ locked: nextState }),
+            credentials: 'same-origin',
         });
 
         if (!response.ok) {
@@ -179,13 +443,6 @@ $(document).ready(function() {
         return await response.json();
     }
 
-    function refreshChatUi() {
-        replaceAdminEmptyStateText();
-        renderAdminLockControl();
-        updateComposerState();
-        normalizeLockMessages();
-    }
-
     $(window).on('action:ajaxify.end', function(ev, data) {
         const templateName = ajaxify && ajaxify.data && ajaxify.data.template ? ajaxify.data.template.name : '';
 
@@ -193,14 +450,12 @@ $(document).ready(function() {
             const userSlug = ajaxify.data.userslug || (ajaxify.data.user && ajaxify.data.user.userslug);
 
             if (userSlug) {
-                const buttonText = isEnglishSystem() ? 'View Chats' : "צפיה בצ'אטים";
                 const relativePath = config.relative_path || '';
-
                 const btnHtml = `
                     <li role="presentation">
                         <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="${relativePath}/user/${userSlug}/chats" role="menuitem">
                             <i class="far fa-fw fa-comments"></i>
-                            <span>${buttonText}</span>
+                            <span>${t('viewChats')}</span>
                         </a>
                     </li>
                     <li role="presentation" class="dropdown-divider"></li>
@@ -213,23 +468,37 @@ $(document).ready(function() {
             }
         }
 
-        const url = data && data.url ? data.url : '';
+        if (isAdminAllChatsPage()) {
+            patchForumChatsForAdminAll();
+            bindAdminRecentChatsInfiniteScroll();
+        }
 
-        if (url.match(/^user\/.+\/chats/) || url === 'chats') {
+        const url = data && data.url ? data.url : '';
+        if (url.match(/^user\/.+\/chats/) || url.match(/^chats(\/|$)/)) {
             refreshChatUi();
             setTimeout(refreshChatUi, 500);
+            setTimeout(refreshChatUi, 1200);
         }
     });
 
     $(window).on('action:chat.loaded', function() {
+        if (isAdminAllChatsPage()) {
+            patchForumChatsForAdminAll();
+            bindAdminRecentChatsInfiniteScroll();
+        }
         refreshChatUi();
         setTimeout(refreshChatUi, 200);
+        setTimeout(refreshChatUi, 1000);
     });
 
     $(window).on('action:chat.closed', function() {
         setTimeout(refreshChatUi, 200);
     });
 
+    $(window).on('action:chat.onMessagesAddedToDom action:chat.edited action:chat.renamed', function() {
+        setTimeout(refreshChatUi, 0);
+    });
+
     $(document).on('click', '.admin-chat-lock-toggle-item', async function(ev) {
         ev.preventDefault();
 
@@ -245,16 +514,42 @@ $(document).ready(function() {
 
         try {
             const result = await toggleRoomLock(roomId, !isLocked);
-            if (ajaxify && ajaxify.data) {
-                ajaxify.data.adminChatLock = result.lockData;
+            const currentRoom = ajaxify && ajaxify.data && (ajaxify.data.room || ajaxify.data);
+            if (currentRoom && parseInt(currentRoom.roomId, 10) === roomId) {
+                currentRoom.adminChatLock = result.lockData;
+                currentRoom.canReply = !result.lockData.isLocked || (app.user && app.user.isAdmin);
+                currentRoom.showUserInput = currentRoom.canReply;
                 if (ajaxify.data.room) {
                     ajaxify.data.room.adminChatLock = result.lockData;
+                    ajaxify.data.room.canReply = currentRoom.canReply;
+                    ajaxify.data.room.showUserInput = currentRoom.showUserInput;
                 }
             }
-            ajaxify.refresh();
+
+            const cached = getCachedRoomData(roomId) || { roomId };
+            cached.adminChatLock = result.lockData;
+            cached.canReply = !result.lockData.isLocked || (app.user && app.user.isAdmin);
+            cached.showUserInput = cached.canReply;
+            setCachedRoomData(roomId, cached);
+            await refreshChatUi();
         } catch (err) {
-            app.alertError(isEnglishSystem() ? 'Unable to update room lock.' : 'לא ניתן לעדכן את נעילת החדר.');
+            app.alertError(t('updateError'));
             $button.removeClass('disabled').removeAttr('aria-disabled');
         }
     });
+
+    // Intercept and translate error messages from API - only for lockedAction
+    if (app.alertError && !app.alertError._adminChatsWrapped) {
+        const originalAlertError = app.alertError;
+        app.alertError = function(message) {
+            if (typeof message === 'string') {
+                if (message.includes('[[admin-chats:errors.lockedAction]]') || message.includes('errors.lockedAction')) {
+                    message = getLockedActionMessage();
+                }
+            }
+            return originalAlertError.call(this, message);
+        };
+        app.alertError._adminChatsWrapped = true;
+    }
 });
+