             foreground         : true
             foreground_project : true
 
+    # All render methods
+    render_bottom_tip: ->
+        tip = <span>
+            You may enter (Github flavored) markdown here and include Latex mathematics in $ signs.  In particular, use # for headings, > for block quotes, *'s for italic text, **'s for bold text, - at the beginning of a line for lists, back ticks ` for code, and URL's will automatically become links.   Press shift+enter to send your chat. Double click to edit past chats.
+        </span>
+
+        <Tip title='Use Markdown' tip={tip}>
+            Shift+Enter to send your message.
+            Double click chat bubbles to edit them.
+            Format using <a href='https://help.github.com/articles/markdown-basics/' target='_blank'>Markdown</a>.
+            Emoticons: {misc.emoticons}.
+        </Tip>
+
+    render_preview_message: ->
+        @set_preview_state()
+        if @state.preview.length > 0
+            value = @state.preview
+            value = misc.smiley
+                s: value
+                wrap: ['<span class="smc-editor-chat-smiley">', '</span>']
+            value = misc_page.sanitize_html(value)
+
+            <Row style={position:'absolute', bottom:'0px', width:'97.2%'}>
+                <Col xs={0} sm={2}></Col>
+
+                <Col xs={10} sm={9}>
+                    <ListGroup fill>
+                        <ListGroupItem style={@preview_style}>
+                            <div style={paddingBottom: '1px', marginBottom: '5px', wordBreak:'break-all'}>
+                                <Markdown value={value}/>
+                            </div>
+                            <div className="pull-right small" style={color:'#888'}>
+                                This is a preview of your message
+                            </div>
+                        </ListGroupItem>
+                        <div></div>  {#This div tag fixes a weird bug where <li> tags would be rendered below the <ListGroupItem>}
+                    </ListGroup>
+                </Col>
+
+                <Col sm={1}></Col>
+            </Row>
+
+    render_preview_button_on: ->
+        <Button ref='on' className='smc-big-only' onClick={@button_on_click}>
+            <Icon name='toggle-on'/> Toggle Preview On
+        </Button>
+
+    render_preview_button_off: ->
+        <Button ref='off' className='smc-big-only' onClick={@button_off_click}>
+            <Icon name='toggle-off'/> Toggle Preview Off
+        </Button>
+
     render : ->
         if not @props.messages? or not @props.redux?
             return <Loading/>
+
+        if @props.input.length > 0 and @state.is_preview_on
+            paddingBottom = '75px'
+        else
+            paddingBottom = '0px'
+
+        chat_log_style =
+            overflowY    : "auto"
+            overflowX    : "hidden"
+            height       : "60vh"
+            margin       : "0"
+            padding      : "0"
+            paddingRight : "10px"
+            paddingBottom: paddingBottom
+
         if not IS_MOBILE
             <Grid>
                 <Row style={marginBottom:'5px'}>

            is_equal: (a, b) => (a - 0) == (b - 0)
        @syncdb.save()

    set_to_last_input: =>
        @setState(input:@redux.getStore(@name).get('last_sent'))

    set_input: (input) =>
        @setState(input:input)

    save_scroll_state: (position, height, offset) =>
        # height == 0 means chat room is not rendered
        if height != 0
            @setState(saved_position:position, height:height, offset:offset)


# boilerplate setting up actions, stores, sync'd file, etc.
syncdbs = {}

    clear_input: ->
        @props.actions.set_input('')

    button_off_click: ->
        if @refs.off?
            @setState(preview_button:true)
            @setState(is_preview_on:false)

    button_on_click: ->
        if @refs.on?
            @setState(preview_button:false)
            @setState(is_preview_on:true)

    chat_input_style:
        margin       : "0"
