@ihoomanai/chat-widget 2.1.0 → 2.2.0

package/src/widget.ts

@@ -87,6 +87,13 @@ let state: WidgetState = {
   unreadCount: 0,
 };
 
+/**
+ * Current view state
+ */
+type WidgetView = 'chat' | 'ticket';
+let currentView: WidgetView = 'chat';
+let isLiveAgentMode = false;
+
 /**
  * DOM element references
  */
@@ -95,6 +102,8 @@ interface WidgetElements {
   toggle?: HTMLButtonElement;
   badge?: HTMLElement;
   window?: HTMLElement;
+  chatView?: HTMLElement;
+  ticketView?: HTMLElement;
   messages?: HTMLElement;
   input?: HTMLTextAreaElement;
   sendBtn?: HTMLButtonElement;
@@ -102,6 +111,12 @@ interface WidgetElements {
   fileInput?: HTMLInputElement | null;
   statusDot?: HTMLElement;
   statusText?: HTMLElement;
+  statusBar?: HTMLElement;
+  ticketName?: HTMLInputElement;
+  ticketEmail?: HTMLInputElement;
+  ticketIssue?: HTMLTextAreaElement;
+  ticketSubmitBtn?: HTMLButtonElement;
+  ticketBackBtn?: HTMLButtonElement;
 }
 
 let elements: WidgetElements = {};
@@ -310,6 +325,33 @@ function generateStyles(): string {
     .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; } }
   `;
 }
@@ -352,14 +394,41 @@ function createWidget(): void {
             <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>
@@ -373,6 +442,8 @@ function createWidget(): void {
     toggle: widget.querySelector('.ihooman-toggle') as HTMLButtonElement,
     badge: widget.querySelector('.ihooman-badge') as HTMLElement,
     window: widget.querySelector('.ihooman-window') as HTMLElement,
+    chatView: widget.querySelector('.ihooman-chat-view') as HTMLElement,
+    ticketView: widget.querySelector('.ihooman-ticket-view') as HTMLElement,
     messages: widget.querySelector('.ihooman-messages') as HTMLElement,
     input: widget.querySelector('.ihooman-input') as HTMLTextAreaElement,
     sendBtn: widget.querySelector('.ihooman-input-btn.send') as HTMLButtonElement,
@@ -380,6 +451,12 @@ function createWidget(): void {
     fileInput: widget.querySelector('.ihooman-file-input') as HTMLInputElement | null,
     statusDot: widget.querySelector('.ihooman-status-dot') as HTMLElement,
     statusText: widget.querySelector('.ihooman-status-text') as HTMLElement,
+    statusBar: widget.querySelector('.ihooman-status-bar') as HTMLElement,
+    ticketName: widget.querySelector('#ihooman-ticket-name') as HTMLInputElement,
+    ticketEmail: widget.querySelector('#ihooman-ticket-email') as HTMLInputElement,
+    ticketIssue: widget.querySelector('#ihooman-ticket-issue') as HTMLTextAreaElement,
+    ticketSubmitBtn: widget.querySelector('#ihooman-ticket-submit') as HTMLButtonElement,
+    ticketBackBtn: widget.querySelector('#ihooman-ticket-back') as HTMLButtonElement,
   };
 
   // Set up event listeners
@@ -419,6 +496,18 @@ function setupEventListeners(): void {
 
   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'));
+  }
 }
 
 
@@ -511,15 +600,259 @@ function handleEscalationAction(action: 'live-agent' | 'create-ticket'): void {
   buttons.forEach(btn => (btn as HTMLButtonElement).disabled = true);
   
   if (action === 'live-agent') {
-    // Send message to request live agent
-    addMessage('Connect me with a live agent', 'user');
-    showTyping();
-    sendMessageToServer('Connect me with a live agent');
+    handleRequestLiveAgent();
   } else if (action === 'create-ticket') {
-    // Send message to create ticket
-    addMessage('I would like to create a support ticket', 'user');
-    showTyping();
-    sendMessageToServer('I would like to create a support ticket');
+    handleShowTicketForm();
+  }
+}
+
+/**
+ * Switch between chat and ticket views
+ */
+function showView(view: 'chat' | 'ticket'): void {
+  currentView = 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(): void {
+  showView('ticket');
+  // Focus on name input
+  setTimeout(() => elements.ticketName?.focus(), 100);
+}
+
+/**
+ * Update the status bar display
+ */
+function updateStatusBar(status: 'waiting' | 'connected' | 'hidden', message?: string): void {
+  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(): Promise<void> {
+  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(): Promise<void> {
+  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"]') as HTMLButtonElement;
+  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
+    if (data.position_in_queue && data.position_in_queue > 1) {
+      updateStatusBar('waiting', `⏳ Waiting for agent (Position: #${data.position_in_queue})`);
+    } else {
+      updateStatusBar('connected', '🟢 Connected to live support');
+    }
+    
+    // Hide action buttons when in live agent mode
+    const actionsDiv = elements.widget?.querySelector('.ihooman-action-buttons') as HTMLElement;
+    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: ReturnType<typeof setInterval> | null = null;
+let lastMessageCount = 0;
+
+/**
+ * Start polling for live agent messages
+ */
+function startLiveAgentPolling(): void {
+  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: { sender_type: string; content: string }) => {
+          // 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') as HTMLElement;
+        if (actionsDiv) {
+          actionsDiv.style.display = 'flex';
+        }
+      }
+      
+      // Update queue position
+      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') {
+              updateStatusBar('connected', '🟢 Connected to live agent');
+            } else if (escData.ticket_status === 'open' && escData.position_in_queue > 1) {
+              updateStatusBar('waiting', `⏳ Waiting for agent (Position: #${escData.position_in_queue})`);
+            }
+          }
+        }
+      } catch {
+        // Ignore escalation status errors
+      }
+      
+    } catch (error) {
+      console.error('Error polling for messages:', error);
+    }
+  }, 3000);
+}
+
+/**
+ * Stop live agent polling
+ */
+function stopLiveAgentPolling(): void {
+  if (liveAgentPollInterval) {
+    clearInterval(liveAgentPollInterval);
+    liveAgentPollInterval = null;
   }
 }
 
@@ -917,6 +1250,9 @@ function destroy(): void {
   // Stop heartbeat
   stopHeartbeat();
   
+  // Stop live agent polling
+  stopLiveAgentPolling();
+  
   // Close WebSocket
   if (ws) {
     ws.close();