feat: QuickReply and Carousel interactive messages

Description

Create new components for QuickReply and Carousel interactive messages.

Reference

Testing

https://github.com/amazon-connect/amazon-connect-chat-interface/assets/60903378/fa7f36ab-20bd-45e4-a87f-95bcdddab386

https://github.com/amazon-connect/amazon-connect-chat-interface/assets/60903378/5df15425-db29-4632-aa2a-2cb8fa198050

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.

amazon-connect / amazon-connect-chat-interface

feat: QuickReply and Carousel interactive messages #127