[WIP] Add replyToId for post back originated from Web Chat

CHANGELOG.md

@@ -30,7 +30,7 @@ Legends:
    - ~~Refer to [this test](./__tests__/html2/adaptiveCard/signInAction.html) for the reference payload~~
    - ~~Note: this implementation is based on observation of how Microsoft Teams behave and could deviate from their official implementation~~
    - Obsoleted in favor of PR [#5862](https://github.com/microsoft/BotFramework-WebChat/pull/5862)
-- Added card action `webchat:callURL` and [Adaptive Card action `Action.OpenUrlDialog`](https://adaptivecards.microsoft.com/?topic=Action.OpenUrlDialog)
+- Added card action `webchat:callURL` and [Adaptive Card action `Action.OpenUrlDialog`](https://adaptivecards.microsoft.com/?topic=Action.OpenUrlDialog), in PR [#5862](https://github.com/microsoft/BotFramework-WebChat/pull/5862) and PR [#5863](https://github.com/microsoft/BotFramework-WebChat/pull/5863), by [@compulim](https://github.com/compulim)
    - The card action is designed to host popup for authentication and authorization (call-and-return pattern), it can optionally send a postback message to the bot
    - Open in popup, in PR [#5862](https://github.com/microsoft/BotFramework-WebChat/pull/5862), by [@compulim](https://github.com/compulim)
       - Added `styleOptions.callURLActionPopupWindowHeight/Width` for sizing the popup window
@@ -49,6 +49,7 @@ Legends:
          - Postback is only accepted within 5 minutes after the popup window is opened and from a trusted origin
          - Each popup window can only send at most one postback, subsequent postbacks are ignored
          - `replyToId` will be automatically filled in by the ID of the originating activity
+- Rich cards: added fill-in of `replyToId` for "post back" card actions, in PR [#5871](https://github.com/microsoft/BotFramework-WebChat/pull/5871), by [@compulim](https://github.com/compulim)
 
 ### Fixed
 

__tests__/html2/avatar/layout.default.oneSide.html

@@ -49,6 +49,7 @@
 
           await pageObjects.sendMessageViaSendBox('normal');
           await pageConditions.numActivitiesShown(2);
+          await pageConditions.allOutgoingActivitiesSent();
 
           await host.snapshot('local', { skipCheckAccessibility: true });
 

__tests__/html2/hooks/usePerformCardAction.replyToId.html

@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/": "/__dist__/packages/bundle/static/botframework-webchat/",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { usePerformCardAction } from 'botframework-webchat/hook.js';
+      import { fn, spyOn } from 'jest-mock';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      const cardActionEnhancerMock = fn();
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          {
+            cardActionMiddleware:
+              ({ dispatch }) =>
+              next =>
+              (...args) =>
+                cardActionEnhancerMock(...args),
+            directLine,
+            store
+          },
+          { renderWebChat: true }
+        );
+
+        await renderHook();
+        await pageConditions.uiConnected();
+
+        const performCardAction = await renderHook(() => usePerformCardAction());
+
+        performCardAction({ type: 'postback', value: 'Hello, World!' }, undefined, { replyToId: 'a-00001' });
+
+        expect(cardActionEnhancerMock).toHaveBeenCalledTimes(1);
+        expect(cardActionEnhancerMock).toHaveBeenNthCalledWith(
+          1,
+          expect.objectContaining({
+            cardAction: { type: 'postback', value: 'Hello, World!' },
+
+            // THEN: Must contain "replyToId" in the request.
+            replyToId: 'a-00001'
+          })
+        );
+      });
+    </script>
+  </body>
+</html>

__tests__/html2/hooks/useSendPostBack.replyToId.html

@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/": "/__dist__/packages/bundle/static/botframework-webchat/",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useSendPostBack } from 'botframework-webchat/hook.js';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const {
+        testHelpers: { createDirectLineEmulator }
+      } = window;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(
+        async function () {
+          const { directLine, store } = createDirectLineEmulator();
+
+          const renderHook = createRenderHook(
+            document.getElementById('webchat'),
+            { directLine, store },
+            { renderWebChat: true }
+          );
+
+          const sendPostBack = await renderHook(() => useSendPostBack());
+
+          await pageConditions.uiConnected();
+
+          const { activity, resolveAll } = await directLine.actPostActivity(async () =>
+            sendPostBack({ hello: 'World!' }, { replyToId: 'a-00001' })
+          );
+
+          expect(activity).toEqual(
+            expect.objectContaining({
+              channelData: expect.objectContaining({ postBack: true }),
+              replyToId: 'a-00001',
+              type: 'message',
+              value: { hello: 'World!' }
+            })
+          );
+
+          await resolveAll();
+
+          directLine.emulateIncomingActivity(
+            `\`\`\`\n${JSON.stringify(
+              {
+                ...activity,
+                channelData: { ...activity.channelData, clientActivityID: '...' },
+                from: '...',
+                localTimestamp: '...',
+                localTimezone: '...'
+              },
+              null,
+              2
+            )}\n\`\`\``
+          );
+
+          await pageConditions.numActivitiesShown(1);
+
+          await host.snapshot('local');
+        },
+        { ignoreErrors: true }
+      );
+    </script>
+  </body>
+</html>

__tests__/html2/hooks/useSendPostBack.text.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/": "/__dist__/packages/bundle/static/botframework-webchat/",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useSendPostBack } from 'botframework-webchat/hook.js';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const {
+        testHelpers: { createDirectLineEmulator }
+      } = window;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(
+        async function () {
+          const { directLine, store } = createDirectLineEmulator();
+
+          const renderHook = createRenderHook(
+            document.getElementById('webchat'),
+            { directLine, store },
+            { renderWebChat: true }
+          );
+
+          const sendPostBack = await renderHook(() => useSendPostBack());
+
+          await pageConditions.uiConnected();
+
+          const { activity, resolveAll } = await directLine.actPostActivity(async () =>
+            sendPostBack('Hello, World!', { replyToId: 'a-00001' })
+          );
+
+          expect(activity).toEqual(
+            expect.objectContaining({
+              channelData: expect.objectContaining({ postBack: true }),
+              replyToId: 'a-00001',
+              // THEN: Should use "text" instead of "value".
+              text: 'Hello, World!',
+              type: 'message'
+            })
+          );
+
+          await resolveAll();
+
+          directLine.emulateIncomingActivity(
+            `\`\`\`\n${JSON.stringify(
+              {
+                ...activity,
+                channelData: { ...activity.channelData, clientActivityID: '...' },
+                from: '...',
+                localTimestamp: '...',
+                localTimezone: '...'
+              },
+              null,
+              2
+            )}\n\`\`\``
+          );
+
+          await pageConditions.numActivitiesShown(1);
+
+          await host.snapshot('local');
+        },
+        { ignoreErrors: true }
+      );
+    </script>
+  </body>
+</html>

__tests__/html2/replyToId/cardAction/adaptiveCard.html

@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/": "/__dist__/packages/bundle/static/botframework-webchat/",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { usePerformCardAction } from 'botframework-webchat/hook.js';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          {
+            directLine,
+            store
+          },
+          { renderWebChat: true }
+        );
+
+        await renderHook();
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          attachments: [
+            {
+              // TODO: Change to rich card instead of AC.
+              contentType: 'application/vnd.microsoft.card.adaptive',
+              content: {
+                $schema: 'https://microsoft.github.io/AdaptiveCards/schemas/adaptive-card.json',
+                version: '1.0',
+                type: 'AdaptiveCard',
+                body: [
+                  {
+                    type: 'Container',
+                    items: [
+                      {
+                        choices: [{ title: 'Aloha!', value: 'Aloha!' }],
+                        id: 'hello',
+                        label: 'Value',
+                        type: 'Input.ChoiceSet',
+                        value: 'Aloha!'
+                      }
+                    ]
+                  }
+                ],
+                actions: [{ type: 'Action.Submit', title: 'Submit' }]
+              }
+            }
+          ],
+          id: 'a-00001',
+          type: 'message'
+        });
+
+        const submitButton = pageElements.activities()[0].querySelector('.ac-pushButton');
+
+        const { activity, resolveAll } = await directLine.actPostActivity(() => host.click(submitButton));
+
+        await resolveAll();
+
+        directLine.emulateIncomingActivity(
+          `\`\`\`\n${JSON.stringify(
+            {
+              ...activity,
+              channelData: { ...activity.channelData, clientActivityID: '...' },
+              entities: activity.entities ? '{ ... }' : undefined,
+              from: '...',
+              localTimestamp: '...',
+              localTimezone: '...'
+            },
+            null,
+            2
+          )}\n\`\`\``
+        );
+
+        expect(activity).toEqual(
+          expect.objectContaining({
+            channelData: expect.objectContaining({ postBack: true }),
+            replyToId: 'a-00001',
+            type: 'message',
+            value: { hello: 'Aloha!' }
+          })
+        );
+
+        await pageConditions.scrollStabilized();
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>