Add attachment bar for preview upload (#5464)

* Upgrade tests

* Use test ID

* Adding attachment bar

* Upload multiple files

* Rename

* Add more text-only test case

* Add text only style

* Scroll into view

* Allow container/media query and custom variables

* Fit and finish

* Trim bar padding

* Support reduced motion

* Add escape key focus

* Add tests

* Add file preview thumbnail

* Refactor styleSet

* Bigger delete icon

* Add test for ESCAPE key

* Add test for delete button

* Fix extra bottom padding

* Add test for delete in text mode

* Focus on text box after attachment is deleted

* Add clear after send test

* No line break

* 16x16 icon

* Add accessibility labels

* Add styleOptions

* Rename to as-list-item and as-thumbnail

* Fix padding

* Use test ID

* Clean up

* Add entry

* Add issue number

* Fix class naem

* Add styleOptions.sendBoxAttachmentBarMaxHeight

* Update PR number

* Make attachment bar full width

* Fix test

* Fix empty attachment bar

* Add preview

* Fix flaky test

* Fix screenshot for full-width attachment bar

* Fix screenshot for full-width attachment bar

* Remove propTypes

* Update prop checking

* Upgrade to valibot for props validation

* Fix flaky

* Add dark mode test for delete button

* Incorporate suggestions

* Use #region/#endregion

* Remove center after move to masker

* Remove display: content

* Adds <ModdableIcon>

* Use moddable icon

* Use icon size

* Move attachment bar to top

* Fix test for moving attachment bar above send box

* Fix test

* Fix button size

* Fix delete icon size

* Add achievement

---------

Co-authored-by: Eugene <EOlonov@gmail.com>

Author: compulim

ACHIEVEMENTS.md

@@ -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.  

CHANGELOG.md

@@ -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