document.getElementById(«chatbot-icon»).addEventListener(«click», function() {
document.getElementById(«chatbot-window»).style.display = «flex»;
});
document.getElementById(«close-chatbot»).addEventListener(«click», function() {
document.getElementById(«chatbot-window»).style.display = «none»;
});
document.getElementById(«send-chatbot»).addEventListener(«click», function() {
enviarMissatge();
});
document.getElementById(«chatbot-input»).addEventListener(«keypress», function(event) {
if (event.key === «Enter») {
enviarMissatge();
}
});
async function enviarMissatge() {
let input = document.getElementById(«chatbot-input»);
let missatge = input.value.trim();
if (missatge === «») return;
mostrarMissatge(missatge, «user»);
input.value = «»;
// Afegir missatge de càrrega
let missatgeBot = document.createElement(«div»);
missatgeBot.className = «bot»;
missatgeBot.innerHTML = «
NívIA: 🕐 Pensant…»;
document.getElementById(«chatbot-messages»).appendChild(missatgeBot);
let resposta = await obtenirRespostaChatGPT(missatge);
// Substituir el missatge de càrrega per la resposta real
missatgeBot.innerHTML = «
NívIA » + resposta;
}
function mostrarMissatge(text, classe) {
let divMissatges = document.getElementById(«chatbot-messages»);
let missatgeDiv = document.createElement(«div»);
missatgeDiv.className = classe;
if (classe === «user») {
missatgeDiv.innerHTML = «
Tu: » + text.replace(«Tu: «, «»);
} else {
missatgeDiv.innerHTML = «
NívIA » + text.replace(«NivÍA: «, «»);
}
divMissatges.appendChild(missatgeDiv);
divMissatges.scrollTop = divMissatges.scrollHeight;
}
async function obtenirRespostaChatGPT(missatge) {
let resposta = await fetch(«https://clubesquibellver.org/wp-json/mychat/v1/ask», {
method: «POST»,
headers: {
«Content-Type»: «application/json»
},
body: JSON.stringify({
message: missatge // Enviem el text directament
})
});
let dades = await resposta.json();
return dades.response;
}
/* Creu de tancament estilitzada */
#close-chatbot {
font-size: 20px;
font-weight: bold;
color: white;
cursor: pointer;
transition: color 0.3s ease-in-out, transform 0.2s ease-in-out;
padding: 5px;
border-radius: 50%;
}
/* Canvi de color quan el cursor passa per sobre */
#close-chatbot:hover {
color: #ff4d4d; /* Vermell per indicar que tancarà */
transform: scale(1.2); /* Fa créixer la icona una mica */
}
/* Estil per als missatges de l’usuari */
.user {
background-color: #d1ecf1; /* Blau clar */
color: #0c5460;
padding: 8px;
border-radius: 8px;
margin: 5px;
align-self: flex-end;
max-width: 80%;
}
/* Estil per als missatges del bot (NivÍA) */
.bot {
background-color: #f8d7da; /* Vermell clar */
color: #721c24;
padding: 8px;
border-radius: 8px;
margin: 5px;
align-self: flex-start;
max-width: 80%;
}
/* Diferents colors per als noms «Tu» i «NivÍA» */
.username {
font-weight: bold;
color: #0056b3;
}
.botname {
font-weight: bold;
color: #d63384;
}
/* Per alinear els missatges correctament */
#chatbot-messages {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.user {
align-self: flex-end;
}
#chatbot-icon {
position: fixed;
bottom: 20px;
right: 20px;
width: 150px;
height: 150px;
background-color: transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9999;
}
#chatbot-window {
position: fixed;
bottom: 170px;
right: 60px;
width: 300px;
height: 400px;
background: white;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
display: none;
flex-direction: column;
z-index: 9999;
}
#chatbot-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background: #0078ff;
color: white;
font-weight: bold;
border-radius: 10px 10px 0 0;
}
#chatbot-messages {
flex-grow: 1;
padding: 10px;
overflow-y: auto;
max-height: 300px;
}
/* Caixa d’entrada del missatge */
#chatbot-input {
width: calc(100% – 70px);
padding: 10px;
border: 2px solid #0078ff;
border-radius: 20px;
font-size: 14px;
outline: none;
transition: border-color 0.3s ease-in-out;
}
/* Canvi de color quan l’usuari fa clic al camp d’entrada */
#chatbot-input:focus {
border-color: #0056b3;
}
/* Contenidor del camp de text i botó */
#chatbot-footer {
display: flex;
align-items: center;
padding: 10px;
background: #f1f1f1;
border-top: 1px solid #ccc;
}
/* Botó d’enviar */
#send-chatbot {
width: 60px;
height: 40px;
border: none;
background: #0078ff;
color: white;
font-weight: bold;
border-radius: 20px;
cursor: pointer;
margin-left: 10px;
transition: background 0.3s ease-in-out, transform 0.1s ease-in-out;
}
/* Canvi de color quan el cursor està sobre el botó */
#send-chatbot:hover {
background: #0056b3;
}
/* Animació quan es fa clic al botó */
#send-chatbot:active {
transform: scale(0.95);
}
