@v-tilt/browser 1.4.7 → 1.5.0

package/lib/extensions/chat/chat.js

@@ -753,7 +753,7 @@ class LazyLoadedChat {
         }
     }
     _handleSend() {
-        var _a;
+        var _a, _b;
         const input = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-input");
         if (!input) {
             return;
@@ -770,6 +770,19 @@ class LazyLoadedChat {
             }
             this.sendMessage(content);
             input.value = "";
+            // Reset textarea height after sending
+            input.style.height = "auto";
+            input.style.height = "60px";
+            // Update send button state after sending
+            const sendButton = (_b = this._widget) === null || _b === void 0 ? void 0 : _b.querySelector(".vtilt-chat-send");
+            if (sendButton) {
+                const primary = this._theme.primaryColor;
+                sendButton.disabled = true;
+                sendButton.style.background = "#E5E5E5";
+                sendButton.style.color = "#999999";
+                sendButton.style.cursor = "not-allowed";
+                sendButton.style.opacity = "0.6";
+            }
         }
     }
     _updateUI() {
@@ -1151,60 +1164,134 @@ class LazyLoadedChat {
       </style>
       
       <div class="vtilt-chat-input-container" style="
-        padding: 12px 16px;
-        padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
+        padding: 8px 12px;
+        padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
         border-top: 1px solid #E5E5E5;
-        display: flex;
-        align-items: center;
-        gap: 12px;
         flex-shrink: 0;
         background: #ffffff;
       ">
-        <div style="flex: 1; min-width: 0;">
-          <input
-            type="text"
+        <div style="
+          position: relative;
+          border: 1px solid #DDDDDD;
+          border-radius: 12px;
+          background: #ffffff;
+          overflow: hidden;
+        ">
+          <textarea
             class="vtilt-chat-input"
             placeholder="Message..."
             autocomplete="off"
             autocorrect="on"
             autocapitalize="sentences"
+            rows="1"
             style="
               width: 100%;
               box-sizing: border-box;
-              border: 1px solid #DDDDDD;
-              border-radius: 24px;
-              padding: 12px 18px;
-              font-size: 16px;
+              border: none;
+              border-radius: 0;
+              padding: 12px 12px 36px 12px;
+              font-size: 15px;
               line-height: 1.4;
               outline: none;
-              background: #ffffff;
+              background: transparent;
               -webkit-appearance: none;
               appearance: none;
               color: #000000;
-              transition: border-color 0.15s ease, box-shadow 0.15s ease;
+              transition: none;
+              resize: none;
+              overflow-y: auto;
+              overflow-x: hidden;
+              min-height: 60px;
+              max-height: 120px;
+              font-family: inherit;
             "
-          />
+          ></textarea>
+          <div style="
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 0 8px 10px;
+            pointer-events: none;
+            z-index: 1;
+          ">
+            <button
+              class="vtilt-chat-attach"
+              style="
+                background: none;
+                border: none;
+                padding: 0;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 20px;
+                height: 20px;
+                pointer-events: auto;
+                color: #666666;
+                transition: color 0.15s ease;
+              "
+              title="Attach file"
+            >
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
+              </svg>
+            </button>
+            <button
+              class="vtilt-chat-mic"
+              style="
+                background: none;
+                border: none;
+                padding: 0;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 20px;
+                height: 20px;
+                pointer-events: auto;
+                color: #666666;
+                transition: color 0.15s ease;
+              "
+              title="Voice message"
+            >
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
+                <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
+                <line x1="12" y1="19" x2="12" y2="23"></line>
+                <line x1="8" y1="23" x2="16" y2="23"></line>
+              </svg>
+            </button>
+          </div>
+          <button class="vtilt-chat-send" disabled style="
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            background: #E5E5E5;
+            color: #999999;
+            border: none;
+            border-radius: 50%;
+            padding: 0;
+            width: 32px;
+            height: 32px;
+            margin: 6px 8px 6px 6px;
+            cursor: not-allowed;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            -webkit-tap-highlight-color: transparent;
+            touch-action: manipulation;
+            z-index: 2;
+            transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease, cursor 0.15s ease;
+            opacity: 0.6;
+          ">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+            </svg>
+          </button>
         </div>
-        <button class="vtilt-chat-send" style="
-          background: ${primary};
-          color: white;
-          border: none;
-          border-radius: 50%;
-          padding: 0;
-          width: 44px;
-          height: 44px;
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          -webkit-tap-highlight-color: transparent;
-          touch-action: manipulation;
-          flex-shrink: 0;
-        ">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
-            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
-          </svg>
-        </button>
       </div>
     `;
     }
@@ -1221,16 +1308,85 @@ class LazyLoadedChat {
         });
     }
     _attachConversationListeners() {
-        var _a, _b, _c;
-        (_b = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-send")) === null || _b === void 0 ? void 0 : _b.addEventListener("click", () => this._handleSend());
-        const input = (_c = this._widget) === null || _c === void 0 ? void 0 : _c.querySelector(".vtilt-chat-input");
-        input === null || input === void 0 ? void 0 : input.addEventListener("keypress", (e) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const sendButton = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-send");
+        sendButton === null || sendButton === void 0 ? void 0 : sendButton.addEventListener("click", () => {
+            if (!sendButton.disabled) {
+                this._handleSend();
+            }
+        });
+        const input = (_b = this._widget) === null || _b === void 0 ? void 0 : _b.querySelector(".vtilt-chat-input");
+        // Attachment button (placeholder for future functionality)
+        (_d = (_c = this._widget) === null || _c === void 0 ? void 0 : _c.querySelector(".vtilt-chat-attach")) === null || _d === void 0 ? void 0 : _d.addEventListener("click", (e) => {
+            e.preventDefault();
+            alert("File attachments coming soon!");
+        });
+        // Emoji button (placeholder for future functionality)
+        (_f = (_e = this._widget) === null || _e === void 0 ? void 0 : _e.querySelector(".vtilt-chat-emoji")) === null || _f === void 0 ? void 0 : _f.addEventListener("click", (e) => {
+            e.preventDefault();
+            // TODO: Implement emoji picker functionality
+            console.log("Emoji clicked - functionality coming soon");
+        });
+        // GIF button (placeholder for future functionality)
+        (_h = (_g = this._widget) === null || _g === void 0 ? void 0 : _g.querySelector(".vtilt-chat-gif")) === null || _h === void 0 ? void 0 : _h.addEventListener("click", (e) => {
+            e.preventDefault();
+            // TODO: Implement GIF picker functionality
+            console.log("GIF clicked - functionality coming soon");
+        });
+        // Microphone button (placeholder for future functionality)
+        (_k = (_j = this._widget) === null || _j === void 0 ? void 0 : _j.querySelector(".vtilt-chat-mic")) === null || _k === void 0 ? void 0 : _k.addEventListener("click", (e) => {
+            e.preventDefault();
+            alert("Voice messages coming soon!");
+        });
+        // Auto-resize textarea
+        const autoResize = () => {
+            if (input) {
+                input.style.height = "auto";
+                const scrollHeight = input.scrollHeight;
+                const minHeight = 60;
+                const maxHeight = 120;
+                input.style.height = `${Math.min(Math.max(scrollHeight, minHeight), maxHeight)}px`;
+            }
+        };
+        // Update send button state
+        const primary = this._theme.primaryColor;
+        const updateSendButton = () => {
+            var _a;
+            const sendButton = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-send");
+            if (sendButton && input) {
+                const hasText = input.value.trim().length > 0;
+                sendButton.disabled = !hasText;
+                if (hasText) {
+                    sendButton.style.background = primary || "#E5E5E5";
+                    sendButton.style.color = "white";
+                    sendButton.style.cursor = "pointer";
+                    sendButton.style.opacity = "1";
+                }
+                else {
+                    sendButton.style.background = "#E5E5E5";
+                    sendButton.style.color = "#999999";
+                    sendButton.style.cursor = "not-allowed";
+                    sendButton.style.opacity = "0.6";
+                }
+            }
+        };
+        input === null || input === void 0 ? void 0 : input.addEventListener("input", () => {
+            autoResize();
+            this._handleUserTyping();
+            updateSendButton();
+        });
+        // Keyboard handling: Enter sends, Shift+Enter creates new line
+        input === null || input === void 0 ? void 0 : input.addEventListener("keydown", (e) => {
             if (e.key === "Enter" && !e.shiftKey) {
                 e.preventDefault();
                 this._handleSend();
             }
         });
-        input === null || input === void 0 ? void 0 : input.addEventListener("input", () => this._handleUserTyping());
+        // Initial resize on mount
+        if (input) {
+            autoResize();
+            updateSendButton();
+        }
     }
     _formatRelativeTime(isoString) {
         const date = new Date(isoString);
@@ -1435,13 +1591,63 @@ class LazyLoadedChat {
         .vtilt-chat-close:hover { color: #000 !important; background: #F0F0F0 !important; }
         .vtilt-chat-back:hover { color: #000 !important; background: #F0F0F0 !important; }
         
-        .vtilt-chat-input { font-size: 16px !important; -webkit-text-size-adjust: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
-        .vtilt-chat-input:focus { border-color: ${primary} !important; box-shadow: 0 0 0 2px ${primary}20 !important; outline: none !important; }
-        .vtilt-chat-input::placeholder { color: #999999; }
+        .vtilt-chat-input-container > div:first-child:focus-within { 
+          border-color: ${primary} !important; 
+          box-shadow: 0 0 0 2px ${primary}20 !important; 
+        }
+        .vtilt-chat-input { 
+          font-size: 16px !important; 
+          -webkit-text-size-adjust: 100%; 
+        }
+        .vtilt-chat-input:focus { 
+          outline: none !important; 
+        }
+        .vtilt-chat-input::placeholder { 
+          color: #999999; 
+        }
+        .vtilt-chat-input::-webkit-scrollbar { 
+          width: 4px; 
+        }
+        .vtilt-chat-input::-webkit-scrollbar-track { 
+          background: transparent; 
+        }
+        .vtilt-chat-input::-webkit-scrollbar-thumb { 
+          background: rgba(0, 0, 0, 0.2); 
+          border-radius: 2px; 
+        }
+        .vtilt-chat-input::-webkit-scrollbar-thumb:hover { 
+          background: rgba(0, 0, 0, 0.3); 
+        }
+        /* Firefox scrollbar */
+        .vtilt-chat-input { 
+          scrollbar-width: thin; 
+          scrollbar-color: rgba(0, 0, 0, 0.2) transparent; 
+        }
+        .vtilt-chat-attach:hover,
+        .vtilt-chat-emoji:hover,
+        .vtilt-chat-gif:hover,
+        .vtilt-chat-mic:hover {
+          color: #333333 !important;
+        }
+        .vtilt-chat-attach:active,
+        .vtilt-chat-emoji:active,
+        .vtilt-chat-gif:active,
+        .vtilt-chat-mic:active {
+          color: #000000 !important;
+        }
+        .vtilt-chat-send:not(:disabled):hover {
+          opacity: 0.9 !important;
+          transform: scale(1.05);
+        }
+        .vtilt-chat-send:not(:disabled):active {
+          opacity: 0.8 !important;
+          transform: scale(0.95);
+        }
+        .vtilt-chat-send:disabled {
+          cursor: not-allowed !important;
+        }
         
         .vtilt-chat-send { transition: opacity 0.1s ease; }
-        .vtilt-chat-send:hover { opacity: 0.85; }
-        .vtilt-chat-send:active { opacity: 0.7; }
         
         .vtilt-chat-new-channel { transition: opacity 0.1s ease; }
         .vtilt-chat-new-channel:hover { opacity: 0.9; }

package/lib/utils/event-utils.js

@@ -24,7 +24,7 @@ const globals_1 = require("./globals");
 const user_agent_utils_1 = require("./user-agent-utils");
 const URL_REGEX_PREFIX = "https?://(.*)";
 // Library version - should match package.json version
-const LIB_VERSION = "1.0.7"; // TODO: Auto-import from package.json
+const LIB_VERSION = "1.5.0"; // TODO: Auto-import from package.json
 // Campaign parameters that could be considered personal data (e.g., GDPR)
 // These can be masked in URLs and properties before being sent
 exports.PERSONAL_DATA_CAMPAIGN_PARAMS = [

package/lib/vtilt.d.ts

@@ -4,7 +4,7 @@ import { SessionRecordingWrapper } from "./extensions/replay";
 import { ChatWrapper } from "./extensions/chat/chat-wrapper";
 import { type QueuedRequest } from "./request-queue";
 export declare class VTilt {
-    readonly version = "1.1.5";
+    readonly version = "1.5.0";
     private configManager;
     private sessionManager;
     private userManager;

package/lib/vtilt.js

@@ -34,7 +34,7 @@ const isArray = Array.isArray;
 class VTilt {
     constructor(config = {}) {
         // SDK version - injected at build time or defaults to package version
-        this.version = "1.1.5";
+        this.version = "1.5.0";
         this.__loaded = false; // Matches snippet's window.vt.__loaded check
         this._initial_pageview_captured = false;
         this._visibility_state_listener = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@v-tilt/browser",
-  "version": "1.4.7",
+  "version": "1.5.0",
   "description": "vTilt browser tracking library",
   "main": "dist/main.js",
   "module": "dist/module.js",