Chat: Using "Quick Messages" (sys_email_canned_message) from email editor in chat - Solution

[TrevorK]

I did some digging before I wrote this and found many references to people who wanted a "Quick Message" functionality within Chat. However, I could not find anyone who had an entire solution put together (most people stopped at just displaying a static message through the Chat Actions), so I developed the following code. Hopefully this can help some people, I know our analysts that use Chat are really looking forward to using this because it can cut down on their typing time quite a bit.

Limitations:

- Chat does not allow HTML code, so I strip it out. I still save the links (otherwise it would just show the display text)

- You have to press "enter" after you select the message / close the window. I could insert into the chat_message table, but thought that might be something for round 2

I would appreciate any and all feedback on this on improving the code or functionality.

There are two pieces - UI Page and Chat Action.

Chat Action

var gdw = new GlideDialogWindow("chat_quick_message_popup");
gdw.setTitle("Chat Quick Message");
gdw.render();

UI Page (HTML)

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g:ui_form>

<!-- Build our table -->
<table width="320px">
   <tr>
       <td align="left">
           Quick Message:
       </td>
       <td align="left">
           <g:evaluate jelly = "true">
               var qm = new GlideRecord("sys_email_canned_message");
               qm.addQuery('user',gs.getUserID());
               qm.orderBy("title");
               qm.query();
           </g:evaluate>
           <select id="quick_message_dropdown" onchange="Edit_QM(this)" style="width:200px">
                   <option value="">-- NONE --</option>
               <j:while test="${qm.next()}">
                   <option value="${qm.sys_id}">${qm.title}</option>
               </j:while>
           </select>
       </td>
   </tr>
</table>


<textarea id="quick_message_itself" rows="10" cols="100"></textarea>
<br /><br />
<g:dialog_buttons_ok_cancel ok="return OK_Click()" ok_id="ok_button" cancel_type="button" />

</g:ui_form>
</j:jelly>

UI Page (Client Script)

function OK_Click() {
       var gr = new GlideRecord("sys_email_canned_message");
       gr.addQuery('sys_id',gel('quick_message_dropdown').value);
       gr.query();

       if (gr.next()) {
               // This puts the text into the "textarea", which is where you
               // type in the chat message
               var body = document.getElementById('quick_message_itself').value;
               document.getElementsByTagName("textarea")[0].value = body;

               GlideDialogWindow.get().destroy();

               // If we return true, it reloads the UI Page and navigates away from chat
               return false;
       }
       else {
               GlideDialogWindow.get().destroy();
       }
}

function Edit_QM(qm) {
       var qm_sys_id = gel('quick_message_dropdown').value;

       var gr = new GlideRecord("sys_email_canned_message");
       gr.addQuery('sys_id',qm_sys_id);
       gr.query();

       if (gr.next()) { 
               // Stripping HTML - Chat is plain text so HTML shows in code form
               // This strips all HTML and removes the line breaks.

               // Replacing all the tags for line breaks with \n so they show up
               fixed = gr.body.replace(/<a href=\"([^\"]*)\"(.*?)<\/a>/ig, "(External Link: $1 )")
                       .replace(/<(?:br|\/div|\/p)>/g, "\n")
                       .replace(/ /g,"\n")
                       .replace(/<.*?>/g, "");
               // why don't I do something here to put the URL in? Check for href, etc..?
               /* Translation:
               - starts with <a href="
               - all characters up to and including the next "
               - The ">
               - (.*?) - make it lazy so it matches first, otherwise it matches last and you only ever end up with one
               - ends at /a>
               - i = case insensitive
               - g = global */

               var myTextArea = document.getElementById('quick_message_itself');
               myTextArea.innerHTML = fixed;
       }
       return false;
}

[TrevorK]

I will try to answer your questions, let me know if I missed one:

I did not understand correctly the purpose of the quick message

We have support staff that use Chat extensively to answer the same questions over and over again. Because we are a post-secondary institution, we have tens of thousands of students and often they want to know the same thing: "When can I register?", "How do I get a locker?", "When do I get my tax receipt?", etc. The purpose of the Chat Quick Messages is to allow them to insert a pre-defined message into the Chat window. This allows for a consistent response and saves the trouble of typing up a lengthy reply every time.

However, I tried to implement the script and the window popups but when I set a message, nothing is happening.

You would need to use this with the Chat functionality, without that enabled it will not do anything. So, if you are using it as a UI Page and click the "Try It" button it will seemingly do nothing. You need to use it with a Chat Action for testing.

If you have any further questions let me know! I am working on an updated version of this that allows you to select which Chat window the message should go to (in case you have multiple ones open), but I am not sure when I will get time to finalize it.

[Ryan Roberts1]

Hi Trevor,

This is great, I definitely appreciate your efforts! I'm running into a small issue and I'm wondering if you've come across the same. This solution only seems to work if the chat queue agent only has one chat window open. If an agent is handling multiple chat windows and attempts to add a 'quick message' to another window, the canned message is loaded into the first chat window that was opened on the page. I understand this is due to the "document.getElementsByTagName("textarea")[0].value" code, but I'm not seeing a simple fix.

An alternate solution to the one you provided uses code like "g_chat.fire(LiveEvents.WINDOW_CHAT_SEND_MSG, "hello world");" in the chat action to directly send a message through to the other user. This type of chat action does not have the issue with multiple windows. The downfall here is that it doesn't allow a user to edit the message prior to sending it.

It seems that a hybrid solution would be best, but I'm curious to see if you've come across this problem and if you came up with a solution.

Thanks!

Ryan

[TrevorK]

Your points are right on the money - we first tried the window_chat_send_msg, but our requirements forced us to allow the user to edit the message before sending so that's why we went the way we did. We have seen the limitation - it sends to the first window - and our users, when they have multiple windows open, just do a copy / paste with keyboard shortcuts.

We have not fixed this yet because we were hoping Geneva would give us a better chat client (through leveraging what they offer through the new Collaboration piece), but our plan if we have to fix it is to provide the analyst with a drop down that contain the user they are in chat sessions with, and we can then direct to the appropriate window based on that. I had the code roughed out but forgot to save the update set when I wiped our development instance for our Geneva upgrade, but if I recall it's not a huge problem - just requires a little knowledge of HTML DOM to grab the user names in each of the windows.

Our hope is that the Geneva piece will do things like state when someone is typing, etc. and be able to work as a stand-alone chat piece. Otherwise I unfortunately have a list of modifications I have promised: allowing quick messages to multiple windows, allowing attachments to be sent, and I think a couple others. I just try not to think of it because I know it's going to be a lot of hacking into it, when I would prefer the client just do it