botframework-webchat-api 4.18.0 → 4.18.1-hotfix.20260127.b53acdf

package/src/decorator/ActivityGrouping/private/ActivityGroupingDecoratorMiddleware.ts

@@ -0,0 +1,38 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import templateMiddleware from '../../private/templateMiddleware';
+import { type activityGroupingDecoratorTypeName } from '../types';
+
+type Request = Readonly<{
+  /**
+   * Name of the grouping from the result of `groupActivitesMiddleware()`.
+   */
+  groupingName: string;
+}>;
+
+type Props = Readonly<{
+  activities: readonly WebChatActivity[];
+}>;
+
+const {
+  initMiddleware: initActivityGroupingDecoratorMiddleware,
+  Provider: ActivityGroupingDecoratorMiddlewareProvider,
+  Proxy: ActivityGroupingDecoratorMiddlewareProxy,
+  // False positive, `types` is used for its typing.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  types
+} = templateMiddleware<typeof activityGroupingDecoratorTypeName, Request, Props>('ActivityGroupingDecoratorMiddleware');
+
+type ActivityGroupingDecoratorMiddleware = typeof types.middleware;
+type ActivityGroupingDecoratorMiddlewareInit = typeof types.init;
+type ActivityGroupingDecoratorMiddlewareProps = typeof types.props;
+type ActivityGroupingDecoratorMiddlewareRequest = typeof types.request;
+
+export {
+  ActivityGroupingDecoratorMiddlewareProvider,
+  ActivityGroupingDecoratorMiddlewareProxy,
+  initActivityGroupingDecoratorMiddleware,
+  type ActivityGroupingDecoratorMiddleware,
+  type ActivityGroupingDecoratorMiddlewareInit,
+  type ActivityGroupingDecoratorMiddlewareProps,
+  type ActivityGroupingDecoratorMiddlewareRequest
+};

package/src/decorator/ActivityGrouping/types.ts

@@ -0,0 +1 @@
+export const activityGroupingDecoratorTypeName = 'activity grouping' as const;

package/src/decorator/DecoratorComposer.tsx

@@ -0,0 +1,22 @@
+import React, { Fragment, memo, type ReactNode } from 'react';
+import InternalDecoratorComposer from './internal/InternalDecoratorComposer';
+import { type DecoratorMiddleware } from './types';
+
+type DecoratorComposerProps = Readonly<{
+  children?: ReactNode | undefined;
+  middleware?: readonly DecoratorMiddleware[] | undefined;
+}>;
+
+function DecoratorComposer({ children, middleware }: DecoratorComposerProps) {
+  return middleware ? (
+    <InternalDecoratorComposer middleware={middleware} priority="normal">
+      {children}
+    </InternalDecoratorComposer>
+  ) : (
+    // We can't return `children` unless we are not using memo().
+    <Fragment>{children}</Fragment>
+  );
+}
+
+export default memo(DecoratorComposer);
+export { type DecoratorComposerProps };

package/src/decorator/internal/InternalDecoratorComposer.tsx

@@ -0,0 +1,61 @@
+import React, { memo, useContext, useMemo, type ReactNode } from 'react';
+import {
+  ActivityBorderDecoratorMiddlewareProvider,
+  initActivityBorderDecoratorMiddleware
+} from '../ActivityBorder/private/ActivityBorderDecoratorMiddleware';
+import { activityBorderDecoratorTypeName } from '../ActivityBorder/types';
+import {
+  ActivityGroupingDecoratorMiddlewareProvider,
+  initActivityGroupingDecoratorMiddleware
+} from '../ActivityGrouping/private/ActivityGroupingDecoratorMiddleware';
+import { activityGroupingDecoratorTypeName } from '../ActivityGrouping/types';
+import DecoratorComposerContext from '../private/DecoratorComposerContext';
+import { type DecoratorMiddleware } from '../types';
+
+type InternalDecoratorComposerProps = Readonly<{
+  children?: ReactNode | undefined;
+  middleware: readonly DecoratorMiddleware[];
+  priority: 'low' | 'normal';
+}>;
+
+const EMPTY_ARRAY = Object.freeze([]);
+
+function InternalDecoratorComposer({
+  children,
+  middleware: middlewareFromProps = EMPTY_ARRAY,
+  priority
+}: InternalDecoratorComposerProps) {
+  const existingContext = useContext(DecoratorComposerContext);
+  const middleware = useMemo(
+    () =>
+      priority === 'low'
+        ? Object.freeze([...existingContext.middleware, ...middlewareFromProps])
+        : Object.freeze([...middlewareFromProps, ...existingContext.middleware]),
+    [existingContext, middlewareFromProps, priority]
+  );
+
+  const activityBorderMiddleware = useMemo(
+    () => initActivityBorderDecoratorMiddleware(middleware, activityBorderDecoratorTypeName),
+    [middleware]
+  );
+
+  const activityGroupingMiddleware = useMemo(
+    () => initActivityGroupingDecoratorMiddleware(middleware, activityGroupingDecoratorTypeName),
+    [middleware]
+  );
+
+  const context = useMemo(() => ({ middleware }), [middleware]);
+
+  return (
+    <DecoratorComposerContext.Provider value={context}>
+      <ActivityBorderDecoratorMiddlewareProvider middleware={activityBorderMiddleware}>
+        <ActivityGroupingDecoratorMiddlewareProvider middleware={activityGroupingMiddleware}>
+          {children}
+        </ActivityGroupingDecoratorMiddlewareProvider>
+      </ActivityBorderDecoratorMiddlewareProvider>
+    </DecoratorComposerContext.Provider>
+  );
+}
+
+export default memo(InternalDecoratorComposer);
+export { type InternalDecoratorComposerProps };

package/src/decorator/internal/LowPriorityDecoratorComposer.tsx

@@ -0,0 +1,19 @@
+import React, { memo, type ReactNode } from 'react';
+import { type DecoratorMiddleware } from '../types';
+import InternalDecoratorComposer from './InternalDecoratorComposer';
+
+type LowPriorityDecoratorComposerProps = Readonly<{
+  children?: ReactNode | undefined;
+  middleware: readonly DecoratorMiddleware[];
+}>;
+
+function LowPriorityDecoratorDecomposer({ children, middleware }: LowPriorityDecoratorComposerProps) {
+  return (
+    <InternalDecoratorComposer middleware={middleware} priority="low">
+      {children}
+    </InternalDecoratorComposer>
+  );
+}
+
+export default memo(LowPriorityDecoratorDecomposer);
+export { type LowPriorityDecoratorComposerProps };

package/src/decorator/private/DecoratorComposerContext.ts

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+
+import { type DecoratorMiddleware } from '../types';
+
+type DecoratorComposerContextType = Readonly<{
+  middleware: readonly DecoratorMiddleware[];
+}>;
+
+const DecoratorComposerContext = createContext<DecoratorComposerContextType>(
+  Object.freeze({
+    middleware: Object.freeze([])
+  })
+);
+
+export default DecoratorComposerContext;
+export { type DecoratorComposerContextType };

package/src/decorator/private/PassthroughFallback.tsx

@@ -0,0 +1,12 @@
+import React, { Fragment, memo, type ReactNode } from 'react';
+
+type PassthroughFallbackProps = Readonly<{
+  children?: ReactNode | undefined;
+}>;
+
+function PassthroughFallback({ children }: PassthroughFallbackProps) {
+  return <Fragment>{children}</Fragment>;
+}
+
+export default memo(PassthroughFallback);
+export { type PassthroughFallbackProps };

package/src/decorator/private/templateMiddleware.test.tsx

@@ -1,4 +1,4 @@
-/** @jest-environment jsdom */
+/** @jest-environment @happy-dom/jest-environment */
 
 import { render } from '@testing-library/react';
 import React, { Fragment, type ReactNode } from 'react';
@@ -24,6 +24,8 @@ test('an uber middleware', () => {
     initMiddleware: initButtonMiddleware,
     Provider: ButtonProvider,
     Proxy: Button,
+    // False positive, `types` is used for its typing.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     types: buttonTypes
   } = templateMiddleware<'button', void, ButtonProps>('Button');
 
@@ -33,6 +35,8 @@ test('an uber middleware', () => {
     initMiddleware: initLinkMiddleware,
     Provider: LinkProvider,
     Proxy: Link,
+    // False positive, `types` is used for its typing.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     types: linkTypes
   } = templateMiddleware<'link', { external: boolean }, LinkProps>('Link');
 

package/src/decorator/private/templateMiddleware.ts

@@ -1,33 +1,35 @@
 import { warnOnce } from 'botframework-webchat-core';
 import { createChainOfResponsibility, type ComponentMiddleware } from 'react-chain-of-responsibility';
 import { type EmptyObject } from 'type-fest';
-import { any, array, custom, safeParse, type Output } from 'valibot';
+import { any, array, function_, pipe, safeParse, type InferOutput } from 'valibot';
 
 export type MiddlewareWithInit<M extends ComponentMiddleware<any, any, any>, I> = (init: I) => ReturnType<M> | false;
 
 const EMPTY_ARRAY = Object.freeze([]);
 
-export default function templateMiddleware<Init, Request = any, Props extends {} = EmptyObject>(name: string) {
+// Following @types/react to use {} for props.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export default function templateMiddleware<Init extends string, Request = any, Props extends {} = EmptyObject>(
+  name: string
+) {
   type Middleware = ComponentMiddleware<Request, Props>;
 
-  const middlewareSchema = array(
-    any([custom<Middleware>(input => typeof input === 'function', 'Middleware must be a function.')])
-  );
+  const middlewareSchema = array(pipe(any(), function_()));
 
-  const isMiddleware = (middleware: unknown): middleware is Output<typeof middlewareSchema> =>
+  const isMiddleware = (middleware: unknown): middleware is InferOutput<typeof middlewareSchema> =>
     safeParse(middlewareSchema, middleware).success;
 
   const warnInvalid = warnOnce(`"${name}" prop is invalid`);
 
   const initMiddleware = (
-    middleware: readonly MiddlewareWithInit<Middleware, Init>[],
-    init?: Init
+    middleware: readonly MiddlewareWithInit<ComponentMiddleware<unknown, unknown>, Init>[],
+    init: Init
   ): readonly Middleware[] => {
     if (middleware) {
       if (isMiddleware(middleware)) {
         return Object.freeze(
           middleware
-            ?.map(middleware => middleware(init))
+            .map(middleware => middleware(init) as ReturnType<Middleware>)
             .filter((enhancer): enhancer is ReturnType<Middleware> => !!enhancer)
             .map(enhancer => () => enhancer)
         );

package/src/decorator/types.ts

@@ -0,0 +1,15 @@
+import { type ActivityBorderDecoratorMiddleware } from './ActivityBorder/private/ActivityBorderDecoratorMiddleware';
+import { type activityBorderDecoratorTypeName } from './ActivityBorder/types';
+import { type ActivityGroupingDecoratorMiddleware } from './ActivityGrouping/private/ActivityGroupingDecoratorMiddleware';
+import { type activityGroupingDecoratorTypeName } from './ActivityGrouping/types';
+
+export type DecoratorMiddlewareTypes = {
+  [activityBorderDecoratorTypeName]: ReturnType<ActivityBorderDecoratorMiddleware>;
+  [activityGroupingDecoratorTypeName]: ReturnType<ActivityGroupingDecoratorMiddleware>;
+};
+
+export type DecoratorMiddlewareInit = keyof DecoratorMiddlewareTypes;
+
+export interface DecoratorMiddleware {
+  (init: keyof DecoratorMiddlewareTypes): DecoratorMiddlewareTypes[typeof init] | false;
+}

package/src/decorator.ts

@@ -0,0 +1,16 @@
+// Decorator general
+
+export { default as DecoratorComposer } from './decorator/DecoratorComposer';
+export {
+  type DecoratorMiddleware,
+  type DecoratorMiddlewareInit,
+  type DecoratorMiddlewareTypes
+} from './decorator/types';
+
+// ActivityBorderDecorator
+
+export { default as ActivityBorderDecorator } from './decorator/ActivityBorder/ActivityBorderDecorator';
+
+// ActivityGroupingDecorator
+
+export { default as ActivityGroupingDecorator } from './decorator/ActivityGrouping/ActivityGroupingDecorator';

package/src/defaultStyleOptions.ts

@@ -53,10 +53,16 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   bubbleFromUserNubOffset: 0,
   bubbleFromUserNubSize: undefined,
   bubbleFromUserTextColor: 'Black',
-  bubbleImageHeight: 240,
-  bubbleMaxWidth: 480, // Based off screen width = 600px
+  bubbleImageHeight: undefined,
+  bubbleImageMaxHeight: 240, // Based on previously default `bubbleImageHeight` of 240px.
+  bubbleImageMinHeight: 240, // TODO: Should change to 180px. Based on 320px bubble width showing a 16:9 image, or `320 / (16 / 9)`. 320px bubble width is based on 360px wide of the chat canvas.
+  bubbleMaxWidth: undefined, // Deprecated.
+  bubbleMinWidth: undefined, // Deprecated.
+  bubbleAttachmentMaxWidth: 480, // Based off screen width = 600px
+  bubbleAttachmentMinWidth: 250, // min screen width = 300px; Microsoft Edge requires 372px (https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/13621468/)
+  bubbleMessageMaxWidth: 480, // Based off screen width = 600px
+  bubbleMessageMinWidth: 0,
   bubbleMinHeight: 40,
-  bubbleMinWidth: 250, // min screen width = 300px; Microsoft Edge requires 372px (https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/13621468/)
   bubbleNubOffset: 0,
   bubbleNubSize: undefined,
   bubbleTextColor: 'Black',
@@ -238,7 +244,6 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   transcriptOverlayButtonColorOnHover: undefined,
 
   // Toast UI
-
   notificationDebounceTimeout: 400,
 
   hideToaster: false,
@@ -290,7 +295,23 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   // Video
   videoHeight: 270, // based on bubbleMaxWidth: 480 / 16 * 9 = 270
 
-  maxMessageLength: 2000
+  maxMessageLength: 2000,
+
+  stylesRoot: document.head,
+
+  // Border animation
+  borderAnimationColor1: '#203C91',
+  borderAnimationColor2: '#4DD3FF',
+  borderAnimationColor3: '#2B8DD8',
+
+  codeBlockTheme: 'github-light-default' as const,
+
+  feedbackActionsPlacement: 'activity-status' as const,
+
+  // Speech recognition
+  speechRecognitionContinuous: false,
+
+  groupActivitiesBy: ['sender', 'status']
 };
 
 export default DEFAULT_OPTIONS;

package/src/hooks/Composer.tsx

@@ -32,7 +32,7 @@ import {
   type WebChatActivity
 } from 'botframework-webchat-core';
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, type ComponentType, type ReactNode } from 'react';
 import { Provider } from 'react-redux';
 import updateIn from 'simple-update-in';
 
@@ -54,6 +54,7 @@ import AttachmentForScreenReaderMiddleware from '../types/AttachmentForScreenRea
 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,7 +62,6 @@ 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';
@@ -69,7 +69,7 @@ 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 applyMiddleware, {
@@ -77,7 +77,6 @@ import applyMiddleware, {
   forRenderer as applyMiddlewareForRenderer
 } from './middleware/applyMiddleware';
 import createDefaultCardActionMiddleware from './middleware/createDefaultCardActionMiddleware';
-import createDefaultGroupActivitiesMiddleware from './middleware/createDefaultGroupActivitiesMiddleware';
 import useMarkAllAsAcknowledged from './useMarkAllAsAcknowledged';
 import ErrorBoundary from './utils/ErrorBoundary';
 import observableToPromise from './utils/observableToPromise';
@@ -85,6 +84,8 @@ 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 GroupActivitiesComposer from '../providers/GroupActivities/GroupActivitiesComposer';
+import { parseUIState } from './validation/uiState';
 
 // List of Redux actions factory we are hoisting as Web Chat functions
 const DISPATCHERS = {
@@ -115,14 +116,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 +139,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,26 +173,6 @@ 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;
@@ -217,9 +205,12 @@ type ComposerCoreProps = Readonly<{
   attachmentMiddleware?: OneOrMany<AttachmentMiddleware>;
   avatarMiddleware?: OneOrMany<AvatarMiddleware>;
   cardActionMiddleware?: OneOrMany<CardActionMiddleware>;
-  children?: ReactNode | ((context: ContextOf<typeof WebChatAPIContext>) => ReactNode);
+  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,
@@ -230,7 +221,14 @@ type ComposerCoreProps = Readonly<{
   ) => Promise<URL>;
   grammars?: any;
   groupActivitiesMiddleware?: OneOrMany<GroupActivitiesMiddleware>;
-  internalErrorBoxClass?: React.Component | Function;
+  internalErrorBoxClass?:
+    | ComponentType<
+        Readonly<{
+          error: Error;
+          type?: string;
+        }>
+      >
+    | undefined;
   locale?: string;
   onTelemetry?: (event: TelemetryMeasurementEvent) => void;
   overrideLocalizedStrings?: LocalizedStrings | ((strings: LocalizedStrings, language: string) => LocalizedStrings);
@@ -247,6 +245,16 @@ type ComposerCoreProps = Readonly<{
   styleOptions?: StyleOptions;
   toastMiddleware?: OneOrMany<ToastMiddleware>;
   typingIndicatorMiddleware?: OneOrMany<TypingIndicatorMiddleware>;
+  /**
+   * 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;
 }>;
@@ -278,6 +286,7 @@ const ComposerCore = ({
   styleOptions,
   toastMiddleware,
   typingIndicatorMiddleware,
+  uiState,
   userID,
   username
 }: ComposerCoreProps) => {
@@ -292,6 +301,8 @@ const ComposerCore = ({
     [styleOptions]
   );
 
+  uiState = parseUIState(uiState, disabled);
+
   useEffect(() => {
     dispatch(setLanguage(locale));
   }, [dispatch, locale]);
@@ -323,12 +334,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 +355,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(
@@ -526,10 +535,9 @@ 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,
@@ -538,7 +546,6 @@ const ComposerCore = ({
       avatarRenderer: patchedAvatarRenderer,
       dir: patchedDir,
       directLine,
-      disabled,
       downscaleImageToDataURL,
       grammars: patchedGrammars,
       internalErrorBoxClass,
@@ -555,15 +562,14 @@ const ComposerCore = ({
       toastRenderer: patchedToastRenderer,
       trackDimension,
       typingIndicatorRenderer: patchedTypingIndicatorRenderer,
+      uiState,
       userID,
       username
     }),
     [
       cardActionContext,
       directLine,
-      disabled,
       downscaleImageToDataURL,
-      groupActivitiesContext,
       hoistedDispatchers,
       internalErrorBoxClass,
       locale,
@@ -586,6 +592,7 @@ const ComposerCore = ({
       sendTypingIndicator,
       telemetryDimensionsRef,
       trackDimension,
+      uiState,
       userID,
       username
     ]
@@ -598,7 +605,9 @@ const ComposerCore = ({
           <ActivityTypingComposer>
             <SendBoxMiddlewareProvider middleware={sendBoxMiddleware || EMPTY_ARRAY}>
               <SendBoxToolbarMiddlewareProvider middleware={sendBoxToolbarMiddleware || EMPTY_ARRAY}>
-                {typeof children === 'function' ? children(context) : children}
+                <GroupActivitiesComposer groupActivitiesMiddleware={singleToArray(groupActivitiesMiddleware)}>
+                  {typeof children === 'function' ? children(context) : children}
+                </GroupActivitiesComposer>
                 <ActivitySendStatusTelemetryComposer />
               </SendBoxToolbarMiddlewareProvider>
             </SendBoxMiddlewareProvider>
@@ -640,6 +649,7 @@ ComposerCore.defaultProps = {
   styleOptions: {},
   toastMiddleware: undefined,
   typingIndicatorMiddleware: undefined,
+  uiState: undefined,
   userID: '',
   username: ''
 };
@@ -672,7 +682,10 @@ 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.
+  // This is for internal use only. We don't allow customization of error box.
+  // - Functional component is of type PropTypes.func
+  // - Memoized functional component is of type PropTypes.object
+  internalErrorBoxClass: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
   locale: PropTypes.string,
   onTelemetry: PropTypes.func,
   overrideLocalizedStrings: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
@@ -683,6 +696,7 @@ ComposerCore.propTypes = {
   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
 };

package/src/hooks/index.ts

@@ -26,7 +26,8 @@ import useGetKeyByActivity from './useGetKeyByActivity';
 import useGetKeyByActivityId from './useGetKeyByActivityId';
 import useGetSendTimeoutForActivity from './useGetSendTimeoutForActivity';
 import useGrammars from './useGrammars';
-import useGroupActivities from './useGroupActivities';
+import useGroupActivities from '../providers/GroupActivities/useGroupActivities';
+import useGroupActivitiesByName from '../providers/GroupActivities/useGroupActivitiesByName';
 import useGroupTimestamp from './useGroupTimestamp';
 import useLanguage from './useLanguage';
 import useLastAcknowledgedActivityKey from './useLastAcknowledgedActivityKey';
@@ -66,6 +67,7 @@ import useTrackDimension from './useTrackDimension';
 import useTrackEvent from './useTrackEvent';
 import useTrackException from './useTrackException';
 import useTrackTiming from './useTrackTiming';
+import useUIState from './useUIState';
 import useUserID from './useUserID';
 import useUsername from './useUsername';
 import useVoiceSelector from './useVoiceSelector';
@@ -100,6 +102,7 @@ export {
   useGetSendTimeoutForActivity,
   useGrammars,
   useGroupActivities,
+  useGroupActivitiesByName,
   useGroupTimestamp,
   useLanguage,
   useLastAcknowledgedActivityKey,
@@ -139,6 +142,7 @@ export {
   useTrackEvent,
   useTrackException,
   useTrackTiming,
+  useUIState,
   useUserID,
   useUsername,
   useVoiceSelector

package/src/hooks/internal/SendBoxMiddleware.ts

@@ -4,8 +4,10 @@ const {
   initMiddleware: initSendBoxMiddleware,
   Provider: SendBoxMiddlewareProvider,
   Proxy: SendBoxMiddlewareProxy,
+  // False positive, `types` is used for its typing.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   types
-} = templateMiddleware<void, void, { className?: string | undefined }>('sendBoxMiddleware');
+} = templateMiddleware<undefined, void, { className?: string | undefined }>('sendBoxMiddleware');
 
 type SendBoxMiddleware = typeof types.middleware;
 type SendBoxMiddlewareProps = typeof types.props;