First-class profile name rendering

ts/components/conversation/MessageDetail.tsx

@@ -9,7 +9,9 @@ import { ColorType, LocalizerType } from '../../types/Util';
 
 interface Contact {
   status: string;
-  phoneNumber: string;
+
+  title: string;
+  phoneNumber?: string;
   name?: string;
   profileName?: string;
   avatarPath?: string;
@@ -49,7 +51,14 @@ export class MessageDetail extends React.Component<Props> {
 
   public renderAvatar(contact: Contact) {
     const { i18n } = this.props;
-    const { avatarPath, color, phoneNumber, name, profileName } = contact;
+    const {
+      avatarPath,
+      color,
+      phoneNumber,
+      name,
+      profileName,
+      title,
+    } = contact;
 
     return (
       <Avatar
@@ -60,6 +69,7 @@ export class MessageDetail extends React.Component<Props> {
         name={name}
         phoneNumber={phoneNumber}
         profileName={profileName}
+        title={title}
         size={52}
       />
     );
@@ -123,6 +133,8 @@ export class MessageDetail extends React.Component<Props> {
               phoneNumber={contact.phoneNumber}
               name={contact.name}
               profileName={contact.profileName}
+              title={contact.title}
+              i18n={i18n}
             />
           </div>
           {errors.map((error, index) => (