Prefix Legacy* and allow extraneous activity props

Author: compulim

packages/api/src/hooks/Composer.tsx

@@ -1,5 +1,8 @@
 import { PolyMiddlewareComposer, type PolyMiddleware } from '@msinternal/botframework-webchat-middleware';
-import { type ActivityMiddleware, type AttachmentMiddleware } from '@msinternal/botframework-webchat-middleware/legacy';
+import {
+  type AttachmentMiddleware,
+  type LegacyActivityMiddleware
+} from '@msinternal/botframework-webchat-middleware/legacy';
 import { ReduxStoreComposer } from '@msinternal/botframework-webchat-redux-store';
 import {
   clearSuggestedActions,
@@ -210,7 +213,7 @@ type ComposerCoreProps = Readonly<{
    *
    * @deprecated
    */
-  activityMiddleware?: OneOrMany<ActivityMiddleware>;
+  activityMiddleware?: OneOrMany<LegacyActivityMiddleware>;
   activityStatusMiddleware?: OneOrMany<ActivityStatusMiddleware>;
   attachmentForScreenReaderMiddleware?: OneOrMany<AttachmentForScreenReaderMiddleware>;
   attachmentMiddleware?: OneOrMany<AttachmentMiddleware>;

packages/api/src/hooks/internal/useCreateActivityRendererInternal.ts

@@ -1,27 +1,25 @@
 import {
-  type ActivityComponentFactory,
-  type RenderAttachment
+  type LegacyActivityComponentFactory,
+  type LegacyActivityProps
 } from '@msinternal/botframework-webchat-middleware/legacy';
 import { useCallback } from 'react';
 
 import { useBuildRenderActivityCallback } from '@msinternal/botframework-webchat-middleware';
 
 // TODO: [P*] Add tests.
-export default function useCreateActivityRendererInternal(
-  /**
-   * TODO: [P*] Need a deprecation path.
-   *
-   * @deprecated
-   */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  renderAttachmentOverride?: RenderAttachment
-): ActivityComponentFactory {
+export default function useCreateActivityRendererInternal(): LegacyActivityComponentFactory {
   const render = useBuildRenderActivityCallback();
 
   return useCallback(
     ({ activity }) =>
-      () =>
-        render({ activity })?.({}),
+      // TODO: [P2] TypeScript turns `{ children?: never | undefined }` into `{ children?: undefined }`.
+      //            Thus we are getting a typing error here.
+      //            Maybe moving to a stricter tsconfig would help removing the line below.
+      //
+      //            Use the following commented line once we move to stricter tsconfig.
+      //            (props: LegacyActivityProps) =>
+      (props: LegacyActivityProps & { children?: never }) =>
+        render({ activity })?.(props),
     [render]
   );
 }

packages/api/src/hooks/useCreateActivityRenderer.ts

@@ -1,8 +1,8 @@
-import { type ActivityComponentFactory } from '@msinternal/botframework-webchat-middleware/legacy';
+import { type LegacyActivityComponentFactory } from '@msinternal/botframework-webchat-middleware/legacy';
 import useCreateActivityRendererInternal from './internal/useCreateActivityRendererInternal';
 
 // The newer useCreateActivityRenderer() hook does not support override renderAttachment().
 // Only the deprecated useRenderActivity() hook support overriding renderAttachment().
-export default function useCreateActivityRenderer(): ActivityComponentFactory {
+export default function useCreateActivityRenderer(): LegacyActivityComponentFactory {
   return useCreateActivityRendererInternal();
 }

packages/api/src/index.ts

@@ -1,8 +1,8 @@
 // TODO: Move the pattern to re-export.
 import {
-  type ActivityComponentFactory,
-  type ActivityMiddleware,
   type AttachmentMiddleware,
+  type LegacyActivityComponentFactory,
+  type LegacyActivityMiddleware,
   type RenderAttachment
 } from '@msinternal/botframework-webchat-middleware/legacy';
 import StyleOptions, { StrictStyleOptions } from './StyleOptions';
@@ -63,8 +63,10 @@ const buildInfo = { buildTool, moduleFormat, version };
 export { buildInfo, Composer, concatMiddleware, defaultStyleOptions, hooks, localize, normalizeStyleOptions, version };
 
 export type {
-  ActivityComponentFactory,
-  ActivityMiddleware,
+  /** @deprecated Use `polyMiddleware` instead, this will be removed on or after 2027-08-16. */
+  LegacyActivityComponentFactory as ActivityComponentFactory,
+  /** @deprecated Use `polyMiddleware` instead, this will be removed on or after 2027-08-16. */
+  LegacyActivityMiddleware as ActivityMiddleware,
   ActivityStatusMiddleware,
   ActivityStatusRenderer,
   AttachmentForScreenReaderComponentFactory,

packages/api/src/internal.ts

@@ -2,9 +2,9 @@ import LowPriorityDecoratorComposer from './decorator/internal/LowPriorityDecora
 import useSetDictateState from './hooks/internal/useSetDictateState';
 
 export {
-  bridgeComponentPropsSchema,
   createActivityPolyMiddlewareFromLegacy,
-  type BridgeComponentProps
+  legacyActivityBridgeComponentPropsSchema,
+  type LegacyActivityBridgeComponentProps
 } from '@msinternal/botframework-webchat-middleware';
 
 export { LowPriorityDecoratorComposer, useSetDictateState };

packages/component/src/Middleware/Activity/private/LegacyActivityBridge.tsx

@@ -1,7 +1,10 @@
 import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { hooks } from 'botframework-webchat-api';
-import { bridgeComponentPropsSchema, type BridgeComponentProps } from 'botframework-webchat-api/internal';
-import React, { Fragment, memo, useMemo } from 'react';
+import {
+  legacyActivityBridgeComponentPropsSchema,
+  type LegacyActivityBridgeComponentProps
+} from 'botframework-webchat-api/internal';
+import React, { Fragment, memo, useMemo, type ReactNode } from 'react';
 
 import isZeroOrPositive from '../../../Utils/isZeroOrPositive';
 import useFirstActivityInSenderGroup from '../../ActivityGrouping/ui/SenderGrouping/useFirstActivity';
@@ -11,8 +14,13 @@ import useLastActivityInStatusGroup from '../../ActivityGrouping/ui/StatusGroupi
 
 const { useCreateActivityStatusRenderer, useCreateAvatarRenderer, useRenderAttachment, useStyleOptions } = hooks;
 
-function LegacyActivityBridge(props: BridgeComponentProps) {
-  const { activity, render } = validateProps(bridgeComponentPropsSchema, props);
+function LegacyActivityBridge(
+  props: LegacyActivityBridgeComponentProps & {
+    readonly renderActivityStatus: (options: { hideTimestamp: boolean }) => ReactNode;
+  }
+) {
+  const { activity, render } = validateProps(legacyActivityBridgeComponentPropsSchema, props);
+  const { renderActivityStatus: renderActivityStatusFromProps } = props;
 
   const [{ bubbleFromUserNubOffset, bubbleNubOffset, groupTimestamp, showAvatarInGroup }] = useStyleOptions();
   const [firstActivityInSenderGroup] = useFirstActivityInSenderGroup();
@@ -40,11 +48,12 @@ function LegacyActivityBridge(props: BridgeComponentProps) {
   const isTopSideUserNub = isZeroOrPositive(bubbleFromUserNubOffset);
   const renderActivityStatus = useMemo(
     () =>
+      renderActivityStatusFromProps ||
       createActivityStatusRenderer({
         activity,
         nextVisibleActivity: undefined
       }),
-    [activity, createActivityStatusRenderer]
+    [activity, createActivityStatusRenderer, renderActivityStatusFromProps]
   );
 
   const hideTimestamp = hideAllTimestamps || !isLastInStatusGroup;

packages/middleware/src/index.ts

@@ -16,11 +16,11 @@ export {
 } from './activityPolyMiddleware';
 
 export {
-  bridgeComponentPropsSchema,
   default as createActivityPolyMiddlewareFromLegacy,
   fallbackComponentPropsSchema,
-  type BridgeComponentProps,
-  type FallbackComponentProps
+  legacyActivityBridgeComponentPropsSchema,
+  type FallbackComponentProps,
+  type LegacyActivityBridgeComponentProps
 } from './internal/createActivityPolyMiddlewareFromLegacy';
 
 export { default as PolyMiddlewareComposer } from './PolyMiddlewareComposer';

packages/middleware/src/internal/createActivityPolyMiddlewareFromLegacy.tsx

@@ -1,7 +1,7 @@
 import { type WebChatActivity } from 'botframework-webchat-core';
 import { composeEnhancer } from 'handler-chain';
 import React, { type ComponentType, type ReactNode } from 'react';
-import type ActivityMiddleware from '../legacy/activityMiddleware';
+import { type LegacyActivityMiddleware } from '../legacy/activityMiddleware';
 import { type RenderAttachment } from '../legacy/attachmentMiddleware';
 
 import { custom, function_, never, object, optional, pipe, readonly, safeParse, type InferInput } from 'valibot';
@@ -23,7 +23,7 @@ type LegacyRenderFunction = (
   }
 ) => Exclude<ReactNode, boolean>;
 
-const bridgeComponentPropsSchema = pipe(
+const legacyActivityBridgeComponentPropsSchema = pipe(
   object({
     activity: webChatActivitySchema,
     children: optional(never()),
@@ -32,7 +32,9 @@ const bridgeComponentPropsSchema = pipe(
   readonly()
 );
 
-type BridgeComponentProps = Readonly<InferInput<typeof bridgeComponentPropsSchema> & { children?: never }>;
+type LegacyActivityBridgeComponentProps = Readonly<
+  InferInput<typeof legacyActivityBridgeComponentPropsSchema> & { children?: never }
+>;
 
 const fallbackComponentPropsSchema = pipe(
   object({
@@ -45,16 +47,16 @@ const fallbackComponentPropsSchema = pipe(
 type FallbackComponentProps = Readonly<InferInput<typeof fallbackComponentPropsSchema> & { children?: never }>;
 
 function createActivityPolyMiddlewareFromLegacy(
-  bridgeComponent: ComponentType<BridgeComponentProps>,
+  bridgeComponent: ComponentType<LegacyActivityBridgeComponentProps>,
   // Use lowercase for argument name, but we need uppercase for JSX.
   fallbackComponent: ComponentType<FallbackComponentProps>,
-  ...middleware: readonly ActivityMiddleware[]
+  ...middleware: readonly LegacyActivityMiddleware[]
 ): ActivityPolyMiddleware;
 
 function createActivityPolyMiddlewareFromLegacy(
-  bridgeComponent: ComponentType<BridgeComponentProps>,
+  bridgeComponent: ComponentType<LegacyActivityBridgeComponentProps>,
   FallbackComponent: ComponentType<FallbackComponentProps>,
-  ...middleware: readonly ActivityMiddleware[]
+  ...middleware: readonly LegacyActivityMiddleware[]
 ): ActivityPolyMiddleware {
   const legacyEnhancer = composeEnhancer(...middleware.map(middleware => middleware()));
 
@@ -77,8 +79,8 @@ function createActivityPolyMiddlewareFromLegacy(
 export default createActivityPolyMiddlewareFromLegacy;
 
 export {
-  bridgeComponentPropsSchema,
   fallbackComponentPropsSchema,
-  type BridgeComponentProps,
-  type FallbackComponentProps
+  legacyActivityBridgeComponentPropsSchema,
+  type FallbackComponentProps,
+  type LegacyActivityBridgeComponentProps
 };

packages/middleware/src/legacy.ts

@@ -1,6 +1,7 @@
 export {
-  type ActivityComponentFactory,
-  type default as ActivityMiddleware,
+  type LegacyActivityComponentFactory,
+  type LegacyActivityMiddleware,
+  type LegacyActivityProps,
   type LegacyActivityRenderer
 } from './legacy/activityMiddleware';
 export { type default as AttachmentMiddleware, type RenderAttachment } from './legacy/attachmentMiddleware';

packages/middleware/src/legacy/activityMiddleware.ts

@@ -4,35 +4,37 @@ import { type ReactNode } from 'react';
 
 import { type RenderAttachment } from './attachmentMiddleware';
 
-type ActivityProps = {
+// TODO: [P*] Consider prefixing all these with Legacy*.
+type LegacyActivityProps = {
+  children?: never | undefined;
   hideTimestamp: boolean;
   renderActivityStatus: (options: { hideTimestamp: boolean }) => ReactNode;
   renderAvatar: false | (() => Exclude<ReactNode, boolean | null | undefined>);
   showCallout: boolean;
 };
 
-type ActivityComponent = (props: ActivityProps) => Exclude<ReactNode, boolean | null | undefined>;
+type LegacyActivityComponent = (props: LegacyActivityProps) => Exclude<ReactNode, boolean | null | undefined>;
 
-type ActivityComponentFactoryOptions = {
+type LegacyActivityComponentFactoryOptions = {
   activity: WebChatActivity;
   nextVisibleActivity: WebChatActivity;
 };
 
-type ActivityComponentFactory = (options: ActivityComponentFactoryOptions) => ActivityComponent | false;
+type LegacyActivityComponentFactory = (
+  options: LegacyActivityComponentFactoryOptions
+) => LegacyActivityComponent | false;
 
 // TODO: [P2] This is inherited from our older signature (pre-hook) which requires passing "renderAttachment" argument.
 //       With hooks, the middleware should not need "renderAttachment", they can grab it from "useCreateAttachmentRenderer" hook.
 type LegacyRenderActivity = (
   renderAttachment: RenderAttachment,
-  { hideTimestamp, renderActivityStatus, renderAvatar, showCallout }: ActivityProps
+  { hideTimestamp, renderActivityStatus, renderAvatar, showCallout }: LegacyActivityProps
 ) => Exclude<ReactNode, boolean>;
 
-type LegacyActivityRenderer = (options: ActivityComponentFactoryOptions) => LegacyRenderActivity | false;
+type LegacyActivityRenderer = (options: LegacyActivityComponentFactoryOptions) => LegacyRenderActivity | false;
 
 // The middleware created by the web developer, are using the legacy signature (with "renderAttachment" argument).
-type ActivityEnhancer = (next: LegacyActivityRenderer) => LegacyActivityRenderer;
-type ActivityMiddleware = () => ActivityEnhancer;
+type LegacyActivityEnhancer = (next: LegacyActivityRenderer) => LegacyActivityRenderer;
+type LegacyActivityMiddleware = () => LegacyActivityEnhancer;
 
-export default ActivityMiddleware;
-
-export type { ActivityComponentFactory, LegacyActivityRenderer };
+export type { LegacyActivityComponentFactory, LegacyActivityMiddleware, LegacyActivityProps, LegacyActivityRenderer };