web: prevent duplicate messages

web/src/elements/messages/MessageContainer.ts

@@ -8,7 +8,7 @@ export function showMessage(message: APIMessage): void {
     if (!container) {
         throw new Error("failed to find message container");
     }
-    container.messages.push(message);
+    container.addMessage(message);
     container.requestUpdate();
 }
 
@@ -34,6 +34,14 @@ export class MessageContainer extends LitElement {
         }
     }
 
+    // add a new message, but only if the message isn't currently shown.
+    addMessage(message: APIMessage): void {
+        const matchingMessages = this.messages.filter(m => m.message == message.message);
+        if (matchingMessages.length < 1) {
+            this.messages.push(message);
+        }
+    }
+
     connect(): void {
         if (navigator.webdriver) return;
         const wsUrl = `${window.location.protocol.replace("http", "ws")}//${
@@ -60,7 +68,7 @@ export class MessageContainer extends LitElement {
         });
         this.messageSocket.addEventListener("message", (e) => {
             const data = JSON.parse(e.data);
-            this.messages.push(data);
+            this.addMessage(data);
             this.requestUpdate();
         });
         this.messageSocket.addEventListener("error", (e) => {