Activity grouping feature

CHANGELOG.md

@@ -22,6 +22,24 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Breaking changes
+
+-  Due to the complexity, we are no longer exposing `<CarouselLayout>` and `<StackedLayout>`. Please use `<BasicTranscript>` to render the transcript instead.
+-  With the new activity grouping feature:
+   -  Customized avatar cannot be wider than `styleOptions.avatarSize`. If you want to show a wider avatar, please increase `styleOptions.avatarSize`.
+   -  If customized avatar is rendering `false`, bubble will still be padded to leave a gutter for the empty customized avatar. To hide gutter, please set `styleOptions.botAvatarInitials` and `styleOptions.userAvatarInitials` to falsy.
+-  Default bubble nub offset is set to `0`, previously `"bottom"` (or `-0`)
+   -  Previously, we put the bubble nub at the bottom while keeping the avatar on top. This is not consistent in the new layout.
+-  By default, we will group avatar per status group.
+   -  If you want to switch back to previous behaviors, please set `styleOptions.showAvatarInGroup` to `true`.
+-  Default `botAvatarInitials` and `userAvatarInitials` is changed to `undefined`, from `""` (empty string)
+   -  When the initials is `undefined`, no gutter space will be reserved for the avatar.
+   -  When the initials is `""` (empty string), gutter space will be reserved, but not avatar will be shown.
+
+### Added
+
+-  Resolves [#3250](https://github.com/microsoft/BotFramework-WebChat/issues/3250). Added activity grouping feature, by [@compulim](https://github.com/compulim), in PR [#3365](https://github.com/microsoft/BotFramework-WebChat/pull/3365)
+
 ## [4.9.2] - 2020-07-14
 
 ### Added

__tests__/customizableAvatar.js

@@ -28,7 +28,7 @@ describe('customizable avatar', () => {
                 fontFamily: "'Calibri', 'Helvetica Neue', 'Arial', 'sans-serif'",
                 height: 128,
                 justifyContent: 'center',
-                width: 64
+                width: '100%'
               }
             },
             React.createElement('div', {}, activity.from.role)

__tests__/html/__jest__/createJobObservable.js

@@ -25,6 +25,21 @@ export default function createJobObservable(driver, { ignorePageError = false }
         if (job === ABORT_SYMBOL) {
           break;
         } else if (job.type === 'done') {
+          if (job.payload.deprecation) {
+            const deferred = createDeferred();
+
+            observer.next({
+              deferred,
+              job: {
+                type: 'expect deprecation'
+              }
+            });
+
+            if (!(await deferred.promise)) {
+              return observer.error(new Error('Expected deprecation notes were not found in the console log.'));
+            }
+          }
+
           observer.complete();
           break;
         } else if (job.type === 'error') {

__tests__/html/__jest__/runPageProcessor.js

@@ -20,11 +20,11 @@ export default async function runPageProcessor(driver, { ignoreConsoleError = fa
   const webChatTestLoaded = await driver.executeScript(() => !!window.WebChatTest);
 
   if (!webChatLoaded) {
-    throw new Error('"webchat.js" is not loaded on the page.');
+    throw new Error('"webchat.js" did not load on the page, or the page was not found.');
   }
 
   if (!webChatTestLoaded) {
-    throw new Error('"testharness.js" is not loaded on the page.');
+    throw new Error('"testharness.js" did not load on the page.');
   }
 
   if (await driver.executeScript(() => !(window.React && window.ReactDOM && window.ReactTestUtils))) {
@@ -85,6 +85,8 @@ export default async function runPageProcessor(driver, { ignoreConsoleError = fa
           console.log(`Saved to ${filename}`);
 
           result = filename;
+        } else if (job.type === 'expect deprecation') {
+          result = (await driver.executeScript(() => window.WebChatTest.shiftDeprecationHistory())).length;
         } else {
           throw new Error(`Unknown job type "${job.type}".`);
         }

__tests__/html/__jest__/setupRunHTMLTest.js

@@ -3,6 +3,7 @@ import { Options } from 'selenium-webdriver/chrome';
 import { URL } from 'url';
 import fetch from 'node-fetch';
 
+import { timeout } from './sleep';
 import indent from './indent';
 import mergeCoverageMap from './mergeCoverageMap';
 import parseURLParams from './parseURLParams';
@@ -30,7 +31,16 @@ global.runHTMLTest = async (
         .setChromeOptions(chromeOptions)
         .build();
 
-  const sessionId = (await driver.getSession()).getId();
+  const session = await Promise.race([
+    driver.getSession(),
+    timeout(
+      15000,
+      'Timed out while waiting for a Web Driver session. Probably there are more test runners running simultaneously than Web Driver sessions. Or some Web Driver sessions are hung.'
+    )
+  ]);
+
+  const sessionId = session.getId();
+
   const params = parseURLParams(new URL(url, 'http://webchat2/').hash);
 
   try {

__tests__/html/__jest__/sleep.js

@@ -1,3 +1,9 @@
-export default function sleep(durationInMS) {
+export default function sleep(durationInMS = 1000) {
   return new Promise(resolve => setTimeout(resolve, durationInMS));
 }
+
+export function timeout(durationInMS, message = 'timeout') {
+  return sleep(durationInMS).then(() => {
+    throw new Error(message);
+  });
+}

__tests__/html/activityGrouping.avatarMiddleware.atBottom.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        React: { useMemo },
+        WebChat: {
+          hooks: { useDirection }
+        },
+        WebChatTest: { conditions, createDirectLineWithTranscript, createStore, host, pageObjects, timeouts, token }
+      } = window;
+
+      (async function() {
+        const PortraitAvatar = ({ fromUser }) => {
+          const style = useMemo(() => ({ borderRadius: 4, width: '100%' }), []);
+
+          return <img src={fromUser ? 'assets/user-avatar.jpg' : 'assets/bot-avatar.jpg'} style={style} />;
+        };
+
+        const avatarMiddleware = () => next => (...args) => {
+          const [{ activity, fromUser, ...otherArgs }] = args;
+          const { id } = activity;
+
+          return <PortraitAvatar fromUser={fromUser} />;
+        };
+
+        window.WebChat.renderWebChat(
+          {
+            avatarMiddleware,
+            directLine: await createDirectLineWithTranscript([
+              {
+                from: { role: 'bot' },
+                id: '1.0',
+                text: 'Cillum ea irure amet reprehenderit minim.',
+                timestamp: -300001,
+                type: 'message'
+              },
+              {
+                from: { role: 'bot' },
+                id: '1.1',
+                text: 'Minim ut laboris enim nostrud magna.',
+                timestamp: -300001,
+                type: 'message'
+              },
+              {
+                channelData: { state: 'sent' },
+                from: { role: 'user' },
+                id: '2.0',
+                text: 'Tempor deserunt ut enim eu elit.',
+                timestamp: -300001,
+                type: 'message'
+              },
+              {
+                channelData: { state: 'sent' },
+                from: { role: 'user' },
+                id: '2.1',
+                text: 'Elit occaecat quis velit qui ad.',
+                timestamp: -300001,
+                type: 'message'
+              },
+              {
+                attachmentLayout: 'carousel',
+                attachments: [
+                  {
+                    contentType: 'image/jpeg',
+                    contentUrl:
+                      'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface1.jpg'
+                  },
+                  {
+                    contentType: 'image/jpeg',
+                    contentUrl:
+                      'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface2.jpg'
+                  },
+                  {
+                    contentType: 'image/jpeg',
+                    contentUrl:
+                      'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface3.jpg'
+                  }
+                ],
+                from: { role: 'bot' },
+                id: '3.0',
+                text: '',
+                timestamp: 0,
+                type: 'message'
+              },
+              {
+                attachmentLayout: 'stacked',
+                attachments: [
+                  {
+                    contentType: 'image/jpeg',
+                    contentUrl:
+                      'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface4.jpg',
+                    thumbnailUrl:
+                      'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface4.jpg'
+                  }
+                ],
+                channelData: { state: 'sent' },
+                from: { role: 'user' },
+                id: '4.0',
+                text: '',
+                timestamp: 0,
+                type: 'message'
+              }
+            ]),
+            store: createStore(),
+            styleOptions: {
+              botAvatarInitials: 'Bot',
+              bubbleBackground: '#0063B1',
+              bubbleBorderColor: '#0063B1',
+              bubbleBorderRadius: 4,
+              bubbleFromUserBackground: '#0063B1',
+              bubbleFromUserBorderColor: '#0063B1',
+              bubbleFromUserBorderRadius: 4,
+              bubbleFromUserNubOffset: -0,
+              bubbleFromUserNubSize: 10,
+              bubbleFromUserTextColor: 'White',
+              bubbleNubOffset: -0,
+              bubbleNubSize: 10,
+              bubbleTextColor: 'White',
+              groupTimestamp: 5000,
+              userAvatarInitials: 'You'
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+        await pageObjects.wait(conditions.allImagesLoaded(), timeouts.network);
+
+        await host.snapshot();
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>

__tests__/html/activityGrouping.avatarMiddleware.atBottom.js

@@ -0,0 +1,8 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('activity grouping', () => {
+  test('should not break avatar middleware with avatar at bottom', () =>
+    runHTMLTest('activityGrouping.avatarMiddleware.atBottom.html', { height: 1280 }));
+});