Add programmatic post activity sample

compulim · Jan 10, 2019 · 2d360b6 · 2d360b6
1 parent d9808ca
commit 2d360b6
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Samples
 - UI: [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)
 - UI: [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`: [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)
 
 ## [4.2.0] - 2018-12-11
 ### Added

diff --git a/README.md b/README.md
@@ -234,6 +234,7 @@ npm run prepublishOnly
 | [`13.customization-speech-ui`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/13.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.      | [Demo](https://microsoft.github.io/BotFramework-WebChat/13.customization-speech-ui)                                  |
 | [`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.                                                                          | [Demo](https://microsoft.github.io/BotFramework-WebChat/14.customization-piping-to-redux)                            |
 | [`15.backchannel-piggyback-on-outgoing-activities`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/15.backchannel-piggyback-on-outgoing-activities)                 | Advanced tutorial: Demonstrates how to add custom data to every outgoing activities.                                                                                                                                                | [Demo](https://microsoft.github.io/BotFramework-WebChat/15.backchannel-piggyback-on-outgoing-activities)             |
+| [`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 message programmatically.                                                                                                                                                               | [Demo](https://microsoft.github.io/BotFramework-WebChat/15.c.programmatic-post-activity)                             |
 
 # Contributions
 

diff --git a/samples/15.c.programmatic-post-activity/README.md b/samples/15.c.programmatic-post-activity/README.md
@@ -0,0 +1,21 @@
+# Sample - Programmatic access to post activity
+
+When a button is clicked, it will programmatically send a message to the bot.
+
+# Test out the hosted sample
+
+- [Try out MockBot](https://microsoft.github.io/BotFramework-WebChat/15.c.programmatic-post-activity)
+
+# Things to try out
+
+- Click the "Help" button on uperr-left hand corner
+
+# Further reading
+
+## Related samples
+
+[`15.b.incoming-activity-event`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/15.a.incoming-activity-event) is a sample which will fire JavaScript event on all incoming activity.
+
+## 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)
diff --git a/samples/15.c.programmatic-post-activity/index.html b/samples/15.c.programmatic-post-activity/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>Web Chat: Programmatic access to post activity</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%;
+      }
+
+      #helpButton {
+        left: 10px;
+        position: absolute;
+        top: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="webchat" role="main"></div>
+    <button id="helpButton" type="button">Help</button>
+    <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();
+
+        // We are creating the Web Chat store here so we can dispatch WEB_CHAT/SEND_MESSAGE action later.
+        const store = window.WebChat.createStore();
+
+        window.WebChat.renderWebChat({
+          directLine: window.WebChat.createDirectLine({ token }),
+          // We are passing our own version of Web Chat store.
+          store
+        }, document.getElementById('webchat'));
+
+        // Hook into the button click, when clicked, will send "help" message to the bot.
+        document.querySelector('#helpButton').addEventListener('click', () => {
+          store.dispatch({
+            type: 'WEB_CHAT/SEND_MESSAGE',
+            payload: { text: 'help' }
+          });
+        });
+
+        document.querySelector('#webchat > *').focus();
+      })().catch(err => console.error(err));
+    </script>
+  </body>
+</html>