[P0] Send attachment on send (#5123)

* Add style option to allow for file type narrowing

* Rename and add multi upload prop

* Add e2e test to validate <input>

* Resolve comments

* Revert to true

* Add style option

* Add hook

* Pass text through to activity

* Add file state to context

* Pass text to sendFiles

* Finalize upload and sendbox action

* Only send text if defined

* Add changelog entry

* Add e2e test

* Bump version

* Switch to check icon

* Initialize as undefined

* Store the upload button ref in context and clear after sending

* Fix types and pass ref directly to send box

* Update icon and sizing

* Smaller icon

* Updated send box icons per design

* Use Redux and sendMessage, instead of useState and sendFile

* Reformat

* Update DOCTYPE

* Add deprecation warning

* Rename to attach in sendAttachmentOn

* Fix test

* Remove deprecation note

* Clean up

* Expose updated useSendMessage hook

* Add tests

* Add tests

* Delete test

* Add test for speech

* Comments on ignoreErrors

* Revert icon changes

* Fix test

* Add telemetry

* Migrate test

* Use older icon

* Fix flakiness

* Revert screenshots

* Remove uploadButtonRef

* Dispatch should return void

* Sort imports

* Sort imports

* Remove uploadButtonRef

* Sort imports

* Sort imports

* Add test

* Add screenshots

* Use exact version for production dependencies

* Sort imports

* Update comment

* Update deps

* Remove empty line

* Update exact version

* Revert unnecessary changes

* Sort imports

* Simplify typing of SendBoxAttachment

* Clean up

* Remove unused file

* Sort

* Revert

* Update useSendMessage

* Update content type

* Fix flaky

* Fix tests

* Fix flakiness

* Add sendAttachmentOn

* Fix test

* Fix test

* Fix test

* Revert behavior

* Backward compatibility

* Add custom thumbnail

* Add notes

* Revert

* Revert API useSendFiles

* Add typings

* Remove satisfies

---------

Co-authored-by: Jordan Berger <[email protected]>

Author: compulim

CHANGELOG.md

@@ -17,36 +17,40 @@ jest.setTimeout(timeouts.test);
 test('file upload should show thumbnail and file name', async () => {
   const { driver, pageObjects } = await setupWebDriver({
     props: {
-      attachmentMiddleware: () => next => ({
-        activity = {},
-        activity: { from: { role } } = {},
-        attachment,
-        attachment: { contentType, thumbnailUrl } = {}
-      }) => {
-        if (role === 'user' && /^image\//u.test(contentType) && thumbnailUrl) {
-          const patchedAttachment = Object.assign({}, attachment, {
-            contentType: 'application/octet-stream',
-            thumbnailUrl: undefined
-          });
+      attachmentMiddleware:
+        () =>
+        next =>
+        ({
+          activity = {},
+          activity: { from: { role } } = {},
+          attachment,
+          attachment: { contentType, thumbnailUrl } = {}
+        }) => {
+          if (role === 'user' && /^image\//u.test(contentType) && thumbnailUrl) {
+            const patchedAttachment = Object.assign({}, attachment, {
+              contentType: 'application/octet-stream',
+              thumbnailUrl: undefined
+            });
 
-          const patchedAttachments = activity.attachments.map(target =>
-            target === attachment ? patchedAttachment : target
-          );
+            const patchedAttachments = activity.attachments.map(target =>
+              target === attachment ? patchedAttachment : target
+            );
 
-          const patchedActivity = Object.assign({}, activity, {
-            attachments: patchedAttachments
-          });
+            const patchedActivity = Object.assign({}, activity, {
+              attachments: patchedAttachments
+            });
 
-          return React.createElement(
-            React.Fragment,
-            {},
-            next({ activity, attachment }),
-            next({ activity: patchedActivity, attachment: patchedAttachment })
-          );
-        }
+            return React.createElement(
+              React.Fragment,
+              {},
+              next({ activity, attachment }),
+              next({ activity: patchedActivity, attachment: patchedAttachment })
+            );
+          }
 
-        return next({ activity, attachment });
-      }
+          return next({ activity, attachment });
+        },
+      styleOptions: { sendAttachmentOn: 'attach' }
     },
     // TODO: [P3] Offline bot did not reply with a downloadable attachment, we need to use production bot
     useProductionBot: true

__tests__/__image_snapshots__/chrome-docker/upload-js-upload-a-picture-with-custom-thumbnail-quality-1-snap.png __tests__/__image_snapshots__/html/custom-thumbnail-quality-js-with-web-worker-upload-a-picture-with-custom-thumbnail-quality-should-send-1-snap.png

@@ -39,7 +39,8 @@ test('show ZIP files with contentUrl', async () => {
       };
 
       return patchedDirectLine;
-    }
+    },
+    props: { styleOptions: { sendAttachmentOn: 'attach' } }
   });
 
   await driver.wait(uiConnected(), timeouts.directLine);
@@ -112,7 +113,8 @@ test('show ZIP files without contentUrl', async () => {
       };
 
       return patchedDirectLine;
-    }
+    },
+    props: { styleOptions: { sendAttachmentOn: 'attach' } }
   });
 
   await driver.wait(uiConnected(), timeouts.directLine);

__tests__/__image_snapshots__/chrome-docker/upload-js-upload-a-picture-without-web-worker-with-custom-thumbnail-quality-1-snap.png __tests__/__image_snapshots__/html/custom-thumbnail-quality-js-without-web-worker-upload-a-picture-with-custom-thumbnail-quality-should-send-1-snap.png

@@ -27,7 +27,7 @@ test('calling sendFile should send files', async () => {
     sendFiles([blob1, blob2]);
   });
 
-  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(minNumActivitiesShown(3), timeouts.directLine);
   await driver.wait(allOutgoingActivitiesSent(), timeouts.directLine);
 
   const base64PNG = await driver.takeScreenshot();

__tests__/__image_snapshots__/chrome-docker/upload-js-upload-a-picture-with-custom-thumbnail-size-1-snap.png __tests__/__image_snapshots__/html/custom-thumbnail-size-js-with-web-worker-upload-a-picture-with-custom-thumbnail-size-should-send-1-snap.png

@@ -26,12 +26,12 @@
         );
 
         await pageConditions.uiConnected();
-        
+
         // Validate the <input> element has the correct file types
-        const uploadButton = pageElements.uploadButton()
+        const uploadButton = pageElements.uploadButton();
+
         expect(uploadButton).toHaveProperty('accept', 'image/*');
         expect(uploadButton).toHaveProperty('multiple', false);
-        
       });
     </script>
   </body>

__tests__/__image_snapshots__/chrome-docker/upload-js-upload-a-picture-without-web-worker-with-custom-thumbnail-size-1-snap.png __tests__/__image_snapshots__/html/custom-thumbnail-size-js-without-web-worker-upload-a-picture-with-custom-thumbnail-size-should-send-1-snap.png

@@ -0,0 +1,4 @@
+*:focus {
+  background-color: yellow !important;
+  outline: dashed 2px Red !important;
+}

__tests__/__image_snapshots__/html/invalid-image-js-use-send-message-hook-should-send-zip-file-as-image-1-snap.png

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <link href="focus-indicator.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(
+        async function () {
+          const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
+          const store = testHelpers.createStore();
+
+          WebChat.renderWebChat(
+            { activityMiddleware: testHelpers.createRunHookActivityMiddleware(), directLine, store },
+            document.getElementById('webchat')
+          );
+
+          await pageConditions.uiConnected();
+
+          // SETUP: An empty file blob.
+          const blob = new File([new ArrayBuffer(1024)], 'empty.zip', { type: 'image/jpeg' });
+
+          // WHEN: Call useSendMessage hook to send a file a custom thumbnail.
+          await pageObjects.runHook(({ useSendMessage }) =>
+            useSendMessage()(undefined, undefined, { attachments: [{ blob }] })
+          );
+
+          // THEN: It should send the file.
+          await pageConditions.allOutgoingActivitiesSent();
+          await pageConditions.numActivitiesShown(3);
+          await host.snapshot();
+        },
+        { ignoreErrors: 'The source image could not be decoded.' }
+      );
+    </script>
+  </body>
+</html>

__tests__/__image_snapshots__/html/on-attach-js-with-send-attachment-on-of-attach-should-send-attachments-when-the-file-is-attached-1-snap.png

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('useSendMessage hook', () => {
+  test('should send zip file as image', () => runHTML('sendAttachmentOn/invalidImage'));
+});

__tests__/__image_snapshots__/html/on-send-js-with-send-attachment-on-of-send-should-send-attachments-when-the-send-button-is-clicked-1-snap.png

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <link href="focus-indicator.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
+        const store = testHelpers.createStore();
+
+        WebChat.renderWebChat(
+          { directLine, store, styleOptions: { sendAttachmentOn: 'attach' } },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // WHEN: Upload button is clicked and a JPEG file is selected.
+        await host.upload(pageElements.uploadButton(), 'seaofthieves.jpg');
+
+        // THEN: A thumbnail with the bot reply should show.
+        await pageConditions.allOutgoingActivitiesSent();
+        await pageConditions.numActivitiesShown(2);
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/__image_snapshots__/html/on-send-js-with-send-attachment-on-of-send-should-send-attachments-when-the-send-button-is-clicked-2-snap.png

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('with "sendAttachmentOn" of "attach"', () => {
+  test('should send attachments when the file is attached', () => runHTML('sendAttachmentOn/onAttach'));
+});

__tests__/__image_snapshots__/html/simple-js-with-send-attachment-on-unset-should-send-attachments-when-the-send-button-is-clicked-1-snap.png

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <link href="focus-indicator.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
+        const store = testHelpers.createStore();
+
+        WebChat.renderWebChat(
+          { directLine, store, styleOptions: { sendAttachmentOn: 'send' } },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // WHEN: Upload button is clicked and a JPEG file is selected.
+        await host.upload(pageElements.uploadButton(), 'seaofthieves.jpg');
+
+        // THEN: A checkmark should show next to the "upload button".
+        await host.snapshot();
+
+        // WHEN: Send button is clicked.
+        await host.click(pageElements.sendButton());
+
+        // THEN: A thumbnail with the bot reply should show.
+        await pageConditions.allOutgoingActivitiesSent();
+        await pageConditions.numActivitiesShown(2);
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/__image_snapshots__/html/simple-js-with-send-attachment-on-unset-should-send-attachments-when-the-send-button-is-clicked-2-snap.png

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('with "sendAttachmentOn" of "send"', () => {
+  test('should send attachments when the send button is clicked', () => runHTML('sendAttachmentOn/onSend'));
+});

__tests__/__image_snapshots__/chrome-docker/upload-js-upload-a-picture-without-web-worker-1-snap.png __tests__/__image_snapshots__/html/simple-js-without-web-worker-upload-a-picture-without-web-worker-should-send-1-snap.png

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <link href="focus-indicator.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
+        const store = testHelpers.createStore();
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        // WHEN: Upload button is clicked and a JPEG file is selected.
+        await host.upload(pageElements.uploadButton(), 'seaofthieves.jpg');
+
+        // THEN: A checkmark should show next to the "upload button".
+        await host.snapshot();
+
+        // WHEN: Send button is clicked.
+        await host.click(pageElements.sendButton());
+
+        // THEN: A thumbnail with the bot reply should show.
+        await pageConditions.allOutgoingActivitiesSent();
+        await pageConditions.numActivitiesShown(2);
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/__image_snapshots__/html/simple-keyboard-only-js-with-send-attachment-on-unset-and-use-keyboard-for-the-flow-should-send-attachments-when-the-send-button-is-clicked-1-snap.png

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('with "sendAttachmentOn" unset', () => {
+  test('should send attachments when the send button is clicked', () => runHTML('sendAttachmentOn/simple'));
+});

__tests__/__image_snapshots__/html/simple-keyboard-only-js-with-send-attachment-on-unset-and-use-keyboard-for-the-flow-should-send-attachments-when-the-send-button-is-clicked-2-snap.png

@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <link href="focus-indicator.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
+        const store = testHelpers.createStore();
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        pageElements.sendBoxTextBox().focus();
+
+        // WHEN: SHIFT TAB key is pressed.
+        await host.sendShiftTab();
+
+        // THEN: Should focus on the upload button.
+        await host.snapshot();
+
+        // WHEN: Upload button is clicked and a JPEG file is selected.
+        // Notes: WebDriver does not support testing against the native file chooser dialog.
+        await host.upload(pageElements.uploadButton(), 'seaofthieves.jpg');
+
+        // THEN: A checkmark should show next to the "upload button".
+        await host.snapshot();
+
+        // WHEN: TAB key is pressed.
+        await host.sendTab();
+
+        // THEN: Should focus on the send button.
+        await host.snapshot();
+
+        // WHEN: SPACEBAR key is pressed.
+        await host.sendKeys(' ');
+
+        // THEN: A thumbnail with the bot reply should show.
+        await pageConditions.allOutgoingActivitiesSent();
+        await pageConditions.numActivitiesShown(2);
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/__image_snapshots__/html/simple-keyboard-only-js-with-send-attachment-on-unset-and-use-keyboard-for-the-flow-should-send-attachments-when-the-send-button-is-clicked-3-snap.png

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('with "sendAttachmentOn" unset and use keyboard for the flow', () => {
+  test('should send attachments when the send button is clicked', () => runHTML('sendAttachmentOn/simple.keyboardOnly'));
+});