`;
} else {
wrapper.innerHTML = `
${text}
`;
}
messagesContainer.appendChild(wrapper);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
function appendAudioMessage(audioUrl, transcriptText) {
const wrapper = document.createElement("div");
wrapper.style.display = "flex";
wrapper.style.flexDirection = "column";
wrapper.style.alignItems = "flex-start";
wrapper.style.gap = "8px";
wrapper.innerHTML = `
${transcriptText}
`;
messagesContainer.appendChild(wrapper);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
function showTypingDots() {
const loader = document.createElement("div");
loader.id = "loaderDots";
loader.innerHTML = `
`;
messagesContainer.appendChild(loader);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
function removeTypingDots() {
const dots = document.getElementById("loaderDots");
if (dots) dots.remove();
}
function sendMessage() {
const userText = input.value.trim();
if (!userText) return;
appendMessage(userText, "user");
input.value = "";
showTypingDots();
fetch(webhookUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ question: userText })
})
.then(response => response.json())
.then(data => {
removeTypingDots();
if (data.reply) {
if (data.reply.audioUrl && data.reply.text) {
appendAudioMessage(data.reply.audioUrl, data.reply.text);
} else if (data.reply.text) {
appendMessage(data.reply.text, "bot");
} else {
appendMessage("🤖 Nessuna risposta testuale trovata.", "bot");
}
} else {
appendMessage("⚠️ Errore: nessuna risposta ricevuta", "bot");
}
})
.catch(() => {
removeTypingDots();
appendMessage("⚠️ Errore di connessione", "bot");
});
}
input.addEventListener("keypress", function (e) {
if (e.key === "Enter") {
sendMessage();
}
});
