Styleguide: Incoming/outgoing attachments of all types

ts/components/conversation/Message.md

@@ -1,6 +1,161 @@
 
+Placeholder:
+
 ```jsx
 <util.ConversationContext theme={util.theme}>
   <Message />
 </util.ConversationContext>
 ```
+
+## With an attachment
+
+### Image
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: 'I am pretty confused about Pi.',
+  sent_at: Date.now() - 18000000,
+  attachments: [{
+    data: util.gif,
+    fileName: 'pi.gif',
+    contentType: 'image/gif',
+  }],
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550100',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
+### Video
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: "Beatiful, isn't it?",
+  sent_at: Date.now() - 10000,
+  attachments: [{
+    data: util.mp4,
+    fileName: 'freezing_bubble.mp4',
+    contentType: 'video/mp4',
+  }],
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550100',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
+### Audio
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: 'This is a nice song',
+  sent_at: Date.now() - 15000,
+  attachments: [{
+    data: util.mp3,
+    fileName: 'agnus_dei.mp3',
+    contentType: 'audio/mp3',
+  }],
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550100',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
+### Voice message
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: 'This is a nice song',
+  sent_at: Date.now() - 15000,
+  attachments: [{
+    flags: textsecure.protobuf.AttachmentPointer.Flags.VOICE_MESSAGE,
+    data: util.mp3,
+    fileName: 'agnus_dei.mp3',
+    contentType: 'audio/mp3',
+  }],
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550100',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
+### Other file type
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: 'My manifesto is now complete!',
+  sent_at: Date.now() - 15000,
+  attachments: [{
+    data: util.txt,
+    fileName: 'lorum_ipsum.txt',
+    contentType: 'text/plain',
+  }],
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550100',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```

ts/components/conversation/Message.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 
 
 /**
- * A placeholder Message component, giving the structure of a plain message with none of
- * the dynamic functionality. We can build off of this going forward.
+ * A placeholder Message component for now, giving the structure of a plain message with
+ * none of the dynamic functionality. This page will be used to build up our corpus of
+ * permutations before start moving all message functionality to React.
  */
 export class Message extends React.Component<{}, {}> {
   public render() {

ts/components/conversation/Reply.md

@@ -1,2 +1,20 @@
 
 This is Reply.md.
+
+```jsx
+const model = new Whisper.Message({
+  type: 'outgoing',
+  body: 'text',
+  sent_at: Date.now() - 18000000,
+})
+const View = Whisper.MessageView;
+const options = {
+  model,
+};
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={options}
+  />
+</util.ConversationContext>
+```