@developpement/tp-chatbot-widget 0.0.5 → 0.0.7

package/package.json

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

package/src/chatbot.css

@@ -32,7 +32,6 @@
 .tp-chatbot-window {
   position: absolute;
   bottom: 70px;
-  right: 0;
   width: 360px;
   height: 500px;
   background: white;

package/src/chatbot.js

@@ -2,10 +2,10 @@
   'use strict';
 
   const CLIENT_THEMES = {
-    flix: { primary: '#7b1fa2', name: 'Flix Corporate' },
-    sncf: { primary: '#1a6b5a', name: 'SNCF' },
+    flix: { primary: '#5cc500', name: 'Flix Corporate', position: 'left' },
+    sncf: { primary: '#1a6b5a', name: 'SNCF', position: 'right' },
   };
-  const DEFAULT_THEME = { primary: '#7b1fa2', name: 'Support' };
+  const DEFAULT_THEME = { primary: '#7b1fa2', name: 'Support', position: 'right' };
 
   function getClientTheme(client_id) {
     return CLIENT_THEMES[client_id] || DEFAULT_THEME;
@@ -100,7 +100,7 @@
       this.view = 'list';
 
       this.render();
-      this.applyTheme(); // ← couleur appliquée immédiatement, avant le token
+      this.applyTheme();
       this.attachEvents();
       this._initialized = true;
 
@@ -109,7 +109,6 @@
         this.user_id = this.user_info?.user_id;
         this.showConversationList();
       } else {
-        // Attend 500ms que le framework passe le token
         setTimeout(() => {
           const token = this.getAttribute('access-token');
           if (token) {
@@ -166,6 +165,28 @@
         .tp-conv-new-btn { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
       `;
       document.head.appendChild(style);
+
+      const position = getClientTheme(this.client_id).position || 'right';
+
+      const host = this.querySelector('.tp-chatbot-host');
+      if (host) {
+        host.style.width = '360px';
+        host.style.left = position === 'left' ? '24px' : 'auto';
+        host.style.right = position === 'left' ? 'auto' : '24px';
+      }
+
+      const bubble = this.querySelector('.tp-chatbot-bubble');
+      if (bubble) {
+        bubble.style.marginLeft = position === 'left' ? '0' : 'auto';
+        bubble.style.marginRight = position === 'left' ? 'auto' : '0';
+      }
+
+      const win = this.querySelector('.tp-chatbot-window');
+      if (win) {
+        win.style.left = '0';
+        win.style.right = 'auto';
+        win.style.transformOrigin = position === 'left' ? 'bottom left' : 'bottom right';
+      }
     }
 
     // ─── Render ───────────────────────────────────────────────────────────────
@@ -399,7 +420,7 @@
         this.last_message_count = conv.messages.length;
 
         if (conv.status === 'closed') {
-          this.showClosed();
+          this.showClosed(conv.csat || null);
           return;
         }
 
@@ -453,10 +474,14 @@
       if (input_bar) input_bar.style.display = 'flex';
 
       const agent_bar = this.querySelector('#tp-agent-bar');
-      if (agent_bar) agent_bar.style.display = 'block';
+      if (agent_bar) agent_bar.style.display = 'none';
 
       this.conversation_id = await this.createConversation();
-      this.addMessage('assistant', `Bonjour ${this.user_info?.first_name || ''} ! Comment puis-je vous aider ?`);
+      const client_name = this.client_id === 'flix' ? 'Flix Corporate' : this.client_id === 'sncf' ? 'SNCF' : this.client_id;
+      this.addMessage(
+        'assistant',
+        `Bonjour ${this.user_info?.first_name || ''} ! 👋 Je m'appelle Maria, votre assistante virtuelle ${client_name}. Comment puis-je vous aider aujourd'hui ?`
+      );
       this.polling_interval = setInterval(() => this.pollMessages(), 3000);
     }
 
@@ -530,7 +555,11 @@
       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 ?`);
+      const client_name = this.client_id === 'flix' ? 'Flix Corporate' : this.client_id === 'sncf' ? 'SNCF' : this.client_id;
+      this.addMessage(
+        'assistant',
+        `Bonjour ${first_name} ! 👋 Je m'appelle Maria, votre assistante virtuelle ${client_name}. Comment puis-je vous aider aujourd'hui ?`
+      );
       this.polling_interval = setInterval(() => this.pollMessages(), 3000);
     }
 
@@ -583,7 +612,7 @@
       if (typing) typing.remove();
     }
 
-    showClosed() {
+    showClosed(existing_csat = null) {
       this.is_closed = true;
       if (this.polling_interval) {
         clearInterval(this.polling_interval);
@@ -603,16 +632,30 @@
       if (close_bar) close_bar.style.display = 'none';
 
       const container = this.querySelector('#tp-messages');
-      if (this.querySelector('#tp-closed-banner')) return;
+
+      const existing_banner = this.querySelector('#tp-closed-banner');
+      if (existing_banner) {
+        if (existing_banner.querySelector('#tp-csat-block')) return; // déjà complet
+        existing_banner.remove(); // incomplet, on recrée
+      }
 
       const color = this.getThemeColor();
       const dark = this.shadeColor(color, -20);
 
+      const csat_html = existing_csat
+        ? `<div style="font-size:13px;color:#888;margin-bottom:14px;">${existing_csat === 'positive' ? '👍 Merci pour votre retour !' : '👎 Merci, nous allons nous améliorer.'}</div>`
+        : `<div style="font-size:12px;color:#888;margin-bottom:10px;">Cette conversation vous a-t-elle été utile ?</div>
+           <div style="display:flex;gap:10px;justify-content:center;margin-bottom:14px;">
+             <button id="tp-csat-positive" style="padding:8px 20px;border-radius:8px;border:1.5px solid #22c55e;background:white;color:#22c55e;font-size:18px;cursor:pointer;font-weight:700;">👍</button>
+             <button id="tp-csat-negative" style="padding:8px 20px;border-radius:8px;border:1.5px solid #ef4444;background:white;color:#ef4444;font-size:18px;cursor:pointer;font-weight:700;">👎</button>
+           </div>`;
+
       const banner = document.createElement('div');
       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.</div>
+        <div style="margin:16px;padding:16px;background:#f9f5ff;border:1px solid #ede8f5;border-radius:12px;text-align:center;">
+          <div style="font-size:13px;color:#1a1a2e;font-weight:600;margin-bottom:8px;">✅ Conversation clôturée</div>
+          <div id="tp-csat-block">${csat_html}</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>
@@ -624,6 +667,26 @@
       container.appendChild(banner);
       container.scrollTop = container.scrollHeight;
 
+      if (!existing_csat) {
+        const submit_csat = async rating => {
+          const csat_block = this.querySelector('#tp-csat-block');
+          if (!csat_block) return;
+          try {
+            await fetch(`${this.api_url}/chat/conversations/${this.conversation_id}/csat`, {
+              method: 'POST',
+              headers: this.getHeaders(true),
+              body: JSON.stringify({ user_id: this.user_id, rating }),
+            });
+          } catch (e) {
+            console.error('CSAT error:', e);
+          }
+          csat_block.innerHTML = `<div style="font-size:13px;color:#888;margin-bottom:14px;">${rating === 'positive' ? '👍 Merci pour votre retour !' : '👎 Merci, nous allons nous améliorer.'}</div>`;
+        };
+
+        this.querySelector('#tp-csat-positive').addEventListener('click', () => submit_csat('positive'));
+        this.querySelector('#tp-csat-negative').addEventListener('click', () => submit_csat('negative'));
+      }
+
       this.querySelector('#tp-new-conversation').addEventListener('click', () => this.startNewConversation());
       this.querySelector('#tp-back-to-list').addEventListener('click', () => this.showConversationList());
     }
@@ -663,20 +726,29 @@
         this.hideTyping();
 
         if (response.status === 429) {
-          this.addMessage('system', 'Vous avez atteint la limite de messages. Veuillez démarrer une nouvelle conversation.');
-          const input_bar = this.querySelector('#tp-chatbot-input-bar');
-          if (input_bar) input_bar.style.display = 'none';
+          this.addMessage('system', data.error?.message || 'Trop de messages. Veuillez patienter avant de réessayer.');
           this.is_loading = false;
           return;
         }
 
         this.agent_mode = data.result.agent_mode;
+        const source = data.result.source || null;
+
         const subtitle = this.querySelector('#tp-subtitle');
         if (subtitle) subtitle.textContent = this.agent_mode ? '👤 Agent humain' : '🤖 Assistant virtuel';
 
         if (data.result.reply) {
           this.addMessage(this.agent_mode ? 'agent' : 'assistant', data.result.reply);
         }
+
+        // Afficher bouton agent si fallback ou ≥ 3 messages user
+        const user_msg_count = this.messages.filter(m => m.role === 'user').length;
+        const agent_bar = this.querySelector('#tp-agent-bar');
+        if (agent_bar && !this.agent_requested && !this.agent_mode) {
+          if (source === 'fallback' || source === 'clarification' || source === 'no_match' || user_msg_count >= 5) {
+            agent_bar.style.display = 'block';
+          }
+        }
       } catch {
         this.hideTyping();
         this.addMessage('assistant', 'Une erreur est survenue. Veuillez réessayer.');
@@ -766,6 +838,10 @@
               const typing_el = this.querySelector('#tp-agent-typing');
               if (typing_el) typing_el.remove();
               this.addMessage('agent', msg.content);
+            } else if (msg.role === 'assistant') {
+              this.addMessage('assistant', msg.content);
+            } else if (msg.role === 'system') {
+              this.addMessage('system', msg.content);
             }
           });
           this.last_message_count = server_messages.length;