@developpement/tp-chatbot-widget 0.0.1 → 0.0.4

package/package.json

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

package/src/chatbot.js

@@ -1,6 +1,16 @@
 (function () {
   'use strict';
 
+  const CLIENT_THEMES = {
+    flix: { primary: '#7b1fa2', name: 'Flix Corporate' },
+    sncf: { primary: '#1a6b5a', name: 'SNCF' },
+  };
+  const DEFAULT_THEME = { primary: '#7b1fa2', name: 'Support' };
+
+  function getClientTheme(client_id) {
+    return CLIENT_THEMES[client_id] || DEFAULT_THEME;
+  }
+
   function extractUserInfo(access_token) {
     if (!access_token) return null;
     try {
@@ -18,6 +28,22 @@
     }
   }
 
+  function playSound() {
+    try {
+      const ctx = new (window.AudioContext || window.webkitAudioContext)();
+      const oscillator = ctx.createOscillator();
+      const gain = ctx.createGain();
+      oscillator.connect(gain);
+      gain.connect(ctx.destination);
+      oscillator.frequency.value = 880;
+      oscillator.type = 'sine';
+      gain.gain.setValueAtTime(0.2, ctx.currentTime);
+      gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.4);
+      oscillator.start(ctx.currentTime);
+      oscillator.stop(ctx.currentTime + 0.4);
+    } catch {}
+  }
+
   class TpChatbot extends HTMLElement {
     constructor() {
       super();
@@ -32,10 +58,37 @@
       this.polling_interval = null;
       this.user_info = null;
       this.is_closed = false;
-      this.view = 'list'; // 'list' | 'chat'
+      this.view = 'list';
+      this._initialized = false;
+      this.sound_enabled = true;
+      this.client_id = 'flix';
+      this.access_token = '';
+    }
+
+    static get observedAttributes() {
+      return ['access-token', 'client-id'];
+    }
+
+    attributeChangedCallback(name, old_val, new_val) {
+      if (name === 'client-id' && new_val && new_val !== old_val) {
+        this.client_id = new_val;
+        if (this._initialized) this.applyTheme();
+      }
+      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() {
+      this.client_id = this.getAttribute('client-id') || 'flix';
       this.access_token = this.getAttribute('access-token') || '';
       this.api_url = this.getAttribute('api-url') || 'https://api.tst.travelplanet.click/chatbot/v1';
       this.user_info = null;
@@ -47,15 +100,27 @@
       this.view = 'list';
 
       this.render();
+      this.applyTheme(); // ← couleur appliquée immédiatement, avant le token
       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.applyTheme();
+        this.user_id = this.user_info?.user_id;
         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.showConversationList();
+          } else {
+            this.showGuestForm();
+          }
+        }, 500);
       }
     }
 
@@ -66,8 +131,7 @@
     // ─── Theme ────────────────────────────────────────────────────────────────
 
     getThemeColor() {
-      const site_id = this.user_info?.site_id || '';
-      return site_id.startsWith('I') ? '#97d700' : '#7b1fa2';
+      return getClientTheme(this.client_id).primary;
     }
 
     shadeColor(hex, percent) {
@@ -98,7 +162,7 @@
         .tp-chatbot-agent-btn:hover { background: ${color} !important; color: white !important; }
         .tp-chatbot-typing span { background: ${color} !important; }
         #tp-new-conversation { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
-        .tp-conv-item:hover { background: #f9f0ff !important; }
+        .tp-conv-item:hover { background: ${color}11 !important; }
         .tp-conv-new-btn { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
       `;
       document.head.appendChild(style);
@@ -107,15 +171,17 @@
     // ─── Render ───────────────────────────────────────────────────────────────
 
     render() {
+      const theme = getClientTheme(this.client_id);
       this.innerHTML = `
         <div class="tp-chatbot-host">
           <div class="tp-chatbot-window" id="tp-window">
             <div class="tp-chatbot-header" id="tp-header">
               <div class="tp-chatbot-avatar">M</div>
               <div style="flex:1">
-                <div class="tp-chatbot-title">Makitizy Support</div>
+                <div class="tp-chatbot-title">${theme.name} Support</div>
                 <div class="tp-chatbot-subtitle" id="tp-subtitle">🤖 Assistant virtuel</div>
               </div>
+              <button id="tp-sound-btn" style="background:none;border:none;color:white;font-size:16px;cursor:pointer;padding:4px 8px;" title="Activer/désactiver le son">🔔</button>
               <button id="tp-back-btn" style="display:none;background:none;border:none;color:white;font-size:18px;cursor:pointer;padding:4px 8px;">←</button>
             </div>
             <div class="tp-chatbot-messages" id="tp-messages"></div>
@@ -126,6 +192,11 @@
               <textarea class="tp-chatbot-input" id="tp-input" placeholder="Écrivez votre message..." rows="1"></textarea>
               <button class="tp-chatbot-send" id="tp-send">➤</button>
             </div>
+            <div id="tp-close-bar" style="padding:8px 12px;border-top:1px solid #ede8f5;text-align:center;display:none;">
+              <button id="tp-close-btn" style="background:none;border:1px solid #e5e7eb;border-radius:8px;padding:6px 16px;font-size:12px;color:#9ca3af;cursor:pointer;font-weight:600;">
+                ✅ Terminer la conversation
+              </button>
+            </div>
           </div>
           <div class="tp-chatbot-bubble" id="tp-bubble">💬</div>
         </div>
@@ -143,6 +214,17 @@
           this.sendMessage();
         }
       });
+      this.querySelector('#tp-sound-btn').addEventListener('click', () => {
+        this.sound_enabled = !this.sound_enabled;
+        const btn = this.querySelector('#tp-sound-btn');
+        btn.textContent = this.sound_enabled ? '🔔' : '🔕';
+        btn.title = this.sound_enabled ? 'Désactiver le son' : 'Activer le son';
+      });
+      this.querySelector('#tp-close-btn').addEventListener('click', () => {
+        if (window.confirm('Voulez-vous terminer cette conversation ?')) {
+          this.closeByUser();
+        }
+      });
     }
 
     toggleChat() {
@@ -169,7 +251,11 @@
       const response = await fetch(`${this.api_url}/chat/conversations`, {
         method: 'POST',
         headers: this.getHeaders(true),
-        body: JSON.stringify({ user_id: this.user_id, user_info: this.user_info }),
+        body: JSON.stringify({
+          user_id: this.user_id,
+          user_info: this.user_info,
+          client_id: this.client_id,
+        }),
       });
       const data = await response.json();
       return data.result?.conversation_id;
@@ -197,6 +283,9 @@
       const agent_bar = this.querySelector('#tp-agent-bar');
       if (agent_bar) agent_bar.style.display = 'none';
 
+      const close_bar = this.querySelector('#tp-close-bar');
+      if (close_bar) close_bar.style.display = 'none';
+
       const container = this.querySelector('#tp-messages');
       container.innerHTML = '<div style="padding:16px;text-align:center;color:#aaa;font-size:12px;">Chargement...</div>';
 
@@ -211,18 +300,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;';
@@ -264,7 +349,6 @@
           });
         }
 
-        // New conversation button
         const new_btn_wrap = document.createElement('div');
         new_btn_wrap.style.cssText = 'padding:16px;';
         new_btn_wrap.innerHTML = `
@@ -297,6 +381,7 @@
 
       const input_bar = this.querySelector('#tp-chatbot-input-bar');
       const agent_bar = this.querySelector('#tp-agent-bar');
+      const close_bar = this.querySelector('#tp-close-bar');
 
       try {
         const url = `${this.api_url}/chat/conversations/${conversation_id}?user_id=${encodeURIComponent(this.user_id)}`;
@@ -318,6 +403,12 @@
           return;
         }
 
+        if (conv.status === 'bot' || conv.status === 'waiting_agent') {
+          if (close_bar) close_bar.style.display = 'block';
+        } else {
+          if (close_bar) close_bar.style.display = 'none';
+        }
+
         if (conv.status === 'agent') {
           this.agent_mode = true;
           const subtitle = this.querySelector('#tp-subtitle');
@@ -349,6 +440,9 @@
       const back_btn = this.querySelector('#tp-back-btn');
       if (back_btn) back_btn.style.display = 'block';
 
+      const close_bar = this.querySelector('#tp-close-bar');
+      if (close_bar) close_bar.style.display = 'block';
+
       const container = this.querySelector('#tp-messages');
       container.innerHTML = '';
 
@@ -421,7 +515,6 @@
 
       this.user_info = { user_id: `guest-${email}`, first_name, last_name: '', company_name, email, language: 'FR', site_id: '' };
       this.user_id = this.user_info.user_id;
-      this.applyTheme();
 
       const form_el = this.querySelector('#tp-guest-form');
       if (form_el) form_el.remove();
@@ -434,6 +527,9 @@
       const agent_bar = this.querySelector('#tp-agent-bar');
       if (agent_bar) agent_bar.style.display = 'block';
 
+      const close_bar = this.querySelector('#tp-close-bar');
+      if (close_bar) close_bar.style.display = 'block';
+
       this.addMessage('assistant', `Bonjour ${first_name} ! Comment puis-je vous aider aujourd'hui ?`);
       this.polling_interval = setInterval(() => this.pollMessages(), 3000);
     }
@@ -466,6 +562,10 @@
       `;
       container.appendChild(msg_el);
       container.scrollTop = container.scrollHeight;
+
+      if ((role === 'assistant' || role === 'agent') && this.sound_enabled) {
+        playSound();
+      }
     }
 
     showTyping() {
@@ -485,7 +585,6 @@
 
     showClosed() {
       this.is_closed = true;
-
       if (this.polling_interval) {
         clearInterval(this.polling_interval);
         this.polling_interval = null;
@@ -500,6 +599,9 @@
       const agent_bar = this.querySelector('#tp-agent-bar');
       if (agent_bar) agent_bar.style.display = 'none';
 
+      const close_bar = this.querySelector('#tp-close-bar');
+      if (close_bar) close_bar.style.display = 'none';
+
       const container = this.querySelector('#tp-messages');
       if (this.querySelector('#tp-closed-banner')) return;
 
@@ -510,11 +612,11 @@
       banner.id = 'tp-closed-banner';
       banner.innerHTML = `
         <div style="margin:16px;padding:16px;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;text-align:center;">
-          <div style="font-size:13px;color:#ef4444;font-weight:600;margin-bottom:12px;">✅ Cette conversation a été clôturée par un agent.</div>
+          <div style="font-size:13px;color:#ef4444;font-weight:600;margin-bottom:12px;">✅ Cette conversation a été clôturée.</div>
           <button id="tp-new-conversation" style="padding:10px 20px;background:linear-gradient(135deg,${color},${dark});color:white;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:8px;width:100%;">
             💬 Nouvelle conversation
           </button>
-          <button id="tp-back-to-list" style="padding:8px 20px;background:none;color:#7B1FA2;border:1px solid #ede8f5;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;width:100%;">
+          <button id="tp-back-to-list" style="padding:8px 20px;background:none;color:${color};border:1px solid #ede8f5;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;width:100%;">
             ← Voir toutes les conversations
           </button>
         </div>
@@ -608,6 +710,20 @@
       }
     }
 
+    async closeByUser() {
+      if (!this.conversation_id || this.is_closed) return;
+      try {
+        const response = await fetch(`${this.api_url}/chat/conversations/${this.conversation_id}/close`, {
+          method: 'POST',
+          headers: this.getHeaders(true),
+          body: JSON.stringify({ user_id: this.user_id }),
+        });
+        if (response.ok) this.showClosed();
+      } catch (e) {
+        console.error('closeByUser error:', e);
+      }
+    }
+
     async pollMessages() {
       if (!this.conversation_id || this.is_closed || this.view !== 'chat') return;
       try {