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