Make sure there is at least 150 history messages in the message array.

assets/chat/js/chat.js

@@ -22,6 +22,7 @@ import {
   ChatMessage,
   ChatUserMessage, // eslint-disable-line no-unused-vars
   checkIfPinWasDismissed,
+  clientOnlyMessages,
 } from './messages';
 import {
   ChatMenu,
@@ -827,12 +828,7 @@ class Chat {
 
     // Hide the message if the user is ignored
     if (
-      ![
-        MessageTypes.UI,
-        MessageTypes.INFO,
-        MessageTypes.ERROR,
-        MessageTypes.STATUS,
-      ].includes(message.type) &&
+      !clientOnlyMessages.includes(message.type) &&
       this.ignored(message.user?.username, message.message)
     ) {
       message.ignore();
@@ -1467,16 +1463,15 @@ class Chat {
   }
 
   onADDPHRASE(data) {
-    MessageBuilder.command(`Phrase "${data.data}" added.`, data.timestamp).into(
+    MessageBuilder.info(`Phrase "${data.data}" added.`, data.timestamp).into(
       this,
     );
   }
 
   onREMOVEPHRASE(data) {
-    MessageBuilder.command(
-      `Phrase "${data.data}" removed.`,
-      data.timestamp,
-    ).into(this);
+    MessageBuilder.info(`Phrase "${data.data}" removed.`, data.timestamp).into(
+      this,
+    );
   }
 
   onPRIVMSGSENT() {

assets/chat/js/messages/MessageTypes.js

@@ -1,4 +1,4 @@
-export default {
+const MessageTypes = {
   STATUS: 'STATUS',
   ERROR: 'ERROR',
   INFO: 'INFO',
@@ -15,3 +15,14 @@ export default {
   DONATION: 'DONATION',
   DEATH: 'DEATH',
 };
+
+const clientOnlyMessages = [
+  MessageTypes.STATUS,
+  MessageTypes.ERROR,
+  MessageTypes.INFO,
+  MessageTypes.UI,
+];
+
+export default MessageTypes;
+
+export { clientOnlyMessages };

assets/chat/js/messages/index.js

@@ -1,5 +1,5 @@
 export { default as MessageBuilder } from './MessageBuilder';
-export { default as MessageTypes } from './MessageTypes';
+export { default as MessageTypes, clientOnlyMessages } from './MessageTypes';
 export { default as ChatMessage } from './ChatMessage';
 export { default as ChatDonationMessage } from './ChatDonationMessage';
 export { default as ChatEmoteMessage } from './ChatEmoteMessage';

assets/chat/js/window.js

@@ -2,7 +2,7 @@ import $ from 'jquery';
 import { throttle } from 'throttle-debounce';
 import ChatScrollPlugin from './scroll';
 import EventEmitter from './emitter';
-import { MessageTypes } from './messages';
+import { clientOnlyMessages, MessageTypes } from './messages';
 
 const tagcolors = [
   'green',
@@ -122,9 +122,26 @@ class ChatWindow extends EventEmitter {
         remove.forEach((element) => {
           element.remove();
         });
-
-        this.messages = this.messages.slice(lines.length - this.maxlines);
       }
+
+      let clientMessages = 0;
+      this.messages = this.messages
+        .reverse()
+        .filter((message, index) => {
+          if (clientOnlyMessages.includes(message.type)) {
+            clientMessages += 1;
+            // remove client only messages if above maxlines
+            if (index >= this.maxlines) {
+              return false;
+            }
+            // remove history message if above maxlines/maxhistory + the clientMessages
+          } else if (index >= Math.max(this.maxlines, 150) + clientMessages) {
+            return false;
+          }
+
+          return true;
+        })
+        .reverse();
     }
   }
 
@@ -152,14 +169,7 @@ class ChatWindow extends EventEmitter {
 
       const username = message.user?.username;
 
-      if (
-        ![
-          MessageTypes.UI,
-          MessageTypes.INFO,
-          MessageTypes.ERROR,
-          MessageTypes.STATUS,
-        ].includes(message.type)
-      ) {
+      if (!clientOnlyMessages.includes(message.type)) {
         message.ignore(chat.ignored(username, message.message));
       }