Refactor messages model; New timeline react components

ts/components/conversation/ScrollDownButton.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { LocalizerType } from '../../types/Util';
+
+type Props = {
+  count: number;
+  conversationId: string;
+
+  scrollDown: (conversationId: string) => void;
+
+  i18n: LocalizerType;
+};
+
+export class ScrollDownButton extends React.Component<Props> {
+  public render() {
+    const { conversationId, count, i18n, scrollDown } = this.props;
+
+    let altText = i18n('scrollDown');
+    if (count > 1) {
+      altText = i18n('messagesBelow');
+    } else if (count === 1) {
+      altText = i18n('messageBelow');
+    }
+
+    return (
+      <div className="module-scroll-down">
+        <button
+          className={classNames(
+            'module-scroll-down__button',
+            count > 0 ? 'module-scroll-down__button--new-messages' : null
+          )}
+          onClick={() => {
+            scrollDown(conversationId);
+          }}
+          title={altText}
+        >
+          <div className="module-scroll-down__icon" />
+        </button>
+      </div>
+    );
+  }
+}