@ihoomanai/chat-widget 2.0.0

package/dist/index.esm.js

@@ -0,0 +1,972 @@
+/**
+ * @ihoomanai/chat-widget v2.0.0
+ * Universal chat support widget for any website - secure Widget ID based initialization
+ * 
+ * @license MIT
+ * @copyright Ihooman AI
+ */
+/**
+ * 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
+ */
+
+export { IhoomanChat, createWidgetInstance, IhoomanChat as default };
+//# sourceMappingURL=index.esm.js.map