             else if other_editors.size > 1
                 # Multiple editors
                 text = "#{other_editors.size} people are editing this message"
-            else if @newest_content() == ''
+            else if @newest_content().trim() == ''
                 text = "Deleted by #{@props.editor_name}"
 
         text ?= "Last edit by #{@props.editor_name}"
         color ?= "#888"
 
-        <div className="pull-left small" style={color:color, marginTop:'-8px', marginBottom:'1px'}>
+        <div className="pull-left small" style={color:color}>
             {text}
         </div>
 
-    show_user_name: ->
-        <div className={"small"} style={color:"#888", marginBottom:'1px', marginLeft:'10px'}>
-            {@props.sender_name}
-        </div>
-
-    avatar_column: ->
-        account = @props.user_map?.get(@props.message.get('sender_id'))?.toJS()
-        if @props.is_prev_sender
-            margin_top = '5px'
-        else
-            margin_top = '27px'
-
-        if @sender_is_viewer()
-            textAlign = 'left'
-            marginRight = '11px'
-        else
-            textAlign = 'right'
-            marginLeft = '11px'
-
-        style =
-            display       : "inline-block"
-            marginTop     : margin_top
-            marginLeft    : marginLeft
-            marginRight   : marginRight
-            padding       : '0px'
-            textAlign     : textAlign
-            verticalAlign : "middle"
-            width         : '4%'
-
-        # TODO: do something better when we don't know the user (or when sender account_id is bogus)
-        <Col key={0} xsHidden={true} sm={1} style={style} >
-            <div>
-                {<Avatar account={account} /> if account? and @props.show_avatar}
-            </div>
-        </Col>
-
-    content_column: ->
-        value = @newest_content()
-        if @sender_is_viewer()
-            color = '#f5f5f5'
-        else
-            color = '#fff'
-
-        # smileys, just for fun.
-        value = misc.smiley
-            s: value
-            wrap: ['<span class="smc-editor-chat-smiley">', '</span>']
-        value = misc_page.sanitize_html(value)
-
-        font_size = "#{@props.font_size}px"
-
-        if @props.show_avatar
-            marginBottom = "1vh"
-        else
-            marginBottom = "3px"
-
-        if not @props.is_prev_sender and @sender_is_viewer()
-            marginTop = "17px"
-
-        if not @props.is_prev_sender and not @props.is_next_sender
-            borderRadius = '10px 10px 10px 10px'
-        else if not @props.is_prev_sender
-            borderRadius = '10px 10px 5px 5px'
-        else if not @props.is_next_sender
-            borderRadius = '5px 5px 10px 10px'
-
-        <Col key={1} xs={10} sm={9}>
-            {@show_user_name() if not @props.is_prev_sender and not @sender_is_viewer()}
-            <Panel style={background:color, wordWrap:"break-word", marginBottom: marginBottom, marginTop: marginTop, borderRadius: borderRadius}>
-                <ListGroup fill>
-                    <ListGroupItem onDoubleClick={@edit_message} style={background:color, fontSize: font_size, borderRadius: borderRadius}>
-                        {@render_markdown(value) if not @is_editing()}
-                        {@render_input() if @is_editing()}
-                        {@editing_status() if @props.message.get('history').size > 1 or  @props.message.get('editing').size > 0}
-                        {@get_timeago()}
-                    </ListGroupItem>
-                </ListGroup>
-            </Panel>
-        </Col>
-
-    render_markdown: (value) ->
-        <div style={paddingBottom: '1px', marginBottom: '5px'}>
-            <Markdown value={value}
-                      project_id={@props.project_id}
-                      file_path={@props.file_path} />
-        </div>
-
-    # TODO: Make this a codemirror input
-    render_input: ->
-        <div>
-            <Input
-                autoFocus = {true}
-                rows      = 4
-                type      = 'textarea'
-                ref       = 'editedMessage'
-                onKeyDown = {@on_keydown}
-                value     = {@state.edited_message}
-                onChange  = {=>@setState(edited_message: @refs.editedMessage.getValue())}
-                onFocus   = {@focus_endpoint}
-                />
-        </div>
+    edit_message: ->
+        #@props.actions.set_edited_input(@props.message.get('history').peek()?.get('content') ? '')
+        @props.actions.set_editing(@props.message, true)
 
     on_keydown : (e) ->
         if e.keyCode==27 # ESC

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

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

            # Up arrow on an empty input
            @props.actions.set_to_last_input()

    focus_endpoint: (e) ->
        val = e.target.value
        e.target.value = ''
        e.target.value = val

    send_chat: (e) ->
        @scroll_to_bottom()
        e.preventDefault()
