You cannot select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
	
	
	
		
			3.9 KiB
		
	
	
	
			
		
		
	
	
			3.9 KiB
		
	
	
	
Name variations, 1:1 conversation
Note the five items in gear menu, and the second-level menu with disappearing messages options. Disappearing message set to 'off'.
With name and profile, verified
<util.ConversationContext theme={util.theme}>
  <ConversationHeader
    i18n={util.i18n}
    color="red"
    isVerified={true}
    avatarPath={util.gifObjectUrl}
    name="Someone 🔥 Somewhere"
    phoneNumber="(202) 555-0001"
    id="1"
    profileName="🔥Flames🔥"
    onSetDisappearingMessages={seconds =>
      console.log('onSetDisappearingMessages', seconds)
    }
    onDeleteMessages={() => console.log('onDeleteMessages')}
    onResetSession={() => console.log('onResetSession')}
    onShowSafetyNumber={() => console.log('onShowSafetyNumber')}
    onShowAllMedia={() => console.log('onShowAllMedia')}
    onShowGroupMembers={() => console.log('onShowGroupMembers')}
    onGoBack={() => console.log('onGoBack')}
  />
</util.ConversationContext>
With name, not verified, no avatar
<util.ConversationContext theme={util.theme}>
  <ConversationHeader
    i18n={util.i18n}
    color="blue"
    isVerified={false}
    name="Someone 🔥 Somewhere"
    phoneNumber="(202) 555-0002"
    id="2"
  />
</util.ConversationContext>
Profile, no name
<util.ConversationContext theme={util.theme}>
  <ConversationHeader
    i18n={util.i18n}
    color="teal"
    isVerified={false}
    phoneNumber="(202) 555-0003"
    id="3"
    profileName="🔥Flames🔥"
  />
</util.ConversationContext>
No name, no profile, no color
<util.ConversationContext theme={util.theme}>
  <ConversationHeader i18n={util.i18n} phoneNumber="(202) 555-0011" id="11" />
</util.ConversationContext>
With back button
<util.ConversationContext theme={util.theme}>
  <ConversationHeader
    showBackButton={true}
    color="deep_orange"
    i18n={util.i18n}
    phoneNumber="(202) 555-0004"
    id="4"
  />
</util.ConversationContext>
Disappearing messages set
<util.ConversationContext theme={util.theme}>
  <ConversationHeader
    color="indigo"
    i18n={util.i18n}
    phoneNumber="(202) 555-0005"
    id="5"
    expirationSettingName="10 seconds"
    timerOptions={[
      {
        name: 'off',
        value: 0,
      },
      {
        name: '10 seconds',
        value: 10,
      },
    ]}
    onSetDisappearingMessages={seconds =>
      console.log('onSetDisappearingMessages', seconds)
    }
    onDeleteMessages={() => console.log('onDeleteMessages')}
    onResetSession={() => console.log('onResetSession')}
    onShowSafetyNumber={() => console.log('onShowSafetyNumber')}
    onShowAllMedia={() => console.log('onShowAllMedia')}
    onShowGroupMembers={() => console.log('onShowGroupMembers')}
    onGoBack={() => console.log('onGoBack')}
  />
</util.ConversationContext>
In a group
Note that the menu should includes 'Show Members' instead of 'Show Safety Number'
<util.ConversationContext theme={util.theme}>
  <ConversationHeader
    i18n={util.i18n}
    color="green"
    phoneNumber="(202) 555-0006"
    id="6"
    isGroup={true}
    onSetDisappearingMessages={seconds =>
      console.log('onSetDisappearingMessages', seconds)
    }
    onDeleteMessages={() => console.log('onDeleteMessages')}
    onResetSession={() => console.log('onResetSession')}
    onShowSafetyNumber={() => console.log('onShowSafetyNumber')}
    onShowAllMedia={() => console.log('onShowAllMedia')}
    onShowGroupMembers={() => console.log('onShowGroupMembers')}
    onGoBack={() => console.log('onGoBack')}
  />
</util.ConversationContext>
In chat with yourself
This is the 'Note to self' conversation. Note that the menu should not have a 'Show Safety Number' entry.
<util.ConversationContext theme={util.theme}>
  <ConversationHeader
    color="cyan"
    i18n={util.i18n}
    phoneNumber="(202) 555-0007"
    id="7"
    isMe={true}
  />
</util.ConversationContext>