Add Smart Display sample

CHANGELOG.md

@@ -71,6 +71,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    -  Added triple-buffering to reduce pops/cracks.
    -  Enable Safari by upsampling to 48000 Hz.
    -  Support detailed output format on Web Chat side.
+-  Fixes [#2700](https://github.com/microsoft/BotFramework-WebChat/issues/2700). Enable `<SayComposer>` and Adaptive Cards in recompose story, in PR [#2649](https://github.com/microsoft/BotFramework-WebChat/pull/2649)
+   -  Moved `<SayComposer>` from `<BasicTranscript>` to `<Composer>`
+   -  Moved WebSpeechPonyfill patching code from `<BasicTranscript>` to `<Composer>`
+-  Fixes [#2699](https://github.com/microsoft/BotFramework-WebChat/issues/2699). Disable speech recognition and synthesis when using Direct Line Speech under IE11, in PR [#2649](https://github.com/microsoft/BotFramework-WebChat/pull/2649)
 
 ### Changed
 
@@ -157,6 +161,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Samples
 
 -  [Clear Conversation After Idle](https://microsoft.github.io/BotFramework-WebChat/17.b.clear-after-idle/), by [@tdurnford](https://github.com/tdurnford), in PR [#2375](https://github.com/microsoft/BotFramework-WebChat/pull/2375)
+-  [Smart Display](https://microsoft.github.io/BotFramework-WebChat/24.customization-smart-display/), by [@compulim](https://github.com/compulim), in PR [#2649](https://github.com/microsoft/BotFramework-WebChat/pull/2649)
 
 ## [4.6.0] - 2019-10-31
 
@@ -356,7 +361,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 -  `*`: [Single sign-on for enterprise apps](https://microsoft.github.io/BotFramework-WebChat/19.a.single-sign-on-for-enterprise-apps/), by [@compulim](https://github.com/compulim) in [#2002](https://github.com/microsoft/BotFramework-WebChat/pull/2002)
 -  `*`: [Upload to Azure Storage](https://microsoft.github.io/BotFramework-WebChat/20.a.upload-to-azure-storage/), by [@compulim](https://github.com/compulim) in [#2127](https://github.com/microsoft/BotFramework-WebChat/pull/2127)
--  `*`: [Speech UI demo](https://microsoft.github.io/BotFramework-WebChat/13.customization-speech-ui). Reconfigured to use Cognitive Services properly, by [@compulim](https://github.com/compulim) in PR [#2132](https://github.com/microsoft/BotFramework-WebChat/pull/2132)
+-  `*`: [Speech UI demo](https://microsoft.github.io/BotFramework-WebChat/13.a.customization-speech-ui). Reconfigured to use Cognitive Services properly, by [@compulim](https://github.com/compulim) in PR [#2132](https://github.com/microsoft/BotFramework-WebChat/pull/2132)
 -  `*`: [Single sign-on for Intranet apps](https://microsoft.github.io/BotFramework-WebChat/19.b.single-sign-on-for-intranet-apps/), by [@compulim](https://github.com/compulim) in [#2144](https://github.com/microsoft/BotFramework-WebChat/pull/2144)
 -  `*`: [Change locale on-the-fly](https://microsoft.github.io/BotFramework-WebChat/22.customization-change-locale/), by [@compulim](https://github.com/compulim) in [#2451](https://github.com/microsoft/BotFramework-WebChat/pull/2451)
 
@@ -485,7 +490,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  `component`: [Password input activity](https://microsoft.github.io/BotFramework-WebChat/10.b.customization-password-input/), in [#1569](https://github.com/microsoft/BotFramework-WebChat/pull/1569)
 -  `*`: Updated [minimizable Web Chat](https://microsoft.github.io/BotFramework-WebChat/12.customization-minimizable-web-chat/) sample to use `WEB_CHAT/SEND_EVENT` action, in [#1631](https://github.com/microsoft/BotFramework-WebChat/pull/1631)
 -  `component`: [Hybrid speech engine](https://microsoft.github.io/BotFramework-WebChat/06.f.hybrid-speech/), in [#1617](https://github.com/microsoft/BotFramework-WebChat/pull/1617)
--  `component`: Use Speech Services token for [speech UI sample](https://microsoft.github.io/BotFramework-WebChat/13.customization-speech-ui/), in [#1634](https://github.com/microsoft/BotFramework-WebChat/pull/1634)
+-  `component`: Use Speech Services token for [speech UI sample](https://microsoft.github.io/BotFramework-WebChat/13.a.customization-speech-ui/), in [#1634](https://github.com/microsoft/BotFramework-WebChat/pull/1634)
 -  `component`: [Selectable Activity](https://microsoft.github.io/BotFramework-WebChat/16.customization-selectable-activity/), in [#1624](https://github.com/microsoft/BotFramework-WebChat/pull/1624)
 -  `component`: [Chat Send History](https://microsoft.github.io/BotFramework-WebChat/17.a.chat-send-history/), in [#1678](https://github.com/microsoft/BotFramework-WebChat/pull/1678)
 -  `*`: Update `README.md`'s for samples 05-10 [#1444](https://github.com/microsoft/BotFramework-WebChat/issues/1444) and improve accessibility of anchors [#1681](https://github.com/microsoft/BotFramework-WebChat/issues/1681), by [@corinagum](https://github.com/corinagum) in PR [#1710](https://github.com/microsoft/BotFramework-WebChat/pull/1710)

README.md

@@ -177,6 +177,7 @@ There is a breaking change on behavior expectations regarding speech and input h
 | [`01.a.getting-started-full-bundle`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.a.getting-started-full-bundle)                                                                                       | Introduces Web Chat embed from a CDN, and demonstrates a simple, full-featured Web Chat. This includes Adaptive Cards, Cognitive Services, and Markdown-It dependencies.                                                            | [Full Bundle Demo](https://microsoft.github.io/BotFramework-WebChat/01.a.getting-started-full-bundle)                                                   |
 | [`01.b.getting-started-es5-bundle`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.b.getting-started-es5-bundle)                                                                                         | Introduces full-featured Web Chat embed with backwards compatibility for ES5 browsers using Web Chat's ES5 ponyfill.                                                                                                                | [ES5 Bundle Demo](https://microsoft.github.io/BotFramework-WebChat/01.b.getting-started-es5-bundle)                                                     |
 | [`01.c.getting-started-migration`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.c.getting-started-migration)                                                                                           | Demonstrates how to migrate from your Web Chat v3 bot to v4.                                                                                                                                                                        | [Migration Demo](https://microsoft.github.io/BotFramework-WebChat/01.c.getting-started-migration)                                                       |
+| [`01.d.getting-started-es5-direct-line-speech`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.d.getting-started-es5-direct-line-speech)                                                                 | Demonstrates how to use Direct Line Speech with ES5 bundle.                                                                                                                                                                         | [ES5 Direct Line Speech Demo](https://microsoft.github.io/BotFramework-WebChat/01.d.getting-started-es5-direct-line-speech)                             |
 | [`02.a.getting-started-minimal-bundle`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/02.a.getting-started-minimal-bundle)                                                                                 | Introduces the minimized CDN with only basic dependencies. This does NOT include Adaptive Cards, Cognitive Services dependencies, or Markdown-It dependencies.                                                                      | [Minimal Bundle Demo](https://microsoft.github.io/BotFramework-WebChat/02.a.getting-started-minimal-bundle)                                             |
 | [`02.b.getting-started-minimal-markdown`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown)                                                                             | Demonstrates how to add the CDN for Markdown-It dependency on top of the minimal bundle.                                                                                                                                            | [Minimal with Markdown Demo](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown)                                    |
 | [`03.a.host-with-react`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.a.host-with-react)                                                                                                               | Demonstrates how to create a React component that hosts the full-featured Web Chat.                                                                                                                                                 | [Host with React Demo](https://microsoft.github.io/BotFramework-WebChat/03.a.host-with-react)                                                           |
@@ -203,7 +204,8 @@ There is a breaking change on behavior expectations regarding speech and input h
 | [`10.b.customization-password-input`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/10.b.customization-password-input)                                                                                     | Demonstrates how to create custom activity for password input.                                                                                                                                                                      | [Password Input Demo](https://microsoft.github.io/BotFramework-WebChat/10.b.customization-password-input)                                               |
 | [`11.customization-redux-actions`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/11.customization-redux-actions)                                                                                           | Advanced tutorial: Demonstrates how to incorporate redux middleware into your Web Chat app by sending redux actions through the bot. This example demonstrates manual styling based on activities between bot and user.             | [Redux Actions Demo](https://microsoft.github.io/BotFramework-WebChat/11.customization-redux-actions)                                                   |
 | [`12.customization-minimizable-web-chat`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/12.customization-minimizable-web-chat)                                                                             | Advanced tutorial: Demonstrates how to add the Web Chat interface to your website as a minimizable show/hide chat box.                                                                                                              | [Minimizable Web Chat Demo](https://microsoft.github.io/BotFramework-WebChat/12.customization-minimizable-web-chat)                                     |
-| [`13.customization-speech-ui`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/13.customization-speech-ui)                                                                                                   | Advanced tutorial: Demonstrates how to fully customize key components of your bot, in this case speech, which entirely replaces the text-based transcript UI and instead shows a simple speech button with the bot's response.      | [Speech UI Demo](https://microsoft.github.io/BotFramework-WebChat/13.customization-speech-ui)                                                           |
+| [`13.a.customization-speech-ui`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/13.a.customization-speech-ui)                                                                                               | Advanced tutorial: Demonstrates how to fully customize key components of your bot, in this case speech, which entirely replaces the text-based transcript UI and instead shows a simple speech button with the bot's response.      | [Speech UI Demo](https://microsoft.github.io/BotFramework-WebChat/13.a.customization-speech-ui)                                                         |
+| [`13.b.customization-smart-display`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/13.b.customization-smart-display)                                                                                       | Demonstrates how to compose Web Chat UI into a Smart Display                                                                                                                                                                        | [Smart Display Demo](https://microsoft.github.io/BotFramework-WebChat/13.b.customization-smart-display)                                                 |
 | [`14.customization-piping-to-redux`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/14.customization-piping-to-redux)                                                                                       | Advanced tutorial: Demonstrates how to pipe bot activities to your own Redux store and use your bot to control your page through bot activities and Redux.                                                                          | [Piping to Redux Demo](https://microsoft.github.io/BotFramework-WebChat/14.customization-piping-to-redux)                                               |
 | [`15.a.backchannel-piggyback-on-outgoing-activities`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/15.a.backchannel-piggyback-on-outgoing-activities)                                                     | Advanced tutorial: Demonstrates how to add custom data to every outgoing activities.                                                                                                                                                | [Backchannel Piggybacking Demo](https://microsoft.github.io/BotFramework-WebChat/15.a.backchannel-piggyback-on-outgoing-activities)                     |
 | [`15.b.incoming-activity-event`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/15.b.incoming-activity-event)                                                                                               | Advanced tutorial: Demonstrates how to forward all incoming activities to a JavaScript event for further processing.                                                                                                                | [Incoming Activity Demo](https://microsoft.github.io/BotFramework-WebChat/15.b.incoming-activity-event)                                                 |

__tests__/hooks/useWebSpeechPonyfill.js

@@ -1,5 +1,4 @@
 import { timeouts } from '../constants.json';
-import executePromiseScript from '../setup/pageObjects/executePromiseScript.js';
 
 // selenium-webdriver API doc:
 // https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
@@ -18,13 +17,16 @@ test('getter should return webSpeechPonyfill from props', async () => {
   ).resolves.toBeTruthy();
 });
 
-test('getter should return undefined if not set in props', async () => {
+test('getter should return speech synthesis bypass if not set in props', async () => {
   const { pageObjects } = await setupWebDriver();
 
-  // Although useWebSpeechPonyfill return [undefined], runHook/executeAsyncScript turned it into [null].
   await expect(
-    pageObjects.runHook('useWebSpeechPonyfill', [], webSpeechPonyfill => webSpeechPonyfill[0])
-  ).resolves.toBeNull();
+    pageObjects.runHook('useWebSpeechPonyfill', [], webSpeechPonyfill =>
+      Object.keys(webSpeechPonyfill[0])
+        .sort()
+        .join(', ')
+    )
+  ).resolves.toMatchInlineSnapshot(`"SpeechSynthesisUtterance, speechSynthesis"`);
 });
 
 test('setter should throw exception', async () => {

lerna.json

@@ -3,7 +3,8 @@
   "packages": [
     "packages/*",
     "samples/12.customization-minimizable-web-chat",
-    "samples/13.customization-speech-ui",
+    "samples/13.a.customization-speech-ui",
+    "samples/13.b.customization-smart-display",
     "samples/14.customization-piping-to-redux",
     "samples/16.customization-selectable-activity",
     "samples/17.a.chat-send-history",

packages/bundle/src/index.ts

@@ -46,6 +46,7 @@ export {
   createAdaptiveCardsAttachmentMiddleware,
   createCognitiveServicesBingSpeechPonyfillFactory,
   createCognitiveServicesSpeechServicesPonyfillFactory,
+  createDirectLineSpeechAdapters,
   createStyleSet,
   patchedHooks as hooks,
   renderMarkdown,

packages/bundle/webpack.config.js

@@ -39,6 +39,17 @@ module.exports = {
     alias: {
       react: resolve(__dirname, 'node_modules/isomorphic-react/dist/react.js'),
       'react-dom': resolve(__dirname, 'node_modules/isomorphic-react-dom/dist/react-dom.js')
-    }
+    },
+
+    // Since Webpack is configured not to transpile, we cannot use package.json/module field to load a module.
+    // The default Webpack module resolution order is: "module", then "browser", then "main".
+    //
+    // De facto entrypoint definitions:
+    // - "module": ES.next: transpilation is required for this entrypoint. It should yield code with smallest footprint.
+    // - "main": Plain old Node.js or browser: should be ES5 compatible. It may be configured to work only on either Node.js or browser.
+    // - "browser": Plain old browsers (ES5, which is supported by IE9). This entrypoint will not work on Node.js.
+    //
+    // If both "main" and "browser" are present, "main" will be for Node.js and "browser" will be for browsers.
+    mainFields: ['browser', 'main']
   }
 };