Add notification and toast

[compulim]

Fixes #2755.

Changelog Entry

Added

• Resolves #2755, added notification system and toast UI, by @compulim, in PR #2883
  • Please read this article on how to use notification
  • Slow connection timer can now be set using styleOptions.slowConnectionAfter (in milliseconds)
• Resolves #2871, moved typing indicator to transcript, by @compulim, in PR #2883

Samples

• Resolves #2755, added "how to use notification and customize the toast UI" sample, by @compulim, in PR #2883

Description

This is feature work for adding a notification bar to Web Chat.

To add/set/replace a notification entry, use the following code.

store.dispatch({
  type: 'WEB_CHAT/SET_NOTIFICATION',
  payload: {
    id: 'success',
    level: 'success',
    message: 'You have successfully completed something'
  }
});

Design

Markdown support

All notifications message can be enriched by using Markdown. Hyperlinks will have rel="noopener noreferrer" and target="_blank" added for privacy reasons. Internally, it will use a version of Markdown-It renderer bundled with Web Chat. It will not use the version passed by the dev via renderMarkdown prop.

Sorting notifications

Notifications will be sorted with the most recent one on the top. If a notification is updated, they will be moved to the top of the list.

Updating notifications

All notifications are ID-ed using id. Notifications can be updated by dispatching `WEB_CHAT/SET_NOTIFICATION with the same ID.

After the notification is updated, their timestamp will be updated and they will be moved to the top of the list.

Multiple notifications

When more than one notification is visible, they will be collapsed as an accordion. The accordion can be expanded/collapsed through user gesture.

The color and icon of the accordion will be based on the highest level of all visible notifications. error > warn > info > success.

Connectivity status

Connectivity status will become part of notification and stored in Redux store.

The connectivity status visual will be hidden from the notification bar (i.e. <BasicNotificationBar>). A new component <BasicConnectivityStatus> will render the connectivity status exclusively.

Screenshots

Support Markdown

Multiple notifications

Single "success" notifications

Works under IE11

Specific Changes

---

• Testing Added

[corinagum]

@compulim if this PR is including changes to typing indicator and suggested actions, please include the issues linked in the following comment: #2871 (comment)

[tdurnford]

Do we need to sanitize the resulting HTML? Also do we want the internalMarkdownIt to respect the carriage return style option?

https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/bundle/src/renderMarkdown.js