@developpement/tp-chatbot-widget 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developpement/tp-chatbot-widget",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Chatbot widget for TravelPlanet / Makitizy",
   "main": "src/chatbot.js",
   "files": [

package/src/chatbot.js

@@ -32,7 +32,27 @@
       this.polling_interval = null;
       this.user_info = null;
       this.is_closed = false;
-      this.view = 'list'; // 'list' | 'chat'
+      this.view = 'list';
+      this._initialized = false;
+    }
+
+    static get observedAttributes() {
+      return ['access-token'];
+    }
+
+    attributeChangedCallback(name, old_val, new_val) {
+      if (name === 'access-token' && new_val && new_val !== old_val && this._initialized) {
+        this.access_token = new_val;
+        this.user_info = extractUserInfo(new_val);
+        this.user_id = this.user_info?.user_id;
+        this.applyTheme();
+
+        const guest_form = this.querySelector('#tp-guest-form');
+        if (guest_form) {
+          guest_form.remove();
+          this.showConversationList();
+        }
+      }
     }
 
     connectedCallback() {
@@ -48,14 +68,27 @@
 
       this.render();
       this.attachEvents();
+      this._initialized = true;
 
       if (this.access_token) {
         this.user_info = extractUserInfo(this.access_token);
-        this.user_id = this.user_info.user_id;
+        this.user_id = this.user_info?.user_id;
         this.applyTheme();
         this.showConversationList();
       } else {
-        this.showGuestForm();
+        // Attend 500ms que le framework passe le token
+        setTimeout(() => {
+          const token = this.getAttribute('access-token');
+          if (token) {
+            this.access_token = token;
+            this.user_info = extractUserInfo(token);
+            this.user_id = this.user_info?.user_id;
+            this.applyTheme();
+            this.showConversationList();
+          } else {
+            this.showGuestForm();
+          }
+        }, 500);
       }
     }
 
@@ -138,10 +171,7 @@
       this.querySelector('#tp-agent-btn').addEventListener('click', () => this.requestAgent());
       this.querySelector('#tp-back-btn').addEventListener('click', () => this.showConversationList());
       this.querySelector('#tp-input').addEventListener('keydown', e => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-          e.preventDefault();
-          this.sendMessage();
-        }
+        if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); this.sendMessage(); }
       });
     }
 
@@ -149,13 +179,8 @@
       this.is_open = !this.is_open;
       const window_el = this.querySelector('#tp-window');
       const bubble = this.querySelector('#tp-bubble');
-      if (this.is_open) {
-        window_el.classList.add('open');
-        bubble.textContent = '✕';
-      } else {
-        window_el.classList.remove('open');
-        bubble.textContent = '💬';
-      }
+      if (this.is_open) { window_el.classList.add('open'); bubble.textContent = '✕'; }
+      else { window_el.classList.remove('open'); bubble.textContent = '💬'; }
     }
 
     getHeaders(content_type = false) {
@@ -180,10 +205,7 @@
     async showConversationList() {
       this.view = 'list';
 
-      if (this.polling_interval) {
-        clearInterval(this.polling_interval);
-        this.polling_interval = null;
-      }
+      if (this.polling_interval) { clearInterval(this.polling_interval); this.polling_interval = null; }
 
       const subtitle = this.querySelector('#tp-subtitle');
       if (subtitle) subtitle.textContent = '🤖 Assistant virtuel';
@@ -211,18 +233,14 @@
 
         container.innerHTML = '';
 
-        // Header list
         const header_el = document.createElement('div');
         header_el.style.cssText = 'padding:16px;border-bottom:1px solid #ede8f5;';
         header_el.innerHTML = `
-          <div style="font-size:13px;font-weight:700;color:#1a1a2e;margin-bottom:4px;">
-            Bonjour ${this.user_info?.first_name || ''} 👋
-          </div>
+          <div style="font-size:13px;font-weight:700;color:#1a1a2e;margin-bottom:4px;">Bonjour ${this.user_info?.first_name || ''} 👋</div>
           <div style="font-size:12px;color:#aaa;">Vos conversations récentes</div>
         `;
         container.appendChild(header_el);
 
-        // Conversation items
         if (conversations.length === 0) {
           const empty = document.createElement('div');
           empty.style.cssText = 'padding:24px 16px;text-align:center;color:#aaa;font-size:13px;';
@@ -235,21 +253,10 @@
             item.style.cssText = 'padding:14px 16px;border-bottom:1px solid #f5f0fa;cursor:pointer;transition:background 0.15s;';
 
             const is_closed = conv.status === 'closed';
-            const status_label = is_closed
-              ? '✅ Fermée'
-              : conv.status === 'agent'
-                ? '👤 Agent'
-                : conv.status === 'waiting_agent'
-                  ? '⏳ En attente'
-                  : '🤖 Bot';
+            const status_label = is_closed ? '✅ Fermée' : conv.status === 'agent' ? '👤 Agent' : conv.status === 'waiting_agent' ? '⏳ En attente' : '🤖 Bot';
             const status_color = is_closed ? '#9ca3af' : conv.status === 'waiting_agent' ? '#f59e0b' : color;
 
-            const date = new Date(conv.updated_at).toLocaleDateString('fr-FR', {
-              day: '2-digit',
-              month: '2-digit',
-              hour: '2-digit',
-              minute: '2-digit',
-            });
+            const date = new Date(conv.updated_at).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' });
 
             item.innerHTML = `
               <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
@@ -264,7 +271,6 @@
           });
         }
 
-        // New conversation button
         const new_btn_wrap = document.createElement('div');
         new_btn_wrap.style.cssText = 'padding:16px;';
         new_btn_wrap.innerHTML = `
@@ -274,6 +280,7 @@
         `;
         new_btn_wrap.querySelector('button').addEventListener('click', () => this.startNewConversation());
         container.appendChild(new_btn_wrap);
+
       } catch (e) {
         console.error('showConversationList error:', e);
         container.innerHTML = '<div style="padding:16px;text-align:center;color:#ef4444;font-size:13px;">Erreur de chargement.</div>';
@@ -313,10 +320,7 @@
 
         this.last_message_count = conv.messages.length;
 
-        if (conv.status === 'closed') {
-          this.showClosed();
-          return;
-        }
+        if (conv.status === 'closed') { this.showClosed(); return; }
 
         if (conv.status === 'agent') {
           this.agent_mode = true;
@@ -445,18 +449,16 @@
       const container = this.querySelector('#tp-messages');
 
       const role_label =
-        role === 'user'
-          ? `👤 ${this.user_info?.first_name || 'Vous'}`
-          : role === 'agent'
-            ? '👨‍💼 Agent'
-            : role === 'system'
-              ? 'ℹ️ Info'
-              : '🤖 Assistant';
+        role === 'user' ? `👤 ${this.user_info?.first_name || 'Vous'}`
+        : role === 'agent' ? '👨‍💼 Agent'
+        : role === 'system' ? 'ℹ️ Info'
+        : '🤖 Assistant';
 
       const msg_el = document.createElement('div');
       msg_el.className = `tp-chatbot-message ${role}`;
-      const rendered_content =
-        role === 'assistant' || role === 'agent' ? (typeof marked !== 'undefined' ? marked.parse(content) : content) : content;
+      const rendered_content = (role === 'assistant' || role === 'agent')
+        ? (typeof marked !== 'undefined' ? marked.parse(content) : content)
+        : content;
 
       msg_el.innerHTML = `
         <div class="tp-chatbot-bubble-msg">
@@ -486,10 +488,7 @@
     showClosed() {
       this.is_closed = true;
 
-      if (this.polling_interval) {
-        clearInterval(this.polling_interval);
-        this.polling_interval = null;
-      }
+      if (this.polling_interval) { clearInterval(this.polling_interval); this.polling_interval = null; }
 
       const subtitle = this.querySelector('#tp-subtitle');
       if (subtitle) subtitle.textContent = '✅ Conversation terminée';
@@ -536,10 +535,7 @@
 
       const user_messages = this.messages.filter(m => m.role === 'user').length;
       if (user_messages >= 30) {
-        this.addMessage(
-          'system',
-          'Vous avez atteint la limite de 30 messages. Veuillez contacter un agent ou écrire à support@travelplanet.com.'
-        );
+        this.addMessage('system', 'Vous avez atteint la limite de 30 messages. Veuillez contacter un agent ou écrire à support@travelplanet.com.');
         const input_bar = this.querySelector('#tp-chatbot-input-bar');
         if (input_bar) input_bar.style.display = 'none';
         return;
@@ -623,10 +619,7 @@
         const server_status = conv.status;
         const is_typing = conv.is_typing || false;
 
-        if (server_status === 'closed' && !this.is_closed) {
-          this.showClosed();
-          return;
-        }
+        if (server_status === 'closed' && !this.is_closed) { this.showClosed(); return; }
 
         if (is_typing && server_status === 'agent') {
           if (!this.querySelector('#tp-agent-typing')) {
@@ -680,4 +673,4 @@
   }
 
   customElements.define('tp-chatbot', TpChatbot);
-})();
+})();