@developpement/tp-chatbot-widget 0.0.12 → 0.0.13

package/package.json

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

package/src/chatbot.css

@@ -50,11 +50,7 @@
   transition: all 0.25s ease;
 }
 
-.tp-chatbot-window.open {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-  pointer-events: all;
-}
+.tp-chatbot-window.open { opacity: 1; visibility: visible; transform: scale(1) translateY(0); pointer-events: all; }
 
 /* ─── Header ─────────────────────────────────────────────────────────────── */
 

package/src/chatbot.js

@@ -37,8 +37,8 @@
     style.textContent = `
       tp-chatbot * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
       .tp-chatbot-host { position: fixed; bottom: 24px; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; width: 380px; }
-      .tp-chatbot-window { position: absolute; bottom: 72px; left: 0; right: auto; width: 380px; height: 580px; background: #fff; border-radius: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.14); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: scale(0.92) translateY(12px); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; }
-      .tp-chatbot-window.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: all; }
+      .tp-chatbot-window { position: absolute; bottom: 72px; left: 0; right: auto; width: 380px; height: 580px; background: #fff; border-radius: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.14); display: none; flex-direction: column; overflow: hidden; opacity: 0; transform: scale(0.92) translateY(12px); pointer-events: none; z-index: 9999; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease; }      
+      .tp-chatbot-window.open { opacity: 1; visibility: visible; transform: scale(1) translateY(0); pointer-events: all; }
       .tp-chatbot-bubble { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s; margin-left: auto; flex-shrink: 0; }
       .tp-chatbot-bubble:hover { transform: scale(1.07); }
       .tp-header { padding: 14px 16px 0; color: white; }
@@ -939,23 +939,25 @@
     }
 
     toggleChat() {
-      this.is_open = !this.is_open;
-      const window_el = this.querySelector('#tp-window'),
-        bubble = this.querySelector('#tp-bubble');
-      if (this.is_open) {
-        window_el.classList.add('open');
-        bubble.innerHTML = icon('close', 22, 'color:white');
-        if (this.is_minimized) {
-          this.is_minimized = false;
-          window_el.style.height = WINDOW_HEIGHT;
-          window_el.style.overflow = 'hidden';
-        }
-      } else {
-        window_el.classList.remove('open');
-        bubble.innerHTML = icon('msg', 22, 'color:white');
-        if (this.is_fullscreen) this.exitFullscreen(true);
-      }
+  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.style.display = 'flex';
+    setTimeout(() => window_el.classList.add('open'), 10);
+    bubble.innerHTML = icon('close', 22, 'color:white');
+    if (this.is_minimized) {
+      this.is_minimized = false;
+      window_el.style.height = WINDOW_HEIGHT;
+      window_el.style.overflow = 'hidden';
     }
+  } else {
+    window_el.classList.remove('open');
+    setTimeout(() => { window_el.style.display = 'none'; }, 250);
+    bubble.innerHTML = icon('msg', 22, 'color:white');
+    if (this.is_fullscreen) this.exitFullscreen(true);
+  }
+}
 
     getHeaders(content_type = false) {
       const headers = {};