#tc-chat-btn{
position:fixed;
top:90px;
right:20px;
background:#4b4b4b;
color:#fff;
padding:12px 18px;
border-radius:10px;
cursor:pointer;
z-index:99999;
font-family:Arial;
font-size:14px;
font-weight:700;
box-shadow:0 6px 18px rgba(201,31,54,.35);
border:1px solid rgba(255,255,255,.25);
}
#tc-chat-box{
position:fixed;
top:145px;
right:20px;
width:360px;
height:520px;
background:#fff;
border-radius:14px;
box-shadow:0 14px 40px rgba(0,0,0,.25);
display:none;
flex-direction:column;
overflow:hidden;
z-index:99999;
font-family:Arial;
border:1px solid #e5e5e5;
}
#tc-chat-header{
background:#555;
color:#fff;
padding:15px;
font-weight:700;
}
#tc-chat-messages{
flex:1;
padding:14px;
overflow-y:auto;
font-size:14px;
background:#fafafa;
}
#tc-chat-input{
display:flex;
border-top:1px solid #ddd;
background:#555;
}
#tc-chat-input input{
flex:1;
padding:13px;
border:none;
outline:none;
font-size:14px;
}
#tc-chat-input button{
background:#555;
color:#fff;
border:none;
padding:12px 16px;
cursor:pointer;
font-weight:700;
}
💬 Chatea Asistente IA
const btn = document.getElementById("tc-chat-btn");
const box = document.getElementById("tc-chat-box");
const msgs = document.getElementById("tc-chat-messages");
btn.onclick = () => {
box.style.display =
box.style.display === "flex" ? "none" : "flex";
};
function saveMessages(){
localStorage.setItem(
"tc_chat_history",
msgs.innerHTML
);
}
function loadMessages(){
const saved =
localStorage.getItem("tc_chat_history");
if(saved){
msgs.innerHTML = saved;
msgs.scrollTop = msgs.scrollHeight;
}
}
async function tcSend(){
const input = document.getElementById("tc-msg");
const text = input.value.trim();
if(!text) return;
msgs.innerHTML += `
`;
saveMessages();
input.value = "";
msgs.innerHTML += `
`;
msgs.scrollTop = msgs.scrollHeight;
const r = await fetch(
"https://n8n.help24.cl/webhook/chat-tecnocam",
{
method:"POST",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify({
message:text
})
}
);
document.getElementById("tc-typing")?.remove();
const data = await r.text();
msgs.innerHTML += `
`;
saveMessages();
msgs.scrollTop = msgs.scrollHeight;
}
document
.getElementById("tc-msg")
.addEventListener("keydown", function(e){
if(e.key === "Enter") tcSend();
});
loadMessages();
