Merge pull request 'Help relieve issues where network is maybe too slow?' (#52) from BordedDev/snek:bugfix/msg-finalized-before-update into main

Reviewed-on: #52
Reviewed-by: retoor <retoor@noreply@molodetz.nl>

src/snek/static/chat-input.js

@@ -17,6 +17,8 @@ class ChatInputComponent extends HTMLElement {
   _value = ""
   lastUpdateEvent = null
   expiryTimer = null;
+  queuedMessage = null;
+  lastMessagePromise = null;
 
   constructor() {
     super();
@@ -38,11 +40,11 @@ class ChatInputComponent extends HTMLElement {
     return Object.assign({}, this.autoCompletions, this.hiddenCompletions)
   }
 
-  resolveAutoComplete() {
+  resolveAutoComplete(input) {
     let value = null;
 
     for (const key of Object.keys(this.allAutoCompletions)) {
-      if (key.startsWith(this.value.split(" ", 1)[0])) {
+      if (key.startsWith(input.split(" ", 1)[0])) {
         if (value) {
           return null;
         }
@@ -193,7 +195,7 @@ class ChatInputComponent extends HTMLElement {
           return;
         }
 
-        this.finalizeMessage()
+        this.finalizeMessage(this.messageUid)
 
         return;
       }
@@ -203,19 +205,25 @@ class ChatInputComponent extends HTMLElement {
 
     this.textarea.addEventListener("keydown", (e) => {
       this.value = e.target.value;
+
       let autoCompletion = null;
       if (e.key === "Tab") {
         e.preventDefault();
-        autoCompletion = this.resolveAutoComplete();
+        autoCompletion = this.resolveAutoComplete(this.value);
         if (autoCompletion) {
           e.target.value = autoCompletion;
           this.value = autoCompletion;
           return;
         }
       }
+
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
       }
+
+      if (e.repeat) {
+        this.updateFromInput(e.target.value);
+      }
     });
 
     this.addEventListener("upload", (e) => {
@@ -256,17 +264,28 @@ class ChatInputComponent extends HTMLElement {
     }
   }
 
-  finalizeMessage() {
-    if (!this.messageUid) {
+  finalizeMessage(messageUid) {
+    if (!messageUid) {
       if (this.value.trim() === "") {
         return;
       }
       this.sendMessage(this.channelUid, this.replaceMentionsWithAuthors(this.value), !this.liveType);
+    } else if (messageUid.startsWith("?")) {
+      const lastQueuedMessage = this.queuedMessage;
+
+      this.lastMessagePromise?.then((uid) => {
+        const updatePromise = lastQueuedMessage ? app.rpc.updateMessageText(uid, lastQueuedMessage) : Promise.resolve();
+        return updatePromise.finally(() => {
+          return app.rpc.finalizeMessage(uid);
+        })
+      })
     } else {
-      app.rpc.finalizeMessage(this.messageUid)
+      app.rpc.finalizeMessage(messageUid)
     }
     this.value = "";
     this.messageUid = null;
+    this.queuedMessage = null;
+    this.lastMessagePromise = null
   }
 
   updateFromInput(value) {
@@ -281,18 +300,33 @@ class ChatInputComponent extends HTMLElement {
 
     if (this.liveType && value[0] !== "/") {
       this.expiryTimer = setTimeout(() => {
-        this.finalizeMessage()
+        this.finalizeMessage(this.messageUid)
       }, this.liveTypeInterval * 1000);
 
-      if (this.messageUid === "?") {
+
+      const messageText = this.replaceMentionsWithAuthors(value);
+      if (this.messageUid?.startsWith("?")) {
+        this.queuedMessage = messageText;
       } else if (this.messageUid) {
-        app.rpc.updateMessageText(this.messageUid, this.replaceMentionsWithAuthors(this.value));
+        app.rpc.updateMessageText(this.messageUid, messageText).then((d) => {
+          if (!d.success) {
+            this.messageUid = null
+            this.updateFromInput(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) {
+        const placeHolderId = "?" + crypto.randomUUID();
+        this.messageUid = placeHolderId;
+
+        this.lastMessagePromise = this.sendMessage(this.channelUid, messageText, !this.liveType).then(async (uid) => {
+          if (this.liveType && this.messageUid === placeHolderId) {
+            if (this.queuedMessage && this.queuedMessage !== messageText) {
+              await app.rpc.updateMessageText(uid, this.queuedMessage)
+            }
             this.messageUid = uid;
           }
+
+          return uid
         });
       }
     }