Feature/webchat middleware (#2202)

microsoft · Nov 6, 2020 · 6bcfefd · 6bcfefd
1 parent 919a101
commit 6bcfefd
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/app/client/package.json b/packages/app/client/package.json
@@ -50,6 +50,7 @@
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-typescript": "^7.1.0",
+    "@babel/runtime": "^7.1.5",
     "@types/enzyme": "^3.1.10",
     "@types/jest": "24.0.13",
     "@types/react": "16.9.17",
@@ -93,8 +94,7 @@
     "url-loader": "^1.0.1",
     "webpack": "^4.32.2",
     "webpack-cli": "^3.3.2",
-    "webpack-dev-server": "^3.4.1",
-    "@babel/runtime": "^7.1.5"
+    "webpack-dev-server": "^3.4.1"
   },
   "dependencies": {
     "@bfemulator/app-shared": "^1.0.0",
@@ -109,6 +109,7 @@
     "botframework-schema": "^4.3.4",
     "botframework-webchat": "4.11.0",
     "botframework-webchat-core": "4.11.0",
+    "core-js": "^3.6.5",
     "eslint-plugin-react": "^7.12.3",
     "markdown-it": "^8.4.2",
     "react": "16.8.6",

diff --git a/packages/app/client/src/index.tsx b/packages/app/client/src/index.tsx
@@ -44,6 +44,26 @@ import Main from './ui/shell/mainContainer';
 import { store } from './state/store';
 import './ui/styles/globals.scss';
 
+import 'core-js/features/array/find-index';
+import 'core-js/features/array/find';
+import 'core-js/features/array/from';
+import 'core-js/features/array/includes';
+import 'core-js/features/array/iterator';
+import 'core-js/features/dom-collections';
+import 'core-js/features/math/sign';
+import 'core-js/features/number/is-finite';
+import 'core-js/features/object/assign';
+import 'core-js/features/object/entries';
+import 'core-js/features/object/from-entries';
+import 'core-js/features/object/is';
+import 'core-js/features/object/values';
+import 'core-js/features/promise';
+import 'core-js/features/promise/finally';
+import 'core-js/features/set';
+import 'core-js/features/string/ends-with';
+import 'core-js/features/string/starts-with';
+import 'core-js/features/symbol';
+
 interceptError();
 interceptHyperlink();
 

diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.spec.tsx b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.spec.tsx
@@ -133,8 +133,8 @@ describe('<ChatContainer />', () => {
   });
 
   let props;
-
   beforeEach(() => {
+    URL.createObjectURL = jest.fn(() => '');
     props = {
       documentId: 'doc1',
       endpoint: {},

diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx
@@ -137,12 +137,19 @@ export class Chat extends PureComponent<ChatProps, ChatState> {
     return <div className={styles.disconnected}>Not Connected</div>;
   }
 
-  private activityWrapper(next, card, children): ReactNode {
+  private activityWrapper(next, setupArgs, renderArgs): ReactNode {
     let childrenContents = null;
-    const middlewareResult = next(card);
+    const card = setupArgs[0];
+
+    if (!card) {
+      return null;
+    }
+
+    const middlewareResult = next(...setupArgs);
     if (middlewareResult) {
-      childrenContents = middlewareResult(children);
+      childrenContents = middlewareResult(...renderArgs);
     }
+
     return (
       <OuterActivityWrapperContainer
         card={card}
@@ -194,37 +201,45 @@ export class Chat extends PureComponent<ChatProps, ChatState> {
     }
   };
 
-  private createActivityMiddleware = () => next => card => children => {
+  private createActivityMiddleware = () => next => (...setupArgs) => (...renderArgs) => {
+    const card = setupArgs[0];
     const { valueType } = card.activity;
 
     this.activityMap[card.activity.id] = valueType === ValueTypes.Activity ? card.activity.value : card.activity;
 
     switch (card.activity.type) {
       case ActivityTypes.Trace:
-        return this.renderTraceActivity(next, card, children);
+        return this.renderTraceActivity(next, [...setupArgs], [...renderArgs]);
 
       case ActivityTypes.EndOfConversation:
         return null;
 
       default:
-        return this.activityWrapper(next, card, children);
+        return this.activityWrapper(next, [...setupArgs], [...renderArgs]);
     }
   };
 
-  private renderTraceActivity(next, card, children): ReactNode {
+  private renderTraceActivity(next, setupArgs, renderArgs): ReactNode {
     const { documentId, mode } = this.props;
+    const mutatedSetupArgs = [...setupArgs];
+    const card = mutatedSetupArgs[0];
+    if (!card) {
+      return null;
+    }
 
     // we should only render the underlying activity once using the middleware,
     // and re-rendering should only be done at the wrapper level for highlighting
-    let activityChildren;
+
     const { valueType } = card.activity; // activities are nested
+    let messageActivity;
     if (valueType === ValueTypes.Activity) {
-      const messageActivity = card.activity.value;
-      activityChildren = next({ activity: messageActivity, timestampClassName: 'transcript-timestamp' })(children);
+      messageActivity = card.activity.value;
     } else if (valueType === ValueTypes.Command) {
-      const messageActivity = { ...card.activity, type: ActivityTypes.Message, text: card.activity.value } as Activity;
-      activityChildren = next({ activity: messageActivity, timestampClassName: 'transcript-timestamp' })(children);
+      messageActivity = { ...card.activity, type: ActivityTypes.Message, text: card.activity.value } as Activity;
     }
+    const mutatedCard = { activity: messageActivity, timestampClassName: 'transcript-timestamp' };
+    mutatedSetupArgs[0] = mutatedCard;
+    const activityChildren = next(...mutatedSetupArgs)(...renderArgs);
 
     return (
       <TraceActivityContainer