Message Bubble Component

### Component name
Message Bubble

### Figma link
_[Figma link](https://www.figma.com/file/iIjwDl9HjaaF1vlDU96h8K/INBOX-%C2%B7-Compound-iOS%2FAndroid-Components?type=design&node-id=141-22607&mode=design)_

# Designs
### Initial version
- [x] Text message
- [x] Timestamp (regular, error state, edited, over media)
- [x] Bubble type (Sent by you, received)
- [x] Horizontal padding to side of screen
- [x] Vertical spacing between same users messages
- [x] Border radius (single, start, middle, end)
- [x] Avatar and user names (in a DM or room)

### Second version
- [ ] Different message types (notice, emote, image, video, audio, file, sticker, location, poll, redacted, encrypted, unsupported)
- [x] Reactions - with, without, selected, unselected, different number of reactions
- [x] Reply - text reply, image reply, video reply, location reply
- [x] Read receipts - with and without read receipts. Variations for where read receipts sit depending on message width
- [ ] Vertical spacing between different messages and timeline items
- [ ] Additional timeline items (date separator, state event, grouped state event, read marker, pagination indicator, timeline start, encrypted history banner)

```[tasklist]
# Design phase
- [ ] Add Web, iOS & Android variant drafts to Compound Figma documents
- [ ] Create new tokens for
- [ ] Release styles
- [ ] Review web implementation & publish in shared Figma library
- [ ] Review mobile implementation & publish in shared Figma library
```

```[tasklist]
# Development phase
- [ ] Implement on Web
- [ ] Implement on Android
- [ ] Implement on iOS
```