Merge pull request 'Refactored message logic to fix issues where they desync' (#51) from BordedDev/snek:bugfix/typing-desync into main

Reviewed-on: retoor/snek#51

src/snek/static/chat-input.js

@@ -2,8 +2,10 @@ import { app } from "../app.js";
 
 class ChatInputComponent extends HTMLElement {
   autoCompletions = {
-    "example 1": () => {},
-    "example 2": () => {},
+    "example 1": () => {
+    },
+    "example 2": () => {
+    },
   }
   hiddenCompletions = {
     "/starsRender": () => {
@@ -14,17 +16,13 @@ class ChatInputComponent extends HTMLElement {
   textarea = null
   _value = ""
   lastUpdateEvent = null
-  previousValue = "" 
-  lastChange = null 
-  changed = false 
+  expiryTimer = null;
+
   constructor() {
     super();
     this.lastUpdateEvent = new Date();
     this.textarea = document.createElement("textarea");
     this.value = this.getAttribute("value") || "";
-    this.previousValue = this.value;
-    this.lastChange = new Date();
-    this.changed = false;
   }
 
   get value() {
@@ -32,24 +30,27 @@ class ChatInputComponent extends HTMLElement {
   }
 
   set value(value) {
-    this._value = value || "";
+    this._value = value;
     this.textarea.value = this._value;
   }
+
   get allAutoCompletions() {
     return Object.assign({}, this.autoCompletions, this.hiddenCompletions)
   }
+
   resolveAutoComplete() {
-    let count = 0;
     let value = null;
 
-    Object.keys(this.allAutoCompletions).forEach((key) => {
-        if (key.startsWith(this.value.split(" ")[0])) {
-        count++;
+    for (const key of Object.keys(this.allAutoCompletions)) {
+      if (key.startsWith(this.value.split(" ", 1)[0])) {
+        if (value) {
+          return null;
+        }
         value = key;
       }
-    });
-    if (count == 1) return value;
-    return null;
+    }
+
+    return value;
   }
 
   isActive() {
@@ -59,26 +60,15 @@ class ChatInputComponent extends HTMLElement {
   focus() {
     this.textarea.focus();
   }
+
   getAuthors() {
-        let authors = []
-        for (let i = 0; i < this.users.length; i++) {
-            authors.push(this.users[i].username)
-            authors.push(this.users[i].nick)
+    return this.users.flatMap((user) => [user.username, user.nick])
   }
-        return authors
 
-    }
   extractMentions(text) {
-  const regex = /@([a-zA-Z0-9_-]+)/g;
-  const mentions = [];
-  let match;
-
-  while ((match = regex.exec(text)) !== null) {
-    mentions.push(match[1]);
+    return Array.from(text.matchAll(/@([a-zA-Z0-9_-]+)/g), m => m[1]);
   }
 
-  return mentions;
-}
   matchMentionsToAuthors(mentions, authors) {
     return mentions.map(mention => {
       let closestAuthor = null;
@@ -105,6 +95,7 @@ class ChatInputComponent extends HTMLElement {
       return { mention, closestAuthor, distance: minDistance };
     });
   }
+
   levenshteinDistance(a, b) {
     const matrix = [];
 
@@ -135,7 +126,6 @@ levenshteinDistance(a, b) {
   }
 
 
-
   replaceMentionsWithAuthors(text) {
     const authors = this.getAuthors();
     const mentions = this.extractMentions(text);
@@ -151,15 +141,12 @@ levenshteinDistance(a, b) {
   }
 
 
-
   async connectedCallback() {
     this.user = null
     app.rpc.getUser(null).then((user) => {
       this.user = user
     })
 
-
-      const me = this;
     this.liveType = this.getAttribute("live-type") === "true";
     this.liveTypeInterval =
       parseInt(this.getAttribute("live-type-interval")) || 6;
@@ -190,13 +177,28 @@ levenshteinDistance(a, b) {
 
     this.textarea.addEventListener("keyup", (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
-        this.value = "";
+
+        const message = this.replaceMentionsWithAuthors(this.value);
         e.target.value = "";
+
+        if (!message) {
           return;
         }
-      this.value = e.target.value;
-      this.changed = true;
-      this.update();
+        let autoCompletionHandler = this.allAutoCompletions[this.value.split(" ", 1)[0]];
+        if (autoCompletionHandler) {
+          autoCompletionHandler();
+          this.value = "";
+          e.target.value = "";
+
+          return;
+        }
+
+        this.finalizeMessage()
+
+        return;
+      }
+
+      this.updateFromInput(e.target.value);
     });
 
     this.textarea.addEventListener("keydown", (e) => {
@@ -213,56 +215,16 @@ levenshteinDistance(a, b) {
       }
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
-
-        const message = me.replaceMentionsWithAuthors(this.value);
-        e.target.value = "";
-
-        if (!message) {
-          return;
-        }
-          let autoCompletionHandler = this.allAutoCompletions[this.value.split(" ")[0]];
-        if (autoCompletionHandler) {
-          autoCompletionHandler();
-            this.value = "";
-          this.previousValue = "";
-          e.target.value = "";
-
-          return;
-        }
-
-        this.updateMessage()
-        app.rpc.finalizeMessage(this.messageUid)
-        this.value = "";
-        this.previousValue = "";
-        this.messageUid = null;
       }
     });
 
-    this.changeInterval = setInterval(() => {
-      if (!this.liveType) {
-        return;
-      }
-      if (this.value !== this.previousValue) {
-        if (
-          this.trackSecondsBetweenEvents(this.lastChange, new Date()) >=
-          this.liveTypeInterval
-        ) {
-          this.value = "";
-          this.previousValue = "";
-        }
-        this.lastChange = new Date();
-      }
-      this.update();
-    }, 300);
-
     this.addEventListener("upload", (e) => {
       this.focus();
     });
     this.addEventListener("uploaded", function (e) {
-      let message = "";
-      e.detail.files.forEach((file) => {
-        message += `[${file.name}](/channel/attachment/${file.relative_url})`;
-      });
+      let message = e.detail.files.reduce((message, file) => {
+        return `${message}[${file.name}](/channel/attachment/${file.relative_url})`;
+      }, '');
       app.rpc.sendMessage(this.channelUid, message, true);
     });
     setTimeout(() => {
@@ -274,6 +236,7 @@ levenshteinDistance(a, b) {
     const millisecondsDifference = event2Time.getTime() - event1Time.getTime();
     return millisecondsDifference / 1000;
   }
+
   isSubsequence(s, t) {
     let i = 0, j = 0;
     while (i < s.length && j < t.length) {
@@ -285,80 +248,53 @@ levenshteinDistance(a, b) {
     return i === s.length;
   }
 
-
-  newMessage() {
-    if (!this.messageUid) {
-      this.messageUid = "?";
+  flagTyping() {
+    if (this.trackSecondsBetweenEvents(this.lastUpdateEvent, new Date()) >= 1) {
+      this.lastUpdateEvent = new Date();
+      app.rpc.set_typing(this.channelUid, this.user.color).catch(() => {
+      });
+    }
   }
 
-    this.value = this.replaceMentionsWithAuthors(this.value);
-    this.sendMessage(this.channelUid, this.value,!this.liveType).then((uid) => {
+  finalizeMessage() {
+    if (!this.messageUid) {
+      if (this.value.trim() === "") {
+        return;
+      }
+      this.sendMessage(this.channelUid, this.replaceMentionsWithAuthors(this.value), !this.liveType);
+    } else {
+      app.rpc.finalizeMessage(this.messageUid)
+    }
+    this.value = "";
+    this.messageUid = null;
+  }
+
+  updateFromInput(value) {
+    if (this.expiryTimer) {
+      clearTimeout(this.expiryTimer);
+      this.expiryTimer = null;
+    }
+
+    this.value = value;
+
+    this.flagTyping()
+
+    if (this.liveType && value[0] !== "/") {
+      this.expiryTimer = setTimeout(() => {
+        this.finalizeMessage()
+      }, this.liveTypeInterval * 1000);
+
+      if (this.messageUid === "?") {
+      } else if (this.messageUid) {
+        app.rpc.updateMessageText(this.messageUid, this.replaceMentionsWithAuthors(this.value));
+      } else {
+        this.messageUid = "?"; // Indicate that a message is being sent
+        this.sendMessage(this.channelUid, this.replaceMentionsWithAuthors(value), !this.liveType).then((uid) => {
           if (this.liveType) {
             this.messageUid = uid;
           }
         });
       }
-
-  updateMessage() {
-    if (this.value[0] == "/") {
-      return false;
-    }
-    if (!this.messageUid) {
-      this.newMessage();
-      return false;
-    }
-    if (this.messageUid === "?") {
-      return false;
-    }
-    if (
-      typeof app !== "undefined" &&
-      app.rpc &&
-      typeof app.rpc.updateMessageText === "function"
-    ) {
-      app.rpc.updateMessageText(this.messageUid, this.replaceMentionsWithAuthors(this.value));
-    }
-  }
-
-  updateStatus() {
-    if (this.liveType) {
-      return;
-    }
-    if (this.trackSecondsBetweenEvents(this.lastUpdateEvent, new Date()) > 1) {
-      this.lastUpdateEvent = new Date();
-      if (
-        typeof app !== "undefined" &&
-        app.rpc &&
-        typeof app.rpc.set_typing === "function"
-      ) {
-        app.rpc.set_typing(this.channelUid, this.user.color);
-      }
-    }
-  }
-
-  update() {
-    const expired =
-      this.trackSecondsBetweenEvents(this.lastChange, new Date()) >=
-      this.liveTypeInterval;
-    const changed = this.value !== this.previousValue;
-
-    if (changed || expired) {
-      this.lastChange = new Date();
-      this.updateStatus();
-    }
-
-    this.previousValue = this.value;
-
-    if (this.liveType && expired) {
-      this.value = "";
-      this.previousValue = "";
-      this.messageUid = null;
-      return;
-    }
-
-    if (changed) {
-      if (this.liveType) {
-        this.updateMessage();
-      }
     }
   }