@ihoomanai/chat-widget 2.4.0 → 2.5.1

package/src/widget.ts

@@ -72,6 +72,9 @@ const icons = {
   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>`,
+  history: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>`,
+  back: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>`,
+  plus: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>`,
 };
 
 /**
@@ -90,7 +93,7 @@ let state: WidgetState = {
 /**
  * Current view state
  */
-type WidgetView = 'chat' | 'ticket';
+type WidgetView = 'chat' | 'ticket' | 'history';
 let currentView: WidgetView = 'chat';
 let isLiveAgentMode = false;
 
@@ -104,6 +107,9 @@ interface WidgetElements {
   window?: HTMLElement;
   chatView?: HTMLElement;
   ticketView?: HTMLElement;
+  historyView?: HTMLElement;
+  historyList?: HTMLElement;
+  historyNewBtn?: HTMLButtonElement;
   messages?: HTMLElement;
   input?: HTMLTextAreaElement;
   sendBtn?: HTMLButtonElement;
@@ -129,6 +135,7 @@ let ws: WebSocket | null = null;
 let pollInterval: ReturnType<typeof setInterval> | null = null;
 let reconnectAttempts = 0;
 const maxReconnectAttempts = 5;
+let intentionalDisconnect = false; // Flag to prevent reconnection on intentional close
 
 
 // ============================================================================
@@ -257,9 +264,10 @@ function generateStyles(): string {
     .ihooman-toggle:active { transform: scale(0.95); }
     .ihooman-toggle::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent); border-radius: 50%; }
     .ihooman-toggle svg { width: 26px; height: 26px; color: white; transition: transform 0.3s ease, opacity 0.2s ease; position: relative; z-index: 1; }
-    .ihooman-toggle.open svg.chat-icon { transform: rotate(90deg) scale(0); opacity: 0; }
-    .ihooman-toggle.open svg.close-icon { transform: rotate(0) scale(1); opacity: 1; }
-    .ihooman-toggle svg.close-icon { position: absolute; transform: rotate(-90deg) scale(0); opacity: 0; }
+    .ihooman-toggle .chat-icon { display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, opacity 0.2s ease; }
+    .ihooman-toggle .close-icon { position: absolute; display: flex; align-items: center; justify-content: center; transform: rotate(-90deg) scale(0); opacity: 0; transition: transform 0.3s ease, opacity 0.2s ease; }
+    .ihooman-toggle.open .chat-icon { transform: rotate(90deg) scale(0); opacity: 0; }
+    .ihooman-toggle.open .close-icon { transform: rotate(0) scale(1); opacity: 1; }
     .ihooman-pulse { position: absolute; inset: 0; border-radius: 50%; background: ${primaryColor}; animation: ihooman-pulse 2s ease-out infinite; }
     @keyframes ihooman-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }
     .ihooman-toggle.open .ihooman-pulse { display: none; }
@@ -280,7 +288,7 @@ function generateStyles(): string {
     .ihooman-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
     .ihooman-status-dot.offline { background: #f59e0b; }
     .ihooman-header-actions { display: flex; gap: 8px; }
-    .ihooman-header-btn { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.15); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; transition: background 0.2s; }
+    .ihooman-header-btn { width: 32px; height: 32px; border-radius: 8px !important; background: rgba(255,255,255,0.15); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; transition: background 0.2s; }
     .ihooman-header-btn:hover { background: rgba(255,255,255,0.25); }
     .ihooman-header-btn svg { width: 16px; height: 16px; }
     .ihooman-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: ${bgColor}; }
@@ -317,14 +325,14 @@ function generateStyles(): string {
     .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-escalation-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
+    .ihooman-widget .ihooman-escalation-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 18px !important; border-radius: 8px !important; border: none !important; cursor: pointer !important; font-family: inherit !important; font-size: 13px !important; font-weight: 500 !important; transition: all 0.2s ease !important; width: auto !important; height: auto !important; min-width: 120px !important; }
+    .ihooman-widget .ihooman-escalation-btn svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
+    .ihooman-widget .ihooman-escalation-btn.primary { background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}) !important; color: white !important; }
+    .ihooman-widget .ihooman-escalation-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3); }
+    .ihooman-widget .ihooman-escalation-btn.secondary { background: ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'} !important; color: ${textColor} !important; border: 1px solid ${borderColor} !important; }
+    .ihooman-widget .ihooman-escalation-btn.secondary:hover { background: ${isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.08)'} !important; }
+    .ihooman-widget .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; }
@@ -344,6 +352,20 @@ function generateStyles(): string {
     .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-history-view { display: none; flex-direction: column; flex: 1; overflow: hidden; background: ${bgColor}; }
+    .ihooman-history-view.show { display: flex; }
+    .ihooman-history-header { padding: 12px 16px; border-bottom: 1px solid ${borderColor}; display: flex; justify-content: space-between; align-items: center; }
+    .ihooman-history-title { font-size: 14px; font-weight: 600; color: ${textColor}; margin: 0; }
+    .ihooman-history-new { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; padding: 8px 16px; border-radius: 8px !important; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
+    .ihooman-history-new:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 174, 255, 0.3); }
+    .ihooman-history-new svg { width: 14px; height: 14px; flex-shrink: 0; }
+    .ihooman-history-list { flex: 1; overflow-y: auto; padding: 8px; }
+    .ihooman-history-item { padding: 12px; border: 1px solid ${borderColor}; border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: all 0.2s; background: ${bgColor}; }
+    .ihooman-history-item:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : '#f8fafc'}; }
+    .ihooman-history-item.active { background: ${isDark ? 'rgba(0, 174, 255, 0.1)' : '#eff6ff'}; border-color: ${primaryColor}; }
+    .ihooman-history-preview { font-size: 13px; color: ${textColor}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .ihooman-history-meta { font-size: 11px; color: ${mutedColor}; margin-top: 4px; display: flex; justify-content: space-between; }
+    .ihooman-history-empty { padding: 40px; text-align: center; color: ${mutedColor}; font-size: 14px; }
     @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; } }
   `;
 }
@@ -382,7 +404,8 @@ function createWidget(): void {
             <div class="ihooman-header-status"><span class="ihooman-status-dot"></span><span class="ihooman-status-text">Online</span></div>
           </div>
           <div class="ihooman-header-actions">
-            <button class="ihooman-header-btn" data-action="refresh" title="New conversation">${icons.refresh}</button>
+            <button class="ihooman-header-btn" data-action="history" title="Chat history">${icons.history}</button>
+            <button class="ihooman-header-btn" data-action="refresh" title="New conversation">${icons.plus}</button>
             <button class="ihooman-header-btn" data-action="minimize" title="Minimize">${icons.minimize}</button>
           </div>
         </div>
@@ -411,6 +434,15 @@ function createWidget(): void {
           <button class="ihooman-ticket-back" id="ihooman-ticket-back">← Back to Chat</button>
         </div>
         
+        <!-- History View -->
+        <div class="ihooman-history-view">
+          <div class="ihooman-history-header">
+            <span class="ihooman-history-title">Your Conversations</span>
+            <button class="ihooman-history-new">${icons.plus} New Chat</button>
+          </div>
+          <div class="ihooman-history-list"></div>
+        </div>
+        
         ${config.poweredBy ? `<div class="ihooman-powered">Powered by <a href="https://ihooman.ai" target="_blank" rel="noopener">Ihooman AI</a></div>` : ''}
       </div>
     </div>
@@ -426,6 +458,9 @@ function createWidget(): void {
     window: widget.querySelector('.ihooman-window') as HTMLElement,
     chatView: widget.querySelector('.ihooman-chat-view') as HTMLElement,
     ticketView: widget.querySelector('.ihooman-ticket-view') as HTMLElement,
+    historyView: widget.querySelector('.ihooman-history-view') as HTMLElement,
+    historyList: widget.querySelector('.ihooman-history-list') as HTMLElement,
+    historyNewBtn: widget.querySelector('.ihooman-history-new') as HTMLButtonElement,
     messages: widget.querySelector('.ihooman-messages') as HTMLElement,
     input: widget.querySelector('.ihooman-input') as HTMLTextAreaElement,
     sendBtn: widget.querySelector('.ihooman-input-btn.send') as HTMLButtonElement,
@@ -478,6 +513,7 @@ function setupEventListeners(): void {
 
   elements.widget?.querySelector('[data-action="refresh"]')?.addEventListener('click', startNewConversation);
   elements.widget?.querySelector('[data-action="minimize"]')?.addEventListener('click', close);
+  elements.widget?.querySelector('[data-action="history"]')?.addEventListener('click', toggleHistoryView);
   
   // Ticket form buttons
   if (elements.ticketSubmitBtn) {
@@ -486,6 +522,14 @@ function setupEventListeners(): void {
   if (elements.ticketBackBtn) {
     elements.ticketBackBtn.addEventListener('click', () => showView('chat'));
   }
+  
+  // History view buttons
+  if (elements.historyNewBtn) {
+    elements.historyNewBtn.addEventListener('click', () => {
+      startNewConversation();
+      showView('chat');
+    });
+  }
 }
 
 
@@ -585,9 +629,9 @@ function handleEscalationAction(action: 'live-agent' | 'create-ticket'): void {
 }
 
 /**
- * Switch between chat and ticket views
+ * Switch between chat, ticket, and history views
  */
-function showView(view: 'chat' | 'ticket'): void {
+function showView(view: 'chat' | 'ticket' | 'history'): void {
   currentView = view;
   
   if (elements.chatView) {
@@ -596,6 +640,177 @@ function showView(view: 'chat' | 'ticket'): void {
   if (elements.ticketView) {
     elements.ticketView.classList.toggle('show', view === 'ticket');
   }
+  if (elements.historyView) {
+    elements.historyView.classList.toggle('show', view === 'history');
+  }
+  
+  // Load history when showing history view
+  if (view === 'history') {
+    loadConversationHistory();
+  }
+}
+
+/**
+ * Toggle between chat and history views
+ */
+function toggleHistoryView(): void {
+  if (currentView === 'history') {
+    showView('chat');
+  } else {
+    showView('history');
+  }
+}
+
+/**
+ * Format time ago string
+ */
+function timeAgo(date: Date | string): string {
+  const diff = Date.now() - new Date(date).getTime();
+  if (diff < 60000) return 'now';
+  if (diff < 3600000) return Math.floor(diff / 60000) + 'm';
+  if (diff < 86400000) return Math.floor(diff / 3600000) + 'h';
+  return Math.floor(diff / 86400000) + 'd';
+}
+
+/**
+ * Conversation history item interface
+ */
+interface ConversationHistoryItem {
+  session_id: string;
+  preview: string;
+  message_count: number;
+  status: string;
+  updated_at: string;
+}
+
+/**
+ * Load conversation history from the server
+ */
+async function loadConversationHistory(): Promise<void> {
+  if (!elements.historyList || !state.visitorId) return;
+  
+  elements.historyList.innerHTML = '<div class="ihooman-history-empty">Loading...</div>';
+  
+  try {
+    const response = await fetch(
+      `${config.serverUrl}/api/widget/conversations?widget_id=${config.widgetId}&visitor_id=${state.visitorId}&limit=20`
+    );
+    
+    if (!response.ok) {
+      throw new Error('Failed to load history');
+    }
+    
+    const conversations: ConversationHistoryItem[] = await response.json();
+    
+    if (!conversations.length) {
+      elements.historyList.innerHTML = '<div class="ihooman-history-empty">No conversations yet</div>';
+      return;
+    }
+    
+    elements.historyList.innerHTML = conversations.map(conv => `
+      <div class="ihooman-history-item ${conv.session_id === state.sessionId ? 'active' : ''}" data-session-id="${conv.session_id}">
+        <div class="ihooman-history-preview">${escapeHtml(conv.preview || 'New conversation')}</div>
+        <div class="ihooman-history-meta">
+          <span>${conv.message_count} msgs</span>
+          <span>${conv.status === 'pending' ? '🟡 Pending' : conv.status === 'closed' ? '✓ Closed' : ''} ${timeAgo(conv.updated_at)}</span>
+        </div>
+      </div>
+    `).join('');
+    
+    // Add click handlers to history items
+    elements.historyList.querySelectorAll('.ihooman-history-item').forEach(item => {
+      item.addEventListener('click', () => {
+        const sessionId = (item as HTMLElement).dataset.sessionId;
+        if (sessionId) {
+          switchToConversation(sessionId);
+        }
+      });
+    });
+    
+  } catch (error) {
+    console.error('Error loading conversation history:', error);
+    elements.historyList.innerHTML = '<div class="ihooman-history-empty">Failed to load history</div>';
+  }
+}
+
+/**
+ * Switch to a specific conversation
+ */
+async function switchToConversation(sessionId: string): Promise<void> {
+  state.sessionId = sessionId;
+  if (config.persistSession) {
+    storage('session_id', sessionId);
+  }
+  
+  // Clear current messages
+  if (elements.messages) {
+    elements.messages.innerHTML = '';
+  }
+  
+  // Reset live agent mode
+  isLiveAgentMode = false;
+  stopLiveAgentPolling();
+  updateStatusBar('hidden');
+  
+  // Reconnect WebSocket with new session
+  intentionalDisconnect = true;
+  if (ws) {
+    ws.close();
+    ws = null;
+  }
+  connectWebSocket();
+  
+  // Switch to chat view
+  showView('chat');
+  
+  // Load conversation messages
+  await loadConversationMessages(sessionId);
+}
+
+/**
+ * Load messages for a specific conversation
+ */
+async function loadConversationMessages(sessionId: string): Promise<void> {
+  try {
+    const response = await fetch(
+      `${config.serverUrl}/api/widget/transcript/${sessionId}?widget_id=${config.widgetId}`
+    );
+    
+    if (!response.ok) {
+      throw new Error('Failed to load messages');
+    }
+    
+    const data = await response.json();
+    
+    if (elements.messages) {
+      elements.messages.innerHTML = '';
+    }
+    
+    // Add messages to the chat
+    if (data.messages && data.messages.length > 0) {
+      data.messages.forEach((msg: { content: string; sender_type: string; extra_data?: Record<string, unknown> }) => {
+        const sender = msg.sender_type === 'user' ? 'user' : 'bot';
+        addMessage(msg.content, sender, msg.extra_data || {});
+      });
+    } else if (config.welcomeMessage) {
+      addMessage(config.welcomeMessage, 'bot');
+    }
+    
+    // Check conversation status
+    if (data.status === 'pending') {
+      isLiveAgentMode = true;
+      startLiveAgentPolling();
+      updateStatusBar('waiting', '⏳ Waiting for agent...');
+    } else if (data.status === 'closed') {
+      updateStatusBar('hidden');
+    }
+    
+  } catch (error) {
+    console.error('Error loading conversation messages:', error);
+    if (config.welcomeMessage) {
+      addMessage(config.welcomeMessage, 'bot');
+    }
+  }
 }
 
 /**
@@ -991,6 +1206,12 @@ function connectWebSocket(chatEndpoint?: string): void {
       updateStatus(false);
       emit('disconnected');
       
+      // Don't reconnect if this was an intentional disconnect (e.g., starting new conversation)
+      if (intentionalDisconnect) {
+        intentionalDisconnect = false;
+        return;
+      }
+      
       // Attempt reconnection with exponential backoff
       if (reconnectAttempts < maxReconnectAttempts) {
         reconnectAttempts++;
@@ -1204,11 +1425,17 @@ function startNewConversation(): void {
   // Stop any live agent polling
   stopLiveAgentPolling();
   
-  // Reconnect WebSocket with new visitor ID (no session_id)
+  // Reset reconnect attempts for fresh connection
+  reconnectAttempts = 0;
+  
+  // Close existing WebSocket with intentional flag to prevent auto-reconnect
   if (ws) {
+    intentionalDisconnect = true;
     ws.close();
     ws = null;
   }
+  
+  // Connect with new visitor ID
   connectWebSocket();
   
   // Show welcome message
@@ -1229,7 +1456,8 @@ function destroy(): void {
   // Stop live agent polling
   stopLiveAgentPolling();
   
-  // Close WebSocket
+  // Close WebSocket (intentionally, don't reconnect)
+  intentionalDisconnect = true;
   if (ws) {
     ws.close();
     ws = null;
@@ -1262,6 +1490,7 @@ function destroy(): void {
   };
   elements = {};
   reconnectAttempts = 0;
+  intentionalDisconnect = false;
 }
 
 /**