diff --git a/CHANGELOG.md b/CHANGELOG.md index 94962d10c3..bc43e84db7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -152,6 +152,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - `bundle`: Webpack will now use `webpack-stats-plugin` instead of `webpack-visualizer-plugin`, by [@compulim](https://github.com/compulim) in PR [#2584](https://github.com/microsoft/BotFramework-WebChat/pull/2584) - This will fix [#2583](https://github.com/microsoft/BotFramework-WebChat/issues/2583) by not bringing in transient dependency of React - To view the bundle stats, browse to https://chrisbateman.github.io/webpack-visualizer/ and drop the file `/packages/bundle/dist/stats.json` +- Resolves [#2674](https://github.com/microsoft/BotFramework-WebChat/issues/2674). Update embed docs, by [@corinagum](https://github.com/corinagum), in PR [#2696](https://github.com/microsoft/BotFramework-WebChat/pull/2696) ### Samples diff --git a/DIRECT_LINE_SPEECH.md b/DIRECT_LINE_SPEECH.md index 3d16a26217..1e1a4f4d9c 100644 --- a/DIRECT_LINE_SPEECH.md +++ b/DIRECT_LINE_SPEECH.md @@ -10,7 +10,7 @@ We assume you have already set up a bot and have Web Chat running on a page. ## What is Direct Line Speech? -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. +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. @@ -247,8 +247,8 @@ Please look at our sample `06.i.direct-line-speech` to embedding Web Chat on you After setting up Direct Line Speech on Azure Bot Services, there are two steps for using Direct Line Speech: -- [Retrieve your Direct Line Speech credentials](#retrieve-your-direct-line-speech-credentials) -- [Render Web Chat using Direct Line Speech adapters](#render-web-chat-using-direct-line-speech-adapters) +- [Retrieve your Direct Line Speech credentials](#retrieve-your-direct-line-speech-credentials) +- [Render Web Chat using Direct Line Speech adapters](#render-web-chat-using-direct-line-speech-adapters) ### Retrieve your Direct Line Speech credentials @@ -260,17 +260,20 @@ In the following code snippets, we assume sending a HTTP POST request to https:/ ```js const fetchCredentials = async () => { - const res = await fetch('https://webchat-mockbot-streaming.azurewebsites.net/speechservices/token', { - method: 'POST' - }); + const res = await fetch( + 'https://webchat-mockbot-streaming.azurewebsites.net/speechservices/token', + { + method: 'POST' + } + ); - if (!res.ok) { - throw new Error('Failed to fetch authorization token and region.'); - } + if (!res.ok) { + throw new Error('Failed to fetch authorization token and region.'); + } - const { authorizationToken, region } = await res.json(); + const { authorizationToken, region } = await res.json(); - return { authorizationToken, region }; + return { authorizationToken, region }; }; ``` @@ -281,13 +284,15 @@ const fetchCredentials = async () => { After you have the `fetchCredentials` function set up, you can pass it to `createDirectLineSpeechAdapters` function. This function will return a set of adapters that is used by Web Chat. It includes DirectLineJS adapter and Web Speech adapter. ```js -const adapters = await window.WebChat.createDirectLineSpeechAdapters({ fetchCredentials }); +const adapters = await window.WebChat.createDirectLineSpeechAdapters({ + fetchCredentials +}); window.WebChat.renderWebChat( - { - ...adapters - }, - document.getElementById('webchat') + { + ...adapters + }, + document.getElementById('webchat') ); ``` @@ -301,13 +306,13 @@ window.WebChat.renderWebChat( You can specify user ID when you instantiate Web Chat. -- If you specify user ID - - `conversationUpdate` activity will be send on connect and every reconnect. And with your user ID specified in the `membersAdded` field. - - All `message` activities will be sent with your user ID in `from.id` field. -- If you do not specify user ID - - `conversationUpdate` activity will be send on connect and every reconnect. The `membersAdded` field will have an user ID of empty string. - - All `message` activities will be sent with a randomized user ID - - The user ID is kept the same across reconnections +- If you specify user ID + - `conversationUpdate` activity will be send on connect and every reconnect. And with your user ID specified in the `membersAdded` field. + - All `message` activities will be sent with your user ID in `from.id` field. +- If you do not specify user ID + - `conversationUpdate` activity will be send on connect and every reconnect. The `membersAdded` field will have an user ID of empty string. + - All `message` activities will be sent with a randomized user ID + - The user ID is kept the same across reconnections ### Connection idle and reconnection diff --git a/packages/embed/README.md b/packages/embed/README.md index 23ec567e06..14448172b5 100644 --- a/packages/embed/README.md +++ b/packages/embed/README.md @@ -2,19 +2,19 @@ This package contains the source code for the embed page at https://webchat.botframework.com/. -> For transparency and completeness, we are maintaining the code here. This code is coupled to our servers. In order to host this page on your own website, you will need to decouple it or provide the same set of REST APIs. +> For transparency and completeness, we are maintaining the code in the Web Chat repository. This code is coupled to our servers. In order to host this page on your own website, you will need to decouple it or provide the same set of REST APIs. ## Background -Web Chat offers multiple levels of integration options. In this package, we focus on embedding ` ``` -**For production use, we strongly prefer you to use token instead of secret.** Please refer to [this article](https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication) for how to generate token out of secret. +**For production use, we strongly recommend that you use token retrieval instead of your secret.** Please refer to [this article](https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication) for how to generate token from your secret. With a token (instead of a secret), your ` ``` -Please look at [this table](#what-url-parameters-are-supported) for list of URL parameters supported. +Please refer to the [supported parameters](#what-url-parameters-are-supported) for list of URL parameters supported. ## Development ### Building the page -Follow steps below to build the embed page locally. +Follow the steps below to build the embed page locally. 1. `npm install` 1. `npm run prepublishOnly` 1. Publishes the build artifact at `/dist/index.html` 1. Verifies the file size. It should be less than 30 KB -### Updating servicing plan +### Updating the servicing plan `servicingPlan.json` is the deployment plan. It provides details about where to locate assets, how to set up, and when to deprecate our older bits. -When modifying the servicing plan to point to newer assets, make sure it is pointing to immutable copies on CDN. For example, you want to use assets with hashed filenames. Since we are using subresource integrity, this will make sure the servicing plan and assets can be invalidated on CDN cache asynchronously. +When modifying the servicing plan to point to newer assets, make sure it is pointing to immutable copies on CDN. For example, you want to use assets with hashed filenames. Since Web Chat is using subresource integrity, this will make sure the servicing plan and assets can be invalidated on CDN cache asynchronously. #### Generating hash for subresource integrity -For traceability of deployment, we are using [subresource integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). +For traceability of deployment, Web Chat uses [subresource integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). To generate SHA384 for a specific asset from an URL, run the following command in [Ubuntu](https://www.microsoft.com/en-us/p/ubuntu/9nblggh4msv6). @@ -63,38 +63,36 @@ To generate SHA384 for a specific asset from an URL, run the following command i curl https://cdn.botframework.com/botframework-webchat/4.3.0/webchat.js | openssl dgst -sha384 -binary | openssl base64 -A ``` -[This script](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#Tools_for_generating_SRI_hashes) will fetch the asset from CDN, pipe it into OpenSSL for digest, and output as BASE64. +[Generating SRI hashes script](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#Tools_for_generating_SRI_hashes) will fetch the asset from CDN, pipe it into OpenSSL for digest, and output as BASE64. ### Test locally -There are two public surfaces we need to test: +There are two public surfaces to test: -- Embed page, i.e. https://webchat.botframework.com/embed/your-bot-id +- Embed page (i.e. https://webchat.botframework.com/embed/your-bot-id) - Azure Portal "Test in Web Chat" blade - - ## FAQs -Below are common questions about the new Gemini deployment of Web Chat. +Below are common questions about the embed deployment of Web Chat. ### Why use `