rich formatting support for interactive messages

[spencerlepine]

Reference

• Documentation: https://docs.aws.amazon.com/connect/latest/adminguide/interactive-messages.html
• Blog: https://aws.amazon.com/blogs/contact-center/easily-set-up-interactive-messages-for-your-amazon-connect-chatbot/
• Issue: Markdown on Interactive Messaging #47

Description of changes:

Created component <RichLinkRenderer /> to support markdown hyperlinks for interactive message title/subtitles.

Should create anchor tag for the following:

• "[amazon.com](https://amazon.com)" => amazon.com
• "https://amazon.com" => https://amazon.com
• "[amazon.com](https://amazon.com){:target="_self"}" => amazon.com
• "[amazon.com](https://amazon.com){:target="_blank"}" => amazon.com

Note: also changed the dependabot PR creation, because it was cluttering pull requests

Interactive Message Lex Bot

Set up a lex bot following the blog post. In the lex lambda, modify the intent title passed to user to be rich text, e.g. title: "How can we help? [Learn More](https://oursite.com)"

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

[spencerlepine]

ListPicker Lambda

// Lambda code for Lex bot

/* CREATE A LIST PICKER */
function createSimpleListPickerFromOptions(title, options) {
  let elements = options.map((option) => {
    return { title: option };
  });

  return {
    templateType: TEMPLATE_TYPES.LISTPICKER,
    version: "1.0",
    data: {
      content: {
        title: "How can I help you? [richLink](https://example.com)<!--rehype:target=_self-->", // default {:target=\"_blank"}
        subtitle: "**Bold Subtitle** *italics* [richLink](https://somelink.com) https://plainlink.com.",
        elements: elements,
      },
    },
  };
}

ListPicker UI Demo

TimePicker Lambda

SIMPLE_TIMEPICKER: {
    templateType: TEMPLATE_TYPES.TIMEPICKER,
    version: "1.0",
    data: {
      content: {
        title: "Schedule appointment [richLink](https://example.com)<!--rehype:target=_self-->",
        subtitle: "**Bold pick option:** *italics* [richLink](https://somelink.com) https://plainlink.com.",
        timeslots: [
          {
            date: "2020-10-31T18:00+00:00",
            duration: 60,
          },
          {
            date: "2020-10-15T13:00+00:00",
            duration: 60,
          },
          {
            date: "2020-10-15T16:00+00:00",
            duration: 60,
          },
        ],
      },
    },
  },

TimePicker UI demo

ListPicker Images Lambda

DEPARTMENT_WITH_MULTIPLE_IMAGES: {
    templateType: TEMPLATE_TYPES.LISTPICKER,
    version: "1.0",
    data: {
      content: {
        title: "Which department do you want to select? [richLink](https://somelink.com) https://plainlink.com",
        subtitle: "**Bold pick option:** *italics* [richLink](https://somelink.com) https://plainlink.com.",
        imageType: "URL",
        imageData: IMAGE_URLS.COMPANY,
        elements: [
          {
            title: DEPARTMENT_SLOT.BILLING,
            subtitle: "Request billing information",
            imageType: "URL",
            imageData: IMAGE_URLS.BILLING,
          },
          {
            title: DEPARTMENT_SLOT.NEW_SERVICE,
            subtitle: "Set up a new service",
            imageType: "URL",
            imageData: IMAGE_URLS.NEW_SERVICE,
          },
          {
            title: DEPARTMENT_SLOT.CANCELLATION,
            subtitle: "Request a cancellation",
            imageType: "URL",
            imageData: IMAGE_URLS.CANCELLATION,
          },
        ],
      },
    },
  },

ListPicker Images UI Demo

Dev Tool Screenshot

[spencerlepine]

To clean up dependabot auto-PR creation, we should raise them monthly, and ignore breaking major upgrades, since we will ignore anyways.

[spencerlepine]

Testing in local-testing folder and real lex bot: