gmao/app_new/templates/chatbot/index.html

{% extends "base.html" %}

{% block title %}Chatbot GMAO - Collège{% endblock %}

{% block content %}
<style>
.chat-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}
.chat-header {
    background: #2c3e50;
    color: white;
    padding: 15px;
    text-align: center;
}
.chat-messages {
    height: 400px;
    overflow-y: auto;
    padding: 20px;
}
.message {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
    max-width: 70%;
}
.user-message {
    background: #3498db;
    color: white;
    margin-left: auto;
    text-align: right;
}
.bot-message {
    background: #ecf0f1;
    color: #2c3e50;
}
.chat-input {
    display: flex;
    padding: 15px;
    border-top: 1px solid #ddd;
}
.chat-input input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-right: 10px;
}
.chat-input button {
    padding: 10px 20px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.chat-input button:hover {
    background: #2980b9;
}
.quick-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.quick-action {
    padding: 5px 10px;
    background: #95a5a6;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}
.quick-action:hover {
    background: #7f8c8d;
}
</style>

<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h4><i class="bi bi-robot me-2"></i>Chatbot GMAO</h4>
            <p class="text-muted">Assistant intelligent pour la gestion de maintenance</p>
        </div>
    </div>

    <div class="chat-container">
        <div class="chat-header">
            <h5 class="mb-0">GMAO Assistant</h5>
        </div>
        <div class="chat-messages" id="chatMessages">
            <div class="message bot-message">
                Bonjour ! Je suis votre assistant GMAO. Comment puis-je vous aider aujourd'hui ?
            </div>
        </div>
        <div class="quick-actions px-3">
            <button class="quick-action" onclick="sendQuickMessage('Quelles sont les interventions en cours ?')">Interventions en cours</button>
            <button class="quick-action" onclick="sendQuickMessage('Quels sont les équipements en panne ?')">Équipements en panne</button>
            <button class="quick-action" onclick="sendQuickMessage('Planning préventif')">Planning</button>
        </div>
        <div class="chat-input">
            <input type="text" id="userInput" placeholder="Tapez votre message..." onkeypress="if(event.key==='Enter') sendMessage()">
            <button onclick="sendMessage()">Envoyer</button>
        </div>
    </div>
</div>

<script>
function sendMessage() {
    const input = document.getElementById('userInput');
    const message = input.value.trim();
    if (!message) return;
    
    const chatMessages = document.getElementById('chatMessages');
    
    // Ajouter le message utilisateur
    const userMsg = document.createElement('div');
    userMsg.className = 'message user-message';
    userMsg.textContent = message;
    chatMessages.appendChild(userMsg);
    
    input.value = '';
    
    // Réponse via l'API réelle
    fetch('/chatbot/api/message', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'message=' + encodeURIComponent(message)
    })
    .then(response => response.json())
    .then(data => {
        const botMsg = document.createElement('div');
        botMsg.className = 'message bot-message';
        
        // Formater la réponse
        let formattedResponse = data.response || 'Erreur';
        formattedResponse = formattedResponse
            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
            .replace(/`([^`]+)`/g, '<code>$1</code>')
            .replace(/\n/g, '<br>');
        
        botMsg.innerHTML = formattedResponse;
        chatMessages.appendChild(botMsg);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    })
    .catch(error => {
        const botMsg = document.createElement('div');
        botMsg.className = 'message bot-message';
        botMsg.textContent = 'Erreur de connexion au chatbot';
        chatMessages.appendChild(botMsg);
    });
    
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

function sendQuickMessage(msg) {
    document.getElementById('userInput').value = msg;
    sendMessage();
}
</script>
{% endblock %}