Fix legacy sendBox bridge types and build errors

Co-authored-by: compulim <1622400+compulim@users.noreply.github.com>

Author: Claude

packages/api/src/legacy/LegacySendBoxBridge.tsx

@@ -1,22 +1,20 @@
 import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import React, { Fragment, memo } from 'react';
+import React, { Fragment, memo, useMemo } from 'react';
 
 import { legacySendBoxBridgeComponentPropsSchema, type LegacySendBoxBridgeComponentProps } from './createSendBoxPolymiddlewareFromLegacy';
 
 /**
  * This component is solely for `createSendBoxPolymiddlewareFromLegacy`.
  *
  * @param props Legacy sendBox middleware props, includes `className` and `render`.
- * @returns A sendBox node rendered using the `props.render` component.
+ * @returns A sendBox node rendered using the `props.render` function.
  */
 function LegacySendBoxBridge(props: LegacySendBoxBridgeComponentProps) {
-  const { className, render: RenderComponent } = validateProps(legacySendBoxBridgeComponentPropsSchema, props);
+  const { className, render } = validateProps(legacySendBoxBridgeComponentPropsSchema, props);
 
-  return (
-    <Fragment>
-      <RenderComponent className={className} />
-    </Fragment>
-  );
+  const children = useMemo(() => render({ className }), [className, render]);
+
+  return <Fragment>{children}</Fragment>;
 }
 
 export default memo(LegacySendBoxBridge);

packages/api/src/legacy/createSendBoxPolymiddlewareFromLegacy.tsx

@@ -4,13 +4,14 @@ import {
   type SendBoxPolymiddleware
 } from '@msinternal/botframework-webchat-api-middleware';
 import { type LegacySendBoxMiddleware } from '@msinternal/botframework-webchat-api-middleware/legacy';
-import { composeEnhancer } from 'handler-chain';
-import { type ComponentType } from 'react';
+import { composeEnhancer, type Enhancer } from 'handler-chain';
+import { type ReactNode } from 'react';
 import { custom, function_, never, object, optional, pipe, readonly, safeParse, string, type InferInput } from 'valibot';
 
 import LegacySendBoxBridge from './LegacySendBoxBridge';
 
-type LegacySendBoxRenderFunction = ComponentType<{ readonly className?: string | undefined }>;
+type LegacySendBoxRenderFunction = (props: { readonly className?: string | undefined }) => ReactNode;
+type LegacySendBoxComponent = ReactNode;
 
 const legacySendBoxBridgeComponentPropsSchema = pipe(
   object({
@@ -35,7 +36,9 @@ type LegacySendBoxBridgeComponentProps = Readonly<
 function createSendBoxPolymiddlewareFromLegacy(
   ...middleware: readonly LegacySendBoxMiddleware[]
 ): SendBoxPolymiddleware {
-  const legacyEnhancer = composeEnhancer(...middleware.map(middleware => middleware()));
+  const legacyEnhancer: Enhancer<LegacySendBoxComponent, void> = composeEnhancer<LegacySendBoxComponent, void>(
+    ...(middleware.map(middleware => middleware()) as Enhancer<LegacySendBoxComponent, void>[])
+  );
 
   return createSendBoxPolymiddleware(next => {
     const legacyHandler = legacyEnhancer(() => {
@@ -47,7 +50,7 @@ function createSendBoxPolymiddlewareFromLegacy(
     return () => {
       const legacyResult = legacyHandler();
 
-      return legacyResult ? sendBoxComponent(LegacySendBoxBridge, { render: legacyResult() }) : undefined;
+      return legacyResult ? sendBoxComponent(LegacySendBoxBridge, { render: () => legacyResult }) : undefined;
     };
   });
 }