Here’s a small modification to the chatBanner function that will place the message just above the composer/reply component meaning it is pinned at the bottom and always in view as a reminder. I’ve made this change to support the threadedChat I’m currently developing
// Chat message banner
function chatBanner() {
var roomName = $("h5[component='chat/header/title']").text().trim();
var bannerContent;
if (roomName === "Testing 3") {
bannerContent = '<div id="chatbanner">This message will fire for chat rooms with the title of "Testing 3"</div>';
} else {
bannerContent = '<div id="chatbanner">This session is for <strong>private discussion only</strong> between the chosen participants. Please do <strong>not</strong> place support requests here and create a <a href="#" onclick="app.newTopic();">new topic</a> instead.</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);
}
}
There are only two changes here:
var existingMessages = $('[component="chat/message"]');
becomes
var existingMessages = $('[component="chat/composer"]');
and
existingMessages.last().after(bannerContent);
becomes
existingMessages.before(bannerContent);
