@developpement/tp-chatbot-widget 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developpement/tp-chatbot-widget",
-  "version": "0.0.2",
+  "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();
@@ -34,19 +60,25 @@
       this.is_closed = false;
       this.view = 'list';
       this._initialized = false;
+      this.sound_enabled = true;
+      this.client_id = 'flix';
+      this.access_token = '';
     }
 
     static get observedAttributes() {
-      return ['access-token'];
+      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();
@@ -56,6 +88,7 @@
     }
 
     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;
@@ -67,13 +100,13 @@
       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.showConversationList();
       } else {
         // Attend 500ms que le framework passe le token
@@ -83,7 +116,6 @@
             this.access_token = token;
             this.user_info = extractUserInfo(token);
             this.user_id = this.user_info?.user_id;
-            this.applyTheme();
             this.showConversationList();
           } else {
             this.showGuestForm();
@@ -99,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) {
@@ -131,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);
@@ -140,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>
@@ -159,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>
@@ -171,7 +209,21 @@
       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();
+        }
+      });
+      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();
+        }
       });
     }
 
@@ -179,8 +231,13 @@
       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) {
@@ -194,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;
@@ -205,7 +266,10 @@
     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';
@@ -219,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>';
 
@@ -253,10 +320,21 @@
             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;">
@@ -280,7 +358,6 @@
         `;
         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>';
@@ -304,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)}`;
@@ -320,7 +398,16 @@
 
         this.last_message_count = conv.messages.length;
 
-        if (conv.status === 'closed') { this.showClosed(); return; }
+        if (conv.status === 'closed') {
+          this.showClosed();
+          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;
@@ -353,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 = '';
 
@@ -425,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();
@@ -438,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);
     }
@@ -449,16 +541,18 @@
       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">
@@ -468,6 +562,10 @@
       `;
       container.appendChild(msg_el);
       container.scrollTop = container.scrollHeight;
+
+      if ((role === 'assistant' || role === 'agent') && this.sound_enabled) {
+        playSound();
+      }
     }
 
     showTyping() {
@@ -487,8 +585,10 @@
 
     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';
@@ -499,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;
 
@@ -509,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>
@@ -535,7 +638,10 @@
 
       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;
@@ -604,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 {
@@ -619,7 +739,10 @@
         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')) {
@@ -673,4 +796,4 @@
   }
 
   customElements.define('tp-chatbot', TpChatbot);
-})();
+})();