amazon-connect/amazon-connect-chat-ui-examples

Failed to send message from customer side

Closed this issue · 5 comments

ShubhadaGoyal commented

Chat received on agent end in amazon connect but failed to send message from customer side.
is1
is2

jiahaoyu6666 commented

Hi @ShubhadaGoyal, could you please provide more detail about your setup? Which approach you are using? Thanks.

xiajon-amzn commented

could you share payload for both start chat and send message as well?

cmdstack commented

I just modified the ACChat to disable markdown, also removed it from supported. Just sending text/plain worked.

spencerlepine commented

Hi @ShubhadaGoyal,

It appears this is an issue with the supportedMessagingContentTypes not being configured correctly.

Details

The chat interface client-side bundle file (amazon-connect-chat-interface.js) will need to pass in the correct supportedMessagingContentTypes option when initiating the widget. This will pass the field in the StartChatContact request to the Amazon Connect Public API. The backend will begin a the chat session and mark it as MARKDOWN ENABLED, which will tell the Agent CCP to also enable markdown in the UI. This field is also be passed to ChatJS session.

The chat session seems to have been created with markdown enabled, but the Chat Interface UI was attempting to still send text/plain messages from the client/browser.

Changes Needed

amazon-connect-chat-interface.js Updates

First, please make sure to enable the feature by updating the initiateChat() config:

This will render the rich toolbar used to apply markdown styling and display the emoji picker.

connect.ChatInterface.initiateChat({
    name: customerName,
    region,
    apiGatewayEndpoint,
    instanceId,
    contactFlowId,
    // ...
+   supportedMessagingContentTypes: "text/plain,text/markdown", // default: "text/plain"
});

StartChatContact Lambda Updates

Second, please make sure you have updated your Lambda to pass this to the Amazon Connect backend:

‼️ If using the StartChatContact Lambda CloudFormation ui-example template, you need to make sure to add this change:

// https://github.com/amazon-connect/amazon-connect-chat-ui-examples/pull/88/files#diff-869a2945b96e9ec51371b0c2895f164a9212a4d09c55a4453ee68243e146e2bc

function startChatContact(contactFlowId, username, body, instanceId) {
    return new Promise(function (resolve, reject) {
        var startChat = {
            "InstanceId": instanceId == "" ? process.env.INSTANCE_ID : instanceId,
            "ContactFlowId": contactFlowId == "" ? process.env.CONTACT_FLOW_ID : contactFlowId,
            },
            "ParticipantDetails": {
                "DisplayName": body["ParticipantDetails"]["DisplayName"]
            },
            // Enable rich messaging: https://docs.aws.amazon.com/connect/latest/adminguide/enable-text-formatting-chat.html
+.          ...(!!body["SupportedMessagingContentTypes"] && { "SupportedMessagingContentTypes": body["SupportedMessagingContentTypes"] })
        };

        connect.startChatContact(startChat, function(err, data) { } );
    });
}

Closing Remark

Closing due to long inactivity. Please feel free to reach out with any further questions.

Thanks,
Spencer

spencerlepine commented

Rich Text Formatting

‼️ MUST ENABLE this feature for your initiateChat() config ["see "Configuration"]

Send and receive messages with rich text formatting. By default, customer will send "text/plain" to agent.

image

Reference

Configuration

Enable/disable feature by updating the initiateChat() config:

This will render the rich toolbar used to apply markdown styling and display the emoji picker.

connect.ChatInterface.initiateChat({
    name: customerName,
    region,
    apiGatewayEndpoint,
    instanceId,
    contactFlowId,
    // ...
+   supportedMessagingContentTypes: "text/plain,text/markdown", // default: "text/plain"
});

Specification

Supported formatting (see Basic Markdown Syntax)

  • Bold
  • Italic
  • Bulleted list
  • Numbered list
  • Hyperlinks
  • Emoji

image

Example Messages

Plain Message (existing behavior):

{
        id: "asdf9374asdf92749adsf",
        type: PARTICIPANT_MESSAGE, // "MESSAGE"
        transportDetails: {
            direction: "Incoming",
        },
        content: {
            type: ContentType.MESSAGE_CONTENT_TYPE.TEXT_PLAIN, // "text/plain"
            data: "This is just plain text message"
        }
    }

Rich Text Message (new behavior):

{
        id: "asdf9374asdf92749adsf",
        type: PARTICIPANT_MESSAGE, // "MESSAGE"
        transportDetails: {
            direction: "Incoming",
        },
        content: {
            type: ContentType.MESSAGE_CONTENT_TYPE.TEXT_MARKDOWN, // "text/markdown"
            data: "*italic* **bold**"
        }
}

Related Code Changes

amazon-connect-chatjs@^1.1.9 supports rich messaging with no additional configuration. [ref]

Referencing PR#92, the following additions are needed for rich messaging support:

StartChatContact Lambda Updates

‼️ If using the StartChatContact Lambda CloudFormation ui-example template, you need to make sure to add this change:

// https://github.com/amazon-connect/amazon-connect-chat-ui-examples/pull/88/files#diff-869a2945b96e9ec51371b0c2895f164a9212a4d09c55a4453ee68243e146e2bc

function startChatContact(contactFlowId, username, body, instanceId) {
    return new Promise(function (resolve, reject) {
        var startChat = {
            "InstanceId": instanceId == "" ? process.env.INSTANCE_ID : instanceId,
            "ContactFlowId": contactFlowId == "" ? process.env.CONTACT_FLOW_ID : contactFlowId,
            },
            "ParticipantDetails": {
                "DisplayName": body["ParticipantDetails"]["DisplayName"]
            },
            // Enable rich messaging: https://docs.aws.amazon.com/connect/latest/adminguide/enable-text-formatting-chat.html
+.          ...(!!body["SupportedMessagingContentTypes"] && { "SupportedMessagingContentTypes": body["SupportedMessagingContentTypes"] })
        };

        connect.startChatContact(startChat, function(err, data) { } );
    });
}