Move history to chat

assets/chat/js/chat.js

@@ -128,6 +128,7 @@ class Chat {
     this.source.on('DISPATCH', (data) => this.onDISPATCH(data));
     this.source.on('CLOSE', (data) => this.onCLOSE(data));
     this.source.on('NAMES', (data) => this.onNAMES(data));
+    this.source.on('HISTORY', (data) => this.onHISTORY(data));
     this.source.on('PIN', (data) => this.onPIN(data));
     this.source.on('QUIT', (data) => this.onQUIT(data));
     this.source.on('MSG', (data) => this.onMSG(data));
@@ -607,15 +608,6 @@ class Chat {
       .catch(() => {});
   }
 
-  async loadHistory() {
-    return fetch(`${this.config.api.base}/api/chat/history`)
-      .then((res) => res.json())
-      .then((json) => {
-        this.setHistory(json);
-      })
-      .catch(() => {});
-  }
-
   async loadWhispers() {
     fetch(`${this.config.api.base}/api/messages/unread`, {
       credentials: 'include',
@@ -651,17 +643,6 @@ class Chat {
     return this;
   }
 
-  setHistory(history) {
-    if (history && history.length > 0) {
-      this.backlogloading = true;
-      history.forEach((line) => this.source.parseAndDispatch({ data: line }));
-      this.backlogloading = false;
-      MessageBuilder.element('<hr/>').into(this);
-      this.mainwindow.update(true);
-    }
-    return this;
-  }
-
   saveSettings() {
     if (this.authenticated) {
       if (this.settings.get('profilesettings')) {
@@ -1129,6 +1110,15 @@ class Chat {
     }
   }
 
+  onHISTORY(messages) {
+    if (messages && messages.length > 0) {
+      this.backlogloading = true;
+      messages.forEach((data) => this.source.parseAndDispatch({ data }));
+      this.backlogloading = false;
+      this.mainwindow.update(true);
+    }
+  }
+
   onPIN(msg) {
     if (this.pinnedMessage?.uuid === msg.uuid) return;
     this.pinnedMessage?.unpin();

assets/chat/js/messages/ChatMessage.js

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import md5 from 'md5';
 import ChatUIMessage from './ChatUIMessage';
 import MessageTypes from './MessageTypes';
 import {
@@ -41,6 +42,9 @@ export default class ChatMessage extends ChatUIMessage {
     this.ignored = false;
     this.censorType = null;
     this.watching = null;
+    this.md5 = md5(
+      `${this.timestamp.valueOf()}${this.user?.id ?? ''}${this.message}`,
+    );
   }
 
   html(chat = null) {

assets/chat/js/window.js

@@ -75,15 +75,45 @@ class ChatWindow extends EventEmitter {
   }
 
   addMessage(chat, message) {
+    // Return if message is already in chat.
+    if (this.containsMessage(message)) return;
+
     message.ui = message.html(chat);
     message.afterRender(chat);
-    this.messages.push(message);
-    this.lastmessage = message;
-    this.lines.append(message.ui);
+
+    // Get index of where the message should be based on timestamp.
+    const index = this.messages.findLastIndex(
+      (m) => m.timestamp.valueOf() <= message.timestamp.valueOf(),
+    );
+
+    /**
+     * If message index is < 0 then add message to the top of chat.
+     *
+     * If message index + 1 >= the length of messages array,
+     * it is a new message so add to bottom of chat.
+     *
+     * Otherwise the message is inbetween so insert in correct place.
+     */
+    if (index < 0) {
+      this.lines.prepend(message.ui);
+      this.messages.unshift(message);
+    } else if (index + 1 >= this.messages.length) {
+      this.lines.append(message.ui);
+      this.messages.push(message);
+      this.lastmessage = message;
+    } else {
+      this.lines.insertBefore(message.ui, this.messages[index + 1].ui);
+      this.messages.splice(index + 1, 0, message);
+    }
+
     this.linecount += 1;
     this.cleanupThrottle();
   }
 
+  containsMessage(message) {
+    return this.messages.find((msg) => msg.md5 === message.md5);
+  }
+
   getlines(sel) {
     return this.lines.querySelectorAll(sel);
   }

assets/demo.js

@@ -29,7 +29,6 @@ switch ((chat.reqParam('t') || 'embed').toUpperCase()) {
         chat.applySettings(false);
       })
       .then(() => chat.loadEmotesAndFlairs())
-      .then(() => chat.loadHistory())
       .then(() => chat.connect());
     break;
 
@@ -52,7 +51,6 @@ switch ((chat.reqParam('t') || 'embed').toUpperCase()) {
     chat
       .withGui(embedHtml)
       .then(() => chat.loadEmotesAndFlairs())
-      .then(() => chat.loadHistory())
       .then(() => chat.connect());
     break;
 }

package.json

@@ -35,6 +35,7 @@
   "dependencies": {
     "dotenv": "^16.0.3",
     "jquery": "^3.6.0",
+    "md5": "^2.3.0",
     "moment": "~2.30.1",
     "normalize.css": "~8.0.1",
     "overlayscrollbars": "^2.0.3",