wakz-chat-widget 4.0.0 → 4.0.1

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

@@ -210,11 +210,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: ''
   };
 
   /* ════════════════════════════════════════════════════════════════
@@ -1067,7 +1079,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 +1237,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 +1276,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 +1340,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 +1393,56 @@
     /* ── Send button label ── */
     self._sendBtn.setAttribute('aria-label', str.sendMessage);
 
+    /* ── FAB Icon ── */
+    var iconKey = cfg.fabIcon || 'chat';
+    if (iconKey === 'chat') {
+      self._toggleBtn.innerHTML = _ICONS.chatBubble;
+    } else if (_ICONS[iconKey]) {
+      self._toggleBtn.innerHTML = _ICONS[iconKey];
+    }
+    /* 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.1",
+  "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"
+  }
+}