django-lucy-assist 1.2.5__py3-none-any.whl → 1.2.7__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,742 @@ 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 (caches apres init)
+    // ========================================================================
+    const $ = (id) => document.getElementById(id);
 
-            // 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();
-            }
+    let els = {};
 
-            // 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;
-            }
+    // ========================================================================
+    // HELPERS
+    // ========================================================================
 
-            try {
-                await this.apiDelete(`/conversations/${conversationId}`);
+    function getCookie(name) {
+        const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+        return match ? decodeURIComponent(match[2]) : null;
+    }
 
-                // Recharger les conversations
-                await this.loadConversations();
+    function formatTokens(tokens) {
+        if (tokens >= 1000000) return (tokens / 1000000).toFixed(1) + 'M';
+        if (tokens >= 1000) return (tokens / 1000).toFixed(0) + 'K';
+        return tokens.toString();
+    }
 
-                // Si c'était la conversation courante, reset
-                if (this.currentConversationId === conversationId) {
-                    this.currentConversationId = null;
-                    this.messages = [];
-                }
+    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' });
+    }
 
-            // 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 escapeHtml(s) {
+        return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
 
-            // Envoyer au serveur
-            try {
-                this.isLoading = true;
+    function formatMessage(content) {
+        if (!content) return '';
+        let 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;
+    }
 
-                // Envoyer le message utilisateur
-                await this.apiPost(`/conversations/${this.currentConversationId}/messages`, {
-                    contenu: message
-                });
+    function checkIfLucyDidNotUnderstand(response) {
+        if (!response) return false;
+        const lower = response.toLowerCase();
+        const 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(p => lower.includes(p));
+    }
 
-                // Demander une réponse à Claude (avec streaming)
-                await this.streamChatCompletion();
+    // ========================================================================
+    // API
+    // ========================================================================
 
-            } catch (error) {
-                console.error('Erreur envoi message:', error);
+    async function apiGet(endpoint) {
+        const r = await fetch(API_BASE + endpoint, {
+            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken }
+        });
+        if (!r.ok) throw { status: r.status, ...(await r.json()) };
+        return r.json();
+    }
 
-                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');
-                }
+    async function apiPost(endpoint, data) {
+        const r = await fetch(API_BASE + endpoint, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
+            body: JSON.stringify(data)
+        });
+        if (!r.ok) throw { status: r.status, ...(await r.json()) };
+        return r.json();
+    }
 
-            } finally {
-                this.isLoading = false;
-            }
-        },
-
-        /**
-         * 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
-            });
+    async function apiDelete(endpoint) {
+        const r = await fetch(API_BASE + endpoint, {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken }
+        });
+        if (!r.ok) throw { status: r.status, ...(await r.json()) };
+        return r.json();
+    }
 
-            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 };
-                }
+    // ========================================================================
+    // RENDU
+    // ========================================================================
 
-                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;
-                            }
-                        }
-                    }
-                }
+    function scrollToBottom() {
+        const c = els.messages;
+        if (c) c.scrollTop = c.scrollHeight;
+    }
 
-                // Supprimer le message placeholder s'il est resté vide
-                if (!this.messages[botMessageIndex]?.contenu) {
-                    this.messages.splice(botMessageIndex, 1);
-                }
+    function updateTokensDisplay() {
+        els.tokens.textContent = formatTokens(state.tokensDisponibles);
+        els.btnBuyCredits.style.display = state.tokensDisponibles < 100000 ? '' : 'none';
+    }
 
-                // Vérifier si Lucy n'a pas compris le message
-                const botResponse = this.messages[botMessageIndex]?.contenu || '';
-                this.lucyDidNotUnderstand = this.checkIfLucyDidNotUnderstand(botResponse);
+    function updateExpandIcons() {
+        const expand = els.sidebar.querySelector('.lucy-icon-expand');
+    }
 
-                // 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;
-                }
+    /** Affiche la bonne vue : chat / history / doc */
+    function showView(view) {
+        state.showHistory = view === 'history';
+        state.showDoc = view === 'doc';
 
-                // Recharger les conversations pour mettre à jour les titres
-                await this.loadConversations();
+        els.viewHistory.style.display = state.showHistory ? '' : 'none';
+        els.viewDoc.style.display = state.showDoc ? '' : 'none';
+        els.viewChat.style.display = (!state.showHistory && !state.showDoc) ? '' : 'none';
 
-            } catch (error) {
-                // Marquer qu'il y a eu une erreur
-                this.hasError = true;
+        // boutons actifs
+        els.btnHistory.classList.toggle('active', state.showHistory);
+        els.btnDoc.classList.toggle('active', state.showDoc);
+    }
 
-                // 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'
-            ];
+    /** Rend la liste des conversations dans l'historique */
+    function renderHistoryList() {
+        const container = els.historyList;
+        if (!container) return;
 
-            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;
-            }
+        if (state.conversations.length === 0) {
+            container.innerHTML = '<p class="lucy-history-empty">Aucune conversation</p>';
+            return;
+        }
 
-            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;
-            }
+        container.innerHTML = state.conversations.map(conv => `
+            <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('');
+
+        // Event delegation
+        container.querySelectorAll('[data-conv-id]').forEach(el => {
+            el.addEventListener('click', (e) => {
+                if (e.target.closest('[data-delete-id]')) return;
+                loadConversation(parseInt(el.dataset.convId));
+            });
+        });
+        container.querySelectorAll('[data-delete-id]').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                deleteConversation(parseInt(btn.dataset.deleteId));
+            });
+        });
+    }
 
-            try {
-                const response = await this.apiPost('/tokens/buy', {
-                    montant_ht: this.buyAmount
-                });
+    /** Rend la zone de messages */
+    function renderMessages() {
+        const container = els.messages;
+        if (!container) return;
+
+        if (state.messages.length === 0) {
+            els.welcome.style.display = '';
+            // Feedback bars cachees quand pas de messages
+            els.feedbackContact.style.display = 'none';
+            els.feedbackError.style.display = 'none';
+            return;
+        }
 
-                // Ouvrir l'URL de souscription dans un nouvel onglet
-                window.open(response.url_souscription, '_blank');
+        els.welcome.style.display = 'none';
 
-                this.showBuyCredits = false;
-                this.showToast('Redirection vers la page de paiement...', 'info');
+        // Garder le welcome puis ajouter les messages
+        // On reconstruit uniquement les bulles
+        // Supprimer les anciens message-divs
+        container.querySelectorAll('.lucy-message').forEach(el => el.remove());
 
-            } 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';
-            }
+        const avatarUrl = container.dataset.avatarUrl || '';
+        const lucyIcon = container.dataset.lucyIcon || '';
 
-            // Moins d'une heure
-            if (diff < 3600000) {
-                const minutes = Math.floor(diff / 60000);
-                return `Il y a ${minutes} min`;
-            }
+        state.messages.forEach(msg => {
+            const isUser = msg.repondant === 'UTILISATEUR';
+            const div = document.createElement('div');
+            div.className = 'lucy-message ' + (isUser ? 'user' : 'bot');
 
-            // Aujourd'hui
-            if (date.toDateString() === now.toDateString()) {
-                return `Aujourd'hui à ${date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}`;
+            let 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">`
+                    : '🤖';
             }
 
-            // Cette semaine
-            if (diff < 7 * 24 * 3600000) {
-                return date.toLocaleDateString('fr-FR', { weekday: 'long', hour: '2-digit', minute: '2-digit' });
-            }
+            const bubbleContent = msg.contenu
+                ? `<span>${formatMessage(msg.contenu)}</span>`
+                : `<span class="lucy-loading-dots"><span></span><span></span><span></span></span>`;
+
+            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>
+            `;
+            container.appendChild(div);
+        });
+
+        // Feedback bars
+        els.feedbackContact.style.display = (state.lucyDidNotUnderstand && state.messages.length > 0) ? '' : 'none';
+        els.feedbackError.style.display = (state.hasError && !state.lucyDidNotUnderstand && state.messages.length > 0) ? '' : 'none';
+
+        requestAnimationFrame(scrollToBottom);
+    }
 
-            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;
+    /** Rend les suggestions */
+    function renderSuggestions() {
+        const container = els.suggestions;
+        if (!container) return;
+        container.innerHTML = state.suggestions.map(s => `
+            <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('');
+
+        container.querySelectorAll('[data-suggestion]').forEach(btn => {
+            btn.addEventListener('click', () => sendMessage(btn.dataset.suggestion));
+        });
+    }
+
+    function updateBuyModal() {
+        const tokens = Math.floor((state.buyAmount / 10) * 1000000);
+        els.buyTokens.textContent = formatTokens(tokens);
+        els.buyConvs.textContent = Math.floor(tokens / 2000).toString();
+    }
+
+    // ========================================================================
+    // ACTIONS
+    // ========================================================================
+
+    function openSidebar() {
+        state.isOpen = true;
+        state.hasNewMessage = false;
+        els.floatBtn.style.display = 'none';
+        els.sidebar.style.display = '';
+        els.sidebar.classList.remove('hidden');
+        saveState();
+        setTimeout(() => els.input.focus(), 100);
+    }
+
+    function closeSidebar() {
+        state.isOpen = false;
+        state.showHistory = false;
+        state.showDoc = false;
+        els.sidebar.style.display = 'none';
+        els.sidebar.classList.add('hidden');
+        els.floatBtn.style.display = '';
+        showView('chat');
+        saveState();
+    }
+
+    function toggleSidebar() {
+        state.isOpen ? closeSidebar() : openSidebar();
+    }
+
+    function toggleExpanded() {
+        state.isExpanded = !state.isExpanded;
+        els.sidebar.classList.toggle('expanded', state.isExpanded);
+        updateExpandIcons();
+        saveState();
+    }
+
+    async function loadTokenStatus() {
+        try {
+            const r = await apiGet('/tokens/status');
+            state.tokensDisponibles = r.tokens_disponibles || 0;
+            updateTokensDisplay();
+        } catch (e) { console.error('Erreur chargement tokens:', e); }
+    }
+
+    async function loadConversations() {
+        try {
+            const r = await apiGet('/conversations');
+            state.conversations = r.conversations || [];
+            renderHistoryList();
+        } catch (e) { console.error('Erreur chargement conversations:', e); }
+    }
+
+    async function loadSuggestions() {
+        try {
+            const 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();
+    }
+
+    async function newConversation() {
+        try {
+            const 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('Erreur création conversation:', e); }
+    }
+
+    async function loadConversation(id) {
+        try {
+            const r = await apiGet(`/conversations/${id}`);
+            state.currentConversationId = id;
+            state.messages = r.messages || [];
+            showView('chat');
+            renderMessages();
+            saveState();
+            setTimeout(scrollToBottom, 100);
+        } catch (e) {
+            console.error('Erreur chargement conversation:', e);
+            state.currentConversationId = null;
+            state.messages = [];
+            renderMessages();
+            saveState();
+        }
+    }
+
+    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();
             }
-        },
-
-        /**
-         * 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);
+        } catch (e) { console.error('Erreur suppression:', e); }
+    }
+
+    async function sendMessage(message) {
+        if (state.isLoading || !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 = '';
+        els.input.value = '';
+        els.input.style.height = 'auto';
+        updateSendBtn();
+        renderMessages();
+
+        try {
+            state.isLoading = true;
+            els.input.disabled = true;
+            els.btnSend.disabled = true;
+
+            await apiPost(`/conversations/${state.currentConversationId}/messages`, { contenu: message });
+            await streamChatCompletion();
+        } catch (e) {
+            console.error('Erreur envoi message:', 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;
+            els.input.disabled = false;
+            updateSendBtn();
+            els.input.focus();
+        }
+    }
+
+    async function streamChatCompletion() {
+        const url = `${API_BASE}/conversations/${state.currentConversationId}/chat`;
+        const botIdx = state.messages.length;
+
+        state.messages.push({
+            id: Date.now() + 1,
+            repondant: 'CHATBOT',
+            contenu: '',
+            created_date: new Date().toISOString(),
+            tokens_utilises: 0
+        });
+        renderMessages();
+
+        try {
+            const 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) throw { status: response.status, ...(await response.json()) };
+
+            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);
+                for (const line of text.split('\n')) {
+                    if (!line.startsWith('data: ')) continue;
+                    try {
+                        const 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 (e) { if (e.message) throw e; }
                 }
             }
-            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]?.contenu) {
+                state.messages.splice(botIdx, 1);
             }
 
-            return response.json();
-        },
+            state.lucyDidNotUnderstand = checkIfLucyDidNotUnderstand(state.messages[botIdx]?.contenu || '');
+            if (!state.lucyDidNotUnderstand) state.hasError = false;
 
-        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)
+            renderMessages();
+            await loadConversations();
+        } catch (e) {
+            state.hasError = true;
+            if (botIdx < state.messages.length && !state.messages[botIdx]?.contenu) {
+                state.messages.splice(botIdx, 1);
+            }
+            renderMessages();
+            throw e;
+        }
+    }
+
+    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('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 {
+            const r = await apiPost('/tokens/buy', { montant_ht: state.buyAmount });
+            window.open(r.url_souscription, '_blank');
+            hideModal('buy');
+        } catch (e) { console.error('Erreur achat:', e); }
+    }
 
-            return response.json();
-        },
+    // ========================================================================
+    // MODALS
+    // ========================================================================
+
+    function showModal(name) {
+        if (name === 'buy') {
+            els.modalBuy.style.display = '';
+            updateBuyModal();
+        } else if (name === 'feedback') {
+            els.modalFeedback.style.display = '';
+            state.feedbackDescription = '';
+            els.feedbackDesc.value = '';
+        }
+    }
 
-        async apiDelete(endpoint) {
-            const response = await fetch(`${this.apiBaseUrl}${endpoint}`, {
-                method: 'DELETE',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRFToken': this.csrfToken
-                }
-            });
+    function hideModal(name) {
+        if (name === 'buy') els.modalBuy.style.display = 'none';
+        else if (name === 'feedback') els.modalFeedback.style.display = 'none';
+    }
 
-            if (!response.ok) {
-                const error = await response.json();
-                throw { status: response.status, ...error };
-            }
+    // ========================================================================
+    // GUIDE
+    // ========================================================================
 
-            return response.json();
+    function checkFirstLaunch() {
+        if (!localStorage.getItem('lucy_assist_guide_seen') && state.conversations.length === 0) {
+            setTimeout(() => {
+                if (state.conversations.length === 0) {
+                    els.guideOverlay.style.display = '';
+                    openSidebar();
+                }
+            }, 2000);
         }
-    };
-}
+    }
+
+    function guideNext() {
+        state.guideStep = 2;
+        els.guideStep1.style.display = 'none';
+        els.guideStep2.style.display = '';
+    }
+
+    function guideFinish() {
+        els.guideOverlay.style.display = 'none';
+        localStorage.setItem('lucy_assist_guide_seen', 'true');
+    }
+
+    // ========================================================================
+    // STATE PERSISTENCE
+    // ========================================================================
+
+    function saveState() {
+        sessionStorage.setItem('lucy_assist_state', JSON.stringify({
+            isOpen: state.isOpen,
+            isExpanded: state.isExpanded,
+            currentConversationId: state.currentConversationId,
+            showHistory: state.showHistory,
+            showDoc: state.showDoc
+        }));
+    }
+
+    function restoreState() {
+        try {
+            const 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) {}
+    }
+
+    // ========================================================================
+    // SEND BUTTON STATE
+    // ========================================================================
+
+    function updateSendBtn() {
+        els.btnSend.disabled = state.isLoading || !els.input.value.trim();
+    }
 
-// Exposer la fonction globalement pour que x-data puisse y accéder
-window.lucyAssist = lucyAssist;
+    // ========================================================================
+    // INIT
+    // ========================================================================
+
+    function init() {
+        // Cache des elements
+        els = {
+            floatBtn: $('lucy-float-btn'),
+            sidebar: $('lucy-sidebar'),
+            tokens: $('lucy-tokens'),
+            btnBuyCredits: $('lucy-btn-buy-credits'),
+            btnExpand: $('lucy-btn-expand'),
+            btnHistory: $('lucy-btn-history'),
+            btnNew: $('lucy-btn-new'),
+            btnDoc: $('lucy-btn-doc'),
+            btnClose: $('lucy-btn-close'),
+            btnSend: $('lucy-btn-send'),
+            input: $('lucy-input'),
+            messages: $('lucy-messages'),
+            welcome: $('lucy-welcome'),
+            suggestions: $('lucy-suggestions'),
+            viewHistory: $('lucy-view-history'),
+            viewDoc: $('lucy-view-doc'),
+            viewChat: $('lucy-view-chat'),
+            historyList: $('lucy-history-list'),
+            feedbackContact: $('lucy-feedback-contact'),
+            feedbackError: $('lucy-feedback-error'),
+            btnFeedbackContact: $('lucy-btn-feedback-contact'),
+            btnFeedbackError: $('lucy-btn-feedback-error'),
+            modalBuy: $('lucy-modal-buy'),
+            modalFeedback: $('lucy-modal-feedback'),
+            buyAmount: $('lucy-buy-amount'),
+            buyTokens: $('lucy-buy-tokens'),
+            buyConvs: $('lucy-buy-convs'),
+            buyCancel: $('lucy-buy-cancel'),
+            buyConfirm: $('lucy-buy-confirm'),
+            feedbackDesc: $('lucy-feedback-desc'),
+            feedbackCancel: $('lucy-feedback-cancel'),
+            feedbackConfirm: $('lucy-feedback-confirm'),
+            guideOverlay: $('lucy-guide-overlay'),
+            guideStep1: $('lucy-guide-step1'),
+            guideStep2: $('lucy-guide-step2'),
+            guideSkip: $('lucy-guide-skip'),
+            guideNext: $('lucy-guide-next'),
+            guideFinish: $('lucy-guide-finish'),
+        };
+
+        // CSRF
+        csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value || getCookie('csrftoken') || '';
+
+        // Restaurer l'etat
+        restoreState();
+
+        // Appliquer l'etat initial
+        if (state.isOpen) {
+            els.floatBtn.style.display = 'none';
+            els.sidebar.style.display = '';
+            els.sidebar.classList.remove('hidden');
+        }
+        if (state.isExpanded) {
+            els.sidebar.classList.add('expanded');
+        }
+        updateExpandIcons();
+
+        if (state.showHistory) showView('history');
+        else if (state.showDoc) showView('doc');
+        else showView('chat');
+
+        // ---- EVENT LISTENERS ----
+
+        // Bouton flottant
+        els.floatBtn.addEventListener('click', toggleSidebar);
+
+        // Header buttons
+        els.btnExpand.addEventListener('click', toggleExpanded);
+        els.btnHistory.addEventListener('click', () => showView(state.showHistory ? 'chat' : 'history'));
+        els.btnNew.addEventListener('click', newConversation);
+        els.btnDoc.addEventListener('click', () => showView(state.showDoc ? 'chat' : 'doc'));
+        els.btnClose.addEventListener('click', closeSidebar);
+
+        // Input
+        els.input.addEventListener('input', () => {
+            state.currentMessage = els.input.value;
+            els.input.style.height = 'auto';
+            els.input.style.height = Math.min(els.input.scrollHeight, 128) + 'px';
+            updateSendBtn();
+        });
+        els.input.addEventListener('keydown', (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                e.preventDefault();
+                sendMessage(els.input.value);
+            }
+        });
+
+        // Send
+        els.btnSend.addEventListener('click', () => sendMessage(els.input.value));
+
+        // Feedback
+        els.btnFeedbackContact.addEventListener('click', () => showModal('feedback'));
+        els.btnFeedbackError.addEventListener('click', () => showModal('feedback'));
+
+        // Buy credits
+        els.btnBuyCredits.addEventListener('click', () => showModal('buy'));
+        els.buyCancel.addEventListener('click', () => hideModal('buy'));
+        els.buyConfirm.addEventListener('click', buyCredits);
+        els.buyAmount.addEventListener('input', () => {
+            state.buyAmount = parseInt(els.buyAmount.value) || 10;
+            updateBuyModal();
+        });
+
+        // Feedback modal
+        els.feedbackCancel.addEventListener('click', () => hideModal('feedback'));
+        els.feedbackConfirm.addEventListener('click', sendFeedback);
+        els.feedbackDesc.addEventListener('input', () => {
+            state.feedbackDescription = els.feedbackDesc.value;
+        });
+
+        // Guide
+        els.guideSkip.addEventListener('click', guideFinish);
+        els.guideNext.addEventListener('click', guideNext);
+        els.guideFinish.addEventListener('click', guideFinish);
+
+        // Raccourcis clavier globaux
+        document.addEventListener('keydown', (e) => {
+            if (e.ctrlKey && e.key === 'k') { e.preventDefault(); toggleSidebar(); }
+            if (e.key === 'Escape' && state.isOpen) closeSidebar();
+        });
+
+        // Sauvegarder avant de quitter
+        window.addEventListener('beforeunload', saveState);
+
+        // Charger les donnees
+        loadTokenStatus();
+        loadConversations().then(() => {
+            if (state.currentConversationId) loadConversation(state.currentConversationId);
+        });
+        loadSuggestions();
+        checkFirstLaunch();
+    }
 
-// Enregistrer le composant avec Alpine si disponible
-document.addEventListener('DOMContentLoaded', () => {
-    if (window.Alpine && window.Alpine.data) {
-        window.Alpine.data('lucyAssist', lucyAssist);
+    // Lancer l'init quand le DOM est pret
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
     }
-});
+})();