Add message scrollback

client/src/css/style.css

@@ -403,6 +403,13 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
   right: 200px;
 }
 
+.messagebox-top-indicator {
+  color: #999;
+  height: 100px;
+  text-align: center;
+  padding-top: 40px;
+}
+
 .VirtualScroll {
   overflow-x: hidden !important;
 }

client/src/js/actions.js

@@ -5,6 +5,7 @@ export const CLOSE_PRIVATE_CHAT = 'CLOSE_PRIVATE_CHAT';
 export const COMMAND = 'COMMAND';
 export const CONNECT = 'CONNECT';
 export const DISCONNECT = 'DISCONNECT';
+export const FETCH_MESSAGES = 'FETCH_MESSAGES';
 export const HIDE_MENU = 'HIDE_MENU';
 export const INPUT_HISTORY_ADD = 'INPUT_HISTORY_ADD';
 export const INPUT_HISTORY_DECREMENT = 'INPUT_HISTORY_DECREMENT';

client/src/js/actions/message.js

@@ -1,5 +1,6 @@
 import * as actions from '../actions';
 import { findBreakpoints, messageHeight, linkify, timestamp } from '../util';
+import { getSelectedMessages } from '../reducers/messages';
 
 let nextID = 0;
 
@@ -47,6 +48,32 @@ function getMessageTab(server, to) {
   return to;
 }
 
+export function fetchMessages() {
+  return (dispatch, getState) => {
+    const state = getState();
+    const first = getSelectedMessages(state).get(0);
+
+    if (!first) {
+      return;
+    }
+
+    const tab = state.tab.selected;
+    if (tab.isChannel()) {
+      dispatch({
+        type: actions.FETCH_MESSAGES,
+        socket: {
+          type: 'fetch_messages',
+          data: {
+            server: tab.server,
+            channel: tab.name,
+            next: first.id
+          }
+        }
+      });
+    }
+  };
+}
+
 export function updateMessageHeight() {
   return (dispatch, getState) => dispatch({
     type: actions.UPDATE_MESSAGE_HEIGHT,
@@ -86,19 +113,24 @@ export function addMessage(message, server, to) {
   });
 }
 
-export function addMessages(messages, server, to) {
+export function addMessages(messages, server, to, prepend, next) {
   const tab = getMessageTab(server, to);
 
   return (dispatch, getState) => {
     const state = getState();
 
+    if (next) {
+      messages[0].id = next;
+    }
+
     messages.forEach(message => initMessage(message, server, message.tab || tab, state));
 
     dispatch({
       type: actions.ADD_MESSAGES,
       server,
       tab,
-      messages
+      messages,
+      prepend
     });
   };
 }

client/src/js/components/Message.js

@@ -1,8 +1,6 @@
 import React, { PureComponent } from 'react';
 
 export default class Message extends PureComponent {
-  handleNickClick = () => this.props.onNickClick(this.props.message);
-
   render() {
     const { message } = this.props;
     const className = message.type ? `message message-${message.type}` : 'message';

client/src/js/components/MessageBox.js

@@ -1,34 +1,65 @@
 import React, { PureComponent } from 'react';
 import { List } from 'react-virtualized/dist/commonjs/List';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
+import debounce from 'lodash/debounce';
 import Message from './Message';
 import { measureScrollBarWidth } from '../util';
 
 const scrollBarWidth = measureScrollBarWidth();
 const listStyle = { padding: '7px 0', boxSizing: 'content-box' };
+const threshold = 100;
 
 export default class MessageBox extends PureComponent {
   componentWillUpdate(nextProps) {
+    if (nextProps.messages !== this.props.messages) {
+      this.list.recomputeRowHeights();
+    }
+
     if (nextProps.tab !== this.props.tab) {
       this.bottom = true;
     }
 
-    if (nextProps.messages !== this.props.messages) {
+    if (nextProps.messages.get(0) !== this.props.messages.get(0)) {
-      this.list.recomputeRowHeights();
+      if (nextProps.tab === this.props.tab) {
+        const addedMessages = nextProps.messages.size - this.props.messages.size;
+        let addedHeight = 0;
+        for (let i = 0; i < addedMessages; i++) {
+          addedHeight += nextProps.messages.get(i).height;
+        }
+
+        this.nextScrollTop = addedHeight + this.container.scrollTop;
+      }
+
+      this.loading = false;
     }
   }
 
   componentDidUpdate() {
-    if (this.bottom) {
+    if (this.nextScrollTop > 0) {
-      this.list.scrollToRow(this.props.messages.size);
+      this.container.scrollTop = this.nextScrollTop;
+      this.nextScrollTop = 0;
+    } else if (this.bottom) {
+      this.container.scrollTop = this.container.scrollHeight;
     }
 
     this.updateWidth();
   }
 
-  getRowHeight = ({ index }) => this.props.messages.get(index).height;
+  getRowHeight = ({ index }) => {
+    if (index === 0) {
+      if (this.props.hasMoreMessages) {
+        return 100;
+      }
+      return 0;
+    }
+    return this.props.messages.get(index - 1).height;
+  }
 
-  listRef = el => { this.list = el; };
+  listRef = el => {
+    this.list = el;
+    // eslint-disable-next-line no-underscore-dangle
+    this.container = el.Grid._scrollingContainer;
+  };
 
   updateWidth = (width) => {
     const { tab, setWrapWidth, updateMessageHeight } = this.props;
@@ -42,9 +73,7 @@ export default class MessageBox extends PureComponent {
       this.width = wrapWidth;
     }
 
-    // eslint-disable-next-line no-underscore-dangle
+    if (this.container.scrollHeight > this.container.clientHeight) {
-    const container = this.list.Grid._scrollingContainer;
-    if (container.scrollHeight > container.clientHeight) {
       wrapWidth -= scrollBarWidth;
     }
 
@@ -59,13 +88,59 @@ export default class MessageBox extends PureComponent {
     this.updateWidth(size.width - 30);
   };
 
+  fetchMore = debounce(() => {
+    this.loading = true;
+    this.props.onFetchMore();
+  }, 100);
+
   handleScroll = ({ scrollTop, clientHeight, scrollHeight }) => {
+    if (this.props.hasMoreMessages &&
+      scrollTop <= threshold &&
+      scrollTop < this.prevScrollTop &&
+      !this.loading) {
+      if (this.mouseDown) {
+        this.shouldFetch = true;
+      } else {
+        this.fetchMore();
+      }
+    }
+
     this.bottom = scrollTop + clientHeight >= scrollHeight;
+    this.prevScrollTop = scrollTop;
+  };
+
+  handleMouseDown = () => {
+    this.mouseDown = true;
+  };
+
+  handleMouseUp = () => {
+    this.mouseDown = false;
+
+    if (this.shouldFetch) {
+      this.shouldFetch = false;
+      this.loading = true;
+      this.props.onFetchMore();
+    }
   };
 
   renderMessage = ({ index, style }) => {
+    if (index === 0) {
+      if (this.props.hasMoreMessages) {
+        return (
+          <div
+            key="top"
+            className="messagebox-top-indicator"
+            style={style}
+          >
+            Loading messages...
+          </div>
+        );
+      }
+      return null;
+    }
+
     const { messages, onNickClick } = this.props;
-    const message = messages.get(index);
+    const message = messages.get(index - 1);
 
     return (
       <Message
@@ -79,14 +154,18 @@ export default class MessageBox extends PureComponent {
 
   render() {
     return (
-      <div className="messagebox">
+      <div
+        className="messagebox"
+        onMouseDown={this.handleMouseDown}
+        onMouseUp={this.handleMouseUp}
+      >
         <AutoSizer onResize={this.handleResize}>
           {({ width, height }) => (
             <List
               ref={this.listRef}
               width={width}
               height={height - 14}
-              rowCount={this.props.messages.size}
+              rowCount={this.props.messages.size + 1}
               rowHeight={this.getRowHeight}
               rowRenderer={this.renderMessage}
               onScroll={this.handleScroll}

client/src/js/containers/Chat.js

@@ -12,12 +12,14 @@ import { part } from '../actions/channel';
 import { openPrivateChat, closePrivateChat } from '../actions/privateChat';
 import { searchMessages, toggleSearch } from '../actions/search';
 import { select, setSelectedTab } from '../actions/tab';
-import { runCommand, sendMessage, updateMessageHeight } from '../actions/message';
+import { runCommand, sendMessage, updateMessageHeight, fetchMessages } from '../actions/message';
 import { disconnect } from '../actions/server';
 import { setWrapWidth, setCharWidth } from '../actions/environment';
 import { stringWidth } from '../util';
 import { toggleUserList } from '../actions/ui';
 import * as inputHistoryActions from '../actions/inputHistory';
+import { getSelectedTab } from '../reducers/tab';
+import { getSelectedMessages } from '../reducers/messages';
 
 function updateSelected({ params, dispatch }) {
   if (params.server) {
@@ -64,9 +66,11 @@ class Chat extends PureComponent {
     this.props.select(tab.server, message.from);
   };
 
+  handleFetchMore = () => this.props.dispatch(fetchMessages());
+
   render() {
     const { title, tab, channel, search, history,
-      messages, users, showUserList, inputActions } = this.props;
+      messages, hasMoreMessages, users, showUserList, inputActions } = this.props;
 
     let chatClass;
     if (tab.isChannel()) {
@@ -95,10 +99,12 @@ class Chat extends PureComponent {
         />
         <MessageBox
           messages={messages}
+          hasMoreMessages={hasMoreMessages}
           tab={tab}
           setWrapWidth={this.props.setWrapWidth}
           updateMessageHeight={this.props.updateMessageHeight}
           onNickClick={this.handleMessageNickClick}
+          onFetchMore={this.handleFetchMore}
         />
         <MessageInput
           tab={tab}
@@ -120,8 +126,6 @@ class Chat extends PureComponent {
   }
 }
 
-const tabSelector = state => state.tab.selected;
-const messageSelector = state => state.messages;
 const serverSelector = state => state.servers;
 const channelSelector = state => state.channels;
 const searchSelector = state => state.search;
@@ -134,14 +138,8 @@ const historySelector = state => {
   return state.input.history.get(state.input.index);
 };
 
-const selectedMessagesSelector = createSelector(
-  tabSelector,
-  messageSelector,
-  (tab, messages) => messages.getIn([tab.server, tab.name || tab.server], List())
-);
-
 const selectedChannelSelector = createSelector(
-  tabSelector,
+  getSelectedTab,
   channelSelector,
   (tab, channels) => channels.getIn([tab.server, tab.name], Map())
 );
@@ -152,16 +150,22 @@ const usersSelector = createSelector(
 );
 
 const titleSelector = createSelector(
-  tabSelector,
+  getSelectedTab,
   serverSelector,
   (tab, servers) => tab.name || servers.getIn([tab.server, 'name'])
 );
 
+const getHasMoreMessages = createSelector(
+  getSelectedMessages,
+  messages => messages.get(0) && typeof messages.get(0).id === 'string'
+);
+
 const mapStateToProps = createStructuredSelector({
   title: titleSelector,
-  tab: tabSelector,
+  tab: getSelectedTab,
   channel: selectedChannelSelector,
-  messages: selectedMessagesSelector,
+  messages: getSelectedMessages,
+  hasMoreMessages: getHasMoreMessages,
   users: usersSelector,
   showUserList: showUserListSelector,
   search: searchSelector,

client/src/js/index.js

@@ -48,8 +48,8 @@ if (env.users) {
 }
 
 if (env.messages) {
-  const { messages, server, to } = env.messages;
+  const { messages, server, to, next } = env.messages;
-  store.dispatch(addMessages(messages, server, to));
+  store.dispatch(addMessages(messages, server, to, false, next));
 }
 
 handleSocket(socket, store);

client/src/js/reducers/messages.js

@@ -1,7 +1,9 @@
 import { List, Map, Record } from 'immutable';
+import { createSelector } from 'reselect';
 import createReducer from '../util/createReducer';
 import { messageHeight } from '../util';
 import * as actions from '../actions';
+import { getSelectedTab } from './tab';
 
 const Message = Record({
   id: null,
@@ -19,16 +21,30 @@ function addMessage(state, { server, tab, message }) {
   return state.updateIn([server, tab], List(), list => list.push(new Message(message)));
 }
 
+export const getMessages = state => state.messages;
+
+export const getSelectedMessages = createSelector(
+  getSelectedTab,
+  getMessages,
+  (tab, messages) => messages.getIn([tab.server, tab.name || tab.server], List())
+);
+
 export default createReducer(Map(), {
   [actions.SEND_MESSAGE]: addMessage,
   [actions.ADD_MESSAGE]: addMessage,
 
-  [actions.ADD_MESSAGES](state, { server, tab, messages }) {
+  [actions.ADD_MESSAGES](state, { server, tab, messages, prepend }) {
-    return state.withMutations(s =>
+    return state.withMutations(s => {
+      if (prepend) {
+        for (let i = messages.length - 1; i >= 0; i--) {
+          s.updateIn([server, tab], List(), list => list.unshift(new Message(messages[i])));
+        }
+      } else {
         messages.forEach(message =>
           s.updateIn([server, tab], List(), list => list.push(new Message(message)))
-      )
         );
+      }
+    });
   },
 
   [actions.DISCONNECT](state, { server }) {

client/src/js/reducers/tab.js

@@ -19,6 +19,8 @@ const State = Record({
   history: List()
 });
 
+export const getSelectedTab = state => state.tab.selected;
+
 export default createReducer(new State(), {
   [actions.SELECT_TAB](state, action) {
     const tab = new Tab(action);

client/src/js/socket.js

@@ -29,25 +29,25 @@ export default function handleSocket(socket, { dispatch, getState }) {
       dispatch(addMessage(message, message.server, message.from));
     },
 
-    messages({ messages, server, to }) {
+    messages({ messages, server, to, prepend, next }) {
-      dispatch(addMessages(messages, server, to));
+      dispatch(addMessages(messages, server, to, prepend, next));
     },
 
-    join(data) {
+    join({ user, server, channels }) {
       const state = getState();
-      const { server, channel } = state.tab.selected;
+      const tab = state.tab.selected;
-      if (server && channel) {
+      const [joinedChannel] = channels;
-        const { nick } = state.servers.get(server);
+      if (tab.server && tab.name) {
-        const [joinedChannel] = data.channels;
+        const { nick } = state.servers.get(tab.server);
-        if (server === data.server &&
+        if (tab.server === server &&
-          nick === data.user &&
+          nick === user &&
-          channel !== joinedChannel &&
+          tab.name !== joinedChannel &&
-          normalizeChannel(channel) === normalizeChannel(joinedChannel)) {
+          normalizeChannel(tab.name) === normalizeChannel(joinedChannel)) {
           dispatch(select(server, joinedChannel));
         }
       }
 
-      dispatch(inform(`${data.user} joined the channel`, data.server, data.channels[0]));
+      dispatch(inform(`${user} joined the channel`, server, joinedChannel));
     },
 
     servers(data) {

server/index_data.go

@@ -69,13 +69,19 @@ func getIndexData(r *http.Request, session *Session) *indexData {
 			}
 		}
 
-		messages, err := session.user.GetLastMessages(params[0], params[1], 25)
+		messages, hasMore, err := session.user.GetLastMessages(params[0], params[1], 50)
 		if err == nil && len(messages) > 0 {
-			data.Messages = &Messages{
+			m := Messages{
 				Server:   params[0],
 				To:       params[1],
 				Messages: messages,
 			}
+
+			if hasMore {
+				m.Next = messages[0].ID
+			}
+
+			data.Messages = &m
 		}
 	}
 

server/json.go

@@ -72,6 +72,8 @@ type Messages struct {
 	Server   string            `json:"server"`
 	To       string            `json:"to"`
 	Messages []storage.Message `json:"messages"`
+	Prepend  bool              `json:"prepend,omitempty"`
+	Next     string            `json:"next,omitempty"`
 }
 
 type Topic struct {
@@ -145,6 +147,12 @@ type ClientCert struct {
 	Key  []byte `json:"key"`
 }
 
+type FetchMessages struct {
+	Server  string `json:"server"`
+	Channel string `json:"channel"`
+	Next    string `json:"next"`
+}
+
 type Error struct {
 	Server  string `json:"server"`
 	Message string `json:"message"`

server/websocket_handler.go

@@ -79,13 +79,19 @@ func (h *wsHandler) init(r *http.Request) {
 			Users:   channelStore.GetUsers(channel.Server, channel.Name),
 		})
 
-		messages, err := h.session.user.GetLastMessages(channel.Server, channel.Name, 25)
+		messages, hasMore, err := h.session.user.GetLastMessages(channel.Server, channel.Name, 50)
 		if err == nil && len(messages) > 0 {
-			h.session.sendJSON("messages", Messages{
+			res := Messages{
 				Server:   channel.Server,
 				To:       channel.Name,
 				Messages: messages,
-			})
+			}
+
+			if hasMore {
+				res.Next = messages[0].ID
+			}
+
+			h.session.sendJSON("messages", res)
 		}
 	}
 }
@@ -271,6 +277,27 @@ func (h *wsHandler) cert(b []byte) {
 	h.session.sendJSON("cert_success", nil)
 }
 
+func (h *wsHandler) fetchMessages(b []byte) {
+	var data FetchMessages
+	json.Unmarshal(b, &data)
+
+	messages, hasMore, err := h.session.user.GetMessages(data.Server, data.Channel, 200, data.Next)
+	if err == nil && len(messages) > 0 {
+		res := Messages{
+			Server:   data.Server,
+			To:       data.Channel,
+			Messages: messages,
+			Prepend:  true,
+		}
+
+		if hasMore {
+			res.Next = messages[0].ID
+		}
+
+		h.session.sendJSON("messages", res)
+	}
+}
+
 func (h *wsHandler) initHandlers() {
 	h.handlers = map[string]func([]byte){
 		"connect":        h.connect,
@@ -286,5 +313,6 @@ func (h *wsHandler) initHandlers() {
 		"raw":            h.raw,
 		"search":         h.search,
 		"cert":           h.cert,
+		"fetch_messages": h.fetchMessages,
 	}
 }

storage/user_messages.go

@@ -10,7 +10,7 @@ import (
 )
 
 type Message struct {
-	ID      string `json:"id" bleve:"-"`
+	ID      string `json:"-" bleve:"-"`
 	Server  string `json:"-" bleve:"server"`
 	From    string `json:"from" bleve:"-"`
 	To      string `json:"-" bleve:"to"`
@@ -53,36 +53,13 @@ func (u *User) LogMessage(id, server, from, to, content string) error {
 	return u.messageIndex.Index(id, message)
 }
 
-func (u *User) GetLastMessages(server, channel string, count int) ([]Message, error) {
+func (u *User) GetLastMessages(server, channel string, count int) ([]Message, bool, error) {
-	messages := make([]Message, count)
+	return u.GetMessages(server, channel, count, "")
-
-	u.messageLog.View(func(tx *bolt.Tx) error {
-		b := tx.Bucket(bucketMessages).Bucket([]byte(server + ":" + channel))
-		if b == nil {
-			return nil
-		}
-
-		c := b.Cursor()
-
-		for _, v := c.Last(); count > 0 && v != nil; _, v = c.Prev() {
-			count--
-			messages[count].Unmarshal(v)
-		}
-
-		return nil
-	})
-
-	if count == 0 {
-		return messages, nil
-	} else if count < len(messages) {
-		return messages[count:], nil
-	}
-
-	return nil, nil
 }
 
-func (u *User) GetMessages(server, channel string, count int, fromID string) ([]Message, error) {
+func (u *User) GetMessages(server, channel string, count int, fromID string) ([]Message, bool, error) {
 	messages := make([]Message, count)
+	hasMore := false
 
 	u.messageLog.View(func(tx *bolt.Tx) error {
 		b := tx.Bucket(bucketMessages).Bucket([]byte(server + ":" + channel))
@@ -91,23 +68,35 @@ func (u *User) GetMessages(server, channel string, count int, fromID string) ([]
 		}
 
 		c := b.Cursor()
+
+		if fromID != "" {
 			c.Seek([]byte(fromID))
 
 			for k, v := c.Prev(); count > 0 && k != nil; k, v = c.Prev() {
 				count--
 				messages[count].Unmarshal(v)
 			}
+		} else {
+			for k, v := c.Last(); count > 0 && k != nil; k, v = c.Prev() {
+				count--
+				messages[count].Unmarshal(v)
+			}
+		}
+
+		c.Next()
+		k, _ := c.Prev()
+		hasMore = k != nil
 
 		return nil
 	})
 
 	if count == 0 {
-		return messages, nil
+		return messages, hasMore, nil
 	} else if count < len(messages) {
-		return messages[count:], nil
+		return messages[count:], hasMore, nil
 	}
 
-	return nil, nil
+	return nil, false, nil
 }
 
 func (u *User) SearchMessages(server, channel, q string) ([]Message, error) {

storage/user_test.go

@@ -88,12 +88,14 @@ func TestMessages(t *testing.T) {
 	user, err := NewUser()
 	assert.Nil(t, err)
 
-	messages, err := user.GetMessages("irc.freenode.net", "#go-nuts", 10, "6")
+	messages, hasMore, err := user.GetMessages("irc.freenode.net", "#go-nuts", 10, "6")
 	assert.Nil(t, err)
+	assert.False(t, hasMore)
 	assert.Len(t, messages, 0)
 
-	messages, err = user.GetLastMessages("irc.freenode.net", "#go-nuts", 10)
+	messages, hasMore, err = user.GetLastMessages("irc.freenode.net", "#go-nuts", 10)
 	assert.Nil(t, err)
+	assert.False(t, hasMore)
 	assert.Len(t, messages, 0)
 
 	messages, err = user.SearchMessages("irc.freenode.net", "#go-nuts", "message")
@@ -108,35 +110,40 @@ func TestMessages(t *testing.T) {
 		assert.Nil(t, err)
 	}
 
-	messages, err = user.GetMessages("irc.freenode.net", "#go-nuts", 10, ids[4])
+	messages, hasMore, err = user.GetMessages("irc.freenode.net", "#go-nuts", 10, ids[4])
 	assert.Equal(t, "message0", messages[0].Content)
 	assert.Equal(t, "message3", messages[3].Content)
 	assert.Nil(t, err)
+	assert.False(t, hasMore)
 	assert.Len(t, messages, 4)
 
-	messages, err = user.GetMessages("irc.freenode.net", "#go-nuts", 10, betterguid.New())
+	messages, hasMore, err = user.GetMessages("irc.freenode.net", "#go-nuts", 10, betterguid.New())
 	assert.Equal(t, "message0", messages[0].Content)
 	assert.Equal(t, "message4", messages[4].Content)
 	assert.Nil(t, err)
+	assert.False(t, hasMore)
 	assert.Len(t, messages, 5)
 
-	messages, err = user.GetMessages("irc.freenode.net", "#go-nuts", 10, ids[2])
+	messages, hasMore, err = user.GetMessages("irc.freenode.net", "#go-nuts", 10, ids[2])
 	assert.Equal(t, "message0", messages[0].Content)
 	assert.Equal(t, "message1", messages[1].Content)
 	assert.Nil(t, err)
+	assert.False(t, hasMore)
 	assert.Len(t, messages, 2)
 
-	messages, err = user.GetLastMessages("irc.freenode.net", "#go-nuts", 10)
+	messages, hasMore, err = user.GetLastMessages("irc.freenode.net", "#go-nuts", 10)
 	assert.Equal(t, "message0", messages[0].Content)
-	assert.Equal(t, "message2", messages[2].Content)
+	assert.Equal(t, "message4", messages[4].Content)
 	assert.Nil(t, err)
+	assert.False(t, hasMore)
 	assert.Len(t, messages, 5)
 
-	messages, err = user.GetLastMessages("irc.freenode.net", "#go-nuts", 3)
+	messages, hasMore, err = user.GetLastMessages("irc.freenode.net", "#go-nuts", 4)
-	assert.Equal(t, "message2", messages[0].Content)
+	assert.Equal(t, "message1", messages[0].Content)
-	assert.Equal(t, "message4", messages[2].Content)
+	assert.Equal(t, "message4", messages[3].Content)
 	assert.Nil(t, err)
-	assert.Len(t, messages, 3)
+	assert.True(t, hasMore)
+	assert.Len(t, messages, 4)
 
 	messages, err = user.SearchMessages("irc.freenode.net", "#go-nuts", "message")
 	assert.Nil(t, err)