src/snek/static/chat-input.js

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