update chat-interface bundle file for new widget Interactive Messages

[spencerlepine]

Description

Update amazon-connect-chat-interface.js bundle file for new QuickReply and Carousel interactive messages components.

Reference

• Documentation: https://docs.aws.amazon.com/connect/latest/adminguide/interactive-messages.html
• (old) Blog Article: https://aws.amazon.com/blogs/contact-center/easily-set-up-interactive-messages-for-your-amazon-connect-chatbot/
• SAMTemplate: https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/samTemplates/amazon-connect-interactive-messages-example

Testing

ChatInterfaceProdGitHubTest.mov

GitHubChatInterfaceQuickReplyTest.mov

QuickReply

Template

{
    "templateType":"QuickReply",                         (mandatory)
    "version":"1.0",                                     (mandatory)
    "data":{
        "content": {
            "title": "How was your experience?",         (mandatory)
            "elements": [                                (mandatory, 2-5 items)
                {
                    "title": "Great!"
                },
                {
                    "title": "Good"
                },
                {
                    "title": "Ok"
                },
                {
                    "title": "Poor"
                },
                {
                    "title": "Terrible!"  (1-200 characters)
                }
            ]
        }
    }
}

Component Layout

Carousel

Template:

{
    version: "1.0",
    templateType: "Carousel",
    data: {
        content: {
            ...
            title: "View our popular destinations",
            elements: [
            {
                version: "1.0",
                templateType: "ListPicker",
                templateIdentifier: "<UUID>" // used to identify which message user interacts with
                data: {
                    content: {
                        title: "Hotel Gabonzo Suite",
                        subtitle: "Select an option:",
                        elements: [
                            {
                                title: "View Listing",
                                type: "hyperlink",                      <-- NEW
                                url: "https://hotels.com/gobonza"       <-- NEW
                            },
                            {
                                title: "AnotherPanelElementTitle",
                           }
                        ]
                    }
                }
            }
            ]
        }
    }
}

Outgoing JSON:

{
  "Content":"{\"templateIdentifier\":\"carouselPicker0001\",\"listTitle\":\"Flight\",\"selectionText\":\"View All Destinations\"}",
  "ContentType":"text/plain",
  "ClientToken":"68b2e8d2-1768-4497-bc8d-05f08eeb874d"
}

End-to-end UI

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.