@developpement/tp-chatbot-widget 0.0.1

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@developpement/tp-chatbot-widget",
+  "version": "0.0.1",
+  "description": "Chatbot widget for TravelPlanet / Makitizy",
+  "main": "src/chatbot.js",
+  "files": [
+    "src/chatbot.js",
+    "src/chatbot.css"
+  ],
+  "keywords": [
+    "chatbot",
+    "widget",
+    "makitizy",
+    "travelplanet"
+  ],
+  "license": "ISC"
+}

package/src/chatbot.css

@@ -0,0 +1,305 @@
+.tp-chatbot-host {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 9999;
+  font-family:
+    'Segoe UI',
+    system-ui,
+    -apple-system,
+    sans-serif;
+}
+
+.tp-chatbot-bubble {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #7b1fa2, #9c27b0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(123, 31, 162, 0.4);
+  font-size: 24px;
+  transition: transform 0.2s;
+  margin-left: auto;
+}
+
+.tp-chatbot-bubble:hover {
+  transform: scale(1.1);
+}
+
+.tp-chatbot-window {
+  position: absolute;
+  bottom: 70px;
+  right: 0;
+  width: 360px;
+  height: 500px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(20px) scale(0.95);
+  pointer-events: none;
+  transition: all 0.25s ease;
+}
+
+.tp-chatbot-window.open {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: all;
+}
+
+.tp-chatbot-header {
+  background: linear-gradient(135deg, #7b1fa2, #9c27b0);
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+}
+
+.tp-chatbot-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  color: #7b1fa2;
+  font-size: 16px;
+  margin-right: 10px;
+}
+
+.tp-chatbot-title {
+  color: white;
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.tp-chatbot-subtitle {
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 11px;
+  margin-top: 2px;
+}
+
+.tp-chatbot-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: #f5f5f7;
+}
+
+.tp-chatbot-welcome {
+  text-align: center;
+  color: #aaa;
+  font-size: 13px;
+  padding: 20px;
+}
+
+.tp-chatbot-message {
+  display: flex;
+}
+
+.tp-chatbot-message.user {
+  justify-content: flex-end;
+}
+
+.tp-chatbot-message.assistant,
+.tp-chatbot-message.agent,
+.tp-chatbot-message.system {
+  justify-content: flex-start;
+}
+
+.tp-chatbot-bubble-msg {
+  max-width: 80%;
+  padding: 10px 14px;
+  border-radius: 16px;
+  font-size: 13px;
+  line-height: 1.5;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+}
+
+.tp-chatbot-message.user .tp-chatbot-bubble-msg {
+  background: linear-gradient(135deg, #7b1fa2, #9c27b0);
+  color: white;
+  border-radius: 16px 16px 4px 16px;
+}
+
+.tp-chatbot-message.assistant .tp-chatbot-bubble-msg {
+  background: white;
+  color: #1a1a2e;
+  border: 1px solid #ede8f5;
+  border-radius: 16px 16px 16px 4px;
+}
+
+.tp-chatbot-message.agent .tp-chatbot-bubble-msg {
+  background: #fff8e1;
+  color: #1a1a2e;
+  border: 1px solid #ffe082;
+  border-radius: 16px 16px 16px 4px;
+}
+
+.tp-chatbot-message.system .tp-chatbot-bubble-msg {
+  background: #e8f5e9;
+  color: #2e7d32;
+  border: 1px solid #c8e6c9;
+  border-radius: 12px;
+  font-size: 12px;
+}
+
+.tp-chatbot-role {
+  font-size: 10px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  color: #7b1fa2;
+}
+
+.tp-chatbot-message.user .tp-chatbot-role {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.tp-chatbot-typing {
+  display: flex;
+  gap: 4px;
+  padding: 4px 0;
+}
+
+.tp-chatbot-typing span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #7b1fa2;
+  animation: tp-typing 1.2s infinite;
+}
+
+.tp-chatbot-typing span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.tp-chatbot-typing span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes tp-typing {
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  30% {
+    transform: translateY(-6px);
+    opacity: 1;
+  }
+}
+
+.tp-chatbot-agent-bar {
+  padding: 8px 16px;
+  border-top: 1px solid #ede8f5;
+  background: white;
+}
+
+.tp-chatbot-agent-btn {
+  width: 100%;
+  padding: 8px;
+  background: none;
+  border: 1.5px solid #7b1fa2;
+  border-radius: 8px;
+  color: #7b1fa2;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.tp-chatbot-agent-btn:hover {
+  background: #7b1fa2;
+  color: white;
+}
+
+.tp-chatbot-input-bar {
+  padding: 12px 16px;
+  border-top: 1px solid #ede8f5;
+  background: white;
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+}
+
+.tp-chatbot-input {
+  flex: 1;
+  padding: 10px 14px;
+  border-radius: 10px;
+  border: 1.5px solid #ede8f5;
+  font-size: 13px;
+  resize: none;
+  font-family: inherit;
+  color: #1a1a2e;
+  background: #fafafa;
+  transition: border 0.2s;
+}
+
+.tp-chatbot-input:focus {
+  outline: none;
+  border-color: #7b1fa2;
+}
+
+.tp-chatbot-send {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #7b1fa2, #9c27b0);
+  color: white;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s;
+}
+
+.tp-chatbot-send:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.tp-chatbot-send:hover:not(:disabled) {
+  opacity: 0.85;
+}
+.tp-chatbot-markdown h1,
+.tp-chatbot-markdown h2,
+.tp-chatbot-markdown h3 {
+  font-size: 14px;
+  font-weight: 700;
+  margin: 10px 0 4px;
+  color: #1a1a2e;
+}
+
+.tp-chatbot-markdown p {
+  margin: 4px 0;
+}
+
+.tp-chatbot-markdown ul,
+.tp-chatbot-markdown ol {
+  margin: 4px 0 4px 16px;
+  padding: 0;
+}
+
+.tp-chatbot-markdown li {
+  margin: 2px 0;
+}
+
+.tp-chatbot-markdown strong {
+  font-weight: 700;
+}
+
+.tp-chatbot-markdown em {
+  font-style: italic;
+}

package/src/chatbot.js

@@ -0,0 +1,683 @@
+(function () {
+  'use strict';
+
+  function extractUserInfo(access_token) {
+    if (!access_token) return null;
+    try {
+      const payload = JSON.parse(atob(access_token.split('.')[1]));
+      return {
+        user_id: payload.userId || payload.sub,
+        first_name: payload.firstName || '',
+        last_name: payload.lastName || '',
+        company_name: payload.companyName || '',
+        language: payload.language || 'FR',
+        site_id: payload.siteId || '',
+      };
+    } catch {
+      return null;
+    }
+  }
+
+  class TpChatbot extends HTMLElement {
+    constructor() {
+      super();
+      this.is_open = false;
+      this.is_loading = false;
+      this.messages = [];
+      this.conversation_id = null;
+      this.user_id = null;
+      this.agent_mode = false;
+      this.agent_requested = false;
+      this.last_message_count = 0;
+      this.polling_interval = null;
+      this.user_info = null;
+      this.is_closed = false;
+      this.view = 'list'; // 'list' | 'chat'
+    }
+
+    connectedCallback() {
+      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;
+      this.conversation_id = null;
+      this.user_id = null;
+      this.last_message_count = 0;
+      this.polling_interval = null;
+      this.is_closed = false;
+      this.view = 'list';
+
+      this.render();
+      this.attachEvents();
+
+      if (this.access_token) {
+        this.user_info = extractUserInfo(this.access_token);
+        this.user_id = this.user_info.user_id;
+        this.applyTheme();
+        this.showConversationList();
+      } else {
+        this.showGuestForm();
+      }
+    }
+
+    disconnectedCallback() {
+      if (this.polling_interval) clearInterval(this.polling_interval);
+    }
+
+    // ─── Theme ────────────────────────────────────────────────────────────────
+
+    getThemeColor() {
+      const site_id = this.user_info?.site_id || '';
+      return site_id.startsWith('I') ? '#97d700' : '#7b1fa2';
+    }
+
+    shadeColor(hex, percent) {
+      const num = parseInt(hex.replace('#', ''), 16);
+      const r = Math.min(255, Math.max(0, (num >> 16) + percent));
+      const g = Math.min(255, Math.max(0, ((num >> 8) & 0xff) + percent));
+      const b = Math.min(255, Math.max(0, (num & 0xff) + percent));
+      return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+    }
+
+    applyTheme() {
+      const color = this.getThemeColor();
+      const dark = this.shadeColor(color, -20);
+      const existing = document.getElementById('tp-chatbot-theme');
+      if (existing) existing.remove();
+      const style = document.createElement('style');
+      style.id = 'tp-chatbot-theme';
+      style.textContent = `
+        .tp-chatbot-bubble { background: linear-gradient(135deg, ${color}, ${dark}) !important; box-shadow: 0 4px 16px ${color}66 !important; }
+        .tp-chatbot-header { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
+        .tp-chatbot-message.user .tp-chatbot-bubble-msg { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
+        .tp-chatbot-avatar { color: ${color} !important; }
+        .tp-chatbot-role { color: ${color} !important; }
+        .tp-chatbot-message.user .tp-chatbot-role { color: rgba(255,255,255,0.8) !important; }
+        .tp-chatbot-input:focus { border-color: ${color} !important; }
+        .tp-chatbot-send { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
+        .tp-chatbot-agent-btn { border-color: ${color} !important; color: ${color} !important; }
+        .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-new-btn { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
+      `;
+      document.head.appendChild(style);
+    }
+
+    // ─── Render ───────────────────────────────────────────────────────────────
+
+    render() {
+      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-subtitle" id="tp-subtitle">🤖 Assistant virtuel</div>
+              </div>
+              <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>
+            <div class="tp-chatbot-agent-bar" id="tp-agent-bar">
+              <button class="tp-chatbot-agent-btn" id="tp-agent-btn">👤 Parler à un agent</button>
+            </div>
+            <div class="tp-chatbot-input-bar" id="tp-chatbot-input-bar">
+              <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>
+          <div class="tp-chatbot-bubble" id="tp-bubble">💬</div>
+        </div>
+      `;
+    }
+
+    attachEvents() {
+      this.querySelector('#tp-bubble').addEventListener('click', () => this.toggleChat());
+      this.querySelector('#tp-send').addEventListener('click', () => this.sendMessage());
+      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();
+        }
+      });
+    }
+
+    toggleChat() {
+      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 = '💬';
+      }
+    }
+
+    getHeaders(content_type = false) {
+      const headers = {};
+      if (content_type) headers['Content-Type'] = 'application/json';
+      if (this.access_token) headers['Authorization'] = this.access_token;
+      return headers;
+    }
+
+    async createConversation() {
+      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 }),
+      });
+      const data = await response.json();
+      return data.result?.conversation_id;
+    }
+
+    // ─── Conversation List ────────────────────────────────────────────────────
+
+    async showConversationList() {
+      this.view = 'list';
+
+      if (this.polling_interval) {
+        clearInterval(this.polling_interval);
+        this.polling_interval = null;
+      }
+
+      const subtitle = this.querySelector('#tp-subtitle');
+      if (subtitle) subtitle.textContent = '🤖 Assistant virtuel';
+
+      const back_btn = this.querySelector('#tp-back-btn');
+      if (back_btn) back_btn.style.display = 'none';
+
+      const input_bar = this.querySelector('#tp-chatbot-input-bar');
+      if (input_bar) input_bar.style.display = 'none';
+
+      const agent_bar = this.querySelector('#tp-agent-bar');
+      if (agent_bar) agent_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>';
+
+      try {
+        const url = `${this.api_url}/chat/conversations?user_id=${encodeURIComponent(this.user_id)}&limit=5`;
+        const response = await fetch(url, { headers: this.getHeaders() });
+        const data = await response.json();
+        const conversations = data.result?.conversations || [];
+
+        const color = this.getThemeColor();
+        const dark = this.shadeColor(color, -20);
+
+        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: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;';
+          empty.textContent = 'Aucune conversation pour le moment.';
+          container.appendChild(empty);
+        } else {
+          conversations.forEach(conv => {
+            const item = document.createElement('div');
+            item.className = 'tp-conv-item';
+            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_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',
+            });
+
+            item.innerHTML = `
+              <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
+                <span style="font-size:13px;font-weight:600;color:${is_closed ? '#aaa' : '#1a1a2e'};">${date}</span>
+                <span style="font-size:10px;font-weight:700;color:${status_color};padding:2px 8px;border-radius:10px;background:${status_color}18;">${status_label}</span>
+              </div>
+              <div style="font-size:11px;color:#aaa;">${conv.message_count} message${conv.message_count > 1 ? 's' : ''}</div>
+            `;
+
+            item.addEventListener('click', () => this.openConversation(conv.conversation_id, is_closed));
+            container.appendChild(item);
+          });
+        }
+
+        // New conversation button
+        const new_btn_wrap = document.createElement('div');
+        new_btn_wrap.style.cssText = 'padding:16px;';
+        new_btn_wrap.innerHTML = `
+          <button class="tp-conv-new-btn" style="width:100%;padding:12px;color:white;border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;">
+            💬 Nouvelle conversation
+          </button>
+        `;
+        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>';
+      }
+    }
+
+    async openConversation(conversation_id, is_closed = false) {
+      this.view = 'chat';
+      this.conversation_id = conversation_id;
+      this.messages = [];
+      this.last_message_count = 0;
+      this.is_closed = is_closed;
+      this.agent_mode = false;
+      this.agent_requested = false;
+
+      const back_btn = this.querySelector('#tp-back-btn');
+      if (back_btn) back_btn.style.display = 'block';
+
+      const container = this.querySelector('#tp-messages');
+      container.innerHTML = '';
+
+      const input_bar = this.querySelector('#tp-chatbot-input-bar');
+      const agent_bar = this.querySelector('#tp-agent-bar');
+
+      try {
+        const url = `${this.api_url}/chat/conversations/${conversation_id}?user_id=${encodeURIComponent(this.user_id)}`;
+        const response = await fetch(url, { headers: this.getHeaders() });
+        const data = await response.json();
+        const conv = data.result?.conversation;
+        if (!conv) return;
+
+        conv.messages.forEach(msg => {
+          if (['user', 'assistant', 'agent', 'system'].includes(msg.role)) {
+            this.addMessage(msg.role, msg.content);
+          }
+        });
+
+        this.last_message_count = conv.messages.length;
+
+        if (conv.status === 'closed') {
+          this.showClosed();
+          return;
+        }
+
+        if (conv.status === 'agent') {
+          this.agent_mode = true;
+          const subtitle = this.querySelector('#tp-subtitle');
+          if (subtitle) subtitle.textContent = '👤 Agent humain';
+          if (agent_bar) agent_bar.style.display = 'none';
+          if (input_bar) input_bar.style.display = 'flex';
+        } else {
+          if (input_bar) input_bar.style.display = 'flex';
+          if (agent_bar) agent_bar.style.display = 'block';
+          const subtitle = this.querySelector('#tp-subtitle');
+          if (subtitle) subtitle.textContent = '🤖 Assistant virtuel';
+        }
+
+        this.polling_interval = setInterval(() => this.pollMessages(), 3000);
+      } catch (e) {
+        console.error('openConversation error:', e);
+      }
+    }
+
+    async startNewConversation() {
+      this.view = 'chat';
+      this.is_closed = false;
+      this.agent_mode = false;
+      this.agent_requested = false;
+      this.messages = [];
+      this.last_message_count = 0;
+      this.conversation_id = null;
+
+      const back_btn = this.querySelector('#tp-back-btn');
+      if (back_btn) back_btn.style.display = 'block';
+
+      const container = this.querySelector('#tp-messages');
+      container.innerHTML = '';
+
+      const subtitle = this.querySelector('#tp-subtitle');
+      if (subtitle) subtitle.textContent = '🤖 Assistant virtuel';
+
+      const input_bar = this.querySelector('#tp-chatbot-input-bar');
+      if (input_bar) input_bar.style.display = 'flex';
+
+      const agent_bar = this.querySelector('#tp-agent-bar');
+      if (agent_bar) agent_bar.style.display = 'block';
+
+      this.conversation_id = await this.createConversation();
+      this.addMessage('assistant', `Bonjour ${this.user_info?.first_name || ''} ! Comment puis-je vous aider ?`);
+      this.polling_interval = setInterval(() => this.pollMessages(), 3000);
+    }
+
+    // ─── Guest form ───────────────────────────────────────────────────────────
+
+    showGuestForm() {
+      const container = this.querySelector('#tp-messages');
+      if (!container) return;
+
+      const input_bar = this.querySelector('#tp-chatbot-input-bar');
+      if (input_bar) input_bar.style.display = 'none';
+
+      const agent_bar = this.querySelector('#tp-agent-bar');
+      if (agent_bar) agent_bar.style.display = 'none';
+
+      const color = this.getThemeColor();
+      const dark = this.shadeColor(color, -20);
+
+      const form_el = document.createElement('div');
+      form_el.id = 'tp-guest-form';
+      form_el.innerHTML = `
+        <div style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
+          <p style="margin: 0; font-size: 13px; color: #1a1a2e; font-weight: 600;">Avant de commencer, merci de vous identifier :</p>
+          <input id="tp-guest-firstname" type="text" placeholder="Prénom *" style="padding: 10px 14px; border-radius: 8px; border: 1.5px solid #ede8f5; font-size: 13px; font-family: inherit; outline: none;" />
+          <input id="tp-guest-company" type="text" placeholder="Nom d'entreprise *" style="padding: 10px 14px; border-radius: 8px; border: 1.5px solid #ede8f5; font-size: 13px; font-family: inherit; outline: none;" />
+          <input id="tp-guest-email" type="email" placeholder="Email *" style="padding: 10px 14px; border-radius: 8px; border: 1.5px solid #ede8f5; font-size: 13px; font-family: inherit; outline: none;" />
+          <button id="tp-guest-submit" style="padding: 10px; background: linear-gradient(135deg, ${color}, ${dark}); color: white; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;">
+            Commencer la discussion →
+          </button>
+          <p id="tp-guest-error" style="margin: 0; font-size: 12px; color: #c0392b; display: none;"></p>
+        </div>
+      `;
+
+      container.appendChild(form_el);
+      this.querySelector('#tp-guest-submit').addEventListener('click', () => this.submitGuestForm());
+    }
+
+    async submitGuestForm() {
+      const first_name = this.querySelector('#tp-guest-firstname')?.value.trim();
+      const company_name = this.querySelector('#tp-guest-company')?.value.trim();
+      const email = this.querySelector('#tp-guest-email')?.value.trim();
+      const error_el = this.querySelector('#tp-guest-error');
+
+      if (!first_name || !company_name || !email) {
+        error_el.textContent = 'Veuillez remplir tous les champs.';
+        error_el.style.display = 'block';
+        return;
+      }
+
+      const email_valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+      if (!email_valid) {
+        error_el.textContent = 'Veuillez entrer un email valide.';
+        error_el.style.display = 'block';
+        return;
+      }
+
+      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();
+
+      this.conversation_id = await this.createConversation();
+
+      const input_bar = this.querySelector('#tp-chatbot-input-bar');
+      if (input_bar) input_bar.style.display = 'flex';
+
+      const agent_bar = this.querySelector('#tp-agent-bar');
+      if (agent_bar) agent_bar.style.display = 'block';
+
+      this.addMessage('assistant', `Bonjour ${first_name} ! Comment puis-je vous aider aujourd'hui ?`);
+      this.polling_interval = setInterval(() => this.pollMessages(), 3000);
+    }
+
+    // ─── Messages ─────────────────────────────────────────────────────────────
+
+    addMessage(role, content) {
+      this.messages.push({ role, content, created_at: new Date().toISOString() });
+      const container = this.querySelector('#tp-messages');
+
+      const role_label =
+        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;
+
+      msg_el.innerHTML = `
+        <div class="tp-chatbot-bubble-msg">
+          <div class="tp-chatbot-role">${role_label}</div>
+          <div class="tp-chatbot-content tp-chatbot-markdown">${rendered_content}</div>
+        </div>
+      `;
+      container.appendChild(msg_el);
+      container.scrollTop = container.scrollHeight;
+    }
+
+    showTyping() {
+      const container = this.querySelector('#tp-messages');
+      const typing = document.createElement('div');
+      typing.className = 'tp-chatbot-message assistant';
+      typing.id = 'tp-typing';
+      typing.innerHTML = `<div class="tp-chatbot-bubble-msg"><div class="tp-chatbot-typing"><span></span><span></span><span></span></div></div>`;
+      container.appendChild(typing);
+      container.scrollTop = container.scrollHeight;
+    }
+
+    hideTyping() {
+      const typing = this.querySelector('#tp-typing');
+      if (typing) typing.remove();
+    }
+
+    showClosed() {
+      this.is_closed = true;
+
+      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';
+
+      const input_bar = this.querySelector('#tp-chatbot-input-bar');
+      if (input_bar) input_bar.style.display = 'none';
+
+      const agent_bar = this.querySelector('#tp-agent-bar');
+      if (agent_bar) agent_bar.style.display = 'none';
+
+      const container = this.querySelector('#tp-messages');
+      if (this.querySelector('#tp-closed-banner')) return;
+
+      const color = this.getThemeColor();
+      const dark = this.shadeColor(color, -20);
+
+      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 par un agent.</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%;">
+            ← Voir toutes les conversations
+          </button>
+        </div>
+      `;
+      container.appendChild(banner);
+      container.scrollTop = container.scrollHeight;
+
+      this.querySelector('#tp-new-conversation').addEventListener('click', () => this.startNewConversation());
+      this.querySelector('#tp-back-to-list').addEventListener('click', () => this.showConversationList());
+    }
+
+    // ─── Send / Poll ──────────────────────────────────────────────────────────
+
+    async sendMessage() {
+      if (this.is_closed || !this.conversation_id) return;
+      const input = this.querySelector('#tp-input');
+      const query = input.value.trim();
+      if (!query || this.is_loading) return;
+
+      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.'
+        );
+        const input_bar = this.querySelector('#tp-chatbot-input-bar');
+        if (input_bar) input_bar.style.display = 'none';
+        return;
+      }
+
+      input.value = '';
+      this.is_loading = true;
+      this.addMessage('user', query);
+      this.showTyping();
+
+      try {
+        const response = await fetch(`${this.api_url}/chat/conversations/${this.conversation_id}/messages`, {
+          method: 'POST',
+          headers: this.getHeaders(true),
+          body: JSON.stringify({ query, user_id: this.user_id, user_info: this.user_info }),
+        });
+
+        const data = await response.json();
+        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.is_loading = false;
+          return;
+        }
+
+        this.agent_mode = data.result.agent_mode;
+        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);
+        }
+      } catch {
+        this.hideTyping();
+        this.addMessage('assistant', 'Une erreur est survenue. Veuillez réessayer.');
+      }
+
+      this.is_loading = false;
+    }
+
+    async requestAgent() {
+      if (!this.conversation_id) return;
+      this.agent_requested = true;
+      const agent_bar = this.querySelector('#tp-agent-bar');
+      if (agent_bar) agent_bar.style.display = 'none';
+
+      try {
+        const response = await fetch(`${this.api_url}/chat/conversations/${this.conversation_id}/request-agent`, {
+          method: 'POST',
+          headers: this.getHeaders(true),
+          body: JSON.stringify({ user_id: this.user_id }),
+        });
+        const data = await response.json();
+        this.addMessage('system', data.result.message);
+
+        if (data.result.status === 'no_agents' || data.result.status === 'outside_hours') {
+          this.agent_requested = false;
+          if (agent_bar) agent_bar.style.display = 'block';
+        }
+      } catch {
+        this.agent_requested = false;
+        if (agent_bar) agent_bar.style.display = 'block';
+      }
+    }
+
+    async pollMessages() {
+      if (!this.conversation_id || this.is_closed || this.view !== 'chat') return;
+      try {
+        const url = `${this.api_url}/chat/conversations/${this.conversation_id}?user_id=${encodeURIComponent(this.user_id)}`;
+        const response = await fetch(url, { headers: this.getHeaders() });
+        if (!response.ok) return;
+
+        const data = await response.json();
+        const conv = data.result?.conversation;
+        if (!conv) return;
+
+        const server_messages = conv.messages || [];
+        const server_status = conv.status;
+        const is_typing = conv.is_typing || false;
+
+        if (server_status === 'closed' && !this.is_closed) {
+          this.showClosed();
+          return;
+        }
+
+        if (is_typing && server_status === 'agent') {
+          if (!this.querySelector('#tp-agent-typing')) {
+            const container = this.querySelector('#tp-messages');
+            const typing = document.createElement('div');
+            typing.className = 'tp-chatbot-message agent';
+            typing.id = 'tp-agent-typing';
+            typing.innerHTML = `<div class="tp-chatbot-bubble-msg"><div class="tp-chatbot-role">👨‍💼 Agent</div><div class="tp-chatbot-typing"><span></span><span></span><span></span></div></div>`;
+            container.appendChild(typing);
+            container.scrollTop = container.scrollHeight;
+          }
+        } else {
+          const typing_el = this.querySelector('#tp-agent-typing');
+          if (typing_el) typing_el.remove();
+        }
+
+        if (server_messages.length > this.last_message_count) {
+          const new_messages = server_messages.slice(this.last_message_count);
+          new_messages.forEach(msg => {
+            if (msg.role === 'agent') {
+              const typing_el = this.querySelector('#tp-agent-typing');
+              if (typing_el) typing_el.remove();
+              this.addMessage('agent', msg.content);
+            }
+          });
+          this.last_message_count = server_messages.length;
+        }
+
+        if (server_status === 'agent' && !this.agent_mode) {
+          this.agent_mode = true;
+          const subtitle = this.querySelector('#tp-subtitle');
+          if (subtitle) subtitle.textContent = '👤 Agent humain';
+          const agent_bar = this.querySelector('#tp-agent-bar');
+          if (agent_bar) agent_bar.style.display = 'none';
+          this.addMessage('system', 'Un agent a pris en charge votre conversation. Vous pouvez lui écrire directement.');
+          this.last_message_count = server_messages.length;
+        } else if (server_status === 'bot' && this.agent_mode) {
+          this.agent_mode = false;
+          this.agent_requested = false;
+          const subtitle = this.querySelector('#tp-subtitle');
+          if (subtitle) subtitle.textContent = '🤖 Assistant virtuel';
+          const agent_bar = this.querySelector('#tp-agent-bar');
+          if (agent_bar) agent_bar.style.display = 'block';
+          this.addMessage('system', 'Notre assistant virtuel reprend la conversation. Comment puis-je vous aider ?');
+          this.last_message_count = server_messages.length;
+        }
+      } catch (e) {
+        console.error('pollMessages error:', e);
+      }
+    }
+  }
+
+  customElements.define('tp-chatbot', TpChatbot);
+})();