[Fluent theme] Add Fluent SendBox #5122

OEvgeny · 2024-04-04T19:00:05Z

Changelog Entry

Breaking changes

useSuggestedActions type is updated to align with its actual implementation, by @OEvgeny, in PR #5122

Added

(Experimental) Added botframework-webchat-fluent-theme package for applying Fluent UI theme to Web Chat, by @compulim and @OEvgeny, in PR #5120
- Inherits Fluent CSS palette if available, in PR #5122
- New send box with Fluent look-and-feel, in PR #5122
  - styleOptions.maxMessageLength to specify maximum length of the outgoing message
- Drag-and-drop file support, in PR #5122
- Added telephone keypad (DTMF keypad), in PR #5122
Added useMakeThumbnail hook option to create a thumbnail from the file given, by @compulim, in PR #5123 and #5122

Description

Added the SendBox, DropZone, SuggestedActions and TelephoneKeypad components into botframework-fluent-theme package. The package now includes initial implementation of the new sedbox experience.

Design

Specific Changes

Added the following localization keys
- TEXT_INPUT_DROP_ZONE
- TEXT_INPUT_LENGTH_EXCEEDED_ALT
- TEXT_INPUT_ATTACHMENTS_FEW
- TEXT_INPUT_ATTACHMENTS_MANY
- TEXT_INPUT_ATTACHMENTS_ONE
- TEXT_INPUT_ATTACHMENTS_OTHER
- TEXT_INPUT_ATTACHMENTS_TWO
Exposed useMakeThumbnail hook
Implemented DropZone, SendBox, SuggestedActions and TelephoneKeypad components for the new WebChat Fluent experience
Added fluent-theme package bundle containing Fluent related WebChat adjustments
Added testIds for the new components to make testing webchat easier

I have added tests and executed them locally
I have updated CHANGELOG.md
I have updated documentation

Review Checklist

This section is for contributors to review your work.

~~Accessibility reviewed (tab order, content readability, alt text, color contrast)~~
~~Browser and platform compatibilities reviewed~~
~~CSS styles reviewed (minimal rules, no z-index)~~
~~Documents reviewed (docs, samples, live demo)~~
~~Internationalization reviewed (strings, unit formatting)~~
package.json and package-lock.json reviewed
~~Security reviewed (no data URIs, check for nonce leak)~~
~~Tests reviewed (coverage, legitimacy)~~

packages/api/src/localization/en-US.json

packages/fluent-theme/src/components/Theme.tsx

packages/fluent-theme/src/components/sendbox/Attachments.tsx

packages/fluent-theme/src/components/sendbox/Sendbox.tsx

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

- focus back tests - auto-resize tests - max-length tests

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

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

Reorganize modules to follow estabilished conventions

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

compulim · 2024-04-11T08:23:21Z

This is experimental and work-in-progress. We will continue to work on the Fluent theme pack until it is ready for broader consumption.