microsoft · compulim · May 28, 2025 · Apr 19, 2025 · Apr 19, 2025 · Apr 19, 2025
@@ -45,6 +45,15 @@ A curated list of major achievements by the Web Chat team. This document celebra
 
 ## 🎨 UI & Theming
 
+### 📎 Attachment Preview for `sendAttachmentOn: "send"`
+
+**Goal:** Improve multi-file upload UX by introducing persistent attachment previews.  
+**By:** [@compulim](https://github.com/compulim) in [PR #5464](https://github.com/microsoft/BotFramework-WebChat/pull/5464)
+
+- Added `SendBoxAttachmentBar` to allow users to preview and remove attachments before sending.
+- Previews switch between thumbnails and list mode based on count and accessibility settings.
+- Enhances multi-folder upload workflows and aligns with modern messaging UX.
+
 ### 🧾 Code Block Rendering & Highlighting System
 
 **Goal:** Unify and polish code block rendering across Markdown and UI components.  

@@ -92,6 +92,8 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    - Existing behavior will be kept and activities will be grouped by `sender` followed by `status`
    - `useGroupActivitiesByName` is favored over the existing `useGroupActivities` hook for performance reason
    - Middleware which support the new grouping name init argument should only compute the grouping if they match the grouping name, or the grouping name is not specified, otherwise, should do nothing and call the downstream middleware
+- Resolved [#5463](https://github.com/microsoft/BotFramework-WebChat/issues/5463). Added attachment preview for `sendAttachmentOn: "send"`, in PR [#5464](https://github.com/microsoft/BotFramework-WebChat/pull/5464), by [@compulim](https://github.com/compulim)
+   - Attaching files will no longer remove previously attached files
 
 ### Changed
 

@@ -54,7 +54,7 @@
           const fileReader = new FileReader();
 
           fileReader.onerror = reject;
-          fileReader.onload = () => resolve(fileReader.result);
+          fileReader.onload = () => resolve(new URL(fileReader.result));
           fileReader.readAsDataURL(thumbnailBlob);
         });
 
@@ -64,7 +64,7 @@
           useSendBoxAttachments()[1](attachmentsRef.current);
         });
 
-        // THEN: It should show checkmark on the button.
+        // THEN: It should show checkmark on the button and file preview.
         await host.snapshot();
 
         // WHEN: `useSendBoxAttachments` hook is called to get the attachments.

@@ -56,6 +56,8 @@
           await pageObjects.sendMessageViaSendBox('no avatar');
           await pageConditions.numActivitiesShown(6);
 
+          await pageConditions.allOutgoingActivitiesSent();
+
           await host.snapshot('local', { skipCheckAccessibility: true });
 
           await renderWebChat({

@@ -109,6 +109,8 @@
 
         await pageConditions.numActivitiesShown(5);
 
+        await pageConditions.allImagesLoaded();
+
         await host.snapshot('local');
       });
     </script>

@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.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 type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "@testing-library/dom": "https://esm.sh/@testing-library/dom"
+        }
+      }
+    </script>
+    <script type="module">
+      import { waitFor } from '@testduet/wait-for';
+      import { queryAllByTestId } from '@testing-library/dom';
+
+      const {
+        testHelpers: { createDirectLineEmulator },
+        WebChat: { createDirectLine, testIds }
+      } = window;
+
+      run(async function () {
+        // We enable reduced motion by default, disable it first.
+        await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
+          features: [{ name: 'prefers-reduced-motion', value: '' }]
+        });
+
+        const { directLine, store } = createDirectLineEmulator();
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        // WHEN: Upload button is clicked and a ZIP file is selected.
+        await host.upload(pageElements.uploadButton(), 'minecraftdungeons.jpg');
+
+        await waitFor(() => expect(queryAllByTestId(document, testIds.sendBoxAttachmentBarItem)).toHaveLength(1));
+
+        // THEN: Should match screenshot.
+        await host.snapshot('local');
+
+        // WHEN: Press ENTER key.
+        const { resolveAll } = await directLine.actPostActivity(async () => {
+          await host.sendKeys('ENTER');
+        });
+
+        // THEN: Should clear attachments.
+        await waitFor(() => expect(queryAllByTestId(document, testIds.sendBoxAttachmentBarItem)).toHaveLength(0));
+
+        // THEN: Should match screenshot.
+        await host.snapshot('local');
+
+        // WHEN: After attachment is sent.
+        await resolveAll();
+
+        // THEN: Should show the activity.
+        await pageConditions.numActivitiesShown(1);
+
+        // THEN: Should match screenshot.
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.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 type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "@testing-library/dom": "https://esm.sh/@testing-library/dom"
+        }
+      }
+    </script>
+    <script type="module">
+      import { waitFor } from '@testduet/wait-for';
+      import { queryAllByTestId } from '@testing-library/dom';
+
+      const {
+        testHelpers: { createDirectLineEmulator },
+        WebChat: { createDirectLine, testIds }
+      } = window;
+
+      run(async function () {
+        // We enable reduced motion by default, disable it first.
+        await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
+          features: [{ name: 'prefers-reduced-motion', value: '' }]
+        });
+
+        const { directLine, store } = createDirectLineEmulator();
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        // WHEN: Upload button is clicked and a ZIP file is selected.
+        await host.upload(pageElements.uploadButton(), 'minecraftdungeons.jpg');
+
+        await waitFor(() => expect(queryAllByTestId(document, testIds.sendBoxAttachmentBarItem)).toHaveLength(1));
+
+        // WHEN: Press SHIFT-TAB key twice to move the focus to the delete button.
+        await host.sendShiftTab(2);
+
+        // THEN: Should focus on the attachment delete button.
+        expect(document.activeElement.getAttribute('data-testid')).toBe(testIds.sendBoxAttachmentBarItemDeleteButton);
+
+        // WHEN: Press SPACEBAR key.
+        await host.sendKeys(' ');
+
+        // THEN: The attachment should be removed.
+        await waitFor(() => expect(queryAllByTestId(document, testIds.sendBoxAttachmentBarItem)).toHaveLength(0));
+
+        // THEN: Should focus on the send box text box.
+        expect(document.activeElement).toBe(pageElements.sendBoxTextBox());
+
+        // THEN: Should match screenshot.
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.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 type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "@testing-library/dom": "https://esm.sh/@testing-library/dom"
+        }
+      }
+    </script>
+    <script type="module">
+      import { waitFor } from '@testduet/wait-for';
+      import { queryAllByTestId } from '@testing-library/dom';
+
+      const {
+        testHelpers: { createDirectLineEmulator },
+        WebChat: { createDirectLine, testIds }
+      } = window;
+
+      run(async function () {
+        // We enable reduced motion by default, disable it first.
+        await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
+          features: [{ name: 'prefers-reduced-motion', value: '' }]
+        });
+
+        const { directLine, store } = createDirectLineEmulator();
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        // WHEN: 4 files are uploaded.
+        for (const filename of ['seaofthieves.jpg', 'forzahorizon5.jpg', 'haloinfinite.jpg', 'minecraftdungeons.jpg']) {
+          const { length: numAttachment } = queryAllByTestId(document, testIds.sendBoxAttachmentBarItem);
+
+          await host.upload(pageElements.uploadButton(), filename);
+
+          await waitFor(() =>
+            expect(queryAllByTestId(document, testIds.sendBoxAttachmentBarItem)).toHaveLength(numAttachment + 1)
+          );
+        }
+
+        // WHEN: Press SHIFT-TAB key 5 times to move the focus to the delete button of the first attachment.
+        await host.sendShiftTab(5);
+
+        // THEN: Should focus on the attachment delete button of the first attachment.
+        expect(document.activeElement).toBe(pageElements.allByTestId(testIds.sendBoxAttachmentBarItemDeleteButton)[0]);
+
+        // WHEN: Press SPACEBAR key.
+        await host.sendKeys(' ');
+
+        // THEN: The attachment should be removed.
+        await waitFor(() => expect(queryAllByTestId(document, testIds.sendBoxAttachmentBarItem)).toHaveLength(3));
+
+        // THEN: Should focus on the send box text box.
+        expect(document.activeElement).toBe(pageElements.sendBoxTextBox());
+
+        // THEN: Should match screenshot.
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.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 type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "@testing-library/dom": "https://esm.sh/@testing-library/dom"
+        }
+      }
+    </script>
+    <script type="module">
+      import { waitFor } from '@testduet/wait-for';
+      import { queryAllByTestId } from '@testing-library/dom';
+
+      const {
+        testHelpers: { createDirectLineEmulator },
+        WebChat: { createDirectLine, testIds }
+      } = window;
+
+      run(async function () {
+        // We enable reduced motion by default, disable it first.
+        await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
+          features: [{ name: 'prefers-reduced-motion', value: '' }]
+        });
+
+        const { directLine, store } = createDirectLineEmulator();
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        // WHEN: Upload button is clicked and a ZIP file is selected.
+        await host.upload(pageElements.uploadButton(), 'minecraftdungeons.jpg');
+
+        await waitFor(() => expect(queryAllByTestId(document, testIds.sendBoxAttachmentBarItem)).toHaveLength(1));
+
+        // WHEN: Press TAB key twice to move the focus to the delete button.
+        await host.sendShiftTab(2);
+
+        // THEN: Should focus on the attachment delete button.
+        expect(document.activeElement).toBe(pageElements.allByTestId(testIds.sendBoxAttachmentBarItemDeleteButton)[0]);
+
+        // THEN: Should match screenshot.
+        await host.snapshot('local');
+
+        // WHEN: Press ESCAPE key.
+        await host.sendKeys('ESCAPE');
+
+        // THEN: Should focus on the send box text box.
+        expect(document.activeElement).toBe(pageElements.sendBoxTextBox());
+
+        // THEN: Should match screenshot.
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.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 type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "@testing-library/dom": "https://esm.sh/@testing-library/dom"
+        }
+      }
+    </script>
+    <script type="module">
+      import { waitFor } from '@testduet/wait-for';
+      import { queryAllByTestId } from '@testing-library/dom';
+
+      const {
+        testHelpers: { createDirectLineEmulator },
+        WebChat: { createDirectLine, testIds }
+      } = window;
+
+      run(async function () {
+        // We enable reduced motion by default, disable it first.
+        await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
+          features: [{ name: 'prefers-reduced-motion', value: '' }]
+        });
+
+        const { directLine, store } = createDirectLineEmulator();
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        // WHEN: Upload button is clicked and a ZIP file is selected.
+        await host.upload(pageElements.uploadButton(), 'empty.zip');
+
+        await waitFor(() => expect(queryAllByTestId(document, testIds.sendBoxAttachmentBarItem)).toHaveLength(1));
+
+        // THEN: With 3 attachments, they should appear as thumbnails.
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>