### With a quotation, text-only replies #### Plain text ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` #### With emoji ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` #### Replies to you or yourself ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` #### In a group conversation ```jsx console.log('onClickQuote')} authorAvatarPath={util.gifObjectUrl} /> console.log('onClickQuote')} authorAvatarPath={util.gifObjectUrl} /> ``` #### A lot of text in quotation ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` #### A lot of text in quotation, with icon ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` #### A lot of text in quotation, with image ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` #### Image with caption ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` #### Image ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` #### Image with no thumbnail ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` #### Video with caption ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` #### Video ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` #### Video with no thumbnail ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` #### Audio with caption ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` #### Audio ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` #### Voice message ```jsx const outgoing = new Whisper.Message({ type: 'outgoing', body: 'I really like it!', sent_at: Date.now() - 18000000, quote: { author: '+12025550011', id: Date.now() - 1000, attachments: [ { contentType: 'audio/mp3', fileName: 'agnus_dei.mp4', }, ], }, }); const incoming = new Whisper.Message( Object.assign({}, outgoing.attributes, { source: '+12025550011', type: 'incoming', quote: Object.assign({}, outgoing.attributes.quote, { author: '+12025550005', }), }) ); const View = Whisper.MessageView; console.log('onClickQuote')} /> console.log('onClickQuote')} /> ; ``` #### Other file type with caption ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` #### Other file type ```jsx console.log('onClickQuote')} /> console.log('onClickQuote')} /> ``` ### With a quotation, including attachment #### Quote, image attachment, and caption ```jsx console.log('onClickQuote')} text="About six" i18n={util.i18n} quote={{ text: 'How many ferrets do you have?', attachments: [], authorPhoneNumber: '(202) 555-0011', }} onClickQuote={() => console.log('onClickQuote')} /> console.log('onClickQuote')} color="green" text="About six" i18n={util.i18n} quote={{ text: 'How many ferrets do you have?', attachments: [], authorPhoneNumber: '(202) 555-0011', }} onClickQuote={() => console.log('onClickQuote')} /> ``` #### Quote, image attachment ```jsx console.log('onClickQuote')} i18n={util.i18n} quote={{ text: 'How many ferrets do you have?', attachments: [], authorPhoneNumber: '(202) 555-0011', }} onClickQuote={() => console.log('onClickQuote')} /> console.log('onClickQuote')} color="green" i18n={util.i18n} quote={{ text: 'How many ferrets do you have?', attachments: [], authorPhoneNumber: '(202) 555-0011', }} onClickQuote={() => console.log('onClickQuote')} /> ``` #### Quote, portrait image attachment ```jsx console.log('onClickQuote')} i18n={util.i18n} quote={{ text: 'How many ferrets do you have?', attachments: [], authorPhoneNumber: '(202) 555-0011', }} onClickQuote={() => console.log('onClickQuote')} /> console.log('onClickQuote')} color="green" i18n={util.i18n} quote={{ text: 'How many ferrets do you have?', attachments: [], authorPhoneNumber: '(202) 555-0011', }} onClickQuote={() => console.log('onClickQuote')} /> ``` #### Quote, video attachment ```jsx console.log('onClickQuote')} i18n={util.i18n} quote={{ text: 'How many ferrets do you have?', attachments: [], authorPhoneNumber: '(202) 555-0011', }} onClickQuote={() => console.log('onClickQuote')} /> console.log('onClickQuote')} color="green" i18n={util.i18n} quote={{ text: 'How many ferrets do you have?', attachments: [], authorPhoneNumber: '(202) 555-0011', }} onClickQuote={() => console.log('onClickQuote')} /> ``` #### Quote, audio attachment ```jsx console.log('onClickQuote')} i18n={util.i18n} quote={{ text: 'How many ferrets do you have?', attachments: [], authorPhoneNumber: '(202) 555-0011', }} onClickQuote={() => console.log('onClickQuote')} /> console.log('onClickQuote')} color="green" i18n={util.i18n} quote={{ text: 'How many ferrets do you have?', attachments: [], authorPhoneNumber: '(202) 555-0011', }} onClickQuote={() => console.log('onClickQuote')} /> ``` #### Quote, file attachment ```jsx console.log('onClickQuote')} i18n={util.i18n} quote={{ text: 'How many ferrets do you have?', attachments: [], authorPhoneNumber: '(202) 555-0011', }} onClickQuote={() => console.log('onClickQuote')} /> console.log('onClickQuote')} color="green" i18n={util.i18n} quote={{ text: 'How many ferrets do you have?', attachments: [], authorPhoneNumber: '(202) 555-0011', }} onClickQuote={() => console.log('onClickQuote')} /> ``` ### In bottom bar #### Plain text ```jsx
``` #### With an icon ```jsx
``` #### With an image ```jsx
``` #### With a close button ```jsx
console.log('Close was clicked!')} i18n={window.i18n} />
``` #### With a close button and icon ```jsx
console.log('Close was clicked!')} i18n={window.i18n} attachments={[ { contentType: 'image/jpeg', fileName: 'llama.jpg', }, ]} />
``` #### With a close button and image ```jsx
console.log('Close was clicked!')} i18n={window.i18n} attachments={[ { contentType: 'image/gif', fileName: 'llama.gif', thumbnail: { objectUrl: util.gifObjectUrl, }, }, ]} />
```