In iOS theme, join attachment bubble with caption bubble

ts/components/conversation/Message.md

@@ -1,5 +1,5 @@
 
-Placeholder:
+Placeholder component:
 
 ```jsx
 <util.ConversationContext theme={util.theme}>
@@ -7,9 +7,36 @@ Placeholder:
 </util.ConversationContext>
 ```
 
-## With an attachment
+## MessageView (Backbone)
 
-### Image
+### Plain messages
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: 'How are you doing this fine day?',
+  sent_at: Date.now() - 18000,
+});
+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>
+```
+
+### With an attachment
+
+#### Image
 
 ```jsx
 const outgoing = new Whisper.Message({
@@ -39,12 +66,41 @@ const View = Whisper.MessageView;
 </util.ConversationContext>
 ```
 
-### Video
+#### Image, no caption
 
 ```jsx
 const outgoing = new Whisper.Message({
   type: 'outgoing',
-  body: "Beatiful, isn't it?",
+  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: "Beautiful, isn't it?",
   sent_at: Date.now() - 10000,
   attachments: [{
     data: util.mp4,
@@ -69,7 +125,36 @@ const View = Whisper.MessageView;
 </util.ConversationContext>
 ```
 
-### Audio
+#### Video, no caption
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  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({
@@ -99,12 +184,40 @@ const View = Whisper.MessageView;
 </util.ConversationContext>
 ```
 
-### Voice message
+#### Audio, no caption
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  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,
@@ -130,7 +243,7 @@ const View = Whisper.MessageView;
 </util.ConversationContext>
 ```
 
-### Other file type
+#### Other file type
 
 ```jsx
 const outgoing = new Whisper.Message({
@@ -159,3 +272,32 @@ const View = Whisper.MessageView;
   />
 </util.ConversationContext>
 ```
+
+#### Other file type, no caption
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  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

@@ -4,7 +4,7 @@ import React from 'react';
 /**
  * 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.
+ * permutations before we start moving all message functionality to React.
  */
 export class Message extends React.Component<{}, {}> {
   public render() {
@@ -13,12 +13,14 @@ export class Message extends React.Component<{}, {}> {
         <span className="avatar" />
         <div className="bubble">
           <div className="sender" dir="auto" />
-          <div className="attachments" />
-          <p className="content" dir="auto">
-            <span className="body">
-              Hi there. How are you doing? Feeling pretty good? Awesome.
-            </span>
-          </p>
+          <div className="inner-bubble">
+            <div className="attachments" />
+            <p className="content" dir="auto">
+              <span className="body">
+                Hi there. How are you doing? Feeling pretty good? Awesome.
+              </span>
+            </p>
+           </div>
           <div className="meta">
             <span
               className="timestamp"