@developpement/tp-chatbot-widget 0.0.8 → 0.0.10

package/src/chatbot.js

@@ -1,9 +1,42 @@
 (function () {
   'use strict';
 
+  // ─── SVG Icons ──────────────────────────────────────────────────────────────
+  // viewBox 0 0 20 20 | stroke-width 1.6 | round caps & joins | fill none | stroke currentColor
+
+  const ICONS = {
+    bell: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2a6 6 0 0 0-6 6c0 3.5-1.5 5-1.5 5h15s-1.5-1.5-1.5-5a6 6 0 0 0-6-6Z"/><path d="M11.73 17a2 2 0 0 1-3.46 0"/></svg>`,
+    bell_off: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4 16 16M8.27 3.05A6 6 0 0 1 16 8c0 2.2.5 3.7 1 4.7M6.15 6.17A5.97 5.97 0 0 0 4 8c0 3.5-1.5 5-1.5 5H14M11.73 17a2 2 0 0 1-3.46 0"/></svg>`,
+    minimize: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="10" x2="16" y2="10"/></svg>`,
+    restore: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="3" width="10" height="10" rx="1.5"/><path d="M3 7v10h10"/></svg>`,
+    back: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M13 16 7 10l6-6"/></svg>`,
+    close: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"/></svg>`,
+    user: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.5"/><path d="M3 17c0-3.3 3.1-6 7-6s7 2.7 7 6"/></svg>`,
+    agent: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10a7 7 0 1 1 14 0"/><path d="M2 10h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z"/><path d="M16 10h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z"/><path d="M16 13v1a3 3 0 0 1-3 3h-2"/></svg>`,
+    bot: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="14" height="10" rx="2"/><path d="M7 11h.01M13 11h.01M7 14.5h6"/><circle cx="10" cy="4" r="1.5"/><line x1="10" y1="5.5" x2="10" y2="7"/></svg>`,
+    send: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3 3 9l5 2 2 5 7-13Z"/><path d="m8 11 4-4"/></svg>`,
+    attach: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10.5 9 18a5 5 0 0 1-7-7l8.5-8.5a3 3 0 0 1 4.24 4.24L6 15.5a1 1 0 0 1-1.42-1.42L12 7"/></svg>`,
+    helpful: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10V17M7 10l3-7a3 3 0 0 1 3 3v2h3.5a1 1 0 0 1 1 1.15l-.9 5A1 1 0 0 1 15.6 17H7"/><rect x="3" y="10" width="4" height="7" rx="1"/></svg>`,
+    not_helpful: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M13 10V3M13 10l-3 7a3 3 0 0 1-3-3v-2H3.5a1 1 0 0 1-1-1.15l.9-5A1 1 0 0 1 4.4 3H13"/><rect x="13" y="3" width="4" height="7" rx="1"/></svg>`,
+    check: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10l5 5 7-8"/></svg>`,
+    msg_plus: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2l2 3 2-3h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z"/><path d="M10 7v5M7.5 9.5h5"/></svg>`,
+    msg: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2l2 3 2-3h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z"/></svg>`,
+  };
+
+  function icon(name, size = 18, extra_style = '') {
+    const svg = ICONS[name];
+    if (!svg) return '';
+    return svg.replace(
+      '<svg ',
+      `<svg width="${size}" height="${size}" style="display:inline-block;vertical-align:middle;flex-shrink:0;${extra_style}" `
+    );
+  }
+
+  // ─── Clients ─────────────────────────────────────────────────────────────────
+
   const CLIENT_THEMES = {
     flix: {
-      primary: '#73d700',
+      primary: '#97d700',
       name: 'Flix Corporate',
       position: 'left',
       suggestions: [
@@ -83,7 +116,6 @@
   };
 
   const DEFAULT_THEME = { primary: '#7b1fa2', name: 'Support', position: 'right', suggestions: [] };
-
   const WINDOW_WIDTH = '380px';
   const WINDOW_HEIGHT = '580px';
 
@@ -111,19 +143,21 @@
   function playSound() {
     try {
       const ctx = new (window.AudioContext || window.webkitAudioContext)();
-      const oscillator = ctx.createOscillator();
+      const osc = ctx.createOscillator();
       const gain = ctx.createGain();
-      oscillator.connect(gain);
+      osc.connect(gain);
       gain.connect(ctx.destination);
-      oscillator.frequency.value = 880;
-      oscillator.type = 'sine';
+      osc.frequency.value = 880;
+      osc.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);
+      osc.start(ctx.currentTime);
+      osc.stop(ctx.currentTime + 0.4);
     } catch {}
   }
 
+  // ─── Component ───────────────────────────────────────────────────────────────
+
   class TpChatbot extends HTMLElement {
     constructor() {
       super();
@@ -169,6 +203,30 @@
       }
     }
 
+    async fetchTheme() {
+      try {
+        const response = await fetch(`${this.api_url}/chat/config/theme/${this.client_id}`);
+        if (!response.ok) return;
+        const data = await response.json();
+        const t = data.result?.result;
+        if (!t) return;
+        if (CLIENT_THEMES[this.client_id]) {
+          if (t.primary) CLIENT_THEMES[this.client_id].primary = t.primary;
+          if (t.position) CLIENT_THEMES[this.client_id].position = t.position;
+          if (t.name) CLIENT_THEMES[this.client_id].name = t.name;
+        } else {
+          CLIENT_THEMES[this.client_id] = {
+            primary: t.primary || DEFAULT_THEME.primary,
+            position: t.position || DEFAULT_THEME.position,
+            name: t.name || DEFAULT_THEME.name,
+            suggestions: [],
+          };
+        }
+      } catch (e) {
+        console.warn('[tp-chatbot] fetchTheme failed, using defaults:', e.message);
+      }
+    }
+
     connectedCallback() {
       this.client_id = this.getAttribute('client-id') || 'flix';
       this.access_token = this.getAttribute('access-token') || '';
@@ -183,194 +241,266 @@
       this.is_fullscreen = false;
       this.is_minimized = false;
 
-      this.render();
-      this.applyTheme();
-      this.attachEvents();
-      this._initialized = true;
+      this.fetchTheme().then(() => {
+        this.render();
+        this.applyTheme();
+        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.showConversationList();
-      } else {
         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);
-      }
+          this.toggleChat();
+        }, 300);
+
+        if (this.access_token) {
+          this.user_info = extractUserInfo(this.access_token);
+          this.user_id = this.user_info?.user_id;
+          this.showConversationList();
+        } else {
+          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);
+        }
+      });
     }
 
     disconnectedCallback() {
       if (this.polling_interval) clearInterval(this.polling_interval);
     }
 
-    // ─── i18n ─────────────────────────────────────────────────────────────────
+    // ─── i18n ──────────────────────────────────────────────────────────────────
 
     getMessages() {
       const lang = (this.user_info?.language || 'EN').toUpperCase();
       const msgs = {
         FR: {
-          closed: '✅ Conversation clôturée',
+          closed: 'Conversation clôturée',
           csat_question: 'Cette conversation vous a-t-elle été utile ?',
-          csat_positive: '👍 Merci pour votre retour !',
-          csat_negative: '👎 Merci, nous allons nous améliorer.',
-          new_conv: '💬 Nouvelle conversation',
-          back_to_list: '← Voir toutes les conversations',
+          csat_positive: 'Merci pour votre retour !',
+          csat_negative: 'Merci, nous allons nous améliorer.',
+          new_conv: 'Nouvelle conversation',
+          back_to_list: 'Voir toutes les conversations',
           agent_taken: 'Un agent a pris en charge votre conversation. Vous pouvez lui écrire directement.',
           agent_released: 'Notre assistant virtuel reprend la conversation. Comment puis-je vous aider ?',
           close_confirm: 'Voulez-vous terminer cette conversation ?',
-          terminated: '✅ Conversation terminée',
-          virtual: '🤖 Assistant virtuel',
-          human_agent: '👤 Agent humain',
+          terminated: 'Conversation terminée',
+          virtual: 'Assistant virtuel',
+          human_agent: 'Agent humain',
           loading: 'Chargement...',
           no_conv: 'Aucune conversation pour le moment.',
-          new_conv_btn: '💬 Nouvelle conversation',
+          new_conv_btn: 'Nouvelle conversation',
           error_load: 'Erreur de chargement.',
           recent_conv: 'Vos conversations récentes',
           hello: 'Bonjour',
-          close_btn: '✅ Terminer la conversation',
-          speak_agent: '👤 Parler à un agent',
+          close_btn: 'Terminer la conversation',
+          speak_agent: 'Parler à un agent',
           write_msg: 'Écrivez votre message...',
           limit_reached: 'Vous avez atteint la limite de 30 messages. Veuillez contacter un agent ou écrire à support@travelplanet.com.',
           too_many: 'Trop de messages. Veuillez patienter avant de réessayer.',
           error_occurred: 'Une erreur est survenue. Veuillez réessayer.',
+          outside_hours: next => `Notre support est actuellement fermé. Prochain créneau : ${next}.`,
+          no_agents: 'Aucun agent disponible pour le moment. Veuillez réessayer plus tard.',
+          waiting_agent: 'Votre demande a été transmise. Un agent va prendre en charge votre conversation.',
+          waiting_agent_already: "Vous êtes déjà en file d'attente. Merci de patienter.",
+          agent_already: 'Un agent gère déjà votre conversation.',
+          suggest_agent_escalation: "Je n'arrive pas à trouver une réponse adaptée. Souhaitez-vous parler à un agent ?",
+          status_closed: 'Fermé',
+          status_agent: 'Agent',
+          status_waiting: 'En attente',
+          status_bot: 'Bot',
+          messages: 'message',
         },
         EN: {
-          closed: '✅ Conversation closed',
+          closed: 'Conversation closed',
           csat_question: 'Was this conversation helpful?',
-          csat_positive: '👍 Thank you for your feedback!',
-          csat_negative: '👎 Thank you, we will improve.',
-          new_conv: '💬 New conversation',
-          back_to_list: '← Back to conversations',
+          csat_positive: 'Thank you for your feedback!',
+          csat_negative: 'Thank you, we will improve.',
+          new_conv: 'New conversation',
+          back_to_list: 'Back to conversations',
           agent_taken: 'An agent has taken over your conversation. You can now write to them directly.',
           agent_released: 'Our virtual assistant is back. How can I help you?',
           close_confirm: 'Do you want to end this conversation?',
-          terminated: '✅ Conversation ended',
-          virtual: '🤖 Virtual assistant',
-          human_agent: '👤 Human agent',
+          terminated: 'Conversation ended',
+          virtual: 'Virtual assistant',
+          human_agent: 'Human agent',
           loading: 'Loading...',
           no_conv: 'No conversations yet.',
-          new_conv_btn: '💬 New conversation',
+          new_conv_btn: 'New conversation',
           error_load: 'Loading error.',
           recent_conv: 'Your recent conversations',
           hello: 'Hello',
-          close_btn: '✅ End conversation',
-          speak_agent: '👤 Talk to an agent',
+          close_btn: 'End conversation',
+          speak_agent: 'Talk to an agent',
           write_msg: 'Write your message...',
           limit_reached: 'You have reached the 30 message limit. Please contact an agent or write to support@travelplanet.com.',
           too_many: 'Too many messages. Please wait before retrying.',
           error_occurred: 'An error occurred. Please try again.',
+          outside_hours: next => `Our support is currently closed. Next available slot: ${next}.`,
+          no_agents: 'No agent available at the moment. Please try again later.',
+          waiting_agent: 'Your request has been sent. An agent will take over shortly.',
+          waiting_agent_already: 'You are already in the queue. Please wait.',
+          agent_already: 'An agent is already handling your conversation.',
+          suggest_agent_escalation: "I'm having trouble finding a suitable answer. Would you like to speak to an agent?",
+          status_closed: 'Closed',
+          status_agent: 'Agent',
+          status_waiting: 'Waiting',
+          status_bot: 'Bot',
+          messages: 'message',
         },
         DE: {
-          closed: '✅ Gespräch beendet',
+          closed: 'Gespräch beendet',
           csat_question: 'War dieses Gespräch hilfreich?',
-          csat_positive: '👍 Vielen Dank für Ihr Feedback!',
-          csat_negative: '👎 Danke, wir werden uns verbessern.',
-          new_conv: '💬 Neues Gespräch',
-          back_to_list: '← Zurück zur Liste',
+          csat_positive: 'Vielen Dank für Ihr Feedback!',
+          csat_negative: 'Danke, wir werden uns verbessern.',
+          new_conv: 'Neues Gespräch',
+          back_to_list: 'Zurück zur Liste',
           agent_taken: 'Ein Agent hat Ihr Gespräch übernommen. Sie können ihm jetzt direkt schreiben.',
           agent_released: 'Unser virtueller Assistent ist zurück. Wie kann ich Ihnen helfen?',
           close_confirm: 'Möchten Sie das Gespräch beenden?',
-          terminated: '✅ Gespräch beendet',
-          virtual: '🤖 Virtueller Assistent',
-          human_agent: '👤 Menschlicher Agent',
+          terminated: 'Gespräch beendet',
+          virtual: 'Virtueller Assistent',
+          human_agent: 'Menschlicher Agent',
           loading: 'Laden...',
           no_conv: 'Noch keine Gespräche.',
-          new_conv_btn: '💬 Neues Gespräch',
+          new_conv_btn: 'Neues Gespräch',
           error_load: 'Ladefehler.',
           recent_conv: 'Ihre letzten Gespräche',
           hello: 'Hallo',
-          close_btn: '✅ Gespräch beenden',
-          speak_agent: '👤 Mit einem Agenten sprechen',
+          close_btn: 'Gespräch beenden',
+          speak_agent: 'Mit einem Agenten sprechen',
           write_msg: 'Schreiben Sie Ihre Nachricht...',
           limit_reached: 'Sie haben das Limit von 30 Nachrichten erreicht.',
           too_many: 'Zu viele Nachrichten. Bitte warten Sie.',
           error_occurred: 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.',
+          outside_hours: next => `Unser Support ist derzeit geschlossen. Nächster Termin: ${next}.`,
+          no_agents: 'Derzeit kein Agent verfügbar. Bitte versuchen Sie es später.',
+          waiting_agent: 'Ihre Anfrage wurde übermittelt. Ein Agent übernimmt gleich.',
+          waiting_agent_already: 'Sie sind bereits in der Warteschlange. Bitte warten.',
+          agent_already: 'Ein Agent betreut bereits Ihr Gespräch.',
+          suggest_agent_escalation: 'Ich kann keine passende Antwort finden. Möchten Sie mit einem Agenten sprechen?',
+          status_closed: 'Geschlossen',
+          status_agent: 'Agent',
+          status_waiting: 'Wartend',
+          status_bot: 'Bot',
+          messages: 'Nachricht',
         },
         ES: {
-          closed: '✅ Conversación cerrada',
+          closed: 'Conversación cerrada',
           csat_question: '¿Fue útil esta conversación?',
-          csat_positive: '👍 ¡Gracias por su opinión!',
-          csat_negative: '👎 Gracias, mejoraremos.',
-          new_conv: '💬 Nueva conversación',
-          back_to_list: '← Volver a las conversaciones',
+          csat_positive: '¡Gracias por su opinión!',
+          csat_negative: 'Gracias, mejoraremos.',
+          new_conv: 'Nueva conversación',
+          back_to_list: 'Volver a las conversaciones',
           agent_taken: 'Un agente ha tomado su conversación. Ahora puede escribirle directamente.',
           agent_released: 'Nuestro asistente virtual ha vuelto. ¿En qué puedo ayudarle?',
           close_confirm: '¿Desea finalizar esta conversación?',
-          terminated: '✅ Conversación terminada',
-          virtual: '🤖 Asistente virtual',
-          human_agent: '👤 Agente humano',
+          terminated: 'Conversación terminada',
+          virtual: 'Asistente virtual',
+          human_agent: 'Agente humano',
           loading: 'Cargando...',
           no_conv: 'No hay conversaciones por el momento.',
-          new_conv_btn: '💬 Nueva conversación',
+          new_conv_btn: 'Nueva conversación',
           error_load: 'Error de carga.',
           recent_conv: 'Sus conversaciones recientes',
           hello: 'Hola',
-          close_btn: '✅ Finalizar conversación',
-          speak_agent: '👤 Hablar con un agente',
+          close_btn: 'Finalizar conversación',
+          speak_agent: 'Hablar con un agente',
           write_msg: 'Escriba su mensaje...',
           limit_reached: 'Ha alcanzado el límite de 30 mensajes.',
           too_many: 'Demasiados mensajes. Por favor espere.',
           error_occurred: 'Se produjo un error. Por favor, inténtelo de nuevo.',
+          outside_hours: next => `Nuestro soporte está cerrado. Próximo horario: ${next}.`,
+          no_agents: 'No hay agentes disponibles. Inténtelo más tarde.',
+          waiting_agent: 'Su solicitud ha sido enviada. Un agente le atenderá pronto.',
+          waiting_agent_already: 'Ya está en la cola de espera. Por favor, espere.',
+          agent_already: 'Un agente ya está gestionando su conversación.',
+          suggest_agent_escalation: 'No encuentro una respuesta adecuada. ¿Desea hablar con un agente?',
+          status_closed: 'Cerrado',
+          status_agent: 'Agente',
+          status_waiting: 'Esperando',
+          status_bot: 'Bot',
+          messages: 'mensaje',
         },
         IT: {
-          closed: '✅ Conversazione chiusa',
+          closed: 'Conversazione chiusa',
           csat_question: 'Questa conversazione è stata utile?',
-          csat_positive: '👍 Grazie per il suo feedback!',
-          csat_negative: '👎 Grazie, miglioreremo.',
-          new_conv: '💬 Nuova conversazione',
-          back_to_list: '← Torna alle conversazioni',
+          csat_positive: 'Grazie per il suo feedback!',
+          csat_negative: 'Grazie, miglioreremo.',
+          new_conv: 'Nuova conversazione',
+          back_to_list: 'Torna alle conversazioni',
           agent_taken: 'Un agente ha preso in carico la sua conversazione.',
           agent_released: 'Il nostro assistente virtuale è tornato. Come posso aiutarla?',
           close_confirm: 'Vuole terminare questa conversazione?',
-          terminated: '✅ Conversazione terminata',
-          virtual: '🤖 Assistente virtuale',
-          human_agent: '👤 Agente umano',
+          terminated: 'Conversazione terminata',
+          virtual: 'Assistente virtuale',
+          human_agent: 'Agente umano',
           loading: 'Caricamento...',
           no_conv: 'Nessuna conversazione per il momento.',
-          new_conv_btn: '💬 Nuova conversazione',
+          new_conv_btn: 'Nuova conversazione',
           error_load: 'Errore di caricamento.',
           recent_conv: 'Le sue conversazioni recenti',
           hello: 'Ciao',
-          close_btn: '✅ Termina conversazione',
-          speak_agent: '👤 Parla con un agente',
+          close_btn: 'Termina conversazione',
+          speak_agent: 'Parla con un agente',
           write_msg: 'Scrivi il tuo messaggio...',
           limit_reached: 'Hai raggiunto il limite di 30 messaggi.',
           too_many: 'Troppi messaggi. Attendere prego.',
           error_occurred: 'Si è verificato un errore. Riprova.',
+          outside_hours: next => `Il supporto è chiuso. Prossima disponibilità: ${next}.`,
+          no_agents: 'Nessun agente disponibile. Riprova più tardi.',
+          waiting_agent: 'Richiesta inviata. Un agente prenderà in carico la conversazione.',
+          waiting_agent_already: 'È già in coda. Attenda.',
+          agent_already: 'Un agente sta già gestendo la conversazione.',
+          suggest_agent_escalation: 'Non riesco a trovare una risposta adeguata. Desidera parlare con un agente?',
+          status_closed: 'Chiuso',
+          status_agent: 'Agente',
+          status_waiting: 'Attesa',
+          status_bot: 'Bot',
+          messages: 'messaggio',
         },
         NL: {
-          closed: '✅ Gesprek gesloten',
+          closed: 'Gesprek gesloten',
           csat_question: 'Was dit gesprek nuttig?',
-          csat_positive: '👍 Bedankt voor uw feedback!',
-          csat_negative: '👎 Bedankt, we zullen verbeteren.',
-          new_conv: '💬 Nieuw gesprek',
-          back_to_list: '← Terug naar gesprekken',
+          csat_positive: 'Bedankt voor uw feedback!',
+          csat_negative: 'Bedankt, we zullen verbeteren.',
+          new_conv: 'Nieuw gesprek',
+          back_to_list: 'Terug naar gesprekken',
           agent_taken: 'Een agent heeft uw gesprek overgenomen.',
           agent_released: 'Onze virtuele assistent is terug. Hoe kan ik u helpen?',
           close_confirm: 'Wilt u dit gesprek beëindigen?',
-          terminated: '✅ Gesprek beëindigd',
-          virtual: '🤖 Virtuele assistent',
-          human_agent: '👤 Menselijke agent',
+          terminated: 'Gesprek beëindigd',
+          virtual: 'Virtuele assistent',
+          human_agent: 'Menselijke agent',
           loading: 'Laden...',
           no_conv: 'Geen gesprekken op dit moment.',
-          new_conv_btn: '💬 Nieuw gesprek',
-          error_load: 'Laadфout.',
+          new_conv_btn: 'Nieuw gesprek',
+          error_load: 'Laadout.',
           recent_conv: 'Uw recente gesprekken',
           hello: 'Hallo',
-          close_btn: '✅ Gesprek beëindigen',
-          speak_agent: '👤 Praat met een agent',
+          close_btn: 'Gesprek beëindigen',
+          speak_agent: 'Praat met een agent',
           write_msg: 'Schrijf uw bericht...',
           limit_reached: 'U heeft de limiet van 30 berichten bereikt.',
           too_many: 'Te veel berichten. Wacht even.',
           error_occurred: 'Er is een fout opgetreden. Probeer het opnieuw.',
+          outside_hours: next => `Onze support is gesloten. Volgende beschikbare tijd: ${next}.`,
+          no_agents: 'Geen agent beschikbaar. Probeer het later opnieuw.',
+          waiting_agent: 'Uw verzoek is verzonden. Een agent neemt het gesprek over.',
+          waiting_agent_already: 'U staat al in de wachtrij. Even geduld.',
+          agent_already: 'Een agent beheert uw gesprek al.',
+          suggest_agent_escalation: 'Ik kan geen passend antwoord vinden. Wilt u met een agent spreken?',
+          status_closed: 'Gesloten',
+          status_agent: 'Agent',
+          status_waiting: 'Wachten',
+          status_bot: 'Bot',
+          messages: 'bericht',
         },
       };
       return msgs[lang] || msgs['EN'];
@@ -380,17 +510,17 @@
       const lang = (this.user_info?.language || 'EN').toUpperCase();
       const client_name = getClientTheme(this.client_id).name;
       const msgs = {
-        FR: `Bonjour ${first_name} ! 👋 Je m'appelle Maria, votre assistante virtuelle ${client_name}. Comment puis-je vous aider aujourd'hui ?`,
-        EN: `Hello ${first_name}! 👋 My name is Maria, your ${client_name} virtual assistant. How can I help you today?`,
-        DE: `Hallo ${first_name}! 👋 Ich bin Maria, Ihre virtuelle Assistentin von ${client_name}. Wie kann ich Ihnen helfen?`,
-        ES: `¡Hola ${first_name}! 👋 Me llamo Maria, tu asistente virtual de ${client_name}. ¿En qué puedo ayudarte?`,
-        IT: `Ciao ${first_name}! 👋 Mi chiamo Maria, la tua assistente virtuale di ${client_name}. Come posso aiutarti?`,
-        NL: `Hallo ${first_name}! 👋 Ik ben Maria, uw virtuele assistent van ${client_name}. Hoe kan ik u helpen?`,
+        FR: `Bonjour ${first_name} ! Je m'appelle Maria, votre assistante virtuelle ${client_name}. Comment puis-je vous aider aujourd'hui ?`,
+        EN: `Hello ${first_name}! My name is Maria, your ${client_name} virtual assistant. How can I help you today?`,
+        DE: `Hallo ${first_name}! Ich bin Maria, Ihre virtuelle Assistentin von ${client_name}. Wie kann ich Ihnen helfen?`,
+        ES: `¡Hola ${first_name}! Me llamo Maria, tu asistente virtual de ${client_name}. ¿En qué puedo ayudarte?`,
+        IT: `Ciao ${first_name}! Mi chiamo Maria, la tua assistente virtuale di ${client_name}. Come posso aiutarti?`,
+        NL: `Hallo ${first_name}! Ik ben Maria, uw virtuele assistent van ${client_name}. Hoe kan ik u helpen?`,
       };
       return msgs[lang] || msgs['EN'];
     }
 
-    // ─── Theme ────────────────────────────────────────────────────────────────
+    // ─── Theme ─────────────────────────────────────────────────────────────────
 
     getThemeColor() {
       return getClientTheme(this.client_id).primary;
@@ -426,6 +556,9 @@
         #tp-new-conversation { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
         .tp-conv-item:hover { background: ${color}11 !important; }
         .tp-conv-new-btn { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
+        .tp-badge-closed { background: ${color}22 !important; color: ${dark} !important; }
+        .tp-attach-btn { color: ${color} !important; }
+        .tp-attach-btn:hover { background: ${color}18 !important; }
       `;
       document.head.appendChild(style);
 
@@ -436,13 +569,11 @@
         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';
@@ -451,7 +582,7 @@
       }
     }
 
-    // ─── Render ───────────────────────────────────────────────────────────────
+    // ─── Render ────────────────────────────────────────────────────────────────
 
     render() {
       const theme = getClientTheme(this.client_id);
@@ -460,39 +591,40 @@
           <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 style="flex:1;min-width:0;">
                 <div class="tp-chatbot-title">${theme.name} Support</div>
-                <div class="tp-chatbot-subtitle" id="tp-subtitle">🤖 Assistant</div>
+                <div class="tp-chatbot-subtitle" id="tp-subtitle">${icon('bot', 12, 'margin-right:4px')} Assistant</div>
               </div>
-              <button id="tp-sound-btn" style="background:none;border:none;color:white;font-size:15px;cursor:pointer;padding:4px 6px;" title="Sound">🔔</button>
-              <button id="tp-minimize-btn" style="background:none;border:none;color:white;font-size:15px;cursor:pointer;padding:4px 6px;" title="Minimize">─</button>
-              <button id="tp-maximize-btn" style="background:none;border:none;color:white;font-size:15px;cursor:pointer;padding:4px 6px;" title="Fullscreen">□</button>
-              <button id="tp-back-btn" style="display:none;background:none;border:none;color:white;font-size:18px;cursor:pointer;padding:4px 6px;">←</button>
+              <button id="tp-sound-btn" class="tp-header-btn" title="Sound">${icon('bell', 16)}</button>
+              <button id="tp-minimize-btn" class="tp-header-btn" title="Minimize">${icon('minimize', 16)}</button>
+              <button id="tp-maximize-btn" class="tp-header-btn" title="Fullscreen">${icon('restore', 16)}</button>
+              <button id="tp-back-btn" class="tp-header-btn" style="display:none;" title="Back">${icon('back', 16)}</button>
             </div>
             <div class="tp-chatbot-messages" id="tp-messages"></div>
             <div class="tp-chatbot-agent-bar" id="tp-agent-bar" style="display:none;">
-              <button class="tp-chatbot-agent-btn" id="tp-agent-btn">👤 Talk to an agent</button>
+              <button class="tp-chatbot-agent-btn" id="tp-agent-btn">
+                <span style="display:inline-flex;align-items:center;gap:6px;">${icon('agent', 16)} Talk to an agent</span>
+              </button>
             </div>
             <div class="tp-chatbot-input-bar" id="tp-chatbot-input-bar" style="display:none;">
               <textarea class="tp-chatbot-input" id="tp-input" placeholder="Write your message..." rows="1"></textarea>
-              <button class="tp-chatbot-send" id="tp-send">➤</button>
+              <button class="tp-chatbot-send" id="tp-send">${icon('send', 16, 'color:white')}</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;">
-                ✅ End conversation
+              <button id="tp-close-btn" class="tp-close-btn">
+                <span style="display:inline-flex;align-items:center;gap:6px;">${icon('check', 14)} End conversation</span>
               </button>
             </div>
           </div>
-          <div class="tp-chatbot-bubble" id="tp-bubble">💬</div>
+          <div class="tp-chatbot-bubble" id="tp-bubble">${icon('msg', 24, 'color:white')}</div>
         </div>
       `;
     }
 
-    // ─── Window controls ──────────────────────────────────────────────────────
+    // ─── Window controls ───────────────────────────────────────────────────────
 
     minimize() {
       const win = this.querySelector('#tp-window');
-      // Exit fullscreen first if needed
       if (this.is_fullscreen) this.exitFullscreen(false);
       this.is_minimized = true;
       win.style.height = '56px';
@@ -512,7 +644,8 @@
       win.style.borderRadius = '0';
       win.style.zIndex = '99999';
       host.style.width = '100vw';
-      this.querySelector('#tp-maximize-btn').textContent = '⤡';
+      const btn = this.querySelector('#tp-maximize-btn');
+      if (btn) btn.innerHTML = icon('restore', 16);
     }
 
     exitFullscreen(restore_height = true) {
@@ -531,10 +664,11 @@
       host.style.right = position === 'left' ? 'auto' : '24px';
       if (restore_height) win.style.height = WINDOW_HEIGHT;
       win.style.overflow = 'hidden';
-      this.querySelector('#tp-maximize-btn').textContent = '□';
+      const btn = this.querySelector('#tp-maximize-btn');
+      if (btn) btn.innerHTML = icon('restore', 16);
     }
 
-    // ─── Events ───────────────────────────────────────────────────────────────
+    // ─── Events ────────────────────────────────────────────────────────────────
 
     attachEvents() {
       this.querySelector('#tp-bubble').addEventListener('click', () => this.toggleChat());
@@ -551,18 +685,15 @@
 
       this.querySelector('#tp-sound-btn').addEventListener('click', () => {
         this.sound_enabled = !this.sound_enabled;
-        this.querySelector('#tp-sound-btn').textContent = this.sound_enabled ? '🔔' : '🔕';
+        this.querySelector('#tp-sound-btn').innerHTML = icon(this.sound_enabled ? 'bell' : 'bell_off', 16);
       });
 
       this.querySelector('#tp-close-btn').addEventListener('click', () => {
-        if (window.confirm(this.getMessages().close_confirm)) {
-          this.closeByUser();
-        }
+        if (window.confirm(this.getMessages().close_confirm)) this.closeByUser();
       });
 
       this.querySelector('#tp-minimize-btn').addEventListener('click', () => {
         if (this.is_minimized) {
-          // Restore
           this.is_minimized = false;
           const win = this.querySelector('#tp-window');
           win.style.height = WINDOW_HEIGHT;
@@ -590,13 +721,15 @@
     updateUILanguage() {
       const m = this.getMessages();
       const agent_btn = this.querySelector('#tp-agent-btn');
-      if (agent_btn) agent_btn.textContent = m.speak_agent;
+      if (agent_btn)
+        agent_btn.innerHTML = `<span style="display:inline-flex;align-items:center;gap:6px;">${icon('agent', 16)} ${m.speak_agent}</span>`;
       const close_btn = this.querySelector('#tp-close-btn');
-      if (close_btn) close_btn.textContent = m.close_btn;
+      if (close_btn)
+        close_btn.innerHTML = `<span style="display:inline-flex;align-items:center;gap:6px;">${icon('check', 14)} ${m.close_btn}</span>`;
       const input = this.querySelector('#tp-input');
       if (input) input.placeholder = m.write_msg;
       const subtitle = this.querySelector('#tp-subtitle');
-      if (subtitle) subtitle.textContent = m.virtual;
+      if (subtitle) subtitle.innerHTML = `${icon('bot', 12, 'margin-right:4px')} ${m.virtual}`;
     }
 
     toggleChat() {
@@ -605,8 +738,7 @@
       const bubble = this.querySelector('#tp-bubble');
       if (this.is_open) {
         window_el.classList.add('open');
-        bubble.textContent = '✕';
-        // Restore from minimized if needed
+        bubble.innerHTML = icon('close', 20, 'color:white');
         if (this.is_minimized) {
           this.is_minimized = false;
           window_el.style.height = WINDOW_HEIGHT;
@@ -614,7 +746,7 @@
         }
       } else {
         window_el.classList.remove('open');
-        bubble.textContent = '💬';
+        bubble.innerHTML = icon('msg', 24, 'color:white');
         if (this.is_fullscreen) this.exitFullscreen(true);
       }
     }
@@ -630,11 +762,7 @@
       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,
-          client_id: this.client_id,
-        }),
+        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;
@@ -646,15 +774,12 @@
       const existing = this.querySelector('#tp-suggestions');
       if (existing) existing.remove();
       if (!suggestions || suggestions.length === 0) return;
-
       const lang = (this.user_info?.language || 'EN').toUpperCase();
       const color = this.getThemeColor();
       const container = this.querySelector('#tp-messages');
-
       const wrap = document.createElement('div');
       wrap.id = 'tp-suggestions';
       wrap.style.cssText = 'padding:8px 12px 12px;display:flex;flex-direction:column;gap:6px;';
-
       suggestions.forEach(s => {
         const label = s[lang] || s['EN'];
         const btn = document.createElement('button');
@@ -679,38 +804,29 @@
         });
         wrap.appendChild(btn);
       });
-
       container.appendChild(wrap);
       container.scrollTop = container.scrollHeight;
     }
 
-    // ─── Conversation List ────────────────────────────────────────────────────
+    // ─── Conversation List ─────────────────────────────────────────────────────
 
     async showConversationList() {
       this.view = 'list';
       const m = this.getMessages();
-
       if (this.polling_interval) {
         clearInterval(this.polling_interval);
         this.polling_interval = null;
       }
 
       const subtitle = this.querySelector('#tp-subtitle');
-      if (subtitle) subtitle.textContent = m.virtual;
-
-      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 close_bar = this.querySelector('#tp-close-bar');
-      if (close_bar) close_bar.style.display = 'none';
+      if (subtitle) subtitle.innerHTML = `${icon('bot', 12, 'margin-right:4px')} ${m.virtual}`;
+      this.querySelector('#tp-back-btn').style.display = 'none';
+      this.querySelector('#tp-chatbot-input-bar').style.display = 'none';
+      this.querySelector('#tp-agent-bar').style.display = 'none';
+      this.querySelector('#tp-close-bar').style.display = 'none';
 
       const container = this.querySelector('#tp-messages');
+      container.style.background = '#f5f5f7';
       container.innerHTML = `<div style="padding:16px;text-align:center;color:#aaa;font-size:12px;">${m.loading}</div>`;
 
       try {
@@ -721,35 +837,40 @@
         const color = this.getThemeColor();
 
         container.innerHTML = '';
+        container.style.background = 'white';
+        container.style.padding = '0';
 
+        // Header greeting
         const header_el = document.createElement('div');
-        header_el.style.cssText = 'padding:16px;border-bottom:1px solid #ede8f5;';
+        header_el.style.cssText = 'padding:16px;border-bottom:1px solid #f0f0f0;';
         header_el.innerHTML = `
-          <div style="font-size:13px;font-weight:700;color:#1a1a2e;margin-bottom:4px;">${m.hello} ${this.user_info?.first_name || ''} 👋</div>
+          <div style="font-size:14px;font-weight:700;color:#1a1a2e;margin-bottom:2px;">${m.hello} ${this.user_info?.first_name || ''} 👋</div>
           <div style="font-size:12px;color:#aaa;">${m.recent_conv}</div>
         `;
         container.appendChild(header_el);
 
         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 = m.no_conv;
+          empty.style.cssText = 'padding:32px 16px;text-align:center;color:#bbb;font-size:13px;';
+          empty.innerHTML = `<div style="margin-bottom:8px;opacity:0.4;">${icon('msg', 32)}</div>${m.no_conv}`;
           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;';
+            item.style.cssText =
+              'padding:14px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background 0.15s;display:flex;justify-content:space-between;align-items:center;';
 
             const is_closed = conv.status === 'closed';
             const status_label = is_closed
-              ? '✅ Closed'
+              ? m.status_closed
               : conv.status === 'agent'
-                ? '👤 Agent'
+                ? m.status_agent
                 : conv.status === 'waiting_agent'
-                  ? '⏳ Waiting'
-                  : '🤖 Bot';
-            const status_color = is_closed ? '#9ca3af' : conv.status === 'waiting_agent' ? '#f59e0b' : color;
+                  ? m.status_waiting
+                  : m.status_bot;
+
+            const badge_color = is_closed ? color : conv.status === 'waiting_agent' ? '#f59e0b' : color;
             const date = new Date(conv.updated_at).toLocaleDateString('fr-FR', {
               day: '2-digit',
               month: '2-digit',
@@ -758,20 +879,27 @@
             });
 
             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:13px;font-weight:600;color:${is_closed ? '#888' : '#1a1a2e'};margin-bottom:3px;">${date}</div>
+                <div style="font-size:11px;color:#bbb;">${conv.message_count} ${m.messages}${conv.message_count > 1 ? 's' : ''}</div>
               </div>
-              <div style="font-size:11px;color:#aaa;">${conv.message_count} message${conv.message_count > 1 ? 's' : ''}</div>
+              <span class="tp-badge-closed" style="display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;background:${badge_color}18;color:${badge_color};">
+                ${is_closed ? icon('check', 11) : ''} ${status_label}
+              </span>
             `;
             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;">${m.new_conv_btn}</button>`;
+        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;display:flex;align-items:center;justify-content:center;gap:8px;">
+            ${icon('msg_plus', 16, 'color:white')} ${m.new_conv_btn}
+          </button>
+        `;
         new_btn_wrap.querySelector('button').addEventListener('click', () => this.startNewConversation());
         container.appendChild(new_btn_wrap);
       } catch (e) {
@@ -790,10 +918,10 @@
       this.agent_requested = false;
 
       const m = this.getMessages();
-      const back_btn = this.querySelector('#tp-back-btn');
-      if (back_btn) back_btn.style.display = 'block';
-
+      this.querySelector('#tp-back-btn').style.display = 'block';
       const container = this.querySelector('#tp-messages');
+      container.style.background = '#f5f5f7';
+      container.style.padding = '16px';
       container.innerHTML = '';
 
       const input_bar = this.querySelector('#tp-chatbot-input-bar');
@@ -809,10 +937,9 @@
 
         conv.messages.forEach(msg => {
           if (['user', 'assistant', 'agent', 'system'].includes(msg.role)) {
-            this.addMessage(msg.role, msg.content);
+            this.addMessage(msg.role, msg.content, msg.message_id || null);
           }
         });
-
         this.last_message_count = conv.messages.length;
 
         if (conv.status === 'closed') {
@@ -829,14 +956,14 @@
         if (conv.status === 'agent') {
           this.agent_mode = true;
           const subtitle = this.querySelector('#tp-subtitle');
-          if (subtitle) subtitle.textContent = m.human_agent;
+          if (subtitle) subtitle.innerHTML = `${icon('user', 12, 'margin-right:4px')} ${m.human_agent}`;
           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 = 'none';
           const subtitle = this.querySelector('#tp-subtitle');
-          if (subtitle) subtitle.textContent = m.virtual;
+          if (subtitle) subtitle.innerHTML = `${icon('bot', 12, 'margin-right:4px')} ${m.virtual}`;
         }
 
         this.updateUILanguage();
@@ -856,52 +983,40 @@
       this.conversation_id = null;
 
       const m = this.getMessages();
-
-      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';
+      this.querySelector('#tp-back-btn').style.display = 'block';
+      this.querySelector('#tp-close-bar').style.display = 'block';
 
       const container = this.querySelector('#tp-messages');
+      container.style.background = '#f5f5f7';
+      container.style.padding = '16px';
       container.innerHTML = '';
 
       const subtitle = this.querySelector('#tp-subtitle');
-      if (subtitle) subtitle.textContent = m.virtual;
-
-      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 = 'none';
+      if (subtitle) subtitle.innerHTML = `${icon('bot', 12, 'margin-right:4px')} ${m.virtual}`;
 
+      this.querySelector('#tp-chatbot-input-bar').style.display = 'flex';
+      this.querySelector('#tp-agent-bar').style.display = 'none';
       this.updateUILanguage();
+
       this.conversation_id = await this.createConversation();
       this.addMessage('assistant', this.getWelcomeMessage(this.user_info?.first_name || ''));
       this.last_message_count = 1;
 
       const theme = getClientTheme(this.client_id);
-      if (theme.suggestions && theme.suggestions.length > 0) {
-        this.showSuggestions(theme.suggestions);
-      }
+      if (theme.suggestions && theme.suggestions.length > 0) this.showSuggestions(theme.suggestions);
 
       this.polling_interval = setInterval(() => this.pollMessages(), 3000);
     }
 
-    // ─── Guest form ───────────────────────────────────────────────────────────
+    // ─── 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';
-
+      this.querySelector('#tp-chatbot-input-bar').style.display = 'none';
+      this.querySelector('#tp-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 = `
@@ -910,9 +1025,7 @@
           <input id="tp-guest-firstname" type="text" placeholder="First name *" 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="Company name *" 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;">
-            Start conversation →
-          </button>
+          <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;">Start conversation →</button>
           <p id="tp-guest-error" style="margin:0;font-size:12px;color:#c0392b;display:none;"></p>
         </div>
       `;
@@ -925,7 +1038,6 @@
       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 = 'Please fill in all fields.';
         error_el.style.display = 'block';
@@ -946,57 +1058,86 @@
       this.view = 'chat';
       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 = 'none';
-      const close_bar = this.querySelector('#tp-close-bar');
-      if (close_bar) close_bar.style.display = 'block';
+      this.querySelector('#tp-chatbot-input-bar').style.display = 'flex';
+      this.querySelector('#tp-agent-bar').style.display = 'none';
+      this.querySelector('#tp-close-bar').style.display = 'block';
+
+      const container = this.querySelector('#tp-messages');
+      container.style.background = '#f5f5f7';
+      container.style.padding = '16px';
 
       this.updateUILanguage();
       this.addMessage('assistant', this.getWelcomeMessage(first_name));
       this.last_message_count = 1;
 
       const theme = getClientTheme(this.client_id);
-      if (theme.suggestions && theme.suggestions.length > 0) {
-        this.showSuggestions(theme.suggestions);
-      }
+      if (theme.suggestions && theme.suggestions.length > 0) this.showSuggestions(theme.suggestions);
 
       this.polling_interval = setInterval(() => this.pollMessages(), 3000);
     }
 
-    // ─── Messages ─────────────────────────────────────────────────────────────
+    // ─── Messages ──────────────────────────────────────────────────────────────
 
-    addMessage(role, content) {
-      this.messages.push({ role, content, created_at: new Date().toISOString() });
+    addMessage(role, content, message_id = null) {
+      this.messages.push({ role, content, message_id, created_at: new Date().toISOString() });
       const container = this.querySelector('#tp-messages');
 
       const role_label =
         role === 'user'
-          ? `👤 ${this.user_info?.first_name || 'You'}`
+          ? `${icon('user', 11, 'margin-right:3px')} ${this.user_info?.first_name || 'You'}`
           : role === 'agent'
-            ? '👨‍💼 Agent'
+            ? `${icon('agent', 11, 'margin-right:3px')} Agent`
             : role === 'system'
-              ? 'ℹ️ Info'
-              : '🤖 Maria';
+              ? 'Info'
+              : `${icon('bot', 11, 'margin-right:3px')} Maria`;
 
       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 feedback_html =
+        role === 'assistant' && message_id
+          ? `<div class="tp-feedback-bar" data-message-id="${message_id}">
+            <button class="tp-feedback-btn" data-rating="positive" title="Helpful">${icon('helpful', 14)}</button>
+            <button class="tp-feedback-btn" data-rating="negative" title="Not helpful">${icon('not_helpful', 14)}</button>
+           </div>`
+          : '';
+
       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>
+          ${feedback_html}
         </div>
       `;
+
+      if (role === 'assistant' && message_id) {
+        const bar = msg_el.querySelector('.tp-feedback-bar');
+        bar.querySelectorAll('.tp-feedback-btn').forEach(btn => {
+          btn.addEventListener('click', async () => {
+            if (bar.dataset.voted) return;
+            bar.dataset.voted = '1';
+            const rating = btn.dataset.rating;
+            bar.querySelectorAll('.tp-feedback-btn').forEach(b => {
+              b.style.opacity = b === btn ? '1' : '0.3';
+              b.style.cursor = 'default';
+            });
+            try {
+              await fetch(`${this.api_url}/chat/conversations/${this.conversation_id}/feedback`, {
+                method: 'POST',
+                headers: this.getHeaders(true),
+                body: JSON.stringify({ message_id, rating, user_id: this.user_id }),
+              });
+            } catch {}
+          });
+        });
+      }
+
       container.appendChild(msg_el);
       container.scrollTop = container.scrollHeight;
 
-      if ((role === 'assistant' || role === 'agent') && this.sound_enabled) {
-        playSound();
-      }
+      if ((role === 'assistant' || role === 'agent') && this.sound_enabled) playSound();
     }
 
     showTyping() {
@@ -1010,8 +1151,8 @@
     }
 
     hideTyping() {
-      const typing = this.querySelector('#tp-typing');
-      if (typing) typing.remove();
+      const t = this.querySelector('#tp-typing');
+      if (t) t.remove();
     }
 
     showClosed(existing_csat = null) {
@@ -1023,14 +1164,11 @@
 
       const m = this.getMessages();
       const subtitle = this.querySelector('#tp-subtitle');
-      if (subtitle) subtitle.textContent = m.terminated;
+      if (subtitle) subtitle.innerHTML = `${icon('check', 12, 'margin-right:4px')} ${m.terminated}`;
 
-      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 close_bar = this.querySelector('#tp-close-bar');
-      if (close_bar) close_bar.style.display = 'none';
+      this.querySelector('#tp-chatbot-input-bar').style.display = 'none';
+      this.querySelector('#tp-agent-bar').style.display = 'none';
+      this.querySelector('#tp-close-bar').style.display = 'none';
       const sugg_el = this.querySelector('#tp-suggestions');
       if (sugg_el) sugg_el.remove();
 
@@ -1048,17 +1186,21 @@
         ? `<div style="font-size:13px;color:#888;margin-bottom:14px;">${existing_csat === 'positive' ? m.csat_positive : m.csat_negative}</div>`
         : `<div style="font-size:12px;color:#888;margin-bottom:10px;">${m.csat_question}</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>
+             <button id="tp-csat-positive" class="tp-csat-btn" style="border-color:#22c55e;color:#22c55e;">${icon('helpful', 20)}</button>
+             <button id="tp-csat-negative" class="tp-csat-btn" style="border-color:#ef4444;color:#ef4444;">${icon('not_helpful', 20)}</button>
            </div>`;
 
       const banner = document.createElement('div');
       banner.id = 'tp-closed-banner';
       banner.innerHTML = `
-        <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;">${m.closed}</div>
+        <div style="margin:16px;padding:16px;background:#f9f9f9;border:1px solid #ede8f5;border-radius:12px;text-align:center;">
+          <div style="display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#1a1a2e;font-weight:600;margin-bottom:10px;">
+            ${icon('check', 14)} ${m.closed}
+          </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%;">${m.new_conv}</button>
+          <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:700;cursor:pointer;margin-bottom:8px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;">
+            ${icon('msg_plus', 15, 'color:white')} ${m.new_conv}
+          </button>
           <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%;">${m.back_to_list}</button>
         </div>
       `;
@@ -1088,7 +1230,7 @@
       this.querySelector('#tp-back-to-list').addEventListener('click', () => this.showConversationList());
     }
 
-    // ─── Send / Poll ──────────────────────────────────────────────────────────
+    // ─── Send / Poll ───────────────────────────────────────────────────────────
 
     async sendMessage() {
       if (this.is_closed || !this.conversation_id) return;
@@ -1103,8 +1245,7 @@
       const user_messages = this.messages.filter(msg => msg.role === 'user').length;
       if (user_messages >= 30) {
         this.addMessage('system', m.limit_reached);
-        const input_bar = this.querySelector('#tp-chatbot-input-bar');
-        if (input_bar) input_bar.style.display = 'none';
+        this.querySelector('#tp-chatbot-input-bar').style.display = 'none';
         return;
       }
 
@@ -1119,7 +1260,6 @@
           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();
 
@@ -1131,19 +1271,24 @@
 
         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 ? m.human_agent : m.virtual;
+        if (subtitle)
+          subtitle.innerHTML = this.agent_mode
+            ? `${icon('user', 12, 'margin-right:4px')} ${m.human_agent}`
+            : `${icon('bot', 12, 'margin-right:4px')} ${m.virtual}`;
 
         if (data.result.reply) {
-          this.addMessage(this.agent_mode ? 'agent' : 'assistant', data.result.reply);
-          this.last_message_count += 2; // fix double message
+          this.addMessage(this.agent_mode ? 'agent' : 'assistant', data.result.reply, data.result.message_id || null);
+          this.last_message_count += 2;
         }
 
         const user_msg_count = this.messages.filter(msg => msg.role === 'user').length;
         const agent_bar = this.querySelector('#tp-agent-bar');
+        const suggest_agent = data.result.suggest_agent || false;
+
         if (agent_bar && !this.agent_requested && !this.agent_mode) {
           if (
+            suggest_agent ||
             source === 'fallback' ||
             source === 'clarification' ||
             source === 'no_match' ||
@@ -1153,9 +1298,14 @@
             agent_bar.style.display = 'block';
           }
         }
+
+        if (suggest_agent && !this.agent_requested) {
+          this.addMessage('system', m.suggest_agent_escalation);
+          this.last_message_count += 1;
+        }
       } catch {
         this.hideTyping();
-        this.addMessage('assistant', m.error_occurred);
+        this.addMessage('assistant', this.getMessages().error_occurred);
       }
 
       this.is_loading = false;
@@ -1174,15 +1324,28 @@
           body: JSON.stringify({ user_id: this.user_id }),
         });
         const data = await response.json();
-        this.addMessage('system', data.result.message);
-        this.last_message_count += 1;
+        const m = this.getMessages();
+        const status = data.result?.status;
+
+        let msg = '';
+        if (status === 'outside_hours') msg = m.outside_hours(data.result.next_opening);
+        else if (status === 'no_agents') msg = m.no_agents;
+        else if (status === 'waiting_agent') msg = m.waiting_agent;
+        else if (status === 'waiting_agent_already') msg = m.waiting_agent_already;
+        else if (status === 'agent') msg = m.agent_already;
+
+        if (msg) {
+          this.addMessage('system', msg);
+          this.last_message_count += 1;
+        }
 
-        if (data.result.status === 'no_agents' || data.result.status === 'outside_hours') {
+        if (status === 'no_agents' || status === 'outside_hours' || status === 'waiting_agent_already') {
           this.agent_requested = false;
           if (agent_bar) agent_bar.style.display = 'block';
         }
       } catch {
         this.agent_requested = false;
+        const agent_bar = this.querySelector('#tp-agent-bar');
         if (agent_bar) agent_bar.style.display = 'block';
       }
     }
@@ -1207,7 +1370,6 @@
         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;
@@ -1228,7 +1390,7 @@
             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>`;
+            typing.innerHTML = `<div class="tp-chatbot-bubble-msg"><div class="tp-chatbot-role">${icon('agent', 11, 'margin-right:3px')} Agent</div><div class="tp-chatbot-typing"><span></span><span></span><span></span></div></div>`;
             container.appendChild(typing);
             container.scrollTop = container.scrollHeight;
           }
@@ -1243,9 +1405,9 @@
             if (msg.role === 'agent') {
               const typing_el = this.querySelector('#tp-agent-typing');
               if (typing_el) typing_el.remove();
-              this.addMessage('agent', msg.content);
+              this.addMessage('agent', msg.content, msg.message_id || null);
             } else if (msg.role === 'assistant') {
-              this.addMessage('assistant', msg.content);
+              this.addMessage('assistant', msg.content, msg.message_id || null);
             } else if (msg.role === 'system') {
               this.addMessage('system', msg.content);
             }
@@ -1256,7 +1418,7 @@
         if (server_status === 'agent' && !this.agent_mode) {
           this.agent_mode = true;
           const subtitle = this.querySelector('#tp-subtitle');
-          if (subtitle) subtitle.textContent = m.human_agent;
+          if (subtitle) subtitle.innerHTML = `${icon('user', 12, 'margin-right:4px')} ${m.human_agent}`;
           const agent_bar = this.querySelector('#tp-agent-bar');
           if (agent_bar) agent_bar.style.display = 'none';
           this.addMessage('system', m.agent_taken);
@@ -1265,7 +1427,7 @@
           this.agent_mode = false;
           this.agent_requested = false;
           const subtitle = this.querySelector('#tp-subtitle');
-          if (subtitle) subtitle.textContent = m.virtual;
+          if (subtitle) subtitle.innerHTML = `${icon('bot', 12, 'margin-right:4px')} ${m.virtual}`;
           const agent_bar = this.querySelector('#tp-agent-bar');
           if (agent_bar) agent_bar.style.display = 'block';
           this.addMessage('system', m.agent_released);