@pindai-ai/chat-widget 2.0.0

package/src/main.js

@@ -0,0 +1,796 @@
+import './style.css';
+import { I18n } from './i18n.js';
+
+/**
+ * Pindai Chat Widget - Modern, Accessible, Indonesian-focused
+ * Version 2.0.0
+ */
+class PindaiChatWidget {
+  constructor(options) {
+    // Backward compatibility: support both webhookUrl and n8nUrl
+    const apiEndpoint = options.webhookUrl || options.n8nUrl;
+
+    if (!apiEndpoint) {
+      throw new Error('PindaiChatWidget: "webhookUrl" option is required.');
+    }
+
+    // Core configuration
+    this.webhookUrl = apiEndpoint;
+    this.mode = options.mode || 'widget';
+
+    // Internationalization
+    this.locale = options.locale || 'id'; // Default to Indonesian
+    this.i18n = new I18n(this.locale);
+
+    // UI customization
+    this.title = options.title || this.i18n.t('title');
+    this.initialMessage = options.initialMessage || this.i18n.t('initialMessage');
+    this.launcherIconUrl = options.launcherIconUrl || this.getDefaultIcon();
+
+    // Branding
+    this.logoUrl = options.logoUrl || 'https://pindai.ai/logo.png';
+    this.showLogo = options.showLogo !== false;
+    this.launcherColor = options.launcherColor || '#0066FF';
+    this.sendButtonColor = options.sendButtonColor || '#0066FF';
+    this.accentColor = options.accentColor || '#00C896';
+
+    // File upload configuration
+    this.enableFileUpload = options.enableFileUpload !== false;
+    this.allowedFileTypes = options.allowedFileTypes || [
+      'image/jpeg', 'image/png', 'image/gif', 'image/webp',
+      'application/pdf',
+      'application/msword',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      'application/vnd.ms-excel',
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    ];
+    this.maxFileSize = options.maxFileSize || 10 * 1024 * 1024; // 10MB
+    this.maxFiles = options.maxFiles || 5;
+    this.uploadedFiles = [];
+
+    // Notifications
+    this.enableNotifications = options.enableNotifications !== false;
+    this.enableSound = options.enableSound === true;
+    this.unreadCount = 0;
+
+    // Quick replies
+    this.showQuickReplies = options.showQuickReplies !== false;
+    this.quickReplies = options.quickReplies || [
+      this.i18n.t('quickReply1'),
+      this.i18n.t('quickReply2'),
+      this.i18n.t('quickReply3'),
+      this.i18n.t('quickReply4')
+    ];
+
+    // Message history
+    this.enableHistory = options.enableHistory !== false;
+    this.maxHistoryItems = options.maxHistoryItems || 50;
+    this.historyKey = `pindai-chat-history-${this.webhookUrl}`;
+    this.stateKey = `pindai-chat-state-${this.webhookUrl}`;
+
+    // Error handling & retry logic
+    this.maxRetries = options.maxRetries || 3;
+    this.retryDelay = options.retryDelay || 1000;
+    this.requestTimeout = options.requestTimeout || 30000;
+
+    // Rate limiting
+    this.rateLimit = options.rateLimit || 5;
+    this.rateLimitWindow = options.rateLimitWindow || 60000;
+    this.messageTimes = [];
+
+    // DOM references
+    this.container = null;
+    this.launcher = null;
+    this.chatWindow = null;
+    this.messageList = null;
+    this.input = null;
+    this.button = null;
+    this.closeButton = null;
+
+    // State
+    this.sessionId = `web-session-${Date.now()}-${Math.random()}`;
+    this.isLoading = false;
+    this.isOpen = false;
+    this.isOnline = navigator.onLine;
+
+    // Initialize
+    this.loadState();
+    this.setupOfflineDetection();
+
+    if (this.mode === 'fullscreen') {
+      this.initChatWindow();
+    } else {
+      this.initLauncher();
+    }
+  }
+
+  /**
+   * Initialize launcher button
+   */
+  initLauncher() {
+    this.launcher = document.createElement('div');
+    this.launcher.className = 'n8n-chat-launcher';
+    this.launcher.style.backgroundColor = this.launcherColor;
+    this.launcher.setAttribute('role', 'button');
+    this.launcher.setAttribute('aria-label', this.i18n.t('ariaOpenChat'));
+    this.launcher.setAttribute('tabindex', '0');
+    this.launcher.innerHTML = `
+      <img src="${this.launcherIconUrl}" alt="">
+      <span class="n8n-chat-unread-badge" style="display: none;">0</span>
+    `;
+    document.body.appendChild(this.launcher);
+
+    this.launcher.addEventListener('click', () => this.toggleChatWindow());
+    this.launcher.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        this.toggleChatWindow();
+      }
+    });
+  }
+
+  /**
+   * Initialize chat window
+   */
+  initChatWindow() {
+    this.container = document.createElement('div');
+    this.container.className = `n8n-chat-widget ${this.mode === 'fullscreen' ? 'n8n-chat-widget--fullscreen' : ''}`;
+    this.container.setAttribute('role', 'dialog');
+    this.container.setAttribute('aria-modal', 'true');
+    this.container.setAttribute('aria-label', this.title);
+
+    this.container.innerHTML = `
+      <div class="n8n-chat-header">
+        <div class="n8n-chat-header-content">
+          ${this.showLogo ? `<img src="${this.logoUrl}" alt="Pindai Logo" class="n8n-chat-logo">` : ''}
+          <span class="n8n-chat-title">${this.title}</span>
+        </div>
+        <button class="n8n-chat-close-btn" aria-label="${this.i18n.t('ariaCloseChat')}">&times;</button>
+      </div>
+      <div class="n8n-chat-messages" role="log" aria-live="polite" aria-atomic="false"></div>
+      <div class="n8n-chat-watermark">
+        <span>Powered by</span>
+        <a href="https://pindai.ai" target="_blank" rel="noopener noreferrer">Pindai.ai</a>
+      </div>
+      <div class="n8n-chat-input-area">
+        ${this.enableFileUpload ? `
+          <label class="n8n-chat-file-upload-btn" aria-label="${this.i18n.t('ariaUploadFile')}">
+            <input type="file" multiple accept="${this.allowedFileTypes.join(',')}" hidden>
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
+            </svg>
+          </label>
+        ` : ''}
+        <input type="text" placeholder="${this.i18n.t('placeholder')}" aria-label="${this.i18n.t('ariaMessageInput')}" />
+        <button class="n8n-chat-send-btn" style="background-color: ${this.sendButtonColor}" aria-label="${this.i18n.t('ariaSendMessage')}">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="22" y1="2" x2="11" y2="13"></line>
+            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+          </svg>
+        </button>
+      </div>
+      ${this.enableFileUpload ? '<div class="n8n-chat-file-preview" style="display: none;"></div>' : ''}
+    `;
+
+    if (this.mode === 'widget') {
+      document.body.appendChild(this.container);
+    } else {
+      document.body.innerHTML = '';
+      document.body.appendChild(this.container);
+      document.body.style.margin = '0';
+    }
+
+    // Get DOM references
+    this.messageList = this.container.querySelector('.n8n-chat-messages');
+    this.input = this.container.querySelector('input[type="text"]');
+    this.button = this.container.querySelector('.n8n-chat-send-btn');
+    this.closeButton = this.container.querySelector('.n8n-chat-close-btn');
+
+    // Event listeners
+    this.button.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.sendMessage();
+    });
+
+    this.input.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        this.sendMessage();
+      }
+    });
+
+    if (this.mode === 'fullscreen') {
+      this.closeButton.style.display = 'none';
+    } else {
+      this.closeButton.addEventListener('click', () => this.toggleChatWindow());
+    }
+
+    // File upload handler
+    if (this.enableFileUpload) {
+      const fileInput = this.container.querySelector('input[type="file"]');
+      fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
+    }
+
+    // Setup keyboard navigation
+    this.setupKeyboardNavigation();
+
+    // Load history and show initial message
+    this.loadHistory();
+    if (this.messageList.children.length === 0) {
+      this.addMessage(this.initialMessage, 'ai');
+    }
+  }
+
+  /**
+   * Toggle chat window open/close
+   */
+  toggleChatWindow() {
+    if (!this.isOpen) {
+      if (!this.container) {
+        this.initChatWindow();
+      }
+
+      setTimeout(() => {
+        this.container.classList.add('n8n-chat-widget--open');
+        if (this.launcher) {
+          this.launcher.classList.add('n8n-chat-launcher--hidden');
+        }
+        this.input.focus();
+        this.clearUnreadCount();
+      }, 10);
+    } else {
+      this.container.classList.remove('n8n-chat-widget--open');
+      if (this.launcher) {
+        this.launcher.classList.remove('n8n-chat-launcher--hidden');
+      }
+    }
+    this.isOpen = !this.isOpen;
+    this.saveState();
+  }
+
+  /**
+   * Get default chat icon
+   */
+  getDefaultIcon() {
+    const svgIcon = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+      </svg>
+    `;
+    return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svgIcon)}`;
+  }
+
+  /**
+   * Format timestamp for display
+   */
+  formatTimestamp(date) {
+    const now = new Date();
+    const diff = now - date;
+
+    if (diff < 60000) {
+      return this.i18n.t('justNow');
+    }
+    if (diff < 3600000) {
+      const minutes = Math.floor(diff / 60000);
+      return this.i18n.t('minutesAgo', { minutes });
+    }
+
+    return date.toLocaleTimeString(this.locale === 'id' ? 'id-ID' : 'en-US', {
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  }
+
+  /**
+   * Add message to chat
+   */
+  addMessage(text, sender, timestamp = new Date()) {
+    const messageBubble = document.createElement('div');
+    messageBubble.className = `n8n-chat-bubble n8n-chat-${sender}-message`;
+
+    const textNode = document.createElement('div');
+    textNode.className = 'n8n-chat-message-text';
+    textNode.textContent = text;
+
+    const timeNode = document.createElement('div');
+    timeNode.className = 'n8n-chat-message-timestamp';
+    timeNode.textContent = this.formatTimestamp(timestamp);
+    timeNode.setAttribute('data-timestamp', timestamp.toISOString());
+
+    messageBubble.appendChild(textNode);
+    messageBubble.appendChild(timeNode);
+    this.messageList.appendChild(messageBubble);
+
+    this.messageList.scrollTop = this.messageList.scrollHeight;
+
+    // Save to history
+    this.saveToHistory(text, sender, timestamp);
+
+    // Increment unread if chat closed and AI message
+    if (!this.isOpen && sender === 'ai') {
+      this.incrementUnread();
+    }
+  }
+
+  /**
+   * Show/hide typing indicator
+   */
+  showTypingIndicator(show) {
+    let indicator = this.messageList.querySelector('.n8n-chat-typing-indicator');
+    if (show) {
+      if (!indicator) {
+        indicator = document.createElement('div');
+        indicator.className = 'n8n-chat-bubble n8n-chat-ai-message n8n-chat-typing-indicator';
+        indicator.innerHTML = '<span></span><span></span><span></span>';
+        indicator.setAttribute('aria-label', this.i18n.t('typingIndicator'));
+        this.messageList.appendChild(indicator);
+        this.messageList.scrollTop = this.messageList.scrollHeight;
+      }
+    } else {
+      if (indicator) {
+        indicator.remove();
+      }
+    }
+  }
+
+  /**
+   * Handle file selection
+   */
+  handleFileSelect(event) {
+    const files = Array.from(event.target.files);
+
+    files.forEach(file => {
+      // Check file type
+      if (!this.allowedFileTypes.includes(file.type)) {
+        this.addMessage(
+          this.i18n.t('fileTypeNotSupported', { filename: file.name }),
+          'ai'
+        );
+        return;
+      }
+
+      // Check file size
+      if (file.size > this.maxFileSize) {
+        const maxSizeMB = this.maxFileSize / 1024 / 1024;
+        this.addMessage(
+          this.i18n.t('fileTooLarge', { filename: file.name, maxSize: maxSizeMB }),
+          'ai'
+        );
+        return;
+      }
+
+      // Check max files
+      if (this.uploadedFiles.length >= this.maxFiles) {
+        this.addMessage(
+          this.i18n.t('maxFilesExceeded', { maxFiles: this.maxFiles }),
+          'ai'
+        );
+        return;
+      }
+
+      this.uploadedFiles.push(file);
+      this.renderFilePreview(file);
+    });
+
+    event.target.value = ''; // Reset input
+  }
+
+  /**
+   * Render file preview
+   */
+  renderFilePreview(file) {
+    const preview = this.container.querySelector('.n8n-chat-file-preview');
+    if (!preview) return;
+
+    preview.style.display = 'flex';
+
+    const fileItem = document.createElement('div');
+    fileItem.className = 'n8n-chat-file-item';
+    fileItem.innerHTML = `
+      <span class="n8n-chat-file-name">${file.name}</span>
+      <button class="n8n-chat-file-remove" data-file="${file.name}" aria-label="${this.i18n.t('ariaRemoveFile')}">&times;</button>
+    `;
+
+    const removeBtn = fileItem.querySelector('.n8n-chat-file-remove');
+    removeBtn.addEventListener('click', () => {
+      this.uploadedFiles = this.uploadedFiles.filter(f => f.name !== file.name);
+      fileItem.remove();
+      if (this.uploadedFiles.length === 0) {
+        preview.style.display = 'none';
+      }
+    });
+
+    preview.appendChild(fileItem);
+  }
+
+  /**
+   * Send message with files
+   */
+  async sendMessage() {
+    const messageText = this.input.value.trim();
+    if ((!messageText && this.uploadedFiles.length === 0) || this.isLoading) return;
+
+    // Check rate limit
+    try {
+      this.checkRateLimit();
+    } catch (error) {
+      this.addMessage(error.message, 'ai');
+      return;
+    }
+
+    // Check online status
+    if (!this.isOnline) {
+      this.addMessage(this.i18n.t('connectionLost'), 'ai');
+      return;
+    }
+
+    this.isLoading = true;
+    this.button.disabled = true;
+    this.input.disabled = true;
+
+    if (messageText) {
+      this.addMessage(messageText, 'user');
+    }
+
+    this.input.value = '';
+    this.showTypingIndicator(true);
+
+    try {
+      const response = await this.sendMessageWithRetry(messageText, this.uploadedFiles);
+      this.addMessage(response, 'ai');
+
+      // Show quick replies after AI response
+      if (this.showQuickReplies && this.quickReplies.length > 0) {
+        this.renderQuickReplies();
+      }
+    } catch (error) {
+      const errorMessage = this.getErrorMessage(error);
+      this.addMessage(errorMessage, 'ai');
+    } finally {
+      this.isLoading = false;
+      this.button.disabled = false;
+      this.input.disabled = false;
+      this.showTypingIndicator(false);
+      this.input.focus();
+
+      // Clear uploaded files
+      if (this.uploadedFiles.length > 0) {
+        this.uploadedFiles = [];
+        const preview = this.container.querySelector('.n8n-chat-file-preview');
+        if (preview) {
+          preview.innerHTML = '';
+          preview.style.display = 'none';
+        }
+      }
+    }
+  }
+
+  /**
+   * Send message with retry logic
+   */
+  async sendMessageWithRetry(messageText, files = [], retryCount = 0) {
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), this.requestTimeout);
+
+      const formData = new FormData();
+      formData.append('sessionId', this.sessionId);
+      formData.append('message', messageText);
+
+      // Append files
+      files.forEach((file, index) => {
+        formData.append(`file${index}`, file);
+      });
+
+      const response = await fetch(this.webhookUrl, {
+        method: 'POST',
+        body: formData,
+        signal: controller.signal
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!response.ok) {
+        // Retry on 5xx errors
+        if (response.status >= 500 && retryCount < this.maxRetries) {
+          await this.delay(this.retryDelay * (retryCount + 1));
+          return this.sendMessageWithRetry(messageText, files, retryCount + 1);
+        }
+
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.message || `Network error: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      if (!data.response) {
+        throw new Error(this.i18n.t('errorInvalidResponse'));
+      }
+
+      return data.response;
+
+    } catch (error) {
+      if (error.name === 'AbortError') {
+        throw new Error(this.i18n.t('errorTimeout'));
+      }
+
+      // Retry on network errors
+      if (error.message.includes('NetworkError') && retryCount < this.maxRetries) {
+        await this.delay(this.retryDelay * (retryCount + 1));
+        return this.sendMessageWithRetry(messageText, files, retryCount + 1);
+      }
+
+      throw error;
+    }
+  }
+
+  /**
+   * Delay helper
+   */
+  delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  /**
+   * Get user-friendly error message
+   */
+  getErrorMessage(error) {
+    if (error.message.includes('timeout') || error.message.includes('Timeout')) {
+      return this.i18n.t('errorTimeout');
+    }
+    if (error.message.includes('NetworkError') || error.message.includes('Failed to fetch')) {
+      return this.i18n.t('errorNetwork');
+    }
+    if (error.message.includes('500') || error.message.includes('503')) {
+      return this.i18n.t('errorServer');
+    }
+    return this.i18n.t('errorGeneric');
+  }
+
+  /**
+   * Check rate limit
+   */
+  checkRateLimit() {
+    const now = Date.now();
+    this.messageTimes = this.messageTimes.filter(
+      time => now - time < this.rateLimitWindow
+    );
+
+    if (this.messageTimes.length >= this.rateLimit) {
+      const oldestTime = this.messageTimes[0];
+      const waitTime = Math.ceil((this.rateLimitWindow - (now - oldestTime)) / 1000);
+      throw new Error(this.i18n.t('errorRateLimit', { seconds: waitTime }));
+    }
+
+    this.messageTimes.push(now);
+  }
+
+  /**
+   * Render quick reply buttons
+   */
+  renderQuickReplies(replies = this.quickReplies) {
+    if (!this.showQuickReplies || replies.length === 0) return;
+
+    // Remove existing quick replies
+    const existingReplies = this.messageList.querySelector('.n8n-chat-quick-replies');
+    if (existingReplies) existingReplies.remove();
+
+    const repliesContainer = document.createElement('div');
+    repliesContainer.className = 'n8n-chat-quick-replies';
+
+    replies.forEach(reply => {
+      const button = document.createElement('button');
+      button.className = 'n8n-chat-quick-reply-btn';
+      button.textContent = reply;
+      button.addEventListener('click', () => {
+        this.input.value = reply;
+        this.sendMessage();
+        repliesContainer.remove();
+      });
+      repliesContainer.appendChild(button);
+    });
+
+    this.messageList.appendChild(repliesContainer);
+    this.messageList.scrollTop = this.messageList.scrollHeight;
+  }
+
+  /**
+   * Notification badge management
+   */
+  incrementUnread() {
+    if (!this.isOpen) {
+      this.unreadCount++;
+      this.updateUnreadBadge();
+    }
+  }
+
+  updateUnreadBadge() {
+    if (!this.launcher) return;
+    const badge = this.launcher.querySelector('.n8n-chat-unread-badge');
+    if (badge) {
+      badge.textContent = this.unreadCount;
+      badge.style.display = this.unreadCount > 0 ? 'flex' : 'none';
+    }
+  }
+
+  clearUnreadCount() {
+    this.unreadCount = 0;
+    this.updateUnreadBadge();
+  }
+
+  /**
+   * Message history persistence
+   */
+  loadHistory() {
+    if (!this.enableHistory) return;
+
+    try {
+      const stored = localStorage.getItem(this.historyKey);
+      if (!stored) return;
+
+      const history = JSON.parse(stored);
+      history.forEach(item => {
+        this.addMessageWithoutSaving(item.text, item.sender, new Date(item.timestamp));
+      });
+    } catch (error) {
+      console.warn('Failed to load chat history:', error);
+    }
+  }
+
+  addMessageWithoutSaving(text, sender, timestamp) {
+    const messageBubble = document.createElement('div');
+    messageBubble.className = `n8n-chat-bubble n8n-chat-${sender}-message`;
+
+    const textNode = document.createElement('div');
+    textNode.className = 'n8n-chat-message-text';
+    textNode.textContent = text;
+
+    const timeNode = document.createElement('div');
+    timeNode.className = 'n8n-chat-message-timestamp';
+    timeNode.textContent = this.formatTimestamp(timestamp);
+    timeNode.setAttribute('data-timestamp', timestamp.toISOString());
+
+    messageBubble.appendChild(textNode);
+    messageBubble.appendChild(timeNode);
+    this.messageList.appendChild(messageBubble);
+
+    this.messageList.scrollTop = this.messageList.scrollHeight;
+  }
+
+  saveToHistory(text, sender, timestamp = new Date()) {
+    if (!this.enableHistory) return;
+
+    try {
+      const stored = localStorage.getItem(this.historyKey);
+      let history = stored ? JSON.parse(stored) : [];
+
+      history.push({
+        text,
+        sender,
+        timestamp: timestamp.toISOString()
+      });
+
+      // Keep only last N messages
+      if (history.length > this.maxHistoryItems) {
+        history = history.slice(-this.maxHistoryItems);
+      }
+
+      localStorage.setItem(this.historyKey, JSON.stringify(history));
+    } catch (error) {
+      console.warn('Failed to save chat history:', error);
+    }
+  }
+
+  /**
+   * State persistence
+   */
+  loadState() {
+    try {
+      const stored = localStorage.getItem(this.stateKey);
+      if (stored) {
+        // State loaded but not used for auto-open
+        // User needs to explicitly open the chat
+      }
+    } catch (error) {
+      console.warn('Failed to load chat state:', error);
+    }
+  }
+
+  saveState() {
+    try {
+      localStorage.setItem(this.stateKey, JSON.stringify({
+        isOpen: this.isOpen,
+        timestamp: new Date().toISOString()
+      }));
+    } catch (error) {
+      console.warn('Failed to save chat state:', error);
+    }
+  }
+
+  /**
+   * Offline detection
+   */
+  setupOfflineDetection() {
+    window.addEventListener('online', () => {
+      this.isOnline = true;
+      this.updateOnlineStatus();
+    });
+
+    window.addEventListener('offline', () => {
+      this.isOnline = false;
+      this.updateOnlineStatus();
+    });
+  }
+
+  updateOnlineStatus() {
+    if (!this.container) return;
+
+    const statusBar = this.container.querySelector('.n8n-chat-offline-indicator');
+    if (!this.isOnline && !statusBar) {
+      const indicator = document.createElement('div');
+      indicator.className = 'n8n-chat-offline-indicator';
+      indicator.innerHTML = `
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="1" y1="1" x2="23" y2="23"></line>
+          <path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"></path>
+          <path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"></path>
+          <path d="M10.71 5.05A16 16 0 0 1 22.58 9"></path>
+          <path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"></path>
+          <path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
+          <line x1="12" y1="20" x2="12.01" y2="20"></line>
+        </svg>
+        <span>${this.i18n.t('offline')}</span>
+      `;
+      this.container.insertBefore(indicator, this.messageList);
+    } else if (this.isOnline && statusBar) {
+      statusBar.remove();
+    }
+
+    // Update button state
+    if (this.button) {
+      this.button.disabled = !this.isOnline || this.isLoading;
+    }
+  }
+
+  /**
+   * Keyboard navigation setup
+   */
+  setupKeyboardNavigation() {
+    // ESC to close widget
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && this.isOpen && this.mode === 'widget') {
+        this.toggleChatWindow();
+      }
+    });
+
+    // Tab trap within modal
+    this.container.addEventListener('keydown', (e) => {
+      if (e.key === 'Tab') {
+        const focusableElements = this.container.querySelectorAll(
+          'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        );
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+
+        if (e.shiftKey && document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement.focus();
+        } else if (!e.shiftKey && document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement.focus();
+        }
+      }
+    });
+  }
+}
+
+// Export both class names for backward compatibility
+window.PindaiChatWidget = {
+  init: (options) => {
+    if (!document.querySelector('.n8n-chat-widget') && !document.querySelector('.n8n-chat-launcher')) {
+      return new PindaiChatWidget(options);
+    }
+  }
+};
+
+// Backward compatibility with old name
+window.N8nChatWidget = window.PindaiChatWidget;