Add sequence ID for sorting activities (#4203)

* Move to TypeScript * Fix typings * Add typings * Use sequence ID for outgoing activities * Move away from clientTimestamp * Fix typings * Add typings * Use import type * Use import type * Use import type * Fix null reference error * Fix test * Fix test * Fix tests * Fix test * Add tests * Add test * Fix timestamp flash issue * Clean up * Remove clockskew related code * Cleanup * Update comment * Add comments * Fix test * Cleanup * Cleanup * Cleanup * Add doc * Add entry * Rename DirectLineActivity to WebChatActivity * Cleanup * Cleanup * Cleanup * Cleanup * Use plugin-transform-typescript
microsoft · Apr 7, 2022 · e08c94b · e08c94b
1 parent 6a5359f
commit e08c94b
Show file tree

Hide file tree

Showing 171 changed files with 8,596 additions and 7,875 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,10 +22,19 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Breaking changes
+
+-  A new `type WebChatActivity` is introduced in the `botframework-webchat-core` package
+   -  If you are previously using the `type DirectLineActivity`, you may need to move to this new type
+   -  All Web Chat APIs will use the newer `type WebChatActivity`
+   -  The new `type WebChatActivity` is a well-defined type for handling activities inside Web Chat
+   -  The existing `type DirectLineActivity` will be used solely for communicating with `type DirectLineJSBotConnection`, a.k.a. `botframework-directlinejs` package
+
 ### Fixed
 
 -  Fixes [#4102](https://github.com/microsoft/BotFramework-WebChat/issues/4102). Fixed `cldr-data-downloader` package not working properly on Windows, by [@compulim](https://github.com/compulim) in PR [#4223](https://github.com/microsoft/BotFramework-WebChat/pull/4223)
 -  Fixes [#4232](https://github.com/microsoft/BotFramework-WebChat/issues/4232). Added `blob:` to allowed protocol list for file attachment UI (`<FileContent>`), by [@compulim](https://github.com/compulim) in PR [#4233](https://github.com/microsoft/BotFramework-WebChat/pull/4233)
+-  Fixes [#4204](https://github.com/microsoft/BotFramework-WebChat/issues/4204). Sort using `activity.channelData['webchat:sequence-id']` and fallback to epoch time of `activity.timestamp`, by [@compulim](https://github.com/compulim), in PR [#4203](https://github.com/microsoft/BotFramework-WebChat/pull/4203)
 
 ### Changed
 
@@ -108,8 +117,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 -  Fixes [#4196](https://github.com/microsoft/BotFramework-WebChat/issues/4196). Should render/mount to a detached DOM node without errors, by [@compulim](https://github.com/compulim), in PR [#4197](https://github.com/microsoft/BotFramework-WebChat/issues/4197)
 
-## [4.15.0] - 2022-03-03
-
 ### Breaking changes
 
 -  New [`Map` object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) polyfill is required for IE11 when using NPM version of Web Chat:

diff --git a/...ck-skew-js-clock-skew-faking-clock-skew-should-affect-activity-order-1-snap.png b/...ck-skew-js-clock-skew-faking-clock-skew-should-affect-activity-order-1-snap.png
diff --git a/..._/chrome-docker/clock-skew-js-clock-skew-should-not-have-any-effects-1-snap.png b/..._/chrome-docker/clock-skew-js-clock-skew-should-not-have-any-effects-1-snap.png
diff --git a/...e-outgoing-js-should-render-outgoing-activities-based-on-sequence-id-1-snap.png b/...e-outgoing-js-should-render-outgoing-activities-based-on-sequence-id-1-snap.png
diff --git a/...e-outgoing-js-should-render-outgoing-activities-based-on-sequence-id-2-snap.png b/...e-outgoing-js-should-render-outgoing-activities-based-on-sequence-id-2-snap.png
diff --git a/...e-outgoing-js-should-render-outgoing-activities-based-on-sequence-id-3-snap.png b/...e-outgoing-js-should-render-outgoing-activities-based-on-sequence-id-3-snap.png
diff --git a/...id-no-sequence-id-js-should-sort-activities-by-fallback-to-timestamp-1-snap.png b/...id-no-sequence-id-js-should-sort-activities-by-fallback-to-timestamp-1-snap.png
diff --git a/...-id-simple-js-should-render-incoming-activities-based-on-sequence-id-1-snap.png b/...-id-simple-js-should-render-incoming-activities-based-on-sequence-id-1-snap.png
diff --git a/...i-should-display-send-failed-retry-when-activity-is-not-able-to-send-1-snap.png b/...i-should-display-send-failed-retry-when-activity-is-not-able-to-send-1-snap.png
diff --git a/...i-should-display-send-failed-retry-when-activity-is-not-able-to-send-2-snap.png b/...i-should-display-send-failed-retry-when-activity-is-not-able-to-send-2-snap.png
diff --git a/__tests__/clockSkew.js b/__tests__/clockSkew.js
diff --git a/__tests__/html/activityGrouping.disableTimestamp.html b/__tests__/html/activityGrouping.disableTimestamp.html
@@ -28,14 +28,16 @@
             type: 'message'
           },
           {
-            channelData: { clientActivityID: '2.1', clientTimestamp: -300001, state: 'sending' },
+            channelData: { clientActivityID: '2.1', state: 'sending', 'webchat:sequence-id': -300000.999 },
             from: { role: 'user' },
+            localTimestamp: -300001,
             text: 'Elit adipisicing laborum sit anim.',
             type: 'message'
           },
           {
-            channelData: { clientActivityID: '2.2', clientTimestamp: -5001, state: 'sending' },
+            channelData: { clientActivityID: '2.2', state: 'sending', 'webchat:sequence-id': -300000.998 },
             from: { role: 'user' },
+            localTimestamp: -5001,
             text: 'Nostrud enim enim ipsum pariatur commodo.',
             type: 'message'
           },
@@ -91,7 +93,7 @@
         await host.snapshot();
 
         directLine.activityDeferredObservable.next({
-          channelData: { clientActivityID: '2.1', clientTimestamp: -300001, state: 'sent' },
+          channelData: { clientActivityID: '2.1', state: 'sent' },
           from: { role: 'user' },
           id: '2.1',
           text: 'Elit adipisicing laborum sit anim.',
@@ -100,7 +102,7 @@
         });
 
         directLine.activityDeferredObservable.next({
-          channelData: { clientActivityID: '2.2', clientTimestamp: -5001, state: 'sent' },
+          channelData: { clientActivityID: '2.2', state: 'sent' },
           from: { role: 'user' },
           id: '2.2',
           text: 'Nostrud enim enim ipsum pariatur commodo.',

diff --git a/__tests__/html/activityGrouping.groupingActivityStatus.html b/__tests__/html/activityGrouping.groupingActivityStatus.html
@@ -93,8 +93,7 @@
               role: 'bot'
             },
             id: '1.1',
-            text:
-              'Enim labore laboris Lorem qui exercitation adipisicing labore excepteur commodo reprehenderit velit.',
+            text: 'Enim labore laboris Lorem qui exercitation adipisicing labore excepteur commodo reprehenderit velit.',
             timestamp: -120002,
             type: 'message'
           },
@@ -121,7 +120,6 @@
           },
           {
             channelData: {
-              clientTimestamp: -6001,
               // "send failed" is actually ignored and treated as "sending".
               // As long as this field is not "sent", we will consider it is "sending" or "send failed".
               state: 'send failed'
@@ -130,6 +128,7 @@
               role: 'user'
             },
             id: '4.0',
+            localTimestamp: -6001,
             text: 'A retry prompt must show on this activity.',
             timestamp: -6001,
             type: 'message'
@@ -154,20 +153,20 @@
               role: 'user'
             },
             id: '5.1',
-            text:
-              'The timestamp is shown because the next activity is not sent. When it is sent, the timestamp will be hidden.',
+            text: 'The timestamp is shown because the next activity is not sent. When it is sent, the timestamp will be hidden.',
             timestamp: -5001,
             type: 'message'
           },
           {
             channelData: {
-              clientTimestamp: -3001,
-              state: 'sending'
+              state: 'sending',
+              'webchat:sequence-id': -5000.999
             },
             from: {
               role: 'user'
             },
             id: '6.0',
+            localTimestamp: -3001,
             text: 'This activity is being sent.',
             timestamp: -3001,
             type: 'message'

diff --git a/__tests__/html/activityGrouping.legacyActivityStatusMiddleware.html b/__tests__/html/activityGrouping.legacyActivityStatusMiddleware.html
@@ -29,41 +29,44 @@
 
         await host.windowSize(undefined, 1280, document.getElementById('webchat'));
 
-        const activityStatusMiddleware = () => next => (...args) => {
-          const [
-            {
-              activity: {
-                from: { role }
-              },
-              sendState,
-              sameTimestampGroup
-            }
-          ] = args;
+        const activityStatusMiddleware =
+          () =>
+          next =>
+          (...args) => {
+            const [
+              {
+                activity: {
+                  from: { role }
+                },
+                sendState,
+                sameTimestampGroup
+              }
+            ] = args;
 
-          if (sendState === 'sending') {
-            return (
-              <span className="activity-status">
-                <span className="activity-status__sending">Sending&hellip;</span>
-              </span>
-            );
-          } else if (sendState === 'send failed') {
-            // Custom retry logic can be added when rendering the "Send failed." status.
-            return (
-              <span className="activity-status">
-                <span className="activity-status__send-failed">Send failed.</span>
-              </span>
-            );
-          } else if (!sameTimestampGroup) {
-            return (
-              <span className="activity-status">
-                <span className="activity-status__timestamp-pretext">{role === 'user' ? 'User at ' : 'Bot at '}</span>
-                {next(...args)}
-              </span>
-            );
-          }
+            if (sendState === 'sending') {
+              return (
+                <span className="activity-status">
+                  <span className="activity-status__sending">Sending&hellip;</span>
+                </span>
+              );
+            } else if (sendState === 'send failed') {
+              // Custom retry logic can be added when rendering the "Send failed." status.
+              return (
+                <span className="activity-status">
+                  <span className="activity-status__send-failed">Send failed.</span>
+                </span>
+              );
+            } else if (!sameTimestampGroup) {
+              return (
+                <span className="activity-status">
+                  <span className="activity-status__timestamp-pretext">{role === 'user' ? 'User at ' : 'Bot at '}</span>
+                  {next(...args)}
+                </span>
+              );
+            }
 
-          return next(...args);
-        };
+            return next(...args);
+          };
 
         WebChat.renderWebChat(
           {
@@ -85,14 +88,16 @@
                 type: 'message'
               },
               {
-                channelData: { clientActivityID: '2.1', clientTimestamp: -20001, state: 'sending' },
+                channelData: { clientActivityID: '2.1', state: 'sending', 'webchat:sequence-id': -30000.999 },
                 from: { role: 'user' },
+                localTimestamp: -20001,
                 text: 'This message should have status "Send failed".',
                 type: 'message'
               },
               {
-                channelData: { clientActivityID: '2.2', clientTimestamp: 0, state: 'sending' },
+                channelData: { clientActivityID: '2.2', state: 'sending', 'webchat:sequence-id': -30000.998 },
                 from: { role: 'user' },
+                localTimestamp: 0,
                 text: 'This message should have status "Sending...", then turn to "Send failed".',
                 type: 'message'
               }

diff --git a/__tests__/html/avatar.emptyInitials.html b/__tests__/html/avatar.emptyInitials.html
@@ -49,9 +49,10 @@
             type: 'message'
           },
           {
-            channelData: { clientTimestamp: -300001, state: 'sent' },
+            channelData: { state: 'sent' },
             from: { role: 'user' },
             id: '2.0',
+            localTimestamp: -300001,
             text: 'Incididunt amet occaecat enim ullamco voluptate proident.',
             timestamp: -300001,
             type: 'message'