Refactored message logic to fix issues where they desync #51

Merged
retoor merged 4 commits from :bugfix/typing-desync into main 2025-06-01 22:07:52 +02:00
Conversation 0 Commits 4 Files Changed 1 +178 -242
1 changed files with 178 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,29 +2,27 @@ import { app } from "../app.js";
class ChatInputComponent extends HTMLElement { class ChatInputComponent extends HTMLElement {
autoCompletions = { autoCompletions = {
"example 1": () => {}, "example 1": () => {
"example 2": () => {}, },
"example 2": () => {
},
} }
hiddenCompletions = { hiddenCompletions = {
"/starsRender": () => { "/starsRender": () => {
app.rpc.starsRender(this.channelUid,this.value.replace("/starsRender ","")) app.rpc.starsRender(this.channelUid, this.value.replace("/starsRender ", ""))
} }
} }
users = [] users = []
textarea = null textarea = null
_value = "" _value = ""
lastUpdateEvent = null lastUpdateEvent = null
previousValue = "" expiryTimer = null;
lastChange = null
changed = false
constructor() { constructor() {
super(); super();
this.lastUpdateEvent = new Date(); this.lastUpdateEvent = new Date();
this.textarea = document.createElement("textarea"); this.textarea = document.createElement("textarea");
this.value = this.getAttribute("value") || ""; this.value = this.getAttribute("value") || "";
this.previousValue = this.value;
this.lastChange = new Date();
this.changed = false;
} }
get value() { get value() {
@ -32,24 +30,27 @@ class ChatInputComponent extends HTMLElement {
} }
set value(value) { set value(value) {
this._value = value || ""; this._value = value;
this.textarea.value = this._value; this.textarea.value = this._value;
} }
get allAutoCompletions() { get allAutoCompletions() {
return Object.assign({},this.autoCompletions,this.hiddenCompletions) return Object.assign({}, this.autoCompletions, this.hiddenCompletions)
} }
resolveAutoComplete() { resolveAutoComplete() {
let count = 0;
let value = null; let value = null;
Object.keys(this.allAutoCompletions).forEach((key) => { for (const key of Object.keys(this.allAutoCompletions)) {
if (key.startsWith(this.value.split(" ")[0])) { if (key.startsWith(this.value.split(" ", 1)[0])) {
count++; if (value) {
return null;
}
value = key; value = key;
} }
}); }
if (count == 1) return value;
return null; return value;
} }
isActive() { isActive() {
@ -59,26 +60,15 @@ class ChatInputComponent extends HTMLElement {
focus() { focus() {
this.textarea.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 authors
getAuthors() {
return this.users.flatMap((user) => [user.username, user.nick])
} }
extractMentions(text) { extractMentions(text) {
const regex = /@([a-zA-Z0-9_-]+)/g; return Array.from(text.matchAll(/@([a-zA-Z0-9_-]+)/g), m => m[1]);
const mentions = [];
let match;
while ((match = regex.exec(text)) !== null) {
mentions.push(match[1]);
} }
return mentions;
}
matchMentionsToAuthors(mentions, authors) { matchMentionsToAuthors(mentions, authors) {
return mentions.map(mention => { return mentions.map(mention => {
let closestAuthor = null; let closestAuthor = null;
@ -90,7 +80,7 @@ class ChatInputComponent extends HTMLElement {
let distance = this.levenshteinDistance(lowerMention, lowerAuthor); let distance = this.levenshteinDistance(lowerMention, lowerAuthor);
if(!this.isSubsequence(lowerMention,lowerAuthor)) { if (!this.isSubsequence(lowerMention, lowerAuthor)) {
distance += 10 distance += 10
} }
@ -104,8 +94,9 @@ class ChatInputComponent extends HTMLElement {
return { mention, closestAuthor, distance: minDistance }; return { mention, closestAuthor, distance: minDistance };
}); });
} }
levenshteinDistance(a, b) {
levenshteinDistance(a, b) {
const matrix = []; const matrix = [];
// Initialize the first row and column // Initialize the first row and column
@ -132,8 +123,7 @@ levenshteinDistance(a, b) {
} }
return matrix[b.length][a.length]; return matrix[b.length][a.length];
} }
replaceMentionsWithAuthors(text) { replaceMentionsWithAuthors(text) {
@ -148,24 +138,21 @@ levenshteinDistance(a, b) {
}); });
return updatedText; return updatedText;
} }
async connectedCallback() { async connectedCallback() {
this.user = null this.user = null
app.rpc.getUser(null).then((user) => { app.rpc.getUser(null).then((user) => {
this.user=user this.user = user
}) })
const me = this;
this.liveType = this.getAttribute("live-type") === "true"; this.liveType = this.getAttribute("live-type") === "true";
this.liveTypeInterval = this.liveTypeInterval =
parseInt(this.getAttribute("live-type-interval")) || 6; parseInt(this.getAttribute("live-type-interval")) || 6;
this.channelUid = this.getAttribute("channel"); this.channelUid = this.getAttribute("channel");
app.rpc.getRecentUsers(this.channelUid).then(users=>{ app.rpc.getRecentUsers(this.channelUid).then(users => {
this.users = users this.users = users
}) })
this.messageUid = null; this.messageUid = null;
@ -190,13 +177,28 @@ levenshteinDistance(a, b) {
this.textarea.addEventListener("keyup", (e) => { this.textarea.addEventListener("keyup", (e) => {
if (e.key === "Enter" && !e.shiftKey) { if (e.key === "Enter" && !e.shiftKey) {
this.value = "";
const message = this.replaceMentionsWithAuthors(this.value);
e.target.value = ""; e.target.value = "";
if (!message) {
return; return;
} }
this.value = e.target.value; let autoCompletionHandler = this.allAutoCompletions[this.value.split(" ", 1)[0]];
this.changed = true; if (autoCompletionHandler) {
this.update(); autoCompletionHandler();
this.value = "";
e.target.value = "";
return;
}
this.finalizeMessage()
return;
}
this.updateFromInput(e.target.value);
}); });
this.textarea.addEventListener("keydown", (e) => { this.textarea.addEventListener("keydown", (e) => {
@ -213,67 +215,28 @@ levenshteinDistance(a, b) {
} }
if (e.key === "Enter" && !e.shiftKey) { if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault(); 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.addEventListener("upload", (e) => {
this.focus(); this.focus();
}); });
this.addEventListener("uploaded", function (e) { this.addEventListener("uploaded", function (e) {
let message = ""; let message = e.detail.files.reduce((message, file) => {
e.detail.files.forEach((file) => { return `${message}[${file.name}](/channel/attachment/${file.relative_url})`;
message += `[${file.name}](/channel/attachment/${file.relative_url})`; }, '');
app.rpc.sendMessage(this.channelUid, message, true);
}); });
app.rpc.sendMessage(this.channelUid, message,true); setTimeout(() => {
});
setTimeout(()=>{
this.focus(); this.focus();
},1000) }, 1000)
} }
trackSecondsBetweenEvents(event1Time, event2Time) { trackSecondsBetweenEvents(event1Time, event2Time) {
const millisecondsDifference = event2Time.getTime() - event1Time.getTime(); const millisecondsDifference = event2Time.getTime() - event1Time.getTime();
return millisecondsDifference / 1000; return millisecondsDifference / 1000;
} }
isSubsequence(s, t) { isSubsequence(s, t) {
let i = 0, j = 0; let i = 0, j = 0;
while (i < s.length && j < t.length) { while (i < s.length && j < t.length) {
@ -285,88 +248,61 @@ levenshteinDistance(a, b) {
return i === s.length; return i === s.length;
} }
flagTyping() {
newMessage() { if (this.trackSecondsBetweenEvents(this.lastUpdateEvent, new Date()) >= 1) {
if (!this.messageUid) { this.lastUpdateEvent = new Date();
this.messageUid = "?"; app.rpc.set_typing(this.channelUid, this.user.color).catch(() => {
});
}
} }
this.value = this.replaceMentionsWithAuthors(this.value); finalizeMessage() {
this.sendMessage(this.channelUid, this.value,!this.liveType).then((uid) => { 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) { if (this.liveType) {
this.messageUid = uid; 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() { async sendMessage(channelUid, value, is_final) {
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();
}
}
}
async sendMessage(channelUid, value,is_final) {
if (!value.trim()) { if (!value.trim()) {
return null; return null;
} }
return await app.rpc.sendMessage(channelUid, value,is_final); return await app.rpc.sendMessage(channelUid, value, is_final);
} }
} }