KOS Company · Liquid Glass (launcher + chat)
`;
messages.appendChild(h); messages.scrollTop=messages.scrollHeight;
}
function hideTyping(){ const el=document.getElementById("typingIndicator"); if(el) el.remove(); }
/* welcome helper */
function ensureWelcome(){
if(!messages.querySelector("[data-welcome]")){
const w=document.createElement("div");
w.className="bubble-bot"; w.setAttribute("data-welcome","1");
w.innerHTML=`Ciao, vuoi informazioni sul nostro servizio?
Oppure hai intenzione di sviluppare un prodotto?`;
messages.appendChild(w);
}
}
/* open/close */
function openChat(withWelcome=true){
overlay.classList.add("open");
overlay.setAttribute("aria-hidden","false");
if(withWelcome) ensureWelcome();
if(chatI){ chatI.value=""; } // lascia il placeholder visibile
setTimeout(()=> chatI && chatI.focus(), 100);
}
function closeChat(){
overlay.classList.remove("open");
overlay.setAttribute("aria-hidden","true");
launchI?.focus();
}
closeBtn?.addEventListener("click", closeChat);
document.addEventListener("keydown", e=>{ if(e.key==="Escape" && overlay.classList.contains("open")) closeChat(); });
// elimina chat
trashBtn?.addEventListener("click", ()=>{
messages.innerHTML = "";
sessionStorage.removeItem("kos_has_sent");
document.body.classList.add("pre-chat");
chatI?.focus();
});
/* backend */
async function askBackend(text){
const res = await fetch(WEBHOOK,{
method:"POST", headers:{ "Content-Type":"application/json" },
body: JSON.stringify({ question:text, chat_id:sessionStorage.getItem("kos_chat_id") })
});
return res.json();
}
/* flow */
async function handleSend(text){
if(!text) return;
if(sessionStorage.getItem("kos_has_sent")!=="1"){
sessionStorage.setItem("kos_has_sent","1");
document.body.classList.remove("pre-chat");
}
if(!overlay.classList.contains("open")) openChat(true);
appendBubble(text.replace(/,"<"), "user");
showTyping(); // tre puntini in attesa
try{
const data = await askBackend(text);
hideTyping();
const payload = Array.isArray(data) ? (data[0]||{}) : (data||{});
const reply = payload.reply || {};
const raw = reply.details || payload.data || reply.text || "";
appendBubble( / handleSend(launchI.value.trim()));
launchI.addEventListener("keypress", e=>{ if(e.key==="Enter") handleSend(launchI.value.trim()); });
document.getElementById("chatSend").addEventListener("click", ()=>{ const t=chatI.value.trim(); chatI.value=""; handleSend(t); });
chatI.addEventListener("keypress", e=>{ if(e.key==="Enter"){ const t=chatI.value.trim(); chatI.value=""; handleSend(t); } });
// chips → compilano il campo attivo
document.querySelectorAll(".chip").forEach(btn=>{
btn.addEventListener("click", ()=>{
const topic = btn.dataset.prompt || btn.textContent.trim();
const target = overlay.classList.contains("open") ? chatI : launchI;
target.value = `Parliamo di ${topic.toLowerCase()}: `;
target.dispatchEvent(new Event('input',{bubbles:true}));
target.focus();
});
});
// pulsante speculare: apre chat SEMPRE con welcome e placeholder “Ask AI” visibile
reopenBtn?.addEventListener("click", ()=>{
openChat(true);
if(chatI){ chatI.value=""; }
});