@ihoomanai/chat-widget 2.0.0

package/cdn/v2.0.0/chat.js

@@ -0,0 +1,984 @@
+/**
+ * @ihooman/chat-widget v2.0.0
+ * Universal chat support widget for any website - secure Widget ID based initialization
+ * 
+ * @license MIT
+ * @copyright Ihooman AI
+ */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.IhoomanChat = {}));
+})(this, (function (exports) { 'use strict';
+
+  /**
+   * Ihooman Chat Widget - Core Implementation
+   *
+   * Secure Widget ID based initialization - no API keys in client code.
+   * Fetches configuration from Widget Configuration API using Widget ID.
+   *
+   * @module widget
+   * @version 2.0.0
+   * @license MIT
+   *
+   * Requirements:
+   * - 5.2: Export IhoomanChat object with init, open, close, toggle, destroy methods
+   * - 5.3: Accept widgetId configuration option for initialization
+   * - 10.1: Widget only requires Widget ID, never API key
+   * - 10.2: Widget fetches configuration using only Widget ID
+   */
+  const VERSION = '2.0.0';
+  const STORAGE_PREFIX = 'ihooman_chat_';
+  /**
+   * Default widget configuration
+   */
+  const defaultConfig = {
+      serverUrl: 'https://api.ihooman.ai',
+      theme: 'light',
+      position: 'bottom-right',
+      title: 'Chat Support',
+      subtitle: 'We typically reply within minutes',
+      welcomeMessage: 'Hi there! 👋 How can we help you today?',
+      placeholder: 'Type a message...',
+      primaryColor: '#00aeff',
+      gradientFrom: '#00aeff',
+      gradientTo: '#0066ff',
+      showTimestamps: true,
+      showTypingIndicator: true,
+      enableSounds: true,
+      enableFileUpload: true,
+      startOpen: false,
+      persistSession: true,
+      zIndex: 9999,
+      width: 380,
+      height: 560,
+      buttonSize: 60,
+      borderRadius: 16,
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      avatarUrl: '',
+      poweredBy: true,
+  };
+  /**
+   * SVG icons for the widget UI
+   */
+  const icons = {
+      chat: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>`,
+      close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
+      send: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>`,
+      attach: `<svg 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"></path></svg>`,
+      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>`,
+  };
+  /**
+   * Internal widget state
+   */
+  let config = { widgetId: '', ...defaultConfig };
+  let state = {
+      isOpen: false,
+      isConnected: false,
+      messages: [],
+      sessionId: null,
+      visitorId: null,
+      unreadCount: 0,
+  };
+  let elements = {};
+  const eventListeners = {};
+  /**
+   * WebSocket and polling state
+   */
+  let ws = null;
+  let pollInterval = null;
+  let reconnectAttempts = 0;
+  const maxReconnectAttempts = 5;
+  // ============================================================================
+  // UTILITIES
+  // ============================================================================
+  /**
+   * Generate a unique ID with optional prefix
+   */
+  function generateId(prefix = '') {
+      return prefix + Math.random().toString(36).slice(2, 14) + Date.now().toString(36);
+  }
+  /**
+   * Format a date to time string
+   */
+  function formatTime(date) {
+      return new Date(date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+  /**
+   * Escape HTML to prevent XSS
+   */
+  function escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+  }
+  /**
+   * Parse basic markdown to HTML
+   */
+  function parseMarkdown(text) {
+      if (!text)
+          return '';
+      return escapeHtml(text)
+          .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+          .replace(/\*(.*?)\*/g, '<em>$1</em>')
+          .replace(/`(.*?)`/g, '<code>$1</code>')
+          .replace(/\n/g, '<br>');
+  }
+  /**
+   * Local storage helper with prefix
+   */
+  function storage(key, value) {
+      const fullKey = STORAGE_PREFIX + key;
+      try {
+          if (value === undefined) {
+              const item = localStorage.getItem(fullKey);
+              return item ? JSON.parse(item) : null;
+          }
+          else if (value === null) {
+              localStorage.removeItem(fullKey);
+              return null;
+          }
+          else {
+              localStorage.setItem(fullKey, JSON.stringify(value));
+              return value;
+          }
+      }
+      catch {
+          return null;
+      }
+  }
+  /**
+   * Emit an event to all registered listeners
+   */
+  function emit(event, data) {
+      const listeners = eventListeners[event] || [];
+      listeners.forEach((fn) => {
+          try {
+              fn(data);
+          }
+          catch (e) {
+              console.error(`Error in ${event} event handler:`, e);
+          }
+      });
+      // Also call config callbacks
+      const callbackName = `on${event.charAt(0).toUpperCase()}${event.slice(1)}`;
+      const callback = config[callbackName];
+      if (typeof callback === 'function') {
+          try {
+              callback(data);
+          }
+          catch (e) {
+              console.error(`Error in ${callbackName} callback:`, e);
+          }
+      }
+  }
+  // ============================================================================
+  // STYLES
+  // ============================================================================
+  /**
+   * Generate CSS styles for the widget
+   */
+  function generateStyles() {
+      const { primaryColor, gradientFrom, gradientTo, fontFamily, borderRadius, zIndex, width, height, buttonSize } = config;
+      const isDark = config.theme === 'dark';
+      const bgColor = isDark ? '#1a1a2e' : '#ffffff';
+      const textColor = isDark ? '#e4e4e7' : '#1f2937';
+      const mutedColor = isDark ? '#71717a' : '#6b7280';
+      const borderColor = isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)';
+      const inputBg = isDark ? '#16162a' : '#f9fafb';
+      const messageBgUser = `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`;
+      const messageBgBot = isDark ? '#252542' : '#f1f5f9';
+      const positionRight = config.position?.includes('right') ?? true;
+      const positionBottom = config.position?.includes('bottom') ?? true;
+      return `
+    .ihooman-widget * { box-sizing: border-box; margin: 0; padding: 0; }
+    .ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.5; color: ${textColor}; -webkit-font-smoothing: antialiased; }
+    .ihooman-toggle { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 20px' : 'top: 20px'}; width: ${buttonSize}px; height: ${buttonSize}px; border-radius: 50%; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); border: none; cursor: pointer; z-index: ${zIndex}; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 174, 255, 0.35); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
+    .ihooman-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0, 174, 255, 0.45); }
+    .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-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; }
+    .ihooman-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; background: #ef4444; color: white; font-size: 11px; font-weight: 600; border-radius: 10px; display: flex; align-items: center; justify-content: center; z-index: 2; }
+    .ihooman-badge:empty { display: none; }
+    .ihooman-window { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 90px' : 'top: 90px'}; width: ${width}px; height: ${height}px; max-height: calc(100vh - 120px); z-index: ${(zIndex ?? 9999) - 1}; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+    .ihooman-window.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
+    .ihooman-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: ${borderRadius}px; overflow: hidden; }
+    .ihooman-container::before { content: ''; position: absolute; inset: 0; background: ${bgColor}; opacity: 0.97; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: ${borderRadius}px; border: 1px solid ${borderColor}; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
+    .ihooman-container > * { position: relative; z-index: 1; }
+    .ihooman-header { padding: 16px 20px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
+    .ihooman-header-avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+    .ihooman-header-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
+    .ihooman-header-avatar svg { width: 22px; height: 22px; }
+    .ihooman-header-info { flex: 1; min-width: 0; }
+    .ihooman-header-title { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
+    .ihooman-header-status { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.9; }
+    .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: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}; }
+    .ihooman-messages::-webkit-scrollbar { width: 6px; }
+    .ihooman-messages::-webkit-scrollbar-track { background: transparent; }
+    .ihooman-messages::-webkit-scrollbar-thumb { background: ${borderColor}; border-radius: 3px; }
+    .ihooman-message { display: flex; flex-direction: column; max-width: 85%; animation: ihooman-fadeIn 0.3s ease; }
+    @keyframes ihooman-fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+    .ihooman-message.user { align-self: flex-end; align-items: flex-end; }
+    .ihooman-message.bot { align-self: flex-start; align-items: flex-start; }
+    .ihooman-message-content { padding: 12px 16px; border-radius: 16px; word-wrap: break-word; }
+    .ihooman-message.user .ihooman-message-content { background: ${messageBgUser}; color: white; border-bottom-right-radius: 4px; }
+    .ihooman-message.bot .ihooman-message-content { background: ${messageBgBot}; color: ${textColor}; border-bottom-left-radius: 4px; }
+    .ihooman-message-content code { background: rgba(0,0,0,0.1); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 13px; }
+    .ihooman-message-time { font-size: 11px; color: ${mutedColor}; margin-top: 4px; padding: 0 4px; }
+    .ihooman-typing { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: ${messageBgBot}; border-radius: 16px; border-bottom-left-radius: 4px; max-width: 80px; align-self: flex-start; }
+    .ihooman-typing-dots { display: flex; gap: 4px; }
+    .ihooman-typing-dot { width: 8px; height: 8px; background: ${mutedColor}; border-radius: 50%; animation: ihooman-typing 1.4s infinite; }
+    .ihooman-typing-dot:nth-child(2) { animation-delay: 0.2s; }
+    .ihooman-typing-dot:nth-child(3) { animation-delay: 0.4s; }
+    @keyframes ihooman-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
+    .ihooman-input-area { padding: 12px 16px; background: ${bgColor}; border-top: 1px solid ${borderColor}; flex-shrink: 0; }
+    .ihooman-input-wrapper { display: flex; align-items: flex-end; gap: 8px; background: ${inputBg}; border: 1px solid ${borderColor}; border-radius: 12px; padding: 8px 12px; transition: border-color 0.2s, box-shadow 0.2s; }
+    .ihooman-input-wrapper:focus-within { border-color: ${primaryColor}; box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.1); }
+    .ihooman-input { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 14px; color: ${textColor}; resize: none; max-height: 100px; outline: none; line-height: 1.4; }
+    .ihooman-input::placeholder { color: ${mutedColor}; }
+    .ihooman-input-btn { width: 36px; height: 36px; border-radius: 10px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; background: transparent; color: ${mutedColor}; }
+    .ihooman-input-btn:hover { background: ${borderColor}; color: ${textColor}; }
+    .ihooman-input-btn.send { background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; }
+    .ihooman-input-btn.send:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3); }
+    .ihooman-input-btn.send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+    .ihooman-input-btn svg { width: 18px; height: 18px; }
+    .ihooman-file-input { display: none; }
+    .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}; }
+    @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; } }
+  `;
+  }
+  // ============================================================================
+  // DOM CREATION
+  // ============================================================================
+  /**
+   * Create the widget DOM elements
+   */
+  function createWidget() {
+      // Add styles
+      const styleEl = document.createElement('style');
+      styleEl.id = 'ihooman-widget-styles';
+      styleEl.textContent = generateStyles();
+      document.head.appendChild(styleEl);
+      // Create widget container
+      const widget = document.createElement('div');
+      widget.className = 'ihooman-widget';
+      widget.innerHTML = `
+    <button class="ihooman-toggle" aria-label="Open chat">
+      <span class="ihooman-pulse"></span>
+      <span class="ihooman-badge"></span>
+      <span class="chat-icon">${icons.chat}</span>
+      <span class="close-icon">${icons.close}</span>
+    </button>
+    <div class="ihooman-window" role="dialog" aria-label="Chat window">
+      <div class="ihooman-container">
+        <div class="ihooman-header">
+          <div class="ihooman-header-avatar">${config.avatarUrl ? `<img src="${escapeHtml(config.avatarUrl)}" alt="Support">` : icons.bot}</div>
+          <div class="ihooman-header-info">
+            <div class="ihooman-header-title">${escapeHtml(config.title || 'Chat Support')}</div>
+            <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="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>
+          </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>
+  `;
+      document.body.appendChild(widget);
+      // Store element references
+      elements = {
+          widget,
+          toggle: widget.querySelector('.ihooman-toggle'),
+          badge: widget.querySelector('.ihooman-badge'),
+          window: widget.querySelector('.ihooman-window'),
+          messages: widget.querySelector('.ihooman-messages'),
+          input: widget.querySelector('.ihooman-input'),
+          sendBtn: widget.querySelector('.ihooman-input-btn.send'),
+          attachBtn: widget.querySelector('.ihooman-input-btn.attach'),
+          fileInput: widget.querySelector('.ihooman-file-input'),
+          statusDot: widget.querySelector('.ihooman-status-dot'),
+          statusText: widget.querySelector('.ihooman-status-text'),
+      };
+      // Set up event listeners
+      setupEventListeners();
+  }
+  /**
+   * Set up DOM event listeners
+   */
+  function setupEventListeners() {
+      if (!elements.toggle || !elements.sendBtn || !elements.input)
+          return;
+      elements.toggle.addEventListener('click', toggle);
+      elements.sendBtn.addEventListener('click', handleSendClick);
+      elements.input.addEventListener('input', () => {
+          if (elements.sendBtn) {
+              elements.sendBtn.disabled = !elements.input?.value.trim();
+          }
+          if (elements.input) {
+              elements.input.style.height = 'auto';
+              elements.input.style.height = Math.min(elements.input.scrollHeight, 100) + 'px';
+          }
+      });
+      elements.input.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              if (!elements.sendBtn?.disabled)
+                  handleSendClick();
+          }
+      });
+      if (elements.attachBtn && elements.fileInput) {
+          elements.attachBtn.addEventListener('click', () => elements.fileInput?.click());
+          elements.fileInput.addEventListener('change', handleFileSelect);
+      }
+      elements.widget?.querySelector('[data-action="refresh"]')?.addEventListener('click', startNewConversation);
+      elements.widget?.querySelector('[data-action="minimize"]')?.addEventListener('click', close);
+  }
+  // ============================================================================
+  // MESSAGING
+  // ============================================================================
+  /**
+   * Add a message to the chat
+   */
+  function addMessage(content, sender = 'bot', metadata = {}) {
+      const message = {
+          id: generateId('msg_'),
+          content,
+          sender,
+          timestamp: new Date(),
+          metadata,
+      };
+      state.messages.push(message);
+      if (!elements.messages)
+          return message;
+      const el = document.createElement('div');
+      el.className = `ihooman-message ${sender}`;
+      el.innerHTML = `
+    <div class="ihooman-message-content">${parseMarkdown(content)}</div>
+    ${config.showTimestamps ? `<div class="ihooman-message-time">${formatTime(message.timestamp)}</div>` : ''}
+  `;
+      // Remove typing indicator if present
+      const typing = elements.messages.querySelector('.ihooman-typing');
+      if (typing)
+          typing.remove();
+      elements.messages.appendChild(el);
+      elements.messages.scrollTop = elements.messages.scrollHeight;
+      // Update unread count if widget is closed
+      if (sender === 'bot' && !state.isOpen) {
+          state.unreadCount++;
+          if (elements.badge) {
+              elements.badge.textContent = String(state.unreadCount);
+          }
+          if (config.enableSounds)
+              playSound();
+      }
+      emit('message', message);
+      return message;
+  }
+  /**
+   * Show typing indicator
+   */
+  function showTyping() {
+      if (!config.showTypingIndicator || !elements.messages)
+          return;
+      if (elements.messages.querySelector('.ihooman-typing'))
+          return;
+      const typing = document.createElement('div');
+      typing.className = 'ihooman-typing';
+      typing.innerHTML = `<div class="ihooman-typing-dots"><span class="ihooman-typing-dot"></span><span class="ihooman-typing-dot"></span><span class="ihooman-typing-dot"></span></div>`;
+      elements.messages.appendChild(typing);
+      elements.messages.scrollTop = elements.messages.scrollHeight;
+  }
+  /**
+   * Hide typing indicator
+   */
+  function hideTyping() {
+      const typing = elements.messages?.querySelector('.ihooman-typing');
+      if (typing)
+          typing.remove();
+  }
+  /**
+   * Handle send button click
+   */
+  function handleSendClick() {
+      const content = elements.input?.value.trim();
+      if (!content)
+          return;
+      if (elements.input) {
+          elements.input.value = '';
+          elements.input.style.height = 'auto';
+      }
+      if (elements.sendBtn) {
+          elements.sendBtn.disabled = true;
+      }
+      addMessage(content, 'user');
+      showTyping();
+      sendMessageToServer(content);
+  }
+  /**
+   * Send message to the server
+   */
+  async function sendMessageToServer(content) {
+      try {
+          const response = await fetch(`${config.serverUrl}/api/chat`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                  message: content,
+                  session_id: state.sessionId,
+                  visitor_id: state.visitorId,
+                  widget_id: config.widgetId,
+              }),
+          });
+          const data = await response.json();
+          hideTyping();
+          if (data.session_id) {
+              state.sessionId = data.session_id;
+              if (config.persistSession)
+                  storage('session_id', state.sessionId);
+          }
+          if (data.response) {
+              addMessage(data.response, 'bot', { sources: data.sources, confidence: data.confidence });
+          }
+      }
+      catch (error) {
+          hideTyping();
+          addMessage('Sorry, something went wrong. Please try again.', 'bot');
+          emit('error', error);
+      }
+  }
+  /**
+   * Handle file selection
+   */
+  function handleFileSelect(e) {
+      const target = e.target;
+      const file = target.files?.[0];
+      if (!file)
+          return;
+      addMessage(`📎 Uploading: ${file.name}...`, 'user');
+      showTyping();
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('session_id', state.sessionId || '');
+      formData.append('visitor_id', state.visitorId || '');
+      formData.append('widget_id', config.widgetId);
+      fetch(`${config.serverUrl}/api/upload`, { method: 'POST', body: formData })
+          .then((r) => r.json())
+          .then((data) => {
+          hideTyping();
+          if (data.message)
+              addMessage(data.message, 'bot');
+      })
+          .catch(() => {
+          hideTyping();
+          addMessage('Failed to upload file.', 'bot');
+      });
+      target.value = '';
+  }
+  /**
+   * Play notification sound
+   */
+  function playSound() {
+      try {
+          const audio = new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA//tQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAACAAABhgC7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7//////////////////////////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAAAAAAAAAAAAYYNBrP/AAAAAAAAAAAAAAAAAAAAAP/7UMQAA8AAAaQAAAAgAAA0gAAABExBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//tQxBKDwAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVU=');
+          audio.volume = 0.3;
+          audio.play().catch(() => { });
+      }
+      catch {
+          // Ignore audio errors
+      }
+  }
+  // ============================================================================
+  // WEBSOCKET CONNECTION
+  // ============================================================================
+  /**
+   * Connect to WebSocket for real-time messaging
+   */
+  function connectWebSocket(chatEndpoint) {
+      if (!config.serverUrl && !chatEndpoint)
+          return;
+      const wsUrl = chatEndpoint || config.serverUrl?.replace(/^http/, 'ws') + '/ws';
+      try {
+          ws = new WebSocket(wsUrl);
+          ws.onopen = () => {
+              state.isConnected = true;
+              reconnectAttempts = 0;
+              updateStatus(true);
+              // Send initial connection message with widget ID
+              if (ws && ws.readyState === WebSocket.OPEN) {
+                  ws.send(JSON.stringify({
+                      type: 'connect',
+                      widget_id: config.widgetId,
+                      visitor_id: state.visitorId,
+                      session_id: state.sessionId,
+                  }));
+              }
+          };
+          ws.onclose = () => {
+              state.isConnected = false;
+              updateStatus(false);
+              // Attempt reconnection with exponential backoff
+              if (reconnectAttempts < maxReconnectAttempts) {
+                  reconnectAttempts++;
+                  const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
+                  setTimeout(() => connectWebSocket(chatEndpoint), delay);
+              }
+              else {
+                  // Fall back to polling
+                  startPolling();
+              }
+          };
+          ws.onerror = () => {
+              // WebSocket error - will trigger onclose
+          };
+          ws.onmessage = (e) => {
+              try {
+                  const data = JSON.parse(e.data);
+                  if (data.type === 'message') {
+                      hideTyping();
+                      addMessage(data.content, data.sender_type || 'bot', data.metadata);
+                  }
+                  else if (data.type === 'typing') {
+                      data.is_typing ? showTyping() : hideTyping();
+                  }
+              }
+              catch {
+                  // Ignore parse errors
+              }
+          };
+      }
+      catch {
+          // WebSocket not supported, fall back to polling
+          startPolling();
+      }
+  }
+  /**
+   * Start polling for messages (fallback when WebSocket unavailable)
+   */
+  function startPolling() {
+      if (pollInterval)
+          return;
+      pollInterval = setInterval(async () => {
+          if (!state.sessionId)
+              return;
+          try {
+              const response = await fetch(`${config.serverUrl}/api/messages?session_id=${state.sessionId}&since=${Date.now() - 5000}&widget_id=${config.widgetId}`);
+              const data = await response.json();
+              if (data.messages) {
+                  data.messages.forEach((msg) => {
+                      if (!state.messages.find((m) => m.id === msg.id)) {
+                          addMessage(msg.content, msg.sender_type, msg.metadata);
+                      }
+                  });
+              }
+          }
+          catch {
+              // Ignore polling errors
+          }
+      }, 5000);
+  }
+  /**
+   * Update connection status display
+   */
+  function updateStatus(online) {
+      if (elements.statusDot) {
+          elements.statusDot.classList.toggle('offline', !online);
+      }
+      if (elements.statusText) {
+          elements.statusText.textContent = online ? 'Online' : 'Offline';
+      }
+  }
+  // ============================================================================
+  // PUBLIC API METHODS
+  // ============================================================================
+  /**
+   * Open the chat widget window
+   */
+  function open() {
+      if (state.isOpen)
+          return;
+      state.isOpen = true;
+      state.unreadCount = 0;
+      if (elements.badge) {
+          elements.badge.textContent = '';
+      }
+      if (elements.toggle) {
+          elements.toggle.classList.add('open');
+      }
+      if (elements.window) {
+          elements.window.classList.add('open');
+      }
+      setTimeout(() => elements.input?.focus(), 300);
+      emit('open');
+  }
+  /**
+   * Close the chat widget window
+   */
+  function close() {
+      if (!state.isOpen)
+          return;
+      state.isOpen = false;
+      if (elements.toggle) {
+          elements.toggle.classList.remove('open');
+      }
+      if (elements.window) {
+          elements.window.classList.remove('open');
+      }
+      emit('close');
+  }
+  /**
+   * Toggle the chat widget window
+   */
+  function toggle() {
+      state.isOpen ? close() : open();
+  }
+  /**
+   * Start a new conversation
+   */
+  function startNewConversation() {
+      state.sessionId = null;
+      state.messages = [];
+      storage('session_id', null);
+      if (elements.messages) {
+          elements.messages.innerHTML = '';
+      }
+      if (config.welcomeMessage) {
+          addMessage(config.welcomeMessage, 'bot');
+      }
+  }
+  /**
+   * Destroy the widget and clean up resources
+   */
+  function destroy() {
+      // Close WebSocket
+      if (ws) {
+          ws.close();
+          ws = null;
+      }
+      // Clear polling interval
+      if (pollInterval) {
+          clearInterval(pollInterval);
+          pollInterval = null;
+      }
+      // Remove DOM elements
+      if (elements.widget) {
+          elements.widget.remove();
+      }
+      const styles = document.getElementById('ihooman-widget-styles');
+      if (styles) {
+          styles.remove();
+      }
+      // Reset state
+      state = {
+          isOpen: false,
+          isConnected: false,
+          messages: [],
+          sessionId: null,
+          visitorId: null,
+          unreadCount: 0,
+      };
+      elements = {};
+      reconnectAttempts = 0;
+  }
+  /**
+   * Send a message programmatically
+   */
+  function sendMessage(content) {
+      if (!content.trim())
+          return;
+      if (elements.input) {
+          elements.input.value = content;
+      }
+      handleSendClick();
+  }
+  /**
+   * Set user information
+   */
+  function setUser(user) {
+      if (user.name)
+          storage('user_name', user.name);
+      if (user.email)
+          storage('user_email', user.email);
+      if (user.metadata)
+          storage('user_metadata', user.metadata);
+  }
+  /**
+   * Clear chat history
+   */
+  function clearHistory() {
+      startNewConversation();
+  }
+  /**
+   * Subscribe to widget events
+   */
+  function on(event, callback) {
+      if (!eventListeners[event]) {
+          eventListeners[event] = [];
+      }
+      eventListeners[event].push(callback);
+  }
+  /**
+   * Unsubscribe from widget events
+   */
+  function off(event, callback) {
+      if (eventListeners[event]) {
+          eventListeners[event] = eventListeners[event].filter((fn) => fn !== callback);
+      }
+  }
+  /**
+   * Get current widget state
+   */
+  function getState() {
+      return { ...state };
+  }
+  // ============================================================================
+  // INITIALIZATION
+  // ============================================================================
+  /**
+   * Fetch widget configuration from the Widget Configuration API
+   *
+   * Requirements:
+   * - 10.1: Widget only requires Widget ID, never API key
+   * - 10.2: Widget fetches configuration using only Widget ID
+   */
+  async function fetchWidgetConfig(widgetId, serverUrl) {
+      try {
+          const response = await fetch(`${serverUrl}/api/widget/config?widget_id=${encodeURIComponent(widgetId)}`);
+          if (!response.ok) {
+              const errorData = await response.json().catch(() => ({}));
+              return {
+                  success: false,
+                  error: errorData.error || `HTTP ${response.status}`,
+              };
+          }
+          return await response.json();
+      }
+      catch (error) {
+          return {
+              success: false,
+              error: 'Unable to connect. Please check your internet connection.',
+          };
+      }
+  }
+  /**
+   * Apply server configuration to local config
+   */
+  function applyServerConfig(serverConfig) {
+      // Apply basic settings
+      config.title = serverConfig.title || config.title;
+      config.subtitle = serverConfig.subtitle || config.subtitle;
+      config.welcomeMessage = serverConfig.welcomeMessage || config.welcomeMessage;
+      config.placeholder = serverConfig.placeholder || config.placeholder;
+      config.position = serverConfig.position || config.position;
+      // Apply theme settings
+      if (serverConfig.theme) {
+          config.primaryColor = serverConfig.theme.primaryColor || config.primaryColor;
+          config.gradientFrom = serverConfig.theme.gradientFrom || config.gradientFrom;
+          config.gradientTo = serverConfig.theme.gradientTo || config.gradientTo;
+          config.fontFamily = serverConfig.theme.fontFamily || config.fontFamily;
+          if (serverConfig.theme.borderRadius) {
+              config.borderRadius = parseInt(serverConfig.theme.borderRadius, 10) || config.borderRadius;
+          }
+      }
+      // Apply behavior settings
+      if (serverConfig.behavior) {
+          config.startOpen = serverConfig.behavior.startOpen ?? config.startOpen;
+          config.showTypingIndicator = serverConfig.behavior.showTypingIndicator ?? config.showTypingIndicator;
+          config.showTimestamps = serverConfig.behavior.showTimestamps ?? config.showTimestamps;
+          config.enableSounds = serverConfig.behavior.enableSounds ?? config.enableSounds;
+          config.enableFileUpload = serverConfig.behavior.enableFileUpload ?? config.enableFileUpload;
+          config.persistSession = serverConfig.behavior.persistSession ?? config.persistSession;
+      }
+      // Apply branding settings
+      if (serverConfig.branding) {
+          config.avatarUrl = serverConfig.branding.avatarUrl || config.avatarUrl;
+          config.poweredBy = serverConfig.branding.poweredBy ?? config.poweredBy;
+      }
+  }
+  /**
+   * Initialize the widget
+   *
+   * Requirements:
+   * - 5.2: Export IhoomanChat object with init, open, close, toggle, destroy methods
+   * - 5.3: Accept widgetId configuration option for initialization
+   * - 10.1: Widget only requires Widget ID, never API key
+   * - 10.2: Widget fetches configuration using only Widget ID
+   */
+  async function init(userConfig) {
+      // Validate required widgetId
+      if (!userConfig.widgetId) {
+          console.error('IhoomanChat: widgetId is required');
+          return null;
+      }
+      // Merge user config with defaults
+      config = { ...defaultConfig, ...userConfig };
+      // Initialize visitor ID
+      state.visitorId = storage('visitor_id') || generateId('v_');
+      storage('visitor_id', state.visitorId);
+      // Restore session if persistence is enabled
+      if (config.persistSession) {
+          state.sessionId = storage('session_id');
+      }
+      // Fetch configuration from Widget Configuration API using Widget ID
+      // This is the secure approach - no API key is ever sent from the client
+      const serverUrl = config.serverUrl || 'https://api.ihooman.ai';
+      const configResponse = await fetchWidgetConfig(config.widgetId, serverUrl);
+      let chatEndpoint;
+      if (configResponse.success && configResponse.config) {
+          // Apply server configuration
+          applyServerConfig(configResponse.config);
+          chatEndpoint = configResponse.chatEndpoint;
+      }
+      else if (configResponse.error) {
+          // Log error but continue with local config
+          console.warn('IhoomanChat: Could not fetch server config:', configResponse.error);
+          // If domain validation failed, show error to user
+          if (configResponse.error === 'Widget not authorized for this domain') {
+              console.error('IhoomanChat: Widget configuration error. Please contact support.');
+              // Still create widget but show error state
+          }
+      }
+      // Create the widget DOM
+      createWidget();
+      // Restore messages from state (if any)
+      state.messages.forEach((msg) => addMessage(msg.content, msg.sender, msg.metadata));
+      // Show welcome message if no messages
+      if (state.messages.length === 0 && config.welcomeMessage) {
+          addMessage(config.welcomeMessage, 'bot');
+      }
+      // Connect WebSocket for real-time messaging
+      connectWebSocket(chatEndpoint);
+      // Auto-open if configured
+      if (config.startOpen) {
+          setTimeout(open, 500);
+      }
+      emit('ready');
+      return publicAPI;
+  }
+  // ============================================================================
+  // PUBLIC API OBJECT
+  // ============================================================================
+  /**
+   * Public API object
+   *
+   * Requirements:
+   * - 5.2: Export IhoomanChat object with init, open, close, toggle, destroy methods
+   */
+  const publicAPI = {
+      init,
+      open,
+      close,
+      toggle,
+      destroy,
+      sendMessage,
+      setUser,
+      clearHistory,
+      on,
+      off,
+      getState,
+      version: VERSION,
+  };
+  /**
+   * Main IhoomanChat export
+   */
+  const IhoomanChat = publicAPI;
+  /**
+   * Factory function to create a new widget instance
+   */
+  function createWidgetInstance() {
+      return { ...publicAPI };
+  }
+  // ============================================================================
+  // AUTO-INITIALIZATION
+  // ============================================================================
+  /**
+   * Auto-initialize from script attributes
+   * Supports data-widget-id attribute for easy embedding
+   */
+  (function autoInit() {
+      if (typeof document === 'undefined')
+          return;
+      let script = document.currentScript;
+      if (!script) {
+          const scripts = document.getElementsByTagName('script');
+          for (let i = 0; i < scripts.length; i++) {
+              if (scripts[i].src && scripts[i].src.includes('ihooman')) {
+                  script = scripts[i];
+                  break;
+              }
+          }
+      }
+      if (!script)
+          return;
+      const widgetId = script.getAttribute('data-widget-id');
+      if (widgetId) {
+          const autoConfig = { widgetId };
+          // Parse optional attributes
+          const serverUrl = script.getAttribute('data-server-url');
+          if (serverUrl)
+              autoConfig.serverUrl = serverUrl;
+          const theme = script.getAttribute('data-theme');
+          if (theme === 'light' || theme === 'dark')
+              autoConfig.theme = theme;
+          const position = script.getAttribute('data-position');
+          if (position)
+              autoConfig.position = position;
+          const startOpen = script.getAttribute('data-start-open');
+          if (startOpen === 'true')
+              autoConfig.startOpen = true;
+          // Initialize when DOM is ready
+          if (document.readyState === 'loading') {
+              document.addEventListener('DOMContentLoaded', () => init(autoConfig));
+          }
+          else {
+              init(autoConfig);
+          }
+      }
+  })();
+  // Export for UMD builds
+  if (typeof window !== 'undefined') {
+      window.IhoomanChat = IhoomanChat;
+  }
+
+  /**
+   * @ihooman/chat-widget
+   *
+   * Universal chat support widget for any website.
+   * Uses secure Widget ID based initialization - no API keys exposed in client code.
+   *
+   * @packageDocumentation
+   */
+
+  exports.IhoomanChat = IhoomanChat;
+  exports.createWidgetInstance = createWidgetInstance;
+  exports.default = IhoomanChat;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=index.umd.js.map