Add hideAvatar to onFetchAvatarPersonaData API

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

@@ -136,11 +136,12 @@ export const FluentChatMessageComponent = (props: FluentChatMessageComponentWrap
         renderedAvatar = avatarComponent;
       }
     }
-    return (
+    return !renderedAvatar?.props ? (
       <div className={mergeStyles(chatAvatarStyle)}>
         {renderedAvatar ? renderedAvatar : <Persona {...personaOptions} />}
       </div>
-    );
+    ) : // When pass undefined to FluentChatMessage component, it will remove the unnecessary left margin
+    undefined;
   }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);
 
   const setMessageContainerRef = useCallback((node: HTMLDivElement | null) => {

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

@@ -39,6 +39,10 @@ export type AvatarPersonaData = {
    * It has '?' in place of initials, with static font and background colors
    */
   showUnknownPersonaCoin?: boolean;
+  /**
+   * If true, hide the entire avatar avatar element.
+   */
+  hideAvatar?: boolean;
 };
 
 /**
@@ -107,7 +111,7 @@ export const AvatarPersona = (props: AvatarPersonaProps): JSX.Element => {
     mergeStyles(activePersona, props.styles);
   }
 
-  return (
+  return !data?.hideAvatar ? (
     <Persona
       {...props}
       className={activePersona}
@@ -120,6 +124,8 @@ export const AvatarPersona = (props: AvatarPersonaProps): JSX.Element => {
       showOverflowTooltip={showOverflowTooltip ?? false}
       showUnknownPersonaCoin={data?.showUnknownPersonaCoin ?? props.showUnknownPersonaCoin ?? false}
     />
+  ) : (
+    <></>
   );
 };
 

samples/Chat/src/app/ChatScreen.tsx

@@ -105,7 +105,8 @@ export const ChatScreen = (props: ChatScreenProps): JSX.Element => {
           new Promise((resolve) => {
             return resolve({
               imageInitials: emoji,
-              initialsColor: emoji ? getBackgroundColor(emoji)?.backgroundColor : undefined
+              initialsColor: emoji ? getBackgroundColor(emoji)?.backgroundColor : undefined,
+              hideAvatar: true
             });
           })
       );