[Fluent theme] [P0] Add Fluent theme pack

[compulim]

Changelog Entry

Added

• Added sendBoxMiddleware and sendBoxToolbarMiddleware, by @compulim, in PR #5120
• Added botframework-webchat-fluent-theme package for applying Fluent UI theme to Web Chat, by @compulim, in PR #5120
• Added <ThemeProvider> component to apply theme pack to Web Chat, by @compulim, in PR #5120

Description

Apply a preset of middleware and style options in the following order: props > theme > default.

import { createRoot } from 'react-dom/client';
import ReactWebChat, { Components } from 'botframework-webchat';

const { ThemeProvider } = Components;

createRoot(
  <ThemeProvider styleOptions={{ bubbleBackground: '#fee' }}>
    <ReactWebChat {...props} />
  </ThemeProvider>,
  document.getElementByTagNames('main')[0]
);

Design

• <ThemeProvider> is outside of Web Chat
  • <ThemeProvider> must not use any Web Chat hooks that requires <Composer>
• <ThemeProvider> can be applied at page-level, or just outer of <ReactWebChat>
• <ThemeProvider> can be nested/cascaded
• Whitelisted props from <Composer> only
  • Limit what we allow/expose, simpler logics and a "cleanup" of what we have today
  • Some props have different mixing/merging logic than other props
    • Middleware merge as array
    • Style options merge as object
• Need to merge/expose at component package because it is where the default middleware is introduced
  • We need to inject the theme in this order: props > theme > default
  • We need to inject at a package that contains both props and default, i.e. the component package
  • Hope to see if we can do it at api package, because it feels more neutral, P1/P2
    • component package means React HTML
    • api package means React, that could mean React HTML or React Native
    • Providing a theme, is a neutral task (the themed content is unlikely to be neutral though)
• Added sendBoxMiddleware and sendBoxToolbarMiddleware
• Added botframework-webchat-fluent-theme package and wired visual regression tests

Specific Changes

• Added botframework-webchat-fluent-theme package and wired visual regression tests
• Added sendBoxMiddleware and sendBoxToolbarMiddleware
  • <BasicSendBox> will be the default of sendBoxMiddleware
  • <UploadButton> will be the default of sendBoxToolbarMiddleware
• Added <ThemeProvider> in botframework-webchat-component so it will merge props in <Component.Composer>
  • Later, we should move <ThemeProvider> to API to broaden theme support

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