Clean up

Author: compulim

packages/api-middleware/src/avatarPolymiddleware.tsx

@@ -1,7 +1,7 @@
 import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { type WebChatActivity } from 'botframework-webchat-core';
 import React, { memo, useMemo } from 'react';
-import { any, boolean, custom, object, pipe, readonly, safeParse, type InferInput } from 'valibot';
+import { any, custom, object, pipe, readonly, safeParse, type InferInput } from 'valibot';
 
 import templatePolymiddleware, {
   type InferHandler,
@@ -28,7 +28,6 @@ const {
   {
     readonly [__INTERNAL_DO_NOT_USE__avatarPolymiddlewareRequestStyleOptionsSymbol]: any;
     readonly activity: WebChatActivity;
-    readonly fromUser: boolean;
   },
   { readonly children?: never }
 >('avatar');
@@ -44,8 +43,7 @@ type AvatarPolymiddlewareProviderProps = InferProviderProps<typeof AvatarPolymid
 const avatarPolymiddlewareProxyPropsSchema = pipe(
   object({
     [__INTERNAL_DO_NOT_USE__avatarPolymiddlewareRequestStyleOptionsSymbol]: any(),
-    activity: custom<Readonly<WebChatActivity>>(value => safeParse(object({}), value).success),
-    fromUser: boolean()
+    activity: custom<Readonly<WebChatActivity>>(value => safeParse(object({}), value).success)
   }),
   readonly()
 );
@@ -54,20 +52,16 @@ type AvatarPolymiddlewareProxyProps = Readonly<InferInput<typeof avatarPolymiddl
 
 // A friendlier version than the organic <Proxy>.
 const AvatarPolymiddlewareProxy = memo(function AvatarPolymiddlewareProxy(props: AvatarPolymiddlewareProxyProps) {
-  const {
-    [__INTERNAL_DO_NOT_USE__avatarPolymiddlewareRequestStyleOptionsSymbol]: styleOptions,
-    activity,
-    fromUser
-  } = validateProps(avatarPolymiddlewareProxyPropsSchema, props);
+  const { [__INTERNAL_DO_NOT_USE__avatarPolymiddlewareRequestStyleOptionsSymbol]: styleOptions, activity } =
+    validateProps(avatarPolymiddlewareProxyPropsSchema, props);
 
   const request = useMemo(
     () =>
       Object.freeze({
         [__INTERNAL_DO_NOT_USE__avatarPolymiddlewareRequestStyleOptionsSymbol]: styleOptions,
-        activity,
-        fromUser
+        activity
       }),
-    [activity, fromUser, styleOptions]
+    [activity, styleOptions]
   );
 
   return <Proxy request={request} />;

packages/api/src/hooks/useCreateAvatarRenderer.ts

@@ -3,35 +3,38 @@ import {
   useBuildRenderAvatarCallback
 } from '@msinternal/botframework-webchat-api-middleware';
 import type { WebChatActivity } from 'botframework-webchat-core';
-import { useMemo, type ReactNode } from 'react';
+import { useCallback, type ReactNode } from 'react';
+import { useRefFrom } from 'use-ref-from';
 import useStyleOptions from './useStyleOptions';
 
-/**
- * @deprecated Use `<AvatarPolymiddlewareProxy>` or `useBuildRenderAvatarCallback` instead. This hook will be removed on or after 2028-03-16.
- */
-export default function useCreateAvatarRenderer(): ({
+type CreateAvatarRendererCallback = ({
   activity
 }: {
   activity: WebChatActivity;
-}) => false | (() => Exclude<ReactNode, boolean | null | undefined>) {
+}) => false | (() => Exclude<ReactNode, boolean | null | undefined>);
+
+/**
+ * @deprecated Use `<AvatarPolymiddlewareProxy>` or `useBuildRenderAvatarCallback` instead. This hook will be removed on or after 2028-03-16.
+ */
+export default function useCreateAvatarRenderer(): CreateAvatarRendererCallback {
   const [styleOptions] = useStyleOptions();
+  const styleOptionsRef = useRefFrom(styleOptions);
   const buildRenderAvatar = useBuildRenderAvatarCallback();
 
-  return useMemo(
-    () =>
-      ({ activity }) => {
-        const { from: { role } = {} }: { from?: { role?: string } } = activity;
-
-        const renderer = buildRenderAvatar(
-          Object.freeze({
-            activity,
-            fromUser: role === 'user',
-            [__INTERNAL_DO_NOT_USE__avatarPolymiddlewareRequestStyleOptionsSymbol]: styleOptions
-          })
-        );
+  // TODO: [P1] We should move this function into `api-middleware`.
+  //       However, it use `useStyleOptions` which is from `api` package.
+  //       In order to do that, we need to build a new `api-style-options` package first.
+  return useCallback<CreateAvatarRendererCallback>(
+    ({ activity }) => {
+      const renderer = buildRenderAvatar(
+        Object.freeze({
+          activity,
+          [__INTERNAL_DO_NOT_USE__avatarPolymiddlewareRequestStyleOptionsSymbol]: styleOptionsRef.current
+        })
+      );
 
-        return renderer ? (): ReactNode => renderer({}) : false;
-      },
-    [buildRenderAvatar, styleOptions]
+      return renderer ? (): ReactNode => renderer({}) : false;
+    },
+    [buildRenderAvatar, styleOptionsRef]
   );
 }

packages/api/src/legacy/createAvatarPolymiddlewareFromLegacy.tsx

@@ -51,7 +51,9 @@ function createAvatarPolymiddlewareFromLegacy(...middlewares: readonly LegacyAva
       ({ [__INTERNAL_DO_NOT_USE__legacyAvatarMiddlewareOriginalRequestSymbol]: originalRequest }) => {
         if (!originalRequest) {
           // TODO: Add a test
-          throw new Error('botframework-webchat: `avatarMiddleware` must not modify the request object');
+          throw new Error(
+            'botframework-webchat: `avatarMiddleware` must pass the whole request object to downstreamers'
+          );
         }
 
         // Pass styleOptions through the polymiddleware chain via the internal runtime extension
@@ -63,16 +65,13 @@ function createAvatarPolymiddlewareFromLegacy(...middlewares: readonly LegacyAva
     );
 
     return request => {
-      const {
-        [__INTERNAL_DO_NOT_USE__avatarPolymiddlewareRequestStyleOptionsSymbol]: styleOptions,
-        activity,
-        fromUser
-      } = request;
+      const { [__INTERNAL_DO_NOT_USE__avatarPolymiddlewareRequestStyleOptionsSymbol]: styleOptions, activity } =
+        request;
 
       const legacyResult = legacyHandler(
         Object.freeze({
           activity,
-          fromUser,
+          fromUser: activity.from?.role === 'user',
           styleOptions,
           [__INTERNAL_DO_NOT_USE__legacyAvatarMiddlewareOriginalRequestSymbol]: request
         })

packages/component/src/Middleware/Avatar/defaultAvatarPolymiddleware.tsx

@@ -5,17 +5,20 @@ import DefaultAvatar from './DefaultAvatar';
 const defaultAvatarMiddleware = createAvatarPolymiddleware(
   _next =>
     ({
-      fromUser,
+      activity,
       [__INTERNAL_DO_NOT_USE__avatarPolymiddlewareRequestStyleOptionsSymbol]: {
         botAvatarImage,
         botAvatarInitials,
         userAvatarImage,
         userAvatarInitials
       }
-    }) =>
-      (fromUser ? userAvatarImage || userAvatarInitials : botAvatarImage || botAvatarInitials)
+    }) => {
+      const fromUser = activity.from?.role === 'user';
+
+      return (fromUser ? userAvatarImage || userAvatarInitials : botAvatarImage || botAvatarInitials)
         ? avatarComponent(DefaultAvatar, Object.freeze({ fromUser }))
-        : undefined
+        : undefined;
+    }
 );
 
 export default defaultAvatarMiddleware;