feat(pos): entrada por voz en chatbot — Web Speech API es-MX

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pos/static/js/chat.js

@@ -7,7 +7,10 @@
   // ─── State ───
   let isOpen = false;
   let isSending = false;
+  let isListening = false;
+  let recognition = null;
   const history = [];  // conversation history for AI context
+  const hasSpeechAPI = ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window);
 
   // ─── Build DOM ───
   function init() {
@@ -36,6 +39,7 @@
       </div>
       <div class="chat-input-area">
         <textarea class="chat-input" id="chatInput" placeholder="Ej: Balatas para Tsuru 2015..." rows="1"></textarea>
+        ${hasSpeechAPI ? '<button class="chat-mic-btn" id="chatMic" aria-label="Entrada por voz" title="Entrada por voz">&#127908;</button>' : ''}
         <button class="chat-send-btn" id="chatSend" aria-label="Enviar">&#9654;</button>
       </div>
     `;
@@ -54,6 +58,11 @@
       }
     });
 
+    // Mic button (only if Speech API available)
+    if (hasSpeechAPI) {
+      document.getElementById('chatMic').addEventListener('click', toggleVoice);
+    }
+
     // Auto-resize textarea
     document.getElementById('chatInput').addEventListener('input', function () {
       this.style.height = 'auto';
@@ -61,6 +70,98 @@
     });
   }
 
+  // ─── Voice Input (Web Speech API) ───
+  function toggleVoice() {
+    if (isListening) {
+      stopVoice();
+      return;
+    }
+    startVoice();
+  }
+
+  function startVoice() {
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SpeechRecognition) return;
+
+    recognition = new SpeechRecognition();
+    recognition.lang = 'es-MX';
+    recognition.continuous = false;
+    recognition.interimResults = true;
+
+    const input = document.getElementById('chatInput');
+    const micBtn = document.getElementById('chatMic');
+    const savedPlaceholder = input.placeholder;
+
+    recognition.onstart = function () {
+      isListening = true;
+      micBtn.classList.add('listening');
+      input.placeholder = 'Escuchando...';
+      input.value = '';
+    };
+
+    recognition.onresult = function (e) {
+      let interim = '';
+      let finalTranscript = '';
+      for (let i = e.resultIndex; i < e.results.length; i++) {
+        if (e.results[i].isFinal) {
+          finalTranscript += e.results[i][0].transcript;
+        } else {
+          interim += e.results[i][0].transcript;
+        }
+      }
+      if (finalTranscript) {
+        input.value = finalTranscript;
+      } else {
+        input.value = interim;
+      }
+    };
+
+    recognition.onend = function () {
+      isListening = false;
+      micBtn.classList.remove('listening');
+      input.placeholder = savedPlaceholder;
+      recognition = null;
+      // Auto-send if we got text
+      if (input.value.trim()) {
+        sendMessage();
+      }
+    };
+
+    recognition.onerror = function (e) {
+      isListening = false;
+      micBtn.classList.remove('listening');
+      input.placeholder = savedPlaceholder;
+      recognition = null;
+      if (e.error === 'no-speech' || e.error === 'audio-capture' || e.error === 'not-allowed') {
+        showVoiceToast('No se detecto voz');
+      }
+    };
+
+    recognition.start();
+  }
+
+  function stopVoice() {
+    if (recognition) {
+      recognition.abort();
+      recognition = null;
+    }
+    isListening = false;
+    const micBtn = document.getElementById('chatMic');
+    if (micBtn) micBtn.classList.remove('listening');
+  }
+
+  function showVoiceToast(msg) {
+    const toast = document.createElement('div');
+    toast.className = 'chat-voice-toast';
+    toast.textContent = msg;
+    document.body.appendChild(toast);
+    setTimeout(function () { toast.classList.add('visible'); }, 10);
+    setTimeout(function () {
+      toast.classList.remove('visible');
+      setTimeout(function () { toast.remove(); }, 300);
+    }, 2000);
+  }
+
   function toggleChat() {
     isOpen = !isOpen;
     const panel = document.getElementById('chatPanel');