Implement db in mentions

public/main/js/app.js

@@ -258,36 +258,39 @@ function initializeChat() {
         event.preventDefault();
         if (chatInputElement.value.trim() === "") return;
 
-        // sendMessageToAI();
         sendMessage(chatInputElement.value.trim());
         chatInputElement.value = "";
     });
-    chatInputElement.addEventListener("input", async () => {
-      const lastWord = chatInputElement.value.split(" ").at(-1)
-      if (lastWord.trim().startsWith("@")) {
-        userList.classList.remove("hidden")
-        let users = await getUserList(lastWord.trim().substring(1), userToken)
-        users = users.filter(u => u !== chatUserName)
-        users.push("IAKlein")
-        userList.innerHTML = ""
-        users.forEach(user => {
-           const userItem = document.createElement("button");
-           userItem.type = "button"
-           userItem.onclick = () => {
-               chatInputElement.value = chatInputElement.value.replace(lastWord, `@${user}`);
-               userList.classList.add("hidden");
-           };
-           const color = getUserColor(user);
-           userItem.classList.add("list-user-name");
-            userItem.classList.add("cursor-pointer");
-            userItem.classList.add(color);
-
-          userItem.textContent = user;
-          userList.appendChild(userItem);
-        });
-      }else{
-        userList.classList.add("hidden")
-      }
+
+    let debounceTimer;
+    chatInputElement.addEventListener("input", () => {
+        const lastWord = chatInputElement.value.split(" ").at(-1);
+        if (lastWord.trim().startsWith("@")) {
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(async () => {
+                userList.classList.remove("hidden");
+                let users = await getUserList(lastWord.trim().substring(1), userToken);
+                users = users.filter(u => u !== chatUserName);
+                users.push("IAKlein");
+                userList.innerHTML = "";
+                users.forEach(user => {
+                    const userItem = document.createElement("button");
+                    userItem.type = "button";
+                    userItem.onclick = () => {
+                        chatInputElement.value = chatInputElement.value.replace(lastWord, `@${user}`);
+                        userList.classList.add("hidden");
+                        chatInputElement.focus();
+                    };
+                    const color = getUserColor(user);
+                    userItem.classList.add("list-user-name", "cursor-pointer", color);
+                    userItem.textContent = user;
+                    userList.appendChild(userItem);
+                });
+            }, 300); // Debounce delay (300ms)
+        } else {
+            userList.classList.add("hidden");
+            clearTimeout(debounceTimer);
+        }
     });
 }