ConversationContext: conversationType => type

And a group conversation example to messages.md

ts/components/conversation/Message.md

@@ -34,6 +34,31 @@ const View = Whisper.MessageView;
 </util.ConversationContext>
 ```
 
+### In a group conversation
+
+```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: '+12025550003',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme} type="group" >
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
 ### With an attachment
 
 #### Image with caption

ts/components/conversation/Quote.md

@@ -88,7 +88,7 @@ const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
   }),
 }));
 const View = Whisper.MessageView;
-<util.ConversationContext theme={util.theme} conversationType="group">
+<util.ConversationContext theme={util.theme} type="group">
   <util.BackboneWrapper
     View={View}
     options={{ model: incoming }}

ts/styleguide/ConversationContext.tsx

@@ -7,7 +7,7 @@ interface Props {
    * Corresponds to the theme setting in the app, and the class added to the root element.
    */
   theme: 'ios' | 'android' | 'android-dark';
-  conversationType: 'private' | 'group';
+  type: 'private' | 'group';
 }
 
 /**
@@ -16,11 +16,11 @@ interface Props {
  */
 export class ConversationContext extends React.Component<Props, {}> {
   public render() {
-    const { theme, conversationType } = this.props;
+    const { theme, type } = this.props;
 
     return (
       <div className={theme || 'android'}>
-        <div className={classnames('conversation', conversationType || 'private')}>
+        <div className={classnames('conversation', type || 'private')}>
           <div className="discussion-container" style={{padding: '0.5em'}}>
             <ul className="message-list">
               {this.props.children}