From b9c5e7bf1d647c859b3bc9bb6f36b62267623edf Mon Sep 17 00:00:00 2001
From: Chris Svenningsen <chris@carbonfive.com>
Date: Thu, 27 Aug 2020 09:57:12 -0700
Subject: [PATCH] Migrate Message to Storybook

---
 ts/components/conversation/Message.md         | 4696 -----------------
 .../conversation/Message.stories.tsx          | 1951 ++-----
 ts/components/conversation/Message.tsx        |   11 +-
 ts/util/lint/exceptions.json                  |    8 +-
 4 files changed, 599 insertions(+), 6067 deletions(-)
 delete mode 100644 ts/components/conversation/Message.md

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
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      authorPhoneNumber="(202) 555-2001"
-      authorColor="green"
-      text="🔥"
-      i18n={util.i18n}
-      onDownload={() => console.log('onDownload')}
-      onReply={() => console.log('onReply')}
-      onShowDetail={() => console.log('onShowDetail')}
-      onDelete={() => console.log('onDelete')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      authorColor="green"
-      text="Hello there from the new world! http://somewhere.com"
-      i18n={util.i18n}
-      onDownload={() => console.log('onDownload')}
-      onReply={() => console.log('onReply')}
-      onShowDetail={() => console.log('onShowDetail')}
-      onDelete={() => console.log('onDelete')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      collapseMetadata
-      direction="incoming"
-      timestamp={Date.now()}
-      authorColor="red"
-      text="Hello there from the new world!"
-      i18n={util.i18n}
-      onDownload={() => console.log('onDownload')}
-      onReply={() => console.log('onReply')}
-      onShowDetail={() => console.log('onShowDetail')}
-      onDelete={() => console.log('onDelete')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      authorColor="grey"
-      text="Hello there from the new world! And this is multiple lines of text. Lines and lines and lines."
-      i18n={util.i18n}
-      onDownload={() => console.log('onDownload')}
-      onReply={() => console.log('onReply')}
-      onShowDetail={() => console.log('onShowDetail')}
-      onDelete={() => console.log('onDelete')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      authorColor="deep_orange"
-      timestamp={Date.now()}
-      collapseMetadata
-      text="Hello there from the new world! And this is multiple lines of text. Lines and lines and lines."
-      i18n={util.i18n}
-      onDownload={() => console.log('onDownload')}
-      onReply={() => console.log('onReply')}
-      onShowDetail={() => console.log('onShowDetail')}
-      onDelete={() => console.log('onDelete')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      timestamp={Date.now()}
-      status="sent"
-      authorColor="pink"
-      text="🔥"
-      i18n={util.i18n}
-      onDownload={() => console.log('onDownload')}
-      onReply={() => console.log('onReply')}
-      onShowDetail={() => console.log('onShowDetail')}
-      onDelete={() => console.log('onDelete')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      timestamp={Date.now()}
-      status="read"
-      authorColor="pink"
-      text="Hello there from the new world! http://somewhere.com"
-      i18n={util.i18n}
-      onDownload={() => console.log('onDownload')}
-      onReply={() => console.log('onReply')}
-      onShowDetail={() => console.log('onShowDetail')}
-      onDelete={() => console.log('onDelete')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      collapseMetadata
-      direction="outgoing"
-      status="sent"
-      timestamp={Date.now()}
-      text="Hello there from the new world! 🔥"
-      i18n={util.i18n}
-      onDownload={() => console.log('onDownload')}
-      onReply={() => console.log('onReply')}
-      onShowDetail={() => console.log('onShowDetail')}
-      onDelete={() => console.log('onDelete')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="sent"
-      timestamp={Date.now()}
-      authorColor="blue"
-      text="Hello there from the new world! And this is multiple lines of text. Lines and lines and lines."
-      i18n={util.i18n}
-      onDownload={() => console.log('onDownload')}
-      onReply={() => console.log('onReply')}
-      onShowDetail={() => console.log('onShowDetail')}
-      onDelete={() => console.log('onDelete')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="read"
-      timestamp={Date.now()}
-      collapseMetadata
-      text="Hello there from the new world! And this is multiple lines of text. Lines and lines and lines."
-      i18n={util.i18n}
-      onDownload={() => console.log('onDownload')}
-      onReply={() => console.log('onReply')}
-      onShowDetail={() => console.log('onShowDetail')}
-      onDelete={() => console.log('onDelete')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-### Status
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="sending"
-      authorColor="pink"
-      timestamp={Date.now()}
-      text="This is still sending."
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="sent"
-      authorColor="red"
-      timestamp={Date.now()}
-      text="This has been successfully sent!"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="delivered"
-      authorColor="blue"
-      timestamp={Date.now()}
-      text="This has been delivered!"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="read"
-      authorColor="purple"
-      timestamp={Date.now()}
-      text="This has been read!"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="error"
-      authorColor="purple"
-      timestamp={Date.now() - 56}
-      text="Error!"
-      i18n={util.i18n}
-      onRetrySend={() => console.log('onRetrySend')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="partial-sent"
-      authorColor="green"
-      timestamp={Date.now()}
-      text="This has been partially sent!"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="error"
-      authorColor="purple"
-      timestamp={Date.now() - 56}
-      text="Error!"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      i18n={util.i18n}
-      onRetrySend={() => console.log('onRetrySend')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="partial-sent"
-      authorColor="red"
-      timestamp={Date.now() - 56}
-      text="Error -- partially sent!"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      i18n={util.i18n}
-      onRetrySend={() => console.log('onRetrySend')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="sending"
-      authorColor="pink"
-      timestamp={Date.now()}
-      text="🔥"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="sent"
-      authorColor="red"
-      timestamp={Date.now()}
-      text="🔥"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="delivered"
-      authorColor="blue"
-      timestamp={Date.now()}
-      text="🔥"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="read"
-      authorColor="purple"
-      timestamp={Date.now()}
-      text="🔥"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="error"
-      authorColor="purple"
-      timestamp={Date.now() - 57}
-      text="🔥"
-      i18n={util.i18n}
-      onRetrySend={() => console.log('onRetrySend')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="partial-sent"
-      authorColor="blue"
-      timestamp={Date.now() - 57}
-      text="🔥"
-      i18n={util.i18n}
-      onRetrySend={() => console.log('onRetrySend')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="error"
-      authorColor="purple"
-      timestamp={Date.now() - 57}
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      text="🔥"
-      i18n={util.i18n}
-      onRetrySend={() => console.log('onRetrySend')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="partial-sent"
-      authorColor="green"
-      timestamp={Date.now() - 57}
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      text="🔥"
-      i18n={util.i18n}
-      onRetrySend={() => console.log('onRetrySend')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="error"
-      authorColor="purple"
-      timestamp={Date.now() - 57}
-      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur finibus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu metus leo. Nullam consequat leo ut accumsan aliquam. In est elit, faucibus vel arcu vitae, dapibus egestas nunc. Curabitur nec orci semper, auctor justo ornare, sagittis massa. Aliquam ultrices sem ac ex vestibulum dapibus. Etiam erat purus, interdum sit amet magna vitae, elementum lacinia leo. Duis vel mauris dui. Morbi sed accumsan erat, at facilisis metus. Nullam molestie lectus eleifend congue ultrices. Nunc porta at justo semper egestas. Proin non iaculis nibh. Cras sit amet urna dignissim, venenatis arcu a, pulvinar ipsum."
-      i18n={util.i18n}
-      onRetrySend={() => console.log('onRetrySend')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="partial-sent"
-      authorColor="blue"
-      timestamp={Date.now() - 57}
-      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur finibus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu metus leo. Nullam consequat leo ut accumsan aliquam. In est elit, faucibus vel arcu vitae, dapibus egestas nunc. Curabitur nec orci semper, auctor justo ornare, sagittis massa. Aliquam ultrices sem ac ex vestibulum dapibus. Etiam erat purus, interdum sit amet magna vitae, elementum lacinia leo. Duis vel mauris dui. Morbi sed accumsan erat, at facilisis metus. Nullam molestie lectus eleifend congue ultrices. Nunc porta at justo semper egestas. Proin non iaculis nibh. Cras sit amet urna dignissim, venenatis arcu a, pulvinar ipsum."
-      i18n={util.i18n}
-      onRetrySend={() => console.log('onRetrySend')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="error"
-      authorColor="purple"
-      timestamp={Date.now()}
-      text="🔥"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="error"
-      authorColor="purple"
-      timestamp={Date.now()}
-      text="🔥"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      i18n={util.i18n}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-### All colors
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="red"
-      timestamp={Date.now()}
-      text="This is red"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="deep_orange"
-      timestamp={Date.now()}
-      text="This is deep_orange"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="brown"
-      timestamp={Date.now()}
-      text="This is brown"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="pink"
-      timestamp={Date.now()}
-      text="This is pink"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="purple"
-      timestamp={Date.now()}
-      text="This is purple"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="indigo"
-      timestamp={Date.now()}
-      text="This is indigo"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="blue"
-      timestamp={Date.now()}
-      text="This is blue"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="teal"
-      timestamp={Date.now()}
-      text="This is teal"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="green"
-      timestamp={Date.now()}
-      text="This is green"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="light_green"
-      timestamp={Date.now()}
-      text="This is light_green"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="blue_grey"
-      timestamp={Date.now()}
-      text="This is blue_grey"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="grey"
-      timestamp={Date.now()}
-      text="This is grey"
-      i18n={util.i18n}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-### Reactions
-
-```jsx
-<util.ConversationContext>
-  {[
-    { 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) => (
-    <div key={i} className="module-message-container">
-      <Message
-        direction={spec.outgoing ? 'outgoing' : 'incoming'}
-        status="delivered"
-        authorColor="light_green"
-        timestamp={Date.now()}
-        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}
-        i18n={util.i18n}
-      />
-    </div>
-  ))}
-</util.ConversationContext>
-```
-
-### Long data
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="purple"
-      direction="incoming"
-      text="A really long link https://app.zeplin.io/project/5b2136b8e490ad6a54399857/screen/5b3bd068e03b763a0ee4c3e9"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="purple"
-      direction="outgoing"
-      status="delivered"
-      text="A really long link https://app.zeplin.io/project/5b2136b8e490ad6a54399857/screen/5b3bd068e03b763a0ee4c3e9"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="purple"
-      direction="incoming"
-      text={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur finibus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu metus leo. Nullam consequat leo ut accumsan aliquam. In est elit, faucibus vel arcu vitae, dapibus egestas nunc. Curabitur nec orci semper, auctor justo ornare, sagittis massa. Aliquam ultrices sem ac ex vestibulum dapibus. Etiam erat purus, interdum sit amet magna vitae, elementum lacinia leo. Duis vel mauris dui. Morbi sed accumsan erat, at facilisis metus. Nullam molestie lectus eleifend congue ultrices. Nunc porta at justo semper egestas. Proin non iaculis nibh. Cras sit amet urna dignissim, venenatis arcu a, pulvinar ipsum.
-
-      Integer et justo ut urna tempor ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum a nulla non blandit. In iaculis id orci maximus elementum. Mauris ultricies ipsum et magna iaculis, non porta orci elementum. Curabitur ipsum magna, porttitor id cursus nec, euismod at orci. Sed et ex id neque hendrerit auctor sed et mauris. In hac habitasse platea dictumst.
-
-      Aliquam erat volutpat. Mauris quis erat luctus enim tincidunt fringilla. Vestibulum ornare, erat sit amet pretium gravida, tortor ipsum pretium eros, ac congue mauris elit vel elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ultrices neque vulputate, pellentesque massa non, imperdiet justo. Curabitur vel ex non enim volutpat fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In gravida consectetur justo sit amet feugiat. Vivamus non eros dignissim, interdum magna at, suscipit mauris. Duis sit amet dui tempor, ornare arcu ultrices, convallis neque. Proin quis risus leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc lectus sapien, feugiat sit amet orci nec, consectetur vehicula odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas porta scelerisque egestas.
-
-      Fusce diam massa, lacinia sit amet vehicula vitae, pretium sed augue. Duis diam velit, efficitur eget fringilla vel, pharetra eu lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas et convallis tellus. Aenean in orci tincidunt, finibus nulla ut, aliquam quam. Nullam feugiat egestas urna, ultricies suscipit justo venenatis eget. Curabitur sollicitudin odio eu tincidunt porta. Nullam in metus in purus rutrum varius et sit amet nibh. Nunc at efficitur turpis, a tincidunt dolor.
-
-      Nam non leo euismod, volutpat leo quis, semper orci. Proin malesuada ultrices ex, nec fringilla ante condimentum eu. Sed vel gravida nibh. Vivamus sed tincidunt sem. Phasellus arcu orci, condimentum nec fringilla ac, maximus a arcu. Mauris sit amet sodales nisl. Etiam molestie consequat auctor. Proin auctor pulvinar mi vitae consequat.
-
-      Phasellus commodo viverra condimentum. Nam vitae facilisis nibh, dapibus eleifend nisl. Quisque eu massa nunc.`}
-      timestamp={Date.now()}
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="purple"
-      direction="outgoing"
-      status="delivered"
-      text={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur finibus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu metus leo. Nullam consequat leo ut accumsan aliquam. In est elit, faucibus vel arcu vitae, dapibus egestas nunc. Curabitur nec orci semper, auctor justo ornare, sagittis massa. Aliquam ultrices sem ac ex vestibulum dapibus. Etiam erat purus, interdum sit amet magna vitae, elementum lacinia leo. Duis vel mauris dui. Morbi sed accumsan erat, at facilisis metus. Nullam molestie lectus eleifend congue ultrices. Nunc porta at justo semper egestas. Proin non iaculis nibh. Cras sit amet urna dignissim, venenatis arcu a, pulvinar ipsum.
-
-      Integer et justo ut urna tempor ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum a nulla non blandit. In iaculis id orci maximus elementum. Mauris ultricies ipsum et magna iaculis, non porta orci elementum. Curabitur ipsum magna, porttitor id cursus nec, euismod at orci. Sed et ex id neque hendrerit auctor sed et mauris. In hac habitasse platea dictumst.
-
-      Aliquam erat volutpat. Mauris quis erat luctus enim tincidunt fringilla. Vestibulum ornare, erat sit amet pretium gravida, tortor ipsum pretium eros, ac congue mauris elit vel elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ultrices neque vulputate, pellentesque massa non, imperdiet justo. Curabitur vel ex non enim volutpat fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In gravida consectetur justo sit amet feugiat. Vivamus non eros dignissim, interdum magna at, suscipit mauris. Duis sit amet dui tempor, ornare arcu ultrices, convallis neque. Proin quis risus leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc lectus sapien, feugiat sit amet orci nec, consectetur vehicula odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas porta scelerisque egestas.
-
-      Fusce diam massa, lacinia sit amet vehicula vitae, pretium sed augue. Duis diam velit, efficitur eget fringilla vel, pharetra eu lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas et convallis tellus. Aenean in orci tincidunt, finibus nulla ut, aliquam quam. Nullam feugiat egestas urna, ultricies suscipit justo venenatis eget. Curabitur sollicitudin odio eu tincidunt porta. Nullam in metus in purus rutrum varius et sit amet nibh. Nunc at efficitur turpis, a tincidunt dolor.
-
-      Nam non leo euismod, volutpat leo quis, semper orci. Proin malesuada ultrices ex, nec fringilla ante condimentum eu. Sed vel gravida nibh. Vivamus sed tincidunt sem. Phasellus arcu orci, condimentum nec fringilla ac, maximus a arcu. Mauris sit amet sodales nisl. Etiam molestie consequat auctor. Proin auctor pulvinar mi vitae consequat.
-
-      Phasellus commodo viverra condimentum. Nam vitae facilisis nibh, dapibus eleifend nisl. Quisque eu massa nunc.`}
-      timestamp={Date.now()}
-      i18n={util.i18n}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-### Pending long message download
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="purple"
-      direction="incoming"
-      textPending={true}
-      text={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla nulla velit, id finibus orci porttitor at. Donec eget orci nunc. Fusce nisl arcu, porttitor eget eleifend id, malesuada et diam. Donec porta id magna vel egestas. Donec justo odio, dignissim ac lorem in, bibendum congue arcu. Sed aliquam, tortor non ultricies pretium, orci dui auctor augue, id efficitur orci erat a velit. Morbi efficitur ante quis ex malesuada, vitae eleifend risus dapibus. Donec sollicitudin justo sed viverra vulputate. Donec iaculis dolor velit, sit amet feugiat lacus gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-      In commodo, lacus lacinia efficitur rutrum, purus neque aliquet turpis, ac tincidunt dolor quam vitae dolor. Vestibulum ultrices orci non finibus lobortis. Etiam in efficitur augue, at pulvinar diam. Praesent gravida erat vitae dolor varius, eu fermentum justo fermentum. Nullam feugiat orci ipsum, ut congue orci varius in. Duis arcu elit, mattis ac nisi at, hendrerit pretium magna. Quisque volutpat ipsum leo, at ultrices arcu rhoncus mattis. Quisque pellentesque nisl suscipit tempor aliquet. Quisque venenatis massa eget ex fermentum, et iaculis dui porttitor. Nam sed tortor tincidunt, eleifend diam vitae, facilisis erat. Suspendisse ornare justo molestie felis bibendum, non laoreet urna posuere. Ut in felis vel mauris commodo semper et non massa. Vivamus vitae sagittis est. Nullam faucibus justo metus, eget aliquet mi vestibulum sit amet.
-
-      Nulla tincidunt dui non massa aliquam, nec luctus turpis dapibus. Duis sollicitudin consectetur justo ut volutpat. Suspendisse a consectetur ligula, nec rutrum felis. Curabitur neque lorem, finibus id molestie at, ultricies vel tortor. Praesent porttitor augue non magna blandit, quis pulvinar risus iaculis. Sed at lorem risus. Pellentesque laoreet odio et justo blandit dignissim. Curabitur eget venenatis leo, eget vehicula sem. Proin eros nisi, faucibus et malesuada a, porta id tortor. Etiam imperdiet eleifend commodo. Nunc at malesuada mi, vitae volutpat sema`}
-      timestamp={Date.now()}
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="purple"
-      direction="outgoing"
-      status="delivered"
-      textPending={true}
-      text={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla nulla velit, id finibus orci porttitor at. Donec eget orci nunc. Fusce nisl arcu, porttitor eget eleifend id, malesuada et diam. Donec porta id magna vel egestas. Donec justo odio, dignissim ac lorem in, bibendum congue arcu. Sed aliquam, tortor non ultricies pretium, orci dui auctor augue, id efficitur orci erat a velit. Morbi efficitur ante quis ex malesuada, vitae eleifend risus dapibus. Donec sollicitudin justo sed viverra vulputate. Donec iaculis dolor velit, sit amet feugiat lacus gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-      In commodo, lacus lacinia efficitur rutrum, purus neque aliquet turpis, ac tincidunt dolor quam vitae dolor. Vestibulum ultrices orci non finibus lobortis. Etiam in efficitur augue, at pulvinar diam. Praesent gravida erat vitae dolor varius, eu fermentum justo fermentum. Nullam feugiat orci ipsum, ut congue orci varius in. Duis arcu elit, mattis ac nisi at, hendrerit pretium magna. Quisque volutpat ipsum leo, at ultrices arcu rhoncus mattis. Quisque pellentesque nisl suscipit tempor aliquet. Quisque venenatis massa eget ex fermentum, et iaculis dui porttitor. Nam sed tortor tincidunt, eleifend diam vitae, facilisis erat. Suspendisse ornare justo molestie felis bibendum, non laoreet urna posuere. Ut in felis vel mauris commodo semper et non massa. Vivamus vitae sagittis est. Nullam faucibus justo metus, eget aliquet mi vestibulum sit amet.
-
-      Nulla tincidunt dui non massa aliquam, nec luctus turpis dapibus. Duis sollicitudin consectetur justo ut volutpat. Suspendisse a consectetur ligula, nec rutrum felis. Curabitur neque lorem, finibus id molestie at, ultricies vel tortor. Praesent porttitor augue non magna blandit, quis pulvinar risus iaculis. Sed at lorem risus. Pellentesque laoreet odio et justo blandit dignissim. Curabitur eget venenatis leo, eget vehicula sem. Proin eros nisi, faucibus et malesuada a, porta id tortor. Etiam imperdiet eleifend commodo. Nunc at malesuada mi, vitae volutpat sema`}
-      timestamp={Date.now()}
-      i18n={util.i18n}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-### With an attachment
-
-#### Image with caption
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="incoming"
-      text="I am pretty confused about Pi."
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-      onDownload={() => console.log('onDownload')}
-      onReply={() => console.log('onReply')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="outgoing"
-      status="delivered"
-      text="I am pretty confused about Pi."
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-      onDownload={() => console.log('onDownload')}
-      onReply={() => console.log('onReply')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="incoming"
-      text="I am pretty confused about Pi."
-      collapseMetadata
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-      onDownload={() => console.log('onDownload')}
-      onReply={() => console.log('onReply')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="outgoing"
-      text="I am pretty confused about Pi."
-      collapseMetadata
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-      onDownload={() => console.log('onDownload')}
-      onReply={() => console.log('onReply')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Image
-
-First, showing the metadata overlay on dark and light images, then a message with `collapseMetadata` set.
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() + 30 * 1000}
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      status="sent"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() + 30 * 1000}
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.pngObjectUrl,
-          contentType: 'image/png',
-          width: 800,
-          height: 1200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      status="sent"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.pngObjectUrl,
-          contentType: 'image/png',
-          width: 800,
-          height: 1200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      collapseMetadata
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.pngObjectUrl,
-          contentType: 'image/png',
-          width: 800,
-          height: 1200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      collapseMetadata
-      status="sent"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.pngObjectUrl,
-          contentType: 'image/png',
-          width: 800,
-          height: 1200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Sticker
-
-Stickers have no background, but they have all the standard message bubble features.
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      isSticker={true}
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() + 30 * 1000}
-      attachments={[
-        {
-          url: util.squareStickerObjectUrl,
-          contentType: 'image/png',
-          width: 128,
-          height: 128,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      isSticker={true}
-      status="sent"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() + 30 * 1000}
-      attachments={[
-        {
-          url: util.squareStickerObjectUrl,
-          contentType: 'image/png',
-          width: 128,
-          height: 128,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      isSticker={true}
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.squareStickerObjectUrl,
-          contentType: 'image/png',
-          width: 128,
-          height: 128,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      isSticker={true}
-      status="sent"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.squareStickerObjectUrl,
-          contentType: 'image/png',
-          width: 128,
-          height: 128,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      isSticker={true}
-      authorName="Mr. Sticker"
-      conversationType="group"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.squareStickerObjectUrl,
-          contentType: 'image/png',
-          width: 128,
-          height: 128,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      isSticker={true}
-      authorName="Mr. Sticker (and a really long suffix, long long long long long)"
-      conversationType="group"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.squareStickerObjectUrl,
-          contentType: 'image/png',
-          width: 128,
-          height: 128,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      isSticker={true}
-      conversationType="group"
-      status="sent"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.squareStickerObjectUrl,
-          contentType: 'image/png',
-          width: 128,
-          height: 128,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Sticker with collapsed metadata
-
-First set is in a 1:1 conversation, second set is in a group.
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      isSticker={true}
-      collapseMetadata
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.squareStickerObjectUrl,
-          contentType: 'image/png',
-          width: 128,
-          height: 128,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      isSticker={true}
-      collapseMetadata
-      status="sent"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.squareStickerObjectUrl,
-          contentType: 'image/png',
-          width: 128,
-          height: 128,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      isSticker={true}
-      authorName="Mr. Sticker"
-      conversationType="group"
-      collapseMetadata
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.squareStickerObjectUrl,
-          contentType: 'image/png',
-          width: 128,
-          height: 128,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      isSticker={true}
-      conversationType="group"
-      collapseMetadata
-      status="sent"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.squareStickerObjectUrl,
-          contentType: 'image/png',
-          width: 128,
-          height: 128,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Sticker with non-square aspect ratio
-
-First set is in a 1:1 conversation, second set is in a group.
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      isSticker={true}
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.landscapePurpleObjectUrl,
-          contentType: 'image/png',
-          width: 200,
-          height: 50,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      isSticker={true}
-      status="sent"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.landscapePurpleObjectUrl,
-          contentType: 'image/png',
-          width: 200,
-          height: 50,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      isSticker={true}
-      authorName="Mr. Sticker"
-      conversationType="group"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.landscapePurpleObjectUrl,
-          contentType: 'image/png',
-          width: 200,
-          height: 50,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      isSticker={true}
-      conversationType="group"
-      status="sent"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.landscapePurpleObjectUrl,
-          contentType: 'image/png',
-          width: 200,
-          height: 50,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Sticker with pending image
-
-A sticker with no attachments (what our selectors produce for a pending sticker) is not displayed at all.
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      isSticker={true}
-      collapseMetadata
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      isSticker={true}
-      collapseMetadata
-      status="sent"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      isSticker={true}
-      authorName="Mr. Sticker"
-      conversationType="group"
-      collapseMetadata
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      isSticker={true}
-      conversationType="group"
-      collapseMetadata
-      status="sent"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Multiple images
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Multiple images with caption
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      text="Two images"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      text="Three images"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      text="Four images"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      text="Five images"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      text="Six images"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Outgoing image with status
-
-Note that the delivered indicator is always Signal Blue, not the conversation color.
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="sending"
-      authorColor="pink"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.pngObjectUrl,
-          contentType: 'image/png',
-          width: 800,
-          height: 1200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="sent"
-      authorColor="red"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.pngObjectUrl,
-          contentType: 'image/png',
-          width: 800,
-          height: 1200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="delivered"
-      authorColor="blue"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.pngObjectUrl,
-          contentType: 'image/png',
-          width: 800,
-          height: 1200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="read"
-      authorColor="purple"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.pngObjectUrl,
-          contentType: 'image/png',
-          width: 800,
-          height: 1200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Pending images
-
-```
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-    <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      timestamp={Date.now()}
-      text="Hey there!"
-      i18n={util.i18n}
-      attachments={[
-        {
-          pending: true,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-    </div>
-    <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      status="sent"
-      timestamp={Date.now()}
-      text="Hey there!"
-      i18n={util.i18n}
-      attachments={[
-        {
-          pending: true,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-    </div>
-    <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      text="Three images"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          pending: true,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-    </div>
-    <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      text="Three images"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          pending: true,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-    </div>
-  </util.ConversationContext>
-```
-
-#### Image with portrait aspect ratio
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="purple"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.portraitYellowObjectUrl,
-          contentType: 'image/gif',
-          width: 20,
-          height: 200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="purple"
-      direction="outgoing"
-      status="delivered"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.portraitYellowObjectUrl,
-          contentType: 'image/gif',
-          width: 20,
-          height: 200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="purple"
-      direction="incoming"
-      collapseMetadata
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.portraitYellowObjectUrl,
-          contentType: 'image/gif',
-          width: 20,
-          height: 200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="purple"
-      direction="outgoing"
-      collapseMetadata
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.portraitYellowObjectUrl,
-          contentType: 'image/gif',
-          width: 20,
-          height: 200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Image with portrait aspect ratio and caption
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      text="This is an odd yellow bar. Cool, huh?"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.portraitYellowObjectUrl,
-          contentType: 'image/gif',
-          width: 20,
-          height: 200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      status="delivered"
-      text="This is an odd yellow bar. Cool, huh?"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.portraitYellowObjectUrl,
-          contentType: 'image/gif',
-          width: 20,
-          height: 200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      text="This is an odd yellow bar. Cool, huh?"
-      direction="incoming"
-      collapseMetadata
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.portraitYellowObjectUrl,
-          contentType: 'image/gif',
-          width: 20,
-          height: 200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      text="This is an odd yellow bar. Cool, huh?"
-      status="delivered"
-      collapseMetadata
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.portraitYellowObjectUrl,
-          contentType: 'image/gif',
-          width: 20,
-          height: 200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      text="All notifications"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now() - 366 * 24 * 60 * 60 * 1000}
-      attachments={[
-        {
-          url: util.portraitYellowObjectUrl,
-          contentType: 'image/gif',
-          width: 20,
-          height: 200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-      expirationLength={5 * 60 * 1000}
-      expirationTimestamp={Date.now() + 5 * 60 * 1000}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      text="All notifications"
-      status="delivered"
-      i18n={util.i18n}
-      timestamp={Date.now() - 366 * 24 * 60 * 60 * 1000}
-      attachments={[
-        {
-          url: util.portraitYellowObjectUrl,
-          contentType: 'image/gif',
-          width: 20,
-          height: 200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-      expirationLength={5 * 60 * 1000}
-      expirationTimestamp={Date.now() + 5 * 60 * 1000}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Image with landscape aspect ratio
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.landscapePurpleObjectUrl,
-          contentType: 'image/gif',
-          width: 200,
-          height: 50,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      status="delivered"
-      attachments={[
-        {
-          url: util.landscapePurpleObjectUrl,
-          contentType: 'image/gif',
-          width: 200,
-          height: 50,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      collapseMetadata
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.landscapePurpleObjectUrl,
-          contentType: 'image/gif',
-          width: 200,
-          height: 50,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      collapseMetadata
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.landscapePurpleObjectUrl,
-          contentType: 'image/gif',
-          width: 200,
-          height: 50,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Image with landscape aspect ratio and caption
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      text="An interesting horizontal bar. It's art."
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.landscapePurpleObjectUrl,
-          contentType: 'image/gif',
-          width: 200,
-          height: 50,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      text="An interesting horizontal bar. It's art."
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      status="delivered"
-      attachments={[
-        {
-          url: util.landscapePurpleObjectUrl,
-          contentType: 'image/gif',
-          width: 200,
-          height: 50,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      text="An interesting horizontal bar. It's art."
-      direction="incoming"
-      collapseMetadata
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.landscapePurpleObjectUrl,
-          contentType: 'image/gif',
-          width: 200,
-          height: 50,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      text="An interesting horizontal bar. It's art."
-      collapseMetadata
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.landscapePurpleObjectUrl,
-          contentType: 'image/gif',
-          width: 200,
-          height: 50,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Video with caption
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      text="Beautiful, isn't it?"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          screenshot: {
-            url: util.gifObjectUrl,
-          },
-          contentType: 'video/mp4',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      text="Beautiful, isn't it?"
-      status="delivered"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          screenshot: {
-            url: util.gifObjectUrl,
-          },
-          contentType: 'video/mp4',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      text="Beautiful, isn't it?"
-      collapseMetadata
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          screenshot: {
-            url: util.pngObjectUrl,
-            width: 800,
-            height: 1200,
-          },
-          contentType: 'video/mp4',
-          width: 800,
-          height: 1200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      text="Beautiful, isn't it?"
-      collapseMetadata
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          screenshot: {
-            url: util.pngObjectUrl,
-            width: 800,
-            height: 1200,
-          },
-          contentType: 'video/mp4',
-          width: 800,
-          height: 1200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Video
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      status="delivered"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          screenshot: {
-            url: util.pngObjectUrl,
-            width: 800,
-            height: 1200,
-          },
-          contentType: 'video/mp4',
-          width: 800,
-          height: 1200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      status="delivered"
-      attachments={[
-        {
-          screenshot: {
-            url: util.pngObjectUrl,
-            width: 800,
-            height: 1200,
-          },
-          contentType: 'video/mp4',
-          width: 800,
-          height: 1200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      status="delivered"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      collapseMetadata
-      attachments={[
-        {
-          screenshot: {
-            url: util.pngObjectUrl,
-            width: 800,
-            height: 1200,
-          },
-          contentType: 'video/mp4',
-          width: 800,
-          height: 1200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      status="delivered"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      collapseMetadata
-      attachments={[
-        {
-          screenshot: {
-            url: util.pngObjectUrl,
-            width: 800,
-            height: 1200,
-          },
-          contentType: 'video/mp4',
-          width: 800,
-          height: 1200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Missing images and videos
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: null,
-          contentType: 'image/gif',
-          fileName: 'image.gif',
-          fileSize: '3.05 KB',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: null,
-          contentType: 'image/gif',
-          fileName: 'image.gif',
-          fileSize: '3.05 KB',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      text="Did something go wrong?"
-      authorColor="green"
-      direction="incoming"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: null,
-          contentType: 'image/gif',
-          fileName: 'image.gif',
-          fileSize: '3.05 KB',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      text="Did something go wrong?"
-      direction="outgoing"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: null,
-          contentType: 'image/gif',
-          fileName: 'image.gif',
-          fileSize: '3.05 KB',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          screenshot: {
-            url: null,
-          },
-          contentType: 'video/mp4',
-          fileName: 'video.mp4',
-          fileSize: '3.05 KB',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      status="delivered"
-      attachments={[
-        {
-          screenshot: {
-            url: null,
-          },
-          contentType: 'video/mp4',
-          fileName: 'video.mp4',
-          fileSize: '3.05 KB',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      text="Did something go wrong?"
-      authorColor="green"
-      direction="incoming"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          screenshot: {
-            url: null,
-          },
-          contentType: 'video/mp4',
-          fileName: 'video.mp4',
-          fileSize: '3.05 KB',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      text="Did something go wrong?"
-      direction="outgoing"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      status="delivered"
-      attachments={[
-        {
-          screenshot: {
-            url: null,
-          },
-          contentType: 'video/mp4',
-          fileName: 'video.mp4',
-          fileSize: '3.05 KB',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Broken source URL images and videos
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: 'nonexistent',
-          contentType: 'image/gif',
-          fileName: 'image.gif',
-          fileSize: '3.05 KB',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      text="Did something go wrong?"
-      direction="outgoing"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: 'nonexistent',
-          contentType: 'image/gif',
-          fileName: 'image.gif',
-          fileSize: '3.05 KB',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          screenshot: {
-            url: 'nonexistent',
-          },
-          contentType: 'video/mp4',
-          fileName: 'video.mp4',
-          fileSize: '3.05 KB',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      status="delivered"
-      attachments={[
-        {
-          screenshot: {
-            url: 'nonexistent',
-          },
-          contentType: 'video/mp4',
-          fileName: 'video.mp4',
-          fileSize: '3.05 KB',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Image/video which is too big
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          width: 4097,
-          height: 4096,
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          fileName: 'image.gif',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          width: 4096,
-          height: 4097,
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          fileName: 'image.gif',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          height: 4096,
-          width: 4097,
-          screenshot: {
-            url: util.gifObjectUrl,
-          },
-          contentType: 'video/mp4',
-          fileName: 'video.mp4',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      status="delivered"
-      attachments={[
-        {
-          height: 4097,
-          width: 4096,
-          screenshot: {
-            url: util.gifObjectUrl,
-          },
-          contentType: 'video/mp4',
-          fileName: 'video.mp4',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Image/video missing height/width
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          fileName: 'image.gif',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          height: 240,
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          fileName: 'image.gif',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      status="delivered"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          width: 320,
-          screenshot: {
-            url: util.gifObjectUrl,
-            width: 320,
-            height: 240,
-          },
-          contentType: 'video/mp4',
-          fileName: 'video.mp4',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      status="delivered"
-      attachments={[
-        {
-          screenshot: {
-            url: util.gifObjectUrl,
-          },
-          contentType: 'video/mp4',
-          fileName: 'video.mp4',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Audio with caption
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      text="This is a nice song"
-      direction="incoming"
-      timestamp={Date.now()}
-      i18n={util.i18n}
-      attachments={[
-        {
-          url: util.mp3ObjectUrl,
-          contentType: 'audio/mp3',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      status="sent"
-      text="This is a nice song"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.mp3ObjectUrl,
-          contentType: 'audio/mp3',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      text="This is a nice song"
-      collapseMetadata
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.mp3ObjectUrl,
-          contentType: 'audio/mp3',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      text="This is a nice song"
-      collapseMetadata
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.mp3ObjectUrl,
-          contentType: 'audio/mp3',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Audio
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.mp3ObjectUrl,
-          contentType: 'audio/mp3',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      status="sent"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.mp3ObjectUrl,
-          contentType: 'audio/mp3',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      collapseMetadata
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.mp3ObjectUrl,
-          contentType: 'audio/mp3',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      collapseMetadata
-      attachments={[
-        {
-          url: util.mp3ObjectUrl,
-          contentType: 'audio/mp3',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Voice message
-
-Voice notes are not shown any differently from audio attachments.
-
-#### Other file type with caption
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      text="My manifesto is now complete!"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.txtObjectUrl,
-          contentType: 'text/plain',
-          fileName: 'my_manifesto.txt',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      text="My manifesto is now complete!"
-      status="sent"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.txtObjectUrl,
-          contentType: 'text/plain',
-          fileName: 'my_manifesto.txt',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      text="My manifesto is now complete!"
-      collapseMetadata
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.txtObjectUrl,
-          contentType: 'text/plain',
-          fileName: 'my_manifesto.txt',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      text="My manifesto is now complete!"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      collapseMetadata
-      attachments={[
-        {
-          url: util.txtObjectUrl,
-          contentType: 'text/plain',
-          fileName: 'my_manifesto.txt',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      text="My manifesto is now complete!"
-      collapseMetadata
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.txtObjectUrl,
-          contentType: 'text/plain',
-          fileName:
-            'reallly_long_filename_because_it_needs_all_the_information.txt',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      text="My manifesto is now complete!"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      collapseMetadata
-      attachments={[
-        {
-          url: util.txtObjectUrl,
-          contentType: 'text/plain',
-          fileName: 'filename_with_long_extension.the_txt_is_beautiful',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      text="My manifesto is now complete!"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      collapseMetadata
-      attachments={[
-        {
-          url: util.txtObjectUrl,
-          contentType: 'text/plain',
-          fileName: 'a_normal_four_letter_extension.jpeg',
-          fileSize: '3.05 KB',
-        },
-      ]}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Other file type
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.txtObjectUrl,
-          contentType: 'text/plain',
-          fileName: 'my_manifesto.txt',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      status="sent"
-      attachments={[
-        {
-          url: util.txtObjectUrl,
-          contentType: 'text/plain',
-          fileName: 'my_manifesto.txt',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      collapseMetadata
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.txtObjectUrl,
-          contentType: 'text/plain',
-          fileName: 'my_manifesto.txt',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      collapseMetadata
-      attachments={[
-        {
-          url: util.txtObjectUrl,
-          contentType: 'text/plain',
-          fileName: 'my_manifesto.txt',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Other file type pending
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      text="My manifesto is now complete!"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          pending: true,
-          contentType: 'text/plain',
-          fileName: 'my_manifesto.txt',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      text="My manifesto is now complete!"
-      status="sent"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          pending: true,
-          contentType: 'text/plain',
-          fileName: 'my_manifesto.txt',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          pending: true,
-          contentType: 'text/plain',
-          fileName: 'my_manifesto.txt',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          pending: true,
-          contentType: 'text/plain',
-          fileName: 'my_manifesto.txt',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Dangerous file type
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.txtObjectUrl,
-          contentType: 'text/plain',
-          fileName: 'blah.exe',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={isDangerous =>
-        console.log('showVisualAttachment - isDangerous:', isDangerous)
-      }
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      status="sent"
-      attachments={[
-        {
-          url: util.txtObjectUrl,
-          contentType: 'text/plain',
-          fileName: 'blah.exe',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={isDangerous =>
-        console.log('showVisualAttachment - isDangerous:', isDangerous)
-      }
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Link previews, full-size image
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      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)}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      status="sent"
-      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)}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      quote={{
-        authorColor: 'purple',
-        text: 'How many ferrets do you have?',
-        authorPhoneNumber: '(202) 555-0011',
-        onClick: () => 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)}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      status="sent"
-      quote={{
-        authorColor: 'purple',
-        text: 'How many ferrets do you have?',
-        authorPhoneNumber: '(202) 555-0011',
-        onClick: () => 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)}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Link previews, stickers url
-
-Sticker link previews are forced to use the small link preview form, no matter the image size.
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      text="Pretty sweet link: https://signal.art/addsticker/#pack_id=11111"
-      previews={[
-        {
-          title: 'This is a really sweet post',
-          isStickerPack: true,
-          domain: 'signal.art',
-          image: {
-            url: util.squareStickerObjectUrl,
-            contentType: 'image/png',
-            width: 512512,
-            height: 512512,
-          },
-        },
-      ]}
-      onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      status="sent"
-      text="Pretty sweet link: https://signal.art/addsticker/#pack_id=11111"
-      previews={[
-        {
-          title: 'This is a really sweet post',
-          isStickerPack: true,
-          domain: 'signal.art',
-          image: {
-            url: util.squareStickerObjectUrl,
-            contentType: 'image/png',
-            width: 512,
-            height: 512,
-          },
-        },
-      ]}
-      onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Link previews, small image
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      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: 160,
-            height: 120,
-          },
-        },
-      ]}
-      onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      status="sent"
-      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: 160,
-            height: 120,
-          },
-        },
-      ]}
-      onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      quote={{
-        authorColor: 'purple',
-        text: 'How many ferrets do you have?',
-        authorPhoneNumber: '(202) 555-0011',
-        onClick: () => 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)}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      status="sent"
-      quote={{
-        authorColor: 'purple',
-        text: 'How many ferrets do you have?',
-        authorPhoneNumber: '(202) 555-0011',
-        onClick: () => 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)}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Link previews with pending image
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      text="Pretty sweet link: https://instagram.com/something"
-      previews={[
-        {
-          title: 'This is a really sweet post',
-          domain: 'instagram.com',
-          image: {
-            pending: true,
-            contentType: 'image/png',
-            width: 800,
-            height: 1200,
-          },
-        },
-      ]}
-      onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      status="sent"
-      text="Pretty sweet link: https://instagram.com/something"
-      previews={[
-        {
-          title: 'This is a really sweet post',
-          domain: 'instagram.com',
-          image: {
-            pending: true,
-            contentType: 'image/png',
-            width: 800,
-            height: 1200,
-          },
-        },
-      ]}
-      onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      text="Pretty sweet link: https://instagram.com/something"
-      previews={[
-        {
-          title: 'This is a really sweet post',
-          domain: 'instagram.com',
-          image: {
-            pending: true,
-            contentType: 'image/png',
-            width: 160,
-            height: 120,
-          },
-        },
-      ]}
-      onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      status="sent"
-      text="Pretty sweet link: https://instagram.com/something"
-      previews={[
-        {
-          title: 'This is a really sweet post',
-          domain: 'instagram.com',
-          image: {
-            pending: true,
-            contentType: 'image/png',
-            width: 160,
-            height: 120,
-          },
-        },
-      ]}
-      onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Link previews, no image
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      text="Pretty sweet link: https://instagram.com/something"
-      previews={[
-        {
-          title: 'This is a really sweet post',
-          domain: 'instagram.com',
-        },
-      ]}
-      onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      status="sent"
-      text="Pretty sweet link: https://instagram.com/something"
-      previews={[
-        {
-          title: 'This is a really sweet post',
-          domain: 'instagram.com',
-        },
-      ]}
-      onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      quote={{
-        authorColor: 'purple',
-        text: 'How many ferrets do you have?',
-        authorPhoneNumber: '(202) 555-0011',
-        onClick: () => 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)}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      direction="outgoing"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      status="sent"
-      quote={{
-        authorColor: 'purple',
-        text: 'How many ferrets do you have?',
-        authorPhoneNumber: '(202) 555-0011',
-        onClick: () => 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)}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-### Tap to view
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      authorColor="pink"
-      conversationType="direct"
-      authorPhoneNumber="(202) 555-0003"
-      isTapToViewExpired={false}
-      isTapToView={true}
-      text="This should not be shown"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      i18n={util.i18n}
-      id="messageId1"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      authorColor="pink"
-      conversationType="direct"
-      authorPhoneNumber="(202) 555-0003"
-      isTapToViewExpired={false}
-      isTapToView={true}
-      text="This should not be shown"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'video/mp4',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      i18n={util.i18n}
-      id="messageId1"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      authorColor="blue"
-      isTapToViewExpired={true}
-      isTapToView={true}
-      text="This should not be shown"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      conversationType="direct"
-      i18n={util.i18n}
-      id="messageId2"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      authorColor="green"
-      conversationType="group"
-      authorPhoneNumber="(202) 555-0003"
-      isTapToViewExpired={false}
-      isTapToView={true}
-      text="This should not be shown"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      i18n={util.i18n}
-      id="messageId3"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      conversationType="group"
-      authorPhoneNumber="(202) 555-0003"
-      authorColor="blue"
-      isTapToViewExpired={true}
-      isTapToView={true}
-      text="This should not be shown"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      conversationType="group"
-      i18n={util.i18n}
-      id="messageId4"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      conversationType="group"
-      authorPhoneNumber="(202) 555-0003"
-      authorProfileName="A very long profile name which cannot be shown in its entirety, or maybe it can!"
-      authorColor="blue"
-      isTapToViewExpired={true}
-      isTapToView={true}
-      text="This should not be shown"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      conversationType="group"
-      i18n={util.i18n}
-      id="messageId4"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      collapseMetadata={true}
-      authorColor="blue"
-      isTapToViewExpired={true}
-      isTapToView={true}
-      text="This should not be shown"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      conversationType="direct"
-      i18n={util.i18n}
-      id="messageId5"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      authorColor="red"
-      status="delivered"
-      timestamp={Date.now()}
-      conversationType="group"
-      authorName="Not shown"
-      isTapToViewExpired={false}
-      isTapToView={true}
-      text="This should not be shown"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      i18n={util.i18n}
-      id="messageId6"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      authorColor="green"
-      status="read"
-      collapseMetadata={true}
-      timestamp={Date.now()}
-      isTapToViewExpired={false}
-      isTapToView={true}
-      text="This should not be shown"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      i18n={util.i18n}
-      id="messageId8"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      authorColor="red"
-      status="delivered"
-      timestamp={Date.now()}
-      conversationType="group"
-      authorName="Not shown"
-      isTapToViewExpired={true}
-      isTapToView={true}
-      text="This should not be shown"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      i18n={util.i18n}
-      id="messageId6"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      authorColor="green"
-      status="read"
-      collapseMetadata={true}
-      timestamp={Date.now()}
-      isTapToViewExpired={true}
-      isTapToView={true}
-      text="This should not be shown"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      i18n={util.i18n}
-      id="messageId8"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      authorColor="green"
-      isTapToViewExpired={false}
-      isTapToView={true}
-      expirationLength={5 * 60 * 1000}
-      expirationTimestamp={Date.now() + 5 * 60 * 1000}
-      text="This should not be shown"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      i18n={util.i18n}
-      id="messageId3"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      authorColor="blue"
-      isTapToViewExpired={true}
-      isTapToView={true}
-      expirationLength={5 * 60 * 1000}
-      expirationTimestamp={Date.now() + 5 * 60 * 1000}
-      text="This should not be shown"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      i18n={util.i18n}
-      id="messageId4"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      authorColor="red"
-      status="delivered"
-      timestamp={Date.now()}
-      isTapToViewExpired={false}
-      isTapToView={true}
-      expirationLength={5 * 60 * 1000}
-      expirationTimestamp={Date.now() + 5 * 60 * 1000}
-      text="This should not be shown"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      i18n={util.i18n}
-      id="messageId6"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      authorColor="red"
-      status="delivered"
-      timestamp={Date.now()}
-      isTapToViewExpired={true}
-      isTapToView={true}
-      expirationLength={5 * 60 * 1000}
-      expirationTimestamp={Date.now() + 5 * 60 * 1000}
-      text="This should not be shown"
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      i18n={util.i18n}
-      id="messageId6"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      authorColor="red"
-      status="delivered"
-      timestamp={Date.now()}
-      isTapToViewExpired={false}
-      isTapToView={true}
-      text="This should not be shown"
-      attachments={[
-        {
-          pending: true,
-          contentType: 'image/gif',
-        },
-      ]}
-      i18n={util.i18n}
-      id="messageId6"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      authorColor="red"
-      status="delivered"
-      timestamp={Date.now()}
-      isTapToViewExpired={true}
-      isTapToView={true}
-      isTapToViewError={true}
-      text="This should not be shown"
-      attachments={[]}
-      i18n={util.i18n}
-      id="messageId6"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      authorColor="red"
-      status="delivered"
-      conversationType="group"
-      timestamp={Date.now()}
-      isTapToViewExpired={true}
-      isTapToView={true}
-      isTapToViewError={true}
-      text="This should not be shown"
-      attachments={[]}
-      i18n={util.i18n}
-      id="messageId6"
-      displayTapToViewMessage={(...args) =>
-        console.log('displayTapToViewMessage', args)
-      }
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-### In a group conversation
-
-Note that the author avatar goes away if `collapseMetadata` is set.
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      authorColor="pink"
-      conversationType="group"
-      authorPhoneNumber="(202) 555-0003"
-      text="Just phone number"
-      i18n={util.i18n}
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      collapseMetadata={true}
-      timestamp={Date.now()}
-      authorColor="pink"
-      conversationType="group"
-      authorPhoneNumber="(202) 555-0003"
-      text="Collapsed metadata"
-      i18n={util.i18n}
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      authorColor="blue"
-      conversationType="group"
-      authorPhoneNumber="(202) 555-0003"
-      authorProfileName="On🔥!"
-      text="Phone number and profile name"
-      i18n={util.i18n}
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      authorColor="deep_orange"
-      conversationType="group"
-      authorName="Mr. Fire"
-      authorPhoneNumber="(202) 555-0003"
-      authorProfileName="On🔥!"
-      text="Just contact"
-      i18n={util.i18n}
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      authorColor="purple"
-      conversationType="group"
-      authorName="Mr. Fire with a super-long name and that's just what's gonna happen. No doubt."
-      authorPhoneNumber="(202) 555-0003"
-      authorProfileName="On🔥!"
-      text="Just contact"
-      i18n={util.i18n}
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      authorName="Mr. Fire"
-      conversationType="group"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.gifObjectUrl,
-          contentType: 'image/gif',
-          width: 320,
-          height: 240,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      conversationType="group"
-      authorName="Mr. Fire"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          screenshot: {
-            url: util.pngObjectUrl,
-            width: 800,
-            height: 1200,
-          },
-          contentType: 'video/mp4',
-          width: 800,
-          height: 1200,
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      conversationType="group"
-      authorName="Mr. Fire"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.mp3ObjectUrl,
-          contentType: 'audio/mp3',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      conversationType="group"
-      authorColor="red"
-      authorName="Mr. Fire"
-      text="My manifesto is now complete!"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      attachments={[
-        {
-          url: util.txtObjectUrl,
-          contentType: 'text/plain',
-          fileName: 'my_manifesto.txt',
-          fileSize: '3.05 KB',
-        },
-      ]}
-      showVisualAttachment={() => console.log('showVisualAttachment')}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      authorColor="deep_orange"
-      conversationType="group"
-      authorName="Mr. Fire"
-      collapseMetadata
-      authorPhoneNumber="(202) 555-0003"
-      authorProfileName="On🔥!"
-      text="No metadata and no author avatar -- collapsed metadata"
-      i18n={util.i18n}
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      conversationType="group"
-      authorPhoneNumber="(202) 555-0003"
-      text="No contact, no avatar"
-      authorColor="grey"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      timestamp={Date.now()}
-      authorColor="deep_orange"
-      conversationType="group"
-      authorName="Mr. Fire"
-      authorPhoneNumber="(202) 555-0003"
-      authorColor="teal"
-      text="Contact and color, but no avatar"
-      i18n={util.i18n}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      authorName="Mr. Fire"
-      conversationType="group"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      text="Pretty sweet link: https://instagram.com/something"
-      previews={[
-        {
-          title: 'This is a really sweet post',
-          domain: 'instagram.com',
-          image: {
-            url: util.gifObjectUrl,
-            contentType: 'image/gif',
-            width: 320,
-            height: 240,
-          },
-        },
-      ]}
-      onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="green"
-      authorName="Mr. Fire"
-      conversationType="group"
-      direction="incoming"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      text="Pretty sweet link: https://instagram.com/something"
-      previews={[
-        {
-          title: 'This is a really sweet post',
-          domain: 'instagram.com',
-        },
-      ]}
-      onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      authorColor="pink"
-      status="delivered"
-      timestamp={Date.now()}
-      conversationType="group"
-      authorName="Not shown"
-      text="Outgoing group messages look just like normal"
-      i18n={util.i18n}
-      authorAvatarPath={util.gifObjectUrl}
-    />
-  </div>
-</util.ConversationContext>
-```
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<MessageStory> = [
-  [
-    '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> = {}): 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 ? (
-              <h3 style={{ textAlign: outgoing ? 'right' : 'left' }}>
-                {title}
-              </h3>
-            ) : null}
-            <div key={i} className="module-message-container">
-              <Message
-                {...dataProps}
-                {...makeActionProps()}
-                {...makeHouseKeepingProps()}
-                renderEmojiPicker={renderEmojiPicker}
-              />
-            </div>
-          </>
-        );
-      }
-    )
-  )
+const renderBothDirections = (props: Props) => (
+  <>
+    <Message {...props} />
+    <br />
+    <Message {...props} direction="outgoing" />
+  </>
 );
+
+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 <Message {...props} />;
+});
+
+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 <Message {...props} />;
+});
+
+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 <Message {...props} />;
+});
+
+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 <Message {...props} />;
+});
+
+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 <Message {...props} />;
+});
+
+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 => (
+        <Message {...defaultProps} authorColor={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<HTMLAudioElement> = 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"
   },