wakz-chat-widget 1.1.0 → 2.2.0

package/README.md

@@ -1,43 +1,70 @@
 # wakz-chat-widget
 
-Production-grade AI chat widget by **WAKZ** — Shadow DOM isolated, zero dependencies, Intercom/Crisp quality.
+**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
 
-No installation needed. Add this script tag to your website:
+```bash
+npm install wakz-chat-widget
+```
+
+## Usage
+
+Copy `index.js` from `node_modules/wakz-chat-widget/` to your public folder and include it:
 
 ```html
-<!-- WAKZ Chat Widget -->
-<script
-  src="https://unpkg.com/wakz-chat-widget@latest/index.js"
+<script src="/wakz-widget.js"
   data-api-key="YOUR_API_KEY"
-  data-server="https://your-wakz-server.com"
+  data-server="https://your-server.com"
   async>
 </script>
 ```
 
-Replace:
-- `YOUR_API_KEY` — Your WAKZ embed API key
-- `https://your-wakz-server.com` — Your WAKZ server URL
+## Configuration
 
-## Features
+The widget fetches its configuration from your server's `/api/v1/embed/config` endpoint. Configurable options include:
 
-- **Shadow DOM** — Fully isolated from your website's CSS
-- **Zero Dependencies** — Pure vanilla JavaScript
-- **RTL Support** — Full Arabic/Hebrew right-to-left support
-- **Dynamic Theming** — Colors, position, bot name, welcome message configurable from dashboard
-- **Responsive** — Full-screen on mobile, floating window on desktop
-- **Real-time Chat** — AI-powered responses via WAKZ backend
-- **Typing Indicator** — Smooth animated dots while bot is thinking
-- **Session Persistence** — Chat history preserved across page reloads
-- **Online/Offline Status** — Green/red dot with pulse animation
+| 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 |
 
-## CDN
+## Version History
 
-```html
-https://unpkg.com/wakz-chat-widget@latest/index.js
-https://cdn.jsdelivr.net/npm/wakz-chat-widget@latest/index.js
-```
+### 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
 

package/index.js

@@ -1,5 +1,5 @@
 /**
- * WAKZ Chat Widget v2.1.0
+ * WAKZ Chat Widget v2.2.0
  * ─────────────────────────────────────────────────────────────────
  * A production-grade, self-contained chat widget using Shadow DOM.
  * Competes with Intercom & Crisp in quality.
@@ -79,6 +79,46 @@
     return el;
   }
 
+  /** Detect device model, platform, and type using userAgentData API (Chrome 90+) with UA fallback */
+  function _getDeviceInfo() {
+    var info = {
+      device_model: '',
+      device_platform: '',
+      device_type: 'desktop'
+    };
+
+    // Try userAgentData API (Chrome 90+, Edge, Samsung Browser — NOT Safari/Firefox)
+    if (navigator.userAgentData) {
+      info.device_model = navigator.userAgentData.model || '';
+      info.device_platform = navigator.userAgentData.platform || '';
+      if (navigator.userAgentData.mobile === true) {
+        info.device_type = 'mobile';
+      } else if (navigator.userAgentData.mobile === false && info.device_platform === 'Android') {
+        info.device_type = 'tablet';
+      } else {
+        info.device_type = 'desktop';
+      }
+    }
+
+    // Fallback: parse from user agent string
+    var ua = navigator.userAgent || '';
+    if (!info.device_platform) {
+      if (/iPhone|iPad|iPod/i.test(ua)) info.device_platform = 'iOS';
+      else if (/Android/i.test(ua)) info.device_platform = 'Android';
+      else if (/Windows/i.test(ua)) info.device_platform = 'Windows';
+      else if (/Mac OS X/i.test(ua)) info.device_platform = 'macOS';
+      else if (/CrOS/i.test(ua)) info.device_platform = 'Chrome OS';
+      else if (/Linux/i.test(ua)) info.device_platform = 'Linux';
+    }
+    if (info.device_type === 'desktop') {
+      if (/iPad/i.test(ua)) info.device_type = 'tablet';
+      else if (/Mobile|iPhone|iPod/i.test(ua)) info.device_type = 'mobile';
+      else if (/Android(?!.*Mobile)/i.test(ua)) info.device_type = 'tablet';
+      else if (/Android/i.test(ua)) info.device_type = 'mobile';
+    }
+    return info;
+  }
+
   /** Fetch with an AbortController timeout (default 30s) */
   function _fetchWithTimeout(url, options, timeoutMs) {
     var controller = new AbortController();
@@ -182,6 +222,7 @@
     self.apiKey = attrs.apiKey;
     self.server = attrs.server;
     self.visitorId = _getVisitorId();
+    self._deviceInfo = _getDeviceInfo(); // Device model, platform, type — collected once
 
     /* ── Runtime state ── */
     self.config = Object.assign({}, _DEFAULTS);
@@ -196,6 +237,7 @@
     self._lastPollTime = null;
     self._POLL_INTERVAL = 4000; /* Poll every 4 seconds */
     self._knownMessageIds = {}; /* Deduplication set for message IDs */
+    self._pendingReply = false;  /* True while waiting for API response — pauses polling */
 
     /* ── DOM refs (populated after mount) ── */
     self._host = null;
@@ -1105,6 +1147,8 @@
   WAKZWidget.prototype._pollForNewMessages = function () {
     var self = this;
     if (!self.server || !self.apiKey || !self._lastPollTime) return;
+    /* Skip polling while waiting for our own reply — prevents race condition duplicates */
+    if (self._pendingReply) return;
 
     var url = self.server + '/api/v1/embed/chat?api_key=' +
       encodeURIComponent(self.apiKey) +
@@ -1328,6 +1372,10 @@
     self._sendBtn.disabled = true;
     self._showTyping();
 
+    /* Freeze poll time BEFORE sending — prevents polling from fetching our own messages */
+    self._lastPollTime = new Date().toISOString();
+    self._pendingReply = true;
+
     var payload = {
       api_key: self.apiKey,
       visitor_id: self.visitorId,
@@ -1336,7 +1384,10 @@
         domain: window.location.hostname || '',
         page_url: window.location.href || '',
         user_agent: navigator.userAgent || '',
-        language: navigator.language || ''
+        language: navigator.language || '',
+        device_model: self._deviceInfo.device_model || '',
+        device_platform: self._deviceInfo.device_platform || '',
+        device_type: self._deviceInfo.device_type || 'desktop'
       }
     };
 
@@ -1351,19 +1402,23 @@
     .then(function (res) { return res.json(); })
     .then(function (data) {
       self._hideTyping();
+      self._pendingReply = false;
       if (data && data.success && data.reply) {
         self._appendMessage('bot', data.reply);
       } else {
         self._appendMessage('bot', _strings(self.config.language).errorMsg, true);
       }
-      /* Update poll time to prevent re-fetching messages we already displayed */
-      self._lastPollTime = new Date().toISOString();
+      /* Advance poll time past any messages created during this request */
+      self._lastPollTime = (data && data.timestamp)
+        ? new Date(new Date(data.timestamp).getTime() + 1000).toISOString()
+        : new Date(Date.now() + 1000).toISOString();
     })
     .catch(function () {
       self._hideTyping();
+      self._pendingReply = false;
       self._appendMessage('bot', _strings(self.config.language).errorMsg, true);
-      /* Update poll time even on error to prevent re-fetching */
-      self._lastPollTime = new Date().toISOString();
+      /* Advance poll time even on error */
+      self._lastPollTime = new Date(Date.now() + 1000).toISOString();
     })
     .finally(function () {
       self.isLoading = false;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "wakz-chat-widget",
-  "version": "1.1.0",
-  "description": "Production-grade AI chat widget by WAKZ — Shadow DOM isolated, zero dependencies, Intercom/Crisp quality.",
+  "version": "2.2.0",
+  "description": "Premium AI chat widget by WAKZ — Production-grade, Shadow DOM, zero dependencies, multi-language support, device detection, RTL support.",
   "main": "index.js",
   "scripts": {
-    "prepublishOnly": "echo 'Ready to publish wakz-chat-widget'"
+    "prepublishOnly": "echo 'Ready to publish wakz-chat-widget v2.2.0'"
   },
   "keywords": [
     "chat",
@@ -16,9 +16,13 @@
     "shadow-dom",
     "customer-support",
     "live-chat",
-    "saas"
+    "saas",
+    "rtl",
+    "arabic",
+    "device-detection",
+    "zero-dependencies"
   ],
-  "author": "WAKZ",
+  "author": "mohamed64 <mohamed01140251843sayed@gmail.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -27,5 +31,8 @@
   "files": [
     "index.js",
     "README.md"
-  ]
+  ],
+  "engines": {
+    "node": ">=12.0.0"
+  }
 }