diff --git a/ACTIVITYTYPES.md b/ACTIVITYTYPES.md index 07e309e81d..ad3201eeed 100644 --- a/ACTIVITYTYPES.md +++ b/ACTIVITYTYPES.md @@ -21,7 +21,7 @@ Although the Direct Line channel and Web Chat channel support the following acti When developing your bot's web page, you may discover that the bot sends an activity type that needs to be supported by Web Chat. Luckily, it is possible to create renderers for different activities through the [`activityMiddleware`](https://github.com/microsoft/BotFramework-WebChat#web-chat-api-reference). To learn more, check out the following tutorials: -1. [Customize Web Chat with Reaction Buttons](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/09.customization-reaction-buttons/) -1. [Customize Web Chat with GitHub Stargazer Components](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/10.a.customization-card-components) +1. [Customize Web Chat with Reaction Buttons](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/d.reaction-buttons/) +1. [Customize Web Chat with GitHub Stargazer Components](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/e.card-components) Note: We do not recommend creating custom activity types. Instead, please use the `event` activity type. diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d0a0d7541..1aba4bab3a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,12 +33,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - [`event-target-shim`](https://npmjs.com/package/event-target-shim) - [`p-defer`](https://npmjs.com/package/p-defer) - Fixes the following issues and improves test reliability, by [@compulim](https://github.com/compulim) in PR [#XXX](https://github.com/microsoft/BotFramework-WebChat/pull/XXX) - - Fixes [#2612](https://github.com/microsoft/BotFramework-WebChat/issues/2612). Wait until language change - - Fixes [#2653](https://github.com/microsoft/BotFramework-WebChat/issues/2653). Scroll-to-bottom check will do 5 consecutive checks to determine stickiness. - - Fixes [#2691](https://github.com/microsoft/BotFramework-WebChat/issues/2691). Wait until button is shown/hid before taking screenshot - - Fixes [#2737](https://github.com/microsoft/BotFramework-WebChat/issues/2737). Use `driver.wait` for conditions - - Fixes [#2776](https://github.com/microsoft/BotFramework-WebChat/issues/2776). Wait until button is shown/hid before taking screenshot - - Use a new timeout `fetchImage` for images + - Fixes [#2612](https://github.com/microsoft/BotFramework-WebChat/issues/2612). Wait until language change + - Fixes [#2653](https://github.com/microsoft/BotFramework-WebChat/issues/2653). Scroll-to-bottom check will do 5 consecutive checks to determine stickiness. + - Fixes [#2691](https://github.com/microsoft/BotFramework-WebChat/issues/2691). Wait until button is shown/hid before taking screenshot + - Fixes [#2737](https://github.com/microsoft/BotFramework-WebChat/issues/2737). Use `driver.wait` for conditions + - Fixes [#2776](https://github.com/microsoft/BotFramework-WebChat/issues/2776). Wait until button is shown/hid before taking screenshot + - Use a new timeout `fetchImage` for images - Fixes [#2780](https://github.com/microsoft/BotFramework-WebChat/issues/2780). Added the `tel` protocol to the `allowedSchema` in the `sanitize-html` options, by [@tdurnford](https://github.com/tdurnford) in PR [#27XX](https://github.com/microsoft/BotFramework-WebChat/pull/27XX) - Fixes [#2747](https://github.com/microsoft/BotFramework-WebChat/issues/2747). Moved `Timestamp` into the `SendStatus` component and removed the `Timestamp` style set, by [@tdurnford](https://github.com/tdurnford) in PR [#2786](https://github.com/microsoft/BotFramework-WebChat/pull/2786) @@ -97,6 +97,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Samples - Bump samples to Web Chat 4.7.0, by [@compulim](https://github.com/compulim) in PR [#2726](https://github.com/Microsoft/BotFramework-WebChat/issues/2726) +- Resolves [#2641](https://github.com/microsoft/BotFramework-WebChat/issues/2641). Reorganize Web Chat samples, by [@corinagum](https://github.com/corinagum), in PR [#2762](https://github.com/microsoft/BotFramework-WebChat/pull/2762) ## [4.7.1] - 2019-12-13 @@ -250,7 +251,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) +- [Clear Conversation After Idle](https://microsoft.github.io/BotFramework-WebChat/04.api/h.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 @@ -354,10 +355,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Samples -- [Single sign-on for Microsoft Teams apps](https://microsoft.github.io/BotFramework-WebChat/19.c.single-sign-on-for-teams-apps/), by [@compulim](https://github.com/compulim) in [#2196](https://github.com/microsoft/BotFramework-WebChat/pull/2196) -- [Customize Web Chat with Reaction Buttons](https://microsoft.github.io/BotFramework-WebChat/09.customization-reaction-buttons/). Updated reaction handlers to send `messageReaction` activities, by [@tdurnford](https://github.com/tdurnford) in [#2239](https://github.com/microsoft/BotFramework-WebChat/pull/2239) -- [Select voice for speech synthesis](https://microsoft.github.io/BotFramework-WebChat/06.g.select-voice/), by [@compulim](https://github.com/compulim), in PR [#2338](https://github.com/microsoft/BotFramework-WebChat/pull/2338) -- [Using different versions of React on a hosting app via NPM packages](https://microsoft.github.io/BotFramework-WebChat/23.a.hybrid-react-npm/), by [@compulim](https://github.com/compulim), in PR [#2509](https://github.com/microsoft/BotFramework-WebChat/pull/2509) +- [Single sign-on for Microsoft Teams apps](https://microsoft.github.io/BotFramework-WebChat/07.advanced-web-chat-apps/d.sso-for-teams/), by [@compulim](https://github.com/compulim) in [#2196](https://github.com/microsoft/BotFramework-WebChat/pull/2196) +- [Customize Web Chat with Reaction Buttons](https://microsoft.github.io/BotFramework-WebChat/05.custom-components/d.reaction-buttons/). Updated reaction handlers to send `messageReaction` activities, by [@tdurnford](https://github.com/tdurnford) in [#2239](https://github.com/microsoft/BotFramework-WebChat/pull/2239) +- [Select voice for speech synthesis](https://microsoft.github.io/BotFramework-WebChat/03.speech/e.select-voice/), by [@compulim](https://github.com/compulim), in PR [#2338](https://github.com/microsoft/BotFramework-WebChat/pull/2338) +- [Using different versions of React on a hosting app via NPM packages](https://microsoft.github.io/BotFramework-WebChat/01.getting-started/g.hybrid-react-npm/), by [@compulim](https://github.com/compulim), in PR [#2509](https://github.com/microsoft/BotFramework-WebChat/pull/2509) ## [4.5.3] - 2019-10-10 @@ -449,10 +450,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Samples -- `*`: [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.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) +- `*`: [Single sign-on for enterprise apps](https://microsoft.github.io/BotFramework-WebChat/07.advanced-web-chat-apps/b.sso-for-enterprise/), 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/07.advanced-web-chat-apps/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/06.recomposing-ui/b.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/07.advanced-web-chat-apps/c.sso-for-intranet/), 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) ## [4.4.1] - 2019-05-02 @@ -489,7 +490,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Fixes [#1943](https://github.com/microsoft/BotFramework-WebChat/issues/1943). Fix extra vertical padding in IE11 and Firefox, by [@compulim](https://github.com/compulim) in PR [#1949](https://github.com/microsoft/BotFramework-WebChat/pull/1949) - Fixes [#1945](https://github.com/microsoft/BotFramework-WebChat/issues/1945). QA fixes for 4.4, by [@corinagum](https://github.com/johndoe) in PR [#1950](https://github.com/microsoft/BotFramework-WebChat/pull/1950) - Fixes [#1947](https://github.com/microsoft/BotFramework-WebChat/issues/1947). Fix scrollbar in suggested action should be hidden in Firefox, remove gaps, and use style set for customizing `react-film`, by [@compulim](https://github.com/compulim) in PR [#1953](https://github.com/microsoft/BotFramework-WebChat/pull/1953) -- Fixes [#1948](https://github.com/microsoft/BotFramework-WebChat/issues/1948). Fixed sample 17.a.chat-send-history to work with Firefox and Edge, by [@tdurnford](https://github.com/tdurnford) in PR [#1956](https://github.com/microsoft/BotFramework-WebChat/pull/1956) +- Fixes [#1948](https://github.com/microsoft/BotFramework-WebChat/issues/1948). Fixed sample 04.api/g.chat-send-history to work with Firefox and Edge, by [@tdurnford](https://github.com/tdurnford) in PR [#1956](https://github.com/microsoft/BotFramework-WebChat/pull/1956) - Fixes [#1304](https://github.com/microsoft/BotFramework-WebChat/issues/1304). Move Adaptive Cards from component to bundle, by [@compulim](https://github.com/compulim) and [@corinagum](https://github.com/corinagum) in PR [#1936](https://github.com/microsoft/BotFramework-WebChat/pull/1936) - Fixes [#1990](https://github.com/microsoft/BotFramework-WebChat/issues/1990). Bump Adaptive Cards & fix textarea font-family from monospace to Web Chat's `primaryFont`, by [@corinagum](https://github.com/corinagum) in PR [#2064](https://github.com/microsoft/BotFramework-WebChat/pull/2064) @@ -571,20 +572,20 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Samples -- `core`: [Programmatic access to post activity](https://microsoft.github.io/BotFramework-WebChat/15.c.programmatic-post-activity/), in [#1568](https://github.com/microsoft/BotFramework-WebChat/pull/1568) -- `component`: [Hide upload button](https://microsoft.github.io/BotFramework-WebChat/05.d.hide-upload-button-styling/), in [#1491](https://github.com/microsoft/BotFramework-WebChat/pull/1491) -- `component`: [Avatar image](https://microsoft.github.io/BotFramework-WebChat/04.b.display-user-bot-images-styling/), in [#1486](https://github.com/microsoft/BotFramework-WebChat/pull/1486) -- `core`: [Incoming activity to JavaScript event](https://microsoft.github.io/BotFramework-WebChat/15.b.incoming-activity-event/), in [#1567](https://github.com/microsoft/BotFramework-WebChat/pull/1567) +- `core`: [Programmatic access to post activity](https://microsoft.github.io/BotFramework-WebChat/04.api/d.post-activity-event/), in [#1568](https://github.com/microsoft/BotFramework-WebChat/pull/1568) +- `component`: [Hide upload button](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/f.hide-upload-button/), in [#1491](https://github.com/microsoft/BotFramework-WebChat/pull/1491) +- `component`: [Avatar image](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/d.display-sender-images/), in [#1486](https://github.com/microsoft/BotFramework-WebChat/pull/1486) +- `core`: [Incoming activity to JavaScript event](https://microsoft.github.io/BotFramework-WebChat/04.api/c.incoming-activity-event/), in [#1567](https://github.com/microsoft/BotFramework-WebChat/pull/1567) - `core`: [Send welcome event](https://microsoft.github.io/BotFramework-WebChat/15.b.backchannel-send-welcome-event/), in PR [#1286](https://github.com/microsoft/BotFramework-WebChat/pull/1286) -- `core`: [Send typing indicator](https://microsoft.github.io/BotFramework-WebChat/07.b.customization-send-typing-indicator), in [#1541](https://github.com/microsoft/BotFramework-WebChat/pull/1541) -- `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) +- `core`: [Send typing indicator](https://microsoft.github.io/BotFramework-WebChat/05.custom-components/b.send-typing-indicator), in [#1541](https://github.com/microsoft/BotFramework-WebChat/pull/1541) +- `component`: [Password input activity](https://microsoft.github.io/BotFramework-WebChat/05.custom-components/f.password-input/), in [#1569](https://github.com/microsoft/BotFramework-WebChat/pull/1569) +- `*`: Updated [minimizable Web Chat](https://microsoft.github.io/BotFramework-WebChat/06.recomposing-ui/a.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.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) +- `component`: Use Speech Services token for [speech UI sample](https://microsoft.github.io/BotFramework-WebChat/06.recomposing-ui/b.speech-ui/), in [#1634](https://github.com/microsoft/BotFramework-WebChat/pull/1634) +- `component`: [Selectable Activity](https://microsoft.github.io/BotFramework-WebChat/04.api/f.selectable-activity/), in [#1624](https://github.com/microsoft/BotFramework-WebChat/pull/1624) +- `component`: [Chat Send History](https://microsoft.github.io/BotFramework-WebChat/04.api/g.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) -- `component`: [Customizing open URL behavior](https://microsoft.github.io/BotFramework-WebChat/18.customization-open-url), in PR [#1704](https://github.com/microsoft/BotFramework-WebChat/pull/1704) +- `component`: [Customizing open URL behavior](https://microsoft.github.io/BotFramework-WebChat/04.api/i.open-url), in PR [#1704](https://github.com/microsoft/BotFramework-WebChat/pull/1704) ## [4.2.0] - 2018-12-11 @@ -643,7 +644,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Samples - Backchannel: [Inject custom data into every `POST_ACTIVITY`](https://microsoft.github.io/BotFramework-WebChat/15.backchannel-piggyback-on-outgoing-activities/), in [#1331](https://github.com/microsoft/BotFramework-WebChat/pull/1331) -- UI: [Minimizable Web Chat](https://microsoft.github.io/BotFramework-WebChat/12.customization-minimizable-web-chat/), in [#1290](https://github.com/microsoft/BotFramework-WebChat/pull/1290) +- UI: [Minimizable Web Chat](https://microsoft.github.io/BotFramework-WebChat/06.recomposing-ui/a.minimizable-web-chat/), in [#1290](https://github.com/microsoft/BotFramework-WebChat/pull/1290) - Others: [Using Web Chat v3](https://microsoft.github.io/BotFramework-WebChat/webchat-v3/), in [#1287](https://github.com/microsoft/BotFramework-WebChat/pull/1287) - Speech: [Cognitive Services Speech to Text and Text to Speech](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.c.cognitive-services-speech-services-js) (both subscription key and authorization token flow) - Speech: [Cognitive Services Speech to Text using lexical result](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.e.cognitive-services-speech-services-with-lexical-result) (text normalization) diff --git a/DIRECT_LINE_SPEECH.md b/DIRECT_LINE_SPEECH.md index 1e1a4f4d9c..b6973777b7 100644 --- a/DIRECT_LINE_SPEECH.md +++ b/DIRECT_LINE_SPEECH.md @@ -12,7 +12,7 @@ We assume you have already set up a bot and have Web Chat running on a page. Direct Line Speech is designed for Voice Assistant scenario. For example, smart display, automotive dashboard, navigation system with low-latency requirement on _single-page application_ and _progressive web apps_ (PWA). These apps usually are made with highly-customized UI and do not show conversation transcripts. -You can look at our sample [13.a.customization-speech-ui](https://microsoft.github.io/BotFramework-WebChat/samples/13.a.customization-speech-ui) and [13.b.smart-display](https://microsoft.github.io/BotFramework-WebChat/samples/13.b.customization-smart-display) for target scenarios. +You can look at our sample [06.recomposing-ui/b.speech-ui](https://microsoft.github.io/BotFramework-WebChat/samples/06.recomposing-ui/b.speech-ui) and [06.recomposing-ui/c.smart-display](https://microsoft.github.io/BotFramework-WebChat/samples/06.recomposing-ui/c.smart-display) for target scenarios. Direct Line Speech is not recommended to use on traditional websites where its primary UI is transcript-based. @@ -241,7 +241,7 @@ Direct Line Speech shares the same requirements as Cognitive Services Speech Ser Before start, please create corresponding Azure resources. You can follow [this tutorial for enabling voice in your bot](https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/tutorial-voice-enable-your-bot-speech-sdk). You do not need to follow the steps for creating C# client, you will replace the client with Web Chat. -Please look at our sample `06.i.direct-line-speech` to embedding Web Chat on your web app via Direct Line Speech channel. +Please look at our sample `03.speech/a.direct-line-speech` to embedding Web Chat on your web app via Direct Line Speech channel. > You will need to use Web Chat 4.7 or higher for Direct Line Speech. @@ -340,7 +340,7 @@ Direct Line Speech is not targeting a transcript-based experience. Thus, our ser > Please vote on [this bug](https://github.com/microsoft/BotFramework-WebChat/issues/2680) if this behavior is not desirable. -When using text-based experience, we allow developers to piggyback additional information to outgoing messages. This is demonstrated in [sample 15.a "piggyback data on every outgoing activity"](15.a.backchannel-piggyback-on-outgoing-activities). +When using text-based experience, we allow developers to piggyback additional information to outgoing messages. This is demonstrated in [sample 15.a "piggyback data on every outgoing activity"](04.api/b.piggyback-on-outgoing-activities). With Direct Line Speech, you can no longer piggyback additional data to all speech-based outgoing activities. diff --git a/HOOKS.md b/HOOKS.md index 754606f322..18a48c0e88 100644 --- a/HOOKS.md +++ b/HOOKS.md @@ -2,7 +2,7 @@ Web Chat is designed to be highly customizable. In order to build your own UI, you can use React Hooks to hook your UI component into Web Chat API. -To enable Web Chat API, all UI components must be located under the [``](https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/Composer.js) component. You can refer to our [plain UI customization](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/21.customization-plain-ui) sample for details. +To enable Web Chat API, all UI components must be located under the [``](https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/Composer.js) component. You can refer to our [plain UI customization](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.recomposing-ui/d.plain-ui) sample for details. ## Why React Hooks diff --git a/README.md b/README.md index 4379ca9c8f..5035b9f059 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ Starting from Web Chat 4.6.0, we requires React 16.8.6 or up. Although we recommend that you upgrade your host app at your earliest convenience, we understand that host app may need some time before its React dependencies are updated, especially in regards to huge applications. -If your app is not ready for React 16.8.6 yet, you can follow [this sample](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/23.a.hybrid-react-npm) to dual-host React in your app. +If your app is not ready for React 16.8.6 yet, you can follow [this sample](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.getting-started/g.hybrid-react-npm) to dual-host React in your app. ## Migrating from Web Chat v3 to v4 @@ -30,13 +30,13 @@ Starting from May 2019, we are rolling out v4 to websites that integrate Web Cha ### My website is integrated with Web Chat v3 and uses customization options provided by Web Chat, no customization at all, or very little of my own customization that was not available with Web Chat. -Please follow the implementation of sample [`01.c.getting-started-migration`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.c.getting-started-migration) to convert your webpage from v3 to v4 of Web Chat. +Please follow the implementation of sample [`00.migration/a.v3-to-v4`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/00.migration/a.v3-to-v4) to convert your webpage from v3 to v4 of Web Chat. ### My website is integrated with a fork of Web Chat v3. I have implemented a lot of customization in my version of Web Chat, and I am concerned v4 is not compatible with my needs. One of our team's favorite things about v4 of Web Chat is the ability to add customization **without the need to fork Web Chat**. Although this creates additional overhead for v3 users who forked Web Chat previously, we will do our best to support customers making the bump. Please use the following suggestions: -- Take a look at the implementation of sample [`01.c.getting-started-migration`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.c.getting-started-migration). This is a great starting place to get Web Chat up and running. +- Take a look at the implementation of sample [`00.migration/a.v3-to-v4`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/00.migration/a.v3-to-v4). This is a great starting place to get Web Chat up and running. - Next, please go through the [samples list](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples) to compare your customization requirements to what Web Chat has already provided support for. These samples are made up of commonly asked-for features for Web Chat. - If one or more of your features is not available in the samples, please look through our [open and closed issues](https://github.com/microsoft/BotFramework-WebChat/issues?utf8=%E2%9C%93&q=is%3Aissue+), [Samples label](https://github.com/microsoft/BotFramework-WebChat/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3ASample), and the [Migration Support label](https://github.com/microsoft/BotFramework-WebChat/issues?q=is%3Aissue+migrate+label%3A%22Migration+Support%22) to search for sample requests and/or customization support for a feature you are looking for. Adding your comment to open issues will help the team prioritize requests that are in high demand, and we encourage participation in our community. - If you did not find your feature in the list of open requests, please feel free to [file your own request](https://github.com/microsoft/BotFramework-WebChat/issues/new). Just like the item above, other customers adding comments to your open issue will help us prioritize which features are most commonly needed across Web Chat users. @@ -107,7 +107,7 @@ You can use the full, typical webchat package that contains the most typically u ``` -See the working sample of the [full Web Chat bundle](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.a.getting-started-full-bundle). +See the working sample of the [full Web Chat bundle](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.getting-started/a.full-bundle). ## Integrate with React @@ -138,7 +138,7 @@ export default class extends React.Component { > You can also run `npm install botframework-webchat@master` to install a development build that is synced with Web Chat's GitHub `master` branch. -See a working sample of [Web Chat rendered via React](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.a.host-with-react/). +See a working sample of [Web Chat rendered via React](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.getting-started/e.host-with-react/). ## Integrate with Cognitive Services Speech Services @@ -172,55 +172,62 @@ There is a breaking change on behavior expectations regarding speech and input h # Samples list -|                Sample Name                     | Description | Link | -| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [`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) | -| [`03.b.host-with-Angular`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.b.host-with-angular) | Demonstrates how to create an Angular component that hosts the full-featured Web Chat. | [Host with Angular Demo](https://stackblitz.com/github/omarsourour/ng-webchat-example) | -| [`04.a.display-user-bot-initials-styling`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/04.a.display-user-bot-initials-styling) | Demonstrates how to display initials for both Web Chat participants. | [Bot initials Demo](https://github.com/microsoft/BotFramework-WebChat/blob/master/samples/04.a.display-user-bot-initials-styling/) | -| [`04.b.display-user-bot-images-styling`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/04.b.display-user-bot-images-styling) | Demonstrates how to display images and initials for both Web Chat participants. | [User images Demo](https://microsoft.github.io/BotFramework-WebChat/04.b.display-user-bot-images-styling) | -| [`05.a.branding-webchat-styling`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.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. | [Branding Web Chat Demo](https://microsoft.github.io/BotFramework-WebChat/05.a.branding-webchat-styling) | -| [`05.b.idiosyncratic-manual-styling`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.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. | [Idiosyncratic Styling Demo](https://microsoft.github.io/BotFramework-WebChat/05.b.idiosyncratic-manual-styling) | -| [`05.c.presentation-mode-styling`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.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. | [Presentation Mode Demo](https://microsoft.github.io/BotFramework-WebChat/05.c.presentation-mode-styling) | -| [`05.d.hide-upload-button-styling`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.d.hide-upload-button-styling) | Demonstrates how to hide file upload button via styling. | [Hide Upload Button Demo](https://microsoft.github.io/BotFramework-WebChat/05.d.hide-upload-button-styling) | -| [`06.a.cognitive-services-bing-speech-js`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.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. | [Bing Speech with JS Demo](https://microsoft.github.io/BotFramework-WebChat/06.a.cognitive-services-bing-speech-js) | -| [`06.b.cognitive-services-bing-speech-react`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.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. | [Bing Speech with React Demo](https://microsoft.github.io/BotFramework-WebChat/06.b.cognitive-services-bing-speech-react) | -| [`06.c.cognitive-services-speech-services-js`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.c.cognitive-services-speech-services-js) | Introduces speech-to-text and text-to-speech ability using Cognitive Services Speech Services API. | [Speech Services with JS Demo](https://microsoft.github.io/BotFramework-WebChat/06.c.cognitive-services-speech-services-js) | -| [`06.d.speech-web-browser`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.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) | [Web Speech API Demo](https://microsoft.github.io/BotFramework-WebChat/06.d.speech-web-browser) | -| [`06.e.cognitive-services-speech-services-with-lexical-result`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.e.cognitive-services-speech-services-with-lexical-result) | Demonstrates how to use lexical result from Cognitive Services Speech Services API. | [Lexical Result Demo](https://microsoft.github.io/BotFramework-WebChat/06.e.cognitive-services-speech-services-with-lexical-result) | -| [`06.f.hybrid-speech`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.f.hybrid-speech) | Demonstrates how to use both browser-based Web Speech API for speech-to-text, and Cognitive Services Speech Services API for text-to-speech. | [Hybrid Speech Demo](https://microsoft.github.io/BotFramework-WebChat/06.f.hybrid-speech) | -| [`06.g.select-voice`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.g.select-voice) | Demonstrates how to select speech synthesis voice based on activity. | [Select Voice Demo](https://microsoft.github.io/BotFramework-WebChat/06.g.select-voice) | -| [`06.i.direct-line-speech`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.i.direct-line-speech) | Demonstrates how to use Direct Line Speech channel in Web Chat. | [Direct Line Speech Demo](https://microsoft.github.io/BotFramework-WebChat/06.i.direct-line-speech) | -| [`07.a.customization-timestamp-grouping`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/07.a.customization-timestamp-grouping) | Demonstrates how to customize timestamps by showing or hiding timestamps and changing the grouping of messages by time. | [Timestamp Grouping Demo](https://microsoft.github.io/BotFramework-WebChat/07.a.customization-timestamp-grouping) | -| [`07.b.customization-send-typing-indicator`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/07.b.customization-send-typing-indicator) | Demonstrates how to send typing activity when the user start typing on the send box. | [User Typing Indicator Demo](https://microsoft.github.io/BotFramework-WebChat/07.b.customization-send-typing-indicator) | -| [`08.customization-user-highlighting`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/08.customization-user-highlighting) | Demonstrates how to customize the styling of activities based whether the message is from the user or the bot. | [User Highlighting Demo](https://microsoft.github.io/BotFramework-WebChat/08.customization-user-highlighting) | -| [`09.customization-reaction-buttons`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/09.customization-reaction-buttons/) | Introduces the ability to create custom components for Web Chat that are unique to your bot's needs. This tutorial demonstrates the ability to add reaction emoji such as :thumbsup: and :thumbsdown: to conversational activities. | [Reaction Buttons Demo](https://microsoft.github.io/BotFramework-WebChat/09.customization-reaction-buttons) | -| [`10.a.customization-card-components`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/10.a.customization-card-components) | Demonstrates how to create custom activity card attachments, in this case GitHub repository cards. | [Card Components Demo](https://microsoft.github.io/BotFramework-WebChat/10.a.customization-card-components) | -| [`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.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) | -| [`15.c.programmatic-post-activity`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/15.c.programmatic-post-activity) | Advanced tutorial: Demonstrates how to send a message programmatically. | [Programmatic Posting Demo](https://microsoft.github.io/BotFramework-WebChat/15.c.programmatic-post-activity) | -| [`15.d.backchannel-send-welcome-event`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/15.d.backchannel-send-welcome-event) | Advanced tutorial: Demonstrates how to send welcome event with client capabilities such as browser language. | [Welcome Event Demo](https://microsoft.github.io/BotFramework-WebChat/15.d.backchannel-send-welcome-event) | -| [`16.customization-selectable-activity`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/16.customization-selectable-activity) | Advanced tutorial: Demonstrates how to add custom click behavior to each activity. | [Selectable Activity Demo](https://microsoft.github.io/BotFramework-WebChat/16.customization-selectable-activity) | -| [`17.a.chat-send-history`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/17.a.chat-send-history) | Advanced tutorial: Demonstrates the ability to save user input and allow the user to step back through previous sent messages. | [Chat Send History Demo](https://microsoft.github.io/BotFramework-WebChat/17.a.chat-send-history) | -| [`18.customization-open-url`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/18.customization-open-url) | Advanced tutorial: Demonstrates how to customize the open URL behavior. | [Customize Open URL Demo](https://microsoft.github.io/BotFramework-WebChat/18.customization-open-url) | -| [`19.a.single-sign-on-for-enterprise-apps`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/19.a.single-sign-on-for-enterprise-apps) | Demonstrates how to use single sign-on for enterprise single-page applications using OAuth | [Single Sign-On for Enterprise Single-Page Applications Demo](https://microsoft.github.io/BotFramework-WebChat/19.a.single-sign-on-for-enterprise-apps) | -| [`19.b.single-sign-on-for-intranet-apps`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/19.b.single-sign-on-for-intranet-apps) | Demonstrates how to use single sign-on for Intranet apps using Azure Active Directory | [Single Sign-On for Intranet Apps Demo](https://microsoft.github.io/BotFramework-WebChat/19.b.single-sign-on-for-intranet-apps) | -| [`19.c.single-sign-on-for-teams-apps`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/19.c.single-sign-on-for-teams-apps) | Demonstrates how to use single sign-on for Microsoft Teams apps using Azure Active Directory | [Single Sign-On for Microsoft Teams Apps Demo](https://microsoft.github.io/BotFramework-WebChat/19.c.single-sign-on-for-teams-apps) | -| [`20.a.upload-to-azure-storage`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/20.a.upload-to-azure-storage) | Demonstrates how to use upload attachments directly to Azure Storage | [Upload to Azure Storage Demo](https://microsoft.github.io/BotFramework-WebChat/20.a.upload-to-azure-storage) | -| [`21.customization-plain-ui`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/21.customization-plain-ui) | Advanced tutorial: Demonstrates how to customize the Web Chat UI by building from ground up instead of needing to rewrite entire Web Chat components. | [Plain UI Demo](https://microsoft.github.io/BotFramework-WebChat/21.customization-plain-ui) | -| [`22.customization-change-locale`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/22.customization-change-locale) | Demonstrates how to change locale when an activity is received from the bot | [Change Locale Demo](https://microsoft.github.io/BotFramework-WebChat/22.customization-change-locale) | -| [`23.a.hybrid-react-npm`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/23.a.hybrid-react-npm) | Demonstrates how to use different versions of React on a hosting app via NPM packages | [Hybrid React Demo](https://microsoft.github.io/BotFramework-WebChat/23.a.hybrid-react-npm) | +|                Sample Name                     | Description | Link | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Migration** | | | +| [`00.migration/a.v3-to-v4`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/00.migration/a.v3-to-v4) | Demonstrates how to migrate from your Web Chat v3 bot to v4. | [Migration Demo](https://microsoft.github.io/BotFramework-WebChat/00.migration/a.v3-to-v4) | +| **Getting started** | | | +| [`01.getting-started/a.full-bundle`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.getting-started/a.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.getting-started/a.full-bundle) | +| [`01.getting-started/b.minimal-bundle`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.getting-started/b.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/01.getting-started/b.minimal-bundle) | +| [`01.getting-started/c.es5-bundle`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.getting-started/c.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.getting-started/c.es5-bundle) | +| [`01.getting-started/d.es5-direct-line-speech`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.getting-started/d.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.getting-started/d.es5-direct-line-speech) | +| [`01.getting-started/e.host-with-react`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.getting-started/e.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/01.getting-started/e.host-with-react) | +| [`01.getting-started/f.host-with-angular`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.getting-started/f.host-with-angular) | Demonstrates how to create an Angular component that hosts the full-featured Web Chat. | [Host with Angular Demo](https://stackblitz.com/github/omarsourour/ng-webchat-example) | +| [`01.getting-started/g.hybrid-react-npm`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.getting-started/g.hybrid-react-npm) | Demonstrates how to use different versions of React on a hosting app via NPM packages | [Hybrid React Demo](https://microsoft.github.io/BotFramework-WebChat/01.getting-started/g.hybrid-react-npm) | +| [`01.getting-started/h.minimal-markdown`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.getting-started/h.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/01.getting-started/h.minimal-markdown) | +| **Branding, styling, and customization** | | | +| [`02.branding-styling-and-customization/a.branding-web-chat`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/02.branding-styling-and-customization/a.branding-web-chat) | Introduces the ability to style Web Chat to match your brand. This method of custom styling will not break upon Web Chat updates. | [Branding Web Chat Demo](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/a.branding-web-chat) | +| [`02.branding-styling-and-customization/b.idiosyncrating-manual-styles`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/02.branding-styling-and-customization/b.idiosyncratic-manual-styles) | 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. | [Idiosyncratic Styling Demo](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/b.idiosyncrating-manual-styles) | +| [`02.branding-styling-and-customization/c.display-sender-initials`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/02.branding-styling-and-customization/c.display-sender-initials) | Demonstrates how to display initials for both Web Chat participants. | [Bot initials Demo](https://github.com/microsoft/BotFramework-WebChat/blob/master/samples/02.branding-styling-and-customization/c.display-sender-initials/) | +| [`02.branding-styling-and-customization/d.display-sender-images`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/02.branding-styling-and-customization/d.display-sender-images) | Demonstrates how to display images and initials for both Web Chat participants. | [User images Demo](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/d.display-sender-images) | +| [`02.branding-styling-and-customization/e.presentation-mode`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/02.branding-styling-and-customization/e.presentation-mode) | 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. | [Presentation Mode Demo](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/e.presentation-mode) | +| [`02.branding-styling-and-customization/f.hide-upload-button`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/02.branding-styling-and-customization/f.hide-upload-button) | Demonstrates how to hide file upload button via styling. | [Hide Upload Button Demo](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/f.hide-upload-button) | +| [`02.branding-styling-and-customization/g.change-locale`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/02.branding-styling-and-customization/g.change-locale) | Demonstrates how to change locale when an activity is received from the bot | [Change Locale Demo](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/g.change-locale) | +| **Speech** | | | +| [`03.speech/a.direct-line-speech`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.speech/a.direct-line-speech) | Demonstrates how to use Direct Line Speech channel in Web Chat. | [Direct Line Speech Demo](https://microsoft.github.io/BotFramework-WebChat/03.speech/a.direct-line-speech) | +| [`03.speech/b.cognitive-speech-services-js`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.speech/b.cognitive-speech-services-js) | Introduces speech-to-text and text-to-speech ability using Cognitive Services Speech Services API. | [Speech Services with JS Demo](https://microsoft.github.io/BotFramework-WebChat/03.speech/b.cognitive-speech-services-js) | +| [`03.speech/c.cognitive-speech-services-with-lexical-result`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.speech/c.cognitive-speech-services-with-lexical-result) | Demonstrates how to use lexical result from Cognitive Services Speech Services API. | [Lexical Result Demo](https://microsoft.github.io/BotFramework-WebChat/03.speech/c.cognitive-speech-services-with-lexical-result) | +| [`03.speech/d.cognitive-services-speech-recognition-only`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.speech/d.cognitive-services-speech-recognition-only) | Implement Cognitive Speech Services with only Speech Recognition | [Cognitive Speech: Speech Recognition](https://microsoft.github.io/BotFramework-WebChat/03.speech/d.cognitive-services-speech-recognition-only) | +| [`03.speech/e.select-voice`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.speech/e.select-voice) | Demonstrates how to select speech synthesis voice based on activity. | [Select Voice Demo](https://microsoft.github.io/BotFramework-WebChat/03.speech/e.select-voice) | +| [`03.speech/f.web-browser-speech`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.speech/f.web-browser-speech) | Demonstrates how to implement text-to-speech using Web Chat's browser-based Web Speech API. (link to W3C standard in the sample) | [Web Speech API Demo](https://microsoft.github.io/BotFramework-WebChat/03.speech/f.web-browser-speech) | +| [`03.speech/g.hybrid-speech`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.speech/g.hybrid-speech) | Demonstrates how to use both browser-based Web Speech API for speech-to-text, and Cognitive Services Speech Services API for text-to-speech. | [Hybrid Speech Demo](https://microsoft.github.io/BotFramework-WebChat/03.speech/g.hybrid-speech) | +| **API** | | | +| [`04.api/a.welcome-event`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/04.api/a.welcome-event) | Advanced tutorial: Demonstrates how to send welcome event with client capabilities such as browser language. | [Welcome Event Demo](https://microsoft.github.io/BotFramework-WebChat/04.api/a.welcome-event) | +| [`04.api/b.piggyback-on-outgoing-activities`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/04.api/b.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/04.api/b.piggyback-on-outgoing-activities) | +| [`04.api/c.incoming-activity-event`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/04.api/c.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/04.api/c.incoming-activity-event) | +| [`04.api/d.post-activity-event`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/04.api/d.post-activity-event) | Advanced tutorial: Demonstrates how to send a message programmatically. | [Programmatic Posting Demo](https://microsoft.github.io/BotFramework-WebChat/04.api/d.post-activity-event) | +| [`04.api/e.piping-to-redux`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/04.api/e.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/04.api/e.piping-to-redux) | +| [`04.api/f.selectable-activity`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/04.api/f.selectable-activity) | Advanced tutorial: Demonstrates how to add custom click behavior to each activity. | [Selectable Activity Demo](https://microsoft.github.io/BotFramework-WebChat/04.api/f.selectable-activity) | +| [`04.api/g.chat-send-history`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/04.api/g.chat-send-history) | Advanced tutorial: Demonstrates the ability to save user input and allow the user to step back through previous sent messages. | [Chat Send History Demo](https://microsoft.github.io/BotFramework-WebChat/04.api/g.chat-send-history) | +| [`04.api/h.clear-after-idle`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/04.api/h.clear-after-idle) | Advanced tutorial: Demonstrates how to customize the open URL behavior. | [Customize Open URL Demo](https://microsoft.github.io/BotFramework-WebChat/04.api/h.clear-after-idle) | +| [`04.api/i.open-url`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/04.api/i.open-url) | Advanced tutorial: Demonstrates how to customize the open URL behavior. | [Customize Open URL Demo](https://microsoft.github.io/BotFramework-WebChat/04.api/i.open-url) | +| [`04.api/j.redux-actions`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/04.api/j.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/04.api/j.redux-actions) | +| **Custom components** | | | | [`05.custom-components/a.timestamp-grouping`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/a.timestamp-grouping) | Demonstrates how to customize timestamps by showing or hiding timestamps and changing the grouping of messages by time. | [Timestamp Grouping Demo](https://microsoft.github.io/BotFramework-WebChat/05.custom-components/a.timestamp-grouping) | +| [`05.custom-components/b.send-typing-indicator`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/b.send-typing-indicator) | Demonstrates how to send typing activity when the user start typing on the send box. | [User Typing Indicator Demo](https://microsoft.github.io/BotFramework-WebChat/05.custom-components/b.send-typing-indicator) | +| [`05.custom-components/c.user-highlighting`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/c.user-highlighting) | Demonstrates how to customize the styling of activities based whether the message is from the user or the bot. | [User Highlighting Demo](https://microsoft.github.io/BotFramework-WebChat/05.custom-components/c.user-highlighting) | +| [`05.custom-components/d.reaction-buttons`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/d.reaction-buttons/) | Introduces the ability to create custom components for Web Chat that are unique to your bot's needs. This tutorial demonstrates the ability to add reaction emoji such as :thumbsup: and :thumbsdown: to conversational activities. | [Reaction Buttons Demo](https://microsoft.github.io/BotFramework-WebChat/05.custom-components/d.reaction-buttons) | +| [`05.custom-components/e.card-components`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/e.card-components) | Demonstrates how to create custom activity card attachments, in this case GitHub repository cards. | [Card Components Demo](https://microsoft.github.io/BotFramework-WebChat/05.custom-components/e.card-components) | +| [`05.custom-components/f.password-input`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/f.password-input) | Demonstrates how to create custom activity for password input. | [Password Input Demo](https://microsoft.github.io/BotFramework-WebChat/05.custom-components/f.password-input) | +| **Recomposing UI** | | | +| [`06.recomposing-ui/a.minimizable-web-chat`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.recomposing-ui/a.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/06.recomposing-ui/a.minimizable-web-chat) | +| [`06.recomposing-ui/b.speech-ui`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.recomposing-ui/b.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/06.recomposing-ui/b.speech-ui) | +| [`06.recomposing-ui/c.smart-display`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.recomposing-ui/c.smart-display) | Demonstrates how to compose Web Chat UI into a Smart Display | [Smart Display Demo](https://microsoft.github.io/BotFramework-WebChat/06.recomposing-ui/c.smart-display) | +| [`06.recomposing-ui/d.plain-ui`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.recomposing-ui/d.plain-ui) | Advanced tutorial: Demonstrates how to customize the Web Chat UI by building from ground up instead of needing to rewrite entire Web Chat components. | [Plain UI Demo](https://microsoft.github.io/BotFramework-WebChat/06.recomposing-ui/d.plain-ui) | +| [`07.advanced-web-chat-apps/a.upload-to-azure-storage`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/07.advanced-web-chat-apps/a.upload-to-azure-storage) | Demonstrates how to use upload attachments directly to Azure Storage | [Upload to Azure Storage Demo](https://microsoft.github.io/BotFramework-WebChat/ | +| **Advanced Web Chat apps** | | | 07.advanced-web-chat-apps/a.upload-to-azure-storage) | +| [`07.advanced-web-chat-apps/b.sso-for-enterprise`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/07.advanced-web-chat-apps/b.sso-for-enterprise) | Demonstrates how to use single sign-on for enterprise single-page applications using OAuth | [Single Sign-On for Enterprise Single-Page Applications Demo](https://microsoft.github.io/BotFramework-WebChat/07.advanced-web-chat-apps/b.sso-for-enterprise) | +| [`07.advanced-web-chat-apps/c.sso-for-intranet`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/07.advanced-web-chat-apps/c.sso-for-intranet) | Demonstrates how to use single sign-on for Intranet apps using Azure Active Directory | [Single Sign-On for Intranet Apps Demo](https://microsoft.github.io/BotFramework-WebChat/07.advanced-web-chat-apps/c.sso-for-intranet) | +| [`07.advanced-web-chat-apps/d.sso-for-teams`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/07.advanced-web-chat-apps/d.sso-for-teams) | Demonstrates how to use single sign-on for Microsoft Teams apps using Azure Active Directory | [Single Sign-On for Microsoft Teams Apps Demo](https://microsoft.github.io/BotFramework-WebChat/07.advanced-web-chat-apps/d.sso-for-teams) | # Web Chat API Reference @@ -253,7 +260,7 @@ There are several properties that you might pass into your Web Chat React Compon # Browser compatibility Web Chat supports the latest 2 versions of modern browsers like Chrome, Edge, and FireFox. -If you need Web Chat in Internet Explorer 11, please see the [ES5 bundle demo](https://microsoft.github.io/BotFramework-WebChat/01.b.getting-started-es5-bundle). +If you need Web Chat in Internet Explorer 11, please see the [ES5 bundle demo](https://microsoft.github.io/BotFramework-WebChat/01.getting-started/c.es5-bundle). Please note, however: diff --git a/SAMPLES.md b/SAMPLES.md index dc703022c7..a48c7048a4 100644 --- a/SAMPLES.md +++ b/SAMPLES.md @@ -253,7 +253,7 @@ ReactDOM.render( ); ``` -The full sample can be found at [/samples/10.a.customization-card-components/](samples/10.a.customization-card-components/). +The full sample can be found at [/samples/05.custom-components/e.card-components/](samples/05.custom-components/e.card-components/). In this sample, we are adding a new React component called `GitHubRepositoryAttachment`: diff --git a/SPEECH.md b/SPEECH.md index ff3def4383..1d9f7d3a9c 100644 --- a/SPEECH.md +++ b/SPEECH.md @@ -604,8 +604,8 @@ Using this approach, you can also combine two polyfills of different types. For [authenticate requests to azure cognitive services]: https://docs.microsoft.com/en-us/azure/cognitive-services/authentication [get started with custom voice]: https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/how-to-custom-voice -[sample: integrating with cognitive services speech services]: https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.c.cognitive-services-speech-services-js -[sample: using hybrid speech engine]: https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.f.hybrid-speech +[sample: integrating with cognitive services speech services]: https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.speech/b.cognitive-speech-services-js +[sample: using hybrid speech engine]: https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.speech/g.hybrid-speech [speech synthesis markup language]: https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/speech-synthesis-markup [try cognitive services]: https://azure.microsoft.com/en-us/try/cognitive-services/my-apis/#speech [web audio api support]: https://caniuse.com/#feat=audio-api diff --git a/WELCOME_MESSAGE.md b/WELCOME_MESSAGE.md index bcd2741945..c575b5c39f 100644 --- a/WELCOME_MESSAGE.md +++ b/WELCOME_MESSAGE.md @@ -1,131 +1,155 @@ Here is how Welcome Messages in Web Chat should be handled with the updates to the Direct Line Connector Service. # Web Chat Welcome Messages -Channels generally send two conversation update events when the conversation is initialized - the first for the bot and another for the user. The second conversation update - the event for the user - is intended to trigger the welcome message. At the moment, Web Chat has two different welcome message scenarios that are slightly different from other channels and based on how the developer generates the Direct Line token. + +Channels generally send two conversation update events when the conversation is initialized - the first for the bot and another for the user. The second conversation update - the event for the user - is intended to trigger the welcome message. At the moment, Web Chat has two different welcome message scenarios that are slightly different from other channels and based on how the developer generates the Direct Line token. ## Tokens with User IDs + The first scenario is dependent on the token request including a user ID. If the developer includes a user ID when generating the token, Direct Line will only send one conversation update event to the bot that includes two user IDs in the activity's `membersAdded` property - one for the bot and one for the user. Following this configuration should trigger the traditional welcome message in the `onMembersAdded` handler before the user messages the bot. In the example below, the user ID is added to the token request and the welcome message is sent from the `onMembersAdded` handler. ### Web Chat + ```javascript -(async function () { - // Note, for the simplicity of this example, we are generating the Direct Line token on client side; - // however, this is not a recommended practice and you should create and manage your tokens from the server. - // 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 secret = ' | '; - const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', { - body: JSON.stringify({ user: { id: 'dl_user_id', name: 'username' }}), - headers: { - Authorization: `Bearer ${secret}`, - 'Content-type': 'application/json' - }, - method: 'POST', - }); - const { token } = await res.json(); - - window.WebChat.renderWebChat({ - directLine: window.WebChat.createDirectLine({ token }) - }, document.getElementById('webchat')); - - document.querySelector('#webchat > *').focus(); +(async function() { + // Note, for the simplicity of this example, we are generating the Direct Line token on client side; + // however, this is not a recommended practice and you should create and manage your tokens from the server. + // 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 secret = ' | '; + const res = await fetch( + 'https://directline.botframework.com/v3/directline/tokens/generate', + { + body: JSON.stringify({ user: { id: 'dl_user_id', name: 'username' } }), + headers: { + Authorization: `Bearer ${secret}`, + 'Content-type': 'application/json' + }, + method: 'POST' + } + ); + const { token } = await res.json(); + + window.WebChat.renderWebChat( + { + directLine: window.WebChat.createDirectLine({ token }) + }, + document.getElementById('webchat') + ); + + document.querySelector('#webchat > *').focus(); })().catch(err => console.error(err)); ``` ### Bot Framework SDK v4 (Node.js) + ```javascript this.onMembersAdded(async (context, next) => { - const { membersAdded } = context.activity; - - for (let member of membersAdded) { - if (member.id !== context.activity.recipient.id) { - await context.sendActivity("Welcome Message from `onMembersAdded` handler!"); - } - } - await next(); + const { membersAdded } = context.activity; + + for (let member of membersAdded) { + if (member.id !== context.activity.recipient.id) { + await context.sendActivity( + 'Welcome Message from `onMembersAdded` handler!' + ); + } + } + await next(); }); ``` ### Tokens, User IDs, and iFrames -To achieve this in an iFrame of Web Chat, retrieve your token with user ID as described above and pass the token within the `src` attribute of the iFrame: -`````` +To achieve this in an iFrame of Web Chat, retrieve your token with user ID as described above and pass the token within the `src` attribute of the iFrame: +`` ## Secrets and Tokens without User IDs + Alternatively, conversations created with tokens that do not include a user ID send two conversation update events. Direct Line sends the first conversation update - the one for the bot - when the connection with the bot is established. Direct Line sends the second conversation update for the user after they send their first message. Generally, users anticipate the bot to send a welcome message before they send a message. To do this, you can dispatch a backchannel welcome event from Web Chat's store middleware when the Direct Line connection is established. Then in the `onEvent` handler, you can send a welcome message. Note, in the `onMembersAdded` handler you should check which channel is sending the event before sending the welcome message. If the channel id is "webchat" or "directline" you should not send the traditional welcome message to avoid sending multiple welcome messages. ### Web Chat + ```javascript -(async function () { - // Note, for the simplicity of this example, we are generating the Direct Line token on client side; - // however, this is not a recommended practice and you should create and manage your tokens from the server. - // 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 secret = ' | '; - const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', { - headers: { - Authorization: `Bearer ${secret}`, - }, - method: 'POST' - }); - const { token } = await res.json(); - - const store = window.WebChat.createStore( - {}, - ({ dispatch }) => next => action => { - if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') { - dispatch({ - type: 'WEB_CHAT/SEND_EVENT', - payload: { - name: 'webchat/join', - } - }); +(async function() { + // Note, for the simplicity of this example, we are generating the Direct Line token on client side; + // however, this is not a recommended practice and you should create and manage your tokens from the server. + // 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 secret = ' | '; + const res = await fetch( + 'https://directline.botframework.com/v3/directline/tokens/generate', + { + headers: { + Authorization: `Bearer ${secret}` + }, + method: 'POST' + } + ); + const { token } = await res.json(); + + const store = window.WebChat.createStore( + {}, + ({ dispatch }) => next => action => { + if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') { + dispatch({ + type: 'WEB_CHAT/SEND_EVENT', + payload: { + name: 'webchat/join' + } + }); + } + return next(action); } - return next(action); - } - ); + ); - window.WebChat.renderWebChat({ - directLine: window.WebChat.createDirectLine({ token }), - store - }, document.getElementById('webchat')); + window.WebChat.renderWebChat( + { + directLine: window.WebChat.createDirectLine({ token }), + store + }, + document.getElementById('webchat') + ); - document.querySelector('#webchat > *').focus(); + document.querySelector('#webchat > *').focus(); })().catch(err => console.error(err)); ``` ### Bot Framework SDK v4 (Node.js) + ```javascript this.onEvent(async (context, next) => { - if (context.activity.name === 'webchat/join') { - await context.sendActivity('Back Channel Welcome Message!'); - } - await next(); + if (context.activity.name === 'webchat/join') { + await context.sendActivity('Back Channel Welcome Message!'); + } + await next(); }); this.onMembersAdded(async (context, next) => { - const { channelId, membersAdded } = context.activity; - - if (channelId !== 'directline' && channelId !== 'webchat') { - for (let member of membersAdded) { - if (member.id !== context.activity.recipient.id) { - await context.sendActivity("Welcome Message from `onMembersAdded` handler!"); + const { channelId, membersAdded } = context.activity; + + if (channelId !== 'directline' && channelId !== 'webchat') { + for (let member of membersAdded) { + if (member.id !== context.activity.recipient.id) { + await context.sendActivity( + 'Welcome Message from `onMembersAdded` handler!' + ); + } } - } - } - await next(); + } + await next(); }); ``` -For more details regarding backchannel welcome events in Web Chat, take a look at this [sample](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/15.d.backchannel-send-welcome-event). +For more details regarding backchannel welcome events in Web Chat, take a look at this [sample](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/04.api/a.welcome-event). ### Additional Context -- [Bot Framework Direct Line Authentication](https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0) -- [Using WebChat with Azure Bot Service’s Authentication](https://blog.botframework.com/2018/09/01/using-webchat-with-azure-bot-services-authentication/) -- [Bot Framework Welcome Message Sample - Node SDK](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/javascript_nodejs/03.welcome-users) -- [Bot Framework Welcome Message Sample - C# SDK](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/03.welcome-user) -- [Web Chat Backchannel Welcome Event Sample](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/15.d.backchannel-send-welcome-event) \ No newline at end of file + +- [Bot Framework Direct Line Authentication](https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0) +- [Using WebChat with Azure Bot Service’s Authentication](https://blog.botframework.com/2018/09/01/using-webchat-with-azure-bot-services-authentication/) +- [Bot Framework Welcome Message Sample - Node SDK](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/javascript_nodejs/03.welcome-users) +- [Bot Framework Welcome Message Sample - C# SDK](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/03.welcome-user) +- [Web Chat Backchannel Welcome Event Sample](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/04.api/a.welcome-event) diff --git a/__tests__/README.md b/__tests__/README.md index ec177ceb37..f5c5c25abb 100644 --- a/__tests__/README.md +++ b/__tests__/README.md @@ -4,7 +4,7 @@ Automated testing in Web Chat is using multiple open-source technologies. - [Azure DevOps](https://azure.microsoft.com/en-us/services/devops/) for automatic testing - Test against [MockBot](https://github.com/compulim/BotFramework-MockBot) - - Try it out with this [live demo](https://microsoft.github.io/BotFramework-WebChat/01.a.getting-started-full-bundle) + - Try it out with this [live demo](https://microsoft.github.io/BotFramework-WebChat/01.getting-started/a.full-bundle) - Visual regression tests (a.k.a. compare screenshots) - Generated on [Chrome on Docker](https://github.com/SeleniumHQ/docker-selenium) - Compared using [`pixelmatch`](https://npmjs.com/package/pixelmatch) via [`jest-image-snapshot`](https://npmjs.com/package/jest-image-snapshot) diff --git a/lerna.json b/lerna.json index ce5fca381c..83e9d043a4 100644 --- a/lerna.json +++ b/lerna.json @@ -2,14 +2,14 @@ "lerna": "3.19.0", "packages": [ "packages/*", - "samples/12.customization-minimizable-web-chat", - "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", - "samples/17.b.clear-after-idle", - "samples/21.customization-plain-ui" + "samples/04.api/e.piping-to-redux", + "samples/04.api/f.selectable-activity", + "samples/04.api/g.chat-send-history", + "samples/04.api/h.clear-after-idle", + "samples/06.recomposing-ui/a.minimizable-web-chat", + "samples/06.recomposing-ui/b.speech-ui", + "samples/06.recomposing-ui/c.smart-display", + "samples/06.recomposing-ui/d.plain-ui" ], "version": "0.0.0" } diff --git a/package-lock.json b/package-lock.json index d88bbb5d47..88fe51cc47 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3812,6 +3812,96 @@ "integrity": "sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=", "dev": true }, + "array-includes": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.1.tgz", + "integrity": "sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0", + "is-string": "^1.0.5" + }, + "dependencies": { + "es-abstract": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.0.tgz", + "integrity": "sha512-yYkE07YF+6SIBmg1MsJ9dlub5L48Ek7X0qz+c/CPCHS9EBXfESorzng4cJQjJW5/pB6vDF41u7F8vUhLVDqIug==", + "dev": true, + "requires": { + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1", + "is-callable": "^1.1.5", + "is-regex": "^1.0.5", + "object-inspect": "^1.7.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.0", + "string.prototype.trimleft": "^2.1.1", + "string.prototype.trimright": "^2.1.1" + } + }, + "es-to-primitive": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", + "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", + "dev": true, + "requires": { + "is-callable": "^1.1.4", + "is-date-object": "^1.0.1", + "is-symbol": "^1.0.2" + } + }, + "has-symbols": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz", + "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==", + "dev": true + }, + "is-callable": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz", + "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==", + "dev": true + }, + "is-regex": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz", + "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==", + "dev": true, + "requires": { + "has": "^1.0.3" + } + }, + "object-inspect": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz", + "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==", + "dev": true + }, + "string.prototype.trimleft": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz", + "integrity": "sha512-iu2AGd3PuP5Rp7x2kEZCrB2Nf41ehzh+goo8TV7z8/XDBbsvc6HQIlUl9RjkZ4oyrW1XM5UwlGl1oVEaDjg6Ag==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "function-bind": "^1.1.1" + } + }, + "string.prototype.trimright": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz", + "integrity": "sha512-qFvWL3/+QIgZXVmJBfpHmxLB7xsUXz6HsUmP8+5dRaC3Q7oKUv9Vo6aMCRZC1smrtyECFsIT30PqBJ1gTjAs+g==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "function-bind": "^1.1.1" + } + } + } + }, "array-union": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", @@ -5376,6 +5466,15 @@ "path-type": "^3.0.0" } }, + "doctrine": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", + "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", + "dev": true, + "requires": { + "esutils": "^2.0.2" + } + }, "domexception": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz", @@ -5550,6 +5649,41 @@ } } }, + "eslint-plugin-eslint-plugin": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-eslint-plugin/-/eslint-plugin-eslint-plugin-2.1.0.tgz", + "integrity": "sha512-kT3A/ZJftt28gbl/Cv04qezb/NQ1dwYIbi8lyf806XMxkus7DvOVCLIfTXMrorp322Pnoez7+zabXH29tADIDg==", + "dev": true + }, + "eslint-plugin-react": { + "version": "7.17.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.17.0.tgz", + "integrity": "sha512-ODB7yg6lxhBVMeiH1c7E95FLD4E/TwmFjltiU+ethv7KPdCwgiFuOZg9zNRHyufStTDLl/dEFqI2Q1VPmCd78A==", + "dev": true, + "requires": { + "array-includes": "^3.0.3", + "doctrine": "^2.1.0", + "eslint-plugin-eslint-plugin": "^2.1.0", + "has": "^1.0.3", + "jsx-ast-utils": "^2.2.3", + "object.entries": "^1.1.0", + "object.fromentries": "^2.0.1", + "object.values": "^1.1.0", + "prop-types": "^15.7.2", + "resolve": "^1.13.1" + }, + "dependencies": { + "resolve": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.14.1.tgz", + "integrity": "sha512-fn5Wobh4cxbLzuHaE+nphztHy43/b++4M6SsGFC2gB8uYwf0C8LcarfCz1un7UTW8OFQg9iNjZ4xpcFVGebDPg==", + "dev": true, + "requires": { + "path-parse": "^1.0.6" + } + } + } + }, "esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", @@ -7832,6 +7966,12 @@ "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", "dev": true }, + "is-string": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz", + "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==", + "dev": true + }, "is-symbol": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz", @@ -8621,6 +8761,16 @@ "verror": "1.10.0" } }, + "jsx-ast-utils": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz", + "integrity": "sha512-EdIHFMm+1BPynpKOpdPqiOsvnIrInRGJD7bzPZdPkjitQEqpdpUuFpq4T0npZFKTiB3RhWFdGN+oqOJIdhDhQA==", + "dev": true, + "requires": { + "array-includes": "^3.0.3", + "object.assign": "^4.1.0" + } + }, "jszip": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.2.2.tgz", @@ -9921,6 +10071,188 @@ "object-keys": "^1.0.11" } }, + "object.entries": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.1.tgz", + "integrity": "sha512-ilqR7BgdyZetJutmDPfXCDffGa0/Yzl2ivVNpbx/g4UeWrCdRnFDUBrKJGLhGieRHDATnyZXWBeCb29k9CJysQ==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0-next.1", + "function-bind": "^1.1.1", + "has": "^1.0.3" + }, + "dependencies": { + "es-abstract": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.0.tgz", + "integrity": "sha512-yYkE07YF+6SIBmg1MsJ9dlub5L48Ek7X0qz+c/CPCHS9EBXfESorzng4cJQjJW5/pB6vDF41u7F8vUhLVDqIug==", + "dev": true, + "requires": { + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1", + "is-callable": "^1.1.5", + "is-regex": "^1.0.5", + "object-inspect": "^1.7.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.0", + "string.prototype.trimleft": "^2.1.1", + "string.prototype.trimright": "^2.1.1" + } + }, + "es-to-primitive": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", + "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", + "dev": true, + "requires": { + "is-callable": "^1.1.4", + "is-date-object": "^1.0.1", + "is-symbol": "^1.0.2" + } + }, + "has-symbols": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz", + "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==", + "dev": true + }, + "is-callable": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz", + "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==", + "dev": true + }, + "is-regex": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz", + "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==", + "dev": true, + "requires": { + "has": "^1.0.3" + } + }, + "object-inspect": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz", + "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==", + "dev": true + }, + "string.prototype.trimleft": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz", + "integrity": "sha512-iu2AGd3PuP5Rp7x2kEZCrB2Nf41ehzh+goo8TV7z8/XDBbsvc6HQIlUl9RjkZ4oyrW1XM5UwlGl1oVEaDjg6Ag==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "function-bind": "^1.1.1" + } + }, + "string.prototype.trimright": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz", + "integrity": "sha512-qFvWL3/+QIgZXVmJBfpHmxLB7xsUXz6HsUmP8+5dRaC3Q7oKUv9Vo6aMCRZC1smrtyECFsIT30PqBJ1gTjAs+g==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "function-bind": "^1.1.1" + } + } + } + }, + "object.fromentries": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.2.tgz", + "integrity": "sha512-r3ZiBH7MQppDJVLx6fhD618GKNG40CZYH9wgwdhKxBDDbQgjeWGGd4AtkZad84d291YxvWe7bJGuE65Anh0dxQ==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0-next.1", + "function-bind": "^1.1.1", + "has": "^1.0.3" + }, + "dependencies": { + "es-abstract": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.0.tgz", + "integrity": "sha512-yYkE07YF+6SIBmg1MsJ9dlub5L48Ek7X0qz+c/CPCHS9EBXfESorzng4cJQjJW5/pB6vDF41u7F8vUhLVDqIug==", + "dev": true, + "requires": { + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1", + "is-callable": "^1.1.5", + "is-regex": "^1.0.5", + "object-inspect": "^1.7.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.0", + "string.prototype.trimleft": "^2.1.1", + "string.prototype.trimright": "^2.1.1" + } + }, + "es-to-primitive": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", + "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", + "dev": true, + "requires": { + "is-callable": "^1.1.4", + "is-date-object": "^1.0.1", + "is-symbol": "^1.0.2" + } + }, + "has-symbols": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz", + "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==", + "dev": true + }, + "is-callable": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz", + "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==", + "dev": true + }, + "is-regex": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz", + "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==", + "dev": true, + "requires": { + "has": "^1.0.3" + } + }, + "object-inspect": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz", + "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==", + "dev": true + }, + "string.prototype.trimleft": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz", + "integrity": "sha512-iu2AGd3PuP5Rp7x2kEZCrB2Nf41ehzh+goo8TV7z8/XDBbsvc6HQIlUl9RjkZ4oyrW1XM5UwlGl1oVEaDjg6Ag==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "function-bind": "^1.1.1" + } + }, + "string.prototype.trimright": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz", + "integrity": "sha512-qFvWL3/+QIgZXVmJBfpHmxLB7xsUXz6HsUmP8+5dRaC3Q7oKUv9Vo6aMCRZC1smrtyECFsIT30PqBJ1gTjAs+g==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "function-bind": "^1.1.1" + } + } + } + }, "object.getownpropertydescriptors": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz", @@ -9940,6 +10272,97 @@ "isobject": "^3.0.1" } }, + "object.values": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.1.tgz", + "integrity": "sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0-next.1", + "function-bind": "^1.1.1", + "has": "^1.0.3" + }, + "dependencies": { + "es-abstract": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.0.tgz", + "integrity": "sha512-yYkE07YF+6SIBmg1MsJ9dlub5L48Ek7X0qz+c/CPCHS9EBXfESorzng4cJQjJW5/pB6vDF41u7F8vUhLVDqIug==", + "dev": true, + "requires": { + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1", + "is-callable": "^1.1.5", + "is-regex": "^1.0.5", + "object-inspect": "^1.7.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.0", + "string.prototype.trimleft": "^2.1.1", + "string.prototype.trimright": "^2.1.1" + } + }, + "es-to-primitive": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", + "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", + "dev": true, + "requires": { + "is-callable": "^1.1.4", + "is-date-object": "^1.0.1", + "is-symbol": "^1.0.2" + } + }, + "has-symbols": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz", + "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==", + "dev": true + }, + "is-callable": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz", + "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==", + "dev": true + }, + "is-regex": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz", + "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==", + "dev": true, + "requires": { + "has": "^1.0.3" + } + }, + "object-inspect": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz", + "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==", + "dev": true + }, + "string.prototype.trimleft": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz", + "integrity": "sha512-iu2AGd3PuP5Rp7x2kEZCrB2Nf41ehzh+goo8TV7z8/XDBbsvc6HQIlUl9RjkZ4oyrW1XM5UwlGl1oVEaDjg6Ag==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "function-bind": "^1.1.1" + } + }, + "string.prototype.trimright": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz", + "integrity": "sha512-qFvWL3/+QIgZXVmJBfpHmxLB7xsUXz6HsUmP8+5dRaC3Q7oKUv9Vo6aMCRZC1smrtyECFsIT30PqBJ1gTjAs+g==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "function-bind": "^1.1.1" + } + } + } + }, "octokit-pagination-methods": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz", diff --git a/package.json b/package.json index 448a13bb16..5a77baacb7 100644 --- a/package.json +++ b/package.json @@ -99,6 +99,7 @@ "babel-jest": "^24.9.0", "core-js": "^3.5.0", "coveralls": "^3.0.9", + "eslint-plugin-react": "^7.17.0", "get-port": "^5.0.0", "husky": "^3.1.0", "jest": "^24.9.0", diff --git a/packages/component/src/hooks/internal/useMemoArrayMap.js b/packages/component/src/hooks/internal/useMemoArrayMap.js index cac1a15495..c768020bcd 100644 --- a/packages/component/src/hooks/internal/useMemoArrayMap.js +++ b/packages/component/src/hooks/internal/useMemoArrayMap.js @@ -22,5 +22,5 @@ export default function useMemoArrayMap(array, mapper) { prevMapperRef.current = mapper; return mapped; - }, [array, mapper, nextMapperCalls]); + }, [array, mapper, nextMapperCalls, prevMapperCalls]); } diff --git a/packages/embed/README.md b/packages/embed/README.md index 14448172b5..79d23145b5 100644 --- a/packages/embed/README.md +++ b/packages/embed/README.md @@ -138,7 +138,7 @@ You can specify any `