2794 & 2510 Fix change local, hybrid react, and clear after idle samp…

…les (#2798) * #2794: Fix change-locale sample * #2510 host hybrid-react and clear-after-idle samples * Update CHANGELOG.md
microsoft · Jan 6, 2020 · 04fe2c3 · 04fe2c3
1 parent 0374125
commit 04fe2c3
Show file tree

Hide file tree

Showing 7 changed files with 556 additions and 517 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/lerna.json b/lerna.json
@@ -2,6 +2,7 @@
   "lerna": "3.19.0",
   "packages": [
     "packages/*",
+    "samples/01.getting-started/g.hybrid-react-npm",
     "samples/04.api/e.piping-to-redux",
     "samples/04.api/f.selectable-activity",
     "samples/04.api/g.chat-send-history",

diff --git a/samples/01.getting-started/g.hybrid-react-npm/package.json b/samples/01.getting-started/g.hybrid-react-npm/package.json
@@ -2,6 +2,7 @@
   "name": "root",
   "version": "1.0.0",
   "description": "",
+  "homepage": "https://microsoft.github.io/BotFramework-WebChat/01.getting-started/g.hybrid-react-npm/",
   "main": "index.js",
   "private": true,
   "scripts": {

diff --git a/samples/02.branding-styling-and-customization/g.change-locale/README.md b/samples/02.branding-styling-and-customization/g.change-locale/README.md
@@ -140,7 +140,7 @@ Here is the finished `index.html`:
    </head>
    <body>
       <div id="webchat" role="main"></div>
-      <script>
+      <script type="text/babel">
          (async function() {
             const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
             const { token } = await res.json();

diff --git a/samples/02.branding-styling-and-customization/g.change-locale/index.html b/samples/02.branding-styling-and-customization/g.change-locale/index.html
@@ -1,19 +1,17 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
-    <title>Web Chat: Integrate with React</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!--
-      For simplicity and code clarity, we are using Babel and React from unpkg.com.
-    -->
+    <title>Web Chat: Change locale</title>
+
     <script src="https://unpkg.com/@babel/standalone@7.7.5/babel.min.js"></script>
     <script src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
     <!--
       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="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script> -->
+    <script src="/packages/bundle/dist/webchat.js"></script>
     <style>
       html,
       body {
@@ -42,12 +40,43 @@
 
         const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
         const { token } = await res.json();
-        const { ReactWebChat } = window.WebChat;
 
-        window.ReactDOM.render(
-          <ReactWebChat directLine={window.WebChat.createDirectLine({ token })} />,
-          document.getElementById('webchat')
-        );
+        const { useMemo, useState } = window.React;
+        const { createDirectLine, createStore, ReactWebChat } = window.WebChat;
+
+        const App = () => {
+          const [locale, setLocale] = useState(navigator.language);
+          const directLine = useMemo(() => createDirectLine({ token }), []);
+          const store = useMemo(
+            () =>
+              createStore({}, () => next => action => {
+                if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
+                  const {
+                    activity: {
+                      from: { role },
+                      text,
+                      type
+                    }
+                  } = action.payload;
+
+                  if (
+                    role === 'bot' &&
+                    type === 'message' &&
+                    (text === 'en-US' || text === 'ja-JP' || text === 'zh-HK')
+                  ) {
+                    setLocale(text);
+                  }
+                }
+
+                return next(action);
+              }),
+            []
+          );
+
+          return <ReactWebChat directLine={directLine} locale={locale} store={store} />;
+        };
+
+        window.ReactDOM.render(<App />, document.getElementById('webchat'));
 
         document.querySelector('#webchat > *').focus();
       })().catch(err => console.error(err));

diff --git a/samples/04.api/h.clear-after-idle/package.json b/samples/04.api/h.clear-after-idle/package.json
@@ -2,7 +2,7 @@
   "name": "sample-clear-after-idle",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://microsoft.github.io/BotFramework-WebChat/17.b.clear-chat-history/",
+  "homepage": "https://microsoft.github.io/BotFramework-WebChat/04.api/h.clear-after-idle/",
   "dependencies": {
     "botframework-webchat": "^4.7.1",
     "react": "^16.12.0",

diff --git a/scripts/deploy_pages b/scripts/deploy_pages
@@ -1,6 +1,7 @@
 #!/bin/bash
 
 rsync -av --progress samples/ gh-pages/ \
+  --exclude 01.getting-started/g.hybrid-react-npm \
   --exclude 04.api/e.piping-to-redux \
   --exclude 04.api/f.selectable-activity \
   --exclude 04.api/g.chat-send-history \
@@ -10,6 +11,11 @@ rsync -av --progress samples/ gh-pages/ \
   --exclude 06.recomposing-ui/c.smart-display \
   --exclude 06.recomposing-ui/d.plain-ui
 
+mkdir gh-pages/01.getting-started
+
+mkdir gh-pages/01.getting-started/g.hybrid-react-npm
+rsync -av --progress samples/01.getting-started/g.hybrid-react-npm/build/ gh-pages/04.api/g.hybrid-react-npm/
+
 mkdir gh-pages/04.api
 
 mkdir gh-pages/04.api/e.piping-to-redux