Adding a banner to chat messages

[phenomlab]

@DownPW Very odd - I see this on your DEV server

[DownPW]

It’s because you have joined the public chat and so we have a system message. (Phenomlab as joined the room…)

If you are the creator of the room, no joined her and 0 message (user and system message), banner don’t appear but it’s not very serious

[phenomlab]

@DownPW Can you create another ? I should be able to get this to work…

[DownPW]

ok, I recreated the "“Support” lounge

[phenomlab]

@DownPW Can you create a new room? There are events in the old one which will trigger the message

[DownPW]

ok, no problem

[phenomlab]

@DownPW I can’t replicate this issue. Each time I access the room, it will add a system event which causes the JS to trigger

[DownPW]

hmm I think because you have not create the room like me but like I said, it’s not very serious

[phenomlab]

@DownPW Nope. I get the same if I create the room

[phenomlab]

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);