@aiassist-secure/vanilla 1.0.0

package/dist/widget.esm.js

@@ -0,0 +1,1593 @@
+/**
+ * AiAssist Vanilla Widget v1.0.0
+ * https://aiassist.net
+ * 
+ * Drop-in AI chat for any website
+ * (c) 2026 AiAssist - MIT License
+ */
+/**
+ * AiAssist Vanilla Widget
+ * Drop-in AI chat for any website
+ * 
+ * Usage:
+ * <script src="https://cdn.aiassist.net/widget.js"></script>
+ * <script>
+ *   AiAssist.init({ apiKey: 'your-api-key' });
+ * </script>
+ */
+
+(function() {
+  'use strict';
+
+  const DEFAULT_ENDPOINT = 'https://api.aiassist.net';
+  
+  const STYLES = `
+    :host {
+      --aa-primary: #00D4FF;
+      --aa-bg: #0A0A0B;
+      --aa-surface: #1A1A1B;
+      --aa-text: #FFFFFF;
+      --aa-text-muted: rgba(255,255,255,0.5);
+      --aa-border: rgba(255,255,255,0.1);
+      --aa-radius: 16px;
+      --aa-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+    
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    
+    .aa-container {
+      position: fixed;
+      z-index: 999999;
+      font-family: var(--aa-font);
+    }
+    
+    .aa-container.bottom-right { bottom: 20px; right: 20px; }
+    .aa-container.bottom-left { bottom: 20px; left: 20px; }
+    .aa-container.top-right { top: 20px; right: 20px; }
+    .aa-container.top-left { top: 20px; left: 20px; }
+    
+    .aa-bubble {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background: var(--aa-primary);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 20px rgba(0, 212, 255, 0.4);
+      transition: transform 0.2s, box-shadow 0.2s;
+    }
+    
+    .aa-bubble:hover {
+      transform: scale(1.1);
+      box-shadow: 0 6px 30px rgba(0, 212, 255, 0.5);
+    }
+    
+    .aa-bubble svg {
+      width: 28px;
+      height: 28px;
+      fill: #000;
+    }
+    
+    .aa-bubble.has-unread::after {
+      content: attr(data-count);
+      position: absolute;
+      top: -5px;
+      right: -5px;
+      background: #FF4444;
+      color: white;
+      font-size: 12px;
+      font-weight: bold;
+      width: 22px;
+      height: 22px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .aa-widget {
+      display: none;
+      width: 380px;
+      height: 600px;
+      max-height: calc(100vh - 100px);
+      background: var(--aa-bg);
+      border-radius: var(--aa-radius);
+      border: 1px solid var(--aa-border);
+      overflow: hidden;
+      flex-direction: column;
+      box-shadow: 0 10px 50px rgba(0,0,0,0.5);
+      position: relative;
+    }
+    
+    .aa-widget.open {
+      display: flex;
+    }
+    
+    @media (max-width: 480px) {
+      .aa-widget {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        max-height: 100%;
+        border-radius: 0;
+        z-index: 999999;
+      }
+      .aa-container.bottom-right,
+      .aa-container.bottom-left,
+      .aa-container.top-right,
+      .aa-container.top-left {
+        position: static;
+      }
+      .aa-bubble {
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        width: 56px;
+        height: 56px;
+      }
+      .aa-header {
+        padding: 14px 16px;
+      }
+      .aa-messages {
+        padding: 16px;
+        gap: 12px;
+      }
+      .aa-message {
+        max-width: 90%;
+      }
+      .aa-message-content {
+        padding: 10px 14px;
+        font-size: 14px;
+      }
+      .aa-input-area {
+        padding: 12px 16px;
+        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
+      }
+      .aa-input {
+        padding: 12px 16px;
+        font-size: 16px;
+      }
+      .aa-send {
+        width: 44px;
+        height: 44px;
+      }
+    }
+    
+    .aa-header {
+      padding: 16px 20px;
+      background: var(--aa-surface);
+      border-bottom: 1px solid var(--aa-border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    
+    .aa-header-title {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    
+    .aa-header-logo {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--aa-primary), #0088AA);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .aa-header-logo svg {
+      width: 18px;
+      height: 18px;
+      fill: #000;
+    }
+    
+    .aa-header h3 {
+      color: var(--aa-text);
+      font-size: 15px;
+      font-weight: 600;
+    }
+    
+    .aa-header p {
+      color: var(--aa-text-muted);
+      font-size: 12px;
+    }
+    
+    .aa-close {
+      background: none;
+      border: none;
+      color: var(--aa-text-muted);
+      cursor: pointer;
+      padding: 8px;
+      border-radius: 8px;
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    
+    .aa-close svg {
+      width: 20px;
+      height: 20px;
+      fill: currentColor;
+    }
+    
+    .aa-close:hover {
+      background: var(--aa-border);
+      color: var(--aa-text);
+    }
+    
+    .aa-messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    
+    .aa-message {
+      max-width: 85%;
+      animation: aa-fade-in 0.3s ease;
+    }
+    
+    @keyframes aa-fade-in {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    
+    .aa-message.user {
+      align-self: flex-end;
+    }
+    
+    .aa-message.ai,
+    .aa-message.assistant {
+      align-self: flex-start;
+    }
+    
+    .aa-message-content {
+      padding: 12px 16px;
+      border-radius: 16px;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    
+    .aa-message.user .aa-message-content {
+      background: var(--aa-primary);
+      color: #000;
+      border-bottom-right-radius: 4px;
+    }
+    
+    .aa-message.ai .aa-message-content,
+    .aa-message.assistant .aa-message-content {
+      background: var(--aa-surface);
+      color: var(--aa-text);
+      border: 1px solid var(--aa-border);
+      border-bottom-left-radius: 4px;
+    }
+    
+    .aa-message-label {
+      font-size: 11px;
+      color: var(--aa-text-muted);
+      margin-bottom: 4px;
+    }
+    
+    .aa-message.user .aa-message-label {
+      text-align: right;
+    }
+    
+    .aa-typing {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 12px 16px;
+      background: var(--aa-surface);
+      border-radius: 16px;
+      border: 1px solid var(--aa-border);
+      align-self: flex-start;
+    }
+    
+    .aa-typing span {
+      width: 8px;
+      height: 8px;
+      background: var(--aa-text-muted);
+      border-radius: 50%;
+      animation: aa-bounce 1s infinite;
+    }
+    
+    .aa-typing span:nth-child(2) { animation-delay: 0.2s; }
+    .aa-typing span:nth-child(3) { animation-delay: 0.4s; }
+    
+    @keyframes aa-bounce {
+      0%, 60%, 100% { transform: translateY(0); }
+      30% { transform: translateY(-8px); }
+    }
+    
+    .aa-input-area {
+      padding: 16px;
+      background: var(--aa-surface);
+      border-top: 1px solid var(--aa-border);
+    }
+    
+    .aa-input-wrapper {
+      display: flex;
+      gap: 8px;
+      background: var(--aa-bg);
+      border: 1px solid var(--aa-border);
+      border-radius: 12px;
+      padding: 8px 12px;
+      transition: border-color 0.2s;
+    }
+    
+    .aa-input-wrapper:focus-within {
+      border-color: var(--aa-primary);
+    }
+    
+    .aa-input {
+      flex: 1;
+      background: none;
+      border: none;
+      color: var(--aa-text);
+      font-size: 14px;
+      font-family: var(--aa-font);
+      outline: none;
+      resize: none;
+      min-height: 24px;
+      max-height: 120px;
+    }
+    
+    .aa-input::placeholder {
+      color: var(--aa-text-muted);
+    }
+    
+    .aa-send {
+      width: 36px;
+      height: 36px;
+      border-radius: 10px;
+      background: var(--aa-primary);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity 0.2s, transform 0.2s;
+      align-self: flex-end;
+    }
+    
+    .aa-send:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+    
+    .aa-send:not(:disabled):hover {
+      transform: scale(1.05);
+    }
+    
+    .aa-send svg {
+      width: 18px;
+      height: 18px;
+      fill: #000;
+    }
+    
+    .aa-powered {
+      text-align: center;
+      padding: 8px;
+      font-size: 11px;
+      color: var(--aa-text-muted);
+    }
+    
+    .aa-powered a {
+      color: var(--aa-text-muted);
+      text-decoration: none;
+    }
+    
+    .aa-powered a:hover {
+      color: var(--aa-text);
+    }
+    
+    .aa-email-gate {
+      position: absolute;
+      inset: 0;
+      background: rgba(0,0,0,0.8);
+      backdrop-filter: blur(4px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 12px;
+      z-index: 10;
+      border-radius: 12px;
+    }
+    
+    .aa-email-gate.hidden {
+      display: none;
+    }
+    
+    .aa-email-form {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+    }
+    
+    .aa-email-lock {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: rgba(0, 212, 255, 0.2);
+      border: 1px solid rgba(0, 212, 255, 0.3);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    
+    .aa-email-lock svg {
+      width: 14px;
+      height: 14px;
+      fill: var(--aa-primary);
+    }
+    
+    .aa-email-input-wrap {
+      flex: 1;
+      position: relative;
+    }
+    
+    .aa-email-input-wrap svg {
+      position: absolute;
+      left: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 14px;
+      height: 14px;
+      fill: var(--aa-text-muted);
+    }
+    
+    .aa-email-input {
+      width: 100%;
+      padding: 10px 10px 10px 32px;
+      background: rgba(255,255,255,0.1);
+      border: 1px solid rgba(255,255,255,0.2);
+      border-radius: 10px;
+      color: var(--aa-text);
+      font-size: 13px;
+      font-family: var(--aa-font);
+      outline: none;
+    }
+    
+    .aa-email-input:focus {
+      border-color: rgba(0, 212, 255, 0.5);
+    }
+    
+    .aa-email-input::placeholder {
+      color: var(--aa-text-muted);
+    }
+    
+    .aa-email-submit {
+      width: 36px;
+      height: 36px;
+      border-radius: 10px;
+      background: var(--aa-primary);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    
+    .aa-email-submit:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    
+    .aa-email-submit svg {
+      width: 16px;
+      height: 16px;
+      fill: #000;
+    }
+    
+    .aa-email-error {
+      position: absolute;
+      bottom: -18px;
+      left: 0;
+      right: 0;
+      text-align: center;
+      font-size: 11px;
+      color: #ff6b6b;
+    }
+    
+    .aa-welcome {
+      text-align: center;
+      padding: 40px 20px;
+    }
+    
+    .aa-welcome-icon {
+      width: 64px;
+      height: 64px;
+      margin: 0 auto 16px;
+      background: linear-gradient(135deg, var(--aa-primary), #0088AA);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .aa-welcome-icon svg {
+      width: 32px;
+      height: 32px;
+      fill: #000;
+    }
+    
+    .aa-welcome h2 {
+      color: var(--aa-text);
+      font-size: 20px;
+      margin-bottom: 8px;
+    }
+    
+    .aa-welcome p {
+      color: var(--aa-text-muted);
+      font-size: 14px;
+    }
+    
+    .aa-status-indicator {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .aa-status-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+    }
+    .aa-status-dot.online { background: var(--aa-primary); }
+    .aa-status-dot.away { background: #f59e0b; }
+    .aa-status-dot.offline { background: #6b7280; }
+    .aa-offline-message {
+      font-size: 11px;
+      color: var(--aa-text-muted);
+      margin-top: 4px;
+    }
+    
+  `;
+
+  const ICONS = {
+    chat: '<svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z"/><path d="M7 9h10v2H7zm0-3h10v2H7z"/></svg>',
+    close: '<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
+    send: '<svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>',
+    sparkle: '<svg viewBox="0 0 24 24"><path d="M12 2L9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61z"/></svg>',
+    lock: '<svg viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>',
+    mail: '<svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>',
+    arrowUp: '<svg viewBox="0 0 24 24"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>'
+  };
+
+  const WAITING_MSG = {
+    id: 'waiting-human',
+    role: 'system',
+    content: "You've been connected to our support team. A specialist will be with you shortly."
+  };
+
+  const normalizeRole = (role) => {
+    if (role === 'manager') return 'human';
+    return role;
+  };
+
+  const CLIENT_ID_KEY = 'aiassist_client_id';
+  const LEAD_STORAGE_KEY = 'aai_lead_captured';
+
+  function getOrCreateClientId() {
+    try {
+      let clientId = localStorage.getItem(CLIENT_ID_KEY);
+      if (!clientId) {
+        clientId = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+          const r = Math.random() * 16 | 0;
+          const v = c === 'x' ? r : (r & 0x3 | 0x8);
+          return v.toString(16);
+        });
+        localStorage.setItem(CLIENT_ID_KEY, clientId);
+      }
+      return clientId;
+    } catch (e) {
+      return 'temp-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+    }
+  }
+
+  class AiAssistWidget {
+    constructor(options = {}) {
+      this.options = {
+        apiKey: options.apiKey || '',
+        endpoint: options.endpoint || DEFAULT_ENDPOINT,
+        position: options.position || 'bottom-right',
+        theme: options.theme || 'dark',
+        title: options.title || 'AI Assistant',
+        subtitle: options.subtitle || 'Ask me anything',
+        placeholder: options.placeholder || 'Type your message...',
+        greeting: options.greeting || null,
+        systemPrompt: options.systemPrompt || null,
+        poweredBy: options.poweredBy !== false,
+        autoOpen: options.autoOpen || false,
+        autoOpenDelay: options.autoOpenDelay || 3000,
+        zIndex: options.zIndex || 999999,
+        
+        onReady: options.onReady || (() => {}),
+        onOpen: options.onOpen || (() => {}),
+        onClose: options.onClose || (() => {}),
+        onMessage: options.onMessage || (() => {}),
+        onError: options.onError || (() => {}),
+        onConversationStart: options.onConversationStart || (() => {}),
+        onConversationEnd: options.onConversationEnd || (() => {}),
+        onModeChange: options.onModeChange || (() => {}),
+        onLeadCapture: options.onLeadCapture || (() => {}),
+        requireEmail: options.requireEmail !== false
+      };
+      
+      this.isOpen = false;
+      this.isTyping = false;
+      this.messages = [];
+      this.messageIds = new Set();
+      this.workspaceId = null;
+      this.unreadCount = 0;
+      this.mode = 'ai';
+      this.showWaitingMessage = false;
+      this.awaitingApproval = false;
+      this.humanMsgCountAtTakeover = 0;
+      this.lastKnownHumanCount = 0;
+      this.clientId = getOrCreateClientId();
+      this.isLeadCaptured = false;
+      this.leadInfo = null;
+      this.staffAvailability = "online";
+      this.availabilityMessage = null;
+      this.autoOfflineMessage = null;
+      
+      this._init();
+    }
+    
+    _init() {
+      this._checkLeadStatus();
+      this._createWidget();
+      this._attachEvents();
+      this._loadExistingChat();
+      this._fetchAvailability();
+      
+      if (this.options.autoOpen) {
+        setTimeout(() => this.open(), this.options.autoOpenDelay);
+      }
+      
+      this.options.onReady();
+      this._dispatch('ready');
+    }
+    
+    async _fetchAvailability() {
+      try {
+        const res = await fetch(`${this.options.endpoint}/v1/availability`, {
+          headers: { "Authorization": `Bearer ${this.options.apiKey}` }
+        });
+        if (res.ok) {
+          const data = await res.json();
+          this.staffAvailability = data.availability || "online";
+          this.availabilityMessage = data.message || null;
+          this.autoOfflineMessage = data.auto_offline_message || null;
+          this._updateHeader();
+        }
+      } catch (e) {}
+    }
+    
+    _checkLeadStatus() {
+      if (!this.options.requireEmail) {
+        this.isLeadCaptured = true;
+        return;
+      }
+      try {
+        const stored = localStorage.getItem(LEAD_STORAGE_KEY);
+        if (stored) {
+          const data = JSON.parse(stored);
+          if (data.leadId && data.email) {
+            this.isLeadCaptured = true;
+            this.leadInfo = data;
+          }
+        }
+      } catch (e) {}
+      
+      if (!this.isLeadCaptured && this.clientId) {
+        this._checkLeadOnServer();
+      }
+    }
+    
+    async _checkLeadOnServer() {
+      try {
+        const res = await fetch(`${this.options.endpoint}/api/leads/check/${this.clientId}`, {
+          headers: { 'X-API-Key': this.options.apiKey }
+        });
+        if (res.ok) {
+          const data = await res.json();
+          if (data.captured && data.leadId && data.email) {
+            this.isLeadCaptured = true;
+            this.leadInfo = { leadId: data.leadId, email: data.email };
+            localStorage.setItem(LEAD_STORAGE_KEY, JSON.stringify(this.leadInfo));
+            this._hideEmailGate();
+          }
+        }
+      } catch (e) {}
+    }
+    
+    async _captureEmail(email) {
+      try {
+        const res = await fetch(`${this.options.endpoint}/api/leads/capture`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-API-Key': this.options.apiKey
+          },
+          body: JSON.stringify({
+            email: email,
+            client_id: this.clientId,
+            source: 'widget'
+          })
+        });
+        if (!res.ok) throw new Error('Failed to capture');
+        const data = await res.json();
+        this.isLeadCaptured = true;
+        this.leadInfo = { leadId: data.lead_id, email: email };
+        localStorage.setItem(LEAD_STORAGE_KEY, JSON.stringify(this.leadInfo));
+        this._hideEmailGate();
+        this.options.onLeadCapture(this.leadInfo);
+        this._dispatch('lead:capture', this.leadInfo);
+        return true;
+      } catch (e) {
+        return false;
+      }
+    }
+    
+    _hideEmailGate() {
+      if (this.emailGate) {
+        this.emailGate.style.display = 'none';
+      }
+      if (this.input) {
+        this.input.disabled = false;
+        this.input.focus();
+      }
+    }
+    
+    async _loadExistingChat() {
+      if (!this.clientId || !this.options.apiKey) return;
+      
+      try {
+        const res = await fetch(`${this.options.endpoint}/api/workspaces/by-client/${this.clientId}`, {
+          headers: {
+            'X-API-Key': this.options.apiKey
+          }
+        });
+        
+        if (!res.ok) return;
+        
+        const data = await res.json();
+        
+        if (data.exists && data.workspace) {
+          this.workspaceId = data.workspace.id;
+          
+          const welcome = this.messagesEl.querySelector('.aa-welcome');
+          if (welcome) welcome.remove();
+          
+          if (data.messages && data.messages.length > 0) {
+            data.messages.forEach(msg => {
+              const role = normalizeRole(msg.role);
+              this._addMessage(role, msg.content, msg.id, false);
+            });
+          }
+          
+          const isHumanMode = data.workspace.mode === 'human' || data.workspace.mode === 'takeover';
+          if (isHumanMode) {
+            this.mode = 'human';
+            this.options.onModeChange('human');
+            this._dispatch('mode:change', { mode: 'human' });
+          }
+          
+          this._startPolling();
+          this.options.onConversationStart(this.workspaceId);
+          this._dispatch('conversation:start', { workspaceId: this.workspaceId });
+        }
+      } catch (error) {
+        console.warn('AiAssist: Failed to load existing chat', error);
+      }
+    }
+    
+    _createWidget() {
+      this.container = document.createElement('div');
+      this.container.id = 'aiassist-widget';
+      
+      const shadow = this.container.attachShadow({ mode: 'open' });
+      
+      const style = document.createElement('style');
+      style.textContent = STYLES;
+      shadow.appendChild(style);
+      
+      this.root = document.createElement('div');
+      this.root.className = `aa-container ${this.options.position}`;
+      this.root.style.zIndex = this.options.zIndex;
+      
+      this.root.innerHTML = `
+        <button class="aa-bubble" data-testid="button-chat-bubble">
+          ${ICONS.chat}
+        </button>
+        
+        <div class="aa-widget" data-testid="chat-widget">
+          <div class="aa-header">
+            <div class="aa-header-title">
+              <div class="aa-header-logo">${ICONS.sparkle}</div>
+              <div class="aa-header-info">
+                <h3>${this._escapeHtml(this.options.title)}</h3>
+                <div class="aa-status-indicator" data-testid="status-staff-availability">
+                  <span class="aa-status-dot online"></span>
+                  <p>${this._escapeHtml(this.options.subtitle)}</p>
+                </div>
+                <div class="aa-offline-message" data-testid="status-offline-message" style="display: none;"></div>
+              </div>
+            </div>
+            <button class="aa-close" data-testid="button-close-chat">${ICONS.close}</button>
+          </div>
+          
+          <div class="aa-messages" data-testid="chat-messages">
+            <div class="aa-welcome">
+              <div class="aa-welcome-icon">${ICONS.sparkle}</div>
+              <h2>${this._escapeHtml(this.options.title)}</h2>
+              <p>${this._escapeHtml(this.options.subtitle)}</p>
+            </div>
+          </div>
+          
+          <div class="aa-input-area" style="position: relative;">
+            <div class="aa-email-gate ${this.isLeadCaptured ? 'hidden' : ''}" data-testid="email-gate">
+              <form class="aa-email-form">
+                <div class="aa-email-lock">${ICONS.lock}</div>
+                <div class="aa-email-input-wrap">
+                  ${ICONS.mail}
+                  <input type="email" class="aa-email-input" placeholder="Enter email to unlock chat" data-testid="input-email-gate" />
+                </div>
+                <button type="submit" class="aa-email-submit" data-testid="button-unlock-chat">${ICONS.arrowUp}</button>
+                <div class="aa-email-error"></div>
+              </form>
+            </div>
+            <div class="aa-input-wrapper">
+              <textarea 
+                class="aa-input" 
+                placeholder="${this._escapeHtml(this.options.placeholder)}"
+                ${!this.isLeadCaptured ? 'disabled' : ''}
+                rows="1"
+                data-testid="input-chat-message"
+              ></textarea>
+              <button class="aa-send" disabled data-testid="button-send-message">
+                ${ICONS.send}
+              </button>
+            </div>
+          </div>
+          
+          ${this.options.poweredBy ? `
+            <div class="aa-powered">
+              Powered by <a href="https://aiassist.net" target="_blank">AiAssist</a>
+            </div>
+          ` : ''}
+          
+        </div>
+      `;
+      
+      shadow.appendChild(this.root);
+      document.body.appendChild(this.container);
+      
+      this.bubble = this.root.querySelector('.aa-bubble');
+      this.widget = this.root.querySelector('.aa-widget');
+      this.messagesEl = this.root.querySelector('.aa-messages');
+      this.input = this.root.querySelector('.aa-input');
+      this.sendBtn = this.root.querySelector('.aa-send');
+      this.closeBtn = this.root.querySelector('.aa-close');
+      this.emailGate = this.root.querySelector('.aa-email-gate');
+      this.emailInput = this.root.querySelector('.aa-email-input');
+      this.emailSubmit = this.root.querySelector('.aa-email-submit');
+      this.emailForm = this.root.querySelector('.aa-email-form');
+      this.emailError = this.root.querySelector('.aa-email-error');
+      this.statusIndicator = this.root.querySelector('.aa-status-indicator');
+      this.statusDot = this.root.querySelector('.aa-status-dot');
+      this.statusText = this.root.querySelector('.aa-status-indicator p');
+      this.offlineMessageEl = this.root.querySelector('.aa-offline-message');
+      
+      this._shouldAutoScroll = true;
+      this._scrollToNewAiMessage = false;
+      this.messagesEl.addEventListener('scroll', () => this._handleScroll());
+    }
+    
+    _attachEvents() {
+      this.bubble.addEventListener('click', () => this.toggle());
+      this.closeBtn.addEventListener('click', () => this.close());
+      
+      this.input.addEventListener('input', () => {
+        this._autoResize();
+        this.sendBtn.disabled = !this.input.value.trim();
+        this._sendTypingPreview();
+      });
+      
+      this.input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          this._handleSend();
+        }
+      });
+      
+      this.sendBtn.addEventListener('click', () => this._handleSend());
+      
+      if (this.emailForm) {
+        this.emailForm.addEventListener('submit', async (e) => {
+          e.preventDefault();
+          const email = this.emailInput.value.trim();
+          if (!email) {
+            this.emailError.textContent = 'Please enter your email';
+            return;
+          }
+          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+          if (!emailRegex.test(email)) {
+            this.emailError.textContent = 'Please enter a valid email';
+            return;
+          }
+          this.emailError.textContent = '';
+          this.emailSubmit.disabled = true;
+          const success = await this._captureEmail(email);
+          if (!success) {
+            this.emailError.textContent = 'Something went wrong. Try again.';
+            this.emailSubmit.disabled = false;
+          }
+        });
+        
+        this.emailInput.addEventListener('input', () => {
+          this.emailError.textContent = '';
+          this.emailSubmit.disabled = !this.emailInput.value.trim();
+        });
+      }
+    }
+    
+    _autoResize() {
+      this.input.style.height = 'auto';
+      this.input.style.height = Math.min(this.input.scrollHeight, 120) + 'px';
+    }
+    
+    _escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+    
+    _updateHeader() {
+      if (!this.statusDot || !this.statusText) return;
+      
+      this.statusDot.classList.remove('online', 'away', 'offline');
+      this.statusDot.classList.add(this.staffAvailability);
+      
+      if ((this.staffAvailability === 'away' || this.staffAvailability === 'offline') && this.availabilityMessage) {
+        this.statusText.textContent = this.availabilityMessage;
+      } else {
+        this.statusText.textContent = this.options.subtitle;
+      }
+      
+      if (this.offlineMessageEl) {
+        if (this.staffAvailability === 'offline' && this.autoOfflineMessage) {
+          this.offlineMessageEl.textContent = this.autoOfflineMessage;
+          this.offlineMessageEl.style.display = 'block';
+        } else {
+          this.offlineMessageEl.style.display = 'none';
+        }
+      }
+    }
+    
+    _dispatch(event, detail = {}) {
+      document.dispatchEvent(new CustomEvent(`aiassist:${event}`, { detail }));
+    }
+    
+    async _handleSend() {
+      const content = this.input.value.trim();
+      if (!content || this.isTyping || !this.isLeadCaptured) return;
+      
+      this.input.value = '';
+      this.sendBtn.disabled = true;
+      this._autoResize();
+      
+      const tempId = `temp-${Date.now()}`;
+      this._addMessage('user', content, tempId);
+      this._showTyping();
+      this._scrollToNewAiMessage = true;
+      
+      try {
+        if (!this.workspaceId) {
+          await this._createWorkspace(content, tempId);
+        } else {
+          await this._sendMessage(content, tempId);
+        }
+      } catch (error) {
+        this._hideTyping();
+        // Show the actual error message from the API if available
+        const funnyFallbacks = [
+          "🤖 Oops! I tripped over a cable. Let me try that again...",
+          "🌀 My circuits got a bit confused there. Mind trying again?",
+          "🎭 Even AIs have off moments! Give it another shot?",
+          "🔧 Technical hiccup! The gremlins are being dealt with.",
+          "☕ I might need more coffee... or electricity. Try again?"
+        ];
+        const errorMessage = error.message && !error.message.includes('API error:') 
+          ? error.message 
+          : funnyFallbacks[Math.floor(Math.random() * funnyFallbacks.length)];
+        this._addMessage('ai', errorMessage);
+        this.options.onError(error);
+        this._dispatch('error', { error });
+      }
+    }
+    
+    async _createWorkspace(message, tempUserId) {
+      const payload = {
+        initial_message: message,
+        client_id: this.clientId,
+        metadata: {
+          source: 'vanilla-widget',
+          url: window.location.href
+        }
+      };
+      
+      if (this.options.systemPrompt) {
+        payload.system_prompt = this.options.systemPrompt;
+      }
+      
+      const res = await fetch(`${this.options.endpoint}/api/workspaces`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-API-Key': this.options.apiKey
+        },
+        body: JSON.stringify(payload)
+      });
+      
+      if (!res.ok) {
+        const errorData = await res.json().catch(() => ({}));
+        const errorMsg = errorData.detail || `API error: ${res.status}`;
+        throw new Error(errorMsg);
+      }
+      
+      const data = await res.json();
+      this.workspaceId = data.workspace.id;
+      
+      this.options.onConversationStart(this.workspaceId);
+      this._dispatch('conversation:start', { workspaceId: this.workspaceId });
+      
+      this._hideTyping();
+      
+      if (data.messages) {
+        data.messages.forEach(msg => {
+          const role = normalizeRole(msg.role);
+          if (role === 'user') {
+            this._replaceTempMessage(tempUserId, msg.id);
+          } else {
+            this._addMessage(role, msg.content, msg.id, false);
+            this.options.onMessage(msg);
+          }
+        });
+      }
+      
+      const isHumanMode = data.workspace.mode === 'human' || data.workspace.mode === 'takeover';
+      if (isHumanMode) {
+        this.mode = 'human';
+        this.options.onModeChange('human');
+        this._dispatch('mode:change', { mode: 'human' });
+        const hasHumanResponse = data.messages && data.messages.some(m => normalizeRole(m.role) === 'human');
+        if (!hasHumanResponse) {
+          this._showWaitingMessage();
+        }
+      }
+      
+      this._startPolling();
+    }
+    
+    async _sendMessage(content, tempUserId) {
+      const res = await fetch(`${this.options.endpoint}/api/workspaces/${this.workspaceId}/messages`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-API-Key': this.options.apiKey
+        },
+        body: JSON.stringify({ content })
+      });
+      
+      if (!res.ok) {
+        const errorData = await res.json().catch(() => ({}));
+        const errorMsg = errorData.detail || `API error: ${res.status}`;
+        throw new Error(errorMsg);
+      }
+      
+      const data = await res.json();
+      
+      this._hideTyping();
+      
+      const wasAiMode = this.mode === 'ai';
+      const isHumanMode = data.mode === 'human' || data.mode === 'takeover';
+      
+      if (isHumanMode && wasAiMode) {
+        this.mode = 'human';
+        this.humanMsgCountAtTakeover = this.messages.filter(m => m.role === 'human').length;
+        this.options.onModeChange('human');
+        this._dispatch('mode:change', { mode: 'human' });
+      }
+      
+      if (data.user_message) {
+        this._replaceTempMessage(tempUserId, data.user_message.id);
+      }
+      
+      if (data.pending_approval) {
+        this.awaitingApproval = true;
+        this._showAwaitingApproval();
+      } else {
+        this.awaitingApproval = false;
+        this._hideAwaitingApproval();
+      }
+      
+      if (data.responses) {
+        const hasHumanResponse = data.responses.some(r => normalizeRole(r.role) === 'human');
+        
+        data.responses.forEach(msg => {
+          const role = normalizeRole(msg.role);
+          this._addMessage(role, msg.content, msg.id, false);
+          this.options.onMessage(msg);
+          this._dispatch('message', { message: msg });
+        });
+        
+        if (hasHumanResponse) {
+          this._hideWaitingMessage();
+        } else if (isHumanMode && wasAiMode) {
+          this._showWaitingMessage();
+        }
+      }
+      
+      this._startPolling();
+    }
+    
+    _sendTypingPreview() {
+      if (!this.workspaceId) return;
+      
+      clearTimeout(this._typingTimeout);
+      this._typingTimeout = setTimeout(() => {
+        fetch(`${this.options.endpoint}/api/workspaces/${this.workspaceId}/typing`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-API-Key': this.options.apiKey
+          },
+          body: JSON.stringify({ text: this.input.value })
+        }).catch(() => {});
+      }, 300);
+    }
+    
+    _addMessage(role, content, id = null, animate = true) {
+      const msgId = id || `temp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      
+      if (this.messageIds.has(msgId)) return;
+      this.messageIds.add(msgId);
+      
+      const welcome = this.messagesEl.querySelector('.aa-welcome');
+      if (welcome) welcome.remove();
+      
+      const displayRole = role === 'human' ? 'ai' : role;
+      
+      const msgEl = document.createElement('div');
+      msgEl.className = `aa-message ${displayRole}`;
+      msgEl.setAttribute('data-message-id', msgId);
+      if (!animate) msgEl.style.animation = 'none';
+      
+      const label = role === 'user' ? 'You' : 
+                    role === 'human' ? `${this.options.title} (Human)` : 
+                    this.options.title;
+      
+      msgEl.innerHTML = `
+        <div class="aa-message-label">${this._escapeHtml(label)}</div>
+        <div class="aa-message-content">${this._formatContent(content)}</div>
+      `;
+      
+      this.messagesEl.appendChild(msgEl);
+      
+      if (role !== 'user' && this._scrollToNewAiMessage) {
+        this._scrollToMessage(msgEl);
+        this._scrollToNewAiMessage = false;
+      } else {
+        this._scrollToBottom();
+      }
+      
+      this.messages.push({ id: msgId, role, content, timestamp: new Date().toISOString() });
+      
+      if (!this.isOpen && role !== 'user') {
+        this.unreadCount++;
+        this._updateBadge();
+      }
+    }
+    
+    _replaceTempMessage(tempId, canonicalId) {
+      if (!tempId || this.messageIds.has(canonicalId)) return;
+      
+      this.messageIds.delete(tempId);
+      this.messageIds.add(canonicalId);
+      
+      const msgIndex = this.messages.findIndex(m => m.id === tempId);
+      if (msgIndex !== -1) {
+        this.messages[msgIndex].id = canonicalId;
+      }
+      
+      const msgEl = this.messagesEl.querySelector(`[data-message-id="${tempId}"]`);
+      if (msgEl) {
+        msgEl.setAttribute('data-message-id', canonicalId);
+      }
+    }
+    
+    _showWaitingMessage() {
+      if (this.showWaitingMessage) return;
+      this.showWaitingMessage = true;
+      
+      const waitingEl = document.createElement('div');
+      waitingEl.className = 'aa-message system';
+      waitingEl.id = 'aa-waiting-message';
+      waitingEl.innerHTML = `
+        <div class="aa-message-content" style="background: transparent; border: none; color: var(--aa-text-muted); text-align: center; font-size: 13px;">
+          ${this._escapeHtml(WAITING_MSG.content)}
+        </div>
+      `;
+      
+      this.messagesEl.appendChild(waitingEl);
+      this._scrollToBottom();
+    }
+    
+    _hideWaitingMessage() {
+      this.showWaitingMessage = false;
+      const waitingEl = this.messagesEl.querySelector('#aa-waiting-message');
+      if (waitingEl) waitingEl.remove();
+    }
+    
+    _showAwaitingApproval() {
+      if (this.messagesEl.querySelector('#aa-awaiting-approval')) return;
+      
+      const approvalEl = document.createElement('div');
+      approvalEl.className = 'aa-message system';
+      approvalEl.id = 'aa-awaiting-approval';
+      approvalEl.innerHTML = `
+        <div class="aa-message-content" style="background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); color: #fbbf24; text-align: center; font-size: 13px;">
+          Hang tight! Someone will be with you in just a moment.
+        </div>
+      `;
+      
+      this.messagesEl.appendChild(approvalEl);
+      this._scrollToBottom();
+    }
+    
+    _hideAwaitingApproval() {
+      this.awaitingApproval = false;
+      const approvalEl = this.messagesEl.querySelector('#aa-awaiting-approval');
+      if (approvalEl) approvalEl.remove();
+    }
+    
+    _formatContent(content) {
+      return this._escapeHtml(content)
+        .replace(/\n/g, '<br>')
+        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*(.*?)\*/g, '<em>$1</em>')
+        .replace(/`(.*?)`/g, '<code>$1</code>');
+    }
+    
+    _showTyping() {
+      this.isTyping = true;
+      
+      const typing = document.createElement('div');
+      typing.className = 'aa-typing';
+      typing.id = 'aa-typing-indicator';
+      typing.innerHTML = '<span></span><span></span><span></span>';
+      
+      this.messagesEl.appendChild(typing);
+      this._scrollToBottom();
+    }
+    
+    _hideTyping() {
+      this.isTyping = false;
+      const typing = this.messagesEl.querySelector('#aa-typing-indicator');
+      if (typing) typing.remove();
+    }
+    
+    _scrollToBottom(forceScroll = false) {
+      if (forceScroll || this._shouldAutoScroll) {
+        this.messagesEl.scrollTop = this.messagesEl.scrollHeight;
+      }
+    }
+    
+    _scrollToMessage(msgEl) {
+      if (msgEl && this.messagesEl) {
+        const messageTop = msgEl.offsetTop - 20;
+        this.messagesEl.scrollTop = messageTop;
+      }
+    }
+    
+    _checkIfNearBottom() {
+      const { scrollTop, scrollHeight, clientHeight } = this.messagesEl;
+      return scrollHeight - scrollTop - clientHeight < 100;
+    }
+    
+    _handleScroll() {
+      this._shouldAutoScroll = this._checkIfNearBottom();
+    }
+    
+    _updateBadge() {
+      if (this.unreadCount > 0) {
+        this.bubble.classList.add('has-unread');
+        this.bubble.setAttribute('data-count', this.unreadCount > 9 ? '9+' : this.unreadCount);
+      } else {
+        this.bubble.classList.remove('has-unread');
+      }
+    }
+    
+    _startPolling() {
+      if (this._pollInterval) return;
+      
+      this._pollInterval = setInterval(async () => {
+        if (!this.workspaceId) return;
+        
+        try {
+          const [wsRes, msgRes] = await Promise.all([
+            fetch(`${this.options.endpoint}/api/workspaces/${this.workspaceId}`, {
+              headers: { 'X-API-Key': this.options.apiKey }
+            }),
+            fetch(`${this.options.endpoint}/api/workspaces/${this.workspaceId}/messages`, {
+              headers: { 'X-API-Key': this.options.apiKey }
+            })
+          ]);
+          
+          if (msgRes.ok) {
+            const data = await msgRes.json();
+            const serverMessages = (data.messages || []).map(m => ({
+              id: m.id,
+              role: normalizeRole(m.role),
+              content: m.content,
+              created_at: m.created_at
+            }));
+            
+            const currentHumanMsgCount = serverMessages.filter(m => m.role === 'human').length;
+            const previousCount = this.lastKnownHumanCount;
+            this.lastKnownHumanCount = currentHumanMsgCount;
+            
+            if (wsRes.ok) {
+              const wsData = await wsRes.json();
+              const workspace = wsData.workspace || wsData;
+              const isHumanMode = workspace.mode === 'human' || workspace.mode === 'takeover';
+              
+              if (isHumanMode && this.mode === 'ai') {
+                this.mode = 'human';
+                this.humanMsgCountAtTakeover = previousCount;
+                this.options.onModeChange('human');
+                this._dispatch('mode:change', { mode: 'human' });
+                
+                if (currentHumanMsgCount > previousCount) {
+                  this._hideWaitingMessage();
+                } else {
+                  this._showWaitingMessage();
+                }
+              } else if (!isHumanMode && this.mode === 'human') {
+                this.mode = 'ai';
+                this._hideWaitingMessage();
+                this.humanMsgCountAtTakeover = 0;
+                this.options.onModeChange('ai');
+                this._dispatch('mode:change', { mode: 'ai' });
+              } else if (isHumanMode && this.mode === 'human' && this.showWaitingMessage) {
+                if (currentHumanMsgCount > this.humanMsgCountAtTakeover) {
+                  this._hideWaitingMessage();
+                }
+              }
+            }
+            
+            let hasNewAiMessage = false;
+            serverMessages.forEach(msg => {
+              if (!this.messageIds.has(msg.id) && msg.role !== 'user') {
+                this._addMessage(msg.role, msg.content, msg.id, true);
+                this.options.onMessage(msg);
+                this._dispatch('message', { message: msg });
+                if (msg.role === 'ai' || msg.role === 'human') {
+                  hasNewAiMessage = true;
+                }
+              }
+            });
+            
+            if (hasNewAiMessage && this.awaitingApproval) {
+              this._hideAwaitingApproval();
+            }
+          }
+        } catch (e) {
+          console.error('Polling error:', e);
+        }
+      }, 3000);
+    }
+    
+    _stopPolling() {
+      if (this._pollInterval) {
+        clearInterval(this._pollInterval);
+        this._pollInterval = null;
+      }
+    }
+    
+    // Public API
+    
+    open() {
+      this.isOpen = true;
+      this.widget.classList.add('open');
+      this.bubble.style.display = 'none';
+      this.unreadCount = 0;
+      this._updateBadge();
+      this.input.focus();
+      
+      if (this.options.greeting && this.messages.length === 0) {
+        this._addMessage('ai', this.options.greeting, 'greeting-msg', true);
+      }
+      
+      if (this.workspaceId) {
+        this._startPolling();
+      }
+      
+      this.options.onOpen();
+      this._dispatch('open');
+    }
+    
+    close() {
+      this.isOpen = false;
+      this.widget.classList.remove('open');
+      this.bubble.style.display = 'flex';
+      
+      this._stopPolling();
+      
+      this.options.onClose();
+      this._dispatch('close');
+    }
+    
+    toggle() {
+      if (this.isOpen) {
+        this.close();
+      } else {
+        this.open();
+      }
+    }
+    
+    sendMessage(content, metadata = {}) {
+      if (typeof content !== 'string' || !content.trim()) return;
+      
+      this.input.value = content;
+      this._handleSend();
+    }
+    
+    getMessages() {
+      return [...this.messages];
+    }
+    
+    getWorkspaceId() {
+      return this.workspaceId;
+    }
+    
+    clearConversation() {
+      this._stopPolling();
+      this.messages = [];
+      this.messageIds = new Set();
+      this.workspaceId = null;
+      this.mode = 'ai';
+      this.showWaitingMessage = false;
+      this.humanMsgCountAtTakeover = 0;
+      this.lastKnownHumanCount = 0;
+      
+      this.messagesEl.innerHTML = `
+        <div class="aa-welcome">
+          <div class="aa-welcome-icon">${ICONS.sparkle}</div>
+          <h2>${this._escapeHtml(this.options.title)}</h2>
+          <p>${this._escapeHtml(this.options.subtitle)}</p>
+        </div>
+      `;
+    }
+    
+    endConversation() {
+      if (this.workspaceId) {
+        this.options.onConversationEnd(this.workspaceId);
+        this._dispatch('conversation:end', { workspaceId: this.workspaceId });
+      }
+      this.clearConversation();
+    }
+    
+    async updateContext(context) {
+      if (!this.workspaceId) return;
+      
+      try {
+        await fetch(`${this.options.endpoint}/api/workspaces/${this.workspaceId}`, {
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-API-Key': this.options.apiKey
+          },
+          body: JSON.stringify({ metadata: context })
+        });
+      } catch (e) {
+        console.error('Failed to update context:', e);
+      }
+    }
+    
+    getMode() {
+      return this.mode;
+    }
+    
+    identify(userData) {
+      this.userData = userData;
+    }
+    
+    clearIdentity() {
+      this.userData = null;
+    }
+    
+    setPosition(position) {
+      this.root.className = `aa-container ${position}`;
+      this.options.position = position;
+    }
+    
+    show() {
+      this.container.style.display = 'block';
+    }
+    
+    hide() {
+      this.container.style.display = 'none';
+    }
+    
+    destroy() {
+      this._stopPolling();
+      this.container.remove();
+    }
+  }
+  
+  // Global API
+  const AiAssist = {
+    _instance: null,
+    
+    init(options) {
+      if (this._instance) {
+        console.warn('AiAssist already initialized');
+        return this._instance;
+      }
+      this._instance = new AiAssistWidget(options);
+      return this._instance;
+    },
+    
+    open() { this._instance?.open(); },
+    close() { this._instance?.close(); },
+    toggle() { this._instance?.toggle(); },
+    isOpen() { return this._instance?.isOpen || false; },
+    sendMessage(content, metadata) { this._instance?.sendMessage(content, metadata); },
+    getMessages() { return this._instance?.getMessages() || []; },
+    getWorkspaceId() { return this._instance?.getWorkspaceId(); },
+    getMode() { return this._instance?.getMode() || 'ai'; },
+    clearConversation() { this._instance?.clearConversation(); },
+    endConversation() { this._instance?.endConversation(); },
+    updateContext(context) { return this._instance?.updateContext(context); },
+    identify(userData) { this._instance?.identify(userData); },
+    clearIdentity() { this._instance?.clearIdentity(); },
+    setPosition(position) { this._instance?.setPosition(position); },
+    show() { this._instance?.show(); },
+    hide() { this._instance?.hide(); },
+    destroy() { 
+      this._instance?.destroy(); 
+      this._instance = null;
+    }
+  };
+  
+  
+  return AiAssist;
+})();
+
+export default AiAssist;
+export { AiAssist };
+