wakz-chat-widget 4.0.0 → 4.0.2

package/README.md

@@ -0,0 +1,71 @@
+# wakz-chat-widget
+
+**Premium AI chat widget by WAKZ** — A production-grade, self-contained chat widget using Shadow DOM.
+
+> Competes with Intercom & Crisp in quality. **Zero external dependencies** — pure vanilla JavaScript.
+
+## Features
+
+- Shadow DOM isolation (no CSS conflicts)
+- Multi-language support (English, Arabic, French) with full RTL
+- Device detection (model, platform, type)
+- Online/offline status with animated indicators
+- Message polling with deduplication
+- Mobile responsive (full-screen on small devices)
+- Typing indicator animations
+- Welcome messages
+- Human agent badge support
+- Auto-resizing textarea input
+- Keyboard shortcuts (Enter to send, Shift+Enter for newline, Escape to close)
+- Smooth animations and transitions
+- Configurable theming (colors, position)
+
+## Installation
+
+```bash
+npm install wakz-chat-widget
+```
+
+## Usage
+
+Copy `index.js` from `node_modules/wakz-chat-widget/` to your public folder and include it:
+
+```html
+<script src="/wakz-widget.js"
+  data-api-key="YOUR_API_KEY"
+  data-server="https://your-server.com"
+  async>
+</script>
+```
+
+## Configuration
+
+The widget fetches its configuration from your server's `/api/v1/embed/config` endpoint. Configurable options include:
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `botName` | string | `'WAKZ'` | Bot display name |
+| `welcomeMessage` | string | `''` | Initial welcome message |
+| `primaryColor` | string | `'#171717'` | Primary theme color |
+| `chatBg` | string | `'#f8f9fa'` | Chat area background |
+| `btnColor` | string | `'#171717'` | FAB button color |
+| `widgetBg` | string | `'#ffffff'` | Widget background |
+| `position` | string | `'bottom-right'` | Widget position |
+| `language` | string | `'en'` | Language (`en`, `ar`, `fr`) |
+| `showStatus` | boolean | `true` | Show online/offline dot |
+| `online` | boolean | `true` | Initial status |
+
+## Version History
+
+### v2.2.0
+- Added device model, platform, and type detection (User-Agent Client Hints API + UA fallback)
+- Device info sent with session data for dashboard analytics
+
+### v2.0.0
+- Complete rewrite with Shadow DOM architecture
+- Multi-language support (EN/AR/FR) with RTL
+- Production-grade UI with animations
+
+## License
+
+MIT

package/index.js

@@ -1,5 +1,5 @@
 /**
- * WAKZ Chat Widget v4.0.0
+ * WAKZ Chat Widget v4.0.2
  * ─────────────────────────────────────────────────────────────────
  * A production-grade, self-contained chat widget using Shadow DOM.
  * Liquid Glass design — pill header, floating input, dark user bubbles.
@@ -146,7 +146,13 @@
     close:
       '<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/><line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>',
     error:
-      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>'
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
+    message:
+      '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22z"/></svg>',
+    whatsapp:
+      '<svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>',
+    headset:
+      '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3ZM3 19a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H5"/></svg>'
   };
 
   /* ════════════════════════════════════════════════════════════════
@@ -210,11 +216,23 @@
     primaryColor: '#111111',
     chatBg: '#ffffff',
     btnColor: '#111111',
-    widgetBg: '#ffffff',
+    widgetBg: '#f5f5f5',
     position: 'bottom-right',
     language: 'en',
     showStatus: true,
-    online: true
+    online: true,
+    /* v4.0.1 — Advanced customization */
+    fabShape: 'circle',
+    fabIcon: 'chat',
+    triggerMode: 'manual',
+    triggerDelay: 5,
+    displayMode: 'modal',
+    botBubbleColor: '#ffffff',
+    botTextColor: '#333333',
+    userBubbleColor: '#111111',
+    userTextColor: '#ffffff',
+    headerColor: '',
+    headerTextColor: ''
   };
 
   /* ════════════════════════════════════════════════════════════════
@@ -992,6 +1010,28 @@
       '  border-bottom-right-radius: 4px;',
       '}',
 
+      /* ══════════════════════════════════════════════════
+         FULLSCREEN MODE — overrides window to fill viewport
+         ══════════════════════════════════════════════════ */
+      '.wakz-mode-fullscreen {',
+      '  width: 100vw !important;',
+      '  height: 100vh !important;',
+      '  max-width: 100vw !important;',
+      '  max-height: 100vh !important;',
+      '  top: 0 !important;',
+      '  left: 0 !important;',
+      '  transform: none !important;',
+      '  border-radius: 0 !important;',
+      '  box-shadow: none !important;',
+      '}',
+      '.wakz-mode-fullscreen.wakz-visible {',
+      '  transform: none !important;',
+      '}',
+      /* Hide overlay in fullscreen mode — not needed */
+      '.wakz-mode-fullscreen ~ .wakz-overlay {',
+      '  display: none !important;',
+      '}',
+
       /* ══════════════════════════════════════════════════
          RESPONSIVE
          ══════════════════════════════════════════════════ */
@@ -1067,7 +1107,8 @@
 
     /* ══════════════ FLOATING HEADER (pill, absolute over messages) ══════════════ */
     var headerWrap = _el('div', { className: 'wakz-header-wrap' });
-    var header = _el('div', { className: 'wakz-header' });
+    self._headerEl = _el('div', { className: 'wakz-header' });
+    var header = self._headerEl;
 
     /* Specular highlight (real DOM element, not ::before) */
     header.appendChild(_el('div', { className: 'wakz-specular' }));
@@ -1224,6 +1265,8 @@
       self._chatWindow.classList.add('wakz-visible');
       self._overlay.classList.add('wakz-visible');
       self._toggleBtn.classList.add('wakz-fab-hidden');
+      /* Re-fetch config on every open to get latest customizations */
+      self._fetchConfig();
       /* Fetch history on first open (after config is loaded) */
       if (self._configLoaded && !self._hasFetchedHistory) {
         self._fetchHistory();
@@ -1261,27 +1304,38 @@
       method: 'GET',
       headers: { 'Accept': 'application/json' }
     }, 30000)
-    .then(function (res) { return res.json(); })
+    .then(function (res) {
+      if (!res.ok) {
+        self._handleConfigError(true);
+        return null;
+      }
+      return res.json();
+    })
     .then(function (data) {
       if (data && data.success && data.config) {
         self.config = Object.assign({}, _DEFAULTS, data.config);
         self._configLoaded = true;
         self._applyConfig();
-      } else {
-        self._handleConfigError();
+      } else if (data !== null) {
+        self._handleConfigError(true);
       }
     })
     .catch(function (err) {
-      self._handleConfigError();
+      self._handleConfigError(false);
     });
   };
 
   /** Handle config fetch failure — show offline state */
-  WAKZWidget.prototype._handleConfigError = function () {
+  WAKZWidget.prototype._handleConfigError = function (isPermanent) {
     var self = this;
     self._configError = true;
     self.config.online = false;
 
+    /* Hide FAB entirely if key is permanently invalid */
+    if (isPermanent && self._toggleBtn) {
+      self._toggleBtn.style.display = 'none';
+    }
+
     /* Update FAB dot to red */
     if (self._statusDot) {
       self._statusDot.className = 'wakz-fab-dot offline';
@@ -1314,6 +1368,10 @@
     hostStyle.setProperty('--wakz-btn', cfg.btnColor);
     hostStyle.setProperty('--wakz-chat-bg', cfg.chatBg);
     hostStyle.setProperty('--wakz-widget-bg', cfg.widgetBg);
+    hostStyle.setProperty('--wakz-bot-bubble', cfg.botBubbleColor || '#ffffff');
+    hostStyle.setProperty('--wakz-bot-text', cfg.botTextColor || '#333333');
+    hostStyle.setProperty('--wakz-user-bubble', cfg.userBubbleColor || '#111111');
+    hostStyle.setProperty('--wakz-user-text', cfg.userTextColor || '#ffffff');
 
     /* ── RTL ── */
     if (isRtl) self._root.classList.add('wakz-rtl');
@@ -1363,6 +1421,57 @@
     /* ── Send button label ── */
     self._sendBtn.setAttribute('aria-label', str.sendMessage);
 
+    /* ── FAB Icon ── */
+    var iconKey = cfg.fabIcon || 'chat';
+    if (iconKey === 'chatBubble') iconKey = 'chat';
+    if (_ICONS[iconKey]) {
+      self._toggleBtn.innerHTML = _ICONS[iconKey];
+    } else {
+      self._toggleBtn.innerHTML = _ICONS.chatBubble;
+    }
+    /* Re-append status dot after innerHTML change */
+    if (self._statusDot && self._statusDot.parentNode !== self._toggleBtn) {
+      self._toggleBtn.appendChild(self._statusDot);
+    }
+
+    /* ── FAB Shape ── */
+    if (cfg.fabShape === 'pill') {
+      self._toggleBtn.style.borderRadius = '9999px';
+      self._toggleBtn.style.width = 'auto';
+      self._toggleBtn.style.padding = '0 20px';
+    } else {
+      self._toggleBtn.style.borderRadius = '50%';
+      self._toggleBtn.style.width = '56px';
+      self._toggleBtn.style.padding = '0';
+    }
+
+    /* ── Display Mode ── */
+    if (cfg.displayMode === 'fullscreen') {
+      self._chatWindow.classList.add('wakz-mode-fullscreen');
+      self._chatWindow.classList.remove('wakz-mode-modal');
+    } else {
+      self._chatWindow.classList.add('wakz-mode-modal');
+      self._chatWindow.classList.remove('wakz-mode-fullscreen');
+    }
+
+    /* ── Auto Trigger ── */
+    if (cfg.triggerMode === 'auto' && !self.isOpen) {
+      var autoDelay = Math.max(1, Math.min(60, parseInt(cfg.triggerDelay) || 5)) * 1000;
+      setTimeout(function () {
+        if (!self.isOpen) self.toggleChat(true);
+      }, autoDelay);
+    }
+
+    /* ── Header Colors (only apply if explicitly customized) ── */
+    if (cfg.headerColor) {
+      self._headerEl.style.background = cfg.headerColor;
+    }
+    if (cfg.headerTextColor) {
+      self._headerTitleEl.style.color = cfg.headerTextColor;
+      self._headerSubtitleEl.style.color = cfg.headerTextColor + 'aa';
+      self._closeBtn.style.color = cfg.headerTextColor;
+    }
+
     /* ── If chat is already open, show welcome message ── */
     if (self.isOpen && self.messages.length === 0 && cfg.welcomeMessage) {
       self._appendWelcomeMessage(cfg.welcomeMessage);

package/package.json

@@ -1 +1,41 @@
-{ "name": "wakz-chat-widget", "version": "4.0.0", "description": "WAKZ Chat Widget — Liquid Glass design with Shadow DOM isolation", "main": "index.js", "keywords": ["chat", "widget", "wakz", "liquid-glass", "shadow-dom"], "author": "WAKZ", "license": "MIT" }
+{
+  "name": "wakz-chat-widget",
+  "version": "4.0.2",
+  "description": "WAKZ Chat Widget — Liquid Glass design with Shadow DOM isolation, CSS Variables, Data-Driven customization, zero dependencies.",
+  "main": "index.js",
+  "scripts": {
+    "prepublishOnly": "echo 'Ready to publish wakz-chat-widget v4.0.1'"
+  },
+  "keywords": [
+    "chat",
+    "widget",
+    "ai",
+    "chatbot",
+    "wakz",
+    "embed",
+    "shadow-dom",
+    "customer-support",
+    "live-chat",
+    "saas",
+    "rtl",
+    "arabic",
+    "device-detection",
+    "zero-dependencies",
+    "css-variables",
+    "data-driven",
+    "liquid-glass"
+  ],
+  "author": "mohamed64 <mohamed01140251843sayed@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "files": [
+    "index.js",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}