import React, { Component, PropTypes } from 'react';
import styles from '../chat.scss';
import Message from './message/Message';

export default class ChatArea extends Component {
  render() {
    const { messages, ...rest } = this.props;
    return (
      <div id="container" className={styles.container}>
        {messages.map(message =>
          <Message
            key={message._id}
            message={message}
            {...rest}
          />
        )}
      </div>
    );
  }
}

ChatArea.propTypes = {
  messages: PropTypes.array.isRequired,
  user: PropTypes.shape({
    id: PropTypes.any
  }).isRequired,
  showAvatars: PropTypes.bool,
  avatarPreviewPosition: PropTypes.string,
  updateInputValue: PropTypes.func
};

@@ -173,16 +173,333 @@
 onent %7B%0A
+  componentDidMount() %7B%0A    setTimeout(this.updateScrollTop, 0);%0A  %7D%0A%0A  componentDidUpdate() %7B%0A    this.updateScrollTop();%0A  %7D%0A%0A  getRef = node =%3E %7B%0A    this.node = node;%0A    this.updateScrollTop();%0A  %7D;%0A%0A  updateScrollTop = () =%3E %7B%0A    if (!this.node) return;%0A    this.node.scrollTop = this.node.scrollHeight;%0A  %7D;%0A%0A
   render
@@ -577,22 +577,25 @@
 div 
-id=%22container%22
+ref=%7Bthis.getRef%7D
  cla

Reimplement auto scroll to bottom