@developpement/tp-chatbot-widget 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developpement/tp-chatbot-widget",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "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 ─────────────────────────────────────────────────────────────── */
 
@@ -476,43 +472,43 @@
 
 /* ─── Markdown content ───────────────────────────────────────────────────── */
 
-.tp-chatbot-markdown h1,
-.tp-chatbot-markdown h2,
-.tp-chatbot-markdown h3 {
+.tp-md h1,
+.tp-md h2,
+.tp-md h3 {
   font-size: 13px;
   font-weight: 700;
   margin: 8px 0 3px;
   color: #1a1a2e;
 }
 
-.tp-chatbot-markdown p {
+.tp-md p {
   margin: 3px 0;
 }
 
-.tp-chatbot-markdown ul,
-.tp-chatbot-markdown ol {
+.tp-md ul,
+.tp-md ol {
   margin: 4px 0 4px 16px;
   padding: 0;
 }
 
-.tp-chatbot-markdown li {
+.tp-md li {
   margin: 2px 0;
 }
 
-.tp-chatbot-markdown strong {
+.tp-md strong {
   font-weight: 700;
 }
 
-.tp-chatbot-markdown em {
+.tp-md em {
   font-style: italic;
 }
 
-.tp-chatbot-markdown a {
+.tp-md a {
   color: #7b1fa2;
   text-decoration: underline;
 }
 
-.tp-chatbot-markdown code {
+.tp-md code {
   background: #f0ecf8;
   padding: 1px 5px;
   border-radius: 4px;

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 = {};
@@ -1485,9 +1487,9 @@
         });
         const data = await response.json();
         const m = this.getMessages(),
-          status = data.result?.status;
+          status = data.result?.result?.status;
         let msg = '';
-        if (status === 'outside_hours') msg = m.outside_hours(data.result.next_opening);
+        if (status === 'outside_hours') msg = m.outside_hours(data.result.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;