@v-tilt/browser 1.4.0 → 1.4.1

package/lib/entrypoints/external-scripts-loader.js

@@ -72,7 +72,7 @@ exports.loadScript = loadScript;
 /**
  * SDK version - used for loading correct script version from CDN
  */
-const SDK_VERSION = "1.3.0";
+const SDK_VERSION = "1.4.1";
 /**
  * Get the URL for an extension script
  *

package/lib/extensions/chat/chat-wrapper.js

@@ -367,26 +367,26 @@ class ChatWrapper {
         const color = mergedConfig.color || "#6366f1";
         const bubble = document.createElement("div");
         bubble.id = "vtilt-chat-bubble";
-        bubble.setAttribute("style", `
-      position: fixed;
-      bottom: 20px;
-      ${position === "bottom-right" ? "right: 20px;" : "left: 20px;"}
-      width: 60px;
-      height: 60px;
-      border-radius: 50%;
-      background: ${color};
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      transition: transform 0.2s, box-shadow 0.2s;
-      z-index: 999999;
+        bubble.setAttribute("style", `
+      position: fixed;
+      bottom: 20px;
+      ${position === "bottom-right" ? "right: 20px;" : "left: 20px;"}
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background: ${color};
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      transition: transform 0.2s, box-shadow 0.2s;
+      z-index: 999999;
     `.trim());
-        bubble.innerHTML = `
-      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
-        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-      </svg>
+        bubble.innerHTML = `
+      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+      </svg>
     `;
         // Hover effect
         bubble.addEventListener("mouseenter", () => {

package/lib/extensions/chat/chat.js

@@ -136,8 +136,7 @@ class LazyLoadedChat {
         this._updateUI();
         this._trackEvent(types_1.CHAT_EVENTS.WIDGET_CLOSED, {
             $time_open_seconds: timeOpen,
-            $messages_sent: this._state.messages.filter((m) => m.sender_type === "user")
-                .length,
+            $messages_sent: this._state.messages.filter((m) => m.sender_type === "user").length,
         });
     }
     toggle() {
@@ -239,7 +238,8 @@ class LazyLoadedChat {
         if (!latestMessage)
             return;
         // Check if there are unread agent messages
-        const hasUnreadAgentMessages = this._state.messages.some((m) => (m.sender_type === "agent" || m.sender_type === "ai") && !this._isMessageReadByUser(m.created_at));
+        const hasUnreadAgentMessages = this._state.messages.some((m) => (m.sender_type === "agent" || m.sender_type === "ai") &&
+            !this._isMessageReadByUser(m.created_at));
         if (!hasUnreadAgentMessages)
             return;
         this._state.unreadCount = 0;
@@ -342,7 +342,8 @@ class LazyLoadedChat {
                 this._state.channel = response.channel;
                 this._state.messages = response.messages || [];
                 // Initialize read cursors from channel
-                this._state.agentLastReadAt = response.channel.agent_last_read_at || null;
+                this._state.agentLastReadAt =
+                    response.channel.agent_last_read_at || null;
                 this._initialUserReadAt = response.channel.user_last_read_at || null;
                 // Track channel started (only if new)
                 if (response.messages.length === 0 || response.messages.length === 1) {
@@ -493,9 +494,12 @@ class LazyLoadedChat {
             return;
         // Skip user's own messages - we already have them from optimistic updates
         // The sender_id for user messages is the distinct_id
-        if (message.sender_type === "user" && message.sender_id === this._instance.getDistinctId()) {
+        if (message.sender_type === "user" &&
+            message.sender_id === this._instance.getDistinctId()) {
             // But DO replace temp message with real one if present
-            const tempIndex = this._state.messages.findIndex((m) => m.id.startsWith("temp-") && m.content === message.content && m.sender_type === "user");
+            const tempIndex = this._state.messages.findIndex((m) => m.id.startsWith("temp-") &&
+                m.content === message.content &&
+                m.sender_type === "user");
             if (tempIndex !== -1) {
                 this._state.messages[tempIndex] = message;
                 this._updateUI();
@@ -533,7 +537,8 @@ class LazyLoadedChat {
         // Only show typing for non-user senders
         if (event.sender_type === "user")
             return;
-        const senderName = event.sender_name || (event.sender_type === "ai" ? "AI Assistant" : "Agent");
+        const senderName = event.sender_name ||
+            (event.sender_type === "ai" ? "AI Assistant" : "Agent");
         this._state.isTyping = event.is_typing;
         this._state.typingSender = event.is_typing ? senderName : null;
         // Notify callbacks
@@ -696,19 +701,20 @@ class LazyLoadedChat {
             return;
         const theme = this._config.theme || DEFAULT_THEME;
         // Find first unread agent message index
-        const firstUnreadIndex = this._state.messages.findIndex((m) => (m.sender_type === "agent" || m.sender_type === "ai") && !this._isMessageReadByUser(m.created_at));
+        const firstUnreadIndex = this._state.messages.findIndex((m) => (m.sender_type === "agent" || m.sender_type === "ai") &&
+            !this._isMessageReadByUser(m.created_at));
         // Build HTML with unread divider
         const messagesHtml = this._state.messages
             .map((msg, index) => {
             let html = "";
             // Add unread divider before first unread message
             if (index === firstUnreadIndex && firstUnreadIndex > 0) {
-                html += `
-            <div style="display: flex; align-items: center; gap: 12px; margin: 8px 0;">
-              <div style="flex: 1; height: 1px; background: ${theme.primaryColor}40;"></div>
-              <span style="font-size: 11px; font-weight: 500; color: ${theme.primaryColor}; padding: 0 8px;">New messages</span>
-              <div style="flex: 1; height: 1px; background: ${theme.primaryColor}40;"></div>
-            </div>
+                html += `
+            <div style="display: flex; align-items: center; gap: 12px; margin: 8px 0;">
+              <div style="flex: 1; height: 1px; background: ${theme.primaryColor}40;"></div>
+              <span style="font-size: 11px; font-weight: 500; color: ${theme.primaryColor}; padding: 0 8px;">New messages</span>
+              <div style="flex: 1; height: 1px; background: ${theme.primaryColor}40;"></div>
+            </div>
           `;
             }
             html += this._getMessageHTML(msg);
@@ -726,179 +732,179 @@ class LazyLoadedChat {
         var _a;
         const position = this._config.position || DEFAULT_POSITION;
         const isRight = position === "bottom-right";
-        return `
-      position: fixed;
-      bottom: 20px;
-      ${isRight ? "right: 20px;" : "left: 20px;"}
-      z-index: 999999;
-      font-family: ${((_a = this._config.theme) === null || _a === void 0 ? void 0 : _a.fontFamily) || DEFAULT_THEME.fontFamily};
+        return `
+      position: fixed;
+      bottom: 20px;
+      ${isRight ? "right: 20px;" : "left: 20px;"}
+      z-index: 999999;
+      font-family: ${((_a = this._config.theme) === null || _a === void 0 ? void 0 : _a.fontFamily) || DEFAULT_THEME.fontFamily};
     `;
     }
     _getBubbleStyles() {
         const theme = this._config.theme || DEFAULT_THEME;
-        return `
-      width: 60px;
-      height: 60px;
-      border-radius: 50%;
-      background: ${theme.primaryColor};
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      transition: transform 0.2s, box-shadow 0.2s;
-      position: relative;
+        return `
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background: ${theme.primaryColor};
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      transition: transform 0.2s, box-shadow 0.2s;
+      position: relative;
     `;
     }
     _getBubbleHTML() {
-        return `
-      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
-        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-      </svg>
-      <div class="vtilt-chat-badge" style="
-        display: none;
-        position: absolute;
-        top: -5px;
-        right: -5px;
-        background: #ef4444;
-        color: white;
-        font-size: 12px;
-        font-weight: 600;
-        min-width: 20px;
-        height: 20px;
-        border-radius: 10px;
-        align-items: center;
-        justify-content: center;
-      ">0</div>
+        return `
+      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+      </svg>
+      <div class="vtilt-chat-badge" style="
+        display: none;
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        background: #ef4444;
+        color: white;
+        font-size: 12px;
+        font-weight: 600;
+        min-width: 20px;
+        height: 20px;
+        border-radius: 10px;
+        align-items: center;
+        justify-content: center;
+      ">0</div>
     `;
     }
     _getWidgetStyles() {
         const theme = this._config.theme || DEFAULT_THEME;
-        return `
-      display: none;
-      flex-direction: column;
-      position: absolute;
-      bottom: 80px;
-      right: 0;
-      width: 380px;
-      height: 520px;
-      background: white;
-      border-radius: ${theme.borderRadius};
-      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
-      overflow: hidden;
+        return `
+      display: none;
+      flex-direction: column;
+      position: absolute;
+      bottom: 80px;
+      right: 0;
+      width: 380px;
+      height: 520px;
+      background: white;
+      border-radius: ${theme.borderRadius};
+      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+      overflow: hidden;
     `;
     }
     _getWidgetHTML() {
         const theme = this._config.theme || DEFAULT_THEME;
         const greeting = this._config.greeting || "How can we help you?";
-        return `
-      <div class="vtilt-chat-header" style="
-        background: ${theme.headerBgColor};
-        color: white;
-        padding: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      ">
-        <div style="font-weight: 600; font-size: 16px;">${greeting}</div>
-        <button class="vtilt-chat-close" style="
-          background: none;
-          border: none;
-          color: white;
-          cursor: pointer;
-          padding: 4px;
-        ">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M18 6L6 18M6 6l12 12"></path>
-          </svg>
-        </button>
-      </div>
-      
-      <div class="vtilt-chat-messages" style="
-        flex: 1;
-        overflow-y: auto;
-        padding: 16px;
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-      "></div>
-      
-      <div class="vtilt-chat-loader" style="
-        display: none;
-        align-items: center;
-        justify-content: center;
-        padding: 20px;
-      ">
-        <div style="
-          width: 24px;
-          height: 24px;
-          border: 2px solid #e5e7eb;
-          border-top-color: ${theme.primaryColor};
-          border-radius: 50%;
-          animation: vtilt-spin 0.8s linear infinite;
-        "></div>
-      </div>
-      
-      <div class="vtilt-chat-typing" style="
-        display: none;
-        padding: 8px 16px;
-        color: #6b7280;
-        font-size: 14px;
-      ">
-        <span style="animation: vtilt-pulse 1.5s infinite;">Agent is typing...</span>
-      </div>
-      
-      <div class="vtilt-chat-input-container" style="
-        padding: 16px;
-        border-top: 1px solid #e5e7eb;
-        display: flex;
-        gap: 8px;
-      ">
-        <input
-          type="text"
-          class="vtilt-chat-input"
-          placeholder="Type a message..."
-          style="
-            flex: 1;
-            border: 1px solid #e5e7eb;
-            border-radius: 8px;
-            padding: 10px 14px;
-            font-size: 14px;
-            outline: none;
-            transition: border-color 0.2s;
-          "
-        />
-        <button class="vtilt-chat-send" style="
-          background: ${theme.primaryColor};
-          color: white;
-          border: none;
-          border-radius: 8px;
-          padding: 10px 16px;
-          cursor: pointer;
-          font-weight: 500;
-          transition: opacity 0.2s;
-        ">Send</button>
-      </div>
-      
-      <style>
-        @keyframes vtilt-spin {
-          to { transform: rotate(360deg); }
-        }
-        @keyframes vtilt-pulse {
-          0%, 100% { opacity: 1; }
-          50% { opacity: 0.5; }
-        }
-        #vtilt-chat-bubble:hover {
-          transform: scale(1.05);
-          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
-        }
-        .vtilt-chat-input:focus {
-          border-color: ${theme.primaryColor} !important;
-        }
-        .vtilt-chat-send:hover {
-          opacity: 0.9;
-        }
-      </style>
+        return `
+      <div class="vtilt-chat-header" style="
+        background: ${theme.headerBgColor};
+        color: white;
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      ">
+        <div style="font-weight: 600; font-size: 16px;">${greeting}</div>
+        <button class="vtilt-chat-close" style="
+          background: none;
+          border: none;
+          color: white;
+          cursor: pointer;
+          padding: 4px;
+        ">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 6L6 18M6 6l12 12"></path>
+          </svg>
+        </button>
+      </div>
+      
+      <div class="vtilt-chat-messages" style="
+        flex: 1;
+        overflow-y: auto;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      "></div>
+      
+      <div class="vtilt-chat-loader" style="
+        display: none;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+      ">
+        <div style="
+          width: 24px;
+          height: 24px;
+          border: 2px solid #e5e7eb;
+          border-top-color: ${theme.primaryColor};
+          border-radius: 50%;
+          animation: vtilt-spin 0.8s linear infinite;
+        "></div>
+      </div>
+      
+      <div class="vtilt-chat-typing" style="
+        display: none;
+        padding: 8px 16px;
+        color: #6b7280;
+        font-size: 14px;
+      ">
+        <span style="animation: vtilt-pulse 1.5s infinite;">Agent is typing...</span>
+      </div>
+      
+      <div class="vtilt-chat-input-container" style="
+        padding: 16px;
+        border-top: 1px solid #e5e7eb;
+        display: flex;
+        gap: 8px;
+      ">
+        <input
+          type="text"
+          class="vtilt-chat-input"
+          placeholder="Type a message..."
+          style="
+            flex: 1;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
+            padding: 10px 14px;
+            font-size: 14px;
+            outline: none;
+            transition: border-color 0.2s;
+          "
+        />
+        <button class="vtilt-chat-send" style="
+          background: ${theme.primaryColor};
+          color: white;
+          border: none;
+          border-radius: 8px;
+          padding: 10px 16px;
+          cursor: pointer;
+          font-weight: 500;
+          transition: opacity 0.2s;
+        ">Send</button>
+      </div>
+      
+      <style>
+        @keyframes vtilt-spin {
+          to { transform: rotate(360deg); }
+        }
+        @keyframes vtilt-pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+        #vtilt-chat-bubble:hover {
+          transform: scale(1.05);
+          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+        }
+        .vtilt-chat-input:focus {
+          border-color: ${theme.primaryColor} !important;
+        }
+        .vtilt-chat-send:hover {
+          opacity: 0.9;
+        }
+      </style>
     `;
     }
     _getMessageHTML(message) {
@@ -923,23 +929,23 @@ class LazyLoadedChat {
         const unreadBadge = isUnread && !this._isMarkingRead
             ? `<span style="font-size: 10px; font-weight: 600; color: ${theme.primaryColor}; background: ${theme.primaryColor}20; padding: 2px 6px; border-radius: 9999px;">NEW</span>`
             : "";
-        return `
-      <div style="display: flex; flex-direction: column; ${isUser ? "align-items: flex-end;" : "align-items: flex-start;"}${isUnread && !this._isMarkingRead ? " position: relative;" : ""}">
-        ${!isUser && senderLabel ? `<div style="font-size: 12px; color: #6b7280; margin-bottom: 4px;">${senderLabel}</div>` : ""}
-        <div style="
-          max-width: 80%;
-          padding: 10px 14px;
-          border-radius: 12px;
-          font-size: 14px;
-          line-height: 1.4;
-          transition: opacity 0.3s, box-shadow 0.3s;
-          ${bubbleStyle}${this._isMarkingRead && isUnread ? " opacity: 0.7;" : ""}
-        ">${this._escapeHTML(message.content)}</div>
-        <div style="font-size: 11px; color: #9ca3af; margin-top: 4px; display: flex; align-items: center; gap: 4px;">
-          ${this._formatTime(message.created_at)}
-          ${isUser ? (isReadByAgent ? doubleCheckSvg : singleCheckSvg) : unreadBadge}
-        </div>
-      </div>
+        return `
+      <div style="display: flex; flex-direction: column; ${isUser ? "align-items: flex-end;" : "align-items: flex-start;"}${isUnread && !this._isMarkingRead ? " position: relative;" : ""}">
+        ${!isUser && senderLabel ? `<div style="font-size: 12px; color: #6b7280; margin-bottom: 4px;">${senderLabel}</div>` : ""}
+        <div style="
+          max-width: 80%;
+          padding: 10px 14px;
+          border-radius: 12px;
+          font-size: 14px;
+          line-height: 1.4;
+          transition: opacity 0.3s, box-shadow 0.3s;
+          ${bubbleStyle}${this._isMarkingRead && isUnread ? " opacity: 0.7;" : ""}
+        ">${this._escapeHTML(message.content)}</div>
+        <div style="font-size: 11px; color: #9ca3af; margin-top: 4px; display: flex; align-items: center; gap: 4px;">
+          ${this._formatTime(message.created_at)}
+          ${isUser ? (isReadByAgent ? doubleCheckSvg : singleCheckSvg) : unreadBadge}
+        </div>
+      </div>
     `;
     }
     /**

package/package.json

@@ -1,66 +1,66 @@
-{
-  "name": "@v-tilt/browser",
-  "version": "1.4.0",
-  "description": "vTilt browser tracking library",
-  "main": "dist/main.js",
-  "module": "dist/module.js",
-  "types": "dist/module.d.ts",
-  "files": [
-    "lib/*",
-    "dist/*"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "build": "tsc -b && rollup -c",
-    "dev": "rollup -c -w",
-    "type-check": "tsc --noEmit",
-    "lint": "eslint src --ext .ts",
-    "lint:fix": "eslint src --ext .ts --fix",
-    "clean": "rimraf lib dist",
-    "prepublishOnly": "pnpm run build"
-  },
-  "keywords": [
-    "analytics",
-    "tracking",
-    "web-vitals",
-    "performance"
-  ],
-  "author": "vTilt",
-  "license": "MIT",
-  "devDependencies": {
-    "@babel/preset-env": "^7.28.3",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.8",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.3.1",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@types/node": "^20.10.5",
-    "@v-tilt/eslint-config": "workspace:*",
-    "eslint": "^9.0.0",
-    "rimraf": "^5.0.5",
-    "rollup": "^4.9.1",
-    "rollup-plugin-dts": "^6.2.3",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^6.0.3",
-    "typescript": "^5.3.3"
-  },
-  "dependencies": {
-    "@rrweb/record": "2.0.0-alpha.17",
-    "@rrweb/rrweb-plugin-console-record": "2.0.0-alpha.17",
-    "@rrweb/types": "2.0.0-alpha.17",
-    "ably": "^2.4.0",
-    "fflate": "^0.8.2",
-    "web-vitals": "^3.5.0"
-  },
-  "peerDependencies": {
-    "web-vitals": "^3.0.0"
-  },
-  "peerDependenciesMeta": {
-    "web-vitals": {
-      "optional": true
-    }
-  }
-}
+{
+  "name": "@v-tilt/browser",
+  "version": "1.4.1",
+  "description": "vTilt browser tracking library",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/module.d.ts",
+  "files": [
+    "lib/*",
+    "dist/*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b && rollup -c",
+    "dev": "rollup -c -w",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext .ts",
+    "lint:fix": "eslint src --ext .ts --fix",
+    "clean": "rimraf lib dist",
+    "prepublishOnly": "pnpm run build"
+  },
+  "keywords": [
+    "analytics",
+    "tracking",
+    "web-vitals",
+    "performance"
+  ],
+  "author": "vTilt",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/preset-env": "^7.28.3",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/node": "^20.10.5",
+    "@v-tilt/eslint-config": "workspace:*",
+    "eslint": "^9.0.0",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.9.1",
+    "rollup-plugin-dts": "^6.2.3",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "@rrweb/record": "2.0.0-alpha.17",
+    "@rrweb/rrweb-plugin-console-record": "2.0.0-alpha.17",
+    "@rrweb/types": "2.0.0-alpha.17",
+    "ably": "^2.4.0",
+    "fflate": "^0.8.2",
+    "web-vitals": "^3.5.0"
+  },
+  "peerDependencies": {
+    "web-vitals": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "web-vitals": {
+      "optional": true
+    }
+  }
+}