@ihoomanai/chat-widget 2.5.4 → 2.5.6

package/src/widget.ts

@@ -439,7 +439,7 @@ function createWidget(): void {
         <div class="ihooman-history-view">
           <div class="ihooman-history-header">
             <span class="ihooman-history-title">Your Conversations</span>
-            <button class="ihooman-history-new" style="display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, ${config.gradientFrom}, ${config.gradientTo}); color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer;">${icons.plus} New Chat</button>
+            <button class="ihooman-history-new" style="all: revert; display: inline-flex !important; align-items: center !important; gap: 4px !important; background: linear-gradient(135deg, ${config.gradientFrom}, ${config.gradientTo}) !important; color: white !important; border: none !important; padding: 6px 10px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 500 !important; cursor: pointer !important; width: auto !important; height: auto !important; min-width: 0 !important; aspect-ratio: auto !important;">${icons.plus} New Chat</button>
           </div>
           <div class="ihooman-history-list"></div>
         </div>
@@ -561,13 +561,13 @@ function addMessage(content: string, sender: 'user' | 'bot' = 'bot', metadata: M
   
   let escalationButtonsHtml = '';
   if (showEscalationButtons) {
-    // Use inline styles to ensure buttons are rectangular and properly sized
-    const btnBaseStyle = 'display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 6px; border: none; cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.2s ease; width: auto; height: auto;';
-    const primaryStyle = `${btnBaseStyle} background: linear-gradient(135deg, ${config.gradientFrom}, ${config.gradientTo}); color: white;`;
-    const secondaryStyle = `${btnBaseStyle} background: rgba(0,0,0,0.05); color: inherit; border: 1px solid rgba(0,0,0,0.1);`;
+    // Use inline styles with !important to override any external CSS
+    const btnBaseStyle = 'all: revert; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 8px 12px !important; border-radius: 6px !important; border: none !important; cursor: pointer !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.2 !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; box-sizing: border-box !important;';
+    const primaryStyle = `${btnBaseStyle} background: linear-gradient(135deg, ${config.gradientFrom}, ${config.gradientTo}) !important; color: white !important;`;
+    const secondaryStyle = `${btnBaseStyle} background: rgba(0,0,0,0.05) !important; color: inherit !important; border: 1px solid rgba(0,0,0,0.1) !important;`;
     
     escalationButtonsHtml = `
-      <div class="ihooman-escalation-actions">
+      <div class="ihooman-escalation-actions" style="display: flex !important; gap: 8px !important; margin-top: 10px !important; flex-wrap: wrap !important;">
         <button class="ihooman-escalation-btn primary" data-action="live-agent" style="${primaryStyle}">
           ${icons.agent}
           <span>Talk to Agent</span>
@@ -1198,6 +1198,9 @@ function connectWebSocket(chatEndpoint?: string): void {
   }
 
   try {
+    // Stop any existing heartbeat before creating new connection
+    stopHeartbeat();
+    
     ws = new WebSocket(wsUrl);
 
     ws.onopen = () => {
@@ -1205,23 +1208,35 @@ function connectWebSocket(chatEndpoint?: string): void {
       reconnectAttempts = 0;
       updateStatus(true);
       emit('connected');
+      // Start heartbeat after connection is established
+      startHeartbeat();
     };
 
-    ws.onclose = () => {
+    ws.onclose = (event) => {
       state.isConnected = false;
       updateStatus(false);
+      stopHeartbeat();
       emit('disconnected');
       
+      // Log close reason for debugging
+      console.log(`WebSocket closed: code=${event.code}, reason=${event.reason || 'none'}, wasClean=${event.wasClean}`);
+      
       // Don't reconnect if this was an intentional disconnect (e.g., starting new conversation)
       if (intentionalDisconnect) {
         intentionalDisconnect = false;
         return;
       }
       
+      // Don't reconnect if the widget is closed
+      if (!state.isOpen) {
+        return;
+      }
+      
       // Attempt reconnection with exponential backoff
       if (reconnectAttempts < maxReconnectAttempts) {
         reconnectAttempts++;
         const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
+        console.log(`WebSocket reconnecting in ${delay}ms (attempt ${reconnectAttempts}/${maxReconnectAttempts})`);
         setTimeout(() => connectWebSocket(chatEndpoint), delay);
       } else {
         // Fall back to polling after max reconnect attempts
@@ -1275,9 +1290,6 @@ function connectWebSocket(chatEndpoint?: string): void {
       }
     };
     
-    // Start heartbeat to keep connection alive
-    startHeartbeat();
-    
   } catch {
     // WebSocket not supported, fall back to polling
     console.warn('WebSocket not supported, using polling');
@@ -1292,15 +1304,21 @@ let heartbeatInterval: ReturnType<typeof setInterval> | null = null;
 
 /**
  * Start heartbeat to keep WebSocket connection alive
+ * Sends ping every 25 seconds to prevent Cloudflare/proxy timeouts
  */
 function startHeartbeat(): void {
-  if (heartbeatInterval) return;
+  // Clear any existing heartbeat first
+  stopHeartbeat();
   
   heartbeatInterval = setInterval(() => {
     if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.send(JSON.stringify({ type: 'ping' }));
+      try {
+        ws.send(JSON.stringify({ type: 'ping' }));
+      } catch (e) {
+        console.warn('Failed to send heartbeat ping:', e);
+      }
     }
-  }, 30000); // Ping every 30 seconds
+  }, 25000); // Ping every 25 seconds (Cloudflare timeout is 100s, but some proxies are shorter)
 }
 
 /**