rich formatting support for interactive messages

spencerlepine commented 1 year ago

Reference

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 commented 1 year ago

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,
          },
        ],
      },
    },
  },