session-desktop/ts/components/conversation/Quote.md

With a quotation, text-only replies

Plain text

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="About six"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="About six"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
</util.ConversationContext>

Name variations

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Profile name"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
        authorProfileName: 'OnFire',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Profile name"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
        authorProfileName: 'OnFire',
      }}
    />
  </li>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Profile name"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
        authorProfileName: 'OnFire',
        authorName: 'Mr. Fire',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Profile name"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
        authorProfileName: 'OnFire',
        authorName: 'Mr. Fire',
      }}
    />
  </li>
</util.ConversationContext>

With emoji

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="About 🔥six🔥"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many 🔥ferrets🔥 do you have?',
        authorName: 'Mr. 🔥Fire🔥',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="About 🔥six🔥"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many 🔥ferrets🔥 do you have?',
        authorName: 'Mr. 🔥Fire🔥',
      }}
    />
  </li>
</util.ConversationContext>

Replies to you or yourself

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="About six"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
        isFromMe: true,
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="About six"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
        isFromMe: true,
      }}
    />
  </li>
</util.ConversationContext>

In a group conversation

<util.ConversationContext theme={util.theme} type="group" ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      conversationType="group"
      authorName="Mr. 🔥Fire🔥"
      authorColor="green"
      text="About six"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
      }}
      authorAvatarPath={util.gifObjectUrl}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      conversationType="group"
      authorName="Mr. 🔥Fire🔥"
      status="sending"
      authorColor="green"
      text="About six"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
      }}
      authorAvatarPath={util.gifObjectUrl}
    />
  </li>
</util.ConversationContext>

All colors

Note: for incoming messages, quote color is taken from the parent message. For outgoing messages the color is taken from the contact who wrote the quoted message.

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="red"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'pink',
        text: 'red',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="red"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'red',
        text: 'red',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="red"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'pink',
        text: 'deep_orange',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="deep_orange"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'deep_orange',
        text: 'deep_orange',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="brown"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'pink',
        text: 'brown',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="brown"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'brown',
        text: 'brown',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="pink"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'pink',
        text: 'pink',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="pink"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'pink',
        text: 'pink',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="purple"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'pink',
        text: 'purple',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="purple"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'purple',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="indigo"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'pink',
        text: 'indigo',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="indigo"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'indigo',
        text: 'indigo',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="blue"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'pink',
        text: 'blue',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="blue"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'blue',
        text: 'blue',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="teal"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'pink',
        text: 'teal',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="teal"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'teal',
        text: 'teal',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'pink',
        text: 'green',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'green',
        text: 'green',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="light_green"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'pink',
        text: 'light_green',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="light_green"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'light_green',
        text: 'light_green',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="blue_grey"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'pink',
        text: 'blue_grey',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="blue_grey"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'blue_grey',
        text: 'blue_grey',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="grey"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'pink',
        text: 'grey',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="grey"
      text="Nice!"
      i18n={util.i18n}
      quote={{
        authorColor: 'grey',
        text: 'grey',
        authorPhoneNumber: '(202) 555-0011',
        onClick: () => console.log('onClick'),
      }}
    />
  </li>
</util.ConversationContext>

Referenced message not found

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="About six"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
        isFromMe: true,
        referencedMessageNotFound: true,
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="About six"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
        isFromMe: true,
        referencedMessageNotFound: true,
      }}
    />
  </li>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      conversationType="group"
      authorName="Mr. 🔥Fire🔥"
      authorColor="green"
      text="About six"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
        referencedMessageNotFound: true,
      }}
      authorAvatarPath={util.gifObjectUrl}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      conversationType="group"
      authorName="Mr. 🔥Fire🔥"
      status="sending"
      authorColor="green"
      text="About six"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
        referencedMessageNotFound: true,
      }}
      authorAvatarPath={util.gifObjectUrl}
    />
  </li>
</util.ConversationContext>

Long names and context

<util.ConversationContext theme={util.theme} type="group" ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Woo, otters!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text:
          'A really long link https://app.zeplin.io/project/5b2136b8e490ad6a54399857/screen/5b3bd068e03b763a0ee4c3e9',
        authorPhoneNumber: '(202) 555-0011',
        authorProfileName:
          'Really really really really really really really really really long!',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Woo, otters!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text:
          'A really long link https://app.zeplin.io/project/5b2136b8e490ad6a54399857/screen/5b3bd068e03b763a0ee4c3e9',
        authorPhoneNumber: '(202) 555-0011',
        authorProfileName:
          'Really really really really really really really really really long!',
      }}
    />
  </li>
</util.ConversationContext>

A lot of text in quotation

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Woo, otters!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text:
          'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
          'After that, probably dogs. And then, you know, reptiles of all types. ' +
          'Then birds. They are dinosaurs, after all. Then cephalapods, because they are ' +
          'really smart.',
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Woo, otters!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text:
          'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
          'After that, probably dogs. And then, you know, reptiles of all types. ' +
          'Then birds. They are dinosaurs, after all. Then cephalapods, because they are ' +
          'really smart.',
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

A lot of text in quotation, with icon

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Woo, otters!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text:
          'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
          'After that, probably dogs. And then, you know, reptiles of all types. ' +
          'Then birds. They are dinosaurs, after all. Then cephalapods, because they are ' +
          'really smart.',
        attachment: {
          contentType: 'text/plain',
          fileName: 'lorum_ipsum.txt',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Woo, otters!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text:
          'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
          'After that, probably dogs. And then, you know, reptiles of all types. ' +
          'Then birds. They are dinosaurs, after all. Then cephalapods, because they are ' +
          'really smart.',
        attachment: {
          contentType: 'text/plain',
          fileName: 'lorum_ipsum.txt',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

A lot of text in quotation, with image

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Woo, otters!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text:
          'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
          'After that, probably dogs. And then, you know, reptiles of all types. ' +
          'Then birds. They are dinosaurs, after all. Then cephalapods, because they are ' +
          'really smart.',
        attachment: {
          contentType: 'image/gif',
          fileName: 'pi.gif',
          thumbnail: {
            contentType: 'image/gif',
            objectUrl: util.gifObjectUrl,
          },
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Woo, otters!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text:
          'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
          'After that, probably dogs. And then, you know, reptiles of all types. ' +
          'Then birds. They are dinosaurs, after all. Then cephalapods, because they are ' +
          'really smart.',
        attachment: {
          contentType: 'image/gif',
          fileName: 'pi.gif',
          thumbnail: {
            contentType: 'image/gif',
            objectUrl: util.gifObjectUrl,
          },
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Image with caption

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Totally, it's a pretty unintuitive concept."
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'I am pretty confused about Pi.',
        attachment: {
          contentType: 'image/gif',
          fileName: 'pi.gif',
          thumbnail: {
            contentType: 'image/gif',
            objectUrl: util.gifObjectUrl,
          },
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Totally, it's a pretty unintuitive concept."
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'I am pretty confused about Pi.',
        attachment: {
          contentType: 'image/gif',
          fileName: 'pi.gif',
          thumbnail: {
            contentType: 'image/gif',
            objectUrl: util.gifObjectUrl,
          },
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Image

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Yeah, pi. Tough to wrap your head around."
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          contentType: 'image/gif',
          fileName: 'pi.gif',
          thumbnail: {
            contentType: 'image/gif',
            objectUrl: util.gifObjectUrl,
          },
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Yeah, pi. Tough to wrap your head around."
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          contentType: 'image/gif',
          fileName: 'pi.gif',
          thumbnail: {
            contentType: 'image/gif',
            objectUrl: util.gifObjectUrl,
          },
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Image with no thumbnail

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Yeah, pi. Tough to wrap your head around."
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          contentType: 'image/gif',
          fileName: 'pi.gif',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Yeah, pi. Tough to wrap your head around."
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          pending: true,
          contentType: 'image/gif',
          fileName: 'pi.gif',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Pending image download

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Yeah, pi. Tough to wrap your head around."
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          contentType: 'image/gif',
          fileName: 'pi.gif',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Yeah, pi. Tough to wrap your head around."
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          pending: true,
          contentType: 'image/gif',
          fileName: 'pi.gif',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Video with caption

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Sweet the way the video sneaks up on you!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'Check out this video I found!',
        attachment: {
          contentType: 'video/mp4',
          fileName: 'freezing_bubble.mp4',
          thumbnail: {
            contentType: 'image/gif',
            objectUrl: util.gifObjectUrl,
          },
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Sweet the way the video sneaks up on you!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'Check out this video I found!',
        attachment: {
          contentType: 'video/mp4',
          fileName: 'freezing_bubble.mp4',
          thumbnail: {
            contentType: 'image/gif',
            objectUrl: util.gifObjectUrl,
          },
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Video

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Awesome!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          contentType: 'video/mp4',
          fileName: 'freezing_bubble.mp4',
          thumbnail: {
            contentType: 'image/gif',
            objectUrl: util.gifObjectUrl,
          },
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Awesome!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          contentType: 'video/mp4',
          fileName: 'freezing_bubble.mp4',
          thumbnail: {
            contentType: 'image/gif',
            objectUrl: util.gifObjectUrl,
          },
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Video with no thumbnail

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Awesome!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          contentType: 'video/mp4',
          fileName: 'freezing_bubble.mp4',
          thumbnail: {
            contentType: 'image/gif',
          },
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Awesome!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          contentType: 'video/mp4',
          fileName: 'freezing_bubble.mp4',
          thumbnail: {
            contentType: 'image/gif',
          },
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Audio with caption

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="I really like it!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'Check out this beautiful song!',
        attachment: {
          contentType: 'audio/mp3',
          fileName: 'agnus_dei.mp4',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="I really like it!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'Check out this beautiful song!',
        attachment: {
          contentType: 'audio/mp3',
          fileName: 'agnus_dei.mp4',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Audio

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="I really like it!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          contentType: 'audio/mp3',
          fileName: 'agnus_dei.mp4',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="I really like it!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          contentType: 'audio/mp3',
          fileName: 'agnus_dei.mp4',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Voice message

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Thanks for letting me know!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          contentType: 'audio/mp3',
          fileName: 'agnus_dei.mp4',
          // Note: generated from 'flags' attribute, proposed afternoon of
          //   4/6 in Quoted Replies group
          isVoiceMessage: true,
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Thanks for letting me know!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          contentType: 'audio/mp3',
          fileName: 'agnus_dei.mp4',
          isVoiceMessage: true,
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Other file type with caption

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="I can't read latin."
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'This is my manifesto. Tell me what you think!',
        attachment: {
          contentType: 'text/plain',
          fileName: 'lorum_ipsum.txt',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="I can't read latin."
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'This is my manifesto. Tell me what you think!',
        attachment: {
          contentType: 'text/plain',
          fileName: 'lorum_ipsum.txt',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="I can't read latin."
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'This is my manifesto. Tell me what you think!',
        attachment: {
          contentType: 'text/plain',
          fileName:
            'really_really_really_really_really_really_really_really_really_long.txt',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="I can't read latin."
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'This is my manifesto. Tell me what you think!',
        attachment: {
          contentType: 'text/plain',
          fileName:
            'really_really_really_really_really_really_really_really_really_long.txt',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Other file type

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      text="Sorry, I can't read latin!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          contentType: 'text/plain',
          fileName: 'lorum_ipsum.txt',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      authorColor="green"
      text="Sorry, I can't read latin!"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        attachment: {
          contentType: 'text/plain',
          fileName: 'lorum_ipsum.txt',
        },
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

With a quotation, including attachment

Quote, image attachment, and caption

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      attachment={{
        url: util.gifObjectUrl,
        fileName: 'pi.gif',
        contentType: 'image/gif',
        width: 320,
        height: 240,
      }}
      text="About six"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      attachment={{
        url: util.gifObjectUrl,
        fileName: 'pi.gif',
        contentType: 'image/gif',
        width: 320,
        height: 240,
      }}
      authorColor="green"
      text="About six"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Quote, image attachment

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      attachment={{
        url: util.gifObjectUrl,
        fileName: 'pi.gif',
        contentType: 'image/gif',
        width: 320,
        height: 240,
      }}
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      attachment={{
        url: util.gifObjectUrl,
        fileName: 'pi.gif',
        contentType: 'image/gif',
        width: 320,
        height: 240,
      }}
      authorColor="green"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Quote, portrait image attachment

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      attachment={{
        url: util.portraitYellowObjectUrl,
        fileName: 'pi.gif',
        contentType: 'image/gif',
        width: 20,
        height: 200,
      }}
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      attachment={{
        url: util.portraitYellowObjectUrl,
        fileName: 'pi.gif',
        contentType: 'image/gif',
        width: 20,
        height: 200,
      }}
      authorColor="green"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Quote, video attachment

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      attachment={{
        screenshot: {
          url: util.pngObjectUrl,
          contentType: 'image/png',
          width: 800,
          height: 1200,
        },
        fileName: 'freezing_bubble.mp4',
        contentType: 'video/mp4',
        width: 800,
        height: 1200,
      }}
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      attachment={{
        screenshot: {
          url: util.pngObjectUrl,
          contentType: 'image/png',
          width: 800,
          height: 1200,
        },
        fileName: 'freezing_bubble.mp4',
        contentType: 'video/mp4',
        width: 800,
        height: 1200,
      }}
      authorColor="green"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Quote, audio attachment

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      attachment={{
        data: util.mp3ObjectUrl,
        fileName: 'agnus_dei.mp3',
        contentType: 'audio/mp3',
      }}
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      attachment={{
        data: util.mp3ObjectUrl,
        fileName: 'agnus_dei.mp3',
        contentType: 'audio/mp3',
      }}
      authorColor="green"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

Quote, file attachment

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      direction="incoming"
      timestamp={Date.now()}
      authorColor="green"
      attachment={{
        data: util.txtObjectUrl,
        fileName: 'lorum_ipsum.txt',
        contentType: 'text/plain',
        fileSize: '3.05 KB',
      }}
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
  <li>
    <Message
      direction="outgoing"
      timestamp={Date.now()}
      status="sending"
      attachment={{
        data: util.txtObjectUrl,
        fileName: 'lorum_ipsum.txt',
        contentType: 'text/plain',
        fileSize: '3.05 KB',
      }}
      authorColor="green"
      i18n={util.i18n}
      quote={{
        authorColor: 'purple',
        text: 'How many ferrets do you have?',
        authorPhoneNumber: '(202) 555-0011',
      }}
    />
  </li>
</util.ConversationContext>

In bottom bar

Plain text

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <div className="bottom-bar">
    <Quote
      text="How many ferrets do you have?"
      authorColor="blue"
      authorPhoneNumber="(202) 555-1000"
      authorProfileName="Mr. Blue"
      id={Date.now() - 1000}
      i18n={util.i18n}
      onClick={() => console.log('onClick')}
    />
  </div>
</util.ConversationContext>

With an icon

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <div className="bottom-bar">
    <Quote
      text="How many ferrets do you have?"
      authorColor="blue"
      authorPhoneNumber="(202) 555-1000"
      authorProfileName="Mr. Blue"
      id={Date.now() - 1000}
      i18n={util.i18n}
      attachment={{
        contentType: 'image/jpeg',
        fileName: 'llama.jpg',
      }}
      onClick={() => console.log('onClick')}
    />
  </div>
</util.ConversationContext>

With an image

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <div className="bottom-bar">
    <Quote
      text="How many ferrets do you have?"
      authorColor="blue"
      authorPhoneNumber="(202) 555-1000"
      authorProfileName="Mr. Blue"
      id={Date.now() - 1000}
      i18n={util.i18n}
      attachment={{
        contentType: 'image/gif',
        fileName: 'llama.gif',
        thumbnail: {
          objectUrl: util.gifObjectUrl,
        },
      }}
      onClick={() => console.log('onClick')}
    />
  </div>
</util.ConversationContext>

With attachment and no text

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <div className="bottom-bar">
    <Quote
      authorColor="blue"
      authorPhoneNumber="(202) 555-1000"
      authorProfileName="Mr. Blue"
      id={Date.now() - 1000}
      i18n={util.i18n}
      attachment={{
        contentType: 'image/gif',
        fileName: 'llama.gif',
        thumbnail: {
          objectUrl: util.gifObjectUrl,
        },
      }}
      onClick={() => console.log('onClick')}
    />
  </div>
</util.ConversationContext>

With generic attachment

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <div className="bottom-bar">
    <Quote
      text="How many ferrets do you have?"
      authorColor="blue"
      authorPhoneNumber="(202) 555-1000"
      authorProfileName="Mr. Blue"
      id={Date.now() - 1000}
      i18n={util.i18n}
      attachment={{
        contentType: 'text/plain',
        fileName: 'manifesto.text',
      }}
      onClick={() => console.log('onClick')}
    />
  </div>
</util.ConversationContext>

With a close button

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <div className="bottom-bar">
    <Quote
      text="How many ferrets do you have?"
      authorColor="blue"
      authorPhoneNumber="(202) 555-1000"
      authorProfileName="Mr. Blue"
      id={Date.now() - 1000}
      onClose={() => console.log('onClose')}
      onClick={() => console.log('onClick')}
      i18n={util.i18n}
    />
  </div>
</util.ConversationContext>

With a close button and icon

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <div className="bottom-bar">
    <Quote
      text="How many ferrets do you have?"
      authorColor="blue"
      authorPhoneNumber="(202) 555-1000"
      authorProfileName="Mr. Blue"
      id={Date.now() - 1000}
      onClose={() => console.log('onClose')}
      onClick={() => console.log('onClick')}
      i18n={util.i18n}
      attachment={{
        contentType: 'image/jpeg',
        fileName: 'llama.jpg',
      }}
    />
  </div>
</util.ConversationContext>

With a close button and image

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <div className="bottom-bar">
    <Quote
      text="How many ferrets do you have?"
      authorColor="blue"
      authorPhoneNumber="(202) 555-1000"
      authorProfileName="Mr. Blue"
      id={Date.now() - 1000}
      onClose={() => console.log('onClose')}
      onClick={() => console.log('onClick')}
      i18n={util.i18n}
      attachment={{
        contentType: 'image/gif',
        fileName: 'llama.gif',
        thumbnail: {
          objectUrl: util.gifObjectUrl,
        },
      }}
    />
  </div>
</util.ConversationContext>