                             <Button onClick={@scroll_to_bottom}>
                                 <Icon name='arrow-down'/> Scroll to Bottom
                             </Button>
+                            {@render_preview_button_on() if @state.preview_button}
+                            {@render_preview_button_off() if not @state.preview_button}
                         </ButtonGroup>
                     </Col>
                 </Row>
                 <Row>
                     <Col md={12} style={padding:'0px 2px 0px 2px'}>
-                        <Panel style={@chat_log_style} ref='log_container' onScroll={@on_scroll}>
+                        <Panel style={chat_log_style} ref='log_container' onScroll={@on_scroll}>
                             <ChatLog
                                 messages     = {@props.messages}
                                 account_id   = {@props.account_id}

        margin       : "0"
        padding      : "4px 7px 4px 7px"
        marginTop    : "5px"

    is_at_bottom: ->
        # 20 for covering margin of bottom message

                message = immutable.fromJS(x.insert)
                message = message.set('history', immutable.Stack(immutable.fromJS(x.insert.history)))
                message = message.set('editing', immutable.Map(x.insert.editing))
                message = message.set('show_history', immutable.Map(x.insert.show_history))
                messages = messages.set("#{x.insert.date - 0}", message)
            else if x.remove
                messages = messages.delete(x.remove.date - 0)
