Use styleOptions at init

Author: compulim

packages/component/src/Composer.tsx

@@ -44,7 +44,7 @@ import { ScrollRelativeTranscriptScope } from './hooks/transcriptScrollRelative'
 import defaultActivityPolymiddleware from './Middleware/Activity/defaultActivityPolymiddleware';
 import createDefaultActivityStatusMiddleware from './Middleware/ActivityStatus/createCoreMiddleware';
 import createDefaultAttachmentForScreenReaderMiddleware from './Middleware/AttachmentForScreenReader/createCoreMiddleware';
-import defaultAvatarPolymiddleware from './Middleware/Avatar/defaultAvatarPolymiddleware';
+import createDefaultAvatarMiddleware from './Middleware/Avatar/createDefaultAvatarPolymiddleware';
 import createDefaultCardActionMiddleware from './Middleware/CardAction/createCoreMiddleware';
 import createDefaultScrollToEndButtonMiddleware from './Middleware/ScrollToEndButton/createScrollToEndButtonMiddleware';
 import createDefaultToastMiddleware from './Middleware/Toast/createCoreMiddleware';
@@ -426,6 +426,8 @@ const Composer = ({
     [cardActionMiddleware, theme.cardActionMiddleware]
   );
 
+  const defaultAvatarPolymiddleware = useMemo(() => createDefaultAvatarMiddleware(styleOptions), [styleOptions]);
+
   const patchedPolymiddleware = useMemoIterable<readonly Polymiddleware[]>(
     () =>
       Object.freeze([
@@ -436,7 +438,7 @@ const Composer = ({
         defaultActivityPolymiddleware,
         defaultAvatarPolymiddleware
       ]),
-    [polymiddleware, theme.polymiddleware]
+    [defaultAvatarPolymiddleware, polymiddleware, theme.polymiddleware]
   );
 
   const patchedToastMiddleware = useMemoIterable<readonly ToastMiddleware[]>(

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

@@ -0,0 +1,17 @@
+import type { StyleOptions } from 'botframework-webchat-api';
+import { avatarComponent, createAvatarPolymiddleware } from 'botframework-webchat-api/middleware';
+import DefaultAvatar from './DefaultAvatar';
+
+function createDefaultAvatarMiddleware(styleOptions: StyleOptions | undefined) {
+  const { botAvatarImage, botAvatarInitials, userAvatarImage, userAvatarInitials } = styleOptions ?? {};
+
+  return createAvatarPolymiddleware(_next => ({ activity }) => {
+    const fromUser = activity.from?.role === 'user';
+
+    return (fromUser ? userAvatarImage || userAvatarInitials : botAvatarImage || botAvatarInitials)
+      ? avatarComponent(DefaultAvatar, Object.freeze({ fromUser }))
+      : undefined;
+  });
+}
+
+export default createDefaultAvatarMiddleware;