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

Browse Source 
Reviewed-on: 
Reviewed-by: retoor <retoor@noreply@molodetz.nl>
This commit is contained in:
retoor 2025-06-06 11:20:17 +02:00
commit 35786703d5
1 changed files with 47 additions and 13 deletions

60
src/snek/static/chat-input.js
View File

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