Chat Bubble UI Component

[dehamzah]

Chat bubble in WhatsApp has various variant. Lets document first the variant and we can prioritize building what important first.

• [ ] Chat bubble core components

  • [ ] Chat bubble has sender name on the top
  • [ ] Chat bubble can have the avatar profile picture on the left side
  • [ ] Chat bubble has time sent info on the bottom right
  • [ ] Chat bubble has checkmark status for message that has been sent, has arrived on other person, and has been read by the other person
  • [ ] Chat bubble has extra caret on the top left / right
  • [ ] Chat bubble possible to have action button on the bottom

• [ ] Chat bubble variants

  • [ ] Chat bubble can show the sender name or not show it (didn't show the sender name in private message)
  • [ ] Chat bubble sent from other person is on the left side and chat sent from me is on the right side
  • [ ] Chat bubble sent from other person is on white background and sent from me is on green background

• [ ] Chat bubble contents

  • [ ] Text
  • [ ] Image
  • [ ] Video
  • [ ] Cited other message content

Real component variant for reference

[dehamzah]

Found the various message type on their documentation: https://developers.facebook.com/docs/whatsapp/cloud-api/guides/send-messages