Enable Avatar Hiding in MessageThread

change-beta/@azure-communication-react-ca315b94-3fd4-4d6b-8dfe-24f17fa1b7a2.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "improvement",
+  "workstream": "MessageThread Component",
+  "comment": "Allow onRenderAvatar to return undefined to hide avatar",
+  "packageName": "@azure/communication-react",
+  "email": "3941071+emlynmac@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-ca315b94-3fd4-4d6b-8dfe-24f17fa1b7a2.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "improvement",
+  "workstream": "MessageThread Component",
+  "comment": "Allow onRenderAvatar to return undefined to hide avatar",
+  "packageName": "@azure/communication-react",
+  "email": "3941071+emlynmac@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.tsx

@@ -128,12 +128,40 @@ export const FluentChatMessageComponent = (props: FluentChatMessageComponentWrap
     return { className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) };
   }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);
 
+  const avatar = useMemo(() => {
+    const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
+    const personaOptions: IPersona = {
+      hidePersonaDetails: true,
+      size: PersonaSize.size32,
+      text: message.senderDisplayName,
+      showOverflowTooltip: false
+    };
+    let renderedAvatar;
+    if (onRenderAvatar) {
+      const avatarComponent = onRenderAvatar?.(message.senderId, personaOptions);
+      if (!avatarComponent) {
+        return undefined;
+      } else {
+        renderedAvatar = avatarComponent;
+      }
+    }
+    return (
+      <div className={mergeStyles(chatAvatarStyle)}>
+        {renderedAvatar ? renderedAvatar : <Persona {...personaOptions} />}
+      </div>
+    );
+  }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);
+
   const messageBodyProps = useMemo(() => {
     return {
       // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
       className: mergeClasses(
         chatMessageRenderStyles.bodyCommon,
-        !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar,
+        !shouldShowAvatar
+          ? avatar
+            ? chatMessageRenderStyles.bodyWithoutAvatar
+            : chatMessageRenderStyles.bodyHiddenAvatar
+          : chatMessageRenderStyles.bodyWithAvatar,
         shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap,
         mergeStyles(styles?.chatItemMessageContainer)
       ),
@@ -145,31 +173,18 @@ export const FluentChatMessageComponent = (props: FluentChatMessageComponentWrap
       role: 'none'
     };
   }, [
-    chatMessageRenderStyles.avatarNoOverlap,
-    chatMessageRenderStyles.avatarOverlap,
     chatMessageRenderStyles.bodyCommon,
-    chatMessageRenderStyles.bodyWithAvatar,
     chatMessageRenderStyles.bodyWithoutAvatar,
-    shouldOverlapAvatarAndMessage,
+    chatMessageRenderStyles.bodyHiddenAvatar,
+    chatMessageRenderStyles.bodyWithAvatar,
+    chatMessageRenderStyles.avatarOverlap,
+    chatMessageRenderStyles.avatarNoOverlap,
     shouldShowAvatar,
+    avatar,
+    shouldOverlapAvatarAndMessage,
     styles?.chatItemMessageContainer
   ]);
 
-  const avatar = useMemo(() => {
-    const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
-    const personaOptions: IPersona = {
-      hidePersonaDetails: true,
-      size: PersonaSize.size32,
-      text: message.senderDisplayName,
-      showOverflowTooltip: false
-    };
-    return (
-      <div className={mergeStyles(chatAvatarStyle)}>
-        {onRenderAvatar ? onRenderAvatar?.(message.senderId, personaOptions) : <Persona {...personaOptions} />}
-      </div>
-    );
-  }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);
-
   // Fluent UI message components are used here as for default message renderer,
   // timestamp and author name should be shown but they aren't shown for custom renderer.
   // More investigations are needed to check if this can be simplified with states.

packages/react-components/src/components/styles/MessageThread.styles.ts

@@ -130,6 +130,10 @@ export const useChatMessageRenderStyles = makeStyles({
     marginLeft: `${AVATAR_MARGIN_LEFT}rem`,
     marginTop: '0'
   },
+  bodyHiddenAvatar: {
+    marginLeft: 0,
+    marginTop: 0
+  },
   bodyWithAvatar: {
     marginLeft: `0`,
     marginTop: '0.75rem'

packages/react-composites/src/composites/common/AvatarPersona.tsx

@@ -47,7 +47,7 @@ export type AvatarPersonaData = {
  *
  * @public
  */
-export type AvatarPersonaDataCallback = (userId: string) => Promise<AvatarPersonaData>;
+export type AvatarPersonaDataCallback = (userId: string) => Promise<AvatarPersonaData | undefined>;
 
 /**
  * @private