Fluent: use grid for sendbox layout

[OEvgeny]

Changelog Entry

• (Experimental) Added botframework-webchat-fluent-theme package for applying Fluent UI theme to Web Chat, by @compulim and @OEvgeny
  • Disabled send button and hid message length when telephone keypad is shown, in PR #5136

Description

The PR enables advanced layout for the experimental Fluent send box experience, also fixing some small issues found along the way.

Design

We now use named areas to manipulate the positioning for telephone-keypad, text-area, attachment and controls. These areas can then be remapped using CSS to achieve different layouting options.

To avoid double gaps we conditionally add the attachment area only when the corresponding to the area class is present.

Specific Changes

• Disable Send button when telephone keypad is shown
• Hide message length when telephone keypad is shown
• Rework sendbox grid implementation
• Add tests

• 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)