@ihoomanai/chat-widget 2.2.0 → 2.2.2

package/cdn/SRI_HASHES.md

@@ -1,8 +1,8 @@
 # SRI Hashes for @ihooman/chat-widget
 
-## Version: 2.0.2
+## Version: 2.2.1
 
-Build Date: 2026-01-31T18:35:43.908Z
+Build Date: 2026-02-01T13:15:35.563Z
 
 ## Subresource Integrity (SRI) Hashes
 
@@ -12,16 +12,16 @@ Use these hashes to ensure the integrity of the widget script when loading from
 
 | Version | URL | SRI Hash |
 |---------|-----|----------|
-| Major (v2) | `https://cdn.ihooman.ai/widget/v2/chat.min.js` | `sha384-BwEKqYlBOyZlghqPlT66iCF9MHI95yjpzfbgdeTbQvbEoeP3fC9+BD2L9TOSjIQ1` |
-| Full (v2.0.2) | `https://cdn.ihooman.ai/widget/v2.0.2/chat.min.js` | `sha384-BwEKqYlBOyZlghqPlT66iCF9MHI95yjpzfbgdeTbQvbEoeP3fC9+BD2L9TOSjIQ1` |
+| Major (v2) | `https://cdn.ihooman.ai/widget/v2/chat.min.js` | `sha384-1TV7Gv8ewoNYzwRYWcYawDbU+vZ1q/cdsNPV1K8xrEf84hOpCzsgd76EhE5471rV` |
+| Full (v2.2.1) | `https://cdn.ihooman.ai/widget/v2.2.1/chat.min.js` | `sha384-1TV7Gv8ewoNYzwRYWcYawDbU+vZ1q/cdsNPV1K8xrEf84hOpCzsgd76EhE5471rV` |
 | Latest | `https://cdn.ihooman.ai/widget/latest/chat.min.js` | *(SRI not recommended for latest)* |
 
 ### Unminified Bundle (For Development/Debugging)
 
 | Version | URL | SRI Hash |
 |---------|-----|----------|
-| Major (v2) | `https://cdn.ihooman.ai/widget/v2/chat.js` | `sha384-LYWKCqYwX9rPT78Wjc3aUadARCiUYxWz9LIHI3ctepwYK6Rzl6mCXUpSwI8+r9tX` |
-| Full (v2.0.2) | `https://cdn.ihooman.ai/widget/v2.0.2/chat.js` | `sha384-LYWKCqYwX9rPT78Wjc3aUadARCiUYxWz9LIHI3ctepwYK6Rzl6mCXUpSwI8+r9tX` |
+| Major (v2) | `https://cdn.ihooman.ai/widget/v2/chat.js` | `sha384-ATTcz+Ml80Gdw0rEz9R+yB5mcTtya6wbjCeyqvmKDeN15oarj3+VE63tQ7GNh6Vr` |
+| Full (v2.2.1) | `https://cdn.ihooman.ai/widget/v2.2.1/chat.js` | `sha384-ATTcz+Ml80Gdw0rEz9R+yB5mcTtya6wbjCeyqvmKDeN15oarj3+VE63tQ7GNh6Vr` |
 | Latest | `https://cdn.ihooman.ai/widget/latest/chat.js` | *(SRI not recommended for latest)* |
 
 ## Usage Examples
@@ -29,8 +29,8 @@ Use these hashes to ensure the integrity of the widget script when loading from
 ### With SRI (Recommended for versioned URLs)
 
 ```html
-<script src="https://cdn.ihooman.ai/widget/v2.0.2/chat.min.js"
-        integrity="sha384-BwEKqYlBOyZlghqPlT66iCF9MHI95yjpzfbgdeTbQvbEoeP3fC9+BD2L9TOSjIQ1"
+<script src="https://cdn.ihooman.ai/widget/v2.2.1/chat.min.js"
+        integrity="sha384-1TV7Gv8ewoNYzwRYWcYawDbU+vZ1q/cdsNPV1K8xrEf84hOpCzsgd76EhE5471rV"
         crossorigin="anonymous"></script>
 <script>
   IhoomanChat.init({

package/cdn/health.json

@@ -1,6 +1,6 @@
 {
   "status": "healthy",
   "service": "ihooman-chat-widget-cdn",
-  "version": "2.0.2",
-  "timestamp": "2026-01-31T18:35:43.908Z"
+  "version": "2.2.1",
+  "timestamp": "2026-02-01T13:15:35.563Z"
 }

package/cdn/latest/chat.js

@@ -1,5 +1,5 @@
 /**
- * @ihoomanai/chat-widget v2.0.2
+ * @ihoomanai/chat-widget v2.2.1
  * Universal chat support widget for any website - secure Widget ID based initialization
  * 
  * @license MIT
@@ -69,6 +69,8 @@
       minimize: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line></svg>`,
       refresh: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
       bot: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"></rect><circle cx="12" cy="5" r="2"></circle><path d="M12 7v4"></path></svg>`,
+      agent: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>`,
+      ticket: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><line x1="10" y1="9" x2="8" y2="9"></line></svg>`,
   };
   /**
    * Internal widget state
@@ -82,6 +84,7 @@
       visitorId: null,
       unreadCount: 0,
   };
+  let isLiveAgentMode = false;
   let elements = {};
   const eventListeners = {};
   /**
@@ -260,6 +263,41 @@
     .ihooman-powered { text-align: center; padding: 8px; font-size: 11px; color: ${mutedColor}; background: ${bgColor}; }
     .ihooman-powered a { color: ${primaryColor}; text-decoration: none; }
     .ihooman-error { padding: 16px; text-align: center; color: #ef4444; background: ${bgColor}; }
+    .ihooman-escalation-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
+    .ihooman-escalation-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; transition: all 0.2s ease; }
+    .ihooman-escalation-btn svg { width: 16px; height: 16px; }
+    .ihooman-escalation-btn.primary { background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; }
+    .ihooman-escalation-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3); }
+    .ihooman-escalation-btn.secondary { background: ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'}; color: ${textColor}; border: 1px solid ${borderColor}; }
+    .ihooman-escalation-btn.secondary:hover { background: ${isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.08)'}; }
+    .ihooman-escalation-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+    .ihooman-status-bar { padding: 10px 16px; text-align: center; font-size: 13px; display: none; }
+    .ihooman-status-bar.show { display: block; }
+    .ihooman-status-bar.waiting { background: #fef3c7; color: #92400e; }
+    .ihooman-status-bar.connected { background: #dcfce7; color: #166534; }
+    .ihooman-chat-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
+    .ihooman-chat-view.hidden { display: none; }
+    .ihooman-ticket-view { display: none; flex-direction: column; padding: 20px; gap: 16px; background: ${bgColor}; flex: 1; overflow-y: auto; }
+    .ihooman-ticket-view.show { display: flex; }
+    .ihooman-ticket-title { font-size: 18px; font-weight: 600; color: ${textColor}; margin: 0; display: flex; align-items: center; gap: 8px; }
+    .ihooman-ticket-subtitle { font-size: 13px; color: ${mutedColor}; margin: 0; }
+    .ihooman-ticket-input { padding: 12px 14px; border: 1px solid ${borderColor}; border-radius: 10px; font-size: 14px; font-family: inherit; background: ${inputBg}; color: ${textColor}; outline: none; transition: border-color 0.2s; }
+    .ihooman-ticket-input:focus { border-color: ${primaryColor}; }
+    .ihooman-ticket-input::placeholder { color: ${mutedColor}; }
+    .ihooman-ticket-textarea { min-height: 100px; resize: vertical; }
+    .ihooman-ticket-submit { padding: 14px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
+    .ihooman-ticket-submit:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3); }
+    .ihooman-ticket-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+    .ihooman-ticket-back { padding: 10px; background: transparent; color: ${mutedColor}; border: 1px solid ${borderColor}; border-radius: 10px; font-size: 13px; cursor: pointer; transition: all 0.2s; }
+    .ihooman-ticket-back:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)'}; }
+    .ihooman-action-buttons { display: flex; gap: 8px; padding: 0 16px 12px; }
+    .ihooman-action-btn { flex: 1; padding: 10px; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s; }
+    .ihooman-action-btn svg { width: 16px; height: 16px; }
+    .ihooman-action-btn.ticket { background: #6366f1; color: white; }
+    .ihooman-action-btn.ticket:hover { background: #4f46e5; }
+    .ihooman-action-btn.live { background: #10b981; color: white; }
+    .ihooman-action-btn.live:hover { background: #059669; }
+    .ihooman-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
     @media (max-width: 480px) { .ihooman-window { width: calc(100vw - 20px); height: calc(100vh - 100px); left: 10px; right: 10px; bottom: 80px; max-height: none; } .ihooman-toggle { ${positionRight ? 'right: 16px' : 'left: 16px'}; bottom: 16px; } }
   `;
   }
@@ -298,14 +336,41 @@
             <button class="ihooman-header-btn" data-action="minimize" title="Minimize">${icons.minimize}</button>
           </div>
         </div>
-        <div class="ihooman-messages" role="log" aria-live="polite"></div>
-        <div class="ihooman-input-area">
-          <div class="ihooman-input-wrapper">
-            ${config.enableFileUpload ? `<button class="ihooman-input-btn attach" title="Attach file">${icons.attach}</button><input type="file" class="ihooman-file-input">` : ''}
-            <textarea class="ihooman-input" placeholder="${escapeHtml(config.placeholder || 'Type a message...')}" rows="1" aria-label="Message input"></textarea>
-            <button class="ihooman-input-btn send" title="Send message" disabled>${icons.send}</button>
+        
+        <!-- Chat View -->
+        <div class="ihooman-chat-view">
+          <div class="ihooman-status-bar"></div>
+          <div class="ihooman-messages" role="log" aria-live="polite"></div>
+          <div class="ihooman-action-buttons">
+            <button class="ihooman-action-btn ticket" data-action="show-ticket">
+              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
+              Submit Ticket
+            </button>
+            <button class="ihooman-action-btn live" data-action="live-agent">
+              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+              Live Agent
+            </button>
           </div>
+          <div class="ihooman-input-area">
+            <div class="ihooman-input-wrapper">
+              ${config.enableFileUpload ? `<button class="ihooman-input-btn attach" title="Attach file">${icons.attach}</button><input type="file" class="ihooman-file-input">` : ''}
+              <textarea class="ihooman-input" placeholder="${escapeHtml(config.placeholder || 'Type a message...')}" rows="1" aria-label="Message input"></textarea>
+              <button class="ihooman-input-btn send" title="Send message" disabled>${icons.send}</button>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Ticket Form View -->
+        <div class="ihooman-ticket-view">
+          <h4 class="ihooman-ticket-title">📝 Submit a Ticket</h4>
+          <p class="ihooman-ticket-subtitle">We'll get back to you via email</p>
+          <input class="ihooman-ticket-input" id="ihooman-ticket-name" placeholder="Your name" required>
+          <input class="ihooman-ticket-input" id="ihooman-ticket-email" type="email" placeholder="Your email" required>
+          <textarea class="ihooman-ticket-input ihooman-ticket-textarea" id="ihooman-ticket-issue" placeholder="Describe your issue..."></textarea>
+          <button class="ihooman-ticket-submit" id="ihooman-ticket-submit">Submit Ticket</button>
+          <button class="ihooman-ticket-back" id="ihooman-ticket-back">← Back to Chat</button>
         </div>
+        
         ${config.poweredBy ? `<div class="ihooman-powered">Powered by <a href="https://ihooman.ai" target="_blank" rel="noopener">Ihooman AI</a></div>` : ''}
       </div>
     </div>
@@ -317,6 +382,8 @@
           toggle: widget.querySelector('.ihooman-toggle'),
           badge: widget.querySelector('.ihooman-badge'),
           window: widget.querySelector('.ihooman-window'),
+          chatView: widget.querySelector('.ihooman-chat-view'),
+          ticketView: widget.querySelector('.ihooman-ticket-view'),
           messages: widget.querySelector('.ihooman-messages'),
           input: widget.querySelector('.ihooman-input'),
           sendBtn: widget.querySelector('.ihooman-input-btn.send'),
@@ -324,6 +391,12 @@
           fileInput: widget.querySelector('.ihooman-file-input'),
           statusDot: widget.querySelector('.ihooman-status-dot'),
           statusText: widget.querySelector('.ihooman-status-text'),
+          statusBar: widget.querySelector('.ihooman-status-bar'),
+          ticketName: widget.querySelector('#ihooman-ticket-name'),
+          ticketEmail: widget.querySelector('#ihooman-ticket-email'),
+          ticketIssue: widget.querySelector('#ihooman-ticket-issue'),
+          ticketSubmitBtn: widget.querySelector('#ihooman-ticket-submit'),
+          ticketBackBtn: widget.querySelector('#ihooman-ticket-back'),
       };
       // Set up event listeners
       setupEventListeners();
@@ -358,6 +431,16 @@
       }
       elements.widget?.querySelector('[data-action="refresh"]')?.addEventListener('click', startNewConversation);
       elements.widget?.querySelector('[data-action="minimize"]')?.addEventListener('click', close);
+      // Action buttons - Submit Ticket and Live Agent
+      elements.widget?.querySelector('[data-action="show-ticket"]')?.addEventListener('click', handleShowTicketForm);
+      elements.widget?.querySelector('[data-action="live-agent"]')?.addEventListener('click', handleRequestLiveAgent);
+      // Ticket form buttons
+      if (elements.ticketSubmitBtn) {
+          elements.ticketSubmitBtn.addEventListener('click', handleSubmitTicket);
+      }
+      if (elements.ticketBackBtn) {
+          elements.ticketBackBtn.addEventListener('click', () => showView('chat'));
+      }
   }
   // ============================================================================
   // MESSAGING
@@ -378,10 +461,39 @@
           return message;
       const el = document.createElement('div');
       el.className = `ihooman-message ${sender}`;
+      // Check if this message should show escalation buttons
+      const showEscalationButtons = sender === 'bot' && metadata?.escalation_offered === true;
+      let escalationButtonsHtml = '';
+      if (showEscalationButtons) {
+          escalationButtonsHtml = `
+      <div class="ihooman-escalation-actions">
+        <button class="ihooman-escalation-btn primary" data-action="live-agent">
+          ${icons.agent}
+          <span>Talk to Agent</span>
+        </button>
+        <button class="ihooman-escalation-btn secondary" data-action="create-ticket">
+          ${icons.ticket}
+          <span>Create Ticket</span>
+        </button>
+      </div>
+    `;
+      }
       el.innerHTML = `
     <div class="ihooman-message-content">${parseMarkdown(content)}</div>
+    ${escalationButtonsHtml}
     ${config.showTimestamps ? `<div class="ihooman-message-time">${formatTime(message.timestamp)}</div>` : ''}
   `;
+      // Add event listeners for escalation buttons
+      if (showEscalationButtons) {
+          const liveAgentBtn = el.querySelector('[data-action="live-agent"]');
+          const ticketBtn = el.querySelector('[data-action="create-ticket"]');
+          if (liveAgentBtn) {
+              liveAgentBtn.addEventListener('click', () => handleEscalationAction('live-agent'));
+          }
+          if (ticketBtn) {
+              ticketBtn.addEventListener('click', () => handleEscalationAction('create-ticket'));
+          }
+      }
       // Remove typing indicator if present
       const typing = elements.messages.querySelector('.ihooman-typing');
       if (typing)
@@ -400,6 +512,250 @@
       emit('message', message);
       return message;
   }
+  /**
+   * Handle escalation action button clicks
+   */
+  function handleEscalationAction(action) {
+      // Disable all escalation buttons to prevent double-clicks
+      const buttons = document.querySelectorAll('.ihooman-escalation-btn');
+      buttons.forEach(btn => btn.disabled = true);
+      if (action === 'live-agent') {
+          handleRequestLiveAgent();
+      }
+      else if (action === 'create-ticket') {
+          handleShowTicketForm();
+      }
+  }
+  /**
+   * Switch between chat and ticket views
+   */
+  function showView(view) {
+      if (elements.chatView) {
+          elements.chatView.classList.toggle('hidden', view !== 'chat');
+      }
+      if (elements.ticketView) {
+          elements.ticketView.classList.toggle('show', view === 'ticket');
+      }
+  }
+  /**
+   * Show the ticket form
+   */
+  function handleShowTicketForm() {
+      showView('ticket');
+      // Focus on name input
+      setTimeout(() => elements.ticketName?.focus(), 100);
+  }
+  /**
+   * Update the status bar display
+   */
+  function updateStatusBar(status, message) {
+      if (!elements.statusBar)
+          return;
+      if (status === 'hidden') {
+          elements.statusBar.classList.remove('show');
+          return;
+      }
+      elements.statusBar.classList.add('show');
+      elements.statusBar.classList.remove('waiting', 'connected');
+      elements.statusBar.classList.add(status);
+      if (message) {
+          elements.statusBar.textContent = message;
+      }
+  }
+  /**
+   * Submit a ticket via the API
+   */
+  async function handleSubmitTicket() {
+      const name = elements.ticketName?.value.trim();
+      const email = elements.ticketEmail?.value.trim();
+      const issue = elements.ticketIssue?.value.trim();
+      if (!name || !email) {
+          alert('Please fill in your name and email');
+          return;
+      }
+      if (elements.ticketSubmitBtn) {
+          elements.ticketSubmitBtn.disabled = true;
+          elements.ticketSubmitBtn.textContent = 'Submitting...';
+      }
+      try {
+          const response = await fetch(`${config.serverUrl}/api/v1/public/submit-ticket`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                  session_id: state.sessionId,
+                  user_name: name,
+                  user_email: email,
+                  issue: issue || 'No description provided',
+                  escalation_type: 'ticket',
+                  widget_id: config.widgetId,
+              }),
+          });
+          const data = await response.json();
+          // Clear form
+          if (elements.ticketName)
+              elements.ticketName.value = '';
+          if (elements.ticketEmail)
+              elements.ticketEmail.value = '';
+          if (elements.ticketIssue)
+              elements.ticketIssue.value = '';
+          // Switch back to chat view
+          showView('chat');
+          // Show success message
+          const ticketRef = data.ticket_id ? data.ticket_id.slice(0, 8) : 'submitted';
+          addMessage(`✅ Ticket submitted! We'll contact you at ${email}. Reference: #${ticketRef}`, 'bot', { is_system_message: true });
+      }
+      catch (error) {
+          console.error('Error submitting ticket:', error);
+          addMessage('❌ Error submitting ticket. Please try again.', 'bot', { is_system_message: true });
+      }
+      if (elements.ticketSubmitBtn) {
+          elements.ticketSubmitBtn.disabled = false;
+          elements.ticketSubmitBtn.textContent = 'Submit Ticket';
+      }
+  }
+  /**
+   * Request a live agent via the API
+   */
+  async function handleRequestLiveAgent() {
+      if (!state.sessionId) {
+          addMessage('Please send a message first to start a conversation.', 'bot', { is_system_message: true });
+          return;
+      }
+      // Disable live agent button
+      const liveBtn = elements.widget?.querySelector('[data-action="live-agent"]');
+      if (liveBtn) {
+          liveBtn.disabled = true;
+          liveBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> Connecting...';
+      }
+      try {
+          const response = await fetch(`${config.serverUrl}/api/v1/public/live-agent`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                  session_id: state.sessionId,
+                  visitor_id: state.visitorId,
+                  widget_id: config.widgetId,
+              }),
+          });
+          const data = await response.json();
+          isLiveAgentMode = true;
+          // Show status bar - always start with waiting since agent hasn't accepted yet
+          if (data.position_in_queue && data.position_in_queue > 1) {
+              updateStatusBar('waiting', `⏳ Waiting for agent (Position: #${data.position_in_queue})`);
+          }
+          else {
+              updateStatusBar('waiting', '⏳ Connecting to live support...');
+          }
+          // Hide action buttons when in live agent mode
+          const actionsDiv = elements.widget?.querySelector('.ihooman-action-buttons');
+          if (actionsDiv) {
+              actionsDiv.style.display = 'none';
+          }
+          // Start polling for agent messages
+          startLiveAgentPolling();
+      }
+      catch (error) {
+          console.error('Error requesting live agent:', error);
+          addMessage('❌ Unable to connect to live support. Please try again.', 'bot', { is_system_message: true });
+      }
+      // Re-enable button
+      if (liveBtn) {
+          liveBtn.disabled = false;
+          liveBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> Live Agent';
+      }
+  }
+  /**
+   * Live agent polling interval
+   */
+  let liveAgentPollInterval = null;
+  let lastMessageCount = 0;
+  /**
+   * Start polling for live agent messages
+   */
+  function startLiveAgentPolling() {
+      if (liveAgentPollInterval)
+          return;
+      liveAgentPollInterval = setInterval(async () => {
+          if (!state.sessionId || !isLiveAgentMode) {
+              stopLiveAgentPolling();
+              return;
+          }
+          try {
+              const response = await fetch(`${config.serverUrl}/api/v1/public/transcript/${state.sessionId}`, {
+                  headers: { 'Content-Type': 'application/json' },
+              });
+              if (!response.ok)
+                  return;
+              const data = await response.json();
+              const msgCount = data.messages?.length || 0;
+              // Check for new messages
+              if (msgCount > lastMessageCount) {
+                  // Get only new messages
+                  const newMessages = data.messages.slice(lastMessageCount);
+                  newMessages.forEach((msg) => {
+                      // Only add agent messages (user messages are already shown)
+                      if (msg.sender_type === 'agent') {
+                          addMessage(msg.content, 'bot', { agent_name: 'Agent' });
+                      }
+                      else if (msg.sender_type === 'ai' && msg.content.includes('connected to live support')) {
+                          // System message about connection
+                          addMessage(msg.content, 'bot', { is_system_message: true });
+                      }
+                  });
+                  lastMessageCount = msgCount;
+              }
+              // Check if conversation was closed
+              if (data.status === 'closed') {
+                  isLiveAgentMode = false;
+                  stopLiveAgentPolling();
+                  updateStatusBar('hidden');
+                  addMessage('This conversation has been closed. Thank you for contacting us!', 'bot', { is_system_message: true });
+                  // Show action buttons again
+                  const actionsDiv = elements.widget?.querySelector('.ihooman-action-buttons');
+                  if (actionsDiv) {
+                      actionsDiv.style.display = 'flex';
+                  }
+              }
+              // Update queue position and connection status
+              try {
+                  const escResponse = await fetch(`${config.serverUrl}/api/v1/public/escalation-status/${state.sessionId}`);
+                  if (escResponse.ok) {
+                      const escData = await escResponse.json();
+                      if (escData.escalated) {
+                          if (escData.ticket_status === 'in_progress') {
+                              // Agent has accepted - show connected status
+                              updateStatusBar('connected', '🟢 Connected to live agent');
+                          }
+                          else if (escData.ticket_status === 'open') {
+                              // Still waiting in queue
+                              if (escData.position_in_queue && escData.position_in_queue > 1) {
+                                  updateStatusBar('waiting', `⏳ Waiting for agent (Position: #${escData.position_in_queue})`);
+                              }
+                              else {
+                                  updateStatusBar('waiting', '⏳ Waiting for agent...');
+                              }
+                          }
+                      }
+                  }
+              }
+              catch {
+                  // Ignore escalation status errors
+              }
+          }
+          catch (error) {
+              console.error('Error polling for messages:', error);
+          }
+      }, 3000);
+  }
+  /**
+   * Stop live agent polling
+   */
+  function stopLiveAgentPolling() {
+      if (liveAgentPollInterval) {
+          clearInterval(liveAgentPollInterval);
+          liveAgentPollInterval = null;
+      }
+  }
   /**
    * Show typing indicator
    */
@@ -610,6 +966,8 @@
                       addMessage(data.content, sender, {
                           confidence: data.confidence,
                           agent_name: data.agent_name,
+                          escalation_offered: data.escalation_offered,
+                          escalated: data.escalated,
                       });
                   }
                   else if (data.type === 'typing') {
@@ -761,6 +1119,8 @@
   function destroy() {
       // Stop heartbeat
       stopHeartbeat();
+      // Stop live agent polling
+      stopLiveAgentPolling();
       // Close WebSocket
       if (ws) {
           ws.close();