From c214348abc66bc7d9f340a81d9364e6496a088b5 Mon Sep 17 00:00:00 2001 From: William Wong Date: Fri, 9 Nov 2018 12:19:51 -0800 Subject: [PATCH 1/5] Add sample and modify middleware order --- packages/bundle/package.json | 7 +- .../bundle/webpack-instrumented.config.js | 3 +- packages/bundle/webpack-watch.config.js | 1 + packages/bundle/webpack.config.js | 1 + packages/core/src/createStore.ts | 4 +- .../index.html | 65 +++++++++++++++++++ 6 files changed, 76 insertions(+), 5 deletions(-) create mode 100644 samples/backchannel-inject-data-on-post/index.html diff --git a/packages/bundle/package.json b/packages/bundle/package.json index afa833bdf1..936df62a50 100644 --- a/packages/bundle/package.json +++ b/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", diff --git a/packages/bundle/webpack-instrumented.config.js b/packages/bundle/webpack-instrumented.config.js index 6fae4e253d..d2e7d35323 100644 --- a/packages/bundle/webpack-instrumented.config.js +++ b/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' }; diff --git a/packages/bundle/webpack-watch.config.js b/packages/bundle/webpack-watch.config.js index d4ec2158ea..544fd43bf0 100644 --- a/packages/bundle/webpack-watch.config.js +++ b/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, diff --git a/packages/bundle/webpack.config.js b/packages/bundle/webpack.config.js index 75d91b6bd9..cdfbc0b97c 100644 --- a/packages/bundle/webpack.config.js +++ b/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', diff --git a/packages/core/src/createStore.ts b/packages/core/src/createStore.ts index 0b71868084..efc05df5a4 100644 --- a/packages/core/src/createStore.ts +++ b/packages/core/src/createStore.ts @@ -13,8 +13,8 @@ export default function (initialState, ...middlewares) { reducer, initialState || {}, applyMiddleware( - sagaMiddleware, - ...middlewares + ...middlewares, + sagaMiddleware ) ); diff --git a/samples/backchannel-inject-data-on-post/index.html b/samples/backchannel-inject-data-on-post/index.html new file mode 100644 index 0000000000..77abe118b9 --- /dev/null +++ b/samples/backchannel-inject-data-on-post/index.html @@ -0,0 +1,65 @@ + + + + Web Chat: Inject data on post activity + + + + + +
+ + + From b1e2f4933f65acaab6c776a818665f8dc3f14c39 Mon Sep 17 00:00:00 2001 From: William Wong Date: Fri, 9 Nov 2018 12:29:05 -0800 Subject: [PATCH 2/5] Update CHANGELOG.md --- CHANGELOG.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0842de3c5a..04e751e11c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,11 +7,11 @@ 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 +- All: 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 +- All: 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) @@ -19,7 +19,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - 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 +- All: Bump dependencies, in [#1303](https://github.com/Microsoft/BotFramework-WebChat/pull/1303) - `@babel` - `@babel/cli@7.1.2` - `@babel/core@7.1.2` @@ -46,6 +48,11 @@ 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) +### 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 From 0ac094d71c415d49d6bad000a668488c896775eb Mon Sep 17 00:00:00 2001 From: William Wong Date: Fri, 9 Nov 2018 12:31:01 -0800 Subject: [PATCH 3/5] Update CHANGELOG.md --- CHANGELOG.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 04e751e11c..ef7e7728fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,11 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] ### Added -- All: 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 -- All: 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) @@ -21,7 +21,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Changed - 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 -- All: Bump dependencies, in [#1303](https://github.com/Microsoft/BotFramework-WebChat/pull/1303) +- Build: Bump dependencies, in [#1303](https://github.com/Microsoft/BotFramework-WebChat/pull/1303) - `@babel` - `@babel/cli@7.1.2` - `@babel/core@7.1.2` @@ -48,6 +48,9 @@ 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 emit 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) From 519a391fb526548d30860297b4338bae1d7f3b45 Mon Sep 17 00:00:00 2001 From: William Wong Date: Fri, 9 Nov 2018 12:39:29 -0800 Subject: [PATCH 4/5] Update comments --- samples/backchannel-inject-data-on-post/index.html | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/samples/backchannel-inject-data-on-post/index.html b/samples/backchannel-inject-data-on-post/index.html index 77abe118b9..2a2b427789 100644 --- a/samples/backchannel-inject-data-on-post/index.html +++ b/samples/backchannel-inject-data-on-post/index.html @@ -31,16 +31,19 @@ const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' }); const { token } = await res.json(); - // We are creating our own version of Redux store, which include middleware and optional initial state. + // 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') { - // TODO: [P4] Use `simple-update-in` package instead + // TODO: [P4] Use `simple-update-in` package to simplify the code. + // action = updateIn(action, ['payload', 'activity', 'channelData', 'email'], () => 'johndoe@example.com'); action = { ...action, payload: { ...action.payload, activity: { ...action.payload.activity, channelData: { ...action.payload.activity.channelData, + // 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. email: 'johndoe@example.com' } } @@ -58,6 +61,11 @@ 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)); From 2b8f01bf3981f7695d6614520b7117c93908b0d8 Mon Sep 17 00:00:00 2001 From: William Wong Date: Wed, 5 Dec 2018 14:52:38 -0800 Subject: [PATCH 5/5] Clean up --- CHANGELOG.md | 2 +- README.md | 7 +++-- .../README.md | 14 ++++++++++ .../index.html | 28 ++++++++----------- 4 files changed, 31 insertions(+), 20 deletions(-) create mode 100644 samples/15.backchannel-piggyback-on-outgoing-activities/README.md rename samples/{backchannel-inject-data-on-post => 15.backchannel-piggyback-on-outgoing-activities}/index.html (66%) diff --git a/CHANGELOG.md b/CHANGELOG.md index ef7e7728fe..433d7e457c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -49,7 +49,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - 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 emit non-minified code for shorter dev RTT, in [#1331](https://github.com/Microsoft/BotFramework-WebChat/pull/1331) +- 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) diff --git a/README.md b/README.md index c45824af06..b65830901e 100644 --- a/README.md +++ b/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 diff --git a/samples/15.backchannel-piggyback-on-outgoing-activities/README.md b/samples/15.backchannel-piggyback-on-outgoing-activities/README.md new file mode 100644 index 0000000000..7fb2c1a5b0 --- /dev/null +++ b/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 diff --git a/samples/backchannel-inject-data-on-post/index.html b/samples/15.backchannel-piggyback-on-outgoing-activities/index.html similarity index 66% rename from samples/backchannel-inject-data-on-post/index.html rename to samples/15.backchannel-piggyback-on-outgoing-activities/index.html index 2a2b427789..38d5f3deb6 100644 --- a/samples/backchannel-inject-data-on-post/index.html +++ b/samples/15.backchannel-piggyback-on-outgoing-activities/index.html @@ -3,11 +3,14 @@ Web Chat: Inject data on post activity + + +