### Plain messages
Note that timestamp and status can be hidden with the `collapseMetadata` boolean property.
```jsx
```
### Timestamps
```jsx
function get1201() {
const d = new Date();
d.setHours(0, 0, 1, 0);
return d.getTime();
}
function getYesterday1159() {
return get1201() - 2 * 60 * 1000;
}
function getJanuary1201() {
const now = new Date();
const d = new Date(now.getFullYear(), 0, 1, 0, 1);
return d.getTime();
}
function getDecember1159() {
return getJanuary1201() - 2 * 60 * 1000;
}
;
```
### Status
```jsx
```
### With an error
#### General error
```jsx
const error = new Error('Something went wrong!');
const outgoing = new Whisper.Message({
type: 'outgoing',
body: "This message won't get through...",
sent_at: Date.now() - 200000,
errors: [error],
});
const incoming = new Whisper.Message(
Object.assign({}, outgoing.attributes, {
source: '+12025550003',
type: 'incoming',
body: null,
})
);
const View = Whisper.MessageView;
;
```
#### Network error (outgoing only)
```jsx
const error = new Error('Something went wrong!');
error.name = 'MessageError';
const outgoing = new Whisper.Message({
type: 'outgoing',
sent_at: Date.now() - 200000,
errors: [error],
body: "This message won't get through...",
});
const View = Whisper.MessageView;
;
```
#### Network error, partial send in group (outgoing only)
```jsx
const error = new Error('Something went wrong!');
error.name = 'MessageError';
const outgoing = new Whisper.Message({
type: 'outgoing',
sent_at: Date.now() - 200000,
errors: [error],
conversationId: util.groupNumber,
body: "This message won't get through...",
});
const View = Whisper.MessageView;
;
```
### Disappearing messages
```jsx
```
### With an attachment
#### Image with caption
```jsx
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
console.log('onClickAttachment')}
/>
```
#### 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
We don't currently overlay message metadata on top of videos like we do with images.
```jsx
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')}
authorAvatarPath={util.gifObjectUrl}
/>
```