consultoria-as
afb3b2405c
- Agrega TTS (speechSynthesis) a chat.js del POS para leer respuestas IA - Copia lógica de voz completa (STT + TTS) a dashboard/chat-public.js - Extiende estilos TTS en chat.css y chat-public.css - Agrega chat widget a 13 templates POS que no lo tenían - Corrige duplicado de chat.css en diagrams.html - Minifica assets actualizados - 73/73 tests pasan
332 lines
10 KiB
JavaScript
332 lines
10 KiB
JavaScript
// /home/Autopartes/dashboard/chat-public.js
|
|
// Public catalog chatbot — voice + TTS enabled
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
var isOpen = false;
|
|
var isSending = false;
|
|
var isListening = false;
|
|
var recognition = null;
|
|
var history = [];
|
|
var ttsEnabled = true;
|
|
var ttsUtterance = null;
|
|
var hasSpeechAPI = ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window);
|
|
var hasTTS = ('speechSynthesis' in window);
|
|
|
|
function init() {
|
|
var fab = document.createElement('button');
|
|
fab.className = 'chat-fab';
|
|
fab.id = 'chatFab';
|
|
fab.title = 'Asistente IA';
|
|
fab.innerHTML = '💬';
|
|
fab.setAttribute('aria-label', 'Abrir asistente IA');
|
|
|
|
var panel = document.createElement('div');
|
|
panel.className = 'chat-panel';
|
|
panel.id = 'chatPanel';
|
|
panel.innerHTML =
|
|
'<div class="chat-header">' +
|
|
'<h3>Asistente — Buscar partes</h3>' +
|
|
'<div class="chat-header-actions">' +
|
|
(hasTTS ? '<button class="chat-tts-toggle" id="chatTtsToggle" aria-label="Activar lectura de respuestas" title="Activar lectura de respuestas">🔊</button>' : '') +
|
|
'<button class="chat-header-close" id="chatClose" aria-label="Cerrar">×</button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="chat-messages" id="chatMessages">' +
|
|
'<div class="chat-msg ai">Hola, soy el asistente de Nexus Autoparts. Dime que refaccion buscas y te ayudo a encontrarla en el catalogo.</div>' +
|
|
'<div class="chat-typing" id="chatTyping"><span></span><span></span><span></span></div>' +
|
|
'</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">🎤</button>' : '') +
|
|
'<button class="chat-send-btn" id="chatSend" aria-label="Enviar">▶</button>' +
|
|
'</div>';
|
|
|
|
document.body.appendChild(fab);
|
|
document.body.appendChild(panel);
|
|
|
|
fab.addEventListener('click', toggleChat);
|
|
document.getElementById('chatClose').addEventListener('click', toggleChat);
|
|
document.getElementById('chatSend').addEventListener('click', sendMessage);
|
|
document.getElementById('chatInput').addEventListener('keydown', function (e) {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
sendMessage();
|
|
}
|
|
});
|
|
|
|
document.getElementById('chatInput').addEventListener('input', function () {
|
|
this.style.height = 'auto';
|
|
this.style.height = Math.min(this.scrollHeight, 80) + 'px';
|
|
});
|
|
|
|
if (hasSpeechAPI) {
|
|
document.getElementById('chatMic').addEventListener('click', toggleVoice);
|
|
}
|
|
|
|
if (hasTTS) {
|
|
document.getElementById('chatTtsToggle').addEventListener('click', toggleTTS);
|
|
}
|
|
|
|
// Stop TTS when closing chat
|
|
document.getElementById('chatClose').addEventListener('click', function () {
|
|
if (hasTTS) stopSpeaking();
|
|
});
|
|
}
|
|
|
|
// ─── TTS ───
|
|
function toggleTTS() {
|
|
ttsEnabled = !ttsEnabled;
|
|
var btn = document.getElementById('chatTtsToggle');
|
|
if (btn) {
|
|
btn.classList.toggle('off', !ttsEnabled);
|
|
btn.setAttribute('title', ttsEnabled ? 'Desactivar lectura de respuestas' : 'Activar lectura de respuestas');
|
|
}
|
|
if (!ttsEnabled) stopSpeaking();
|
|
}
|
|
|
|
function speak(text) {
|
|
if (!hasTTS || !ttsEnabled || !text) return;
|
|
stopSpeaking();
|
|
ttsUtterance = new SpeechSynthesisUtterance(text);
|
|
ttsUtterance.lang = 'es-MX';
|
|
ttsUtterance.rate = 1.1;
|
|
ttsUtterance.pitch = 1;
|
|
window.speechSynthesis.speak(ttsUtterance);
|
|
}
|
|
|
|
function stopSpeaking() {
|
|
if (hasTTS && window.speechSynthesis.speaking) {
|
|
window.speechSynthesis.cancel();
|
|
}
|
|
ttsUtterance = null;
|
|
}
|
|
|
|
// ─── Voice Input ───
|
|
function toggleVoice() {
|
|
if (isListening) { stopVoice(); return; }
|
|
startVoice();
|
|
}
|
|
|
|
function startVoice() {
|
|
var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
|
if (!SpeechRecognition) return;
|
|
|
|
recognition = new SpeechRecognition();
|
|
recognition.lang = 'es-MX';
|
|
recognition.continuous = false;
|
|
recognition.interimResults = true;
|
|
|
|
var input = document.getElementById('chatInput');
|
|
var micBtn = document.getElementById('chatMic');
|
|
var savedPlaceholder = input.placeholder;
|
|
|
|
recognition.onstart = function () {
|
|
isListening = true;
|
|
micBtn.classList.add('listening');
|
|
input.placeholder = 'Escuchando...';
|
|
input.value = '';
|
|
stopSpeaking();
|
|
};
|
|
|
|
recognition.onresult = function (e) {
|
|
var interim = '';
|
|
var finalTranscript = '';
|
|
for (var 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;
|
|
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;
|
|
var micBtn = document.getElementById('chatMic');
|
|
if (micBtn) micBtn.classList.remove('listening');
|
|
}
|
|
|
|
function showVoiceToast(msg) {
|
|
var 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);
|
|
}
|
|
|
|
// ─── Chat UI ───
|
|
function toggleChat() {
|
|
isOpen = !isOpen;
|
|
var panel = document.getElementById('chatPanel');
|
|
var fab = document.getElementById('chatFab');
|
|
if (isOpen) {
|
|
panel.classList.add('open');
|
|
fab.style.display = 'none';
|
|
document.getElementById('chatInput').focus();
|
|
} else {
|
|
panel.classList.remove('open');
|
|
fab.style.display = 'flex';
|
|
}
|
|
}
|
|
|
|
function sendMessage() {
|
|
if (isSending) return;
|
|
var input = document.getElementById('chatInput');
|
|
var text = input.value.trim();
|
|
if (!text) return;
|
|
|
|
input.value = '';
|
|
input.style.height = 'auto';
|
|
|
|
addBubble(text, 'user');
|
|
|
|
history.push({ role: 'user', content: text });
|
|
if (history.length > 20) history.splice(0, 2);
|
|
|
|
isSending = true;
|
|
document.getElementById('chatSend').disabled = true;
|
|
showTyping(true);
|
|
|
|
fetch('/api/chat', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
message: text,
|
|
history: history.slice(-10)
|
|
})
|
|
})
|
|
.then(function (resp) { return resp.json(); })
|
|
.then(function (data) {
|
|
if (data.error) {
|
|
addBubble('Error: ' + data.error, 'ai');
|
|
return;
|
|
}
|
|
var aiMsg = data.response || 'Sin respuesta.';
|
|
addBubble(aiMsg, 'ai');
|
|
history.push({ role: 'assistant', content: aiMsg });
|
|
|
|
if (ttsEnabled) speak(aiMsg);
|
|
|
|
if (data.search_results && data.search_results.length > 0) {
|
|
addPartResults(data.search_results);
|
|
}
|
|
})
|
|
.catch(function (err) {
|
|
addBubble('Error de conexion: ' + err.message, 'ai');
|
|
})
|
|
.finally(function () {
|
|
isSending = false;
|
|
document.getElementById('chatSend').disabled = false;
|
|
showTyping(false);
|
|
});
|
|
}
|
|
|
|
function addBubble(text, role) {
|
|
var container = document.getElementById('chatMessages');
|
|
var typing = document.getElementById('chatTyping');
|
|
var div = document.createElement('div');
|
|
div.className = 'chat-msg ' + role;
|
|
div.textContent = text;
|
|
container.insertBefore(div, typing);
|
|
scrollToBottom();
|
|
}
|
|
|
|
function addPartResults(parts) {
|
|
var container = document.getElementById('chatMessages');
|
|
var typing = document.getElementById('chatTyping');
|
|
|
|
var wrapper = document.createElement('div');
|
|
wrapper.className = 'chat-parts';
|
|
|
|
parts.slice(0, 8).forEach(function (p) {
|
|
var card = document.createElement('div');
|
|
card.className = 'chat-part-card';
|
|
|
|
var name = p.name_es || p.name_part || '';
|
|
var partNum = p.oem_part_number || p.part_number || '';
|
|
var brand = p.brand || '';
|
|
|
|
card.innerHTML =
|
|
'<div class="part-number">' + esc(partNum) + '</div>' +
|
|
'<div class="part-name">' + esc(name) + (brand ? ' <span style="color:var(--color-text-muted);">(' + esc(brand) + ')</span>' : '') + '</div>';
|
|
|
|
card.style.cursor = 'pointer';
|
|
card.addEventListener('click', function () {
|
|
var searchInput = document.getElementById('searchInput');
|
|
if (searchInput && partNum) {
|
|
searchInput.value = partNum;
|
|
if (typeof window.doSearch === 'function') window.doSearch();
|
|
toggleChat();
|
|
}
|
|
});
|
|
|
|
wrapper.appendChild(card);
|
|
});
|
|
|
|
container.insertBefore(wrapper, typing);
|
|
scrollToBottom();
|
|
}
|
|
|
|
function showTyping(show) {
|
|
var el = document.getElementById('chatTyping');
|
|
if (el) el.classList.toggle('visible', show);
|
|
if (show) scrollToBottom();
|
|
}
|
|
|
|
function scrollToBottom() {
|
|
var el = document.getElementById('chatMessages');
|
|
if (el) el.scrollTop = el.scrollHeight;
|
|
}
|
|
|
|
function esc(s) {
|
|
if (!s) return '';
|
|
var d = document.createElement('div');
|
|
d.textContent = s;
|
|
return d.innerHTML;
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
})();
|