Add styleOptions.sendBoxAttachmentBarMaxHeight

compulim · compulim · commit 8b4ce2f4c57e · 2025-05-19T20:25:50.000Z
diff --git a/__tests__/html2/sendBox/previewBeforeSend/styleOptions.maxHeight.html b/__tests__/html2/sendBox/previewBeforeSend/styleOptions.maxHeight.html
@@ -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();
+
+        function render(props) {
+          WebChat.renderWebChat(
+            {
+              directLine,
+              store,
+              ...props
+            },
+            document.getElementById('webchat')
+          );
+        }
+
+        render();
+
+        await pageConditions.uiConnected();
+
+        for (let index = 0; index < 10; index++) {
+          await host.upload(pageElements.uploadButton(), 'empty.zip');
+
+          await waitFor(() =>
+            expect(queryAllByTestId(document, testIds.sendBoxAttachmentBarItem)).toHaveLength(index + 1)
+          );
+        }
+
+        // THEN: With 1 attachment, they should appear as text-only.
+        await host.snapshot('local');
+
+        // WHEN: styleOptions.sendBoxAttachmentBarMaxHeight is set to 200px.
+        render({ styleOptions: { sendBoxAttachmentBarMaxHeight: 200 } });
+
+        // THEN: With 1 attachment, they should appear as text-only.
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/sendBox/previewBeforeSend/styleOptions.maxHeight.html.snap-1.png b/__tests__/html2/sendBox/previewBeforeSend/styleOptions.maxHeight.html.snap-1.png
diff --git a/__tests__/html2/sendBox/previewBeforeSend/styleOptions.maxHeight.html.snap-2.png b/__tests__/html2/sendBox/previewBeforeSend/styleOptions.maxHeight.html.snap-2.png
diff --git a/packages/api/src/StyleOptions.ts b/packages/api/src/StyleOptions.ts
@@ -964,6 +964,14 @@ type StyleOptions = {
 
   /**
    * Send box: maximum number of attachment item to preview as thumbnail before showing as text-only.
+   * Send box: maximum height of the attachment bar.
+   *
+   * @default 114
+   */
+  sendBoxAttachmentBarMaxHeight?: number;
+
+  /**
+   * Send box: maximum number of attachment item to preview as thumbnail before showing as list item.
    *
    * @default 3
    */
diff --git a/packages/api/src/defaultStyleOptions.ts b/packages/api/src/defaultStyleOptions.ts
@@ -314,6 +314,7 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   groupActivitiesBy: ['sender', 'status'],
 
   // Send box attachment bar
+  sendBoxAttachmentBarMaxHeight: 114,
   sendBoxAttachmentBarMaxThumbnail: 3
 };
 
diff --git a/packages/component/src/SendBox/AttachmentBar/AttachmentBarStyle.ts b/packages/component/src/SendBox/AttachmentBar/AttachmentBarStyle.ts
@@ -1,13 +1,13 @@
 import { StrictStyleOptions } from 'botframework-webchat-api';
 import { type StyleSet } from '../../Styles/StyleSet/types/StyleSet';
 
-export default function createSendBoxAttachmentBarStyle(_: StrictStyleOptions) {
+export default function createSendBoxAttachmentBarStyle({ sendBoxAttachmentBarMaxHeight }: StrictStyleOptions) {
   return {
     '&.webchat__send-box-attachment-bar': {
       display: 'content',
 
       '&.webchat__send-box-attachment-bar--as-list-item': {
-        maxHeight: '114px',
+        maxHeight: `${sendBoxAttachmentBarMaxHeight}px`,
         overflowY: 'auto',
         scrollbarGutter: 'stable',
         scrollbarWidth: 'thin'
