@phenomlab said:
@DownPW Possible, yes, but not using the existing code. It would need to be changed to test for multiple entries based on two distinct widget areas. This should work (it’s already applied on your DEV server)
function chatBanner() {
var roomName = $("h5[component='chat/header/title']").text().trim();
var roomNameWidget = $('[id*="chat-modal"] .btn-ghost.btn-sm.dropdown-toggle').text().trim();
var bannerContent;
if (roomName === "General" || roomNameWidget === "General") {
bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Message 1. </div>';
} else if (roomName === "Support" || roomNameWidget === "Support") {
bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Message 2.</div>';
} else if (roomName === "Info" || roomNameWidget === "Info") {
bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Message 3</div>';
} else if (roomName === "xxxxxx" || roomNameWidget === "xxxxxx") {
bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Message 4</div>';
} else if (roomName === "xxxxxx" || roomNameWidget === "xxxxxx") {
bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Message 5</div>';
} else if (roomName === "xxxxxx" || roomNameWidget === "xxxxxx") {
bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Message 6</div>';
} else {
bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Ce canal est une discussion privée. </div>';
}
var chatMessagesContainer = $('[component="chat/system-message"]:last-of-type');
//var existingMessages = $('[component="chat/message"]');
var existingMessages = $('[component="chat/composer"]');
if (existingMessages.length === 0) {
// If there are no messages, append the banner to the messages container
chatMessagesContainer.first().after(bannerContent);
} else {
// If there are messages, add the banner after the last message
//existingMessages.last().after(bannerContent);
existingMessages.before(bannerContent);
}
}
Here, we are using || which is essentially an OR operator. Because we cannot know the chat room ID in advance, it is necessary to use a wildcard to track it
[id*="chat-modal"] .btn-ghost.btn-sm.dropdown-toggle
I see bugs with this code and chat box widget I use on my categories page
What was happening
NodeBB allows multiple chat windows to be open simultaneously , the widget and the full/modal-page DM view. Both exist in the DOM at the same time.
The original code used global jQuery selectors like $(‘[component=“chat/composer”]’) which scanned the entire page and found elements from both chat windows at once. When you opened “XY” caht while “XXY” was still open in the widget, the selectors would pick up the wrong room name or inject the banner into the wrong window.
The key discovery was that the action:chat.loaded event passes the modal DOM element directly as data. By wrapping it in $(data) and using $modal.find(…) for every selector, all queries are scoped exclusively to the correct modal, making it impossible for two open chat windows to interfere with each other.
FIX code (to adapt to your rooms) :
function chatBanner(modalElement) {
var $modal = $(modalElement);
$modal.find('#chatbanner').remove();
var roomName = $modal.find('[component="chat/room/name"]').text().trim();
if (!roomName) {
var placeholder = $modal.find('[component="chat/input"]').attr('placeholder') || '';
roomName = placeholder.replace(/^Message #?/, '').trim();
}
var bannerContent;
if (roomName === "General") {
bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Chat message banner</div>';
} else if (roomName === "xxxxxxxxxx") {
bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Chat message banner</div>';
} else if (roomName === "xxxxxxxxxx") {
bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Chat message banner</div>';
} else if (roomName === "xxxxxxxxxx") {
bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Chat message banner</div>';
} else if (roomName === "xxxxxxxxxx") {
bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Chat message banner</div>';
} else if (roomName === "Les geeks de l'espace") {
bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Chat message banner</div>';
} else {
bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Chat message banner</div>';
}
$modal.find('[component="chat/composer"]').first().before(bannerContent);
}
$(window).on('action:chat.loaded', function(ev, data) {
chatBanner(data);
});
