### 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, }, }} />
    ```