Add mechanism to send an utterance after live chat has completed. Capture relevant connect id information and use as session attributes such that the end live chat utterance has a handle on connect attributes when the live chat completed. This is useful if implementing a post live chat survey.

Author: bobpskier

build/release.sh

@@ -46,4 +46,7 @@ make "qbusiness-lambda-$VERSION.zip"
 cd ..
 cd dist
 make
+cp app.js lex-web-ui.js
+cp app.min.js lex-web-ui.min.js
+cp app.js.map lex-web-ui.js.map
 

build/update-lex-web-ui-config.js

@@ -147,6 +147,7 @@ const lexV2BotLocaleVoices = {
  'CONNECT_START_LIVE_CHAT_ICON',
  'CONNECT_END_LIVE_CHAT_LABEL',
  'CONNECT_END_LIVE_CHAT_ICON',
+ 'CONNECT_END_LIVE_CHAT_UTTERANCE',
  'CONNECT_TRANSCRIPT_MESSAGE_DELAY_IN_MSEC',
  'APP_DOMAIN_NAME',
  'UI_TOOLBAR_TITLE',

config/base.env.js

@@ -23,6 +23,7 @@ module.exports = {
  chatEndedMessage: process.env.CONNECT_CHAT_ENDED_MESSAGE,
  attachChatTranscript: process.env.CONNECT_ATTACH_CHAT_TRANSCRIPT,
  liveChatTerms: process.env.CONNECT_LIVE_CHAT_TERMS,
+ endLiveChatUtterance: process.env.CONNECT_END_LIVE_CHAT_UTTERANCE,
  transcriptMessageDelayInMsec: process.env.CONNECT_TRANSCRIPT_MESSAGE_DELAY_IN_MSEC,
  },
  lex: {

config/env.mk

@@ -36,6 +36,7 @@ export CONNECT_START_LIVE_CHAT_LABEL ?= $()
 export CONNECT_START_LIVE_CHAT_ICON ?= $()
 export CONNECT_END_LIVE_CHAT_LABEL ?= $()
 export CONNECT_END_LIVE_CHAT_ICON ?= $()
+export CONNECT_END_LIVE_CHAT_UTTERANCE ?= $()
 export CONNECT_TRANSCRIPT_MESSAGE_DELAY_IN_MSEC ?= $()
 export BOT_INITIAL_TEXT ?= $()
 export BOT_INITIAL_SPEECH ?= $()

lex-web-ui/src/config/index.js

@@ -76,6 +76,8 @@ const configDefault = {
  liveChatTerms: 'live chat',
  // The delay to use between sending transcript blocks to connect
  transcriptMessageDelayInMsec: 150,
+ // Utterance to send on end live chat
+ endLiveChatUtterance: ''
  },
  lex: {
  // Lex V2 fields

lex-web-ui/src/store/actions.js

@@ -982,7 +982,7 @@ export default {
  return Promise.resolve();
  });
  }
- // If TalkDesk endpoint is available use 
+ // If TalkDesk endpoint is available use
  else if (context.state.config.connect.talkDeskWebsocketEndpoint) {
  liveChatSession = initTalkDeskLiveChat(context);
  return Promise.resolve();
@@ -1020,7 +1020,7 @@ export default {
  if (context.state.config.connect.apiGatewayEndpoint) {
  sendChatMessage(liveChatSession, message);
  }
- // If TalkDesk endpoint is available use 
+ // If TalkDesk endpoint is available use
  else if (context.state.config.connect.talkDeskWebsocketEndpoint) {
  sendTalkDeskChatMessage(context, liveChatSession, message);
 
@@ -1032,22 +1032,22 @@ export default {
  dialogState: context.state.lex.dialogState
  },
  );
- } 
+ }
  }
  },
  requestLiveChatEnd(context) {
  console.info('actions: endLiveChat');
  context.commit('clearLiveChatIntervalId');
  if (context.state.chatMode === chatMode.LIVECHAT && liveChatSession) {
- 
+
  // If Connect API Gateway Endpoint is set, use Connect
  if (context.state.config.connect.apiGatewayEndpoint) {
  requestLiveChatEnd(liveChatSession);
  }
- // If TalkDesk endpoint is available use 
+ // If TalkDesk endpoint is available use
  else if (context.state.config.connect.talkDeskWebsocketEndpoint) {
  requestTalkDeskLiveChatEnd(context, liveChatSession, "agent");
- } 
+ }
 
  context.dispatch('pushLiveChatMessage', {
  type: 'agent',
@@ -1068,6 +1068,15 @@ export default {
  },
  liveChatSessionEnded(context) {
  console.info('actions: liveChatSessionEnded');
+ console.info(`connect config is : ${context.state.config.connect}`);
+ if (context.state.config.connect.endLiveChatUtterance && context.state.config.connect.endLiveChatUtterance.length > 0) {
+ const message = {
+ type: context.state.config.ui.hideButtonMessageBubble ? 'button' : 'human',
+ text: context.state.config.connect.endLiveChatUtterance,
+ };
+ context.dispatch('postTextMessage', message);
+ console.info("dispatching request to send message");
+ }
  liveChatSession = null;
  context.commit('setLiveChatStatus', liveChatStatus.ENDED);
  context.commit('setChatMode', chatMode.BOT);
@@ -1307,15 +1316,15 @@ export default {
  Bucket: context.state.config.ui.uploadS3BucketName,
  Key: documentKey,
  };
- 
+
  s3.putObject(s3Params, function(err, data) {
  if (err) {
  console.log(err, err.stack); // an error occurred
  context.commit('pushMessage', {
  type: 'bot',
  text: context.state.config.ui.uploadFailureMessage,
  });
- } 
+ }
  else {
  console.log(data); // successful response
  const documentObject = {

lex-web-ui/src/store/live-chat-handlers.js

@@ -35,9 +35,24 @@ export const connectLiveChatSession = session =>
  return Promise.reject(error);
  }));
 
+function recordSessionAttributes(context, chatDetails) {
+ if (chatDetails && chatDetails.initialContactId) {
+ context.commit("setLexSessionAttributeValue", { key: 'connect_initial_contact_id', value: chatDetails.initialContactId });
+ }
+ if (chatDetails && chatDetails.contactId) {
+ context.commit("setLexSessionAttributeValue", { key: 'connect_contact_id', value: chatDetails.contactId });
+ }
+ if (chatDetails && chatDetails.participantId) {
+ context.commit("setLexSessionAttributeValue", { key: 'connect_participant_id', value: chatDetails.participantId });
+ }
+}
+
 export const initLiveChatHandlers = (context, session) => {
  session.onConnectionEstablished((data) => {
  console.info('Established!', data);
+ if (data && data.chatDetails) {
+ recordSessionAttributes(context, data.chatDetails);
+ }
  // context.dispatch('pushLiveChatMessage', {
  // type: 'agent',
  // text: 'Live Chat Connection Established',
@@ -48,6 +63,9 @@ export const initLiveChatHandlers = (context, session) => {
  const { chatDetails, data } = event;
  console.info(`Received message: ${JSON.stringify(event)}`);
  console.info('Received message chatDetails:', chatDetails);
+ if (chatDetails) {
+ recordSessionAttributes(context, chatDetails);
+ }
  let type = '';
  switch (data.ContentType) {
  case 'application/vnd.amazonaws.connect.event.participant.joined':

src/config/lex-web-ui-loader-config.json

@@ -10,6 +10,7 @@
  "agentLeftMessage": "",
  "chatEndedMessage": "",
  "attachChatTranscript": "",
+ "endLiveChatUtterance": "",
  "transcriptMessageDelayInMsec": ""
  }
 }

templates/codebuild-deploy.yaml

@@ -230,6 +230,12 @@ Parameters:
  Icon to use in menu and toolbar to end connect live chat
  Default: "call_end"
 
+ ConnectEndLiveChatUtterance:
+ Type: String
+ Description: >
+ Optional utterance to send to bot after ending a live chat session
+ Default: ''
+
  ConnectTranscriptMessageDelayInMsec:
  Type: Number
  Description: >
@@ -839,6 +845,8 @@ Resources:
  Value: !Ref ConnectEndLiveChatLabel
  - Name: CONNECT_END_LIVE_CHAT_ICON
  Value: !Ref ConnectEndLiveChatIcon
+ - Name: CONNECT_END_LIVE_CHAT_UTTERANCE
+ Value: !Ref ConnectEndLiveChatUtterance
  - Name: CONNECT_TRANSCRIPT_MESSAGE_DELAY_IN_MSEC
  Value: !Ref ConnectTranscriptMessageDelayInMsec
  - Name: APP_USER_POOL_CLIENT_ID
@@ -987,6 +995,7 @@ Resources:
  ConnectStartLiveChatIcon: !Ref ConnectStartLiveChatIcon
  ConnectEndLiveChatLabel: !Ref ConnectEndLiveChatLabel
  ConnectEndLiveChatIcon: !Ref ConnectEndLiveChatIcon
+ ConnectEndLiveChatUtterance: !Ref ConnectEndLiveChatUtterance
  ConnectTranscriptMessageDelayInMsec: !Ref ConnectTranscriptMessageDelayInMsec
  WebAppBucket: !Ref WebAppBucket
  LexV2BotId: !Ref LexV2BotId

templates/master.yaml

@@ -486,6 +486,12 @@ Parameters:
  Icon to use in menu and toolbar to end connect live chat
  Default: "call_end"
 
+ ConnectEndLiveChatUtterance:
+ Type: String
+ Description: >
+ Optional utterance to send to bot after ending a live chat session
+ Default: ''
+
  ## CSS Configuration Options
  MessageTextColor:
  Type: String
@@ -686,6 +692,7 @@ Metadata:
  - ConnectStartLiveChatIcon
  - ConnectEndLiveChatLabel
  - ConnectEndLiveChatIcon
+ - ConnectEndLiveChatUtterance
  - ConnectTranscriptMessageDelayInMsec
  - Label:
  default: CSS Customization Parameters
@@ -701,7 +708,7 @@ Metadata:
  default: Q Business Parameters
  Parameters:
  - AmazonQAppId
- - IDCApplicationARN 
+ - IDCApplicationARN
 
 Conditions:
  IsLexV2: !Not [ !Equals [!Ref LexV2BotId, ''] ]
@@ -736,7 +743,7 @@ Resources:
  CognitoIdentityPoolName: !Ref CognitoIdentityPoolName
  ForceCognitoLogin: !Ref ForceCognitoLogin
  LexBotName: !Ref BotName
- LexV2BotId: 
+ LexV2BotId:
  !If
  - NeedsBot
  - !GetAtt Bot.Outputs.BotId
@@ -745,7 +752,7 @@ Resources:
  !If
  - NeedsBot
  - !GetAtt Bot.Outputs.BotAlias
- - !Ref LexV2BotAliasId 
+ - !Ref LexV2BotAliasId
  ShouldEnableLiveChat: !Ref ShouldEnableLiveChat
  ShouldEnableUpload: !Ref ShouldEnableUpload
  UploadBucket: !Ref UploadBucket
@@ -778,7 +785,7 @@ Resources:
  - !GetAtt Bot.Outputs.BotId
  - !Ref BotName
  BotAlias: !Ref BotAlias
- LexV2BotId: 
+ LexV2BotId:
  !If
  - NeedsBot
  - !GetAtt Bot.Outputs.BotId
@@ -787,7 +794,7 @@ Resources:
  !If
  - NeedsBot
  - !GetAtt Bot.Outputs.BotAlias
- - !Ref LexV2BotAliasId 
+ - !Ref LexV2BotAliasId
  LexV2BotLocaleId: !Ref LexV2BotLocaleId
  CognitoIdentityPoolId:
  !If
@@ -847,6 +854,7 @@ Resources:
  ConnectStartLiveChatIcon: !Ref ConnectStartLiveChatIcon
  ConnectEndLiveChatLabel: !Ref ConnectEndLiveChatLabel
  ConnectEndLiveChatIcon: !Ref ConnectEndLiveChatIcon
+ ConnectEndLiveChatUtterance: !Ref ConnectEndLiveChatUtterance
  ConnectTranscriptMessageDelayInMsec: !Ref ConnectTranscriptMessageDelayInMsec
  MessageTextColor: !Ref MessageTextColor
  MessageFont: !Ref MessageFont
@@ -860,7 +868,7 @@ Resources:
  AllowStreamingResponses: !Ref AllowStreamingResponses
  ShouldEnableUpload: !Ref ShouldEnableUpload
  UploadBucket: !Ref UploadBucket
- Timestamp: 1723566731
+ Timestamp: 1724098094
 
  CognitoIdentityPoolConfig:
  Type: AWS::CloudFormation::Stack
@@ -874,7 +882,7 @@ Resources:
  CodeBuildProjectName: !GetAtt CodeBuildDeploy.Outputs.CodeBuildProject
  CognitoUserPool: !GetAtt CognitoIdentityPool.Outputs.CognitoUserPoolId
  CognitoUserPoolClient: !GetAtt CognitoIdentityPool.Outputs.CognitoUserPoolClientId
- Timestamp: 1723566731
+ Timestamp: 1724098094
 
  ##########################################################################
  # Lambda that will validate if user has put in an invalid CSS color/Hex string and fail deployment