more feedback and spam fix

public/main/index.html

@@ -49,7 +49,7 @@
   <!-- ---------- MAIN  ---------- -->
   <main class="relative flex-1 flex flex-col min-h-0 overflow-x-hidden">  
     <!-- ===== MENÚ tab ===== -->
-    <section id="menuTab" data-index="0" class="min-h-0 hidden overflow-y-auto h-full" data-tab>
+    <section id="menuTab" data-index="0" class="min-h-0 overflow-y-auto h-full" data-tab>
         <div class="pt-4 pb-3">
             <!-- Barra de progreso para cerveza gratis -->
             <div class="mx-4 mb-6 p-4 bg-gradient-to-r from-amber-50 to-orange-50 rounded-xl border border-amber-200">
@@ -113,7 +113,7 @@
     </section>
 
     <!-- ===== CHAT ===== -->
-    <section id="chatTab" data-index="2" data-tab class="flex flex-col h-full flex-1 min-h-0">
+    <section id="chatTab" data-index="2" data-tab class="flex hidden flex-col h-full flex-1 min-h-0">
         <!-- Contenedor de mensajes que puede crecer y hacer scroll -->
         <div id="chatContainer" class="flex flex-col h-full flex-1 bg-white border border-gray-200 rounded-xl shadow-sm m-4 overflow-hidden">
           <header>
@@ -124,7 +124,6 @@
           <!-- Mensajes -->
           <div id="chatMessages" class="flex-1 overflow-y-auto px-4 py-3 space-y-1 bg-gray-50 font-mono text-sm">
             <!-- Mensajes de ejemplo estilo IRC -->
-            <div class="text-gray-500 text-xs">*** Bienvenido al chat de Biergarten Klein ***</div>
             <template id="chatMessageTemplate">
               <div class="chat-message"><span class="text-gray-400 chat-message-time">[00:36]</span> <span class="font-bold chat-message-user">&lt;JuanP_mesa5&gt;</span> <span class="chat-message-text">Yo también quiero!</span></div>
             </template>
@@ -139,7 +138,7 @@
               </ul>
             <div class="flex gap-2 w-full">
               <input id="chatInput" type="text" placeholder="Escribe un mensaje..." class="flex-grow flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#101419] text-sm bg-gray-50" autocomplete="off" maxlength="300" />
-              <button type="submit" class="bg-[#101419] flex-shrink hover:bg-[#37404a] text-white px-4 py-2 rounded-lg font-medium transition-colors duration-200">Enviar</button>
+              <button id="chatSubmitButton" type="submit" class="bg-blue-500 flex-shrink text-white px-4 py-2 rounded-lg font-medium transition-colors duration-200">Enviar</button>
             </div>
           </form>
         </div>

public/main/js/app.js

@@ -243,7 +243,8 @@ async function sendMessage(message) {
             mentions.forEach(mention => {
                 const username = mention.slice(1);
                 const exist = mentions_repeated.find(u => u === username);
-                if (!exist && username === chatUserName) return; // don't mention myself if multiple mentions
+                console.log("Mentioned user:", username,"List", mentions_repeated, "Exist before:", exist);
+                if (exist || username === chatUserName) return; // don't mention myself if multiple mentions
                 mentions_repeated.push(username);
                 if (username === "IAKlein"){
                     sendMessageToAI(message);
@@ -272,10 +273,14 @@ function initializeChat() {
         event.preventDefault();
         if (chatInputElement.value.trim() === "") return;
 
+        chatForm.querySelector("button").animate(
+        [{ transform: 'scale(1)' }, { transform: 'scale(0.9)' }, { transform: 'scale(1)' }],
+        { duration: 200, iterations: 1, easing: 'ease-in-out' }
+    )
         sendMessage(chatInputElement.value.trim());
         chatInputElement.value = "";
     });
-
+    
     let debounceTimer;
     chatInputElement.addEventListener("input", () => {
         const lastWord = chatInputElement.value.split(" ").at(-1);