### 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
``` #### All colors Note: for incoming messages, quote color is taken from the parent message. For outgoing messages the color is taken from the contact who wrote the quoted message. ```jsx
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
console.log('onClick'), }} />
``` #### Referenced message not found ```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
``` #### Pending image download ```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 attachment and no text ```jsx
console.log('onClick')} />
``` #### With generic attachment ```jsx
console.log('onClick')} />
``` #### With a close button ```jsx
console.log('onClose')} onClick={() => console.log('onClick')} i18n={util.i18n} />
``` #### With a close button and icon ```jsx
console.log('onClose')} onClick={() => console.log('onClick')} i18n={util.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, }, }} />
```