ajout chatbot.css et .js
This commit is contained in:
nicoboy
311
assets/css/chatbot.css
Normal file
311
assets/css/chatbot.css
Normal file
@ -0,0 +1,311 @@
|
|||||||
|
/* ====================================
|
||||||
|
CHATBOT IA - STYLES
|
||||||
|
==================================== */
|
||||||
|
|
||||||
|
/* Bouton flottant */
|
||||||
|
.chat-bubble {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 80px;
|
||||||
|
right: 20px;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-chat {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 15px 25px;
|
||||||
|
border-radius: 50px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-chat:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-chat:active {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-badge {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal chat */
|
||||||
|
#modal-chat {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
display: none;
|
||||||
|
z-index: 2000;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
animation: fadeIn 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#modal-chat.show {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-container {
|
||||||
|
background: white;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 500px;
|
||||||
|
height: 600px;
|
||||||
|
max-height: 80vh;
|
||||||
|
border-radius: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
||||||
|
animation: slideUp 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
transform: translateY(50px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-header {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 15px 15px 0 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-close-chat {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 28px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-close-chat:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-messages {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-messages::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-messages::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-messages::-webkit-scrollbar-thumb {
|
||||||
|
background: #667eea;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 12px 15px;
|
||||||
|
border-radius: 12px;
|
||||||
|
max-width: 85%;
|
||||||
|
animation: messageAppear 0.3s ease;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes messageAppear {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-user {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
margin-left: auto;
|
||||||
|
text-align: right;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-assistant {
|
||||||
|
background: white;
|
||||||
|
color: #333;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
margin-right: auto;
|
||||||
|
border-bottom-left-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-assistant::before {
|
||||||
|
content: "🤖 ";
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-system {
|
||||||
|
background: #e3f2fd;
|
||||||
|
color: #1976d2;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 15px;
|
||||||
|
color: #999;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-loading::before {
|
||||||
|
content: "💭 ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-indicator {
|
||||||
|
display: inline-flex;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: #667eea;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: typing 1.4s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-dot:nth-child(2) {
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-dot:nth-child(3) {
|
||||||
|
animation-delay: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes typing {
|
||||||
|
0%, 60%, 100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input-zone {
|
||||||
|
padding: 15px;
|
||||||
|
border-top: 1px solid #e0e0e0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 0 0 15px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input-zone textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
border: 2px solid #e0e0e0;
|
||||||
|
border-radius: 8px;
|
||||||
|
resize: none;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input-zone textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #667eea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input-zone button {
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input-zone button:hover:not(:disabled) {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input-zone button:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.chat-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-header {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input-zone {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
199
assets/js/chatbot.js
Normal file
199
assets/js/chatbot.js
Normal file
@ -0,0 +1,199 @@
|
|||||||
|
/**
|
||||||
|
* CHATBOT IA - Client JavaScript
|
||||||
|
*/
|
||||||
|
|
||||||
|
class ChatbotIA {
|
||||||
|
constructor(tentativeId) {
|
||||||
|
this.tentativeId = tentativeId;
|
||||||
|
this.currentQuestionId = null;
|
||||||
|
this.helpRemaining = 3;
|
||||||
|
this.isLoading = false;
|
||||||
|
|
||||||
|
this.initElements();
|
||||||
|
this.attachEvents();
|
||||||
|
}
|
||||||
|
|
||||||
|
initElements() {
|
||||||
|
this.btnOpenChat = document.getElementById('btn-open-chat');
|
||||||
|
this.modalChat = document.getElementById('modal-chat');
|
||||||
|
this.btnCloseChat = document.getElementById('btn-close-chat');
|
||||||
|
this.chatMessages = document.getElementById('chat-messages');
|
||||||
|
this.chatInput = document.getElementById('chat-input');
|
||||||
|
this.btnSend = document.getElementById('btn-send');
|
||||||
|
this.helpRemainingSpan = document.getElementById('help-remaining');
|
||||||
|
}
|
||||||
|
|
||||||
|
attachEvents() {
|
||||||
|
// Ouvrir chat
|
||||||
|
this.btnOpenChat?.addEventListener('click', () => this.ouvrirChat());
|
||||||
|
|
||||||
|
// Fermer chat
|
||||||
|
this.btnCloseChat?.addEventListener('click', () => this.fermerChat());
|
||||||
|
|
||||||
|
// Clic en dehors du modal
|
||||||
|
this.modalChat?.addEventListener('click', (e) => {
|
||||||
|
if (e.target === this.modalChat) this.fermerChat();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Envoyer message
|
||||||
|
this.btnSend?.addEventListener('click', () => this.envoyerMessage());
|
||||||
|
|
||||||
|
// Enter pour envoyer (Shift+Enter pour nouvelle ligne)
|
||||||
|
this.chatInput?.addEventListener('keypress', (e) => {
|
||||||
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.envoyerMessage();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ouvrirChat() {
|
||||||
|
// Récupérer l'ID de la question actuelle
|
||||||
|
this.currentQuestionId = this.getCurrentQuestionId();
|
||||||
|
|
||||||
|
if (!this.currentQuestionId) {
|
||||||
|
alert('Erreur : impossible de déterminer la question actuelle');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.modalChat.classList.add('show');
|
||||||
|
this.chatInput.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
fermerChat() {
|
||||||
|
this.modalChat.classList.remove('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
getCurrentQuestionId() {
|
||||||
|
// À adapter selon ton code de passer_evaluation.php
|
||||||
|
// Option 1 : Variable globale JS
|
||||||
|
if (typeof currentQuestionId !== 'undefined') {
|
||||||
|
return currentQuestionId;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Option 2 : Data attribute
|
||||||
|
const questionElement = document.querySelector('[data-question-id]');
|
||||||
|
if (questionElement) {
|
||||||
|
return questionElement.dataset.questionId;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Option 3 : Input hidden
|
||||||
|
const hiddenInput = document.querySelector('input[name="id_question"]');
|
||||||
|
if (hiddenInput) {
|
||||||
|
return hiddenInput.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async envoyerMessage() {
|
||||||
|
const message = this.chatInput.value.trim();
|
||||||
|
|
||||||
|
if (!message || this.isLoading) return;
|
||||||
|
|
||||||
|
// Afficher message utilisateur
|
||||||
|
this.ajouterMessage(message, 'user');
|
||||||
|
this.chatInput.value = '';
|
||||||
|
|
||||||
|
// Loading
|
||||||
|
this.isLoading = true;
|
||||||
|
this.btnSend.disabled = true;
|
||||||
|
this.afficherTypingIndicator();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/mathematiques/api/chatbot.php', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/x-www-form-urlencoded'
|
||||||
|
},
|
||||||
|
body: new URLSearchParams({
|
||||||
|
id_tentative: this.tentativeId,
|
||||||
|
id_question: this.currentQuestionId,
|
||||||
|
message: message
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
// Retirer typing indicator
|
||||||
|
this.retirerTypingIndicator();
|
||||||
|
|
||||||
|
if (data.error) {
|
||||||
|
this.ajouterMessage(data.message || data.error, 'system');
|
||||||
|
|
||||||
|
if (data.remaining === 0) {
|
||||||
|
this.helpRemaining = 0;
|
||||||
|
this.updateHelpBadge();
|
||||||
|
setTimeout(() => this.fermerChat(), 3000);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.ajouterMessage(data.response, 'assistant');
|
||||||
|
this.helpRemaining = data.remaining;
|
||||||
|
this.updateHelpBadge();
|
||||||
|
|
||||||
|
if (this.helpRemaining === 0) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.ajouterMessage(
|
||||||
|
'Tu as utilisé toute ton aide pour cette question (3/3). Continue, tu peux le faire ! 💪',
|
||||||
|
'system'
|
||||||
|
);
|
||||||
|
setTimeout(() => this.fermerChat(), 3000);
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur chatbot:', error);
|
||||||
|
this.retirerTypingIndicator();
|
||||||
|
this.ajouterMessage('❌ Erreur de connexion au serveur.', 'system');
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false;
|
||||||
|
this.btnSend.disabled = false;
|
||||||
|
this.chatInput.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ajouterMessage(texte, type) {
|
||||||
|
const msgDiv = document.createElement('div');
|
||||||
|
msgDiv.className = `message message-${type}`;
|
||||||
|
msgDiv.textContent = texte;
|
||||||
|
this.chatMessages.appendChild(msgDiv);
|
||||||
|
this.scrollToBottom();
|
||||||
|
}
|
||||||
|
|
||||||
|
afficherTypingIndicator() {
|
||||||
|
const typingDiv = document.createElement('div');
|
||||||
|
typingDiv.className = 'typing-indicator';
|
||||||
|
typingDiv.id = 'typing-indicator';
|
||||||
|
typingDiv.innerHTML = `
|
||||||
|
<span class="typing-dot"></span>
|
||||||
|
<span class="typing-dot"></span>
|
||||||
|
<span class="typing-dot"></span>
|
||||||
|
`;
|
||||||
|
this.chatMessages.appendChild(typingDiv);
|
||||||
|
this.scrollToBottom();
|
||||||
|
}
|
||||||
|
|
||||||
|
retirerTypingIndicator() {
|
||||||
|
document.getElementById('typing-indicator')?.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
scrollToBottom() {
|
||||||
|
this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateHelpBadge() {
|
||||||
|
if (this.helpRemainingSpan) {
|
||||||
|
this.helpRemainingSpan.textContent = this.helpRemaining;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialisation automatique si tentativeId existe
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// À adapter : récupérer tentativeId de ton code
|
||||||
|
const tentativeId = document.querySelector('[data-tentative-id]')?.dataset.tentativeId;
|
||||||
|
|
||||||
|
if (tentativeId) {
|
||||||
|
window.chatbot = new ChatbotIA(tentativeId);
|
||||||
|
}
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user