@aiassist-secure/vanilla 1.0.0

package/dist/widget.min.js

@@ -0,0 +1,1358 @@
+/**
+ * AiAssist Vanilla Widget v1.0.0
+ * https://aiassist.net
+ * 
+ * Drop-in AI chat for any website
+ * (c) 2026 AiAssist - MIT License
+ */
+(function(global) {
+'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();
+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;
+}
+}
+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();
+}
+}
+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;
+}
+};
+if (typeof module !== 'undefined' && module.exports) {
+module.exports = AiAssist;
+} else if (typeof define === 'function' && define.amd) {
+define([], function() { return AiAssist; });
+} else {
+global.AiAssist = AiAssist;
+}
+})(typeof window !== 'undefined' ? window : this);