diff --git a/CHANGELOG.md b/CHANGELOG.md index 6d8e6997b4..be9d09652f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -62,6 +62,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Fixes [#2751](https://github.com/microsoft/BotFramework-WebChat/issues/2751). Move documentation to docs folder, by [@corinagum](https://github.com/corinagum) in PR [#2832](https://github.com/microsoft/BotFramework-WebChat/pull/2832) - Fixes [#2838](https://github.com/microsoft/BotFramework-WebChat/issues/2838). Fixed `concatMiddleware` should allow any middleware to call its downstream middleware twice, by [@compulim](https://github.com/compulim) in PR [#2839](https://github.com/microsoft/BotFramework-WebChat/pull/2839) - Fixes [#2864](https://github.com/microsoft/BotFramework-WebChat/issues/2864). Replaced `DownloadAttachment` and `UploadAttachment` with `FileAttachment`, which shows the download link and icon if the attachment contains the `contentUrl`, by [@compulim](https://github.com/compulim) in PR [#2868](https://github.com/microsoft/BotFramework-WebChat/pull/2868) +- Fixes [#2877](https://github.com/microsoft/BotFramework-WebChat/issues/2877). Updated Cognitive Services Speech Services samples to use both pre-4.8 and 4.8 API signature, by [@compulim](https://github.com/compulim) in PR [#2916](https://github.com/microsoft/BotFramework-WebChat/pull/2916) ### Changed diff --git a/samples/03.speech/b.cognitive-speech-services-js/index.html b/samples/03.speech/b.cognitive-speech-services-js/index.html index 59ceb86a8f..c670750f1f 100644 --- a/samples/03.speech/b.cognitive-speech-services-js/index.html +++ b/samples/03.speech/b.cognitive-speech-services-js/index.html @@ -74,7 +74,12 @@ const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({ // We are passing the Promise function to the "credentials" field. // This function will be called every time the token is being used. - credentials: fetchSpeechServicesCredentials + credentials: fetchSpeechServicesCredentials, + + // The following code is needed only for Web Chat < 4.8. + // Starting from 4.8, we will support the newer "credentials" option, which is preferred over "authorizationToken" and "region". + authorizationToken: () => fetchSpeechServicesCredentials().then(({ authorizationToken }) => authorizationToken), + region: fetchSpeechServicesCredentials().then(({ region }) => region) }); // Pass a Web Speech ponyfill factory to renderWebChat. diff --git a/samples/03.speech/c.cognitive-speech-services-with-lexical-result/index.html b/samples/03.speech/c.cognitive-speech-services-with-lexical-result/index.html index 8224227218..bfa7d7c0b8 100644 --- a/samples/03.speech/c.cognitive-speech-services-with-lexical-result/index.html +++ b/samples/03.speech/c.cognitive-speech-services-with-lexical-result/index.html @@ -75,7 +75,12 @@ // We are passing the Promise function to the "credentials" field. // This function will be called every time the token is being used. credentials: fetchSpeechServicesCredentials, - textNormalization: 'lexical' + textNormalization: 'lexical', + + // The following code is needed only for Web Chat < 4.8. + // Starting from 4.8, we will support the newer "credentials" option, which is preferred over "authorizationToken" and "region". + authorizationToken: () => fetchSpeechServicesCredentials().then(({ authorizationToken }) => authorizationToken), + region: fetchSpeechServicesCredentials().then(({ region }) => region) }); // Pass a Web Speech ponyfill factory to renderWebChat. diff --git a/samples/03.speech/d.cognitive-speech-services-speech-recognition-only/index.html b/samples/03.speech/d.cognitive-speech-services-speech-recognition-only/index.html index c6d6fbbf0b..c4645eb78d 100644 --- a/samples/03.speech/d.cognitive-speech-services-speech-recognition-only/index.html +++ b/samples/03.speech/d.cognitive-speech-services-speech-recognition-only/index.html @@ -80,7 +80,12 @@ { // We are passing the Promise function to the "credentials" field. // This function will be called every time the token is used. - credentials: fetchSpeechServicesCredentials + credentials: fetchSpeechServicesCredentials, + + // The following code is needed only for Web Chat < 4.8. + // Starting from 4.8, we will support the newer "credentials" option, which is preferred over "authorizationToken" and "region". + authorizationToken: () => fetchSpeechServicesCredentials().then(({ authorizationToken }) => authorizationToken), + region: fetchSpeechServicesCredentials().then(({ region }) => region) } ); diff --git a/samples/03.speech/e.select-voice/index.html b/samples/03.speech/e.select-voice/index.html index d1099ca1ef..613e45dcf3 100644 --- a/samples/03.speech/e.select-voice/index.html +++ b/samples/03.speech/e.select-voice/index.html @@ -76,7 +76,12 @@ const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({ // We are passing the Promise function to the "credentials" field. // This function will be called every time the token is being used. - credentials: fetchSpeechServicesCredentials + credentials: fetchSpeechServicesCredentials, + + // The following code is needed only for Web Chat < 4.8. + // Starting from 4.8, we will support the newer "credentials" option, which is preferred over "authorizationToken" and "region". + authorizationToken: () => fetchSpeechServicesCredentials().then(({ authorizationToken }) => authorizationToken), + region: fetchSpeechServicesCredentials().then(({ region }) => region) }); window.WebChat.renderWebChat( diff --git a/samples/03.speech/g.hybrid-speech/index.html b/samples/03.speech/g.hybrid-speech/index.html index 9eec60f88e..e9ea9228a3 100644 --- a/samples/03.speech/g.hybrid-speech/index.html +++ b/samples/03.speech/g.hybrid-speech/index.html @@ -79,7 +79,12 @@ { // We are passing the Promise function to the "credentials" field. // This function will be called every time the token is being used. - credentials + credentials, + + // The following code is needed only for Web Chat < 4.8. + // Starting from 4.8, we will support the newer "credentials" option, which is preferred over "authorizationToken" and "region". + authorizationToken: () => fetchSpeechServicesCredentials().then(({ authorizationToken }) => authorizationToken), + region: fetchSpeechServicesCredentials().then(({ region }) => region) } ); diff --git a/samples/05.custom-components/i.notification/README.md b/samples/05.custom-components/i.notification/README.md index ec6509a480..dfcf29ee88 100644 --- a/samples/05.custom-components/i.notification/README.md +++ b/samples/05.custom-components/i.notification/README.md @@ -87,24 +87,24 @@ First, implement a React component for the privacy policy toast without any logi ```js const PrivacyPolicyToast = () => { - return ( -
- - - Do you consent to our{' '} - - privacy policy - - ? - - {' '} - -
- ); + return ( +
+ + + Do you consent to our{' '} + + privacy policy + + ? + + {' '} + +
+ ); }; ``` @@ -114,57 +114,57 @@ Then, style the toast using the following CSS: ```css @font-face { - font-family: 'FabricMDL2Icons'; - src: url('data:application/octet-stream;base64,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') - format('truetype'); + font-family: 'FabricMDL2Icons'; + src: url('data:application/octet-stream;base64,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') + format('truetype'); } .ms-Icon { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-family: 'FabricMDL2Icons'; - font-style: normal; - font-weight: normal; - speak: none; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; } .ms-Icon--Compare:before { - content: '\F057'; + content: '\F057'; } .app__privacyPolicyToast { - align-items: center; - color: #105e7d; - display: flex; - font-family: 'Calibri', 'Helvetica Neue', 'Arial', 'sans-serif'; - font-size: 14px; - height: 100%; + align-items: center; + color: #105e7d; + display: flex; + font-family: 'Calibri', 'Helvetica Neue', 'Arial', 'sans-serif'; + font-size: 14px; + height: 100%; } .app__privacyPolicyToast__icon { - text-align: center; - width: 36px; + text-align: center; + width: 36px; } .app__privacyPolicyToast__button { - appearance: none; - background-color: rgba(255, 255, 255, 0.8); - border: solid 1px rgba(0, 0, 0, 0.3); - border-radius: 3px; - color: initial; - font-family: inherit; - font-size: inherit; - margin: 0 0 0 4px; - outline: 0; + appearance: none; + background-color: rgba(255, 255, 255, 0.8); + border: solid 1px rgba(0, 0, 0, 0.3); + border-radius: 3px; + color: initial; + font-family: inherit; + font-size: inherit; + margin: 0 0 0 4px; + outline: 0; } .app__privacyPolicyToast__button:hover { - background-color: rgba(0, 0, 0, 0.12); + background-color: rgba(0, 0, 0, 0.12); } .app__privacyPolicyToast__button:focus { - border-color: rgba(0, 0, 0, 0.7); + border-color: rgba(0, 0, 0, 0.7); } ``` @@ -337,9 +337,9 @@ Here is the finished `index.html`: # Further reading -- [Web Chat notification system](https://github.com/microsoft/BotFramework-WebChat/tree/master/docs/NOTIFICATION.md) -- [React Hook for setting notification](https://github.com/microsoft/BotFramework-WebChat/tree/master/docs/HOOKS.md#usesetnotification) -- [React Hook for dismissing notification](https://github.com/microsoft/BotFramework-WebChat/tree/master/docs/HOOKS.md#usedismissnotification) +- [Web Chat notification system](https://github.com/microsoft/BotFramework-WebChat/tree/master/docs/NOTIFICATION.md) +- [React Hook for setting notification](https://github.com/microsoft/BotFramework-WebChat/tree/master/docs/HOOKS.md#usesetnotification) +- [React Hook for dismissing notification](https://github.com/microsoft/BotFramework-WebChat/tree/master/docs/HOOKS.md#usedismissnotification) ## Full list of Web Chat hosted samples diff --git a/samples/README.md b/samples/README.md index 6b5f08efcd..8fb9b835bd 100644 --- a/samples/README.md +++ b/samples/README.md @@ -6,64 +6,64 @@ Here you can find all hosted samples of [Web Chat](https://github.com/microsoft/ # Samples list -|                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.idiosyncratic-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.idiosyncratic-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://microsoft.github.io/BotFramework-WebChat/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) | -| [`02.branding-styling-and-customization/h.send-timeout`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/02.branding-styling-and-customization/h.send-timeout) | Demonstrates how to change timeout for outgoing messages. | [Send Timeout Demo](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/h.send-timeout) | -| [`02.branding-styling-and-customization/i.change-locale-and-direction`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/02.branding-styling-and-customization/i.change-locale-and-direction) | Demonstrates how to change locale and direction of the UI (RTL). | [Change Direction Demo](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/i.change-locale-and-direction) | -| **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. | [Clear After Idle 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) | -| [`05.custom-components/g.activity-status`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/g.activity-status/) | Demonstrates how to customize the activity status by including sender's name. | [Customize Activity Status Demo](https://microsoft.github.io/BotFramework-WebChat/05.custom-components/g.activity-status) | -| [`05.custom-components/i.notification`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/i.notification/) | Demonstrates how to use notification and customize the toast UI. | [Notification Demo](https://microsoft.github.io/BotFramework-WebChat/05.custom-components/i.notification) | -| **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) | -| **Advanced Web Chat apps** | | | -| [`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://webchat-sample-upload-to-azure.azurewebsites.net/) | -| [`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://webchat-sample-sso.azurewebsites.net/) | -| [`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://webchat-sample-sso-intranet.azurewebsites.net/) | -| [`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://webchat-sample-sso-teams.azurewebsites.net/) | +|                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.idiosyncratic-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.idiosyncratic-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://microsoft.github.io/BotFramework-WebChat/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) | +| [`02.branding-styling-and-customization/h.send-timeout`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/02.branding-styling-and-customization/h.send-timeout) | Demonstrates how to change timeout for outgoing messages. | [Send Timeout Demo](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/h.send-timeout) | +| [`02.branding-styling-and-customization/i.change-locale-and-direction`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/02.branding-styling-and-customization/i.change-locale-and-direction) | Demonstrates how to change locale and direction of the UI (RTL). | [Change Direction Demo](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/i.change-locale-and-direction) | +| **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-speech-services-speech-recognition-only`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.speech/d.cognitive-speech-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-speech-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. | [Clear After Idle 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) | +| [`05.custom-components/g.activity-status`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/g.activity-status/) | Demonstrates how to customize the activity status by including sender's name. | [Customize Activity Status Demo](https://microsoft.github.io/BotFramework-WebChat/05.custom-components/g.activity-status) | +| [`05.custom-components/i.notification`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/i.notification/) | Demonstrates how to use notification and customize the toast UI. | [Notification Demo](https://microsoft.github.io/BotFramework-WebChat/05.custom-components/i.notification) | +| **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) | +| **Advanced Web Chat apps** | | | +| [`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://webchat-sample-upload-to-azure.azurewebsites.net/) | +| [`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://webchat-sample-sso.azurewebsites.net/) | +| [`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://webchat-sample-sso-intranet.azurewebsites.net/) | +| [`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://webchat-sample-sso-teams.azurewebsites.net/) |