botframework-webchat-api 4.18.2 → 4.19.0

package/src/hooks/Composer.tsx

@@ -1,3 +1,12 @@
+import { GraphProvider } from '@msinternal/botframework-webchat-api-graph';
+import { PolymiddlewareComposer, type Polymiddleware } from '@msinternal/botframework-webchat-api-middleware';
+import {
+  type LegacyActivityMiddleware,
+  type LegacyAttachmentMiddleware
+} from '@msinternal/botframework-webchat-api-middleware/legacy';
+import { isPlainObject, singleToArray, type OneOrMany } from '@msinternal/botframework-webchat-base/utils';
+import { useMemoIterable } from '@msinternal/botframework-webchat-react-hooks';
+import { ReduxStoreComposer } from '@msinternal/botframework-webchat-redux-store';
 import {
   clearSuggestedActions,
   connect as createConnectAction,
@@ -20,15 +29,15 @@ import {
   setSendBoxAttachments,
   setSendTimeout,
   setSendTypingIndicator,
-  singleToArray,
   startDictate,
   startSpeakingActivity,
+  startVoiceRecording,
   stopDictate,
   stopSpeakingActivity,
+  stopVoiceRecording,
   submitSendBox,
   type DirectLineJSBotConnection,
   type GlobalScopePonyfill,
-  type OneOrMany,
   type WebChatActivity
 } from 'botframework-webchat-core';
 import PropTypes from 'prop-types';
@@ -36,24 +45,34 @@ import React, { useCallback, useEffect, useMemo, useRef, useState, type ReactNod
 import { Provider } from 'react-redux';
 import updateIn from 'simple-update-in';
 
-import StyleOptions from '../StyleOptions';
+import { type StyleOptions } from '../StyleOptions';
+import errorBoxTelemetryPolymiddleware from '../errorBox/errorBoxTelemetryPolymiddleware';
+import PrecompiledGlobalize from '../external/PrecompiledGlobalize';
 import usePonyfill from '../hooks/usePonyfill';
+import createActivityPolymiddlewareFromLegacy from '../legacy/createActivityPolymiddlewareFromLegacy';
+import createAvatarPolymiddlewareFromLegacy from '../legacy/createAvatarPolymiddlewareFromLegacy';
 import getAllLocalizedStrings from '../localization/getAllLocalizedStrings';
-import normalizeStyleOptions from '../normalizeStyleOptions';
-import patchStyleOptionsFromDeprecatedProps from '../patchStyleOptionsFromDeprecatedProps';
+import { SendBoxMiddlewareProvider, type SendBoxMiddleware } from '../middleware/SendBoxMiddleware';
+import {
+  SendBoxToolbarMiddlewareProvider,
+  type SendBoxToolbarMiddleware
+} from '../middleware/SendBoxToolbarMiddleware';
 import ActivityAcknowledgementComposer from '../providers/ActivityAcknowledgement/ActivityAcknowledgementComposer';
 import ActivityKeyerComposer from '../providers/ActivityKeyer/ActivityKeyerComposer';
 import ActivityListenerComposer from '../providers/ActivityListener/ActivityListenerComposer';
 import ActivitySendStatusComposer from '../providers/ActivitySendStatus/ActivitySendStatusComposer';
 import ActivitySendStatusTelemetryComposer from '../providers/ActivitySendStatusTelemetry/ActivitySendStatusTelemetryComposer';
 import ActivityTypingComposer from '../providers/ActivityTyping/ActivityTypingComposer';
+import CapabilitiesComposer from '../providers/Capabilities/CapabilitiesComposer';
+import GroupActivitiesComposer from '../providers/GroupActivities/GroupActivitiesComposer';
 import PonyfillComposer from '../providers/Ponyfill/PonyfillComposer';
-import ActivityMiddleware from '../types/ActivityMiddleware';
+import { SpeechToSpeechComposer } from '../providers/SpeechToSpeech/SpeechToSpeechComposer';
+import StyleOptionsComposer from '../providers/StyleOptions/StyleOptionsComposer';
 import { type ActivityStatusMiddleware, type RenderActivityStatus } from '../types/ActivityStatusMiddleware';
 import AttachmentForScreenReaderMiddleware from '../types/AttachmentForScreenReaderMiddleware';
-import AttachmentMiddleware from '../types/AttachmentMiddleware';
 import AvatarMiddleware from '../types/AvatarMiddleware';
 import CardActionMiddleware from '../types/CardActionMiddleware';
+import { type ContextOf } from '../types/ContextOf';
 import GroupActivitiesMiddleware from '../types/GroupActivitiesMiddleware';
 import LocalizedStrings from '../types/LocalizedStrings';
 import PrecompiledGlobalizeType from '../types/PrecompiledGlobalize';
@@ -61,30 +80,25 @@ import ScrollToEndButtonMiddleware, { ScrollToEndButtonComponentFactory } from '
 import TelemetryMeasurementEvent, { TelemetryExceptionMeasurementEvent } from '../types/TelemetryMeasurementEvent';
 import ToastMiddleware from '../types/ToastMiddleware';
 import TypingIndicatorMiddleware from '../types/TypingIndicatorMiddleware';
-import { type ContextOf } from '../types/ContextOf';
 import createCustomEvent from '../utils/createCustomEvent';
-import isObject from '../utils/isObject';
 import mapMap from '../utils/mapMap';
 import normalizeLanguage from '../utils/normalizeLanguage';
-import { SendBoxMiddlewareProvider, type SendBoxMiddleware } from './internal/SendBoxMiddleware';
-import { SendBoxToolbarMiddlewareProvider, type SendBoxToolbarMiddleware } from './internal/SendBoxToolbarMiddleware';
 import Tracker from './internal/Tracker';
-import { default as WebChatAPIContext } from './internal/WebChatAPIContext';
+import WebChatAPIContext, { type WebChatAPIContextType } from './internal/WebChatAPIContext';
 import WebChatReduxContext, { useDispatch } from './internal/WebChatReduxContext';
 import defaultSelectVoice from './internal/defaultSelectVoice';
+import useVoiceHandlers from './internal/useVoiceHandlers';
+import activityFallbackPolymiddleware from './middleware/activityFallbackPolymiddleware';
 import applyMiddleware, {
   forLegacyRenderer as applyMiddlewareForLegacyRenderer,
   forRenderer as applyMiddlewareForRenderer
 } from './middleware/applyMiddleware';
 import createDefaultCardActionMiddleware from './middleware/createDefaultCardActionMiddleware';
-import createDefaultGroupActivitiesMiddleware from './middleware/createDefaultGroupActivitiesMiddleware';
 import useMarkAllAsAcknowledged from './useMarkAllAsAcknowledged';
+import useStyleOptions from './useStyleOptions';
 import ErrorBoundary from './utils/ErrorBoundary';
 import observableToPromise from './utils/observableToPromise';
-
-// PrecompileGlobalize is a generated file and is not ES module. TypeScript don't work with UMD.
-// @ts-ignore
-import PrecompiledGlobalize from '../external/PrecompiledGlobalize';
+import { parseUIState } from './validation/uiState';
 
 // List of Redux actions factory we are hoisting as Web Chat functions
 const DISPATCHERS = {
@@ -115,14 +129,16 @@ const EMPTY_ARRAY: readonly [] = Object.freeze([]);
 
 function createCardActionContext({
   cardActionMiddleware,
+  continuous,
   directLine,
   dispatch,
   markAllAsAcknowledged,
   ponyfill
 }: {
   cardActionMiddleware: readonly CardActionMiddleware[];
+  continuous: boolean;
   directLine: DirectLineJSBotConnection;
-  dispatch: Function;
+  dispatch: (...args: unknown[]) => unknown;
   markAllAsAcknowledged: () => void;
   ponyfill: GlobalScopePonyfill;
 }) {
@@ -136,6 +152,11 @@ function createCardActionContext({
     onCardAction: (cardAction, { target }: { target?: any } = {}) => {
       markAllAsAcknowledged();
 
+      // Stop speech recognition only if under interactive mode.
+      if (!continuous) {
+        dispatch(stopDictate());
+      }
+
       return runMiddleware({
         cardAction,
         getSignInUrl:
@@ -165,41 +186,23 @@ function createCardActionContext({
   };
 }
 
-function createGroupActivitiesContext({
-  groupActivitiesMiddleware,
-  groupTimestamp,
-  ponyfill
-}: {
-  groupActivitiesMiddleware: readonly GroupActivitiesMiddleware[];
-  groupTimestamp: boolean | number;
-  ponyfill: GlobalScopePonyfill;
-}) {
-  const runMiddleware = applyMiddleware(
-    'group activities',
-    ...groupActivitiesMiddleware,
-    createDefaultGroupActivitiesMiddleware({ groupTimestamp, ponyfill })
-  );
-
-  return {
-    groupActivities: runMiddleware({})
-  };
-}
-
 function mergeStringsOverrides(localizedStrings, language, overrideLocalizedStrings) {
   if (!overrideLocalizedStrings) {
     return localizedStrings;
   } else if (typeof overrideLocalizedStrings === 'function') {
     const merged = overrideLocalizedStrings(localizedStrings, language);
 
-    if (!isObject(merged)) {
-      throw new Error('botframework-webchat: overrideLocalizedStrings function must return an object.');
+    if (!isPlainObject(merged)) {
+      throw new Error('botframework-webchat: overrideLocalizedStrings function must return a plain object.');
     }
 
     return merged;
   }
 
-  if (!isObject(overrideLocalizedStrings)) {
-    throw new Error('botframework-webchat: overrideLocalizedStrings must be either a function, an object, or falsy.');
+  if (!isPlainObject(overrideLocalizedStrings)) {
+    throw new Error(
+      'botframework-webchat: overrideLocalizedStrings must be either a function, a plain object, or falsy.'
+    );
   }
 
   return { ...localizedStrings, ...overrideLocalizedStrings };
@@ -211,15 +214,24 @@ function mergeStringsOverrides(localizedStrings, language, overrideLocalizedStri
 // Ignoring it in TypeScript version should be safe, as we have `propTypes` version to protect us.
 
 type ComposerCoreProps = Readonly<{
-  activityMiddleware?: OneOrMany<ActivityMiddleware>;
-  activityStatusMiddleware?: OneOrMany<ActivityStatusMiddleware>;
-  attachmentForScreenReaderMiddleware?: OneOrMany<AttachmentForScreenReaderMiddleware>;
-  attachmentMiddleware?: OneOrMany<AttachmentMiddleware>;
-  avatarMiddleware?: OneOrMany<AvatarMiddleware>;
-  cardActionMiddleware?: OneOrMany<CardActionMiddleware>;
-  children?: ReactNode | ((context: ContextOf<typeof WebChatAPIContext>) => ReactNode);
+  /**
+   * @deprecated Use `polymiddleware` instead. The `activityMiddleware` prop is being deprecated, please use `polymiddleware` instead. This prop will be removed on or after 2027-08-21.
+   */
+  activityMiddleware?: OneOrMany<LegacyActivityMiddleware> | undefined;
+  activityStatusMiddleware?: OneOrMany<ActivityStatusMiddleware> | undefined;
+  attachmentForScreenReaderMiddleware?: OneOrMany<AttachmentForScreenReaderMiddleware> | undefined;
+  attachmentMiddleware?: OneOrMany<LegacyAttachmentMiddleware> | undefined;
+  /**
+   * @deprecated Use `polymiddleware` instead. The `avatarMiddleware` prop is being deprecated, please use `polymiddleware` instead. This prop will be removed on or after 2028-03-16.
+   */
+  avatarMiddleware?: OneOrMany<AvatarMiddleware> | undefined;
+  cardActionMiddleware?: OneOrMany<CardActionMiddleware> | undefined;
+  children?: ReactNode | ((context: ContextOf<React.Context<WebChatAPIContextType>>) => ReactNode);
   dir?: string;
   directLine: DirectLineJSBotConnection;
+  /**
+   * @deprecated Please use `uiState="disabled"` instead. This feature will be removed on or after 2026-09-04.
+   */
   disabled?: boolean;
   downscaleImageToDataURL?: (
     blob: Blob,
@@ -229,9 +241,9 @@ type ComposerCoreProps = Readonly<{
     quality: number
   ) => Promise<URL>;
   grammars?: any;
-  groupActivitiesMiddleware?: OneOrMany<GroupActivitiesMiddleware>;
-  internalErrorBoxClass?: React.Component | Function;
+  groupActivitiesMiddleware?: OneOrMany<GroupActivitiesMiddleware> | undefined;
   locale?: string;
+  polymiddleware?: readonly Polymiddleware[] | undefined;
   onTelemetry?: (event: TelemetryMeasurementEvent) => void;
   overrideLocalizedStrings?: LocalizedStrings | ((strings: LocalizedStrings, language: string) => LocalizedStrings);
   renderMarkdown?: (
@@ -239,24 +251,33 @@ type ComposerCoreProps = Readonly<{
     newLineOptions: { markdownRespectCRLF: boolean },
     linkOptions: { externalLinkAlt: string }
   ) => string;
-  scrollToEndButtonMiddleware?: OneOrMany<ScrollToEndButtonMiddleware>;
+  scrollToEndButtonMiddleware?: OneOrMany<ScrollToEndButtonMiddleware> | undefined;
   selectVoice?: (voices: (typeof window.SpeechSynthesisVoice)[], activity: WebChatActivity) => void;
   sendBoxMiddleware?: readonly SendBoxMiddleware[] | undefined;
   sendBoxToolbarMiddleware?: readonly SendBoxToolbarMiddleware[] | undefined;
   sendTypingIndicator?: boolean;
-  styleOptions?: StyleOptions;
-  toastMiddleware?: OneOrMany<ToastMiddleware>;
-  typingIndicatorMiddleware?: OneOrMany<TypingIndicatorMiddleware>;
+  toastMiddleware?: OneOrMany<ToastMiddleware> | undefined;
+  typingIndicatorMiddleware?: OneOrMany<TypingIndicatorMiddleware> | undefined;
+  /**
+   * Sets the state of the UI.
+   *
+   * - `undefined` will render normally
+   * - `"blueprint"` will render as few UI elements as possible and should be non-functional
+   *   - Useful for loading scenarios
+   * - `"disabled"` will render most UI elements as non-functional
+   *   - Scrolling may continue to trigger read acknowledgements
+   */
+  uiState?: 'blueprint' | 'disabled' | undefined;
   userID?: string;
   username?: string;
 }>;
 
 const ComposerCore = ({
-  activityMiddleware,
+  activityMiddleware: activityMiddlewareFromProps,
   activityStatusMiddleware,
   attachmentForScreenReaderMiddleware,
   attachmentMiddleware,
-  avatarMiddleware,
+  avatarMiddleware: avatarMiddlewareFromProps,
   cardActionMiddleware,
   children,
   dir,
@@ -264,33 +285,33 @@ const ComposerCore = ({
   disabled,
   downscaleImageToDataURL,
   grammars,
-  groupActivitiesMiddleware,
-  internalErrorBoxClass,
+  groupActivitiesMiddleware: groupActivitiesMiddlewareFromProps,
   locale,
   onTelemetry,
   overrideLocalizedStrings,
+  polymiddleware: polymiddlewareFromProps,
   renderMarkdown,
   scrollToEndButtonMiddleware,
   selectVoice,
   sendBoxMiddleware,
   sendBoxToolbarMiddleware,
   sendTypingIndicator,
-  styleOptions,
   toastMiddleware,
   typingIndicatorMiddleware,
+  uiState: rawUIState,
   userID,
   username
 }: ComposerCoreProps) => {
   const [ponyfill] = usePonyfill();
+  const [styleOptions] = useStyleOptions();
   const dispatch = useDispatch();
   const telemetryDimensionsRef = useRef({});
+  const [voiceHandlers] = useVoiceHandlers();
 
   const patchedDir = useMemo(() => (dir === 'ltr' || dir === 'rtl' ? dir : 'auto'), [dir]);
   const patchedGrammars = useMemo(() => grammars || [], [grammars]);
-  const patchedStyleOptions = useMemo(
-    () => normalizeStyleOptions(patchStyleOptionsFromDeprecatedProps(styleOptions)),
-    [styleOptions]
-  );
+
+  const uiState = parseUIState(rawUIState, disabled);
 
   useEffect(() => {
     dispatch(setLanguage(locale));
@@ -323,12 +344,20 @@ const ComposerCore = ({
     () =>
       createCardActionContext({
         cardActionMiddleware: Object.freeze([...singleToArray(cardActionMiddleware)]),
+        continuous: !!styleOptions.speechRecognitionContinuous,
         directLine,
         dispatch,
         markAllAsAcknowledged,
         ponyfill
       }),
-    [cardActionMiddleware, directLine, dispatch, markAllAsAcknowledged, ponyfill]
+    [
+      cardActionMiddleware,
+      directLine,
+      dispatch,
+      markAllAsAcknowledged,
+      ponyfill,
+      styleOptions.speechRecognitionContinuous
+    ]
   );
 
   const patchedSelectVoice = useMemo(
@@ -336,16 +365,6 @@ const ComposerCore = ({
     [locale, selectVoice]
   );
 
-  const groupActivitiesContext = useMemo(
-    () =>
-      createGroupActivitiesContext({
-        groupActivitiesMiddleware: Object.freeze([...singleToArray(groupActivitiesMiddleware)]),
-        groupTimestamp: patchedStyleOptions.groupTimestamp,
-        ponyfill
-      }),
-    [groupActivitiesMiddleware, patchedStyleOptions.groupTimestamp, ponyfill]
-  );
-
   const hoistedDispatchers = useMemo(
     () =>
       mapMap(
@@ -358,6 +377,15 @@ const ComposerCore = ({
     [dispatch]
   );
 
+  const startVoice = useCallback(() => {
+    dispatch(startVoiceRecording());
+  }, [dispatch]);
+
+  const stopVoice = useCallback(() => {
+    voiceHandlers.forEach(handler => handler.stopAllAudio());
+    dispatch(stopVoiceRecording());
+  }, [dispatch, voiceHandlers]);
+
   const patchedLocalizedStrings = useMemo(
     () => mergeStringsOverrides(getAllLocalizedStrings()[normalizeLanguage(locale)], locale, overrideLocalizedStrings),
     [locale, overrideLocalizedStrings]
@@ -390,25 +418,6 @@ const ComposerCore = ({
     [telemetryDimensionsRef]
   );
 
-  const patchedActivityRenderer = useMemo(
-    () =>
-      applyMiddlewareForRenderer(
-        'activity',
-        { strict: false },
-        ...singleToArray(activityMiddleware),
-        () =>
-          () =>
-          ({ activity }) => {
-            if (activity) {
-              throw new Error(`No renderer for activity of type "${activity.type}"`);
-            } else {
-              throw new Error('No activity to render');
-            }
-          }
-      )({}),
-    [activityMiddleware]
-  );
-
   const patchedActivityStatusRenderer = useMemo<RenderActivityStatus>(
     () =>
       applyMiddlewareForRenderer(
@@ -463,14 +472,18 @@ const ComposerCore = ({
     [attachmentMiddleware]
   );
 
-  const patchedAvatarRenderer = useMemo(
-    () =>
-      applyMiddlewareForRenderer(
-        'avatar',
-        { strict: false },
-        ...singleToArray(avatarMiddleware),
-        () => () => () => false
-      )({}),
+  const groupActivitiesMiddleware = useMemoIterable<readonly GroupActivitiesMiddleware[] | undefined>(
+    () => Object.freeze(singleToArray(groupActivitiesMiddlewareFromProps)),
+    [groupActivitiesMiddlewareFromProps]
+  );
+
+  const avatarMiddleware = useMemoIterable<readonly AvatarMiddleware[]>(
+    () => singleToArray(avatarMiddlewareFromProps),
+    [avatarMiddlewareFromProps]
+  );
+
+  const polymiddlewareForLegacyAvatarMiddleware = useMemo<Polymiddleware | undefined>(
+    () => createAvatarPolymiddlewareFromLegacy(...avatarMiddleware),
     [avatarMiddleware]
   );
 
@@ -515,6 +528,50 @@ const ComposerCore = ({
     [scrollToEndButtonMiddleware]
   );
 
+  const activityMiddleware = useMemoIterable<readonly LegacyActivityMiddleware[]>(
+    () => singleToArray(activityMiddlewareFromProps),
+    [activityMiddlewareFromProps]
+  );
+
+  const polymiddlewareForLegacyActivityMiddleware = useMemo<Polymiddleware | undefined>(
+    () => createActivityPolymiddlewareFromLegacy(...activityMiddleware),
+    [activityMiddleware]
+  );
+
+  const polymiddleware = useMemoIterable<readonly Polymiddleware[]>(
+    () =>
+      Object.freeze([
+        // Error box telemetry polymiddleware is special and has a much higher priority.
+        // This guarantees telemetry is always emitted for exception and no other polymiddleware can override this behavior.
+        errorBoxTelemetryPolymiddleware,
+
+        // # Why render legacy middleware before polymiddleware?
+        //
+        // - Legacy middleware should have high priority than defaults
+        // - Default middleware will be upgraded to polymiddleware, however, they should have lower priority
+        // - Default middleware are implemented in the `component` package, and passed via `polymiddleware` props
+        //   - They are UI, cannot be implemented in `api` package
+        //
+        // We have a few way out, either one of the followings:
+        //
+        // - Add a new `lowPriorityPolymiddleware` props for default polymiddleware, so we can put them after legacy
+        //   - We don't want any special treatments or any prioritization system
+        // - We put the upgrade logics inside both `api` and `component` package
+        //   - `component` will upgrade legacy to polymiddleware and prioritize properly
+        //   - Spaghetti code and it is difficult to test the logic in `api` package
+        // - We always render legacy middleware before polymiddleware
+        //   - Default middleware are polymiddleware, has lower priority than legacy
+        //
+        // The simplest and logical move is #3: render legacy middleware before polymiddleware.
+
+        ...(polymiddlewareForLegacyActivityMiddleware ? [polymiddlewareForLegacyActivityMiddleware] : []),
+        ...(polymiddlewareForLegacyAvatarMiddleware ? [polymiddlewareForLegacyAvatarMiddleware] : []),
+        ...(polymiddlewareFromProps ?? []),
+        activityFallbackPolymiddleware
+      ]),
+    [polymiddlewareForLegacyActivityMiddleware, polymiddlewareForLegacyAvatarMiddleware, polymiddlewareFromProps]
+  );
+
   /**
    * This is a heavy function, and it is expected to be only called when there is a need to recreate business logic, e.g.
    * - User ID changed, causing all send* functions to be updated
@@ -526,22 +583,17 @@ const ComposerCore = ({
    *       This context should consist of members that are not in the Redux store
    *       i.e. members that are not interested in other types of UIs
    */
-  const context = useMemo<ContextOf<typeof WebChatAPIContext>>(
+  const context = useMemo<ContextOf<React.Context<WebChatAPIContextType>>>(
     () => ({
       ...cardActionContext,
-      ...groupActivitiesContext,
       ...hoistedDispatchers,
-      activityRenderer: patchedActivityRenderer,
       activityStatusRenderer: patchedActivityStatusRenderer,
       attachmentForScreenReaderRenderer: patchedAttachmentForScreenReaderRenderer,
       attachmentRenderer: patchedAttachmentRenderer,
-      avatarRenderer: patchedAvatarRenderer,
       dir: patchedDir,
       directLine,
-      disabled,
       downscaleImageToDataURL,
       grammars: patchedGrammars,
-      internalErrorBoxClass,
       language: locale,
       localizedGlobalizeState: [localizedGlobalize],
       localizedStrings: patchedLocalizedStrings,
@@ -550,42 +602,41 @@ const ComposerCore = ({
       scrollToEndButtonRenderer,
       selectVoice: patchedSelectVoice,
       sendTypingIndicator,
-      styleOptions: patchedStyleOptions,
+      startVoice,
+      stopVoice,
       telemetryDimensionsRef,
       toastRenderer: patchedToastRenderer,
       trackDimension,
       typingIndicatorRenderer: patchedTypingIndicatorRenderer,
+      uiState,
       userID,
       username
     }),
     [
       cardActionContext,
       directLine,
-      disabled,
       downscaleImageToDataURL,
-      groupActivitiesContext,
       hoistedDispatchers,
-      internalErrorBoxClass,
       locale,
       localizedGlobalize,
       onTelemetry,
-      patchedActivityRenderer,
       patchedActivityStatusRenderer,
       patchedAttachmentForScreenReaderRenderer,
       patchedAttachmentRenderer,
-      patchedAvatarRenderer,
       patchedDir,
       patchedGrammars,
       patchedLocalizedStrings,
       patchedSelectVoice,
-      patchedStyleOptions,
       patchedToastRenderer,
       patchedTypingIndicatorRenderer,
       renderMarkdown,
       scrollToEndButtonRenderer,
       sendTypingIndicator,
+      startVoice,
+      stopVoice,
       telemetryDimensionsRef,
       trackDimension,
+      uiState,
       userID,
       username
     ]
@@ -593,18 +644,26 @@ const ComposerCore = ({
 
   return (
     <WebChatAPIContext.Provider value={context}>
-      <ActivityListenerComposer>
-        <ActivitySendStatusComposer>
-          <ActivityTypingComposer>
-            <SendBoxMiddlewareProvider middleware={sendBoxMiddleware || EMPTY_ARRAY}>
-              <SendBoxToolbarMiddlewareProvider middleware={sendBoxToolbarMiddleware || EMPTY_ARRAY}>
-                {typeof children === 'function' ? children(context) : children}
-                <ActivitySendStatusTelemetryComposer />
-              </SendBoxToolbarMiddlewareProvider>
-            </SendBoxMiddlewareProvider>
-          </ActivityTypingComposer>
-        </ActivitySendStatusComposer>
-      </ActivityListenerComposer>
+      <CapabilitiesComposer>
+        <ActivityListenerComposer>
+          <ActivitySendStatusComposer>
+            <ActivityTypingComposer>
+              <SendBoxMiddlewareProvider middleware={sendBoxMiddleware || EMPTY_ARRAY}>
+                <SendBoxToolbarMiddlewareProvider middleware={sendBoxToolbarMiddleware || EMPTY_ARRAY}>
+                  <GroupActivitiesComposer groupActivitiesMiddleware={groupActivitiesMiddleware}>
+                    <PolymiddlewareComposer polymiddleware={polymiddleware}>
+                      <SpeechToSpeechComposer>
+                        {typeof children === 'function' ? children(context) : children}
+                      </SpeechToSpeechComposer>
+                    </PolymiddlewareComposer>
+                  </GroupActivitiesComposer>
+                  <ActivitySendStatusTelemetryComposer />
+                </SendBoxToolbarMiddlewareProvider>
+              </SendBoxMiddlewareProvider>
+            </ActivityTypingComposer>
+          </ActivitySendStatusComposer>
+        </ActivityListenerComposer>
+      </CapabilitiesComposer>
       {onTelemetry && <Tracker />}
     </WebChatAPIContext.Provider>
   );
@@ -617,7 +676,6 @@ const ComposerCore = ({
  *       We should decide which data is needed for React but not in other environment such as CLI/VSCode
  */
 ComposerCore.defaultProps = {
-  activityMiddleware: undefined,
   activityStatusMiddleware: undefined,
   attachmentForScreenReaderMiddleware: undefined,
   attachmentMiddleware: undefined,
@@ -629,7 +687,6 @@ ComposerCore.defaultProps = {
   downscaleImageToDataURL: undefined,
   grammars: [],
   groupActivitiesMiddleware: undefined,
-  internalErrorBoxClass: undefined,
   locale: window.navigator.language || 'en-US',
   onTelemetry: undefined,
   overrideLocalizedStrings: undefined,
@@ -637,15 +694,14 @@ ComposerCore.defaultProps = {
   scrollToEndButtonMiddleware: undefined,
   selectVoice: undefined,
   sendTypingIndicator: false,
-  styleOptions: {},
   toastMiddleware: undefined,
   typingIndicatorMiddleware: undefined,
+  uiState: undefined,
   userID: '',
   username: ''
 };
 
 ComposerCore.propTypes = {
-  activityMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   activityStatusMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   attachmentForScreenReaderMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   attachmentMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
@@ -672,7 +728,6 @@ ComposerCore.propTypes = {
   downscaleImageToDataURL: PropTypes.func,
   grammars: PropTypes.arrayOf(PropTypes.string),
   groupActivitiesMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
-  internalErrorBoxClass: PropTypes.func, // This is for internal use only. We don't allow customization of error box.
   locale: PropTypes.string,
   onTelemetry: PropTypes.func,
   overrideLocalizedStrings: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
@@ -680,9 +735,9 @@ ComposerCore.propTypes = {
   scrollToEndButtonMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   selectVoice: PropTypes.func,
   sendTypingIndicator: PropTypes.bool,
-  styleOptions: PropTypes.any,
   toastMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   typingIndicatorMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
+  uiState: PropTypes.oneOf(['blueprint', 'disabled']),
   userID: PropTypes.string,
   username: PropTypes.string
 };
@@ -693,7 +748,7 @@ type ComposerWithStoreProps = ComposerCoreProps &
   }>;
 
 type ComposerProps = ComposerWithStoreProps & {
-  internalRenderErrorBox?: any;
+  readonly internalRenderErrorBox?: any;
 
   /**
    * Ponyfill to overrides specific global scope members. This prop cannot be changed after initial render.
@@ -704,7 +759,8 @@ type ComposerProps = ComposerWithStoreProps & {
    *
    * Please see [#4662](https://github.com/microsoft/BotFramework-WebChat/pull/4662) for details.
    */
-  ponyfill?: Partial<GlobalScopePonyfill>;
+  readonly ponyfill?: Partial<GlobalScopePonyfill> | undefined;
+  readonly styleOptions?: StyleOptions | undefined;
 };
 
 // We will create a Redux store if it was not passed in
@@ -748,11 +804,15 @@ const ComposerWithStore = ({ onTelemetry, store, ...props }: ComposerWithStorePr
 
   return (
     <Provider context={WebChatReduxContext} store={memoizedStore}>
-      <ActivityKeyerComposer>
-        <ActivityAcknowledgementComposer>
-          <ComposerCore onTelemetry={onTelemetry} {...props} />
-        </ActivityAcknowledgementComposer>
-      </ActivityKeyerComposer>
+      <ReduxStoreComposer store={memoizedStore}>
+        <GraphProvider store={memoizedStore}>
+          <ActivityKeyerComposer>
+            <ActivityAcknowledgementComposer>
+              <ComposerCore onTelemetry={onTelemetry} {...props} />
+            </ActivityAcknowledgementComposer>
+          </ActivityKeyerComposer>
+        </GraphProvider>
+      </ReduxStoreComposer>
     </Provider>
   );
 };
@@ -767,7 +827,7 @@ ComposerWithStore.propTypes = {
   store: PropTypes.any
 };
 
-const Composer = ({ internalRenderErrorBox, onTelemetry, ponyfill, ...props }: ComposerProps) => {
+const Composer = ({ internalRenderErrorBox, onTelemetry, ponyfill, styleOptions, ...props }: ComposerProps) => {
   const [error, setError] = useState();
 
   const handleError = useCallback(
@@ -786,7 +846,9 @@ const Composer = ({ internalRenderErrorBox, onTelemetry, ponyfill, ...props }: C
   ) : (
     <ErrorBoundary onError={handleError}>
       <PonyfillComposer ponyfill={ponyfill}>
-        <ComposerWithStore onTelemetry={onTelemetry} {...props} />
+        <StyleOptionsComposer styleOptions={styleOptions}>
+          <ComposerWithStore onTelemetry={onTelemetry} {...props} />
+        </StyleOptionsComposer>
       </PonyfillComposer>
     </ErrorBoundary>
   );