nodebb-plugin-admin-chats 3.5.0 → 3.6.0

package/static/lib/message-history.js

@@ -0,0 +1,221 @@
+'use strict';
+
+// "Edit history" item in the chat message options dropdown (rendered
+// server-side in templates/partials/chats/message.tpl, gated on manage
+// privilege via isAdminOrGlobalMod). Opens a modal modelled on core's post
+// diffs modal (public/src/client/topic/diffs.js): a revision selector, the
+// selected revision's content, and a delete-revision button. The API routes
+// it calls are manage-only as well, so the client gating is cosmetic.
+$(document).ready(function () {
+    const localeStringOpts = { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' };
+
+    function prettyDate(timestamp) {
+        const numeric = parseInt(timestamp, 10) || 0;
+        if (!numeric) {
+            return '—';
+        }
+        return new Date(numeric).toLocaleString((config.userLang || 'en-GB').replace('_', '-'), localeStringOpts);
+    }
+
+    async function requestHistory(mid, method, revisionIndex) {
+        const suffix = (method === 'DELETE' || method === 'PUT') ? `/${revisionIndex}` : '';
+        const response = await fetch(`${config.relative_path || ''}/api/admin-chats/history/${mid}${suffix}`, {
+            method: method || 'GET',
+            headers: { 'x-csrf-token': config.csrf_token },
+            credentials: 'same-origin',
+        });
+
+        const data = await response.json();
+        if (!response.ok) {
+            throw new Error((data && data.status && data.status.message) || 'Request failed');
+        }
+
+        return data;
+    }
+
+    // The selector lists the current version first, then prior revisions
+    // newest-first. Option values keep the revision's index in the stored
+    // (oldest-first) list so deletes address the right entry.
+    function buildEntries(history, labels) {
+        const currentEditor = (history.current.editor && history.current.editor.username) ||
+            (history.author && history.author.username) || '';
+        const entries = [{
+            value: 'current',
+            label: `${prettyDate(history.current.edited || history.current.timestamp)} [${currentEditor}] · ${labels.current}`,
+            content: history.current.content,
+        }];
+
+        history.revisions.forEach((revision, index) => {
+            entries.push({
+                value: String(index),
+                label: `${prettyDate(revision.replacedAt)} [${revision.editor.username}]`,
+                content: revision.content,
+            });
+        });
+
+        return [entries[0]].concat(entries.slice(1).reverse());
+    }
+
+    function renderState($modal, history, labels) {
+        const $select = $modal.find('select');
+        const $content = $modal.find('.admin-chat-history-content');
+        const $deleteBtn = $modal.find('[data-action="delete-revision"]');
+        const $restoreBtn = $modal.find('[data-action="restore-revision"]');
+        const $count = $modal.find('.admin-chat-history-count');
+
+        const entries = buildEntries(history, labels);
+        const contentByValue = new Map(entries.map(entry => [entry.value, entry.content]));
+
+        $select.empty();
+        entries.forEach((entry) => {
+            const option = document.createElement('option');
+            option.value = entry.value;
+            option.textContent = entry.label;
+            $select.append(option);
+        });
+
+        $count.text(labels.count.replace('%1', String(history.revisionCount)));
+
+        const showSelection = () => {
+            const value = $select.val();
+            $content.text(contentByValue.get(value) || '');
+            $deleteBtn.prop('disabled', value === 'current');
+            $restoreBtn.prop('disabled', value === 'current');
+        };
+
+        $select.off('change').on('change', showSelection);
+        showSelection();
+    }
+
+    async function openHistoryModal(mid, modals, alerts, translator) {
+        const history = await requestHistory(mid);
+
+        const labels = {
+            current: await translator.translate('[[admin-chats:history.current]]'),
+            count: await translator.translate('[[admin-chats:history.revisionCount, %1]]'),
+        };
+
+        // modals.dialog runs the message through the translator itself
+        const $modal = await modals.dialog({
+            title: '[[admin-chats:history.title]]',
+            message: '<p class="admin-chat-history-count text-muted"></p>' +
+                '<div class="mb-3">' +
+                '<select class="form-control"></select>' +
+                '<hr />' +
+                '<pre class="admin-chat-history-content text-break mb-3" style="white-space: pre-wrap;"></pre>' +
+                '<button class="btn btn-primary" data-action="restore-revision">[[admin-chats:history.restore]]</button> ' +
+                '<button class="btn btn-danger" data-action="delete-revision">[[admin-chats:history.deleteRevision]]</button>' +
+                '<p class="form-text">[[admin-chats:history.restoreDescription]]</p>' +
+                '</div>',
+            size: 'large',
+            onEscape: true,
+            backdrop: true,
+        });
+
+        renderState($modal, history, labels);
+
+        $modal.find('[data-action="restore-revision"]').on('click', async function () {
+            const value = $modal.find('select').val();
+            if (value === 'current') {
+                return;
+            }
+
+            try {
+                await requestHistory(mid, 'PUT', value);
+                $modal.modal('hide');
+                alerts.success('[[admin-chats:history.restored]]');
+            } catch (err) {
+                alerts.error('[[admin-chats:errors.history]]');
+            }
+        });
+
+        $modal.find('[data-action="delete-revision"]').on('click', function () {
+            const value = $modal.find('select').val();
+            if (value === 'current') {
+                return;
+            }
+
+            modals.confirm('[[admin-chats:history.confirmDelete]]', async (confirmed) => {
+                if (!confirmed) {
+                    return;
+                }
+
+                try {
+                    const fresh = await requestHistory(mid, 'DELETE', value);
+                    renderState($modal, fresh, labels);
+                    alerts.success('[[admin-chats:history.deleted]]');
+                } catch (err) {
+                    alerts.error('[[admin-chats:errors.history]]');
+                }
+            });
+        });
+    }
+
+    // Messages rendered live on the client (incoming messages, and a message
+    // re-parsed right after an edit) go through core's parseMessage, which
+    // sets isAdminOrGlobalMod = app.user.isAdmin || app.user.isGlobalMod —
+    // ignoring the plugin's manage privilege that gates the server-rendered
+    // item. Re-add the item on dropdown open when the room payload grants
+    // management and the item is missing.
+    $(document).on('show.bs.dropdown', '[component="chat/message"] .btn-group', function () {
+        if (!ajaxify.data || !ajaxify.data.isAdminOrGlobalMod) {
+            return;
+        }
+
+        const $menu = $(this).find('.dropdown-menu');
+        if (!$menu.length || $menu.find('.admin-chat-history-item').length) {
+            return;
+        }
+
+        const $message = $(this).closest('[component="chat/message"]');
+        const mid = parseInt($message.attr('data-mid'), 10);
+        if (!mid) {
+            return;
+        }
+
+        // Same gate as the server-rendered item: only edited messages have a
+        // history to show. The edited indicator element exists on every
+        // message and carries `hidden` while the message is unedited.
+        const $edited = $message.find('[component="chat/message/edited"]');
+        if (!$edited.length || $edited.hasClass('hidden')) {
+            return;
+        }
+
+        require(['translator'], function (translator) {
+            translator.translate('[[admin-chats:history.title]]', function (title) {
+                if ($menu.find('.admin-chat-history-item').length) {
+                    return;
+                }
+
+                const $item = $(
+                    '<li><a href="#" class="dropdown-item rounded-1 admin-chat-history-item" role="menuitem">' +
+                    '<span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-history text-muted"></i> </span></a></li>'
+                );
+                $item.find('a').attr('data-mid', String(mid));
+                $item.find('span').append(document.createTextNode(title));
+
+                const $copyText = $menu.find('[data-action="copy-text"]').closest('li');
+                if ($copyText.length) {
+                    $item.insertBefore($copyText);
+                } else {
+                    $menu.append($item);
+                }
+            });
+        });
+    });
+
+    $(document).on('click', '.admin-chat-history-item', function (ev) {
+        ev.preventDefault();
+
+        const mid = parseInt($(this).attr('data-mid'), 10);
+        if (!mid) {
+            return;
+        }
+
+        require(['modals', 'alerts', 'translator'], function (modals, alerts, translator) {
+            openHistoryModal(mid, modals, alerts, translator).catch(() => {
+                alerts.error('[[admin-chats:errors.history]]');
+            });
+        });
+    });
+});

package/static/lib/profile-link.js

@@ -0,0 +1,98 @@
+'use strict';
+
+// The "View Chats" profile link has no server-side extension point: the
+// account-menu dropdown (.account-sub-links) is a theme template
+// (nodebb-theme-harmony: templates/partials/account/admin-menu.tpl) with a
+// hardcoded item list and no hook firing over it, and it's only rendered at
+// all when the viewer is a full admin or has ban/mute rights — not for a
+// user who only holds the admin-chats privilege. So this has to be a
+// client-side injection, unlike the chat UI (which does have real template
+// override points — see templates/partials/chats/*.tpl).
+$(document).ready(function () {
+    function isAdminChatsAccessible() {
+        return !!(ajaxify && ajaxify.data && ajaxify.data.adminChatsAccess);
+    }
+
+    async function resolveAdminChatsAccess() {
+        if (isAdminChatsAccessible()) {
+            return true;
+        }
+        try {
+            const response = await fetch(`${config.relative_path || ''}/api/admin-chats?start=0`, {
+                headers: { 'x-csrf-token': config.csrf_token },
+                credentials: 'same-origin',
+            });
+            return response.ok;
+        } catch (err) {
+            return false;
+        }
+    }
+
+    async function injectProfileChatsLink() {
+        const isUserProfile = $('.account').length && window.location.pathname.includes('/user/');
+        if (!isUserProfile || !await resolveAdminChatsAccess()) {
+            return;
+        }
+
+        const userSlug = ajaxify && ajaxify.data && (ajaxify.data.userslug || (ajaxify.data.user && ajaxify.data.user.userslug));
+        if (!userSlug) {
+            return;
+        }
+
+        const relativePath = config.relative_path || '';
+        // Injected via jQuery rather than a template, so [[...]] needs an
+        // explicit translator call here — nothing else will resolve it.
+        const label = await new Promise((resolve) => {
+            require(['translator'], function (translator) {
+                translator.translate('[[admin-chats:profile.viewChats]]', resolve);
+            });
+        });
+        const menuItemHtml = `
+            <li role="presentation" class="admin-chats-profile-link">
+                <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>${label}</span>
+                </a>
+            </li>
+        `;
+
+        let menu = $('.account-sub-links');
+        if (!menu.length) {
+            // No admin/ban/mute menu was rendered for this viewer (they only
+            // hold the admin-chats privilege) — build a minimal dropdown of
+            // our own next to the other profile action buttons.
+            const container = $('.account .flex-shrink-0.d-flex.gap-1').first();
+            const fallbackContainer = container.length ? container : $('.account .flex-shrink-0').first();
+
+            if (fallbackContainer.length) {
+                fallbackContainer.append(`
+                    <div class="btn-group bottom-sheet admin-chats-privileges-menu">
+                        <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <i class="fa fa-gear fa-fw"></i>
+                        </button>
+                        <ul class="dropdown-menu dropdown-menu-end p-1 text-sm account-sub-links" role="menu"></ul>
+                    </div>
+                `);
+                menu = fallbackContainer.find('.account-sub-links').last();
+            }
+        }
+
+        if (!menu.length) {
+            return;
+        }
+
+        menu.find('.admin-chats-profile-link, .admin-chats-profile-divider').remove();
+        menu.prepend(menuItemHtml);
+
+        if (menu.find('li').not('.admin-chats-profile-link').length > 0) {
+            menu.find('.admin-chats-profile-link').after('<li role="presentation" class="dropdown-divider admin-chats-profile-divider"></li>');
+        }
+    }
+
+    $(window).on('action:ajaxify.end', function (ev, data) {
+        const templateName = ajaxify && ajaxify.data && ajaxify.data.template ? ajaxify.data.template.name : '';
+        if (templateName.startsWith('account/')) {
+            injectProfileChatsLink();
+        }
+    });
+});

package/static/lib/switch-chat.js

@@ -0,0 +1,234 @@
+'use strict';
+
+// Admin-all-chats room routing. Core has no hook for intercepting
+// Chats.switchChat, and the admin page uses a different URL scheme
+// (/chats/:roomId vs /user/:slug/chats/:roomId) than a regular user's chat
+// page, so wrapping the whole function is still the only way to route room
+// switches through the admin API endpoints instead of core's.
+$(document).ready(function () {
+    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');
+            }
+
+            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));
+    }
+
+    // Keep the mobile layout state (body.chat-loaded / nav data-loaded) in sync with
+    // the room that is actually rendered, without re-fetching it
+    function syncChatLoadedState() {
+        const activeChatId = parseInt($('[component="chat/main-wrapper"]').attr('data-roomid'), 10) || 0;
+        $('body').toggleClass('chat-loaded', !!activeChatId);
+        $('[component="chat/nav-wrapper"]').attr('data-loaded', activeChatId ? '1' : '0');
+    }
+
+    function openRoomIfUrlDiffers(delay) {
+        const currentRoomId = ajaxify && ajaxify.data && ajaxify.data.roomId;
+        const activeChatId = $('[component="chat/main-wrapper"]').attr('data-roomid') || '';
+        if (currentRoomId && String(currentRoomId) !== String(activeChatId)) {
+            setTimeout(function () {
+                require(['forum/chats'], function (Chats) {
+                    if (Chats && Chats.switchChat) {
+                        Chats.switchChat(currentRoomId);
+                    }
+                });
+            }, delay);
+        } else {
+            syncChatLoadedState();
+        }
+    }
+
+    function patchForumChatsForAdminAll() {
+        if (!isAdminAllChatsPage()) {
+            return;
+        }
+
+        require(['forum/chats', 'forum/chats/messages'], function (Chats, ChatsMessages) {
+            if (!Chats || Chats._adminAllChatsPatched) {
+                if (Chats) {
+                    openRoomIfUrlDiffers(100);
+                    bindAdminRecentChatsInfiniteScroll();
+                }
+                return;
+            }
+
+            const originalSwitchChat = Chats.switchChat;
+
+            Chats.switchChat = function (roomId) {
+                if (!isAdminAllChatsPage()) {
+                    return originalSwitchChat.call(this, roomId);
+                }
+
+                roomId = roomId || '';
+                // NodeBB 4.14.9+ (56c6115a61): destroyAutoComplete takes the input element, not a roomId
+                Chats.destroyAutoComplete($('[component="chat/main-wrapper"]').find('[component="chat/input"]'));
+                if (ajaxify.data.roomId) {
+                    socket.emit('modules.chats.leave', ajaxify.data.roomId);
+                }
+
+                const url = getAdminChatsPageUrl(roomId);
+
+                async function renderAdminChatWindow(payload) {
+                    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);
+                    $('[component="chat/nav-wrapper"]').attr('data-loaded', roomId ? '1' : '0');
+                    mainWrapper.find('[data-bs-toggle="tooltip"]').tooltip({ trigger: 'hover', container: '#content' });
+                    Chats.setActive(roomId);
+                    Chats.addEventListeners();
+                    // Fire through the hooks module like core does — a raw jQuery
+                    // trigger never reaches hooks.on() listeners (e.g. the reactions
+                    // plugin), only legacy $(window).on() ones (e.g. the emoji plugin).
+                    require(['hooks'], function (hooks) {
+                        hooks.fire('action:chat.loaded', $('.chats-full'));
+                    });
+                    if (roomId) {
+                        ChatsMessages.scrollToBottomAfterImageLoad(mainWrapper.find('[component="chat/message/content"]'));
+                        // Read-state is cleared server-side when the room payload is
+                        // built; just keep the list UI in sync
+                        $('[component="chat/nav-wrapper"]').find(`[data-roomid="${roomId}"]`).removeClass('unread');
+                    }
+                    if (history.pushState) {
+                        const fullUrl = `${window.location.protocol}//${window.location.host}${config.relative_path || ''}/${url}`;
+                        // When the address bar already shows the target (e.g. closing a chat
+                        // after a back-gesture), replace instead of stacking a duplicate entry
+                        const sameUrl = window.location.href.split('?')[0] === fullUrl.split('?')[0];
+                        history[sameUrl ? 'replaceState' : 'pushState']({ url: url }, null, fullUrl);
+                    }
+                    bindAdminRecentChatsInfiniteScroll();
+                }
+
+                if (!roomId) {
+                    // Closing a chat needs no server round-trip — render the empty
+                    // window from the data we already have (instant back-gesture)
+                    renderAdminChatWindow({ ...ajaxify.data, roomId: 0, title: '[[pages:chats]]' });
+                    return;
+                }
+
+                fetch(getAdminChatsDataUrl(roomId), { credentials: 'include' })
+                    .then(async function (response) {
+                        if (!response.ok) {
+                            throw new Error(`Received ${response.status}`);
+                        }
+                        await renderAdminChatWindow(await response.json());
+                    })
+                    .catch(function () {
+                        // Never leave the user stuck on the list — fall back to a
+                        // regular ajaxify navigation to the room
+                        ajaxify.go(url);
+                    });
+            };
+
+            Chats._adminAllChatsPatched = true;
+
+            openRoomIfUrlDiffers(100);
+            bindAdminRecentChatsInfiniteScroll();
+        });
+    }
+
+    // Handle browser back/forward navigation. The URL is the source of truth
+    // here — ajaxify.data.roomId is stale after popstate.
+    function handleChatNavigation() {
+        if (!isAdminAllChatsPage()) {
+            return;
+        }
+
+        const urlMatch = window.location.pathname.match(/\/chats\/(\d+)/);
+        const urlRoomId = urlMatch ? parseInt(urlMatch[1], 10) : 0;
+        const activeChatId = parseInt($('[component="chat/main-wrapper"]').attr('data-roomid'), 10) || 0;
+
+        if (urlRoomId === activeChatId) {
+            return;
+        }
+
+        require(['forum/chats'], function (Chats) {
+            if (Chats && Chats.switchChat) {
+                // urlRoomId 0 -> URL is the chat list: close the open chat and show the list
+                Chats.switchChat(urlRoomId || '');
+            }
+        });
+    }
+
+    $(window).on('action:ajaxify.end', function (ev, data) {
+        if (isAdminAllChatsPage()) {
+            patchForumChatsForAdminAll();
+
+            const url = data && data.url ? data.url : '';
+            if (url.match(/^chats\/\d+/)) {
+                setTimeout(handleChatNavigation, 300);
+            }
+        }
+    });
+
+    $(window).on('action:chat.loaded', function () {
+        if (isAdminAllChatsPage()) {
+            patchForumChatsForAdminAll();
+        }
+    });
+
+    $(window).on('popstate', function () {
+        if (isAdminAllChatsPage()) {
+            setTimeout(handleChatNavigation, 100);
+        }
+    });
+});

package/templates/partials/chats/message-window.tpl

@@ -0,0 +1,60 @@
+<div component="chat/message/window" class="d-flex flex-column h-100">
+	{{{ if widgets.header.length }}}
+	<div data-widget-area="header">
+		{{{each widgets.header}}}
+		{{widgets.header.html}}
+		{{{end}}}
+	</div>
+	{{{ end }}}
+	{{{ if !roomId }}}
+	<div class="d-flex flex-column align-items-center gap-3 my-auto">
+		<i class="fa-solid fa-wind fs-2 text-muted"></i>
+		<span class="text-muted text-sm">{{{ if adminAllChats }}}{{tx("admin-chats:empty.selectChat")}}{{{ else }}}{{tx("modules:chat.no-active")}}{{{ end }}}</span>
+	</div>
+	{{{ else }}}
+	<div component="chat/header" class="d-flex align-items-center px-lg-3 gap-3">
+		<a href="#" data-action="close" role="button" class="flex-shrink-0 d-flex d-lg-none btn btn-ghost border align-text-top"><i class="fa fa-chevron-left"></i></a>
+		<h5 component="chat/header/title" class="members flex-grow-1 fw-semibold tracking-tight mb-0 text-truncate text-nowrap" style="line-height: initial;">
+			{{{ if ./roomName }}}<i class="fa {icon} text-muted"></i> {roomName}{{{ else }}}{{tx(./chatWithMessage) }}{{{ end}}}
+		</h5>
+
+		<!-- IMPORT partials/chats/options.tpl -->
+	</div>
+	<!-- IMPORT partials/chats/scroll-up-alert.tpl -->
+	<hr class="my-1"/>
+	<div class="d-flex flex-grow-1 gap-1 overflow-auto" style="min-width: 0px;">
+		<div component="chat/messages" class="expanded-chat d-flex flex-column flex-grow-1" data-roomid="{roomId}" style="min-width: 0px;">
+			<ul component="chat/message/content" data-roomid="{roomId}" class="chat-content p-0 m-0 list-unstyled overflow-auto flex-grow-1 ghost-scrollbar invisible">
+				<!-- IMPORT partials/chats/messages.tpl -->
+			</ul>
+			<script>
+				(function () {
+					const el = document.querySelector('[component="chat/main-wrapper"] [component="chat/message/content"]');
+					if (el) {
+						requestAnimationFrame(() => {
+							el.scrollTop = el.scrollHeight;
+							el.classList.remove('invisible');
+						});
+					}
+				})();
+			</script>
+			<ul component="chat/message/search/results" class="chat-content p-0 m-0 list-unstyled overflow-auto flex-grow-1 hidden">
+				<div component="chat/message/search/no-results" class="text-center p-4 d-flex flex-column">
+					<div class="p-4"><i class="fa-solid fa-wind fs-2 text-muted"></i></div>
+					<div class="text-xs fw-semibold text-muted">{{tx("search:no-matches")}}</div>
+				</div>
+			</ul>
+			{{{ if showUserInput }}}
+			<!-- IMPORT partials/chats/composer.tpl -->
+			{{{ else }}}
+			{{{ if adminChatLockedForViewer }}}
+			<div class="admin-chat-lock-banner alert alert-warning mb-2 text-center">{{tx("admin-chats:lock.banner")}}</div>
+			{{{ end }}}
+			{{{ end }}}
+		</div>
+
+		<!-- IMPORT partials/chats/user-list.tpl -->
+		<!-- IMPORT partials/chats/pinned-messages.tpl -->
+	</div>
+	{{{ end }}}
+</div>