### With avatar

```jsx
<util.ConversationContext theme={util.theme}>
  <AvatarPopup
    color="pink"
    profileName="John Smith"
    phoneNumber="(800) 555-0001"
    avatarPath={util.gifObjectUrl}
    conversationType="direct"
    onViewPreferences={(...args) => console.log('onViewPreferences', args)}
    onViewArchive={(...args) => console.log('onViewArchive', args)}
    i18n={util.i18n}
  />
</util.ConversationContext>
```

### With no avatar

```jsx
<util.ConversationContext theme={util.theme}>
  <AvatarPopup
    color="green"
    profileName="John Smith"
    phoneNumber="(800) 555-0001"
    conversationType="direct"
    onViewPreferences={(...args) => console.log('onViewPreferences', args)}
    onViewArchive={(...args) => console.log('onViewArchive', args)}
    i18n={util.i18n}
  />
</util.ConversationContext>
```

### With empty profileName

```jsx
<util.ConversationContext theme={util.theme}>
  <AvatarPopup
    color="green"
    profileName={null}
    phoneNumber="(800) 555-0001"
    conversationType="direct"
    onViewPreferences={(...args) => console.log('onViewPreferences', args)}
    onViewArchive={(...args) => console.log('onViewArchive', args)}
    i18n={util.i18n}
  />
</util.ConversationContext>
```