Modify middleware order and add backchannel injection sample

CHANGELOG.md

@@ -7,19 +7,21 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 ### Added
-- Development build now include instrumentation code, updated build scripts
+- Build: Development build now include instrumentation code, updated build scripts
    - `npm run build` will build for development with instrumentation code
    - `npm run prepublishOnly` will build for production
    - `npm run watch` will also run Webpack in watch loop
-- Automated testing using visual regression testing technique
+- Build: Automated testing using visual regression testing technique
    - [Docker-based](https://github.com/SeleniumHQ/docker-selenium) automated testing using headless Chrome and [Web Driver](https://npmjs.com/packages/selenium-webdriver)
    - Screenshot comparison using [`jest-image-snapshot`](https://npmjs.com/packages/jest-image-snapshot) and [`pixelmatch`](https://npmjs.com/package/pixelmatch)
    - Code is instrumented using [`istanbul`](https://npmjs.com/package/istanbul)
    - Test report is hosted on [Coveralls](https://coveralls.io/github/compulim/BotFramework-WebChat)
 - Add French localization, by [@tao1](https://github.com/tao1) in PR [#1327](https://github.com/Microsoft/BotFramework-WebChat/pull/1327)
 
 ### Changed
-- Bump dependencies, in [#1303](https://github.com/Microsoft/BotFramework-WebChat/pull/1303)
+- Core: Saga will run after custom middleware, in [#1331](https://github.com/Microsoft/BotFramework-WebChat/pull/1331)
+   - Custom middleware run before saga to allow user to modify default behavior
+- Build: Bump dependencies, in [#1303](https://github.com/Microsoft/BotFramework-WebChat/pull/1303)
    - `@babel`
       - `@babel/[email protected]`
       - `@babel/[email protected]`
@@ -46,6 +48,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fix [#1237](https://github.com/Microsoft/BotFramework-WebChat/issues/1237). Added new sample called `migration`, by [@corinagum](https://github.com/corinagum) in PR [#1398](https://github.com/Microsoft/BotFramework-WebChat/pull/1398)
 - Fix sample names and add table to README; resolves [Issue #1332](https://github.com/Microsoft/BotFramework-WebChat/issues/1332) by [@corinagum](https://github.com/corinagum) in PR [#1435](https://github.com/Microsoft/BotFramework-WebChat/pull/1435)
 
+### Fixed
+- Build: Webpack watch mode now emits non-minified code for shorter dev RTT, in [#1331](https://github.com/Microsoft/BotFramework-WebChat/pull/1331)
+
+### Samples
+- Backchannel: Inject custom data into every `POST_ACTIVITY`, in [#1331](https://github.com/Microsoft/BotFramework-WebChat/pull/1331)
+- UI: Minimize mode, in [#1290](https://github.com/Microsoft/BotFramework-WebChat/pull/1290)
+- Others: Use Web Chat v3, in [#1287](https://github.com/Microsoft/BotFramework-WebChat/pull/1287)
+
 ## [4.1.0] - 2018-10-31
 ### Added
 - Initial release of Web Chat v4

README.md

@@ -211,9 +211,9 @@ npm run prepublishOnly
 | [`3.b.host-with-Angular5`](https://github.com/Microsoft/BotFramework-WebChat/issues/1423)                   | Demonstrates how to create an Angular component that hosts the full-featured Web Chat.                                                                                                                                              |                                                                                                       |
 | [`4.display-user-bot-initials-styling`](https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/4.display-user-bot-initials-styling)      | Demonstrates how to display initials for both Web Chat participants.                                                                                                                                                                | [Demo](https://microsoft.github.io/BotFramework-WebChat/4.display-user-bot-initials-styling)      |
 | [`5.a.branding-webchat-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/5.a.branding-webchat-styling)             | Introduces the ability to style Web Chat to match your brand. This method of custom styling will not break upon Web Chat updates.                                                                                                   | [Demo](https://microsoft.github.io/BotFramework-WebChat/5.a.branding-webchat-styling)             |
-| [`5.b.idiosyncratic-manual-styling`](https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/5.b.idiosyncratic-manual-styling/)         | Demonstrates how to make manual style changes, and is a more complicated and time-consuming way to customize styling of Web Chat. Manual styles may be broken upon Web Chat updates.                                                | [Demo](https://microsoft.github.io/BotFramework-WebChat/5.b.idiosyncratic-manual-styling)         | 
+| [`5.b.idiosyncratic-manual-styling`](https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/5.b.idiosyncratic-manual-styling/)         | Demonstrates how to make manual style changes, and is a more complicated and time-consuming way to customize styling of Web Chat. Manual styles may be broken upon Web Chat updates.                                                | [Demo](https://microsoft.github.io/BotFramework-WebChat/5.b.idiosyncratic-manual-styling)         |
 | [`5.c.presentation-mode-styling`](https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/5.c.presentation-mode-styling)            | Demonstrates how to set up Presentation Mode, which displays chat history but does not show the send box, and disables the interactivity of Adaptive Cards.                                                                         | [Demo](https://microsoft.github.io/BotFramework-WebChat/5.c.presentation-mode-styling)            |
-| [`6.a.cognitive-services-bing-speech-js`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/6.a.cognitive-services-bing-speech-js)    | Introduces speech-to-text and text-to-speech ability using the (deprecated) Cognitive Services Bing Speech API and JavaScript.                                                                                                      | [Demo](https://microsoft.github.io/BotFramework-WebChat/6.a.cognitive-services-bing-speech-js)    | 
+| [`6.a.cognitive-services-bing-speech-js`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/6.a.cognitive-services-bing-speech-js)    | Introduces speech-to-text and text-to-speech ability using the (deprecated) Cognitive Services Bing Speech API and JavaScript.                                                                                                      | [Demo](https://microsoft.github.io/BotFramework-WebChat/6.a.cognitive-services-bing-speech-js)    |
 | [`6.b.cognitive-services-bing-speech-react`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/6.b.cognitive-services-bing-speech-react) | Introduces speech-to-text and text-to-speech ability using the (deprecated) Cognitive Services Bing Speech API and React.                                                                                                           | [Demo](https://microsoft.github.io/BotFramework-WebChat/6.b.cognitive-services-bing-speech-react) |
 | [`6.c.cognitive-services-speech-services`](https://github.com/Microsoft/BotFramework-WebChat/issues/1424)   | Introduces speech-to-text and text-to-speech ability using Cognitive Services Speech Services API.                                                                                                                                  |                                                                                                       |
 | [`6.d.speech-web-browser`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/6.d.speech-web-browser)                   | Demonstrates how to implement text-to-speech using Web Chat's browser-based Web Speech API. (link to W3C standard in the sample)                                                                                                    | [Demo](https://microsoft.github.io/BotFramework-WebChat/6.d.speech-web-browser)                   |
@@ -223,8 +223,9 @@ npm run prepublishOnly
 | [`10.customization-card-components`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/10.customization-card-components)         | Demonstrates how to create custom activity card attachments, in this case GitHub repository cards.                                                                                                                                  | [Demo](https://microsoft.github.io/BotFramework-WebChat/10.customization-card-components)         |
 | [`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.             | [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.                                                                                                              | [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.      | [Demo](https://microsoft.github.io/BotFramework-WebChat/13.customization-speech-ui)               | 
+| [`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.      | [Demo](https://microsoft.github.io/BotFramework-WebChat/13.customization-speech-ui)               |
 | [`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.                                                                          | [Demo](https://microsoft.github.io/BotFramework-WebChat/14.customization-piping-to-redux)         |
+| [`15.backchannel-piggyback-on-outgoing-activities`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/15.backchannel-piggyback-on-outgoing-activities) | Advanced tutorial: Demonstrates how to add custom data to every outgoing activities. | [Demo](https://microsoft.github.io/BotFramework-WebChat/15.backchannel-piggyback-on-outgoing-activities) |
 
 # Contributions
 

packages/bundle/package.json

@@ -24,9 +24,12 @@
     "clean": "npm run clean:dist && npm run clean:lib",
     "clean:dist": "rimraf dist",
     "clean:lib": "rimraf lib",
-    "prepublishOnly": "npm run build:typecheck && npm run build:babel && webpack-cli --run-prod",
+    "prepublishOnly": "npm run build:typecheck && npm run build:babel && webpack-cli",
     "test": "jest",
-    "watch": "concurrently --names \"babel,typecheck,webpack\" \"npm run build:babel-instrumented -- --watch\" \"npm run build:typecheck -- --preserveWatchOutput --watch\" \"webpack-cli --config webpack-watch.config.js --run-dev --watch\""
+    "watch": "concurrently --names \"babel,typecheck,webpack\" \"npm run watch:babel\" \"npm run watch:typecheck\" \"npm run watch:webpack\"",
+    "watch:babel": "npm run build:babel-instrumented -- --watch",
+    "watch:typecheck": "npm run build:typecheck -- --preserveWatchOutput --watch",
+    "watch:webpack": "webpack-cli --config webpack-watch.config.js --watch"
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",

packages/bundle/webpack-instrumented.config.js

@@ -9,5 +9,6 @@ module.exports = {
     'webchat-instrumented': './lib/index.js',
     'webchat-instrumented-es5': './lib/index-es5.js',
     'webchat-instrumented-minimal': './lib/index-minimal.js'
-  }
+  },
+  mode: 'development'
 };

packages/bundle/webpack-watch.config.js

@@ -2,6 +2,7 @@ const webpackConfig = require('./webpack.config');
 
 module.exports = {
   ...webpackConfig,
+  mode: 'development',
   stats: {
     assets: false,
     builtAt: false,

packages/bundle/webpack.config.js

@@ -7,6 +7,7 @@ module.exports = {
     'webchat-es5': './lib/index-es5.js',
     'webchat-minimal': './lib/index-minimal.js'
   },
+  mode: 'production',
   output: {
     filename: '[name].js',
     libraryTarget: 'umd',

packages/core/src/createStore.ts

@@ -13,8 +13,8 @@ export default function (initialState, ...middlewares) {
     reducer,
     initialState || {},
     applyMiddleware(
-      sagaMiddleware,
-      ...middlewares
+      ...middlewares,
+      sagaMiddleware
     )
   );
 

samples/15.backchannel-piggyback-on-outgoing-activities/README.md

@@ -0,0 +1,14 @@
+# Sample - Piggyback data on every outgoing activities
+
+This sample shows how to add data to every outgoing activities as channel data.
+
+Channel data is a channel-specific property bag that can be used to send non-standard in-band data.
+
+# Test out the hosted sample
+
+- [Try out MockBot](https://microsoft.github.io/BotFramework-WebChat/15.backchannel-piggyback-on-outgoing-activities)
+
+# Things to try out
+
+- Type `channel-data`
+   - This command will dump the channel data property bag received on the bot side

samples/15.backchannel-piggyback-on-outgoing-activities/index.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>Web Chat: Inject data on post activity</title>
+    <!--
+      For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
+      When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
+      or lock down on a specific version with the following format: "/4.1.0/webchat.js".
+    -->
+    <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
+
+    <!-- We are using simple-update-in package to simplify demo code. -->
+    <script src="https://unpkg.com/simple-update-in/dist/simple-update-in.production.min.js"></script>
+    <style>
+      html, body { height: 100% }
+      body { margin: 0 }
+
+      #webchat,
+      #webchat > * {
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      (async function () {
+        // In this demo, we are using Direct Line token from MockBot.
+        // To talk to your bot, you should use the token exchanged using your Direct Line secret.
+        // You should never put the Direct Line secret in the browser or client app.
+        // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
+
+        const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
+        const { token } = await res.json();
+
+        // We are adding a new middleware to customize the behavior of DIRECT_LINE/POST_ACTIVITY.
+        const store = window.WebChat.createStore(
+          {},
+          ({ dispatch }) => next => action => {
+            if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
+              // The channelData submitted here is very similar to HTTP cookies and vulnerable to forgery attack.
+              // Make sure you use signature to protect it and verify the signature on the bot side.
+
+              // To minimize unexpected behaviors, we recommend to treat the "action" object as if it is immutable.
+              // We use simple-update-in package to update "action" with partial deep cloning.
+              action = window.simpleUpdateIn(action, ['payload', 'activity', 'channelData', 'email'], () => '[email protected]');
+            }
+
+            return next(action);
+          }
+        );
+
+        window.WebChat.renderWebChat({
+          directLine: window.WebChat.createDirectLine({ token }),
+          // We will use a custom version of Redux store, which we added middleware to handle backchannel messages.
+          store
+        }, document.getElementById('webchat'));
+
+        store.dispatch({
+          type: 'WEB_CHAT/SET_SEND_BOX',
+          payload: { text: 'channel-data' }
+        });
+
+        document.querySelector('#webchat > *').focus();
+      })().catch(err => console.error(err));
+    </script>
+  </body>
+</html>