### With a quotation, text-only replies
#### Plain text
```jsx
console.log('onClick'),
}}
/>
console.log('onClick'),
}}
/>
```
#### Name variations
```jsx
```
#### With emoji
```jsx
```
#### Replies to you or yourself
```jsx
```
#### In a group conversation
```jsx
```
#### Long names and context
```jsx
```
#### A lot of text in quotation
```jsx
```
#### A lot of text in quotation, with icon
```jsx
```
#### A lot of text in quotation, with image
```jsx
```
#### Image with caption
```jsx
```
#### Image
```jsx
```
#### Image with no thumbnail
```jsx
```
#### Video with caption
```jsx
```
#### Video
```jsx
```
#### Video with no thumbnail
```jsx
```
#### Audio with caption
```jsx
```
#### Audio
```jsx
```
#### Voice message
```jsx
```
#### Other file type with caption
```jsx
```
#### Other file type
```jsx
```
### With a quotation, including attachment
#### Quote, image attachment, and caption
```jsx
```
#### Quote, image attachment
```jsx
```
#### Quote, portrait image attachment
```jsx
```
#### Quote, video attachment
```jsx
```
#### Quote, audio attachment
```jsx
```
#### Quote, file attachment
```jsx
```
### In bottom bar
#### Plain text
```jsx
console.log('onClick')}
/>
```
#### With an icon
```jsx
console.log('onClick')}
/>
```
#### With an image
```jsx
console.log('onClick')}
/>
```
#### With a close button
```jsx
console.log('onClose')}
onClick={() => console.log('onClick')}
i18n={window.i18n}
/>
```
#### With a close button and icon
```jsx
console.log('onClose')}
onClick={() => console.log('onClick')}
i18n={window.i18n}
attachment={{
contentType: 'image/jpeg',
fileName: 'llama.jpg',
}}
/>
```
#### With a close button and image
```jsx
console.log('onClose')}
onClick={() => console.log('onClick')}
i18n={util.i18n}
attachment={{
contentType: 'image/gif',
fileName: 'llama.gif',
thumbnail: {
objectUrl: util.gifObjectUrl,
},
}}
/>
```