From 13476bddf63d5d02999f9b3536e39eb86fc516e7 Mon Sep 17 00:00:00 2001 From: BordedDev <> Date: Thu, 5 Jun 2025 19:41:43 +0200 Subject: [PATCH] Help relieve issues where network is maybe too slow? Also polished message handling a little --- src/snek/static/chat-input.js | 60 +++++++++++++++++++++++++++-------- 1 file changed, 47 insertions(+), 13 deletions(-) diff --git a/src/snek/static/chat-input.js b/src/snek/static/chat-input.js index 799faf7..8ff77fd 100644 --- a/src/snek/static/chat-input.js +++ b/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 }); } }