Add pre-chat message with starter prompts

[compulim]

Fixes #5256.

Changelog Entry

Added

• (Experimental) Added pre-chat message with starter prompts, in PR #5255, by @compulim

Changed

• Updated useSuggestedActions to return the activity the suggested actions originated from, in PR #5255, by @compulim

Fixed

• Fixed #5256. styleOptions.maxMessageLength should support any JavaScript number value including Infinity, by @compulim, in PR #5255

Description

Adding experimental pre-chat message with starter prompts in Fluent skin pack.

Pre-chat message activity is defined as:

• type === 'message'
• entities[] contains a https://schema.org/Message object which fulfill the following criteria
  • type === 'https://schema.org/Message'
  • @context === 'https://schema.org'
  • @id === '', the empty string indicates the object is about the message itself
  • @type === 'Message'
  • keywords[] contains "PreChatMessage"

Design

The pre-chat message activity leverage Schema.org/Message/keywords to tag the message itself as a "PreChatMessage".

We also want to reuse the suggested actions messageBack actions for starter prompts (image, title, text, and optionally display text). Thus, we need to hide the suggested actions in the send box. This also pave the road for the inline suggested actions feature.

Specific Changes

• Added new PreChatMessageActivity to activity middleware of Fluent skin pack
  • Currently, the pre-chat message activity only supports card action (a.k.a. starter prompts)
  • Starter prompts are defined by the activity.suggestedActions, they must be messageBack card action
• Updated useSuggestedActions to return the activity the suggested actions originated from
• Hid suggested actions in the send box if they are inline-d in the activity
• Handled styleOptions.maxMessageLength === Infinity' should treat the style option as disabled

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)