nodebb-plugin-admin-chats 3.5.0 → 3.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-admin-chats",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "description": "A plugin that allows the administrator to view and manage user chats.",
   "main": "library.js",
   "nbbpm": {

package/plugin.json

@@ -4,12 +4,16 @@
   "description": "A plugin that allows the administrator to view and manage user chats",
   "url": "https://github.com/palmoni5/nodebb-plugin-admin-chats",
   "library": "./library.js",
+  "templates": "templates",
   "scripts": [
-    "client.js"
+    "static/lib/switch-chat.js",
+    "static/lib/lock-toggle.js",
+    "static/lib/live-updates.js",
+    "static/lib/profile-link.js"
   ],
   "hooks": [
     {
-      "hook": "filter:user.accountMenu",
+      "hook": "filter:user.profileMenu",
       "method": "addProfileLink"
     },
     {
@@ -60,10 +64,6 @@
       "hook": "filter:chat.renameRoom",
       "method": "filterRenameRoom"
     },
-    {
-      "hook": "filter:middleware.render",
-      "method": "addTemplateData"
-    },
     {
       "hook": "filter:notifications.create",
       "method": "filterNotificationCreate"

package/static/lib/live-updates.js

@@ -0,0 +1,42 @@
+'use strict';
+
+// Pushes room-lock changes to anyone with that room open, instead of the
+// previous approach of polling every open chat window on a timer. The
+// server emits event:admin-chats.roomLockChanged to chat_room_<roomId> from
+// lib/routes.js's lock endpoint (mirrors core's own room broadcast pattern
+// in src/messaging/notifications.js).
+$(document).ready(function () {
+    function refreshIfOpen(roomId) {
+        const activeRoomId = parseInt($('[component="chat/main-wrapper"]').attr('data-roomid'), 10) || 0;
+        if (activeRoomId !== parseInt(roomId, 10)) {
+            return;
+        }
+
+        require(['forum/chats'], function (Chats) {
+            if (Chats && Chats.switchChat) {
+                Chats.switchChat(roomId);
+            }
+        });
+    }
+
+    if (window.socket) {
+        socket.removeListener('event:admin-chats.roomLockChanged', refreshIfOpen);
+        socket.on('event:admin-chats.roomLockChanged', function (data) {
+            refreshIfOpen(data && data.roomId);
+        });
+    }
+
+    // Core toggles the `deleted` class on a message when it's deleted/restored,
+    // but doesn't itself swap which of the delete/restore actions is visible.
+    $(document).on('click', '[data-action="delete"], [data-action="restore"]', function () {
+        const $message = $(this).closest('[component="chat/message"]');
+        if (!$message.length) {
+            return;
+        }
+        setTimeout(function () {
+            const isDeleted = $message.hasClass('deleted');
+            $message.find('[data-action="delete"]').toggleClass('hidden', isDeleted).toggle(!isDeleted);
+            $message.find('[data-action="restore"]').toggleClass('hidden', !isDeleted).toggle(isDeleted);
+        }, 50);
+    });
+});

package/static/lib/lock-toggle.js

@@ -0,0 +1,57 @@
+'use strict';
+
+// The lock/unlock menu item itself is rendered server-side
+// (templates/partials/chats/options.tpl, gated on isAdminOrGlobalMod) — this
+// only wires the click. The resulting UI state (composer, per-message
+// actions, banner) all comes from the server re-render below, not from
+// client-side DOM patching.
+$(document).ready(function () {
+    async function toggleRoomLock(roomId, nextState) {
+        const response = await fetch(`${config.relative_path || ''}/api/admin-chats/${roomId}/lock`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-csrf-token': config.csrf_token,
+            },
+            body: JSON.stringify({ locked: nextState }),
+            credentials: 'same-origin',
+        });
+
+        if (!response.ok) {
+            throw new Error('Unable to update room lock');
+        }
+
+        return await response.json();
+    }
+
+    $(document).on('click', '.admin-chat-lock-toggle-item', async function (ev) {
+        ev.preventDefault();
+
+        const $button = $(this);
+        const roomId = parseInt($button.attr('data-room-id'), 10);
+        const isLocked = $button.attr('data-locked') === 'true';
+
+        if (!roomId) {
+            return;
+        }
+
+        $button.addClass('disabled').attr('aria-disabled', 'true');
+
+        try {
+            await toggleRoomLock(roomId, !isLocked);
+            // The lock/unlock menu item, composer visibility and per-message
+            // action buttons are all rendered server-side from the fresh
+            // room data, so re-switch to this room to pick it up. Other
+            // clients with the room open get the same refresh via the
+            // event:admin-chats.roomLockChanged broadcast (static/lib/live-updates.js).
+            require(['forum/chats'], function (Chats) {
+                if (Chats && Chats.switchChat) {
+                    Chats.switchChat(roomId);
+                }
+            });
+        } catch (err) {
+            app.alertError('[[admin-chats:errors.update]]');
+            $button.removeClass('disabled').removeAttr('aria-disabled');
+        }
+    });
+});

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>

package/templates/partials/chats/message.tpl

@@ -0,0 +1,78 @@
+<li component="chat/message" class="chat-message mx-2 pe-2 {{{ if messages.deleted }}} deleted{{{ end }}} {{{ if messages.pinned}}} pinned{{{ end }}} {{{ if messages.newSet }}}border-top pt-3{{{ end }}}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-index="{messages.index}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}" data-username="{messages.fromUser.username}" data-displayname="{{txDisplayname(messages.fromUser)}}">
+
+	{{{ if messages.parent }}}
+	<!-- IMPORT partials/chats/parent.tpl -->
+	{{{ end }}}
+
+	<div class="message-header lh-1 d-flex align-items-center gap-2 text-sm {{{ if !messages.newSet }}}hidden{{{ end }}} pb-2">
+		<a href="{config.relative_path}/user/{messages.fromUser.userslug}" class="text-decoration-none">{{buildAvatar(messages.fromUser, "18px", true, "not-responsive")}}</a>
+		<span class="chat-user fw-semibold"><a href="{config.relative_path}/user/{messages.fromUser.userslug}">{{txDisplayname(messages.fromUser)}}</a></span>
+		{{{ if messages.fromUser.banned }}}
+		<span class="badge bg-danger">{{tx("user:banned")}}</span>
+		{{{ end }}}
+		{{{ if messages.fromUser.deleted }}}
+		<span class="badge bg-danger">{{tx("user:deleted")}}</span>
+		{{{ end }}}
+		<span class="chat-timestamp text-muted timeago" title="{messages.timestampISO}"></span>
+
+		<div component="chat/message/edited" class="text-muted ms-auto {{{ if !messages.edited }}}hidden{{{ end }}}" title="{{tx("global:edited-timestamp", isoTimeToLocaleString(messages.editedISO, config.userLang))}}"><i class="fa fa-edit"></i></span></div>
+	</div>
+	<div class="message-body-wrapper">
+		<div component="chat/message/body" class="message-body ps-0 py-0 text-break mb-last-0 mb-3">
+			{{{ if messages.txContent }}}{{tx(messages.content)}}{{{ else }}}{{txEscape(messages.content)}}{{{ end }}}
+		</div>
+		<!-- IMPORT partials/chats/reactions.tpl -->
+		<div component="chat/message/controls" class="position-relative">
+			<div class="btn-group border shadow-sm controls position-absolute bg-body end-0" style="bottom:1rem;">
+				<!-- IMPORT partials/chats/add-reaction.tpl -->
+				{{{ if !messages.adminChatLocked }}}
+				<button class="btn btn-sm btn-link" data-action="reply" title="{{tx("topic:reply")}}"><i class="fa fa-reply"></i></button>
+				{{{ end }}}
+
+				<div class="btn-group d-inline-block">
+					<button class="btn btn-sm btn-link dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-ellipsis" type="button"></i></button>
+					<ul class="dropdown-menu dropdown-menu-end p-1 text-sm list-unstyled" role="menu">
+						{{{ if (isAdminOrGlobalMod || (!config.disableChatMessageEditing && (messages.self && !messages.adminChatLocked))) }}}
+						<li>
+							<a href="#" class="dropdown-item rounded-1" data-action="edit" role="menuitem"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-pencil text-muted"></i> {{tx("topic:edit")}}</span></a>
+						</li>
+						<li>
+							<a href="#" class="dropdown-item rounded-1" data-action="delete" role="menuitem"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-trash text-muted"></i> {{tx("topic:delete")}}</span></a>
+						</li>
+						<li>
+							<a href="#" class="dropdown-item rounded-1" data-action="restore" role="menuitem"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-repeat text-muted"></i> {{tx("topic:restore")}}</span></a>
+						</li>
+						{{{ end }}}
+
+						{{{ if (isAdminOrGlobalMod || isOwner )}}}
+						<li>
+							<a href="#" class="dropdown-item rounded-1" data-action="pin" role="menuitem"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-thumbtack text-muted"></i> {{tx("modules:chat.pin-message")}}</span></a>
+						</li>
+						<li>
+							<a href="#" class="dropdown-item rounded-1" data-action="unpin" role="menuitem"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-thumbtack fa-rotate-90 text-muted"></i> {{tx("modules:chat.unpin-message")}}</span></a>
+						</li>
+						<li class="dropdown-divider"></li>
+						{{{ end }}}
+
+						{{{ if isAdminOrGlobalMod }}}
+						<li>
+							<a href="#" class="dropdown-item rounded-1 chat-ip-button" role="menuitem">
+								<span class="d-inline-flex align-items-center gap-2 show"><i class="fa fa-fw fa-info-circle text-muted"></i> {{tx("modules:chat.show-ip")}}</span>
+								<span class="d-inline-flex align-items-center gap-2 copy hidden"><i class="fa fa-fw fa-copy text-muted"></i> <span class="copy-ip-text"></span></span>
+							</a>
+						</li>
+						{{{ end }}}
+
+						<li>
+							<a href="#" class="dropdown-item rounded-1" data-action="copy-text" data-mid="{messages.mid}" role="menuitem"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-copy text-muted"></i> {{tx("modules:chat.copy-text")}}</span></a>
+						</li>
+
+						<li>
+							<a href="#" class="dropdown-item rounded-1" data-action="copy-link" data-mid="{messages.mid}" role="menuitem"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-link text-muted"></i> {{tx("modules:chat.copy-link")}}</span></a>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+</li>