Manage Chat/Messaging Session with Flow

These two extensions are designed to enable a service agent to use a flow to manage elements of a chat session which rely on the Conversation Toolkit API .

The supported features include:

  • Send Message – the message will then be immediately sent
  • Set Agent Input – the message will be set in in the agent’s text box so the agent can change/personalize it
  • Init File Transfer – Initiates the process of transferring a file from a customer to an agent
  • End Chat – Ends a chat in which an agent is currently engaged.

The functionality is available as both a screen component and a Flow action.

Attributes

  • sessionId : the id of the LiveChatTranscript or the MessagingSession.
  • actionType : the type of action you want to perform. Supported action are : sendMessage, setAgentInput, endChat, initFileTransfer.
  • message : the message you want to set or send.
  • recordId : (for initFileTransfer only) the id of the record to attach the file after transfer.

Screen Component

How to use it?

Just drag and drop the component on a screen and fill the parameter. See example below:

In case your flow is not started from the LiveChatTranscript object or the MessagingSession object, you can also retrieve the LiveChatTranscriptId or the MessagingSessionId using a Get Record node in your flow. The example below retrieves the LiveChatTranscriptId from the CaseId:

Action

How to use it?

Just drag and drop an Action node fill the parameter. See example below:

In case your flow is not started from the LiveChatTranscript object or the MessagingSession object, you can also retrieve the LiveChatTranscriptId or the MessagingSessionId using a Get Record node in your flow. The example below retrieves the LiveChatTranscriptId from the CaseId:

How to get it in my org?

You can either copy/paste the code below or install the following package : FlowManageChatSession

The package will add two Lightning Component : 

  • FlowManageChatSessionLA : you can use this component in Action
  • FlowManageChatSessionSC : you can use this component in Screen

End-to-end example with Screen Component

In this scenario we will start a flow from a Case during a Web Chat conversation. The flow initiated by the Agent will send a message to the customer.

You need first to enable and configure Web Chat. If you’re not familiar with Web Chat, you can refer to this great Trailhead module : Web Chat Basics

Then create a flow with an input variable recordId. The id of the Case will be passed in this variable:

Add a Get Record node so you can retrieve the LiveChatTranscriptId from the Case id:

Add a screen node and drag and drop the FlowManageChatSessionSC component into your screen

Finally your flow should look like this:

Let’s put it all together and see how it look like from an Agent point of view:

 

Code

Screen Component

FlowManageChatSessionSC.cmp

<aura:component implements="lightning:availableForFlowScreens" access="global">
    <aura:attribute name="sessionId" type="String" access="global"/>
    <aura:attribute name="actionType" type="String" access="global" default="sendMessage"/>
    <aura:attribute name="message" type="String" access="global"/>
    <aura:attribute name="recordId" type="String" access="global"/>
    
    <lightning:conversationToolkitAPI aura:id="conversationKit" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
</aura:component>

FlowManageChatSessionSCcontroller.js

({
    doInit : function(component, event, helper) {
        var actionType = component.get("v.actionType");

        if (actionType == 'sendMessage')
            helper.sendMessage(component, event);
        if (actionType == 'setAgentInput')
            helper.setAgentInput(component, event);
        if (actionType == 'endChat')
            helper.endChat(component, event);
        if (actionType == 'initFileTransfer')
            helper.initFileTransfer(component, event);
    },
})

FlowManageChatSessionSChelper.js

({
    sendMessage: function(component, event) {
        var conversationKit = component.find("conversationKit");
        var sessionId = component.get("v.sessionId");
        
        if (sessionId != null && sessionId != '') {
            var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
            conversationKit.sendMessage({
                recordId: sessionIdShort,
                message: {
                    text: component.get("v.message")
                }
            })
            .then(function(result){
                if (result) {
                    console.log("Successfully sent message: " + component.get("v.message"));
                } else {
                    console.log("Failed to send message: " + component.get("v.message"));
                }
            });
        }
    },
    
    setAgentInput : function(component, event) {
        var conversationKit = component.find("conversationKit");
        var sessionId = component.get("v.sessionId");
        
        if (sessionId != null && sessionId != '') {
            var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
            conversationKit.setAgentInput({
                recordId: sessionIdShort,
                message: {
                    text: component.get("v.message")
                }
            })
            .then(function(result){
                if (result) {
                    console.log("Successfully setAgentInput, message: " + component.get("v.message"));
                } else {
                    console.log("Failed to setAgentInput, message: " + component.get("v.message"));
                }
            });
        }
    },
    
    endChat : function(component, event) {
        var conversationKit = component.find("conversationKit");
        var sessionId = component.get("v.sessionId");
        
        if (sessionId != null && sessionId != '') {
            var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
            conversationKit.endChat({
                recordId: sessionIdShort
            })
            .then(function(result){
                if (result) {
                    console.log("Successfully endChat");
                } else {
                    console.log("Failed to endChat");
                }
            });
        }
    },
    
    initFileTransfer : function(component, event) {
        var conversationKit = component.find("conversationKit");
        var sessionId = component.get("v.sessionId");
        var recordId = component.get("v.recordId");
        
        if (sessionId != null && sessionId != '' && recordId != null && recordId != '') {
            var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
            var recordIdShort = (recordId.length > 15 ? recordId.substring(0, 15) : recordId);
            console.log("AutoSendChatMessage starting conversationKit initFileTransfer on sessionId: " + sessionIdShort + ", recordId: " + recordIdShort);
            conversationKit.initFileTransfer({
                recordId: sessionIdShort,
                attachmentRecordId : recordIdShort
            });
        }
    }
})

FlowManageChatSessionSC.design

<design:component>
    <design:attribute name="sessionId" label="sessionId"/>
    <design:attribute name="actionType" label="Type of Action" datasource="sendMessage,setAgentInput,endChat,initFileTransfer" default="sendMessage"/>
    <design:attribute name="message" label="Message"/>
    <design:attribute name="recordId" label="recordId"/>
</design:component>
Action

FlowManageChatSessionLA.cmp

<aura:component implements="lightning:availableForFlowActions" access="global">
    <aura:attribute name="sessionId" type="String" access="global"/>
    <aura:attribute name="actionType" type="String" access="global" default="sendMessage"/>
    <aura:attribute name="message" type="String" access="global"/>
    <aura:attribute name="recordId" type="String" access="global"/>
    <lightning:conversationToolkitAPI aura:id="conversationKit" />
</aura:component>

FlowManageChatSessionLAcontroller.js

({
    invoke : function(component, event, helper) {
        var actionType = component.get("v.actionType");
        
        if (actionType == 'sendMessage')
            helper.sendMessage(component, event);
        if (actionType == 'setAgentInput')
            helper.setAgentInput(component, event);
        if (actionType == 'endChat')
            helper.endChat(component, event);
        if (actionType == 'initFileTransfer')
            helper.initFileTransfer(component, event);
    }
})

FlowManageChatSessionLAhelper.js

({
    sendMessage: function(component, event) {
        var conversationKit = component.find("conversationKit");
        var sessionId = component.get("v.sessionId");
        
        if (sessionId != null && sessionId != '') {
            var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
            conversationKit.sendMessage({
                recordId: sessionIdShort,
                message: {
                    text: component.get("v.message")
                }
            })
            .then(function(result){
                if (result) {
                    console.log("Successfully sent message: " + component.get("v.message"));
                } else {
                    console.log("Failed to send message: " + component.get("v.message"));
                }
            });
        }
    },
    
    setAgentInput : function(component, event) {
        var conversationKit = component.find("conversationKit");
        var sessionId = component.get("v.sessionId");
        
        if (sessionId != null && sessionId != '') {
            var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
            conversationKit.setAgentInput({
                recordId: sessionIdShort,
                message: {
                    text: component.get("v.message")
                }
            })
            .then(function(result){
                if (result) {
                    console.log("Successfully setAgentInput, message: " + component.get("v.message"));
                } else {
                    console.log("Failed to setAgentInput, message: " + component.get("v.message"));
                }
            });
        }
    },
    
    endChat : function(component, event) {
        var conversationKit = component.find("conversationKit");
        var sessionId = component.get("v.sessionId");
        
        if (sessionId != null && sessionId != '') {
            var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
            conversationKit.endChat({
                recordId: sessionIdShort
            })
            .then(function(result){
                if (result) {
                    console.log("Successfully endChat");
                } else {
                    console.log("Failed to endChat");
                }
            });
        }
    },
    
    initFileTransfer : function(component, event) {
        var conversationKit = component.find("conversationKit");
        var sessionId = component.get("v.sessionId");
        var recordId = component.get("v.recordId");
        
        if (sessionId != null && sessionId != '' && recordId != null && recordId != '') {
            var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
            var recordIdShort = (recordId.length > 15 ? recordId.substring(0, 15) : recordId);
            console.log("AutoSendChatMessage starting conversationKit initFileTransfer on sessionId: " + sessionIdShort + ", recordId: " + recordIdShort);
            conversationKit.initFileTransfer({
                recordId: sessionIdShort,
                attachmentRecordId : recordIdShort
            });
        }
    }
})

FlowManageChatSessionLA.design

<design:component>
    <design:attribute name="sessionId" label="sessionId"/>
    <design:attribute name="actionType" label="Type of Action" datasource="sendMessage,setAgentInput,endChat,initFileTransfer" default="sendMessage"/>
    <design:attribute name="message" label="Message"/>
    <design:attribute name="recordId" label="recordId"/>
</design:component>

206 reads