django-lucy-assist 1.2.6__py3-none-any.whl → 1.2.8__py3-none-any.whl

lucy_assist/static/lucy_assist/js/lucy-assist.js

@@ -1,27 +1,22 @@
 /**
- * Lucy Assist - Composant Alpine.js pour le chatbot
- *
- * Ce fichier contient toute la logique client du chatbot Lucy Assist.
- * Il utilise Alpine.js pour la réactivité et communique avec le backend Django via des API REST.
+ * Lucy Assist - Chatbot en vanilla JavaScript
+ * Zero dependance externe - pas d'Alpine.js, pas de Font Awesome
  */
+(function () {
+    'use strict';
 
-function lucyAssist() {
-    return {
-        // État de l'interface
+    // ========================================================================
+    // ETAT
+    // ========================================================================
+    const state = {
         isOpen: false,
         isExpanded: false,
         isLoading: false,
         showHistory: false,
         showDoc: false,
-        showBuyCredits: false,
-        showFeedback: false,
-        showGuide: false,
-        guideStep: 1,
         hasNewMessage: false,
         hasError: false,
         lucyDidNotUnderstand: false,
-
-        // Données
         currentMessage: '',
         messages: [],
         conversations: [],
@@ -31,805 +26,759 @@ function lucyAssist() {
         buyAmount: 10,
         feedbackDescription: '',
         feedbackSending: false,
+        guideStep: 1,
+    };
 
-        // Configuration
-        apiBaseUrl: '/lucy-assist/api',
-        csrfToken: '',
-
-        /**
-         * Initialisation du composant
-         */
-        init() {
-            // Récupérer le token CSRF
-            this.csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value ||
-                            this.getCookie('csrftoken');
-
-            // Restaurer l'état depuis sessionStorage
-            this.restoreState();
-
-            // Charger les données initiales
-            this.loadTokenStatus();
-            this.loadConversations().then(() => {
-                // Recharger la conversation en cours si elle existe
-                if (this.currentConversationId) {
-                    this.loadConversation(this.currentConversationId);
-                }
-            });
-            this.loadSuggestions();
-
-            // Vérifier si c'est le premier lancement
-            this.checkFirstLaunch();
-
-            // Sauvegarder l'état quand isOpen change
-            this.$watch('isOpen', (value) => {
-                this.saveState();
-                if (value) {
-                    this.$nextTick(() => {
-                        this.$refs.messageInput?.focus();
-                    });
-                }
-            });
+    // ========================================================================
+    // CONFIG
+    // ========================================================================
+    const API_BASE = '/lucy-assist/api';
+    let csrfToken = '';
 
-            // Sauvegarder l'état quand la conversation change
-            this.$watch('currentConversationId', () => {
-                this.saveState();
-            });
+    // ========================================================================
+    // ELEMENTS DOM
+    // ========================================================================
+    const el = {};
 
-            // Sauvegarder avant de quitter la page
-            window.addEventListener('beforeunload', () => {
-                this.saveState();
-            });
-        },
-
-        /**
-         * Sauvegarde l'état dans sessionStorage
-         */
-        saveState() {
-            const state = {
-                isOpen: this.isOpen,
-                isExpanded: this.isExpanded,
-                currentConversationId: this.currentConversationId,
-                showHistory: this.showHistory,
-                showDoc: this.showDoc
-            };
-            sessionStorage.setItem('lucy_assist_state', JSON.stringify(state));
-        },
-
-        /**
-         * Restaure l'état depuis sessionStorage
-         */
-        restoreState() {
-            try {
-                const savedState = sessionStorage.getItem('lucy_assist_state');
-                if (savedState) {
-                    const state = JSON.parse(savedState);
-                    this.isOpen = state.isOpen || false;
-                    this.isExpanded = state.isExpanded || false;
-                    this.currentConversationId = state.currentConversationId || null;
-                    this.showHistory = state.showHistory || false;
-                    this.showDoc = state.showDoc || false;
-                }
-            } catch (e) {
-                console.error('Erreur restauration état Lucy Assist:', e);
-            }
-        },
-
-        /**
-         * Gestion des raccourcis clavier
-         */
-        handleKeydown(event) {
-            // Ctrl+K pour ouvrir
-            if (event.ctrlKey && event.key === 'k') {
-                event.preventDefault();
-                this.toggleSidebar();
-            }
+    function $(id) {
+        return document.getElementById(id);
+    }
 
-            // Echap pour fermer
-            if (event.key === 'Escape' && this.isOpen) {
-                this.closeSidebar();
-            }
-        },
-
-        /**
-         * Toggle du sidebar
-         */
-        toggleSidebar() {
-            this.isOpen = !this.isOpen;
-            if (this.isOpen) {
-                this.hasNewMessage = false;
-            }
-            this.saveState();
-        },
-
-        /**
-         * Fermeture du sidebar
-         */
-        closeSidebar() {
-            this.isOpen = false;
-            this.saveState();
-            this.showHistory = false;
-            this.showDoc = false;
-        },
-
-        /**
-         * Toggle du mode agrandi (80% de la fenetre)
-         */
-        toggleExpanded() {
-            this.isExpanded = !this.isExpanded;
-            this.saveState();
-        },
-
-        /**
-         * Vérifie si c'est le premier lancement
-         */
-        checkFirstLaunch() {
-            const hasSeenGuide = localStorage.getItem('lucy_assist_guide_seen');
-            if (!hasSeenGuide && this.conversations.length === 0) {
-                // Afficher le guide au premier chargement si pas de conversations
-                setTimeout(() => {
-                    if (this.conversations.length === 0) {
-                        this.showGuide = true;
-                        this.isOpen = true;
-                    }
-                }, 2000);
-            }
-        },
-
-        /**
-         * Navigation dans le guide
-         */
-        nextGuideStep() {
-            this.guideStep++;
-        },
-
-        skipGuide() {
-            this.finishGuide();
-        },
-
-        finishGuide() {
-            this.showGuide = false;
-            localStorage.setItem('lucy_assist_guide_seen', 'true');
-        },
-
-        /**
-         * Charge le statut des tokens
-         */
-        async loadTokenStatus() {
-            try {
-                const response = await this.apiGet('/tokens/status');
-                this.tokensDisponibles = response.tokens_disponibles || 0;
-            } catch (error) {
-                console.error('Erreur chargement tokens:', error);
-            }
-        },
-
-        /**
-         * Charge la liste des conversations
-         */
-        async loadConversations() {
-            try {
-                const response = await this.apiGet('/conversations');
-                this.conversations = response.conversations || [];
-            } catch (error) {
-                console.error('Erreur chargement conversations:', error);
-            }
-        },
-
-        /**
-         * Charge les suggestions
-         */
-        async loadSuggestions() {
-            try {
-                const response = await this.apiGet('/suggestions');
-                this.suggestions = response.suggestions || [];
-            } catch (error) {
-                console.error('Erreur chargement suggestions:', error);
-                // Suggestions par défaut
-                this.suggestions = [
-                    "Comment créer un nouveau membre ?",
-                    "Comment effectuer un paiement ?",
-                    "Où trouver la liste des adhésions ?"
-                ];
-            }
-        },
-
-        /**
-         * Crée une nouvelle conversation
-         */
-        async newConversation() {
-            try {
-                const response = await this.apiPost('/conversations', {
-                    page_contexte: window.location.pathname
-                });
-
-                this.currentConversationId = response.id;
-                this.messages = [];
-                this.showHistory = false;
-                this.showDoc = false;
-                this.saveState();
-
-                // Recharger les conversations
-                await this.loadConversations();
-
-            } catch (error) {
-                console.error('Erreur création conversation:', error);
-                this.showToast('Erreur lors de la création de la conversation', 'error');
-            }
-        },
-
-        /**
-         * Charge une conversation existante
-         */
-        async loadConversation(conversationId) {
-            try {
-                const response = await this.apiGet(`/conversations/${conversationId}`);
-
-                this.currentConversationId = conversationId;
-                this.messages = response.messages || [];
-                this.showHistory = false;
-                this.saveState();
-
-                // Scroll vers le bas avec un petit délai pour laisser le DOM se mettre à jour
-                this.$nextTick(() => {
-                    setTimeout(() => {
-                        this.scrollToBottom();
-                    }, 100);
-                });
-
-            } catch (error) {
-                console.error('Erreur chargement conversation:', error);
-                // Si la conversation n'existe plus, réinitialiser
-                this.currentConversationId = null;
-                this.messages = [];
-                this.saveState();
-                this.showToast('Erreur lors du chargement de la conversation', 'error');
-            }
-        },
-
-        /**
-         * Supprime une conversation
-         */
-        async deleteConversation(conversationId) {
-            if (!confirm('Êtes-vous sûr de vouloir supprimer cette conversation ?')) {
-                return;
-            }
+    /** Attache un event listener si l'element existe */
+    function on(element, event, handler) {
+        if (element) element.addEventListener(event, handler);
+    }
 
-            try {
-                await this.apiDelete(`/conversations/${conversationId}`);
+    // ========================================================================
+    // HELPERS
+    // ========================================================================
 
-                // Recharger les conversations
-                await this.loadConversations();
+    function getCookie(name) {
+        const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+        return match ? decodeURIComponent(match[2]) : null;
+    }
 
-                // Si c'était la conversation courante, reset
-                if (this.currentConversationId === conversationId) {
-                    this.currentConversationId = null;
-                    this.messages = [];
-                }
+    function formatTokens(tokens) {
+        if (tokens >= 1000000) return (tokens / 1000000).toFixed(1) + 'M';
+        if (tokens >= 1000) return (tokens / 1000).toFixed(0) + 'K';
+        return tokens.toString();
+    }
+
+    function formatTokenCost(tokens) {
+        return ((tokens / 1000000) * 10).toFixed(4) + '€';
+    }
 
-                this.showToast('Conversation supprimée', 'success');
+    function formatDate(dateString) {
+        const date = new Date(dateString);
+        const now = new Date();
+        const diff = now - date;
+        if (diff < 60000) return "À l'instant";
+        if (diff < 3600000) return 'Il y a ' + Math.floor(diff / 60000) + ' min';
+        if (date.toDateString() === now.toDateString())
+            return "Aujourd'hui à " + date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+        if (diff < 7 * 86400000)
+            return date.toLocaleDateString('fr-FR', { weekday: 'long', hour: '2-digit', minute: '2-digit' });
+        return date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
+    }
 
-            } catch (error) {
-                console.error('Erreur suppression conversation:', error);
-                this.showToast('Erreur lors de la suppression', 'error');
-            }
-        },
-
-        /**
-         * Envoie le message courant
-         */
-        async sendCurrentMessage() {
-            const message = this.currentMessage.trim();
-            if (!message) return;
-
-            await this.sendMessage(message);
-        },
-
-        /**
-         * Envoie un message (depuis l'input ou une suggestion)
-         */
-        async sendMessage(message) {
-            if (this.isLoading) return;
-
-            // Réinitialiser le flag "Lucy n'a pas compris" pour le nouveau message
-            this.lucyDidNotUnderstand = false;
-
-            // Créer une conversation si nécessaire
-            if (!this.currentConversationId) {
-                await this.newConversation();
-            }
+    function formatTime(dateString) {
+        return new Date(dateString).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+    }
+
+    function escapeHtml(s) {
+        return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+
+    function formatMessage(content) {
+        if (!content) return '';
+        var f = escapeHtml(content);
+        f = f.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+        f = f.replace(/\*(.*?)\*/g, '<em>$1</em>');
+        f = f.replace(/`(.*?)`/g, '<code style="background:rgba(0,0,0,.1);padding:0 4px;border-radius:3px;">$1</code>');
+        f = f.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" style="color:var(--lucy-primary,#6366f1);text-decoration:underline;">$1</a>');
+        f = f.replace(/\n/g, '<br>');
+        return f;
+    }
 
-            // Ajouter le message utilisateur à l'affichage
-            const userMessage = {
-                id: Date.now(),
-                repondant: 'UTILISATEUR',
-                contenu: message,
-                created_date: new Date().toISOString(),
-                tokens_utilises: 0
-            };
-            this.messages.push(userMessage);
-            this.currentMessage = '';
-
-            // Scroll vers le bas
-            this.$nextTick(() => {
-                this.scrollToBottom();
+    function checkIfLucyDidNotUnderstand(response) {
+        if (!response) return false;
+        var lower = response.toLowerCase();
+        var patterns = [
+            'je ne comprends pas', "je n'ai pas compris", 'pourriez-vous reformuler',
+            'pouvez-vous reformuler', 'pourriez-vous préciser', 'pouvez-vous préciser',
+            "je ne suis pas sûr de comprendre", "je n'ai pas accès", "je n'ai pas les outils",
+            'je ne peux pas', 'je ne suis pas en mesure', 'fonctionnalité non disponible',
+            'je ne dispose pas', 'mes outils actuels ne permettent pas', "je n'arrive pas à",
+            'impossible de réaliser', 'en dehors de mon périmètre', 'hors de mon champ',
+            'dépasse mes capacités', 'comment puis-je vous aider avec votre crm'
+        ];
+        return patterns.some(function (p) { return lower.includes(p); });
+    }
+
+    // ========================================================================
+    // API
+    // ========================================================================
+
+    async function apiGet(endpoint) {
+        var r = await fetch(API_BASE + endpoint, {
+            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken }
+        });
+        if (!r.ok) { var e = await r.json(); e.status = r.status; throw e; }
+        return r.json();
+    }
+
+    async function apiPost(endpoint, data) {
+        var r = await fetch(API_BASE + endpoint, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
+            body: JSON.stringify(data)
+        });
+        if (!r.ok) { var e = await r.json(); e.status = r.status; throw e; }
+        return r.json();
+    }
+
+    async function apiDelete(endpoint) {
+        var r = await fetch(API_BASE + endpoint, {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken }
+        });
+        if (!r.ok) { var e = await r.json(); e.status = r.status; throw e; }
+        return r.json();
+    }
+
+    // ========================================================================
+    // RENDU
+    // ========================================================================
+
+    function scrollToBottom() {
+        if (el.messages) el.messages.scrollTop = el.messages.scrollHeight;
+    }
+
+    function updateTokensDisplay() {
+        if (el.tokens) el.tokens.textContent = formatTokens(state.tokensDisponibles);
+        if (el.btnBuyCredits) el.btnBuyCredits.style.display = state.tokensDisponibles < 100000 ? '' : 'none';
+    }
+
+    function updateExpandIcons() {
+        var expand = el.sidebar ? el.sidebar.querySelector('.lucy-icon-expand') : null;
+        var compress = el.sidebar ? el.sidebar.querySelector('.lucy-icon-compress') : null;
+        if (expand) expand.style.display = state.isExpanded ? 'none' : '';
+        if (compress) compress.style.display = state.isExpanded ? '' : 'none';
+    }
+
+    /** Affiche la bonne vue : chat / history / doc */
+    function showView(view) {
+        state.showHistory = view === 'history';
+        state.showDoc = view === 'doc';
+
+        if (el.viewHistory) el.viewHistory.style.display = state.showHistory ? '' : 'none';
+        if (el.viewDoc) el.viewDoc.style.display = state.showDoc ? '' : 'none';
+        if (el.viewChat) el.viewChat.style.display = (!state.showHistory && !state.showDoc) ? '' : 'none';
+
+        if (el.btnHistory) el.btnHistory.classList.toggle('active', state.showHistory);
+        if (el.btnDoc) el.btnDoc.classList.toggle('active', state.showDoc);
+    }
+
+    /** Rend la liste des conversations dans l'historique */
+    function renderHistoryList() {
+        if (!el.historyList) return;
+
+        if (state.conversations.length === 0) {
+            el.historyList.innerHTML = '<p class="lucy-history-empty">Aucune conversation</p>';
+            return;
+        }
+
+        el.historyList.innerHTML = state.conversations.map(function (conv) {
+            return '<div class="lucy-history-item ' + (state.currentConversationId === conv.id ? 'active' : '') + '" data-conv-id="' + conv.id + '">'
+                + '<div class="lucy-history-item-title">' + escapeHtml(conv.titre || 'Sans titre') + '</div>'
+                + '<div class="lucy-history-item-meta"><span>' + formatDate(conv.created_date) + '</span>'
+                + '<span style="margin-left:.5rem">🪙 ' + conv.total_tokens + ' tokens | ' + formatTokenCost(conv.total_tokens) + '</span></div>'
+                + '<button class="lucy-btn-delete" data-delete-id="' + conv.id + '">🗑️ Supprimer</button>'
+                + '</div>';
+        }).join('');
+
+        el.historyList.querySelectorAll('[data-conv-id]').forEach(function (item) {
+            item.addEventListener('click', function (e) {
+                if (e.target.closest('[data-delete-id]')) return;
+                loadConversation(parseInt(item.dataset.convId));
             });
+        });
+        el.historyList.querySelectorAll('[data-delete-id]').forEach(function (btn) {
+            btn.addEventListener('click', function (e) {
+                e.stopPropagation();
+                deleteConversation(parseInt(btn.dataset.deleteId));
+            });
+        });
+    }
 
-            // Envoyer au serveur
-            try {
-                this.isLoading = true;
+    /** Rend la zone de messages */
+    function renderMessages() {
+        if (!el.messages) return;
+
+        if (state.messages.length === 0) {
+            if (el.welcome) el.welcome.style.display = '';
+            if (el.feedbackContact) el.feedbackContact.style.display = 'none';
+            if (el.feedbackError) el.feedbackError.style.display = 'none';
+            // Supprimer les anciens messages
+            el.messages.querySelectorAll('.lucy-message').forEach(function (m) { m.remove(); });
+            return;
+        }
 
-                // Envoyer le message utilisateur
-                await this.apiPost(`/conversations/${this.currentConversationId}/messages`, {
-                    contenu: message
-                });
+        if (el.welcome) el.welcome.style.display = 'none';
 
-                // Demander une réponse à Claude (avec streaming)
-                await this.streamChatCompletion();
+        // Supprimer les anciens messages
+        el.messages.querySelectorAll('.lucy-message').forEach(function (m) { m.remove(); });
 
-            } catch (error) {
-                console.error('Erreur envoi message:', error);
+        var avatarUrl = el.messages.dataset.avatarUrl || '';
+        var lucyIcon = el.messages.dataset.lucyIcon || '';
 
-                if (error.status === 402) {
-                    // Pas assez de crédits
-                    this.showBuyCredits = true;
-                } else {
-                    // Marquer qu'il y a eu une erreur pour proposer le feedback
-                    this.hasError = true;
-                    this.showToast('Erreur lors de l\'envoi du message', 'error');
-                }
+        state.messages.forEach(function (msg) {
+            var isUser = msg.repondant === 'UTILISATEUR';
+            var div = document.createElement('div');
+            div.className = 'lucy-message ' + (isUser ? 'user' : 'bot');
 
-            } finally {
-                this.isLoading = false;
+            var avatarHtml;
+            if (isUser) {
+                avatarHtml = avatarUrl
+                    ? '<img src="' + avatarUrl + '" alt="Utilisateur">'
+                    : '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>';
+            } else {
+                avatarHtml = lucyIcon
+                    ? '<img src="' + lucyIcon + '" alt="Lucy">'
+                    : '🤖';
             }
-        },
-
-        /**
-         * Stream la réponse de Claude
-         */
-        async streamChatCompletion() {
-            const url = `${this.apiBaseUrl}/conversations/${this.currentConversationId}/chat`;
-
-            // Index du message bot dans le tableau
-            const botMessageIndex = this.messages.length;
-
-            // Créer un placeholder pour la réponse
-            this.messages.push({
-                id: Date.now() + 1,
-                repondant: 'CHATBOT',
-                contenu: '',
-                created_date: new Date().toISOString(),
-                tokens_utilises: 0
-            });
 
-            try {
-                const response = await fetch(url, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRFToken': this.csrfToken
-                    },
-                    body: JSON.stringify({
-                        page_contexte: window.location.pathname
-                    })
-                });
-
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    throw { status: response.status, ...errorData };
-                }
+            var bubbleContent = msg.contenu
+                ? '<span>' + formatMessage(msg.contenu) + '</span>'
+                : '<span class="lucy-loading-dots"><span></span><span></span><span></span></span>';
 
-                const reader = response.body.getReader();
-                const decoder = new TextDecoder();
-                let fullContent = '';
-
-                while (true) {
-                    const { done, value } = await reader.read();
-                    if (done) break;
-
-                    const text = decoder.decode(value);
-                    const lines = text.split('\n');
-
-                    for (const line of lines) {
-                        if (line.startsWith('data: ')) {
-                            try {
-                                const data = JSON.parse(line.slice(6));
-
-                                if (data.type === 'content') {
-                                    fullContent += data.content;
-                                    // Forcer la réactivité Alpine en réassignant l'objet
-                                    this.messages[botMessageIndex] = {
-                                        ...this.messages[botMessageIndex],
-                                        contenu: fullContent
-                                    };
-                                    this.$nextTick(() => this.scrollToBottom());
-                                } else if (data.type === 'done') {
-                                    // Mise à jour finale avec l'ID et les tokens
-                                    this.messages[botMessageIndex] = {
-                                        ...this.messages[botMessageIndex],
-                                        id: data.message_id,
-                                        tokens_utilises: data.tokens_utilises
-                                    };
-                                    // Mettre à jour les tokens
-                                    await this.loadTokenStatus();
-                                } else if (data.type === 'error') {
-                                    throw new Error(data.error);
-                                }
-                            } catch (e) {
-                                if (e.message) throw e;
-                            }
-                        }
-                    }
-                }
+            div.innerHTML = '<div class="lucy-message-avatar">' + avatarHtml + '</div>'
+                + '<div class="lucy-message-content">'
+                + '<div class="lucy-message-bubble">' + bubbleContent + '</div>'
+                + '<div class="lucy-message-time">' + formatTime(msg.created_date) + '</div>'
+                + '</div>';
 
-                // Supprimer le message placeholder s'il est resté vide
-                if (!this.messages[botMessageIndex]?.contenu) {
-                    this.messages.splice(botMessageIndex, 1);
-                }
+            el.messages.appendChild(div);
+        });
 
-                // Vérifier si Lucy n'a pas compris le message
-                const botResponse = this.messages[botMessageIndex]?.contenu || '';
-                this.lucyDidNotUnderstand = this.checkIfLucyDidNotUnderstand(botResponse);
+        // Feedback bars
+        if (el.feedbackContact) el.feedbackContact.style.display = (state.lucyDidNotUnderstand && state.messages.length > 0) ? '' : 'none';
+        if (el.feedbackError) el.feedbackError.style.display = (state.hasError && !state.lucyDidNotUnderstand && state.messages.length > 0) ? '' : 'none';
 
-                // Réinitialiser le flag d'erreur après une réponse réussie (sauf si Lucy n'a pas compris)
-                if (!this.lucyDidNotUnderstand) {
-                    this.hasError = false;
-                }
+        requestAnimationFrame(scrollToBottom);
+    }
+
+    /** Rend les suggestions */
+    function renderSuggestions() {
+        if (!el.suggestions) return;
+        el.suggestions.innerHTML = state.suggestions.map(function (s) {
+            return '<button class="lucy-suggestion-btn" data-suggestion="' + escapeHtml(s) + '">'
+                + '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="flex-shrink:0;color:#f59e0b"><path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>'
+                + '<span>' + escapeHtml(s) + '</span></button>';
+        }).join('');
+
+        el.suggestions.querySelectorAll('[data-suggestion]').forEach(function (btn) {
+            btn.addEventListener('click', function () { sendMessage(btn.dataset.suggestion); });
+        });
+    }
 
-                // Recharger les conversations pour mettre à jour les titres
-                await this.loadConversations();
+    function updateBuyModal() {
+        var tokens = Math.floor((state.buyAmount / 10) * 1000000);
+        if (el.buyTokens) el.buyTokens.textContent = formatTokens(tokens);
+        if (el.buyConvs) el.buyConvs.textContent = Math.floor(tokens / 2000).toString();
+    }
 
-            } catch (error) {
-                // Marquer qu'il y a eu une erreur
-                this.hasError = true;
+    function updateSendBtn() {
+        if (el.btnSend) el.btnSend.disabled = state.isLoading || !(el.input && el.input.value.trim());
+    }
 
-                // Supprimer le message placeholder vide en cas d'erreur
-                if (botMessageIndex < this.messages.length && !this.messages[botMessageIndex]?.contenu) {
-                    this.messages.splice(botMessageIndex, 1);
-                }
-                throw error;
-            }
-        },
-
-        /**
-         * Vérifie si Lucy n'a pas compris ou ne peut pas aider l'utilisateur
-         */
-        checkIfLucyDidNotUnderstand(response) {
-            if (!response) return false;
-
-            const lowerResponse = response.toLowerCase();
-
-            // Patterns indiquant que Lucy n'a pas compris ou ne peut pas aider
-            const notUnderstoodPatterns = [
-                // Ne comprend pas
-                'je ne comprends pas',
-                'je n\'ai pas compris',
-                'je n\'arrive pas à comprendre',
-                'pourriez-vous reformuler',
-                'pouvez-vous reformuler',
-                'pourriez-vous préciser',
-                'pouvez-vous préciser',
-                'je ne suis pas sûr de comprendre',
-                'je ne suis pas certain de comprendre',
-                'votre message n\'est pas clair',
-                'erreur de frappe',
-                'erreur de saisie',
-                'message incompréhensible',
-                'je n\'ai pas pu interpréter',
-                'que souhaitez-vous faire',
-                'que voulez-vous faire',
-                // Ne peut pas aider / pas accès
-                'je n\'ai pas accès',
-                'je n\'ai pas les outils',
-                'je n\'ai pas la possibilité',
-                'je ne peux pas',
-                'je ne suis pas en mesure',
-                'pas accès aux outils',
-                'outils nécessaires',
-                'fonctionnalité non disponible',
-                'cette fonctionnalité n\'est pas',
-                'je ne dispose pas',
-                'mes outils actuels ne permettent pas',
-                'mes outils ne permettent pas',
-                'je n\'arrive pas à',
-                'impossible de réaliser',
-                'je ne trouve pas',
-                'modèle non disponible',
-                'n\'existe pas dans',
-                // Questions de clarification multiples
-                'pouvez-vous me dire',
-                'pourriez-vous me préciser',
-                'solutions possibles',
-                // Hors du périmètre / redirection vers autres outils
-                'je suis spécialisée',
-                'je vous recommande de consulter',
-                'je vous conseille de',
-                'en dehors de mon périmètre',
-                'hors de mon champ',
-                'ne fait pas partie de mes compétences',
-                'dépasse mes capacités',
-                'assistants culinaires',
-                'chatgpt',
-                'google assistant',
-                'sites spécialisés',
-                'comment puis-je vous aider avec votre crm',
-                'y a-t-il quelque chose que vous souhaitez faire'
-            ];
+    // ========================================================================
+    // ACTIONS
+    // ========================================================================
+
+    function openSidebar() {
+        state.isOpen = true;
+        state.hasNewMessage = false;
+        if (el.floatBtn) el.floatBtn.style.display = 'none';
+        if (el.sidebar) {
+            // 1) Rendre visible mais hors-ecran (classe hidden = translateX(100%))
+            el.sidebar.style.display = '';
+            // 2) Forcer un reflow pour que le navigateur prenne en compte le display
+            el.sidebar.offsetHeight; // eslint-disable-line no-unused-expressions
+            // 3) Retirer hidden pour declencher la transition CSS
+            el.sidebar.classList.remove('hidden');
+        }
+        saveState();
+        setTimeout(function () { if (el.input) el.input.focus(); }, 300);
+    }
 
-            return notUnderstoodPatterns.some(pattern => lowerResponse.includes(pattern));
-        },
-
-        /**
-         * Ouvre le modal de feedback
-         */
-        openFeedback() {
-            this.showFeedback = true;
-            this.feedbackDescription = '';
-        },
-
-        /**
-         * Ferme le modal de feedback
-         */
-        closeFeedback() {
-            this.showFeedback = false;
-            this.feedbackDescription = '';
-        },
-
-        /**
-         * Envoie le feedback à Revolucy
-         */
-        async sendFeedback() {
-            if (!this.currentConversationId) {
-                this.showToast('Aucune conversation à signaler', 'warning');
-                return;
-            }
+    function closeSidebar() {
+        state.isOpen = false;
+        state.showHistory = false;
+        state.showDoc = false;
+        if (el.sidebar) {
+            el.sidebar.classList.add('hidden');
+            // Attendre la fin de la transition avant de masquer
+            setTimeout(function () {
+                if (!state.isOpen && el.sidebar) el.sidebar.style.display = 'none';
+            }, 350);
+        }
+        if (el.floatBtn) el.floatBtn.style.display = '';
+        showView('chat');
+        saveState();
+    }
 
-            this.feedbackSending = true;
-
-            try {
-                const response = await this.apiPost('/feedback', {
-                    conversation_id: this.currentConversationId,
-                    description: this.feedbackDescription,
-                    page_url: window.location.href
-                });
-
-                this.showToast(response.message || 'Feedback envoyé avec succès !', 'success');
-                this.closeFeedback();
-                this.hasError = false;
-                this.lucyDidNotUnderstand = false;
-
-            } catch (error) {
-                console.error('Erreur envoi feedback:', error);
-                this.showToast('Erreur lors de l\'envoi du feedback', 'error');
-            } finally {
-                this.feedbackSending = false;
-            }
-        },
-
-        /**
-         * Achat de crédits
-         */
-        async buyCredits() {
-            if (this.buyAmount < 10) {
-                this.showToast('Le montant minimum est de 10 EUR', 'warning');
-                return;
-            }
+    function toggleSidebar() {
+        state.isOpen ? closeSidebar() : openSidebar();
+    }
 
-            try {
-                const response = await this.apiPost('/tokens/buy', {
-                    montant_ht: this.buyAmount
-                });
+    function toggleExpanded() {
+        state.isExpanded = !state.isExpanded;
+        if (el.sidebar) el.sidebar.classList.toggle('expanded', state.isExpanded);
+        updateExpandIcons();
+        saveState();
+    }
 
-                // Ouvrir l'URL de souscription dans un nouvel onglet
-                window.open(response.url_souscription, '_blank');
+    async function loadTokenStatus() {
+        try {
+            var r = await apiGet('/tokens/status');
+            state.tokensDisponibles = r.tokens_disponibles || 0;
+            updateTokensDisplay();
+        } catch (e) { console.error('Lucy: erreur tokens', e); }
+    }
 
-                this.showBuyCredits = false;
-                this.showToast('Redirection vers la page de paiement...', 'info');
+    async function loadConversations() {
+        try {
+            var r = await apiGet('/conversations');
+            state.conversations = r.conversations || [];
+            renderHistoryList();
+        } catch (e) { console.error('Lucy: erreur conversations', e); }
+    }
 
-            } catch (error) {
-                console.error('Erreur achat crédits:', error);
-                this.showToast('Erreur lors de la génération du lien de paiement', 'error');
-            }
-        },
-
-        /**
-         * Calcule le nombre de tokens pour un montant
-         */
-        calculateTokens(amount) {
-            return Math.floor((amount / 10) * 1000000);
-        },
-
-        /**
-         * Formate un nombre de tokens
-         */
-        formatTokens(tokens) {
-            if (tokens >= 1000000) {
-                return (tokens / 1000000).toFixed(1) + 'M';
-            } else if (tokens >= 1000) {
-                return (tokens / 1000).toFixed(0) + 'K';
-            }
-            return tokens.toString();
-        },
-
-        /**
-         * Calcule et formate le coût en euros pour un nombre de tokens
-         * Prix par défaut: 10€ par million de tokens
-         */
-        formatTokenCost(tokens) {
-            const prixParMillion = 10; // 10€ par million de tokens
-            const cout = (tokens / 1000000) * prixParMillion;
-            return cout.toFixed(4) + '€';
-        },
-
-        /**
-         * Formate une date
-         */
-        formatDate(dateString) {
-            const date = new Date(dateString);
-            const now = new Date();
-            const diff = now - date;
-
-            // Moins d'une minute
-            if (diff < 60000) {
-                return 'À l\'instant';
-            }
+    async function loadSuggestions() {
+        try {
+            var r = await apiGet('/suggestions');
+            state.suggestions = r.suggestions || [];
+        } catch (e) {
+            state.suggestions = [
+                'Comment créer un nouveau membre ?',
+                'Comment effectuer un paiement ?',
+                'Où trouver la liste des adhésions ?'
+            ];
+        }
+        renderSuggestions();
+    }
 
-            // Moins d'une heure
-            if (diff < 3600000) {
-                const minutes = Math.floor(diff / 60000);
-                return `Il y a ${minutes} min`;
-            }
+    async function newConversation() {
+        try {
+            var r = await apiPost('/conversations', { page_contexte: window.location.pathname });
+            state.currentConversationId = r.id;
+            state.messages = [];
+            showView('chat');
+            renderMessages();
+            saveState();
+            await loadConversations();
+        } catch (e) { console.error('Lucy: erreur new conversation', e); }
+    }
 
-            // Aujourd'hui
-            if (date.toDateString() === now.toDateString()) {
-                return `Aujourd'hui à ${date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}`;
-            }
+    async function loadConversation(id) {
+        try {
+            var r = await apiGet('/conversations/' + id);
+            state.currentConversationId = id;
+            state.messages = r.messages || [];
+            showView('chat');
+            renderMessages();
+            saveState();
+            setTimeout(scrollToBottom, 100);
+        } catch (e) {
+            console.error('Lucy: erreur load conversation', e);
+            state.currentConversationId = null;
+            state.messages = [];
+            renderMessages();
+            saveState();
+        }
+    }
 
-            // Cette semaine
-            if (diff < 7 * 24 * 3600000) {
-                return date.toLocaleDateString('fr-FR', { weekday: 'long', hour: '2-digit', minute: '2-digit' });
+    async function deleteConversation(id) {
+        if (!confirm('Êtes-vous sûr de vouloir supprimer cette conversation ?')) return;
+        try {
+            await apiDelete('/conversations/' + id);
+            await loadConversations();
+            if (state.currentConversationId === id) {
+                state.currentConversationId = null;
+                state.messages = [];
+                renderMessages();
             }
+        } catch (e) { console.error('Lucy: erreur suppression', e); }
+    }
 
-            return date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
-        },
-
-        /**
-         * Formate une heure
-         */
-        formatTime(dateString) {
-            const date = new Date(dateString);
-            return date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
-        },
-
-        /**
-         * Formate le contenu d'un message (markdown basique)
-         */
-        formatMessage(content) {
-            if (!content) return '';
-
-            // Échapper le HTML
-            let formatted = content
-                .replace(/&/g, '&amp;')
-                .replace(/</g, '&lt;')
-                .replace(/>/g, '&gt;');
-
-            // Markdown basique
-            formatted = formatted
-                // Gras
-                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-                // Italique
-                .replace(/\*(.*?)\*/g, '<em>$1</em>')
-                // Code inline
-                .replace(/`(.*?)`/g, '<code class="bg-base-300 px-1 rounded">$1</code>')
-                // Liens
-                .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" class="link link-primary">$1</a>')
-                // Sauts de ligne
-                .replace(/\n/g, '<br>');
-
-            return formatted;
-        },
-
-        /**
-         * Scroll vers le bas de la zone de messages
-         */
-        scrollToBottom() {
-            const container = this.$refs.messagesContainer;
-            if (container) {
-                container.scrollTop = container.scrollHeight;
-            }
-        },
-
-        /**
-         * Affiche un toast de notification
-         */
-        showToast(message, type = 'info') {
-            // Utiliser le système de toast Alpine.js existant si disponible
-            if (window.Alpine && window.toastData) {
-                window.toastData.show(message, type);
+    async function sendMessage(message) {
+        if (state.isLoading || !message || !message.trim()) return;
+
+        state.lucyDidNotUnderstand = false;
+
+        if (!state.currentConversationId) await newConversation();
+
+        // Message utilisateur
+        state.messages.push({
+            id: Date.now(),
+            repondant: 'UTILISATEUR',
+            contenu: message,
+            created_date: new Date().toISOString(),
+            tokens_utilises: 0
+        });
+        state.currentMessage = '';
+        if (el.input) {
+            el.input.value = '';
+            el.input.style.height = 'auto';
+        }
+        updateSendBtn();
+        renderMessages();
+
+        try {
+            state.isLoading = true;
+            if (el.input) el.input.disabled = true;
+            if (el.btnSend) el.btnSend.disabled = true;
+
+            await apiPost('/conversations/' + state.currentConversationId + '/messages', { contenu: message });
+            await streamChatCompletion();
+        } catch (e) {
+            console.error('Lucy: erreur envoi', e);
+            if (e.status === 402) {
+                showModal('buy');
             } else {
-                // Fallback: alert simple
-                console.log(`[${type}] ${message}`);
+                state.hasError = true;
+                renderMessages();
             }
-        },
-
-        /**
-         * Récupère un cookie
-         */
-        getCookie(name) {
-            let cookieValue = null;
-            if (document.cookie && document.cookie !== '') {
-                const cookies = document.cookie.split(';');
-                for (let i = 0; i < cookies.length; i++) {
-                    const cookie = cookies[i].trim();
-                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                        break;
-                    }
+        } finally {
+            state.isLoading = false;
+            if (el.input) el.input.disabled = false;
+            updateSendBtn();
+            if (el.input) el.input.focus();
+        }
+    }
+
+    async function streamChatCompletion() {
+        var url = API_BASE + '/conversations/' + state.currentConversationId + '/chat';
+        var botIdx = state.messages.length;
+
+        state.messages.push({
+            id: Date.now() + 1,
+            repondant: 'CHATBOT',
+            contenu: '',
+            created_date: new Date().toISOString(),
+            tokens_utilises: 0
+        });
+        renderMessages();
+
+        try {
+            var response = await fetch(url, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
+                body: JSON.stringify({ page_contexte: window.location.pathname })
+            });
+
+            if (!response.ok) { var err = await response.json(); err.status = response.status; throw err; }
+
+            var reader = response.body.getReader();
+            var decoder = new TextDecoder();
+            var fullContent = '';
+
+            while (true) {
+                var result = await reader.read();
+                if (result.done) break;
+
+                var text = decoder.decode(result.value);
+                var lines = text.split('\n');
+
+                for (var i = 0; i < lines.length; i++) {
+                    var line = lines[i];
+                    if (!line.startsWith('data: ')) continue;
+                    try {
+                        var data = JSON.parse(line.slice(6));
+                        if (data.type === 'content') {
+                            fullContent += data.content;
+                            state.messages[botIdx].contenu = fullContent;
+                            renderMessages();
+                        } else if (data.type === 'done') {
+                            state.messages[botIdx].id = data.message_id;
+                            state.messages[botIdx].tokens_utilises = data.tokens_utilises;
+                            await loadTokenStatus();
+                        } else if (data.type === 'error') {
+                            throw new Error(data.error);
+                        }
+                    } catch (parseErr) { if (parseErr.message) throw parseErr; }
                 }
             }
-            return cookieValue;
-        },
-
-        // Méthodes utilitaires pour les appels API
-        async apiGet(endpoint) {
-            const response = await fetch(`${this.apiBaseUrl}${endpoint}`, {
-                method: 'GET',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRFToken': this.csrfToken
-                }
-            });
 
-            if (!response.ok) {
-                const error = await response.json();
-                throw { status: response.status, ...error };
+            if (!state.messages[botIdx] || !state.messages[botIdx].contenu) {
+                state.messages.splice(botIdx, 1);
             }
 
-            return response.json();
-        },
+            state.lucyDidNotUnderstand = checkIfLucyDidNotUnderstand(
+                (state.messages[botIdx] && state.messages[botIdx].contenu) || ''
+            );
+            if (!state.lucyDidNotUnderstand) state.hasError = false;
+
+            renderMessages();
+            await loadConversations();
+        } catch (e) {
+            state.hasError = true;
+            if (botIdx < state.messages.length && state.messages[botIdx] && !state.messages[botIdx].contenu) {
+                state.messages.splice(botIdx, 1);
+            }
+            renderMessages();
+            throw e;
+        }
+    }
 
-        async apiPost(endpoint, data) {
-            const response = await fetch(`${this.apiBaseUrl}${endpoint}`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRFToken': this.csrfToken
-                },
-                body: JSON.stringify(data)
+    async function sendFeedback() {
+        if (!state.currentConversationId) return;
+        state.feedbackSending = true;
+        try {
+            await apiPost('/feedback', {
+                conversation_id: state.currentConversationId,
+                description: state.feedbackDescription,
+                page_url: window.location.href
             });
+            state.hasError = false;
+            state.lucyDidNotUnderstand = false;
+            hideModal('feedback');
+            renderMessages();
+        } catch (e) { console.error('Lucy: erreur feedback', e); }
+        finally { state.feedbackSending = false; }
+    }
 
-            if (!response.ok) {
-                const error = await response.json();
-                throw { status: response.status, ...error };
-            }
+    async function buyCredits() {
+        if (state.buyAmount < 10) return;
+        try {
+            var r = await apiPost('/tokens/buy', { montant_ht: state.buyAmount });
+            window.open(r.url_souscription, '_blank');
+            hideModal('buy');
+        } catch (e) { console.error('Lucy: erreur achat', e); }
+    }
 
-            return response.json();
-        },
+    // ========================================================================
+    // MODALS
+    // ========================================================================
+
+    function showModal(name) {
+        if (name === 'buy' && el.modalBuy) {
+            el.modalBuy.style.display = '';
+            updateBuyModal();
+        } else if (name === 'feedback' && el.modalFeedback) {
+            el.modalFeedback.style.display = '';
+            state.feedbackDescription = '';
+            if (el.feedbackDesc) el.feedbackDesc.value = '';
+        }
+    }
+
+    function hideModal(name) {
+        if (name === 'buy' && el.modalBuy) el.modalBuy.style.display = 'none';
+        else if (name === 'feedback' && el.modalFeedback) el.modalFeedback.style.display = 'none';
+    }
 
-        async apiDelete(endpoint) {
-            const response = await fetch(`${this.apiBaseUrl}${endpoint}`, {
-                method: 'DELETE',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRFToken': this.csrfToken
+    // ========================================================================
+    // GUIDE
+    // ========================================================================
+
+    function checkFirstLaunch() {
+        if (!localStorage.getItem('lucy_assist_guide_seen') && state.conversations.length === 0) {
+            setTimeout(function () {
+                if (state.conversations.length === 0 && el.guideOverlay) {
+                    el.guideOverlay.style.display = '';
+                    openSidebar();
                 }
-            });
+            }, 2000);
+        }
+    }
 
-            if (!response.ok) {
-                const error = await response.json();
-                throw { status: response.status, ...error };
-            }
+    function guideNext() {
+        state.guideStep = 2;
+        if (el.guideStep1) el.guideStep1.style.display = 'none';
+        if (el.guideStep2) el.guideStep2.style.display = '';
+    }
 
-            return response.json();
+    function guideFinish() {
+        if (el.guideOverlay) el.guideOverlay.style.display = 'none';
+        localStorage.setItem('lucy_assist_guide_seen', 'true');
+    }
+
+    // ========================================================================
+    // STATE PERSISTENCE
+    // ========================================================================
+
+    function saveState() {
+        try {
+            sessionStorage.setItem('lucy_assist_state', JSON.stringify({
+                isOpen: state.isOpen,
+                isExpanded: state.isExpanded,
+                currentConversationId: state.currentConversationId,
+                showHistory: state.showHistory,
+                showDoc: state.showDoc
+            }));
+        } catch (e) {}
+    }
+
+    function restoreState() {
+        try {
+            var s = JSON.parse(sessionStorage.getItem('lucy_assist_state'));
+            if (!s) return;
+            state.isOpen = s.isOpen || false;
+            state.isExpanded = s.isExpanded || false;
+            state.currentConversationId = s.currentConversationId || null;
+            state.showHistory = s.showHistory || false;
+            state.showDoc = s.showDoc || false;
+        } catch (e) {}
+    }
+
+    // ========================================================================
+    // INIT
+    // ========================================================================
+
+    function init() {
+        console.log('Lucy Assist: init');
+
+        // Cache des elements - tous optionnels
+        el.floatBtn = $('lucy-float-btn');
+        el.sidebar = $('lucy-sidebar');
+        el.tokens = $('lucy-tokens');
+        el.btnBuyCredits = $('lucy-btn-buy-credits');
+        el.btnExpand = $('lucy-btn-expand');
+        el.btnHistory = $('lucy-btn-history');
+        el.btnNew = $('lucy-btn-new');
+        el.btnDoc = $('lucy-btn-doc');
+        el.btnClose = $('lucy-btn-close');
+        el.btnSend = $('lucy-btn-send');
+        el.input = $('lucy-input');
+        el.messages = $('lucy-messages');
+        el.welcome = $('lucy-welcome');
+        el.suggestions = $('lucy-suggestions');
+        el.viewHistory = $('lucy-view-history');
+        el.viewDoc = $('lucy-view-doc');
+        el.viewChat = $('lucy-view-chat');
+        el.historyList = $('lucy-history-list');
+        el.feedbackContact = $('lucy-feedback-contact');
+        el.feedbackError = $('lucy-feedback-error');
+        el.modalBuy = $('lucy-modal-buy');
+        el.modalFeedback = $('lucy-modal-feedback');
+        el.buyAmount = $('lucy-buy-amount');
+        el.buyTokens = $('lucy-buy-tokens');
+        el.buyConvs = $('lucy-buy-convs');
+        el.buyCancel = $('lucy-buy-cancel');
+        el.buyConfirm = $('lucy-buy-confirm');
+        el.feedbackDesc = $('lucy-feedback-desc');
+        el.feedbackCancel = $('lucy-feedback-cancel');
+        el.feedbackConfirm = $('lucy-feedback-confirm');
+        el.guideOverlay = $('lucy-guide-overlay');
+        el.guideStep1 = $('lucy-guide-step1');
+        el.guideStep2 = $('lucy-guide-step2');
+
+        // Verifier que le root existe
+        if (!el.floatBtn && !el.sidebar) {
+            console.warn('Lucy Assist: elements DOM introuvables, abort.');
+            return;
         }
-    };
-}
 
-// Exposer la fonction globalement pour que x-data puisse y accéder
-window.lucyAssist = lucyAssist;
+        console.log('Lucy Assist: elements trouves, floatBtn=' + !!el.floatBtn + ', sidebar=' + !!el.sidebar);
+
+        // CSRF
+        var csrfEl = document.querySelector('[name=csrfmiddlewaretoken]');
+        csrfToken = (csrfEl && csrfEl.value) || getCookie('csrftoken') || '';
+
+        // Restaurer l'etat
+        restoreState();
+
+        // Appliquer l'etat initial
+        if (state.isOpen) {
+            if (el.floatBtn) el.floatBtn.style.display = 'none';
+            if (el.sidebar) {
+                el.sidebar.style.display = '';
+                el.sidebar.classList.remove('hidden');
+            }
+        }
+        if (state.isExpanded && el.sidebar) {
+            el.sidebar.classList.add('expanded');
+        }
+        updateExpandIcons();
+
+        if (state.showHistory) showView('history');
+        else if (state.showDoc) showView('doc');
+        else showView('chat');
+
+        // ---- EVENT LISTENERS (tous avec null-safety via on()) ----
+        on(el.floatBtn, 'click', toggleSidebar);
+        on(el.btnExpand, 'click', toggleExpanded);
+        on(el.btnHistory, 'click', function () { showView(state.showHistory ? 'chat' : 'history'); });
+        on(el.btnNew, 'click', newConversation);
+        on(el.btnDoc, 'click', function () { showView(state.showDoc ? 'chat' : 'doc'); });
+        on(el.btnClose, 'click', closeSidebar);
+
+        function onInputChange() {
+            if (!el.input) return;
+            state.currentMessage = el.input.value;
+            el.input.style.height = 'auto';
+            el.input.style.height = Math.min(el.input.scrollHeight, 128) + 'px';
+            updateSendBtn();
+        }
+        on(el.input, 'input', onInputChange);
+        on(el.input, 'keyup', onInputChange);
+        on(el.input, 'change', onInputChange);
+        on(el.input, 'keydown', function (e) {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                e.preventDefault();
+                sendMessage(el.input.value);
+            }
+            // Mettre a jour le bouton sur la prochaine frame
+            setTimeout(updateSendBtn, 0);
+        });
+
+        on(el.btnSend, 'click', function () { sendMessage(el.input ? el.input.value : ''); });
+
+        on($('lucy-btn-feedback-contact'), 'click', function () { showModal('feedback'); });
+        on($('lucy-btn-feedback-error'), 'click', function () { showModal('feedback'); });
+
+        on(el.btnBuyCredits, 'click', function () { showModal('buy'); });
+        on(el.buyCancel, 'click', function () { hideModal('buy'); });
+        on(el.buyConfirm, 'click', buyCredits);
+        on(el.buyAmount, 'input', function () {
+            state.buyAmount = parseInt(el.buyAmount.value) || 10;
+            updateBuyModal();
+        });
+
+        on(el.feedbackCancel, 'click', function () { hideModal('feedback'); });
+        on(el.feedbackConfirm, 'click', sendFeedback);
+        on(el.feedbackDesc, 'input', function () {
+            state.feedbackDescription = el.feedbackDesc.value;
+        });
+
+        on($('lucy-guide-skip'), 'click', guideFinish);
+        on($('lucy-guide-next'), 'click', guideNext);
+        on($('lucy-guide-finish'), 'click', guideFinish);
+
+        // Raccourcis clavier globaux
+        document.addEventListener('keydown', function (e) {
+            if (e.ctrlKey && e.key === 'k') { e.preventDefault(); toggleSidebar(); }
+            if (e.key === 'Escape' && state.isOpen) closeSidebar();
+        });
+
+        window.addEventListener('beforeunload', saveState);
+
+        // Charger les donnees
+        loadTokenStatus();
+        loadConversations().then(function () {
+            if (state.currentConversationId) loadConversation(state.currentConversationId);
+        });
+        loadSuggestions();
+        checkFirstLaunch();
+
+        console.log('Lucy Assist: init complete');
+    }
 
-// Enregistrer le composant avec Alpine si disponible
-document.addEventListener('DOMContentLoaded', () => {
-    if (window.Alpine && window.Alpine.data) {
-        window.Alpine.data('lucyAssist', lucyAssist);
+    // Lancer quand le DOM est pret
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
     }
-});
+})();