init

tdurnford · Aug 23, 2019 · bb1ab0e · bb1ab0e
commit bb1ab0e
Show file tree

Hide file tree

Showing 72 changed files with 12,923 additions and 0 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+dist/**
+node_modules/**
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,14 @@
+module.exports = {
+    "extends": "standard",
+    "rules": {
+        "semi": [2, "always"],
+        "indent": [2, 4],
+        "no-return-await": 0,
+        "space-before-function-paren": [2, {
+            "named": "never",
+            "anonymous": "never",
+            "asyncArrow": "always"
+        }],
+        "template-curly-spacing": [2, "always"],
+    }
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+/node_modules
+/dist
diff --git a/README.md b/README.md
@@ -0,0 +1,57 @@
+# browser echo sample
+
+Bot Framework v4 browser bot sample
+
+The example shows the use of the `botbuilder-js` SDKs for the browser using the [BotFramework-WebChat](https://github.com/Microsoft/BotFramework-WebChat) and a custom [WebChatAdapter](/src/webChatAdapter.js).
+
+## To try this sample
+
+- Clone the repository
+
+    ```bash
+    git clone https://github.com/microsoft/botbuilder-samples.git
+    ```
+
+- In a terminal, navigate to `samples/javascript_es6/01.browser-echo`
+
+    ```bash
+    cd samples/javascript_es6/01.browser-echo
+    ```
+
+- Install modules
+
+    ```bash
+    npm install
+    ```
+
+- Build the sample
+
+    ```bash
+    npm run build
+    ```
+
+- Start the bot
+
+    ```bash
+    npm start
+    ```
+
+- Launch a web browser and navigate to [http://localhost:8080](http://localhost:8080).
+
+## Adapters
+
+Developers can use the [BotAdapter](https://docs.microsoft.com/en-us/javascript/api/botbuilder-core/botadapter) abstract base class to implement their own custom adapters.
+Implementing a custom adapter allows users to connect bots to channels not supported by the [Bot Framework](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-manage-channels?view=azure-bot-service-4.0).
+In this sample, a custom [WebChatAdapter](./src/WebChatAdapter.js) has been implemented so that the entirety of the bot is hosted in a user's browser.
+
+Hosting a bot in the browser provides these benefits:
+
+- A bot hosted in the user's browser has improved latency as there is no round-trip from the browser to a server hosting the bot.
+- One engineering team in charge of bot design and the website. This can lead towards a more integrated UX and speed up development.
+- A browser hosted bot can offload some of the work done by your servers by passing it to the user's machine.
+
+## Further reading
+
+- [Azure Bot Service](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-overview-introduction?view=azure-bot-service-4.0)
+- [Activity processing](https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-concept-activity-processing?view=azure-bot-service-4.0)
+- [Bot State and storage](https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-storage-concept?view=azure-bot-service-4.0)
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,20 @@
+module.exports = {
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": [
+            "last 2 versions"
+          ],
+          "ie": "11"
+        }
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "sourceMaps": "inline",
+  "plugins": [
+    "@babel/proposal-class-properties"
+  ]
+};
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>Web Chat: Full-featured bundle</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!--
+      This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
+      https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
+    -->
+    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
+    <script src="/app.js"></script>
+
+    <style>
+      html, body { height: 100% }
+      body { margin: 0 }
+
+      #webchat {
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="webchat" role="main"></div>
+    <script>
+        const directLine = new window.MockBotAdapter().botConnection
+
+        window.WebChat.renderWebChat({
+          directLine,
+          sendTyping: true
+        }, document.getElementById('webchat'));
+
+        document.querySelector('#webchat > *').focus();
+    </script>
+  </body>
+</html>