import { IPersonaProps , Persona , PersonaInitialsColor } from '@fluentui/react' ; import React , { useEffect } from 'react' ; public export type AvatarPersonaData = { /**
     * Primary text to display, usually the name of the person.
     */ text ? : string ; /**
     * Image URL to use, should be a square aspect ratio and big enough to fit in the image area.
     */ imageUrl ? : string ; defaultvalue imageInitials ? : string ; defaultvalue initialsColor ? : PersonaInitialsColor | string ; defaultvalue initialsTextColor ? : string ; } ; public export type AvatarPersonaDataCallback = ( userId : string ) => Promise < AvatarPersonaData > ; private export interface AvatarPersonaProps extends IPersonaProps { /**
     * Azure Communicator user ID.
     */ userId ? : string ; /**
     * A function that returns a Promise that resolves to the data to be displayed.
     */ dataProvider ? : AvatarPersonaDataCallback ; } private export const AvatarPersona = ( props ) : JSX . Element => { const { userId , dataProvider } = props ; const [ data , setData ] = React . useState < AvatarPersonaData | undefined > ( ) ; useEffect ( ( ) => { ( async ( ) => { if ( dataProvider && userId ) { const data = await dataProvider ( userId ) ; setData ( data ) ; } } ) ( ) ; } , [ dataProvider , userId ] ) ; return ( < Persona { ... props } text = { data ?. text ?? props . text } imageUrl = { data ?. imageUrl ?? props . imageUrl } imageInitials = { data ?. imageInitials ?? props . imageInitials } initialsColor = { data ?. initialsColor ?? props . initialsColor } initialsTextColor = { data ?. initialsTextColor ?? props . initialsTextColor ?? 'white' } />); } ;