diff --git a/ts/components/conversation/Message.md b/ts/components/conversation/Message.md
deleted file mode 100644
index f65abaaff9..0000000000
--- a/ts/components/conversation/Message.md
+++ /dev/null
@@ -1,4696 +0,0 @@
-### Plain messages
-
-Note that timestamp and status can be hidden with the `collapseMetadata` boolean property.
-
-```jsx
-
-
- console.log('onDownload')}
- onReply={() => console.log('onReply')}
- onShowDetail={() => console.log('onShowDetail')}
- onDelete={() => console.log('onDelete')}
- />
-
-
- console.log('onDownload')}
- onReply={() => console.log('onReply')}
- onShowDetail={() => console.log('onShowDetail')}
- onDelete={() => console.log('onDelete')}
- />
-
-
- console.log('onDownload')}
- onReply={() => console.log('onReply')}
- onShowDetail={() => console.log('onShowDetail')}
- onDelete={() => console.log('onDelete')}
- />
-
-
- console.log('onDownload')}
- onReply={() => console.log('onReply')}
- onShowDetail={() => console.log('onShowDetail')}
- onDelete={() => console.log('onDelete')}
- />
-
-
- console.log('onDownload')}
- onReply={() => console.log('onReply')}
- onShowDetail={() => console.log('onShowDetail')}
- onDelete={() => console.log('onDelete')}
- />
-
-
- console.log('onDownload')}
- onReply={() => console.log('onReply')}
- onShowDetail={() => console.log('onShowDetail')}
- onDelete={() => console.log('onDelete')}
- />
-
-
- console.log('onDownload')}
- onReply={() => console.log('onReply')}
- onShowDetail={() => console.log('onShowDetail')}
- onDelete={() => console.log('onDelete')}
- />
-
-
- console.log('onDownload')}
- onReply={() => console.log('onReply')}
- onShowDetail={() => console.log('onShowDetail')}
- onDelete={() => console.log('onDelete')}
- />
-
-
- console.log('onDownload')}
- onReply={() => console.log('onReply')}
- onShowDetail={() => console.log('onShowDetail')}
- onDelete={() => console.log('onDelete')}
- />
-
-
- console.log('onDownload')}
- onReply={() => console.log('onReply')}
- onShowDetail={() => console.log('onShowDetail')}
- onDelete={() => console.log('onDelete')}
- />
-
-
-```
-
-### Status
-
-```jsx
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- console.log('onRetrySend')}
- />
-
-
-
-
-
- console.log('onRetrySend')}
- />
-
-
- console.log('onRetrySend')}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- console.log('onRetrySend')}
- />
-
-
- console.log('onRetrySend')}
- />
-
-
- console.log('onRetrySend')}
- />
-
-
- console.log('onRetrySend')}
- />
-
-
- console.log('onRetrySend')}
- />
-
-
- console.log('onRetrySend')}
- />
-
-
-
-
-
-
-
-
-```
-
-### All colors
-
-```jsx
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### Reactions
-
-```jsx
-
- {[
- { reactions: [{ emoji: '👍', from: { id: '+14155552671' } }] },
- {
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Jack Sparrow' } },
- {
- emoji: '😂',
- from: { id: '+14155552672', profileName: 'Davy Jones' },
- },
- ],
- },
- {
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Jack Sparrow' } },
- { emoji: '😂', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- {
- emoji: '😮',
- from: { id: '+14155552673', profileName: 'Joel Ferrari' },
- },
- ],
- },
- {
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Jack Sparrow' } },
- { emoji: '😂', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '😮', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- { emoji: '😡', from: { id: '+14155552674', name: 'Amelia Briggs' } },
- { emoji: '👎', from: { id: '+14155552675', name: 'Amelia Briggs' } },
- { emoji: '❤️', from: { id: '+14155552676', name: 'Amelia Briggs' } },
- ],
- },
- {
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
- ],
- },
- {
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
- { emoji: '😡', from: { id: '+14155552675', name: 'Amelia Briggs' } },
- { emoji: '👎', from: { id: '+14155552676', name: 'Amelia Briggs' } },
- { emoji: '❤️', from: { id: '+14155552678', name: 'Amelia Briggs' } },
- ],
- },
- {
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- ],
- },
- {
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
- ],
- },
- {
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
- { emoji: '😮', from: { id: '+14155552677', name: 'Amelia Briggs' } },
- { emoji: '😮', from: { id: '+14155552678', name: 'Amelia Briggs' } },
- { emoji: '😮', from: { id: '+14155552679', name: 'Amelia Briggs' } },
- ],
- },
- {
- short: true,
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
- { emoji: '😡', from: { id: '+14155552675', name: 'Amelia Briggs' } },
- { emoji: '👎', from: { id: '+14155552676', name: 'Amelia Briggs' } },
- { emoji: '❤️', from: { id: '+14155552677', name: 'Amelia Briggs' } },
- ],
- },
- {
- short: true,
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
- ],
- },
- {
- short: true,
- reactions: [],
- },
- {
- reactions: [
- {
- emoji: '👍',
- from: { isMe: true, id: '+14155552671', name: 'Amelia Briggs' },
- },
- { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
- { emoji: '😡', from: { id: '+14155552677', name: 'Amelia Briggs' } },
- { emoji: '👎', from: { id: '+14155552678', name: 'Amelia Briggs' } },
- { emoji: '❤️', from: { id: '+14155552679', name: 'Amelia Briggs' } },
- ],
- },
- {
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- {
- emoji: '😂',
- from: { isMe: true, id: '+14155552674', name: 'Amelia Briggs' },
- },
- { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
- { emoji: '😡', from: { id: '+14155552677', name: 'Amelia Briggs' } },
- { emoji: '👎', from: { id: '+14155552678', name: 'Amelia Briggs' } },
- { emoji: '❤️', from: { id: '+14155552679', name: 'Amelia Briggs' } },
- ],
- },
- {
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
- {
- emoji: '😡',
- from: { isMe: true, id: '+14155552677', name: 'Amelia Briggs' },
- },
- { emoji: '👎', from: { id: '+14155552678', name: 'Amelia Briggs' } },
- { emoji: '❤️', from: { id: '+14155552679', name: 'Amelia Briggs' } },
- ],
- },
- {
- outgoing: true,
- reactions: [
- { emoji: '😂', from: { id: '+14155552671', name: 'Amelia Briggs' } },
- ],
- },
- {
- outgoing: true,
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
- { emoji: '😡', from: { id: '+14155552677', name: 'Amelia Briggs' } },
- { emoji: '👎', from: { id: '+14155552678', name: 'Amelia Briggs' } },
- { emoji: '❤️', from: { id: '+14155552679', name: 'Amelia Briggs' } },
- ],
- },
- {
- outgoing: true,
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- {
- emoji: '😂',
- from: { isMe: true, id: '+14155552674', name: 'Amelia Briggs' },
- },
- { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
- { emoji: '😡', from: { id: '+14155552677', name: 'Amelia Briggs' } },
- { emoji: '👎', from: { id: '+14155552678', name: 'Amelia Briggs' } },
- { emoji: '❤️', from: { id: '+14155552679', name: 'Amelia Briggs' } },
- ],
- },
- {
- outgoing: true,
- short: true,
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
- { emoji: '😡', from: { id: '+14155552677', name: 'Amelia Briggs' } },
- { emoji: '👎', from: { id: '+14155552678', name: 'Amelia Briggs' } },
- { emoji: '❤️', from: { id: '+14155552679', name: 'Amelia Briggs' } },
- ],
- },
- {
- outgoing: true,
- short: true,
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
- { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
- ],
- },
- {
- outgoing: true,
- short: true,
- reactions: [
- { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
- { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
- ],
- },
- ].map((spec, i) => (
-
-
-
- ))}
-
-```
-
-### Long data
-
-```jsx
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### Pending long message download
-
-```jsx
-
-
-
-
-
-
-
-
-```
-
-### With an attachment
-
-#### Image with caption
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- onDownload={() => console.log('onDownload')}
- onReply={() => console.log('onReply')}
- />
-
-
- console.log('showVisualAttachment')}
- onDownload={() => console.log('onDownload')}
- onReply={() => console.log('onReply')}
- />
-
-
- console.log('showVisualAttachment')}
- onDownload={() => console.log('onDownload')}
- onReply={() => console.log('onReply')}
- />
-
-
- console.log('showVisualAttachment')}
- onDownload={() => console.log('onDownload')}
- onReply={() => console.log('onReply')}
- />
-
-
-```
-
-#### Image
-
-First, showing the metadata overlay on dark and light images, then a message with `collapseMetadata` set.
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Sticker
-
-Stickers have no background, but they have all the standard message bubble features.
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Sticker with collapsed metadata
-
-First set is in a 1:1 conversation, second set is in a group.
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Sticker with non-square aspect ratio
-
-First set is in a 1:1 conversation, second set is in a group.
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Sticker with pending image
-
-A sticker with no attachments (what our selectors produce for a pending sticker) is not displayed at all.
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Multiple images
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Multiple images with caption
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Outgoing image with status
-
-Note that the delivered indicator is always Signal Blue, not the conversation color.
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Pending images
-
-```
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Image with portrait aspect ratio
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Image with portrait aspect ratio and caption
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- expirationLength={5 * 60 * 1000}
- expirationTimestamp={Date.now() + 5 * 60 * 1000}
- />
-
-
- console.log('showVisualAttachment')}
- expirationLength={5 * 60 * 1000}
- expirationTimestamp={Date.now() + 5 * 60 * 1000}
- />
-
-
-```
-
-#### Image with landscape aspect ratio
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Image with landscape aspect ratio and caption
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Video with caption
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Video
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Missing images and videos
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Broken source URL images and videos
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Image/video which is too big
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Image/video missing height/width
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Audio with caption
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Audio
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Voice message
-
-Voice notes are not shown any differently from audio attachments.
-
-#### Other file type with caption
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-
-
-
-```
-
-#### Other file type
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Other file type pending
-
-```jsx
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-```
-
-#### Dangerous file type
-
-```jsx
-
-
-
- console.log('showVisualAttachment - isDangerous:', isDangerous)
- }
- />
-
-
-
- console.log('showVisualAttachment - isDangerous:', isDangerous)
- }
- />
-
-
-```
-
-#### Link previews, full-size image
-
-```jsx
-
-
- console.log('onClickLinkPreview', url)}
- />
-
-
- console.log('onClickLinkPreview', url)}
- />
-
-
- console.log('onClick'),
- }}
- text="Pretty sweet link: https://instagram.com/something"
- previews={[
- {
- title: 'This is a really sweet post',
- domain: 'instagram.com',
- image: {
- url: util.pngObjectUrl,
- contentType: 'image/png',
- width: 800,
- height: 1200,
- },
- },
- ]}
- onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
- />
-
-
- console.log('onClick'),
- }}
- text="Pretty sweet link: https://instagram.com/something"
- previews={[
- {
- title: 'This is a really sweet post',
- domain: 'instagram.com',
- image: {
- url: util.pngObjectUrl,
- contentType: 'image/png',
- width: 800,
- height: 1200,
- },
- },
- ]}
- onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
- />
-
-
-```
-
-#### Link previews, stickers url
-
-Sticker link previews are forced to use the small link preview form, no matter the image size.
-
-```jsx
-
-
- console.log('onClickLinkPreview', url)}
- />
-
-
- console.log('onClickLinkPreview', url)}
- />
-
-
-```
-
-#### Link previews, small image
-
-```jsx
-
-
- console.log('onClickLinkPreview', url)}
- />
-
-
- console.log('onClickLinkPreview', url)}
- />
-
-
- console.log('onClick'),
- }}
- text="Pretty sweet link: https://instagram.com/something"
- previews={[
- {
- title:
- 'This is a really sweet post with a really long name. Gotta restrict that to just two lines, you know how that goes...',
- domain: 'instagram.com',
- image: {
- url: util.pngObjectUrl,
- contentType: 'image/png',
- width: 160,
- height: 120,
- },
- },
- ]}
- onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
- />
-
-
- console.log('onClick'),
- }}
- text="Pretty sweet link: https://instagram.com/something"
- previews={[
- {
- title:
- 'This is a really sweet post with a really long name. Gotta restrict that to just two lines, you know how that goes...',
- domain: 'instagram.com',
- image: {
- url: util.pngObjectUrl,
- contentType: 'image/png',
- width: 160,
- height: 120,
- },
- },
- ]}
- onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
- />
-
-
-```
-
-#### Link previews with pending image
-
-```jsx
-
-
- console.log('onClickLinkPreview', url)}
- />
-
-
- console.log('onClickLinkPreview', url)}
- />
-
-
- console.log('onClickLinkPreview', url)}
- />
-
-
- console.log('onClickLinkPreview', url)}
- />
-
-
-```
-
-#### Link previews, no image
-
-```jsx
-
-
- console.log('onClickLinkPreview', url)}
- />
-
-
- console.log('onClickLinkPreview', url)}
- />
-
-
- console.log('onClick'),
- }}
- text="Pretty sweet link: https://instagram.com/something"
- previews={[
- {
- title:
- 'This is a really sweet post with a really long name. Gotta restrict that to just two lines, you know how that goes...',
- domain: 'instagram.com',
- },
- ]}
- onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
- />
-
-
- console.log('onClick'),
- }}
- text="Pretty sweet link: https://instagram.com/something"
- previews={[
- {
- title:
- 'This is a really sweet post with a really long name. Gotta restrict that to just two lines, you know how that goes...',
- domain: 'instagram.com',
- },
- ]}
- onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
- />
-
-
-```
-
-### Tap to view
-
-```jsx
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
-
- console.log('displayTapToViewMessage', args)
- }
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
-```
-
-### In a group conversation
-
-Note that the author avatar goes away if `collapseMetadata` is set.
-
-```jsx
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- console.log('showVisualAttachment')}
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
- console.log('showVisualAttachment')}
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
- console.log('showVisualAttachment')}
- authorAvatarPath={util.gifObjectUrl}
- />
-
-
- console.log('showVisualAttachment')}
- />
-
-
-
-
-
-
-
-
-
-
-
- console.log('onClickLinkPreview', url)}
- />
-
-
- console.log('onClickLinkPreview', url)}
- />
-
-
-
-
-
-```
diff --git a/ts/components/conversation/Message.stories.tsx b/ts/components/conversation/Message.stories.tsx
index d0456c59f1..e425dfb841 100644
--- a/ts/components/conversation/Message.stories.tsx
+++ b/ts/components/conversation/Message.stories.tsx
@@ -1,1345 +1,31 @@
import * as React from 'react';
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
+import { boolean, number, text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+
+import { Colors } from '../../types/Colors';
+import { EmojiPicker } from '../emoji/EmojiPicker';
+import { Message, Props } from './Message';
+import {
+ AUDIO_MP3,
+ IMAGE_JPEG,
+ IMAGE_PNG,
+ IMAGE_WEBP,
+ MIMEType,
+ VIDEO_MP4,
+} from '../../types/MIME';
// @ts-ignore
import { setup as setupI18n } from '../../../js/modules/i18n';
// @ts-ignore
import enMessages from '../../../_locales/en/messages.json';
+import { pngUrl } from '../../storybook/Fixtures';
+const i18n = setupI18n('en', enMessages);
-import {
- Message,
- Props as AllProps,
- PropsActions,
- PropsData,
- PropsHousekeeping,
-} from './Message';
-import { EmojiPicker } from '../emoji/EmojiPicker';
-import { MIMEType } from '../../types/MIME';
+const story = storiesOf('Components/Conversation/Message', module);
-const book = storiesOf('Components/Conversation/Message', module);
-
-const baseDataProps: Pick<
- PropsData,
- | 'id'
- | 'canReply'
- | 'conversationId'
- | 'interactionMode'
- | 'conversationType'
- | 'previews'
- | 'timestamp'
- | 'authorTitle'
-> = {
- id: 'asdf',
- canReply: true,
- conversationId: 'asdf',
- interactionMode: 'mouse',
- conversationType: 'direct',
- previews: [],
- timestamp: Date.now(),
- authorTitle: '(202) 555-2001',
-};
-
-type MessageStory = [
- string,
- Array<{
- makeDataProps: () => PropsData;
- makeActionProps?: () => PropsActions;
- makeHouseKeepingProps?: () => PropsHousekeeping;
- title?: string;
- }>
-];
-
-const makeDefaultActionProps = (): PropsActions => ({
- clearSelectedMessage: action('clearSelectedMessage'),
- reactToMessage: action('reactToMessage'),
- replyToMessage: action('replyToMessage'),
- retrySend: action('retrySend'),
- deleteMessage: action('deleteMessage'),
- showMessageDetail: action('showMessageDetail'),
- openConversation: action('openConversation'),
- showContactDetail: action('showContactDetail'),
- showVisualAttachment: action('showVisualAttachment'),
- downloadAttachment: action('downloadAttachment'),
- displayTapToViewMessage: action('displayTapToViewMessage'),
- openLink: action('openLink'),
- scrollToQuotedMessage: action('scrollToQuotedMessage'),
- selectMessage: action('selectMessage'),
- showExpiredIncomingTapToViewToast: action(
- 'showExpiredIncomingTapToViewToast'
- ),
- showExpiredOutgoingTapToViewToast: action(
- 'showExpiredOutgoingTapToViewToast'
- ),
-});
-
-const makeDefaultHousekeepingProps = (): PropsHousekeeping => ({
- i18n: setupI18n('en', enMessages),
-});
-
-const stories: Array = [
- [
- 'Plain Message',
- [
- {
- makeDataProps: () => ({
- ...baseDataProps,
- direction: 'incoming',
- authorColor: 'green',
- text: '🔥',
- }),
- },
- {
- makeDataProps: () => ({
- ...baseDataProps,
- direction: 'incoming',
- authorColor: 'green',
- text: 'Hello there from the new world! http://somewhere.com',
- }),
- },
- {
- makeDataProps: () => ({
- ...baseDataProps,
- direction: 'incoming',
- authorColor: 'red',
- text: 'Hello there from the new world!',
- }),
- makeHouseKeepingProps: () => ({
- ...makeDefaultHousekeepingProps(),
- collapseMetadata: true,
- }),
- },
- {
- makeDataProps: () => ({
- ...baseDataProps,
- direction: 'incoming',
- authorColor: 'grey',
- text:
- 'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
- }),
- },
- {
- makeDataProps: () => ({
- ...baseDataProps,
- direction: 'incoming',
- authorColor: 'deep_orange',
- text:
- 'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
- }),
- makeHouseKeepingProps: () => ({
- ...makeDefaultHousekeepingProps(),
- collapseMetadata: true,
- }),
- },
- {
- makeDataProps: () => ({
- ...baseDataProps,
- direction: 'outgoing',
- status: 'sent',
- authorColor: 'pink',
- text: '🔥',
- }),
- },
- {
- makeDataProps: () => ({
- ...baseDataProps,
- direction: 'outgoing',
- status: 'read',
- authorColor: 'pink',
- text: 'Hello there from the new world! http://somewhere.com',
- }),
- },
- {
- makeDataProps: () => ({
- ...baseDataProps,
- direction: 'outgoing',
- status: 'sent',
- text: 'Hello there from the new world! 🔥',
- }),
- makeHouseKeepingProps: () => ({
- ...makeDefaultHousekeepingProps(),
- collapseMetadata: true,
- }),
- },
- {
- makeDataProps: () => ({
- ...baseDataProps,
- direction: 'outgoing',
- status: 'sent',
- authorColor: 'blue',
- text:
- 'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
- }),
- makeHouseKeepingProps: () => ({
- ...makeDefaultHousekeepingProps(),
- collapseMetadata: true,
- }),
- },
- ],
- ],
- [
- 'Reactions',
- [
- ...([
- {
- title: 'Single Reaction (not me)',
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Jack Sparrow',
- },
- },
- ],
- },
- {
- title: 'Two Reactions (neither me)',
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Jack Sparrow',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- profileName: 'Davy Jones',
- },
- },
- ],
- },
- {
- title: 'Three Reactions (none me)',
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Jack Sparrow',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😮',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- profileName: 'Joel Ferrari',
- },
- },
- ],
- },
- {
- title: 'Six Reactions (none me)',
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Jack Sparrow',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😮',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😡',
- from: {
- id: '+14155552674',
- phoneNumber: '+14155552674',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👎',
- from: {
- id: '+14155552675',
- phoneNumber: '+14155552675',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '❤️',
- from: {
- id: '+14155552676',
- phoneNumber: '+14155552676',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Four Reactions, Three Same (none me)',
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552674',
- phoneNumber: '+14155552674',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Seven Reactions, Three Same, One Different (none me)',
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552674',
- phoneNumber: '+14155552674',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😡',
- from: {
- id: '+14155552675',
- phoneNumber: '+14155552675',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👎',
- from: {
- id: '+14155552676',
- phoneNumber: '+14155552676',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '❤️',
- from: {
- id: '+14155552678',
- phoneNumber: '+14155552678',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Three Reations, All Same (none me)',
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Six Reactions, Two Kinds (none me)',
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552674',
- phoneNumber: '+14155552674',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552675',
- phoneNumber: '+14155552675',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552676',
- phoneNumber: '+14155552676',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Nine Reactions, Three Kinds (none me)',
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552674',
- phoneNumber: '+14155552674',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552675',
- phoneNumber: '+14155552675',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552676',
- phoneNumber: '+14155552676',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😮',
- from: {
- id: '+14155552677',
- phoneNumber: '+14155552677',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😮',
- from: {
- id: '+14155552678',
- phoneNumber: '+14155552678',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😮',
- from: {
- id: '+14155552679',
- phoneNumber: '+14155552679',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Short Message, Seven Reactions (none me)',
- short: true,
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552674',
- phoneNumber: '+14155552674',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😡',
- from: {
- id: '+14155552675',
- phoneNumber: '+14155552675',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👎',
- from: {
- id: '+14155552676',
- phoneNumber: '+14155552676',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '❤️',
- from: {
- id: '+14155552677',
- phoneNumber: '+14155552677',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Short Message, Six Reactions (none me)',
- short: true,
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552674',
- phoneNumber: '+14155552674',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552675',
- phoneNumber: '+14155552675',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552676',
- phoneNumber: '+14155552676',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Short Message, No Reactions',
- short: true,
- reactions: [],
- },
- {
- title: 'Nine Reactions (me in second group)',
- reactions: [
- {
- emoji: '👍',
- from: {
- isMe: true,
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552674',
- phoneNumber: '+14155552674',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552675',
- phoneNumber: '+14155552675',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552676',
- phoneNumber: '+14155552676',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😡',
- from: {
- id: '+14155552677',
- phoneNumber: '+14155552677',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👎',
- from: {
- id: '+14155552678',
- phoneNumber: '+14155552678',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '❤️',
- from: {
- id: '+14155552679',
- phoneNumber: '+14155552679',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Nine Reactions (me in first group)',
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- isMe: true,
- id: '+14155552674',
- phoneNumber: '+14155552674',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552675',
- phoneNumber: '+14155552675',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552676',
- phoneNumber: '+14155552676',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😡',
- from: {
- id: '+14155552677',
- phoneNumber: '+14155552677',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👎',
- from: {
- id: '+14155552678',
- phoneNumber: '+14155552678',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '❤️',
- from: {
- id: '+14155552679',
- phoneNumber: '+14155552679',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Nine Reactions (me in third group)',
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552674',
- phoneNumber: '+14155552674',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552675',
- phoneNumber: '+14155552675',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552676',
- phoneNumber: '+14155552676',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😡',
- from: {
- isMe: true,
- id: '+14155552677',
- phoneNumber: '+14155552677',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👎',
- from: {
- id: '+14155552678',
- phoneNumber: '+14155552678',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '❤️',
- from: {
- id: '+14155552679',
- phoneNumber: '+14155552679',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Outgoing Message, One Reaction (not me)',
- outgoing: true,
- reactions: [
- {
- emoji: '😂',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Outgoing Message, Nine Reactions (none me)',
- outgoing: true,
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552674',
- phoneNumber: '+14155552674',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552675',
- phoneNumber: '+14155552675',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552676',
- phoneNumber: '+14155552676',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😡',
- from: {
- id: '+14155552677',
- phoneNumber: '+14155552677',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👎',
- from: {
- id: '+14155552678',
- phoneNumber: '+14155552678',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '❤️',
- from: {
- id: '+14155552679',
- phoneNumber: '+14155552679',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Outgoing Message, Nine Reactions (me in first group)',
- outgoing: true,
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- isMe: true,
- id: '+14155552674',
- phoneNumber: '+14155552674',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552675',
- phoneNumber: '+14155552675',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552676',
- phoneNumber: '+14155552676',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😡',
- from: {
- id: '+14155552677',
- phoneNumber: '+14155552677',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👎',
- from: {
- id: '+14155552678',
- phoneNumber: '+14155552678',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '❤️',
- from: {
- id: '+14155552679',
- phoneNumber: '+14155552679',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Outgoing Short Message, Nine Reactions (none me)',
- outgoing: true,
- short: true,
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552674',
- phoneNumber: '+14155552674',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552675',
- phoneNumber: '+14155552675',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552676',
- phoneNumber: '+14155552676',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😡',
- from: {
- id: '+14155552677',
- phoneNumber: '+14155552677',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👎',
- from: {
- id: '+14155552678',
- phoneNumber: '+14155552678',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '❤️',
- from: {
- id: '+14155552679',
- phoneNumber: '+14155552679',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Outgoing Short Message, Six Reactions, Two Groups (none me)',
- outgoing: true,
- short: true,
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552674',
- phoneNumber: '+14155552674',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552675',
- phoneNumber: '+14155552675',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '😂',
- from: {
- id: '+14155552676',
- phoneNumber: '+14155552676',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- {
- title: 'Outgoing Short Message, Three Reactions, All Same (none me)',
- outgoing: true,
- short: true,
- reactions: [
- {
- emoji: '👍',
- from: {
- id: '+14155552671',
- phoneNumber: '+14155552671',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552672',
- phoneNumber: '+14155552672',
- name: 'Amelia Briggs',
- },
- },
- {
- emoji: '👍',
- from: {
- id: '+14155552673',
- phoneNumber: '+14155552673',
- name: 'Amelia Briggs',
- },
- },
- ],
- },
- ] as Array<{
- outgoing: boolean;
- short: boolean;
- reactions: PropsData['reactions'];
- title?: string;
- }>).map(spec => ({
- title: spec.title,
- makeDataProps: () => ({
- ...baseDataProps,
- // tsc disagrees with tslint, I favor safety (tsc)
- // tslint:disable-next-line no-unnecessary-type-assertion
- direction: (spec.outgoing
- ? 'outgoing'
- : 'incoming') as PropsData['direction'],
- text: spec.short
- ? 'hahaha'
- : "I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half.",
- reactions: spec.reactions
- ? spec.reactions.map((re, i) => ({
- ...re,
- timestamp: i,
- }))
- : [],
- }),
- })),
- ],
- ],
- [
- 'BlurHash',
- [
- {
- title: 'Incoming BlurHash',
- makeDataProps: () => ({
- ...baseDataProps,
- direction: 'incoming',
- attachments: [
- {
- blurHash: 'LEHV6nWB2yk8pyo0adR*.7kCMdnj',
- width: 300,
- height: 600,
- fileName: 'foo.jpg',
- contentType: 'image/jpeg' as MIMEType,
- url: '',
- },
- ],
- }),
- },
- ],
- ],
- [
- 'Sticker',
- [
- {
- title: 'Outgoing Sticker',
- makeDataProps: () => ({
- ...baseDataProps,
- direction: 'outgoing',
- status: 'sent',
- authorColor: 'green',
- isSticker: true,
- attachments: [
- {
- url: '/fixtures/512x515-thumbs-up-lincoln.webp',
- fileName: '512x515-thumbs-up-lincoln.webp',
- contentType: 'image/webp' as MIMEType,
- width: 128,
- height: 128,
- },
- ],
- }),
- },
- {
- title: 'Incoming Sticker',
- makeDataProps: () => ({
- ...baseDataProps,
- direction: 'incoming',
- authorColor: 'green',
- isSticker: true,
- attachments: [
- {
- url: '/fixtures/512x515-thumbs-up-lincoln.webp',
- fileName: '512x515-thumbs-up-lincoln.webp',
- contentType: 'image/webp' as MIMEType,
- width: 128,
- height: 128,
- },
- ],
- }),
- },
- ],
- ],
-];
-
-const renderEmojiPicker: AllProps['renderEmojiPicker'] = ({
+const renderEmojiPicker: Props['renderEmojiPicker'] = ({
onClose,
onPickEmoji,
ref,
@@ -1354,39 +40,572 @@ const renderEmojiPicker: AllProps['renderEmojiPicker'] = ({
/>
);
-stories.forEach(([chapterTitle, propsArr]) =>
- book.add(chapterTitle, () =>
- propsArr.map(
- (
- {
- title,
- makeDataProps,
- makeActionProps = makeDefaultActionProps,
- makeHouseKeepingProps = makeDefaultHousekeepingProps,
- },
- i
- ) => {
- const dataProps = makeDataProps();
- const outgoing = dataProps.direction === 'outgoing';
+const createProps = (overrideProps: Partial = {}): Props => ({
+ attachments: overrideProps.attachments,
+ authorColor: overrideProps.authorColor || 'blue',
+ authorAvatarPath: overrideProps.authorAvatarPath,
+ authorTitle: text('authorTitle', overrideProps.authorTitle || ''),
+ canReply: true,
+ clearSelectedMessage: action('clearSelectedMessage'),
+ collapseMetadata: overrideProps.collapseMetadata,
+ conversationId: text('conversationId', overrideProps.conversationId || ''),
+ conversationType: overrideProps.conversationType || 'direct',
+ deletedForEveryone: overrideProps.deletedForEveryone,
+ deleteMessage: action('deleteMessage'),
+ disableMenu: overrideProps.disableMenu,
+ disableScroll: overrideProps.disableScroll,
+ direction: overrideProps.direction || 'incoming',
+ displayTapToViewMessage: action('displayTapToViewMessage'),
+ downloadAttachment: action('downloadAttachment'),
+ expirationLength:
+ number('expirationLength', overrideProps.expirationLength || 0) ||
+ undefined,
+ expirationTimestamp:
+ number('expirationTimestamp', overrideProps.expirationTimestamp || 0) ||
+ undefined,
+ i18n,
+ id: text('id', overrideProps.id || ''),
+ interactionMode: overrideProps.interactionMode || 'keyboard',
+ isTapToView: overrideProps.isTapToView,
+ isTapToViewError: overrideProps.isTapToViewError,
+ isTapToViewExpired: overrideProps.isTapToViewExpired,
+ openConversation: action('openConversation'),
+ openLink: action('openLink'),
+ previews: overrideProps.previews || [],
+ reactions: overrideProps.reactions,
+ reactToMessage: action('reactToMessage'),
+ renderEmojiPicker: renderEmojiPicker,
+ replyToMessage: action('replyToMessage'),
+ retrySend: action('retrySend'),
+ scrollToQuotedMessage: action('scrollToQuotedMessage'),
+ selectMessage: action('selectMessage'),
+ showContactDetail: action('showContactDetail'),
+ showExpiredIncomingTapToViewToast: action(
+ 'showExpiredIncomingTapToViewToast'
+ ),
+ showExpiredOutgoingTapToViewToast: action(
+ 'showExpiredOutgoingTapToViewToast'
+ ),
+ showMessageDetail: action('showMessageDetail'),
+ showVisualAttachment: action('showVisualAttachment'),
+ status: overrideProps.status || 'sent',
+ text: text('text', overrideProps.text || ''),
+ textPending: boolean('textPending', overrideProps.textPending || false),
+ timestamp: number('timestamp', overrideProps.timestamp || Date.now()),
+});
- return (
- <>
- {title ? (
-
- {title}
-
- ) : null}
-
-
-
-
- );
- }
- )
- )
+const renderBothDirections = (props: Props) => (
+ <>
+
+
+
+
);
+
+story.add('Plain Message', () => {
+ const props = createProps({
+ text:
+ 'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Delivered', () => {
+ const props = createProps({
+ direction: 'outgoing',
+ status: 'delivered',
+ text:
+ 'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
+ });
+
+ return ;
+});
+
+story.add('Read', () => {
+ const props = createProps({
+ direction: 'outgoing',
+ status: 'read',
+ text:
+ 'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
+ });
+
+ return ;
+});
+
+story.add('Sending', () => {
+ const props = createProps({
+ direction: 'outgoing',
+ status: 'sending',
+ text:
+ 'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
+ });
+
+ return ;
+});
+
+story.add('Expiring', () => {
+ const props = createProps({
+ expirationLength: 30 * 1000,
+ expirationTimestamp: Date.now() + 30 * 1000,
+ text:
+ 'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Pending', () => {
+ const props = createProps({
+ text:
+ 'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
+ textPending: true,
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Collapsed Metadata', () => {
+ const props = createProps({
+ authorTitle: 'Fred Willard',
+ collapseMetadata: true,
+ conversationType: 'group',
+ text: 'Hello there from a pal!',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Recent', () => {
+ const props = createProps({
+ text: 'Hello there from a pal!',
+ timestamp: Date.now() - 30 * 60 * 1000,
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Older', () => {
+ const props = createProps({
+ text: 'Hello there from a pal!',
+ timestamp: Date.now() - 180 * 24 * 60 * 60 * 1000,
+ });
+
+ return renderBothDirections(props);
+});
+
+// tslint:disable-next-line:max-func-body-length
+story.add('Reactions', () => {
+ const props = createProps({
+ text: 'Hello there from a pal!',
+ timestamp: Date.now() - 180 * 24 * 60 * 60 * 1000,
+ reactions: [
+ {
+ emoji: '👍',
+ from: {
+ isMe: true,
+ id: '+14155552672',
+ phoneNumber: '+14155552672',
+ name: 'Me',
+ title: 'Me',
+ },
+ timestamp: Date.now() - 10,
+ },
+ {
+ emoji: '👍',
+ from: {
+ id: '+14155552672',
+ phoneNumber: '+14155552672',
+ name: 'Amelia Briggs',
+ title: 'Amelia',
+ },
+ timestamp: Date.now() - 10,
+ },
+ {
+ emoji: '👍',
+ from: {
+ id: '+14155552673',
+ phoneNumber: '+14155552673',
+ name: 'Amelia Briggs',
+ title: 'Amelia',
+ },
+ timestamp: Date.now() - 10,
+ },
+ {
+ emoji: '😂',
+ from: {
+ id: '+14155552674',
+ phoneNumber: '+14155552674',
+ name: 'Amelia Briggs',
+ title: 'Amelia',
+ },
+ timestamp: Date.now() - 10,
+ },
+ {
+ emoji: '😂',
+ from: {
+ id: '+14155552676',
+ phoneNumber: '+14155552676',
+ name: 'Amelia Briggs',
+ title: 'Amelia',
+ },
+ timestamp: Date.now() - 10,
+ },
+ {
+ emoji: '😡',
+ from: {
+ id: '+14155552677',
+ phoneNumber: '+14155552677',
+ name: 'Amelia Briggs',
+ title: 'Amelia',
+ },
+ timestamp: Date.now() - 10,
+ },
+ {
+ emoji: '👎',
+ from: {
+ id: '+14155552678',
+ phoneNumber: '+14155552678',
+ name: 'Amelia Briggs',
+ title: 'Amelia',
+ },
+ timestamp: Date.now() - 10,
+ },
+ {
+ emoji: '❤️',
+ from: {
+ id: '+14155552679',
+ phoneNumber: '+14155552679',
+ name: 'Amelia Briggs',
+ title: 'Amelia',
+ },
+ timestamp: Date.now() - 10,
+ },
+ ],
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Avatar in Group', () => {
+ const props = createProps({
+ authorAvatarPath: pngUrl,
+ conversationType: 'group',
+ status: 'sent',
+ text: 'Hello it is me, the saxophone.',
+ });
+
+ return ;
+});
+
+story.add('Sticker', () => {
+ const props = createProps({
+ attachments: [
+ {
+ url: '/fixtures/512x515-thumbs-up-lincoln.webp',
+ fileName: '512x515-thumbs-up-lincoln.webp',
+ contentType: IMAGE_WEBP,
+ width: 128,
+ height: 128,
+ },
+ ],
+ isSticker: true,
+ status: 'sent',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Deleted', () => {
+ const props = createProps({
+ conversationType: 'group',
+ deletedForEveryone: true,
+ status: 'sent',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Error', () => {
+ const props = createProps({
+ status: 'error',
+ text: 'I hope you get this.',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Partial Send', () => {
+ const props = createProps({
+ status: 'partial-sent',
+ text: 'I hope you get this.',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Link Preview', () => {
+ const props = createProps({
+ previews: [
+ {
+ domain: 'signal.org',
+ image: {
+ contentType: IMAGE_PNG,
+ fileName: 'the-sax.png',
+ height: 240,
+ url: pngUrl,
+ width: 320,
+ },
+ isStickerPack: false,
+ title: 'Signal',
+ url: 'https://www.signal.org',
+ },
+ ],
+ status: 'sent',
+ text: 'Be sure to look at https://www.signal.org',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Link Preview with Small Image', () => {
+ const props = createProps({
+ previews: [
+ {
+ domain: 'signal.org',
+ image: {
+ contentType: IMAGE_PNG,
+ fileName: 'the-sax.png',
+ height: 50,
+ url: pngUrl,
+ width: 50,
+ },
+ isStickerPack: false,
+ title: 'Signal',
+ url: 'https://www.signal.org',
+ },
+ ],
+ status: 'sent',
+ text: 'Be sure to look at https://www.signal.org',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Link Preview without Image', () => {
+ const props = createProps({
+ previews: [
+ {
+ domain: 'signal.org',
+ isStickerPack: false,
+ title: 'Signal',
+ url: 'https://www.signal.org',
+ },
+ ],
+ status: 'sent',
+ text: 'Be sure to look at https://www.signal.org',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Image', () => {
+ const props = createProps({
+ attachments: [
+ {
+ url: '/fixtures/tina-rolf-269345-unsplash.jpg',
+ fileName: 'tina-rolf-269345-unsplash.jpg',
+ contentType: IMAGE_JPEG,
+ width: 128,
+ height: 128,
+ },
+ ],
+ status: 'sent',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Image with Caption', () => {
+ const props = createProps({
+ attachments: [
+ {
+ url: '/fixtures/tina-rolf-269345-unsplash.jpg',
+ fileName: 'tina-rolf-269345-unsplash.jpg',
+ contentType: IMAGE_JPEG,
+ width: 128,
+ height: 128,
+ },
+ ],
+ status: 'sent',
+ text: 'This is my home.',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Audio', () => {
+ const props = createProps({
+ attachments: [
+ {
+ contentType: AUDIO_MP3,
+ fileName: 'incompetech-com-Agnus-Dei-X.mp3',
+ url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
+ },
+ ],
+ status: 'sent',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Audio with Caption', () => {
+ const props = createProps({
+ attachments: [
+ {
+ contentType: AUDIO_MP3,
+ fileName: 'incompetech-com-Agnus-Dei-X.mp3',
+ url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
+ },
+ ],
+ status: 'sent',
+ text: 'This is what I sound like.',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Other File Type', () => {
+ const props = createProps({
+ attachments: [
+ {
+ contentType: 'text/plain' as MIMEType,
+ fileName: 'my-resume.txt',
+ url: 'my-resume.txt',
+ },
+ ],
+ status: 'sent',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Other File Type with Caption', () => {
+ const props = createProps({
+ attachments: [
+ {
+ contentType: 'text/plain' as MIMEType,
+ fileName: 'my-resume.txt',
+ url: 'my-resume.txt',
+ },
+ ],
+ status: 'sent',
+ text: 'This is what I have done.',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('TapToView Image', () => {
+ const props = createProps({
+ attachments: [
+ {
+ url: '/fixtures/tina-rolf-269345-unsplash.jpg',
+ fileName: 'tina-rolf-269345-unsplash.jpg',
+ contentType: IMAGE_JPEG,
+ width: 128,
+ height: 128,
+ },
+ ],
+ isTapToView: true,
+ status: 'sent',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('TapToView Video', () => {
+ const props = createProps({
+ attachments: [
+ {
+ contentType: VIDEO_MP4,
+ fileName: 'pixabay-Soap-Bubble-7141.mp4',
+ height: 128,
+ url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
+ width: 128,
+ },
+ ],
+ isTapToView: true,
+ status: 'sent',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('TapToView Expired', () => {
+ const props = createProps({
+ attachments: [
+ {
+ url: '/fixtures/tina-rolf-269345-unsplash.jpg',
+ fileName: 'tina-rolf-269345-unsplash.jpg',
+ contentType: IMAGE_JPEG,
+ width: 128,
+ height: 128,
+ },
+ ],
+ isTapToView: true,
+ isTapToViewExpired: true,
+ status: 'sent',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('TapToView Error', () => {
+ const props = createProps({
+ attachments: [
+ {
+ url: '/fixtures/tina-rolf-269345-unsplash.jpg',
+ fileName: 'tina-rolf-269345-unsplash.jpg',
+ contentType: IMAGE_JPEG,
+ width: 128,
+ height: 128,
+ },
+ ],
+ isTapToView: true,
+ isTapToViewError: true,
+ status: 'sent',
+ });
+
+ return ;
+});
+
+story.add('Dangerous File Type', () => {
+ const props = createProps({
+ attachments: [
+ {
+ contentType: 'application/vnd.microsoft.portable-executable' as MIMEType,
+ fileName: 'terrible.exe',
+ url: 'terrible.exe',
+ },
+ ],
+ status: 'sent',
+ });
+
+ return renderBothDirections(props);
+});
+
+story.add('Colors', () => {
+ const defaultProps = createProps({
+ text:
+ 'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
+ });
+
+ return (
+ <>
+ {Colors.map(color => (
+
+ ))}
+
+ );
+});
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 079572283a..be1947d4ae 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -61,6 +61,15 @@ interface LinkPreviewType {
image?: AttachmentType;
}
+export const Statuses = [
+ 'delivered',
+ 'error',
+ 'partial-sent',
+ 'read',
+ 'sending',
+ 'sent',
+] as const;
+
export type PropsData = {
id: string;
conversationId: string;
@@ -72,7 +81,7 @@ export type PropsData = {
interactionMode: 'mouse' | 'keyboard';
direction: 'incoming' | 'outgoing';
timestamp: number;
- status?: 'sending' | 'sent' | 'delivered' | 'read' | 'error' | 'partial-sent';
+ status?: typeof Statuses[number];
contact?: ContactType;
authorTitle: string;
authorName?: string;
diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json
index 8aa755f5eb..c86703cb36 100644
--- a/ts/util/lint/exceptions.json
+++ b/ts/util/lint/exceptions.json
@@ -11464,7 +11464,7 @@
"rule": "React-createRef",
"path": "ts/components/conversation/Message.js",
"line": " this.audioRef = react_1.default.createRef();",
- "lineNumber": 46,
+ "lineNumber": 54,
"reasonCategory": "usageTrusted",
"updated": "2020-01-21T15:46:51.245Z"
},
@@ -11472,7 +11472,7 @@
"rule": "React-createRef",
"path": "ts/components/conversation/Message.js",
"line": " this.reactionsContainerRef = react_1.default.createRef();",
- "lineNumber": 48,
+ "lineNumber": 56,
"reasonCategory": "usageTrusted",
"updated": "2020-01-21T15:46:51.245Z",
"reasonDetail": "Used for detecting clicks outside reaction viewer"
@@ -11481,7 +11481,7 @@
"rule": "React-createRef",
"path": "ts/components/conversation/Message.tsx",
"line": " public audioRef: React.RefObject = React.createRef();",
- "lineNumber": 186,
+ "lineNumber": 195,
"reasonCategory": "usageTrusted",
"updated": "2020-05-21T16:56:07.875Z"
},
@@ -11489,7 +11489,7 @@
"rule": "React-createRef",
"path": "ts/components/conversation/Message.tsx",
"line": " > = React.createRef();",
- "lineNumber": 190,
+ "lineNumber": 199,
"reasonCategory": "usageTrusted",
"updated": "2020-05-21T16:56:07.875Z"
},