### Plain messages
Note that timestamp and status can be hidden with the `collapseMetadata` boolean property.
```jsx
console.log('onDownload')}
onReply={() => console.log('onReply')}
onShowDetail={() => console.log('onShowDetail')}
onDelete={() => console.log('onDelete')}
/>
console.log('onDownload')}
onReply={() => console.log('onReply')}
onShowDetail={() => console.log('onShowDetail')}
onDelete={() => console.log('onDelete')}
/>
console.log('onDownload')}
onReply={() => console.log('onReply')}
onShowDetail={() => console.log('onShowDetail')}
onDelete={() => console.log('onDelete')}
/>
console.log('onDownload')}
onReply={() => console.log('onReply')}
onShowDetail={() => console.log('onShowDetail')}
onDelete={() => console.log('onDelete')}
/>
console.log('onDownload')}
onReply={() => console.log('onReply')}
onShowDetail={() => console.log('onShowDetail')}
onDelete={() => console.log('onDelete')}
/>
console.log('onDownload')}
onReply={() => console.log('onReply')}
onShowDetail={() => console.log('onShowDetail')}
onDelete={() => console.log('onDelete')}
/>
console.log('onDownload')}
onReply={() => console.log('onReply')}
onShowDetail={() => console.log('onShowDetail')}
onDelete={() => console.log('onDelete')}
/>
console.log('onDownload')}
onReply={() => console.log('onReply')}
onShowDetail={() => console.log('onShowDetail')}
onDelete={() => console.log('onDelete')}
/>
console.log('onDownload')}
onReply={() => console.log('onReply')}
onShowDetail={() => console.log('onShowDetail')}
onDelete={() => console.log('onDelete')}
/>
console.log('onDownload')}
onReply={() => console.log('onReply')}
onShowDetail={() => console.log('onShowDetail')}
onDelete={() => console.log('onDelete')}
/>
```
### Status
```jsx
console.log('onRetrySend')}
/>
console.log('onRetrySend')}
/>
```
### Long data
```jsx
```
### With an attachment
#### Image with caption
```jsx
console.log('onClickAttachment')}
onDownload={() => console.log('onDownload')}
onReply={() => console.log('onReply')}
/>
console.log('onClickAttachment')}
onDownload={() => console.log('onDownload')}
onReply={() => console.log('onReply')}
/>
console.log('onClickAttachment')}
onDownload={() => console.log('onDownload')}
onReply={() => console.log('onReply')}
/>
console.log('onClickAttachment')}
onDownload={() => console.log('onDownload')}
onReply={() => console.log('onReply')}
/>
```
#### Image
First, showing the metadata overlay on dark and light images, then a message with `collapseMetadata` set.
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### Outgoing image with status
Note that the delivered indicator is always Signal Blue, not the conversation color.
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### Image with portrait aspect ratio
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### Image with portrait aspect ratio and caption
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### Image with landscape aspect ratio
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### Image with landscape aspect ratio and caption
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### Video with caption
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### Video
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### Missing images and videos
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### Broken source URL images and videos
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### Audio with caption
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### Audio
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### Voice message
Voice notes are not shown any differently from audio attachments.
#### Other file type with caption
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### Other file type
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
### In a group conversation
Note that the author avatar goes away if `collapseMetadata` is set.
```jsx
console.log('onClickAttachment')}
authorAvatarPath={util.gifObjectUrl}
/>
console.log('onClickAttachment')}
authorAvatarPath={util.gifObjectUrl}
/>
console.log('onClickAttachment')}
authorAvatarPath={util.gifObjectUrl}
/>
console.log('onClickAttachment')}
/>
```