@ihoomanai/chat-widget 2.0.0

package/src/widget.ts

@@ -0,0 +1,1114 @@
+/**
+ * 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
+ */
+
+import type {
+  WidgetConfig,
+  WidgetState,
+  UserInfo,
+  WidgetEvent,
+  EventCallback,
+  IhoomanChatAPI,
+  Message,
+} from './types';
+
+const VERSION = '2.0.0';
+const STORAGE_PREFIX = 'ihooman_chat_';
+
+/**
+ * Default widget configuration
+ */
+const defaultConfig: Partial<WidgetConfig> = {
+  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: WidgetConfig = { widgetId: '', ...defaultConfig };
+let state: WidgetState = {
+  isOpen: false,
+  isConnected: false,
+  messages: [],
+  sessionId: null,
+  visitorId: null,
+  unreadCount: 0,
+};
+
+/**
+ * DOM element references
+ */
+interface WidgetElements {
+  widget?: HTMLElement;
+  toggle?: HTMLButtonElement;
+  badge?: HTMLElement;
+  window?: HTMLElement;
+  messages?: HTMLElement;
+  input?: HTMLTextAreaElement;
+  sendBtn?: HTMLButtonElement;
+  attachBtn?: HTMLButtonElement | null;
+  fileInput?: HTMLInputElement | null;
+  statusDot?: HTMLElement;
+  statusText?: HTMLElement;
+}
+
+let elements: WidgetElements = {};
+const eventListeners: Record<string, EventCallback[]> = {};
+
+/**
+ * WebSocket and polling state
+ */
+let ws: WebSocket | null = null;
+let pollInterval: ReturnType<typeof setInterval> | null = null;
+let reconnectAttempts = 0;
+const maxReconnectAttempts = 5;
+
+
+// ============================================================================
+// UTILITIES
+// ============================================================================
+
+/**
+ * Generate a unique ID with optional prefix
+ */
+function generateId(prefix = ''): string {
+  return prefix + Math.random().toString(36).slice(2, 14) + Date.now().toString(36);
+}
+
+/**
+ * Format a date to time string
+ */
+function formatTime(date: Date): string {
+  return new Date(date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+/**
+ * Escape HTML to prevent XSS
+ */
+function escapeHtml(text: string): string {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+/**
+ * Parse basic markdown to HTML
+ */
+function parseMarkdown(text: string): string {
+  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<T>(key: string, value?: T | null): T | null {
+  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: WidgetEvent, data?: unknown): void {
+  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)}` as keyof WidgetConfig;
+  const callback = config[callbackName];
+  if (typeof callback === 'function') {
+    try {
+      (callback as EventCallback)(data);
+    } catch (e) {
+      console.error(`Error in ${callbackName} callback:`, e);
+    }
+  }
+}
+
+
+// ============================================================================
+// STYLES
+// ============================================================================
+
+/**
+ * Generate CSS styles for the widget
+ */
+function generateStyles(): string {
+  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(): void {
+  // 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') as HTMLButtonElement,
+    badge: widget.querySelector('.ihooman-badge') as HTMLElement,
+    window: widget.querySelector('.ihooman-window') as HTMLElement,
+    messages: widget.querySelector('.ihooman-messages') as HTMLElement,
+    input: widget.querySelector('.ihooman-input') as HTMLTextAreaElement,
+    sendBtn: widget.querySelector('.ihooman-input-btn.send') as HTMLButtonElement,
+    attachBtn: widget.querySelector('.ihooman-input-btn.attach') as HTMLButtonElement | null,
+    fileInput: widget.querySelector('.ihooman-file-input') as HTMLInputElement | null,
+    statusDot: widget.querySelector('.ihooman-status-dot') as HTMLElement,
+    statusText: widget.querySelector('.ihooman-status-text') as HTMLElement,
+  };
+
+  // Set up event listeners
+  setupEventListeners();
+}
+
+/**
+ * Set up DOM event listeners
+ */
+function setupEventListeners(): void {
+  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: KeyboardEvent) => {
+    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: string, sender: 'user' | 'bot' = 'bot', metadata: Message['metadata'] = {}): Message {
+  const message: 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(): void {
+  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(): void {
+  const typing = elements.messages?.querySelector('.ihooman-typing');
+  if (typing) typing.remove();
+}
+
+/**
+ * Handle send button click
+ */
+function handleSendClick(): void {
+  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: string): Promise<void> {
+  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: Event): void {
+  const target = e.target as HTMLInputElement;
+  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(): void {
+  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?: string): void {
+  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: MessageEvent) => {
+      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(): void {
+  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: { id: string; content: string; sender_type: 'user' | 'bot'; metadata?: Message['metadata'] }) => {
+          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: boolean): void {
+  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(): void {
+  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(): void {
+  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(): void {
+  state.isOpen ? close() : open();
+}
+
+/**
+ * Start a new conversation
+ */
+function startNewConversation(): void {
+  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(): void {
+  // 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: string): void {
+  if (!content.trim()) return;
+  
+  if (elements.input) {
+    elements.input.value = content;
+  }
+  handleSendClick();
+}
+
+/**
+ * Set user information
+ */
+function setUser(user: UserInfo): void {
+  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(): void {
+  startNewConversation();
+}
+
+/**
+ * Subscribe to widget events
+ */
+function on(event: WidgetEvent, callback: EventCallback): void {
+  if (!eventListeners[event]) {
+    eventListeners[event] = [];
+  }
+  eventListeners[event].push(callback);
+}
+
+/**
+ * Unsubscribe from widget events
+ */
+function off(event: WidgetEvent, callback: EventCallback): void {
+  if (eventListeners[event]) {
+    eventListeners[event] = eventListeners[event].filter((fn) => fn !== callback);
+  }
+}
+
+/**
+ * Get current widget state
+ */
+function getState(): WidgetState {
+  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: string, serverUrl: string): Promise<{
+  success: boolean;
+  config?: {
+    title: string;
+    subtitle?: string;
+    welcomeMessage: string;
+    placeholder: string;
+    theme: Record<string, string>;
+    position: string;
+    behavior: Record<string, boolean>;
+    branding: Record<string, unknown>;
+  };
+  chatEndpoint?: string;
+  error?: string;
+}> {
+  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: {
+  title: string;
+  subtitle?: string;
+  welcomeMessage: string;
+  placeholder: string;
+  theme: Record<string, string>;
+  position: string;
+  behavior: Record<string, boolean>;
+  branding: Record<string, unknown>;
+}): void {
+  // 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 as WidgetConfig['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 as string) || config.avatarUrl;
+    config.poweredBy = serverConfig.branding.poweredBy as boolean ?? 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: WidgetConfig): Promise<IhoomanChatAPI | null> {
+  // Validate required widgetId
+  if (!userConfig.widgetId) {
+    console.error('IhoomanChat: widgetId is required');
+    return null;
+  }
+
+  // Merge user config with defaults
+  config = { ...defaultConfig, ...userConfig } as WidgetConfig;
+
+  // Initialize visitor ID
+  state.visitorId = storage<string>('visitor_id') || generateId('v_');
+  storage('visitor_id', state.visitorId);
+
+  // Restore session if persistence is enabled
+  if (config.persistSession) {
+    state.sessionId = storage<string>('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: string | undefined;
+
+  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: IhoomanChatAPI = {
+  init,
+  open,
+  close,
+  toggle,
+  destroy,
+  sendMessage,
+  setUser,
+  clearHistory,
+  on,
+  off,
+  getState,
+  version: VERSION,
+};
+
+/**
+ * Main IhoomanChat export
+ */
+export const IhoomanChat: IhoomanChatAPI = publicAPI;
+
+/**
+ * Factory function to create a new widget instance
+ */
+export function createWidgetInstance(): IhoomanChatAPI {
+  return { ...publicAPI };
+}
+
+// ============================================================================
+// AUTO-INITIALIZATION
+// ============================================================================
+
+/**
+ * Auto-initialize from script attributes
+ * Supports data-widget-id attribute for easy embedding
+ */
+(function autoInit(): void {
+  if (typeof document === 'undefined') return;
+
+  let script: HTMLScriptElement | null = document.currentScript as HTMLScriptElement;
+  
+  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: Partial<WidgetConfig> & { widgetId: string } = { 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 as WidgetConfig['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 as WidgetConfig));
+    } else {
+      init(autoConfig as WidgetConfig);
+    }
+  }
+})();
+
+// Export for UMD builds
+if (typeof window !== 'undefined') {
+  (window as unknown as Record<string, unknown>).IhoomanChat = IhoomanChat;
+}