Add sequence ID for sorting activities

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:

__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.',

__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'

__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'
               }

__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'