                     </Col>
                     <Col xs={6} md={6} className="pull-right" style={padding:'2px', textAlign:'right'}>
                         <ButtonGroup>
-                            <Button onClick={@show_timetravel} bsStyle='info'>
-                                <Icon name='history'/> TimeTravel
-                            </Button>
-                            <Button onClick={@scroll_to_bottom}>
-                                <Icon name='arrow-down'/> Scroll to Bottom
-                            </Button>
+                            {@render_timetravel_button()}
+                            {@render_bottom_button()}
                             {@render_preview_button_on() if @state.preview_button}
                             {@render_preview_button_off() if not @state.preview_button}
                         </ButtonGroup>

                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}>

        if not @props.is_prev_sender and @sender_is_viewer()
            marginTop = "17px"

        if not @props.is_prev_sender and not @props.is_next_sender and not @state.show_history
            borderRadius = '10px 10px 10px 10px'
        else if not @props.is_prev_sender
            borderRadius = '10px 10px 5px 5px'
