### 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')}
/>
console.log('onRetrySend')}
/>
console.log('onRetrySend')}
/>
```
### All colors
```jsx
```
### 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')}
/>
```
#### Multiple images
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### Multiple images with caption
```jsx
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')}
/>
console.log('onClickAttachment')}
expirationLength={5 * 60 * 1000}
expirationTimestamp={Date.now() + 5 * 60 * 1000}
/>
console.log('onClickAttachment')}
expirationLength={5 * 60 * 1000}
expirationTimestamp={Date.now() + 5 * 60 * 1000}
/>
```
#### 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')}
/>
```
#### Image/video which is too big
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### Image/video missing height/width
```jsx
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')}
/>
```
#### Dangerous file type
```jsx
console.log('onClickAttachment - isDangerous:', isDangerous)
}
/>
console.log('onClickAttachment - isDangerous:', isDangerous)
}
/>
```
#### Link previews, full-size image
```jsx
console.log('onClickLinkPreview', url)}
/>
console.log('onClickLinkPreview', url)}
/>
console.log('onClick'),
}}
text="Pretty sweet link: https://instagram.com/something"
previews={[
{
title: 'This is a really sweet post',
domain: 'instagram.com',
image: {
url: util.pngObjectUrl,
contentType: 'image/png',
width: 800,
height: 1200,
},
},
]}
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
/>
console.log('onClick'),
}}
text="Pretty sweet link: https://instagram.com/something"
previews={[
{
title: 'This is a really sweet post',
domain: 'instagram.com',
image: {
url: util.pngObjectUrl,
contentType: 'image/png',
width: 800,
height: 1200,
},
},
]}
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
/>
```
#### Link previews, small image
```jsx
console.log('onClickLinkPreview', url)}
/>
console.log('onClickLinkPreview', url)}
/>
console.log('onClick'),
}}
text="Pretty sweet link: https://instagram.com/something"
previews={[
{
title:
'This is a really sweet post with a really long name. Gotta restrict that to just two lines, you know how that goes...',
domain: 'instagram.com',
image: {
url: util.pngObjectUrl,
contentType: 'image/png',
width: 160,
height: 120,
},
},
]}
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
/>
console.log('onClick'),
}}
text="Pretty sweet link: https://instagram.com/something"
previews={[
{
title:
'This is a really sweet post with a really long name. Gotta restrict that to just two lines, you know how that goes...',
domain: 'instagram.com',
image: {
url: util.pngObjectUrl,
contentType: 'image/png',
width: 160,
height: 120,
},
},
]}
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
/>
```
#### Link previews, no image
```jsx
console.log('onClickLinkPreview', url)}
/>
console.log('onClickLinkPreview', url)}
/>
console.log('onClick'),
}}
text="Pretty sweet link: https://instagram.com/something"
previews={[
{
title:
'This is a really sweet post with a really long name. Gotta restrict that to just two lines, you know how that goes...',
domain: 'instagram.com',
},
]}
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
/>
console.log('onClick'),
}}
text="Pretty sweet link: https://instagram.com/something"
previews={[
{
title:
'This is a really sweet post with a really long name. Gotta restrict that to just two lines, you know how that goes...',
domain: 'instagram.com',
},
]}
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
/>
```
### 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')}
/>
console.log('onClickLinkPreview', url)}
/>
console.log('onClickLinkPreview', url)}
/>
```