-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update sample verbiage & add new sample: migration from v3 to v4 #1398
Merged
corinagum
merged 4 commits into
microsoft:master
from
corinagum:corinagum/migrationv3-v4
Nov 28, 2018
Merged
Changes from 2 commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -38,6 +38,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. | |
| - `webpack` | ||
| - `[email protected]` | ||
| - `[email protected]` | ||
| - Fix [#1237](https://github.com/Microsoft/BotFramework-WebChat/issues/1237). Added new sample called `markdown`, by [@corinagum](https://github.com/corinagum) in PR [#1398](https://github.com/Microsoft/BotFramework-WebChat/pull/1398) | ||
|
|
||
| ## [4.1.0] - 2018-10-31 | ||
| ### Added | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,9 +11,9 @@ | |
| <script src="https://unpkg.com/[email protected]/dist/react-redux.min.js"></script> | ||
| <script src="https://unpkg.com/[email protected]/umd/index.js"></script> | ||
| <!-- | ||
| For demonstration purpose, we are using development branch of Web Chat at "/master/webchat.js". | ||
| When you are using Web Chat for production, you should use the latest stable at "/latest/webchat.js". | ||
| Or locked down on a specific version "/4.1.0/webchat.js". | ||
| For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js". | ||
| When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js", | ||
| or lock down on a specific version with the following format: "/4.1.0/webchat.js". | ||
| --> | ||
| <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script> | ||
| <style> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,9 +11,9 @@ | |
| <script src="https://unpkg.com/[email protected]/dist/react-redux.min.js"></script> | ||
| <script src="https://unpkg.com/[email protected]/umd/index.js"></script> | ||
| <!-- | ||
| For demonstration purpose, we are using development branch of Web Chat at "/master/webchat.js". | ||
| When you are using Web Chat for production, you should use the latest stable at "/latest/webchat.js". | ||
| Or locked down on a specific version "/4.1.0/webchat.js". | ||
| For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js". | ||
| When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js", | ||
| or lock down on a specific version with the following format: "/4.1.0/webchat.js". | ||
| --> | ||
| <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script> | ||
| <style> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,9 +10,9 @@ | |
| <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script> | ||
| <script src="https://unpkg.com/[email protected]/dist/react-redux.min.js"></script> | ||
| <!-- | ||
| For demonstration purpose, we are using development branch of Web Chat at "/master/webchat.js". | ||
| When you are using Web Chat for production, you should use the latest stable at "/latest/webchat.js". | ||
| Or locked down on a specific version "/4.1.0/webchat.js". | ||
| For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js". | ||
| When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js", | ||
| or lock down on a specific version with the following format: "/4.1.0/webchat.js". | ||
| --> | ||
| <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script> | ||
| <style> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,9 +9,9 @@ | |
| <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script> | ||
| <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script> | ||
| <!-- | ||
| For demonstration purpose, we are using development branch of Web Chat at "/master/webchat.js". | ||
| When you are using Web Chat for production, you should use the latest stable at "/latest/webchat.js". | ||
| Or locked down on a specific version "/4.1.0/webchat.js". | ||
| For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js". | ||
| When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js", | ||
| or lock down on a specific version with the following format: "/4.1.0/webchat.js". | ||
| --> | ||
| <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script> | ||
| <style> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,193 @@ | ||
| # Sample - Migrating Web Chat from v3 to v4 | ||
|
|
||
| A simple web page with a maximized and full-featured Web Chat embed from a CDN. This shows the steps on how to migrate from a v3 Web Chat to v4. | ||
|
|
||
| > Note: This sample is __unrelated__ to the version of **Bot Framework** that the bot is using. This sample makes changes from the v3 Web Chat samples to ultimately match the [full-bundle CDN sample](./../full-bundle/README.md). | ||
|
|
||
| # Test out the hosted sample | ||
|
|
||
| - [Try out MockBot](https://microsoft.github.io/BotFramework-WebChat/full-bundle) | ||
| > Although there are two separate samples, one named `full-bundle` and the other named `migration`, the end-result html is exactly the same. Therefore, the `migration` sample links to the same `full-bundle` bot. | ||
|
|
||
| # How to run locally | ||
|
|
||
| - Fork this repository | ||
| - Navigate to `/Your-Local-WebChat/samples/migration` in command line | ||
| - Run `npx serve` in the migration directory | ||
| - Browse to [http://localhost:5000/](http://localhost:5000/) | ||
|
|
||
| # Things to try out | ||
|
|
||
| - Type `help`: you should see a full list of MockBot features | ||
| - Type `markdown`: you should see the sample of Markdown | ||
| - Type `card weather`: you should see a weather card built using Adaptive Cards | ||
| - Type `layout carousel`: you should see a carousel of cards | ||
| - Resize the window and see how the carousel changes size | ||
|
|
||
| # Code | ||
|
|
||
| > Jump to [completed code](#completed-code) to see the end-result `index.html`. | ||
|
|
||
| ## Getting started | ||
|
|
||
| ### Goals of this bot | ||
|
|
||
| This code features the migration requirements to update Web Chat from v3 to v4. | ||
| The `index.html` page in the migration directory has two main goals. | ||
| - To import the v4 Web Chat full bundle CDN script | ||
| - To render Web Chat using the v4 best practices | ||
|
|
||
| We'll start by using our old v3 `index.html` as our starting point. | ||
| ```diff | ||
| <!DOCTYPE html> | ||
| <html lang="en-US"> | ||
| <head> | ||
| <link href="https://cdn.botframework.com/botframework-webchat/0.13.1/botchat.css" rel="stylesheet" /> | ||
| </head> | ||
| <body> | ||
| <div id="bot"/> | ||
| <script src="https://cdn.botframework.com/botframework-webchat/0.13.1/botchat.js"></script> | ||
| <script> | ||
| BotChat.App({ | ||
| directLine: { secret: direct_line_secret }, | ||
| user: { id: 'userid' }, | ||
| bot: { id: 'botid' }, | ||
| resize: 'detect' | ||
| }, document.getElementById("bot")); | ||
| </script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| > For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js". When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js", or lock down on a specific version with the following format: "/4.1.0/webchat.js". | ||
|
|
||
| Our first change is to update the CDN the webpage uses from v3 to v4. | ||
| ```diff | ||
| … | ||
| <head> | ||
| - <link href="https://cdn.botframework.com/botframework-webchat/0.13.1/botchat.css" rel="stylesheet" /> | ||
| + <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script> | ||
| </head> | ||
| <body> | ||
| - <div id="bot"/> | ||
| + <div id="webchat"/> | ||
| - <script src="https://cdn.botframework.com/botframework-webchat/0.13.1/botchat.js"></script> | ||
| … | ||
| ``` | ||
|
|
||
| Next, the code to render Web Chat must be updated in the body. Note that MockBot uses **tokens** rather than the **Direct Line secret**. | ||
| > It is **never recommended** to put the Direct Line secret in the browser or client app. To learn more about secrets and tokens for Direct Line, visit [this tutorial on authentication](https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication). | ||
|
|
||
| ```diff | ||
| … | ||
| <body> | ||
| <div id="webchat"></div> | ||
| <script> | ||
| - BotChat.App({ | ||
| - directLine: { secret: direct_line_secret }, | ||
| - user: { id: 'userid' }, | ||
| - bot: { id: 'botid' }, | ||
| - resize: 'detect' | ||
| - }, document.getElementById("bot")); | ||
| + (async function () { | ||
| + const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' }); | ||
| + const { token } = await res.json(); | ||
| + window.WebChat.renderWebChat({ | ||
| + directLine: window.WebChat.createDirectLine({ token }) | ||
| + }, document.getElementById('webchat')); | ||
| + })(); | ||
| </script> | ||
| … | ||
| </body> | ||
| ``` | ||
|
|
||
| ## Styling and Adding features | ||
|
|
||
| Next, you can add any other structure or DOM changes that will support Web Chat. | ||
|
|
||
| MockBot also features an autofocus on the Web Chat container, as well as push of any errors to the browser console. This is helpful for debugging. | ||
|
|
||
| ```diff | ||
| (async function () { | ||
| … | ||
| - })(); | ||
| + document.querySelector('#webchat > *').focus(); | ||
| + })().catch(err => console.error(err)); | ||
| </script> | ||
| ``` | ||
|
|
||
|
|
||
| Finally, we will add basic styling since there is no longer a stylesheet included on our page. | ||
| ```diff | ||
| … | ||
| <head> | ||
| <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script> | ||
| + <style> | ||
| + html, body { height: 100% } | ||
| + body { margin: 0 } | ||
|
|
||
| + #webchat, | ||
| + #webchat > * { | ||
| + height: 100%; | ||
| + width: 100%; | ||
| + } | ||
| + </style> | ||
| </head> | ||
| … | ||
| ``` | ||
|
|
||
| ## Completed code | ||
|
|
||
| Here is the finished `index.html`: | ||
|
|
||
| ```diff | ||
| <!DOCTYPE html> | ||
| <html lang="en-US"> | ||
| <head> | ||
| <title>Web Chat: Full-featured bundle</title> | ||
| + <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script> | ||
| + <style> | ||
| + html, body { height: 100% } | ||
| + body { margin: 0 } | ||
| + #webchat, | ||
| + #webchat > * { | ||
| + height: 100%; | ||
| + width: 100%; | ||
| + } | ||
| + </style> | ||
| </head> | ||
| <body> | ||
| + <div id="webchat"></div> | ||
| + <script> | ||
| + (async function () { | ||
| + const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { 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)); | ||
| + </script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| # Further reading | ||
|
|
||
| ## Other CDN bundles | ||
|
|
||
| Check out the hosted samples and source code for other CDN bundle options below. | ||
|
|
||
| - [Full bundle with polyfills for ES5 browsers](https://microsoft.github.io/BotFramework-WebChat/es5-bundle) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/es5-bundle) | ||
| - [Minimal bundle](https://microsoft.github.io/BotFramework-WebChat/minimal-bundle) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/minimal-bundle) | ||
| - [Minimal bundle with Markdown](https://microsoft.github.io/BotFramework-WebChat/minimal-bundle-with-markdown) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/minimal-bundle-with-markdown) | ||
|
|
||
| ## CDN sunburst chart | ||
|
|
||
| [This chart](http://cdn.botframework.com/botframework-webchat/master/stats.html) provides a visual of the contents of the various Web Chat bundles | ||
|
|
||
| ## Full list of Web Chat hosted samples | ||
|
|
||
| View the list of available samples by clicking [here](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en-US"> | ||
| <head> | ||
| <title>Web Chat: Full-featured bundle</title> | ||
| <!-- | ||
| For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js". | ||
| When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js", | ||
| or lock down on a specific version with the following format: "/4.1.0/webchat.js". | ||
| --> | ||
| <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script> | ||
| <style> | ||
| html, body { height: 100% } | ||
| body { margin: 0 } | ||
|
|
||
| #webchat, | ||
| #webchat > * { | ||
| height: 100%; | ||
| width: 100%; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="webchat"></div> | ||
| <script> | ||
| (async function () { | ||
| // In this demo, we are using Direct Line token from MockBot. | ||
| // To talk to your bot, you should use the token exchanged using your Direct Line secret. | ||
| // You should never put the Direct Line secret in the browser or client app. | ||
| // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication | ||
|
|
||
| const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' }); | ||
| const { token } = await res.json(); | ||
|
|
||
| window.WebChat.renderWebChat({ | ||
| directLine: window.WebChat.createDirectLine({ token }) | ||
| }, document.getElementById('webchat')); | ||
|
|
||
| document.querySelector('#webchat > *').focus(); | ||
| })().catch(err => console.error(err)); | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wow... fix to 'migration'