Add Fluent SendBox (#5122)

* [WIP] Add Fluent package

* TEXT_INPUT_DROPZONE ->  TEXT_INPUT_DROP_ZONE

* classnames -> classNames

* Add more Readonly to the god of reaonly

* Sort

* Sort style properties asc

* Specify deps

* DropZone to own file

* Remove <span> tag

* dropzone -> drop-zone

* AttachmentDropZone -> DropZone

* webchat__sendbox__root -> webchat__sendbox

* Naming and freezing

* Forbid arbitrary props

* webchat__ -> webchat-fluent__

* disabled -> aria-disabled

* Use native form

* DialpadIcon -> TelephoneKeypadIcon

* Readonly<T> -> readonly

* useStlyeToEmotionObject -> useStyleToEmotionObject

* Add message length exceeded aria

* TEXT_INPUT_DIALPAD_BUTTON_ALT -> TEXT_INPUT_TELEPHON_KEYPAD_BUTTON_ALT

* integration: sendMessage

* integration: SuggestedActions

* Remove unnecessary readonly

* milestone: passing build

* Remove unused types

* Redo import UMD

* Remove obsolate tsconfig

* Fix attachments types

* Rework attachments display

* Add attachment counter test

* Always use latest attachments

* Respect style options for file upload

* Remove empty space

* Add tests

* Fix aria-label

* Typo and aria-label

* Fix aria-label

* Add padding around send box

* Add connectivity status test

* Rename aria-label

* Add suggested actions test

* Add padding

* Rename umd

* Add data-testid

* Add send on ENTER key test

* Add send button click test

* Add useRefFrom for useCallback

* Use useSendBoxAttachments

* Sort

* Simplify ToolbarButton props.type

* Use button.type

* Refactor DropZone components

* Remove red color

* Rename to <WebChatTheme>

* TextArea improvements:
- New line on Shift+Enter
- Submit on Enter
- Fix form submission
- Added missing props

* Fix drop zone and add droppable class

* SuggestedActions and more:
- SuggestedActions work
- SuggestedActions are styled
- SuggestedActions are splitted from SendBox
- Use memo for all components

* TextArea: padding and rows
- Added configurable startRows to set initial row count
- Set startRows default to 1
- Remove unwanted textarea padding

* SendBox: Add ErrorMessage for connect and empty
- Added useSubmitError hook to check for empty sendbox and connection issues
- Copied useUniqueId hook to provide id for error message alert
- Added ErrorMessage component to render hidden message
- Integrated everything into SendBox component

* Add drag and drop test

* Fix drag over icon

* SendBox: focus back on the input
- Only empty message error now prevents from sending
- Focus message textbox after empty message error
- Focus message textbox after sucessfully sent

* Theme: better align with Design Brand colors

* SuggestedActions: move icon one pixel to the top

We have asymmetrical vertical padding for suggested action balloon, this
change centers icon in the balloon by moving it 1px above its calculated position

* CodeStyle: prefer not to use erly return

* Self bugbash
- Hide input on Safari/Webkit
- Remove gap created by ErrorMessage
- Fix typos

* Fix: SuggestedActions types

Fixed useSuggestedActions: it returns an array of DirectLineCardAction and
a setter which accepts only empty array

* SendBox: wire maxMessageLength
- Added maxMessageLength into styleOptions with default value 2000
- Implemented in SendBox

* Toolbar: fix disabled button is clickable

* SendBox: update simple snapshot

* Adding new vars

* Tests: enable tests and add more
- focus back tests
- auto-resize tests
- max-length tests

* SendBox: fix able to send form with Enter when maxLength exceeded

Added a check to respect message length setting when sending the
form via Enter key

* TextBox: fix doppelganger width

While doppelganger isn't scrollable it should use the same scroll
styles as the textarea to avoid any discrepancies

* Tests: fix host.sendKeys usage

* Add telephone keypad

* Theme: prefix webchat variables and fallback to fluent if present

* Tests: rollback unwanted

* Test: disable problematic activeElement check for now

* AddAttachmentButton: remove unused icon prop

* SendBox: reorganize modules

Reorganize modules to follow estabilished conventions

* AddAttachmentsButton: remove unused import

* Localize: remove TODO and fix localization docs

* ESCAPE key to close DTMF keypad

* Add more test

* Styles: avoid lint warnings

The nonce is not a dependency as it is defined in the module scope

* Reduce height when hiding

* Add test entrypoints

* Add entry

* Add entry

---------

Co-authored-by: William Wong <[email protected]>

Author: OEvgeny

CHANGELOG.md

@@ -26,16 +26,23 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 -  `useSendMessage` hook is updated to support sending attachments with a message. To reduce complexity, the `useSendFiles` hook is being deprecated. The hook will be removed on or after 2026-04-03
 -  `styleOptions.uploadThumbnailHeight` and `styleOptions.uploadThumbnailWidth` must be a `number` of pixels
+-  `useSuggestedActions` type is updated to align with its actual implementation, by [@OEvgeny](https://github.com/OEvgeny), in PR [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)
 
 ### Added
 
--  Resolves [#5083](https://github.com/microsoft/BotFramework-WebChat/issues/5083). Added `sendAttachmentOn` style option to send attachments and text in a single activity, by [@ms-jb](https://github.com/ms-jb) and [@compulim](https://github.com/compulim)
+-  Resolves [#5083](https://github.com/microsoft/BotFramework-WebChat/issues/5083). Added `sendAttachmentOn` style option to send attachments and text in a single activity, by [@ms-jb](https://github.com/ms-jb) and [@compulim](https://github.com/compulim), in PR [#5123](https://github.com/microsoft/BotFramework-WebChat/pull/5123)
    -  `useSendMessage` hook is updated to support sending attachments with a message
    -  `useSendBoxAttachments` hook is added to get/set attachments in the send box
 -  Resolves [#5081](https://github.com/microsoft/BotFramework-WebChat/issues/5081). Added `uploadAccept` and `uploadMultiple` style options, by [@ms-jb](https://github.com/ms-jb), in PR [#5048](https://github.com/microsoft/BotFramework-WebChat/pull/5048)
 -  Added `sendBoxMiddleware` and `sendBoxToolbarMiddleware`, by [@compulim](https://github.com/compulim), in PR [#5120](https://github.com/microsoft/BotFramework-WebChat/pull/5120)
--  Added `botframework-webchat-fluent-theme` package for applying Fluent UI theme to Web Chat, by [@compulim](https://github.com/compulim), in PR [#5120](https://github.com/microsoft/BotFramework-WebChat/pull/5120)
+-  (Experimental) Added `botframework-webchat-fluent-theme` package for applying Fluent UI theme to Web Chat, by [@compulim](https://github.com/compulim) and [@OEvgeny](https://github.com/OEvgeny), in PR [#5120](https://github.com/microsoft/BotFramework-WebChat/pull/5120)
+   -  Inherits Fluent CSS palette if available, in PR [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)
+   -  New send box with Fluent look-and-feel, in PR [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)
+      -  `styleOptions.maxMessageLength` to specify maximum length of the outgoing message
+   -  Drag-and-drop file support, in PR [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)
+   -  Added telephone keypad (DTMF keypad), in PR [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)
 -  Added `<ThemeProvider>` component to apply theme pack to Web Chat, by [@compulim](https://github.com/compulim), in PR [#5120](https://github.com/microsoft/BotFramework-WebChat/pull/5120)
+-  Added `useMakeThumbnail` hook option to create a thumbnail from the file given, by [@compulim](https://github.com/compulim), in PR [#5123](https://github.com/microsoft/BotFramework-WebChat/pull/5123) and [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)
 
 ### Fixed
 

__tests__/__image_snapshots__/html/attach-file-js-fluent-theme-applied-attach-a-single-file-1-snap.png

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.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>
+    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel">
+      run(async function () {
+        const {
+          React,
+          ReactDOM: { render },
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const App = () => <ReactWebChat directLine={directLine} locale="yue" store={store} />;
+
+        render(
+          <FluentThemeProvider>
+            <App />
+          </FluentThemeProvider>,
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await pageObjects.uploadFile('seaofthieves.jpg');
+
+        await pageConditions.became(
+          'attachment count change to 1',
+          () => {
+            try {
+              // It seems "yue" doesn't use plural form of "one".
+              expect(document.querySelector('.webchat-fluent__sendbox__attachment').textContent.trim()).toBe(
+                '1 件附件'
+              );
+
+              return true;
+            } catch {
+              return false;
+            }
+          },
+          1000
+        );
+
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/__image_snapshots__/html/attach-multiple-files-js-fluent-theme-applied-attach-multiple-files-1-snap.png

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Fluent theme applied', () => {
+  test('attach a single file', () => runHTML('fluentTheme/attachFile'));
+});

__tests__/__image_snapshots__/html/auto-resize-js-fluent-theme-applied-textbox-auto-resize-1-snap.png

@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.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>
+    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel">
+      run(async function () {
+        const {
+          React,
+          ReactDOM: { render },
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const App = () => (
+          <ReactWebChat
+            activityMiddleware={testHelpers.createRunHookActivityMiddleware()}
+            directLine={directLine}
+            store={store}
+          />
+        );
+
+        render(
+          <FluentThemeProvider>
+            <App />
+          </FluentThemeProvider>,
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        const blob1 = new File(
+          [
+            await (
+              await fetch(
+                'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface1.jpg'
+              )
+            ).blob()
+          ],
+          'surface1.jpg',
+          { type: 'image/jpeg' }
+        );
+
+        const blob2 = new File(
+          [
+            await (
+              await fetch(
+                'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface2.jpg'
+              )
+            ).blob()
+          ],
+          'surface2.jpg',
+          { type: 'image/jpeg' }
+        );
+
+        await pageObjects.runHook(({ useSendBoxAttachments }) =>
+          useSendBoxAttachments()[1]([{ blob: blob1 }, { blob: blob2 }])
+        );
+
+        await pageConditions.became(
+          'attachment count change to 2',
+          () => {
+            try {
+              expect(document.querySelector('.webchat-fluent__sendbox__attachment').textContent.trim()).toBe(
+                '2 attachments'
+              );
+
+              return true;
+            } catch {
+              return false;
+            }
+          },
+          1000
+        );
+
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/__image_snapshots__/html/auto-resize-js-fluent-theme-applied-textbox-auto-resize-2-snap.png

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Fluent theme applied', () => {
+  test('attach multiple files', () => runHTML('fluentTheme/attachMultipleFiles'));
+});

__tests__/__image_snapshots__/html/auto-resize-js-fluent-theme-applied-textbox-auto-resize-3-snap.png

@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.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>
+    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel">
+      run(async function () {
+        const {
+          React,
+          ReactDOM: { render },
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const App = () => <ReactWebChat directLine={directLine} store={store} />;
+
+        render(
+          <FluentThemeProvider>
+            <App />
+          </FluentThemeProvider>,
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity(
+          'Eiusmod anim adipisicing cupidatat adipisicing officia sint qui consequat veniam id aute.'
+        );
+
+        await pageConditions.numActivitiesShown(1);
+        document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`).focus();
+
+        // With new lines
+        document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`).value = ['One', 'Two', 'Three'].join('\n');
+        await host.sendKeys(' ');
+        await host.snapshot();
+
+        // With a single long line
+        document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`).value = '';
+        await host.sendKeys('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris '.repeat(2));
+        await host.snapshot();
+
+        // With a scroll-bar when passed 10 lines
+        document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`).value += ['', 'One', 'Two', 'Three'].join('\n');
+        await host.sendKeys(' ');
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/__image_snapshots__/html/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-1-snap.png

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Fluent theme applied', () => {
+  test('textbox auto resize', () => runHTML('fluentTheme/autoResize'));
+});

__tests__/__image_snapshots__/html/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-2-snap.png

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.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>
+    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel">
+      run(async function () {
+        const {
+          React,
+          ReactDOM: { render },
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator({ autoConnect: false });
+
+        const App = () => <ReactWebChat directLine={directLine} store={store} />;
+
+        render(
+          <FluentThemeProvider>
+            <App />
+          </FluentThemeProvider>,
+          document.getElementById('webchat')
+        );
+
+        // THEN: Should render the activity.
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>